/* Visual feature demonstrations. All selectors are scoped to the platform. */
.platform-section.platform-visual .bento-card{position:relative;overflow:hidden;border-radius:25px;border:1px solid #e8e8ec}
.platform-section.platform-visual .bento-copy{padding:31px 29px 0;max-width:none}
.platform-section.platform-visual .bento-copy .tile-label{display:block;font-size:8px;letter-spacing:1.4px;color:#93939d;margin-bottom:14px}
.platform-section.platform-visual .bento-copy h3{font-size:29px;line-height:1.08;letter-spacing:-1px;margin:0 0 12px;font-weight:600}
.platform-section.platform-visual .bento-copy p{font-size:12px;line-height:1.65;max-width:300px;color:#85858f}
.platform-section.platform-visual .bento-builder{background:#f3f1ed}
.platform-section.platform-visual .bento-responsive{background:#edf1f6;color:#263444}
.platform-section.platform-visual .bento-seo{background:#fbf3ea}
.platform-section.platform-visual .bento-hosting{background:#eff3ef}
.platform-section.platform-visual .bento-connected{background:#19191e;color:#f4f4f7;border-color:#19191e}
.platform-section.platform-visual .bento-builder .bento-copy{max-width:29%;padding:58px 0 0 39px}
.platform-section.platform-visual .bento-builder .bento-copy h3{font-size:43px;letter-spacing:-1.8px}
.platform-section.platform-visual .bento-builder .bento-copy p{max-width:230px;font-size:13px}
.platform-section.platform-visual .bento-hosting .bento-copy{max-width:43%;padding:40px 0 0 30px}
.platform-section.platform-visual .bento-connected .bento-copy{max-width:none;padding:33px 29px 0}
.platform-section.platform-visual .bento-connected .bento-copy p{color:#92929f;max-width:260px}
.platform-section.platform-visual .tile-more{left:auto;right:17px;bottom:17px;background:#ffffffa8;color:#72727d;border:1px solid #ffffff75;width:30px;height:30px;backdrop-filter:blur(10px)}
.platform-section.platform-visual .tile-more:hover{background:#fff;color:#ff5f1f}
.platform-visual .fx-art{position:absolute;pointer-events:none;user-select:none}
.platform-visual .fx-art svg{display:block}
.platform-visual .fx-art img{display:block;user-select:none;pointer-events:none}
.platform-visual .fx-art *{box-sizing:border-box;animation-play-state:paused}
.platform-visual .fx-inview .fx-art *{animation-play-state:running}
.platform-visual.fx-idle .fx-art *{animation-play-state:paused!important}
/* Builder: the photo lands in a selected page block. */
.platform-visual .fx-editor-stage{left:33%;right:28px;top:39px;bottom:34px}
.platform-visual .fx-editor-frame{width:100%;height:100%;border:1px solid #d9d9dd;border-radius:17px;overflow:hidden;background:#fff;box-shadow:0 25px 55px #635b4920;transform:perspective(1400px) rotateY(-3deg) rotateZ(-1deg)}
.platform-visual .fx-editor-top{height:39px;background:#fcfcfd;border-bottom:1px solid #ececf0;display:flex;align-items:center;padding:0 17px;gap:15px}
.platform-visual .fx-editor-top>b{font-size:12px;font-weight:650;letter-spacing:-.5px;color:#565660}
.platform-visual .fx-top-icons{display:flex;gap:14px;margin-left:auto;color:#aaaab5}.platform-visual .fx-top-icons svg{width:14px;height:14px}
.platform-visual .fx-editor-top>i{width:6px;height:6px;border-radius:50%;background:#f58c5d}
.platform-visual .fx-editor-body{display:grid;grid-template-columns:39px 96px minmax(0,1fr);height:calc(100% - 39px);background:#eeeff2}
.platform-visual .fx-editor-rail{display:flex;flex-direction:column;gap:20px;align-items:center;padding:18px 0;background:#fff;border-right:1px solid #eeeef1;color:#a2a2af}
.platform-visual .fx-editor-rail>span{width:20px;height:20px;display:grid;place-items:center}.platform-visual .fx-editor-rail svg{width:16px;height:16px}.platform-visual .fx-editor-rail>span:first-child{color:#f47740}
.platform-visual .fx-editor-library{padding:15px 11px;display:flex;flex-direction:column;gap:11px;background:#f9f9fb;border-right:1px solid #e9e9ee}
.platform-visual .fx-editor-library>span{height:58px;border:1px solid #e1e1e8;overflow:hidden;border-radius:6px;background:#e2e4e6}.platform-visual .fx-editor-library>span>img{width:100%;height:100%;object-fit:cover;object-position:center 77%}
.platform-visual .fx-editor-library>i{display:grid;place-items:center;border:1px dashed #d7d7e0;border-radius:6px;min-height:28px;color:#b3b3be;font-style:normal;font-size:18px}
.platform-visual .fx-page-canvas{position:relative;margin:17px 16px;background:#fff;border:1px solid #e6e6ed;box-shadow:0 5px 12px #37374808;overflow:visible}
.platform-visual .fx-page-nav{height:41px;display:flex;align-items:center;justify-content:flex-end;gap:9px;padding:0 16px;border-bottom:1px solid #f2f2f4}
.platform-visual .fx-page-nav>span{width:54px;height:7px;border-radius:5px;background:#727b72;margin-right:auto}.platform-visual .fx-page-nav>i{width:17px;height:3px;border-radius:3px;background:#d9ddd9}
.platform-visual .fx-page-type{position:absolute;left:18px;top:83px;width:37%;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.platform-visual .fx-page-type>b{width:100%;height:12px;border-radius:3px;background:#424c43}.platform-visual .fx-page-type>b:nth-child(2){width:78%}
.platform-visual .fx-page-type>span{width:93%;height:4px;border-radius:4px;background:#d9ddd8;margin-top:3px}.platform-visual .fx-page-type>span:nth-of-type(2){width:72%;margin-top:0}
.platform-visual .fx-page-type>i{width:49px;height:25px;border-radius:20px;background:#f28a56;color:white;display:grid;place-items:center;font-style:normal;font-size:13px;margin-top:8px}
.platform-visual .fx-drop-slot,.platform-visual .fx-drag-photo{position:absolute;right:17px;top:72px;width:46%;height:57%;border-radius:4px}
.platform-visual .fx-drop-slot{border:1px dashed #f3b194;background:#fff6ee}
.platform-visual .fx-drag-photo{border:2px solid #ff925d;box-shadow:0 9px 20px #34362d16;animation:fx-block-drop 10s cubic-bezier(.25,.1,.25,1) infinite;will-change:translate}
.platform-visual .fx-drag-photo>img{height:100%;width:100%;object-fit:cover;object-position:center 76%}
.platform-visual .fx-handle{position:absolute;width:6px;height:6px;background:#fff;border:1px solid #ff8d56}.platform-visual .fx-handle-a{left:-4px;top:-4px}.platform-visual .fx-handle-b{right:-4px;top:-4px}.platform-visual .fx-handle-c{left:-4px;bottom:-4px}.platform-visual .fx-handle-d{right:-4px;bottom:-4px}
.platform-visual .fx-editor-cursor{position:absolute;width:26px;height:32px;right:9px;bottom:-19px;fill:#38383f;stroke:#fff;stroke-width:1.3;filter:drop-shadow(0 2px 2px #0003);animation:fx-cursor-tap 10s ease infinite}
.platform-visual .fx-page-strips{position:absolute;bottom:19px;left:18px;right:17px;display:flex;gap:10px}.platform-visual .fx-page-strips>span{height:23px;flex:1;border-radius:5px;background:#f0f1ed}.platform-visual .fx-page-strips>span:nth-child(2){background:#ecefe8}
.platform-visual .fx-color-palette{position:absolute;bottom:-8px;left:48%;display:flex;gap:10px;align-items:center;padding:12px 15px;background:#fffffff5;border:1px solid #e8e4df;box-shadow:0 8px 20px #635b4912;border-radius:25px}
.platform-visual .fx-color-palette>i{height:17px;width:17px;border-radius:50%;background:#f28a56}.platform-visual .fx-color-palette>i:first-child{outline:1px solid #f3a57b;outline-offset:3px}.platform-visual .fx-color-palette>i:nth-child(2){background:#839b82}.platform-visual .fx-color-palette>i:nth-child(3){background:#a7b7c6}.platform-visual .fx-color-palette>i:nth-child(4){background:#53585b}
@keyframes fx-block-drop{0%,8%{translate:-65px -38px;scale:.88;opacity:.6}28%,77%{translate:0 0;scale:1;opacity:1}93%,100%{translate:-65px -38px;scale:.88;opacity:.6}}
@keyframes fx-cursor-tap{0%,23%,35%,100%{scale:1}28%{scale:.85}}
/* Three physical screens share the same visual design. */
.platform-visual .fx-device-stage{left:22px;right:22px;top:159px;bottom:20px}
.platform-visual .fx-device-halo{position:absolute;width:100%;height:100%;background:radial-gradient(ellipse,#d3dce8aa,transparent 68%);top:8px}
.platform-visual .fx-monitor{position:absolute;width:78%;max-width:285px;height:173px;left:0;top:10px;animation:fx-device-breathe 9s ease-in-out infinite}
.platform-visual .fx-monitor-screen{position:absolute;inset:0 0 20px;border:5px solid #56616e;border-bottom-width:10px;background:white;border-radius:10px;overflow:hidden;box-shadow:0 14px 25px #35405220}
.platform-visual .fx-monitor>i{position:absolute;left:38%;right:38%;bottom:0;height:20px;background:#6b7785;clip-path:polygon(25% 0,75% 0,80% 75%,100% 85%,100% 100%,0 100%,0 85%,20% 75%)}
.platform-visual .fx-tablet{position:absolute;right:0;bottom:17px;width:49%;height:151px;max-width:171px;border:5px solid #52606d;background:white;border-radius:11px;overflow:hidden;box-shadow:0 14px 25px #35405224;animation:fx-device-breathe 9s ease-in-out -3s infinite}
.platform-visual .fx-phone{position:absolute;right:3%;bottom:0;width:24%;height:141px;max-width:74px;border:4px solid #303c49;border-radius:15px;background:white;overflow:hidden;box-shadow:0 12px 20px #35405228;animation:fx-device-breathe 9s ease-in-out -5s infinite}
.platform-visual .fx-phone-notch{position:absolute;top:4px;left:35%;right:35%;height:4px;border-radius:4px;background:#303c49;z-index:1}
.platform-visual .fx-micro-nav{height:17px;display:flex;align-items:center;gap:5px;padding:0 8px}.platform-visual .fx-micro-nav>i{width:22px;height:3px;border-radius:3px;background:#9ba899;margin-right:auto}.platform-visual .fx-micro-nav>span{height:2px;width:9px;background:#dbdfdc}
.platform-visual .fx-micro-photo{height:65%;background:#d0d7d1}.platform-visual .fx-micro-photo>img{width:100%;height:100%;object-fit:cover;object-position:center 78%}
.platform-visual .fx-micro-bars{padding:8px;display:flex;flex-wrap:wrap;gap:4px}.platform-visual .fx-micro-bars>i{height:4px;width:70%;border-radius:3px;background:#c7cfc6}.platform-visual .fx-micro-bars>i:nth-child(2){width:45%;background:#e0e4dd}.platform-visual .fx-micro-bars>span{width:25px;height:7px;border-radius:6px;background:#ef9a6b;margin-left:auto}
.platform-visual .fx-phone .fx-micro-nav{height:16px;padding:0 6px}.platform-visual .fx-phone .fx-micro-nav>i{width:14px;height:2px}.platform-visual .fx-phone .fx-micro-nav>span{display:none}.platform-visual .fx-phone .fx-micro-photo{height:57%}.platform-visual .fx-phone .fx-micro-bars{padding:9px 6px;gap:5px}.platform-visual .fx-phone .fx-micro-bars>i{height:3px;width:100%}.platform-visual .fx-phone .fx-micro-bars>i:nth-child(2){width:80%}.platform-visual .fx-phone .fx-micro-bars>span{width:65%;margin:3px 0 0}
@keyframes fx-device-breathe{0%,100%{translate:0 0}50%{translate:0 -7px}}
/* Search: one query, one preview. */
.platform-visual .fx-seo-stage{left:25px;right:25px;top:159px;bottom:25px}
.platform-visual .fx-search-halo{position:absolute;inset:-10px;background:radial-gradient(circle at 65% 35%,#ffe1bcb3,transparent 70%)}
.platform-visual .fx-query{position:absolute;top:5px;left:7%;right:7%;height:35px;display:flex;gap:9px;align-items:center;border:1px solid #eee5db;background:#fffefa;border-radius:25px;padding:0 13px;box-shadow:0 5px 12px #a87e4e08;font-size:10px;color:#a89480}
.platform-visual .fx-query svg{width:15px;height:15px;color:#d7a078}
.platform-visual .fx-search-result{position:absolute;top:56px;left:0;right:0;background:#fff;border:1px solid #e9dfd3;border-radius:14px;padding:16px;box-shadow:0 13px 25px #9b795816;animation:fx-search-assemble 11s ease-in-out infinite}
.platform-visual .fx-result-url{display:flex;align-items:center;gap:7px;font-size:8px;color:#a2a2ab}.platform-visual .fx-result-url>i{width:19px;height:19px;border-radius:50%;background:#f4f3ef;display:grid;place-items:center;color:#9ea391;font-style:normal}.platform-visual .fx-result-url svg{width:12px;height:12px}.platform-visual .fx-result-url>b{font-weight:400;margin-left:auto;font-size:8px;letter-spacing:2px}
.platform-visual .fx-result-content{display:flex;align-items:center;gap:13px;margin-top:11px}.platform-visual .fx-result-content>div{flex:1;min-width:0}.platform-visual .fx-result-content strong{display:block;font-size:17px;line-height:1.15;font-weight:500;letter-spacing:-.5px;color:#5f6f9d;margin-bottom:10px}.platform-visual .fx-result-content>div>span{display:block;width:100%;height:4px;border-radius:3px;background:#e4e5e9;margin-top:5px}.platform-visual .fx-result-content>div>span:last-child{width:72%}.platform-visual .fx-result-content>img{width:62px;height:65px;object-fit:cover;border-radius:8px;object-position:center 65%}
.platform-visual .fx-result-check{position:absolute;right:-9px;bottom:-10px;width:28px;height:28px;border-radius:50%;background:#f0f5ea;border:3px solid #fff;color:#90a47f;display:grid;place-items:center;box-shadow:0 5px 12px #88916f16}.platform-visual .fx-result-check svg{width:15px;height:15px}
.platform-visual .fx-search-dot{position:absolute;display:block;border-radius:50%;background:#ebc39e;width:5px;height:5px}.platform-visual .fx-dot-one{right:2%;top:-4px}.platform-visual .fx-dot-two{left:1%;bottom:10px;width:3px;height:3px;opacity:.7}
@keyframes fx-search-assemble{0%,10%,100%{opacity:.45;translate:0 12px;scale:.97}35%,85%{opacity:1;translate:0 0;scale:1}}
/* Hosting: a site travels from a page to a published address. */
.platform-visual .fx-publish-stage{left:46%;right:29px;top:29px;bottom:27px}
.platform-visual .fx-publish-halo{position:absolute;inset:-10px;background:radial-gradient(ellipse,#dce9d8b3,transparent 72%)}
.platform-visual .fx-publish-source{position:absolute;left:0;top:46%;width:43px;height:53px;display:grid;place-items:center;background:#ffffffd9;border:1px solid #dbe3d7;border-radius:10px;box-shadow:0 8px 14px #53674808;color:#a9b5a2}.platform-visual .fx-publish-source svg{width:25px;height:25px}
.platform-visual .fx-transfer-line{position:absolute;top:57%;left:43px;width:27%;height:1px;background:#c6d4bd}.platform-visual .fx-transfer-line>i{position:absolute;left:0;top:-3px;width:7px;height:7px;border-radius:50%;background:#e69d69;box-shadow:0 0 0 4px #eab28c18;animation:fx-publish-travel 10s ease-in-out infinite}
.platform-visual .fx-live-preview{position:absolute;right:0;top:24px;width:74%;height:153px;background:#fff;border:1px solid #dbe3d7;border-radius:13px;overflow:hidden;box-shadow:0 13px 27px #53674816;transform:rotate(2deg)}
.platform-visual .fx-live-bar{display:flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-bottom:1px solid #edf0e9;font-size:9px;color:#a0aa99}.platform-visual .fx-live-bar>i{height:5px;width:5px;border-radius:50%;background:#a4bc91}.platform-visual .fx-live-bar svg{width:12px;height:12px;margin-left:auto}
.platform-visual .fx-live-body{padding:14px;display:flex;align-items:center;gap:16px;height:calc(100% - 30px)}.platform-visual .fx-live-body>div{width:48%;height:100%;border-radius:6px;overflow:hidden;background:#e2e9df}.platform-visual .fx-live-body img{width:100%;height:100%;object-fit:cover;object-position:center 80%}.platform-visual .fx-live-body>span{display:flex;flex-direction:column;gap:7px;flex:1}.platform-visual .fx-live-body i{height:7px;width:90%;border-radius:4px;background:#bbc8b4}.platform-visual .fx-live-body i:nth-child(2){width:68%}.platform-visual .fx-live-body i:nth-child(3){height:3px;width:85%;background:#e0e6db}.platform-visual .fx-live-body b{height:13px;width:45%;border-radius:8px;background:#e8a174;margin-top:6px}
.platform-visual .fx-publish-cta,.platform-visual .fx-publish-success{position:absolute;bottom:8px;right:13px;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border-radius:25px;font-size:11px;box-shadow:0 7px 17px #53674812;min-width:114px}
.platform-visual .fx-publish-cta{background:#ed9865;color:white;opacity:0;animation:fx-publish-button 10s ease infinite}.platform-visual .fx-publish-success{background:#fcfefa;border:1px solid #dce7d5;color:#819872;animation:fx-publish-done 10s ease infinite}
.platform-visual .fx-publish-cta svg,.platform-visual .fx-publish-success svg{width:15px;height:15px}
@keyframes fx-publish-travel{0%,10%{left:0;opacity:0}15%{opacity:1}35%{left:100%;opacity:1}40%,100%{left:100%;opacity:0}}
@keyframes fx-publish-button{0%,25%,100%{opacity:1;translate:0 0}35%,90%{opacity:0;translate:0 -5px}}
@keyframes fx-publish-done{0%,28%,100%{opacity:0;translate:0 8px}43%,90%{opacity:1;translate:0 0}}
/* Three real feature buttons replace the paragraphs inside the final card. */
.platform-visual .fx-connected-stage{left:22px;right:22px;top:183px;bottom:27px;pointer-events:auto}
.platform-visual .fx-orbit-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;stroke:#ffffff14;stroke-width:1}.platform-visual .fx-orbit-lines>circle{stroke-dasharray:2 7;stroke:#ffffff0e}
.platform-visual .fx-orbit-core{position:absolute;left:50%;top:45%;width:84px;height:84px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:25px;background:linear-gradient(150deg,#343139,#26252c);border:1px solid #ffffff15;box-shadow:0 0 60px #ef89520c,0 15px 35px #0003;animation:fx-core-glow 9s ease-in-out infinite;pointer-events:none}
.platform-visual .fx-center-panda{display:block;width:57px;height:60px;overflow:hidden}.platform-visual .fx-center-panda>img{width:180px;height:auto;max-width:none;filter:hue-rotate(35deg)}
.platform-visual .fx-tool-node{position:absolute;display:flex;flex-direction:column;align-items:center;gap:13px;background:none;padding:0;border:0;color:#d5d4de;cursor:pointer;max-width:110px;width:100px;z-index:2;animation:fx-tool-float 8s ease-in-out infinite}
.platform-visual .fx-tool-node>span{width:62px;height:62px;border-radius:20px;background:linear-gradient(150deg,#38363f,#292830);border:1px solid #ffffff12;display:grid;place-items:center;box-shadow:0 13px 25px #0002;color:#cbb2a5;transition:transform .2s,border-color .2s}
.platform-visual .fx-tool-node svg{width:28px;height:28px;stroke-width:1.3}.platform-visual .fx-tool-node>b{font-size:10px;font-weight:400;line-height:1.4;white-space:nowrap;color:#9d9ba9}
.platform-visual .fx-tool-node:hover>span,.platform-visual .fx-tool-node:focus-visible>span{border-color:#ff9c6d88;transform:scale(1.07);color:#ffc29f}
.platform-visual .fx-node-blog{left:calc(21% - 50px);top:6%}.platform-visual .fx-node-apps{left:calc(79% - 50px);top:6%;animation-delay:-2.5s}.platform-visual .fx-node-move{left:calc(50% - 50px);top:76%;animation-delay:-5s}
.platform-visual .fx-node-apps>span{color:#b5bfd7}.platform-visual .fx-node-move>span{color:#b4c6ab}
.platform-visual .fx-orbit-spark{position:absolute;width:5px;height:5px;background:#8a6f60;border-radius:50%;box-shadow:0 0 0 5px #ff9f7310;pointer-events:none}.platform-visual .fx-spark-one{left:13%;top:60%}.platform-visual .fx-spark-two{right:12%;top:56%;width:3px;height:3px;background:#7b8499;box-shadow:none}
@keyframes fx-tool-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes fx-core-glow{0%,100%{box-shadow:0 0 45px #ef895207,0 15px 35px #0003}50%{box-shadow:0 0 75px #ef89521a,0 15px 35px #0003}}
@media(max-width:1100px) and (min-width:761px){
 .platform-section.platform-visual .bento-builder .bento-copy{max-width:31%;padding:43px 0 0 28px}.platform-section.platform-visual .bento-builder .bento-copy h3{font-size:35px}.platform-section.platform-visual .bento-builder .bento-copy p{font-size:12px}
 .platform-visual .fx-editor-stage{left:35%;right:20px;top:31px;bottom:30px}.platform-visual .fx-editor-body{grid-template-columns:32px 70px minmax(0,1fr)}.platform-visual .fx-editor-library{padding:13px 8px}.platform-visual .fx-editor-library>span{height:52px}.platform-visual .fx-page-canvas{margin:13px 11px}.platform-visual .fx-page-type{left:12px;top:80px}.platform-visual .fx-page-type>b{height:10px}.platform-visual .fx-drop-slot,.platform-visual .fx-drag-photo{right:12px;width:43%;height:53%}.platform-visual .fx-page-nav{padding:0 11px;gap:6px}.platform-visual .fx-page-nav>span{width:37px}.platform-visual .fx-page-nav>i{width:9px}.platform-visual .fx-page-strips{left:12px;right:12px}
 .platform-section.platform-visual .bento-connected .bento-copy{max-width:40%;padding:33px 0 0 28px}.platform-visual .fx-connected-stage{left:44%;top:16px;right:32px;bottom:17px}.platform-visual .fx-node-blog,.platform-visual .fx-node-apps{top:3%}.platform-visual .fx-node-move{top:73%}.platform-visual .fx-tool-node>span{width:52px;height:52px;border-radius:17px}.platform-visual .fx-tool-node svg{width:24px;height:24px}.platform-visual .fx-tool-node{gap:10px}.platform-visual .fx-orbit-core{width:72px;height:72px;border-radius:23px}.platform-visual .fx-center-panda{scale:.85}
 .platform-section.platform-visual .bento-hosting .bento-copy{padding:36px 0 0 28px;max-width:43%}.platform-visual .fx-publish-stage{left:47%;right:24px;top:25px;bottom:22px}
}
@media(max-width:760px){
 .platform-section.platform-visual .feature-bento{grid-template-columns:1fr;grid-template-areas:"builder" "responsive" "seo" "hosting" "connected";grid-template-rows:465px 410px 410px 355px 505px;gap:20px}
 .platform-section.platform-visual .bento-card{border-radius:23px}.platform-section.platform-visual .bento-copy,.platform-section.platform-visual .bento-connected .bento-copy{padding:27px 26px 0;max-width:none}.platform-section.platform-visual .bento-copy h3{font-size:28px;margin-bottom:11px}.platform-section.platform-visual .bento-copy p{font-size:12px;max-width:320px}.platform-section.platform-visual .bento-copy .tile-label{font-size:8px;margin-bottom:12px}
 .platform-section.platform-visual .bento-builder .bento-copy{max-width:none;padding:29px 26px 0}.platform-section.platform-visual .bento-builder .bento-copy h3{font-size:33px}.platform-section.platform-visual .bento-builder .bento-copy p{font-size:12px;max-width:320px}
 .platform-visual .fx-editor-stage{left:18px;right:18px;top:170px;bottom:25px}.platform-visual .fx-editor-frame{border-radius:12px;transform:rotate(-1deg)}.platform-visual .fx-editor-top{height:30px;padding:0 11px}.platform-visual .fx-editor-top>b{font-size:10px}.platform-visual .fx-editor-top svg{width:12px;height:12px}.platform-visual .fx-editor-body{height:calc(100% - 30px);grid-template-columns:27px 55px minmax(0,1fr)}.platform-visual .fx-editor-rail{padding-top:13px;gap:15px}.platform-visual .fx-editor-rail svg{width:13px;height:13px}.platform-visual .fx-editor-library{padding:11px 6px;gap:9px}.platform-visual .fx-editor-library>span{height:43px}.platform-visual .fx-editor-library>i{min-height:23px;font-size:15px}.platform-visual .fx-page-canvas{margin:12px 10px}.platform-visual .fx-page-nav{height:30px;padding:0 8px;gap:4px}.platform-visual .fx-page-nav>span{width:27px;height:5px}.platform-visual .fx-page-nav>i{width:8px;height:2px}.platform-visual .fx-page-type{left:10px;top:65px;gap:6px;width:35%}.platform-visual .fx-page-type>b{height:8px}.platform-visual .fx-page-type>span{height:3px}.platform-visual .fx-page-type>i{width:30px;height:18px;font-size:10px;margin-top:5px}.platform-visual .fx-drop-slot,.platform-visual .fx-drag-photo{right:9px;top:53px;width:44%;height:57%}.platform-visual .fx-editor-cursor{width:20px;height:26px;right:4px;bottom:-14px}.platform-visual .fx-page-strips{left:10px;right:9px;bottom:13px;gap:5px}.platform-visual .fx-page-strips>span{height:16px}.platform-visual .fx-color-palette{left:46%;padding:9px 12px;gap:8px;bottom:-8px}.platform-visual .fx-color-palette>i{height:13px;width:13px}
 .platform-visual .fx-device-stage{top:155px;left:26px;right:26px;bottom:26px}.platform-visual .fx-monitor{max-width:310px;height:181px}.platform-visual .fx-tablet{height:160px;max-width:184px}.platform-visual .fx-phone{height:150px;max-width:80px}
 .platform-visual .fx-seo-stage{top:157px;left:28px;right:28px;bottom:27px}.platform-visual .fx-search-result{padding:18px}.platform-visual .fx-result-content strong{font-size:19px}.platform-visual .fx-result-content>img{width:70px;height:72px}
 .platform-section.platform-visual .bento-hosting .bento-copy{max-width:none;padding:27px 26px 0}.platform-visual .fx-publish-stage{left:26px;right:26px;top:145px;bottom:24px}.platform-visual .fx-live-preview{top:5px;height:141px;width:75%}.platform-visual .fx-publish-source{top:34%;width:40px;height:48px}.platform-visual .fx-transfer-line{top:47%;left:40px;width:26%}.platform-visual .fx-publish-cta,.platform-visual .fx-publish-success{bottom:0;right:10px;font-size:10px;padding:9px 13px;min-width:108px}
 .platform-visual .fx-connected-stage{left:26px;right:26px;top:169px;bottom:26px}.platform-visual .fx-tool-node>span{width:56px;height:56px;border-radius:18px}.platform-visual .fx-tool-node svg{width:26px;height:26px}.platform-visual .fx-tool-node{gap:10px}.platform-visual .fx-node-blog,.platform-visual .fx-node-apps{top:2%}.platform-visual .fx-node-move{top:75%}.platform-visual .fx-orbit-core{width:76px;height:76px;border-radius:23px}.platform-visual .fx-center-panda{scale:.9}
}
@media(max-width:390px){.platform-visual .fx-device-stage{left:22px;right:22px}.platform-visual .fx-monitor{height:169px}.platform-visual .fx-tablet{height:149px}.platform-visual .fx-phone{height:140px}.platform-visual .fx-seo-stage{left:24px;right:24px}.platform-visual .fx-result-content strong{font-size:17px}.platform-visual .fx-result-content>img{width:56px;height:61px}.platform-visual .fx-tool-node{width:88px}.platform-visual .fx-node-blog{left:calc(21% - 44px)}.platform-visual .fx-node-apps{left:calc(79% - 44px)}.platform-visual .fx-node-move{left:calc(50% - 44px)}}
@media(prefers-reduced-motion:reduce){.platform-visual .fx-art *{animation:none!important;transition:none!important;will-change:auto}.platform-visual .fx-editor-cursor{display:none}.platform-visual .fx-search-result{opacity:1;translate:none;scale:1}.platform-visual .fx-publish-cta{display:none}.platform-visual .fx-publish-success{opacity:1;translate:none}.platform-visual .fx-drag-photo{translate:none;scale:1;opacity:1}}
/* Keep visibility controls stronger than each animation shorthand. */
.platform-visual .bento-card .fx-art *{animation-play-state:paused}
.platform-visual .bento-card.fx-inview .fx-art *{animation-play-state:running}
.platform-visual.fx-idle .bento-card .fx-art *{animation-play-state:paused!important}
/* Defined card surfaces against a white section background. */
.platform-section.platform-visual{background:#fff}
.platform-section.platform-visual .bento-card{border-color:#d5d8de;box-shadow:0 7px 22px #22253309}
.platform-section.platform-visual .bento-builder{background:#ececf1;color:#252529}
.platform-section.platform-visual .bento-builder .tile-label{color:#b94717}
.platform-section.platform-visual .bento-builder .bento-copy p{color:#68686f}
.platform-section.platform-visual .bento-builder .bento-copy h3{font-size:47px;line-height:1.03}
.platform-visual .fx-editor-stage:before{content:"";position:absolute;inset:7% -2%;border-radius:50%;background:radial-gradient(ellipse,#bba0e7,transparent 72%);filter:blur(34px);opacity:.22}
.platform-visual .fx-editor-frame{border-color:#dedee5;box-shadow:0 24px 50px #27203818}
.platform-visual .fx-editor-top>b{color:#35353b}
.platform-visual .fx-editor-top>i{background:#ff5f1f;box-shadow:0 0 0 4px #ff5f1f16}
.platform-visual .fx-editor-rail>span:first-child{color:#8b41e5;background:#f5ecfc;border-radius:5px}
.platform-visual .fx-page-canvas{background:linear-gradient(130deg,#fff,#fff8ee)}
.platform-visual .fx-page-nav>span,.platform-visual .fx-page-type>b{background:#2e4d3e}
.platform-visual .fx-page-type>i{background:#ff5f1f}
.platform-visual .fx-drop-slot{border-color:#bb7cff;background:#f8f2fc}
.platform-visual .fx-drag-photo{border-color:#a75aff;box-shadow:0 8px 25px #9f49ff30}
.platform-visual .fx-handle{border-color:#a75aff}
.platform-visual .fx-page-strips>span:first-child{background:#c9eacb}.platform-visual .fx-page-strips>span:nth-child(2){background:#ffdab6}.platform-visual .fx-page-strips>span:nth-child(3){background:#e7d4ff}
.platform-visual .fx-color-palette{left:auto;right:15px;top:-14px;bottom:auto;border-color:#fff9;box-shadow:0 7px 22px #25203116;gap:9px;padding:10px 13px}
.platform-visual .fx-color-palette>i{background:#ff5f1f}.platform-visual .fx-color-palette>i:first-child{outline-color:#ff5f1f}.platform-visual .fx-color-palette>i:nth-child(2){background:#37c89b}.platform-visual .fx-color-palette>i:nth-child(3){background:#7754f6}.platform-visual .fx-color-palette>i:nth-child(4){background:#3e8fff}
.platform-visual .fx-ai-prompt{position:absolute;bottom:-12px;left:9%;right:12%;height:52px;display:flex;align-items:center;gap:11px;padding:0 12px;border-radius:16px;background:#fffffff5;color:#40205d;border:1px solid #e7cfff;box-shadow:0 10px 28px #38254b1c;overflow:hidden;isolation:isolate}
.platform-visual .fx-ai-prompt:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,#eee0ff 48%,#ffe7da 58%,transparent 72%);background-size:250% 100%;animation:fx-ai-shimmer 10s ease-in-out infinite}
.platform-visual .fx-ai-symbol{font-size:25px;color:#a049ef;line-height:1;animation:fx-ai-spark 10s ease-in-out infinite}
.platform-visual .fx-ai-prompt>b{font-size:11px;letter-spacing:.6px;color:#8b3cce;border-right:1px solid #e8d9f3;padding-right:11px}
.platform-visual .fx-ai-input{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.platform-visual .fx-ai-prompt>i{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:9px;background:#ff5f1f;color:#fff;display:grid;place-items:center;font-size:19px;font-style:normal}
.platform-visual .fx-page-type,.platform-visual .fx-page-nav,.platform-visual .fx-page-strips{animation:fx-ai-build 10s ease-in-out infinite}
.platform-visual .fx-page-strips{animation-delay:.18s}
@keyframes fx-ai-shimmer{0%,100%{background-position:100% 0}40%,80%{background-position:0 0}}
@keyframes fx-ai-spark{0%,100%{scale:.85;rotate:-12deg}20%,85%{scale:1;rotate:0deg}}
@keyframes fx-ai-build{0%,8%,100%{opacity:.12;translate:0 7px}30%,88%{opacity:1;translate:0 0}}
.platform-section.platform-visual .bento-responsive{background:#e7edf4;color:#252529}
.platform-section.platform-visual .bento-responsive .tile-label{color:#b94717}
.platform-section.platform-visual .bento-responsive .bento-copy p{color:#68686f}
.platform-visual .fx-device-halo{background:radial-gradient(ellipse,#d4dfef80,transparent 67%)}
.platform-visual .fx-monitor-screen{border-color:#343944;box-shadow:0 17px 30px #26304126}.platform-visual .fx-monitor>i{background:linear-gradient(#606875,#b5bdc8)}
.platform-visual .fx-tablet{border-color:#343944;box-shadow:0 17px 25px #26304124}.platform-visual .fx-phone{border-color:#252b35;box-shadow:0 17px 25px #26304126}.platform-visual .fx-phone-notch{background:#252b35}
.platform-visual .fx-micro-nav>i{background:#7750d6}.platform-visual .fx-micro-bars>i{background:#bda8ef}.platform-visual .fx-micro-bars>span{background:#ff6b35}
.platform-visual .fx-micro-photo>img{object-position:center 45%;filter:saturate(1.1) contrast(1.03)}
.platform-section.platform-visual .bento-seo{background:#f2e7dd;color:#252529}
.platform-section.platform-visual .bento-seo .tile-label{color:#b94717}.platform-section.platform-visual .bento-seo .bento-copy p{color:#68686f}
.platform-visual .fx-search-halo{background:radial-gradient(ellipse,#ffd5ad60,transparent 70%)}
.platform-visual .fx-query{color:#74675f;border-color:#ebe4de;background:#fff;box-shadow:0 7px 18px #68462e08}.platform-visual .fx-query svg{color:#fa6a2b}
.platform-visual .fx-search-result{border-color:#e8e2db;box-shadow:0 15px 30px #68462e12}.platform-visual .fx-result-content strong{color:#355fba}.platform-visual .fx-result-url{color:#777285}
.platform-visual .fx-result-content>img{filter:saturate(1.15)}
.platform-visual .fx-result-check{background:#2fbc79;color:#fff;box-shadow:0 5px 15px #237b4f35}.platform-visual .fx-search-dot{background:#f47b47}
.platform-section.platform-visual .bento-hosting{background:#e6eee8;color:#252529}
.platform-section.platform-visual .bento-hosting .tile-label{color:#b94717}.platform-section.platform-visual .bento-hosting .bento-copy p{color:#68686f}
.platform-visual .fx-publish-halo{background:radial-gradient(ellipse,#d7e9dc80,transparent 72%)}
.platform-visual .fx-publish-source{background:#fff;border-color:#fff;color:#24a282;box-shadow:0 8px 25px #07794e1a}
.platform-visual .fx-transfer-line{background:#46bd96}.platform-visual .fx-transfer-line>i{background:#ff681f;box-shadow:0 0 0 5px #ff681f19}
.platform-visual .fx-live-preview{border-color:#fff9;box-shadow:0 15px 30px #294e3f16}.platform-visual .fx-live-bar{color:#527b6b}.platform-visual .fx-live-bar>i{background:#1db579}
.platform-visual .fx-live-body img{object-position:center 50%;filter:saturate(1.15) contrast(1.03)}.platform-visual .fx-live-body i{background:#78b39a}.platform-visual .fx-live-body b{background:#ff742c}
.platform-visual .fx-publish-cta{background:#ff5f1f}.platform-visual .fx-publish-success{color:#fff;background:#15976b;border-color:#15976b;box-shadow:0 8px 20px #187b4d30}
.platform-section.platform-visual .bento-connected{background:#1b1b1f;border-color:#1b1b1f}
.platform-section.platform-visual .bento-connected .tile-label{color:#f5a17d}.platform-section.platform-visual .bento-connected .bento-copy p{color:#aeacb6}
.platform-visual .fx-orbit-lines{stroke:#ffffff26}.platform-visual .fx-orbit-lines>circle{stroke:#ffffff14}
.platform-visual .fx-orbit-core{background:linear-gradient(140deg,#39343e,#28262d);border-color:#ffffff24;animation-name:fx-core-color}
.platform-visual .fx-center-panda>img{filter:none}
.platform-visual .fx-node-blog>span{background:linear-gradient(145deg,#ff8c49,#ff5f1f);color:#fff;border-color:#ff9a66;box-shadow:0 10px 25px #ff77261c}
.platform-visual .fx-node-apps>span{background:linear-gradient(145deg,#4b3e61,#342e40);color:#c9acf2;border-color:#c1a4ff33;box-shadow:0 10px 25px #0002}
.platform-visual .fx-node-move>span{background:linear-gradient(145deg,#345149,#293b37);color:#9cdbc7;border-color:#89ebdd33;box-shadow:0 10px 25px #0002}
.platform-visual .fx-tool-node>b{color:#c1bdc9}.platform-visual .fx-orbit-spark{background:#ffb26e;box-shadow:0 0 0 5px #ff9f7320}.platform-visual .fx-spark-two{background:#8da8ff;box-shadow:0 0 15px #8da8ff66}
@keyframes fx-core-color{0%,100%{box-shadow:0 0 45px #a886c010,0 15px 35px #0003}50%{box-shadow:0 0 80px #a886c025,0 15px 35px #0003}}
.platform-visual .fx-drag-photo>img,.platform-visual .fx-editor-library img{filter:saturate(1.1) contrast(1.02)}
@media(max-width:1100px) and (min-width:761px){.platform-section.platform-visual .bento-builder .bento-copy h3{font-size:39px}.platform-visual .fx-ai-prompt{left:2%;right:2%;gap:8px}.platform-visual .fx-ai-input{font-size:10px}}
@media(max-width:760px){.platform-section.platform-visual .bento-builder .bento-copy h3{font-size:35px}.platform-section.platform-visual .bento-builder .bento-copy p{max-width:240px}.platform-visual .fx-editor-stage{top:190px;bottom:35px}.platform-visual .fx-color-palette{right:12px;top:-13px;padding:8px 10px;gap:8px}.platform-visual .fx-ai-prompt{height:43px;left:3%;right:3%;bottom:-16px;padding:0 9px;gap:8px;border-radius:13px}.platform-visual .fx-ai-input{font-size:9px}.platform-visual .fx-ai-symbol{font-size:20px}.platform-visual .fx-ai-prompt>b{font-size:9px;padding-right:8px}.platform-visual .fx-ai-prompt>i{width:24px;height:24px;border-radius:7px;font-size:17px}}
@media(prefers-reduced-motion:reduce){.platform-visual .fx-page-type,.platform-visual .fx-page-nav,.platform-visual .fx-page-strips{opacity:1;translate:none}.platform-visual .fx-ai-symbol{scale:1;rotate:none}}
/* Animation shorthands above must still respect visibility and tab state. */
.platform-visual .bento-card .fx-art *{animation-play-state:paused}
.platform-visual .bento-card.fx-inview .fx-art *{animation-play-state:running}
.platform-visual.fx-idle .bento-card .fx-art *{animation-play-state:paused!important}
.platform-visual .fx-ai-prompt:before{animation-play-state:paused}
.platform-visual .fx-inview .fx-ai-prompt:before{animation-play-state:running}
.platform-visual.fx-idle .fx-ai-prompt:before{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.platform-visual .fx-ai-prompt:before{animation:none!important}}
/* Separate the template chapter and give the graphics a stronger orange focus. */
.inspiration-section.template-showcase{position:relative;isolation:isolate;background:radial-gradient(ellipse at 90% 8%,#ffd5bb70,transparent 52%),radial-gradient(ellipse at 0% 100%,#ffd5bb70,transparent 52%),#f5f5f7}
.inspiration-section.template-showcase:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,#a59a922b .8px,transparent 1.1px);background-size:26px 26px;mask-image:linear-gradient(#0008,#0005 34%,transparent 76%)}
.platform-visual .fx-ai-title{color:#ff5f1f}
.platform-visual .fx-page-type>i,.platform-visual .fx-ai-prompt>i{background:#ff5f1f;box-shadow:0 4px 12px #ff5f1f30}
.platform-visual .fx-drag-photo{border-color:#ff5f1f;box-shadow:0 8px 22px #ff5f1f20}
.platform-visual .fx-handle{border-color:#ff5f1f}
.platform-visual .fx-drop-slot{background:#fff1e8;border-color:#ff8a52}
.platform-visual .fx-micro-bars>span{background:#ff5f1f}.platform-visual .fx-query svg{color:#ff5f1f}
.platform-visual .fx-node-blog>span{background:linear-gradient(140deg,#ff943d,#ff5f1f 65%,#ed450b);box-shadow:0 10px 25px #ff5f1f26}
/* Hosting is a cloud and a network, rather than another website screenshot. */
.platform-visual .fx-host-stage{isolation:isolate}
.platform-visual .fx-host-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 55% 49%,#ffd0a488,transparent 65%)}
.platform-visual .fx-host-links{position:absolute;inset:0;width:100%;height:100%;stroke:#f09562;stroke-width:1.5;stroke-dasharray:4 6;animation:fx-host-data 16s linear infinite}
.platform-visual .fx-host-cloud{position:absolute;left:25%;top:14%;width:62%;filter:drop-shadow(0 15px 12px #c8511826);animation:fx-host-float 9s ease-in-out infinite}
.platform-visual .fx-host-cloud>svg{width:100%;height:auto}
.platform-visual .fx-host-item{position:absolute;display:grid;place-items:center;background:linear-gradient(140deg,#fff,#f8fbf8);border:1px solid #ffffffd9;box-shadow:0 9px 22px #2b4e3b16;border-radius:17px;color:#515f58;width:55px;height:61px;animation:fx-host-float 9s ease-in-out -3s infinite}
.platform-visual .fx-host-item>svg{width:28px;height:28px}
.platform-visual .fx-host-file{left:4%;top:15%;transform:rotate(-9deg)}
.platform-visual .fx-host-globe{left:13%;bottom:6%;width:51px;height:51px;border-radius:50%;color:#28826c;animation-delay:-6s;transform:rotate(7deg)}
.platform-visual .fx-host-live{position:absolute;right:1%;bottom:12%;height:36px;padding:0 15px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d3e6da;border-radius:25px;color:#33785d;font-size:11px;font-weight:600;box-shadow:0 8px 20px #24533914}
.platform-visual .fx-host-live>i{width:7px;height:7px;border-radius:50%;background:#22b378;box-shadow:0 0 0 4px #22b37812}
.platform-visual .fx-host-spark{position:absolute;right:10%;top:10%;width:7px;height:7px;border-radius:50%;background:#ff5f1f;box-shadow:0 0 0 6px #ff5f1f0e}
@keyframes fx-host-data{to{stroke-dashoffset:-160}}
@keyframes fx-host-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media(max-width:760px){.platform-visual .fx-host-cloud{left:24%;top:5%;width:65%}.platform-visual .fx-host-file{top:10%;width:48px;height:53px;border-radius:14px}.platform-visual .fx-host-item>svg{width:25px;height:25px}.platform-visual .fx-host-globe{width:45px;height:45px;bottom:0}.platform-visual .fx-host-live{bottom:7%;height:32px;padding:0 12px;font-size:10px}}
/* The new network follows the same viewport and reduced-motion controls. */
.platform-visual .bento-card .fx-art *{animation-play-state:paused}
.platform-visual .bento-card.fx-inview .fx-art *{animation-play-state:running}
.platform-visual.fx-idle .bento-card .fx-art *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.platform-visual .fx-host-links,.platform-visual .fx-host-cloud,.platform-visual .fx-host-item{animation:none!important}}