/* Separate experiment only: existing home and shared hero assets are unchanged. */
.hero-web-preview .ai-composition{isolation:isolate}
.hero-web-preview .preview-websites{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-web-preview .preview-window{position:absolute;overflow:hidden;background:#fff;border:2px solid #c5cdd8;border-radius:19px;box-shadow:0 4px 3px #ffffff inset,0 8px 22px #203d622b;transform-origin:center bottom}
.hero-web-preview .preview-window--left{left:150px;top:355px;width:425px;height:412px;transform:perspective(1700px) rotateY(15deg) rotateZ(3deg);--cycle:19s;z-index:1}
.hero-web-preview .preview-window--center{left:498px;top:298px;width:540px;height:390px;--cycle:23s;z-index:2}
.hero-web-preview .preview-window--right{left:1045px;top:355px;width:350px;height:412px;transform:perspective(1700px) rotateY(-15deg) rotateZ(-3deg);--cycle:27s;z-index:1}
.preview-browser-bar{display:flex;align-items:center;gap:6px;height:28px;background:linear-gradient(#fff,#e7ecf3);border-bottom:1px solid #d6dde5;padding:0 11px}
.preview-browser-bar i{width:7px;height:7px;border-radius:50%;background:#ff655f}.preview-browser-bar i:nth-child(2){background:#ffc144}.preview-browser-bar i:nth-child(3){background:#30c75a}
.preview-browser-bar span{height:13px;flex:1;margin:0 20px;border:1px solid #dce2e9;border-radius:9px;background:#ffffffd9}
.preview-viewport{position:relative;height:calc(100% - 28px);overflow:hidden;background:#edf0f3}
.preview-viewport img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;opacity:0;transform:translateY(14px) scale(1.025)}
.preview-viewport img:first-child{opacity:1;transform:none}
.preview-websites[data-ready=true] .preview-viewport img{animation:preview-image-cycle var(--cycle) ease-in-out infinite;animation-delay:var(--phase,0s)}
.preview-viewport img:nth-child(2){--phase:calc(var(--cycle) / -2)}
@keyframes preview-image-cycle{0%,43%{opacity:1;transform:translateY(0) scale(1)}49%,94%{opacity:0;transform:translateY(14px) scale(1.025)}100%{opacity:1;transform:translateY(0) scale(1)}}
.hero-web-preview .preview-window--left{--cycle:13s}
.hero-web-preview .preview-window--center{--cycle:16s}
.hero-web-preview .preview-window--right{--cycle:18s}
.hero-web-preview .ai-server-stage{left:178px;top:390px;width:1180px;height:auto;z-index:3;filter:drop-shadow(0 5px 5px #3e587a18)}
.hero-web-preview .ai-scene .mascot-parallax{width:420px;left:558px;bottom:120px}
.hero-web-preview .ai-agent--claude{left:110px;top:180px;width:170px}
.hero-web-preview .ai-agent--chatgpt{left:1250px;top:180px;width:180px}
.hero-web-preview .ai-agent--grok{left:-40px;top:405px;width:180px}
.hero-web-preview .ai-agent--cursor{left:1450px;top:365px;width:150px}
.hero-web-preview .ai-agent--deepseek{left:10px;top:590px;width:190px}
.hero-web-preview .ai-agent--gemini{left:1400px;top:535px;width:170px}
.hero-web-preview .ai-agent--copilot{left:1310px;top:720px;width:170px}
.hero-web-preview .ai-composition::after{left:558px;width:420px;background-size:420px auto}
.hero-web-preview .preview-leds{position:absolute;inset:0;width:1536px;height:960px;z-index:5;pointer-events:none;fill:#9ef7ff}
.preview-leds rect{animation:preview-led 3.2s ease-in-out var(--delay,0s) infinite;filter:drop-shadow(0 0 2px #3ce2f5)}
.preview-leds g:nth-child(2){--delay:-1.4s}.preview-leds g:nth-child(3){--delay:-.7s}.preview-leds g:nth-child(4){--delay:-2.6s}.preview-leds g:nth-child(5){--delay:-1.9s}
@keyframes preview-led{0%,100%{opacity:.15}23%,34%{opacity:.7}65%{opacity:.3}}
.hero-preview-compare{position:relative;padding:16px 24px;background:#f7f9fc;border-bottom:1px solid #e3e8f1;text-align:center;font-size:14px;color:#46546a}
.hero-preview-compare a{display:inline-flex;align-items:center;min-height:40px;font-weight:700;color:#c40b24;margin-left:12px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){.hero-web-preview .ai-scene{top:250px;transform:scale(.36)}.hero-web-preview .ai-hero{height:660px}.hero-web-preview .ai-agent--grok{left:150px;top:400px;width:180px}.hero-web-preview .ai-agent--cursor{left:1280px;top:365px;width:150px}.hero-web-preview .ai-agent--claude{left:315px;top:190px;width:180px}.hero-web-preview .ai-agent--chatgpt{left:1040px;top:210px;width:190px}.hero-web-preview .ai-agent--deepseek{left:220px;top:610px;width:190px}.hero-web-preview .ai-agent--gemini{left:1210px;top:540px;width:180px}.hero-web-preview .ai-agent--copilot{left:1100px;top:760px;width:170px}.hero-web-preview .ai-connections--desktop{display:inline}.hero-web-preview .ai-connections--mobile{display:none}.hero-preview-compare{padding:12px 18px}.hero-preview-compare a{margin-left:8px}}
@media(max-width:380px){.hero-web-preview .ai-scene{transform:scale(.32);top:265px}.hero-web-preview .ai-hero{height:635px}}
@media(prefers-reduced-motion:reduce){.hero-web-preview .preview-viewport img{animation:none!important;opacity:0;transform:none}.hero-web-preview .preview-viewport img:first-child{opacity:1}.preview-leds rect{animation:none;opacity:.35}}
@media(max-width:760px){.hero-web-preview .ai-scene{top:265px;transform:scale(.30)}.hero-web-preview .ai-hero{height:610px}.hero-web-preview .ai-agent--cursor{left:1210px;width:132px}.hero-web-preview .ai-connections--desktop{display:none}.hero-web-preview .ai-connections--mobile{display:inline}}
@media(max-width:380px){.hero-web-preview .ai-scene{top:280px;transform:scale(.25)}.hero-web-preview .ai-hero{height:590px}}
/* Refined concept: complete colorful websites, restrained hardware and airy framing. */
.hero-web-preview .ai-hero{background-image:radial-gradient(ellipse at 50% 23%,#ffffff80,transparent 65%),url('../pearl-studio-v1/background.webp')}
.hero-web-preview .preview-window--left{left:50px;top:302px;width:425px;height:410px;--accent:#16864e;--paper:#ecf7ed;--cycle:48s;--offset:-18s}
.hero-web-preview .preview-window--center{left:488px;top:298px;width:556px;height:390px;--accent:#e76532;--paper:#fff3df;--cycle:48s;--offset:-10s}
.hero-web-preview .preview-window--right{left:1060px;top:302px;width:425px;height:410px;--accent:#147cb6;--paper:#e7f6ff;--cycle:48s;--offset:-2s}
.preview-site-bar{height:44px;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--accent);color:#fff;border-bottom:1px solid #ffffff90}
.preview-site-bar strong{font:800 15px/1.2 Arial,sans-serif;letter-spacing:1px;white-space:nowrap}.preview-site-bar>span{font:10px/1.2 Arial,sans-serif;margin-left:auto;white-space:nowrap}.preview-site-bar>b{font:16px Arial,sans-serif}
.hero-web-preview .preview-viewport{height:calc(100% - 108px)}
.hero-web-preview .preview-viewport img{object-position:center;--phase:var(--offset)}
.hero-web-preview .preview-viewport img:nth-child(2){--phase:calc(var(--offset) - var(--cycle) / 2)}
@keyframes preview-image-cycle{0%,47%{opacity:1;transform:translateY(0) scale(1)}50%,97%{opacity:0;transform:translateY(12px) scale(1.018)}100%{opacity:1;transform:translateY(0) scale(1)}}
.preview-site-copy{position:absolute;z-index:2;left:15px;top:17px;padding:14px;max-width:62%;background:var(--paper);border-radius:3px;color:#182b24;box-shadow:0 3px 12px #13231f12}
.preview-site-copy h3{font:500 27px/1.06 Georgia,serif;letter-spacing:-1px;margin:0 0 8px}.preview-site-copy p{font:10px/1.4 Arial,sans-serif;margin:0 0 12px;max-width:125px}.preview-site-copy>span{display:inline-flex;align-items:center;gap:13px;padding:9px 12px;background:var(--accent);color:white;font:700 10px Arial,sans-serif;border-radius:30px}
.preview-window--center .preview-site-copy{left:18px;top:17px;max-width:45%;padding:13px}.preview-window--center .preview-site-copy h3{font-size:26px;color:#753315}
.preview-window--right .preview-site-copy{background:#147cb6;color:#fff;max-width:59%}.preview-window--right .preview-site-copy>span{background:#fff;color:#126c9e}
.preview-site-footer{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--paper);color:var(--accent);font:700 10px Arial,sans-serif;border-top:1px solid #ffffff80}
.hero-web-preview .ai-server-stage{width:1000px;left:268px;top:420px}
.hero-web-preview .ai-agent--claude{left:40px;top:130px;width:120px}
.hero-web-preview .ai-agent--chatgpt{left:1390px;top:130px;width:130px}
.hero-web-preview .ai-agent--grok{left:-140px;top:370px;width:130px}
.hero-web-preview .ai-agent--cursor{left:1590px;top:360px;width:110px}
.hero-web-preview .ai-agent--deepseek{left:-110px;top:650px;width:145px}
.hero-web-preview .ai-agent--gemini{left:1575px;top:580px;width:125px}
.hero-web-preview .ai-agent--copilot{left:1430px;top:745px;width:135px}
.hero-web-preview .ai-agent figcaption{font-size:24px;letter-spacing:-.5px}
@media(max-width:760px){.hero-web-preview .ai-agent--claude{left:230px;top:145px;width:135px}.hero-web-preview .ai-agent--chatgpt{left:1190px;top:145px;width:140px}.hero-web-preview .ai-agent--grok{left:150px;top:390px;width:140px}.hero-web-preview .ai-agent--cursor{left:1260px;top:385px;width:110px}.hero-web-preview .ai-agent--deepseek{left:180px;top:660px;width:150px}.hero-web-preview .ai-agent--gemini{left:1240px;top:590px;width:135px}.hero-web-preview .ai-agent--copilot{left:1140px;top:785px;width:140px}}
@media(max-width:760px){.hero-web-preview .preview-window--left{left:200px;width:400px}.hero-web-preview .preview-window--right{left:940px;width:400px}}
/* Full-page deck: a new website rises in front while the old one recedes. */
.hero-web-preview .preview-window{overflow:visible;background:none;border:0;box-shadow:none;border-radius:0;--cycle:36s}
.hero-web-preview .preview-window--left{left:50px;top:245px;width:440px;height:620px;transform:perspective(1400px) rotateY(22deg);transform-origin:right bottom;--offset:-14s}
.hero-web-preview .preview-window--center{left:505px;top:265px;width:526px;height:600px;transform:none;--offset:-8s}
.hero-web-preview .preview-window--right{left:1046px;top:245px;width:440px;height:620px;transform:perspective(1400px) rotateY(-22deg);transform-origin:left bottom;--offset:-2s}
.preview-deck{position:absolute;inset:-32px -12px 0;overflow:hidden;perspective:1500px}
.preview-page{position:absolute;left:12px;right:12px;top:32px;height:calc(100% - 32px);overflow:hidden;border:1px solid #dce5ee;border-radius:10px;background:#fff;box-shadow:0 7px 18px #19355522;transform-origin:50% 85%;z-index:3;--phase:var(--offset)}
.preview-page:nth-child(2){z-index:1;transform:translateY(-18px) scale(.94);--phase:calc(var(--offset) - var(--cycle) / 2)}
.preview-websites[data-ready=true] .preview-page{animation:preview-deck-cycle var(--cycle) linear infinite;animation-delay:var(--phase)}
.hero-web-preview .preview-websites .preview-viewport img{animation:none!important;opacity:1!important;transform:none!important;object-fit:cover;object-position:center}
.hero-web-preview .preview-viewport{height:310px}
.hero-web-preview .preview-window--center .preview-viewport{height:280px}
.preview-page .preview-site-bar{height:40px;background:#fff;color:var(--accent)}
.preview-page .preview-site-copy{padding:12px;top:18px;left:16px;background:var(--paper);max-width:64%}
.preview-page .preview-site-copy h3{font-size:29px}.preview-page .preview-site-copy p{font-size:11px}.preview-page .preview-site-copy>span{font-size:11px}
.preview-page .preview-site-footer{height:24px;font-size:9px}
.preview-page-content{padding:16px;background:#fff;color:#202c36}
.preview-content-heading{display:flex;justify-content:space-between;align-items:center;font:12px/1.3 Arial,sans-serif;margin-bottom:10px}.preview-content-heading>span{font-size:9px;color:var(--accent)}
.preview-content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.preview-content-photo{height:70px;background-size:cover;border-radius:3px}
.preview-content-grid strong{display:block;font:700 10px/1.3 Arial,sans-serif;margin-top:5px}.preview-content-grid span{display:block;font:9px/1.3 Arial,sans-serif;color:#6b7479;margin-top:3px}
.preview-page-story{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid #e4e9ec}
.preview-page-story>div{height:105px;background-size:cover;background-position:center;border-radius:3px}
.preview-page-story p{font:20px/1.1 Georgia,serif;margin:2px 0}.preview-page-story small{display:block;font:10px/1.45 Arial,sans-serif;margin-top:9px;color:#63717a}
@keyframes preview-deck-cycle{0%,46%{transform:translate3d(0,0,0) scale(1);z-index:3;visibility:visible;animation-timing-function:cubic-bezier(.22,1,.36,1)}49%,94%{transform:translate3d(0,-18px,-50px) scale(.94);z-index:1;visibility:visible}94.01%{transform:translate3d(0,110%,50px) scale(.98);z-index:4;visibility:hidden}95%{transform:translate3d(0,110%,50px) scale(.98);z-index:4;visibility:visible;animation-timing-function:cubic-bezier(.16,1,.3,1)}100%{transform:translate3d(0,0,0) scale(1);z-index:4;visibility:visible}}
.hero-web-preview .ai-server-stage{width:1100px;left:218px;top:365px}
.preview-window--right .preview-page .preview-site-copy{background:#147cb6;color:#fff}
@media(min-width:761px){.hero-web-preview .ai-agent--claude{left:-140px}.hero-web-preview .ai-agent--chatgpt{left:1585px}.hero-web-preview .ai-agent--copilot{left:1575px}}
@media(max-width:760px){.hero-web-preview .preview-window--left{left:205px;top:245px;width:390px;transform:perspective(1800px) rotateY(10deg)}.hero-web-preview .preview-window--right{left:940px;top:245px;width:390px;transform:perspective(1800px) rotateY(-10deg)}}
@media(prefers-reduced-motion:reduce){.preview-websites[data-ready=true] .preview-page{animation:none!important}.preview-page:nth-child(2){transform:translateY(-18px) scale(.94)}.preview-page:first-child{z-index:3;transform:none}}
/* Keep the concept's silhouette fixed while whole pages move inside it. */
.hero-web-preview .preview-window{overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 7px 18px #19355522}
.preview-deck{inset:0;overflow:hidden;border-radius:inherit;isolation:isolate}
.preview-page{left:0;right:0;top:0;height:100%;display:grid;grid-template-rows:28px 40px 48% minmax(0,1fr) 24px;transform-origin:50% 100%;box-sizing:border-box;box-shadow:none}
.hero-web-preview .preview-page .preview-viewport,.hero-web-preview .preview-window--center .preview-page .preview-viewport{height:auto;min-height:0}
.preview-page-content{min-height:0;padding:12px;display:grid;grid-template-rows:16px 88px minmax(0,1fr);gap:8px;overflow:hidden}
.preview-content-heading{margin:0}
.preview-content-photo{height:58px}
.preview-page-story{min-height:0;margin:0;padding-top:8px;gap:10px;overflow:hidden}
.preview-page-story>div{height:100%;min-height:0}
.preview-page-story p{font-size:17px;line-height:1.12;margin:0}
.preview-page-story small{font-size:9px;margin-top:5px;line-height:1.3}
.preview-page .preview-site-footer{height:24px;box-sizing:border-box}
.hero-web-preview .preview-window::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;border:1px solid #dce5ee;border-radius:inherit;box-shadow:inset 0 -2px 0 #fff}
/* Align the website panels' lower edge with the hardware feet. */
.hero-web-preview .preview-window--left,.hero-web-preview .preview-window--right{height:584px}
.hero-web-preview .preview-window--center{height:564px}
.preview-page{grid-template-rows:28px 40px 46% minmax(0,1fr) 24px}
.preview-page-content{grid-template-rows:16px 80px minmax(0,1fr)}
.preview-content-photo{height:50px}
/* Review the website-and-server composition without AI marks or links. */
.hero-web-preview .ai-agent,.hero-web-preview .ai-connections,.hero-web-preview .ai-connections--desktop,.hero-web-preview .ai-connections--mobile{display:none!important}
/* A tight stagger makes the three panels advance as one cascading gesture. */
.hero-web-preview .preview-window--left{--offset:-14s}
.hero-web-preview .preview-window--center{--offset:-13.8s}
.hero-web-preview .preview-window--right{--offset:-13.6s}
/* Three-second changes, with the side panels stepping below the center. */
.hero-web-preview .preview-window{--cycle:6s}
.hero-web-preview .preview-window--left{top:355px;height:474px;--offset:-2s}
.hero-web-preview .preview-window--center{--offset:-1.8s}
.hero-web-preview .preview-window--right{top:355px;height:474px;--offset:-1.6s}
.preview-page-content{grid-template-rows:16px 70px minmax(0,1fr);gap:6px;padding:10px}
.preview-content-photo{height:40px}
.preview-page-story p{font-size:15px}
.preview-page-story small{font-size:8px}
@media(max-width:760px){.hero-web-preview .preview-window--left,.hero-web-preview .preview-window--right{top:355px}}
.preview-window--left .preview-page-story small,.preview-window--right .preview-page-story small{display:none}
/* Give each incoming page 1.2s to settle instead of a 0.3s snap. */
@keyframes preview-deck-cycle{0%,30%{transform:translate3d(0,0,0) scale(1);z-index:3;visibility:visible;animation-timing-function:cubic-bezier(.4,0,.2,1)}49%,79%{transform:translate3d(0,-18px,-50px) scale(.94);z-index:1;visibility:visible}79.01%{transform:translate3d(0,110%,50px) scale(.98);z-index:4;visibility:hidden}80%{transform:translate3d(0,110%,50px) scale(.98);z-index:4;visibility:visible;animation-timing-function:cubic-bezier(.22,.61,.36,1)}100%{transform:translate3d(0,0,0) scale(1);z-index:4;visibility:visible}}
.hero-web-preview .ai-server-stage{transform:scaleY(.8);transform-origin:50% 75%}
.hero-web-preview .ai-server-podium{transform:none;clip-path:polygon(0 75%,26% 75%,26% 70%,74% 70%,74% 75%,100% 75%,100% 100%,0 100%)}
.hero-web-preview .preview-leds{transform:scaleY(.8);transform-origin:50% 829px}
/* Shorten the center panel by 2%, keeping its lower edge at 829px. */
.hero-web-preview .preview-window--center{top:276.28px;height:552.72px}
/* Light overlays follow the same anchored 80% server-height transform. */
.preview-leds .preview-light-sweep{fill:none;stroke:#c5ffff;stroke-width:5;stroke-linecap:round;stroke-dasharray:20 200;stroke-dashoffset:20;filter:drop-shadow(0 0 4px #00dfff);animation:preview-light-travel 3s cubic-bezier(.45,0,.55,1) var(--light-delay) infinite alternate}
.preview-leds .preview-screen{fill:#57e9ff;filter:drop-shadow(0 0 4px #00cfff);animation:preview-screen-flicker 3.7s ease-in-out var(--screen-delay) infinite;opacity:.15}
@keyframes preview-light-travel{0%{stroke-dashoffset:20;opacity:.25}15%,85%{opacity:1}100%{stroke-dashoffset:-100;opacity:.25}}
@keyframes preview-screen-flicker{0%,100%{opacity:.08}12%{opacity:.35}18%{opacity:.12}23%{opacity:.42}33%,62%{opacity:.12}67%{opacity:.32}75%{opacity:.08}84%{opacity:.25}}
/* Soft floor reflections mirror the live cards and fade into the studio floor. */
.hero-web-preview .preview-window{-webkit-box-reflect:below 2px linear-gradient(transparent 68%,#00000020)}
@media(prefers-reduced-motion:reduce){.preview-leds .preview-light-sweep,.preview-leds .preview-screen{animation:none!important;opacity:.18}}
/* A further 2% reduction from the current center-panel height. */
.hero-web-preview .preview-window--center{top:287.3344px;height:541.6656px}
/* Reflect the already projected panels across the floor, not inside their Y rotation. */
.hero-web-preview .preview-window{-webkit-box-reflect:unset}
.hero-web-preview .preview-floor-reflection{position:absolute;left:0;top:829px;width:1536px;height:140px;overflow:hidden;z-index:2;pointer-events:none;opacity:.16;filter:blur(1.8px);mask-image:linear-gradient(to bottom,#000 0%,#0008 30%,transparent 95%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#0008 30%,transparent 95%)}
.hero-web-preview .preview-reflected-websites{inset:auto;left:0;top:0;width:1536px;height:960px;transform-origin:0 0;transform:translateY(829px) scaleY(-1)}
/* Five independent website designs per panel; one complete change every 3s. */
.hero-web-preview .preview-window{--cycle:15s}
.hero-web-preview .preview-window--left{--offset:-.4s}
.hero-web-preview .preview-window--center{--offset:-.2s}
.hero-web-preview .preview-window--right{--offset:0s}
.preview-page:nth-child(n+2){z-index:1;transform:translateY(-18px) scale(.94)}
@keyframes preview-deck-cycle{0%,12%{transform:translate3d(0,0,0) scale(1);z-index:3;visibility:visible;animation-timing-function:cubic-bezier(.4,0,.2,1)}20%,91.99%{transform:translate3d(0,-18px,-50px) scale(.94);z-index:1;visibility:visible}92%{transform:translate3d(0,110%,50px) scale(.98);z-index:4;visibility:hidden;animation-timing-function:cubic-bezier(.22,.61,.36,1)}92.01%{transform:translate3d(0,110%,50px) scale(.98);z-index:4;visibility:visible;animation-timing-function:cubic-bezier(.22,.61,.36,1)}100%{transform:translate3d(0,0,0) scale(1);z-index:4;visibility:visible}}
.hero-web-preview .preview-page .preview-viewport{background:var(--paper)}
.preview-art{position:absolute;inset:0 0 0 auto;width:90%;height:100%}
.hero-web-preview .preview-page .preview-site-copy{background:var(--paper);color:#23343a;max-width:53%}
.hero-web-preview .preview-page .preview-site-copy h3{color:inherit}
.hero-web-preview .preview-page .preview-site-copy>span{background:var(--accent);color:#fff}
.hero-web-preview .preview-page.preview-layout--split .preview-site-copy{top:auto;bottom:12px;background:#ffffffed}
.preview-layout--split .preview-site-copy h3{font-family:Arial,sans-serif;font-weight:700;font-size:25px}
.hero-web-preview .preview-page.preview-layout--product .preview-site-copy{background:transparent;top:26px;max-width:43%}
.preview-layout--product .preview-site-copy h3{font-size:31px;line-height:1.08}
.preview-layout--product .preview-art{width:87%;right:-22px}
.hero-web-preview .preview-page.preview-layout--poster .preview-site-copy{background:transparent;color:#c2fa49;max-width:56%;top:10px}
.preview-layout--poster .preview-site-copy h3{font:900 33px/.96 Arial,sans-serif;letter-spacing:-1.5px}
.preview-layout--poster .preview-art{width:76%;right:-40px;opacity:.85}
.preview-layout--poster .preview-site-bar{background:#171b24;color:#c2fa49}
.hero-web-preview .preview-page.preview-layout--poster .preview-site-copy>span{color:#171b24}
.preview-layout--bold .preview-site-copy h3{font:800 29px/1.04 Arial,sans-serif}
.hero-web-preview .preview-page.preview-layout--bold .preview-site-copy{background:transparent;max-width:49%}
.preview-layout--bold .preview-art{right:-25px;width:85%}
.hero-web-preview .preview-page.preview-layout--dashboard .preview-site-copy{background:transparent;max-width:42%;top:8px}
.preview-layout--dashboard .preview-site-copy h3{font:800 24px/1.08 Arial,sans-serif}
.preview-layout--dashboard .preview-art{right:-48px;width:90%;top:27px}
.hero-web-preview .preview-page.preview-layout--travel .preview-site-copy,.hero-web-preview .preview-page.preview-layout--solar .preview-site-copy{max-width:43%;background:transparent;top:14px}
.preview-layout--travel .preview-art,.preview-layout--solar .preview-art{right:-30px}
@media(prefers-reduced-motion:reduce){.preview-page:nth-child(n+2){transform:translateY(-18px) scale(.94)}}
.preview-content-photo{overflow:hidden}
.preview-content-photo .preview-art{position:static;width:100%;height:100%}
/* Vivid site identities: clear color, bright imagery and readable type. */
.preview-page[data-brand="DEW STUDIO"]{--accent:#e82b78!important;--paper:#ffe5ef!important}
.preview-page[data-brand="FORM & FIELD"]{--accent:#713bf3!important;--paper:#eee1ff!important}
.preview-page[data-brand="ORBIT"]{--accent:#5940f5!important;--paper:#e9e7ff!important}
.preview-page[data-brand="ROAM CLUB"]{--accent:#008c9b!important;--paper:#d5fff4!important}
.preview-page[data-brand="PAPER TRAIL"]{--accent:#ed5426!important;--paper:#fff0c9!important}
.preview-page[data-brand="SUNWARD"]{--accent:#d66b00!important;--paper:#fff2b3!important}
.preview-page[data-brand="NORTH FINANCE"]{--accent:#008c77!important;--paper:#d0fff0!important}
.preview-page[data-brand="SOUND OBJECT"]{--accent:#ee4227!important;--paper:#ffe1c9!important}
.hero-web-preview .preview-page .preview-viewport{background:linear-gradient(120deg,var(--paper) 24%,color-mix(in srgb,var(--accent) 60%,var(--paper)) 100%)}
.hero-web-preview .preview-page.preview-layout--poster .preview-viewport{background:#171b24}
.hero-web-preview .preview-websites .preview-viewport img{filter:saturate(1.22) brightness(1.045)}
.preview-page[data-brand="DEW STUDIO"] .preview-viewport{background:linear-gradient(125deg,#ffe5ed 15%,#ff82bc 65%,#ffba71)!important}
.preview-page[data-brand="FORM & FIELD"] .preview-viewport{background:linear-gradient(125deg,#eee2ff 15%,#b783ff 65%,#8b60ed)!important}
.preview-page[data-brand="ROAM CLUB"] .preview-viewport{background:linear-gradient(125deg,#d5fff3 15%,#64e4d9 65%,#27b9d9)!important}
.preview-page[data-brand="SUNWARD"] .preview-viewport{background:linear-gradient(125deg,#fff3b8 15%,#ffd361 65%,#ffaa49)!important}
.preview-page[data-brand="SOUND OBJECT"] .preview-viewport{background:linear-gradient(125deg,#ffe9d6 15%,#ffb080 65%,#ff7b5d)!important}
/* All fifteen websites use photographic heroes and matching photographic content. */
.hero-web-preview .preview-window .preview-page .preview-site-copy{background:#fffffff0;color:#23343a;max-width:53%;padding:12px;box-shadow:0 3px 12px #13231f12}
.hero-web-preview .preview-window .preview-page .preview-site-copy h3{color:#23343a}
.hero-web-preview .preview-window .preview-page.preview-layout--poster .preview-site-copy{background:#111a28e8;color:#c2fa49}
.hero-web-preview .preview-window .preview-page.preview-layout--poster .preview-site-copy h3{color:#c2fa49;font-size:30px}
.hero-web-preview .preview-page.preview-layout--product .preview-site-copy{max-width:49%}
.hero-web-preview .preview-websites .preview-viewport img{filter:saturate(1.12) brightness(1.025)}
.hero-web-preview .preview-page[data-brand="FORM & FIELD"] .preview-viewport img{object-position:center 22%}
/* Distinct card photos and a useful, business-specific closing section. */
.preview-page-story.preview-business-details{display:flex;flex-direction:column;gap:5px;padding-top:7px;overflow:hidden}
.preview-business-details h4{font:700 10px/1.2 Arial,sans-serif;color:var(--accent);margin:0}
.preview-business-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.preview-business-facts>span{display:flex;flex-direction:column;gap:3px;border-left:2px solid var(--accent);padding-left:6px}
.preview-business-facts b{font:700 10px/1.1 Arial,sans-serif;color:#22333a}
.preview-business-facts small{font:8px/1.15 Arial,sans-serif;color:#536268}
.preview-page .preview-content-grid>div>span{font-size:8px;line-height:1.2}
.preview-page .preview-content-heading>strong{font-size:11px}
.preview-page-story .preview-business-facts{height:auto;flex:1;min-height:0}
/* Give the three distinct content photos enough room to read as real subjects. */
.preview-page{grid-template-rows:28px 40px 42% minmax(0,1fr) 24px}
.preview-page-content{grid-template-rows:16px 90px minmax(0,1fr)}
.preview-content-photo{height:60px}
.preview-page.preview-layout--product .preview-site-copy h3{font-size:27px}
.preview-business-details h4{font-size:9px;line-height:1.15}
.preview-page-story.preview-business-details{gap:3px}
.preview-business-facts>span{gap:2px}
.preview-business-facts b{font-size:9px}
.preview-business-facts small{display:block!important;font-size:7px;line-height:1.15;margin:0}
/* Approved cyan and lavender backlighting, behind the projected website silhouettes. */
.hero-web-preview .preview-panel-lighting{position:absolute;inset:0;z-index:1;pointer-events:none}
.preview-panel-glow{position:absolute;top:330px;width:500px;height:525px;border-radius:35px;filter:blur(28px);opacity:.85;will-change:transform,opacity;animation:preview-glow-breathe 7s ease-in-out infinite alternate}
.preview-panel-glow--left{left:15px;background:radial-gradient(ellipse at 15% 40%,#25ffefa6,transparent 70%),linear-gradient(120deg,#35fff3a3,#55dcff50 65%,transparent);--glow-angle:7deg;transform:skewY(7deg)}
.preview-panel-glow--right{left:1021px;background:radial-gradient(ellipse at 85% 40%,#e98bffa6,transparent 70%),linear-gradient(240deg,#f29bffb0,#a48eff66 65%,transparent);--glow-angle:-7deg;transform:skewY(-7deg);animation-duration:8.5s;animation-delay:-3.2s}
.preview-floor-glow{position:absolute;top:805px;width:550px;height:145px;border-radius:50%;filter:blur(18px);opacity:.5;animation:preview-floor-shimmer 7s ease-in-out infinite alternate}
.preview-floor-glow--left{left:-10px;background:radial-gradient(ellipse,#4cfff578,transparent 68%)}
.preview-floor-glow--right{left:995px;background:radial-gradient(ellipse,#e599ff78,transparent 68%);animation-duration:8.5s;animation-delay:-3.2s}
@keyframes preview-glow-breathe{0%{opacity:.68;transform:skewY(var(--glow-angle)) translate3d(-3px,5px,0) scale(.985)}50%{opacity:.92}100%{opacity:.82;transform:skewY(var(--glow-angle)) translate3d(4px,-5px,0) scale(1.025)}}
@keyframes preview-floor-shimmer{from{opacity:.35;transform:scaleX(.96)}to{opacity:.6;transform:scaleX(1.035)}}
@media(max-width:760px){.preview-panel-glow--left{left:175px;width:440px}.preview-panel-glow--right{left:915px;width:440px}.preview-floor-glow--left{left:150px;width:490px}.preview-floor-glow--right{left:890px;width:490px}}
@media(prefers-reduced-motion:reduce){.preview-panel-glow,.preview-floor-glow{animation:none!important;will-change:auto}}
.preview-panel-glow{top:300px;height:555px;width:550px;filter:blur(30px)}
.preview-panel-glow--left{left:-45px;background:radial-gradient(ellipse at 15% 40%,#25ffefd9,transparent 72%),linear-gradient(120deg,#35fff3bf,#55dcff66 65%,transparent)}
.preview-panel-glow--right{left:1021px;background:radial-gradient(ellipse at 85% 40%,#e98bffd9,transparent 72%),linear-gradient(240deg,#f29bffce,#a48eff80 65%,transparent)}
@media(max-width:760px){.preview-panel-glow--left{left:140px;width:470px}.preview-panel-glow--right{left:925px;width:470px}}
/* Approved low mountain-shoulder lighting: clear upper silhouettes, luminous feet. */
.preview-panel-glow{top:535px;height:340px;width:610px;border-radius:60% 60% 30% 30%;filter:blur(25px);mask-image:linear-gradient(to bottom,transparent,#0008 35%,#000 72%);-webkit-mask-image:linear-gradient(to bottom,transparent,#0008 35%,#000 72%)}
.preview-panel-glow--left{left:-90px;background:radial-gradient(ellipse at 50% 100%,#34fff0ee 0%,#35f9edaa 28%,#44e5f855 52%,transparent 75%);--glow-angle:0deg}
.preview-panel-glow--right{left:1016px;background:radial-gradient(ellipse at 50% 100%,#efa1ffee 0%,#d18dffaa 28%,#b8a0ff55 52%,transparent 75%);--glow-angle:0deg}
.preview-floor-glow{top:810px;height:135px;width:610px;filter:blur(20px)}
.preview-floor-glow--left{left:-90px;background:radial-gradient(ellipse,#36fff4a6,transparent 70%)}
.preview-floor-glow--right{left:1016px;background:radial-gradient(ellipse,#eb9dffa6,transparent 70%)}
@media(max-width:760px){.preview-panel-glow--left,.preview-floor-glow--left{left:100px;width:510px}.preview-panel-glow--right,.preview-floor-glow--right{left:910px;width:510px}}
.preview-panel-glow{mask-image:linear-gradient(to bottom,transparent,#0008 35%,#000 65%,#0008 82%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#0008 35%,#000 65%,#0008 82%,transparent)}
.preview-panel-glow--left{background:radial-gradient(ellipse at 50% 85%,#34fff0ee 0%,#35f9edaa 28%,#44e5f855 52%,transparent 75%)}
.preview-panel-glow--right{background:radial-gradient(ellipse at 50% 85%,#efa1ffee 0%,#d18dffaa 28%,#b8a0ff55 52%,transparent 75%)}
.preview-panel-glow--left{background:radial-gradient(ellipse at 30% 85%,#34fff0ee 0%,#35f9edaa 28%,#44e5f855 52%,transparent 75%)}
.preview-panel-glow--right{background:radial-gradient(ellipse at 70% 85%,#efa1ffee 0%,#d18dffaa 28%,#b8a0ff55 52%,transparent 75%)}
/* Feather every edge of the low halo, including its lateral boundaries. */
.preview-panel-glow{mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 40%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 40%,transparent 100%)}
/* Increase the approved low-light treatment by 10%, preserving its falloff. */
.preview-panel-lighting{filter:brightness(1.1) saturate(1.1)}
/* A further 10% light increase, plus a grounded contact shadow on the podium. */
.preview-panel-lighting{filter:brightness(1.21) saturate(1.21)}
.hero-web-preview .ai-scene .mascot-parallax::before{width:58%;height:30px;left:23%;bottom:6px;background:radial-gradient(ellipse at center,#142c497a 0%,#203f6340 38%,transparent 72%);filter:blur(4px);transform:scaleX(1.12);z-index:-1}
/* Smaller photographic assets, with no large animated offscreen filter group. */
.hero-web-preview .ai-hero{background-image:radial-gradient(ellipse at 50% 23%,#ffffff80,transparent 65%),url('./perf-v1/background.webp')}
.preview-panel-lighting{filter:none}
@keyframes preview-glow-breathe{0%{opacity:.823;transform:skewY(var(--glow-angle)) translate3d(-3px,5px,0) scale(.985)}50%{opacity:1}100%{opacity:.992;transform:skewY(var(--glow-angle)) translate3d(4px,-5px,0) scale(1.025)}}
@keyframes preview-floor-shimmer{from{opacity:.424;transform:scaleX(.96)}to{opacity:.726;transform:scaleX(1.035)}}
/* Only the current page and its entering/receding neighbor need painting. */
@keyframes preview-deck-cycle{0%,12%{transform:translate3d(0,0,0) scale(1);z-index:3;visibility:visible;animation-timing-function:cubic-bezier(.4,0,.2,1)}20%{transform:translate3d(0,-18px,-50px) scale(.94);z-index:1;visibility:visible}20.01%,91.99%{transform:translate3d(0,-18px,-50px) scale(.94);z-index:1;visibility:hidden}92%{transform:translate3d(0,110%,50px) scale(.98);z-index:4;visibility:hidden;animation-timing-function:cubic-bezier(.22,.61,.36,1)}92.01%{transform:translate3d(0,110%,50px) scale(.98);z-index:4;visibility:visible;animation-timing-function:cubic-bezier(.22,.61,.36,1)}100%{transform:translate3d(0,0,0) scale(1);z-index:4;visibility:visible}}
.hero-web-preview .ai-composition::after{background-image:url('./perf-v1/dragon-dragie-whole.webp')}

/* Website design offer: compact hierarchy keeps the approved artwork visible. */
.hero-web-preview .ai-hero-copy{padding-top:16px}
.preview-offer-eyebrow{display:inline-block;margin:0 0 6px;padding:4px 15px;border:1px solid #ff001830;border-radius:100px;background:#fff5f5;color:#e51229;font-size:.95rem;font-weight:800;line-height:1.3;letter-spacing:.02em}
.hero-web-preview .ai-hero h1{font-size:clamp(2.2rem,1.5rem + 2.8vw,3.5rem);line-height:1.22;letter-spacing:-.03em;white-space:normal;text-wrap:balance}
.hero-web-preview .preview-offer-price{display:flex;justify-content:center;align-items:baseline;gap:.3em;margin:0 0 4px;font-size:clamp(1.3rem,.9rem + 1.3vw,2rem);line-height:1.2;letter-spacing:-.025em;color:#14151a}
.preview-offer-price strong{color:#ff0018;font-size:clamp(3rem,2rem + 3vw,4.5rem);font-weight:800;letter-spacing:-.055em;line-height:1.05}
.hero-web-preview .preview-offer-description{margin:0 0 12px;font-size:clamp(1rem,.85rem + .6vw,1.5rem);line-height:1.45;color:#454b56;text-wrap:balance}
.preview-offer-description span{display:inline-block;margin-left:.3em;font-weight:700;color:#161b23}
@media(max-width:760px){.hero-web-preview .ai-hero-copy{padding-top:16px}.preview-offer-eyebrow{font-size:.78rem;padding:3px 12px;margin-bottom:5px}.hero-web-preview .ai-hero h1{font-size:2.15rem}.hero-web-preview .preview-offer-price{font-size:1.15rem;gap:.25em;margin-bottom:6px}.preview-offer-price strong{font-size:3.4rem}.hero-web-preview .preview-offer-description{max-width:340px;margin:0 auto 12px;font-size:1rem}.preview-offer-description span{display:block;margin-left:0}}
@media(max-width:380px){.hero-web-preview .ai-hero h1{font-size:1.9rem}.preview-offer-price strong{font-size:3rem}}

/* Approved advertising poster layout, with actions in the second column. */
@media(min-width:761px){
 .hero-web-preview .ai-hero-copy{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:32px;align-items:center;width:min(1140px,calc(100% - 80px));margin-inline:auto;padding:16px 0 0;text-align:left}
 .hero-web-preview .ai-hero-copy h1{grid-column:1;grid-row:1;font-size:clamp(2.5rem,5.1vw,5rem);line-height:1.05;text-wrap:initial;letter-spacing:-.035em;white-space:nowrap}
 .hero-web-preview .preview-offer-price{grid-column:1;grid-row:2;justify-content:flex-start;gap:.25em;margin:0;font-size:clamp(1.25rem,2.2vw,2.25rem);font-weight:800;line-height:1}
 .hero-web-preview .preview-offer-price strong{font-size:clamp(4rem,9.1vw,9.5rem);line-height:1.02;letter-spacing:-.065em}
 .hero-web-preview .preview-offer-price::before{content:'';position:absolute}
 .hero-web-preview .preview-offer-description{grid-column:1;grid-row:3;margin:5px 0 0;font-size:clamp(1rem,1.45vw,1.65rem);line-height:1.4;text-wrap:initial;white-space:nowrap}
 .hero-web-preview .preview-offer-description span{display:inline-block;margin-left:.5em;border-left:2px solid #ff0018;padding-left:.5em}
 .hero-web-preview .ai-hero-copy .dragon-actions{grid-column:2;grid-row:1 / 4;display:flex;flex-direction:column;gap:14px;align-items:stretch;border-left:1px solid #c4cdd8;padding-left:32px;margin:0}
 .hero-web-preview .ai-hero-copy .dragon-button{width:100%;justify-content:center;white-space:nowrap;font-size:1.4rem;min-height:64px;padding:12px 18px}
}
@media(min-width:761px) and (max-width:1100px){
 .hero-web-preview .ai-hero-copy{grid-template-columns:minmax(0,1fr) 240px;column-gap:20px;width:calc(100% - 64px)}
 .hero-web-preview .ai-hero-copy .dragon-actions{padding-left:20px}
 .hero-web-preview .ai-hero-copy .dragon-button{font-size:1rem;min-height:50px;padding-inline:12px}
 .hero-web-preview .preview-offer-description{white-space:normal}
 .hero-web-preview .preview-offer-description span{display:block;margin-left:0;padding-left:0;border-left:0}
}
.hero-web-preview .ai-scene .mascot-float{animation:none;transform:translateY(-26px);filter:drop-shadow(0 8px 8px #27487824)}
.hero-web-preview .ai-scene .mascot-parallax::before,.hero-web-preview .ai-composition::after{display:none}
.preview-flight-shadow{position:absolute;left:654px;top:813px;width:228px;height:30px;border-radius:50%;background:radial-gradient(ellipse,#17334f80 0%,#23466b40 40%,transparent 73%);filter:blur(5px);z-index:4;pointer-events:none;transform-origin:50% 50%}
.preview-frame-light{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:8;fill:none}
.preview-frame-light rect{stroke-dasharray:14 86;stroke-dashoffset:100;animation:preview-rim-travel var(--rim-duration,6s) linear var(--rim-delay,0s) infinite;stroke-linecap:round}
.preview-frame-light--glow{stroke:#30e7ff;stroke-width:7;filter:blur(3px);opacity:.75}
.preview-frame-light--core{stroke:#ddffff;stroke-width:2.5;filter:drop-shadow(0 0 3px #37e8ff)}
@keyframes preview-rim-travel{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.preview-frame-light rect{animation:none;stroke-dashoffset:18;opacity:.35}}

/* Pull the offer into one centered composition, closer to its action column. */
@media(min-width:761px){
 .hero-web-preview .ai-hero-copy h1,.hero-web-preview .preview-offer-description{text-align:center}
 .hero-web-preview .preview-offer-price{justify-content:center}
}
@media(min-width:1101px){
 .hero-web-preview .ai-hero-copy{width:min(1040px,calc(100% - 80px));grid-template-columns:minmax(0,1fr) 300px;column-gap:28px}
 .hero-web-preview .ai-hero-copy .dragon-actions{padding-left:24px}
 .hero-web-preview .ai-hero-copy .dragon-button{font-size:1.25rem;min-height:60px;padding-inline:14px}
}
/* Wider, softly feathered moving streaks, with a sharp illuminated center. */
.preview-frame-light rect{stroke-dasharray:20 80}
.preview-frame-light--halo{stroke:#00dfff;stroke-width:20;filter:blur(8px);opacity:.72}
.preview-frame-light--glow{stroke:#46efff;stroke-width:10;filter:blur(3.5px);opacity:.95}
.preview-frame-light--core{stroke:#efffff;stroke-width:4;filter:drop-shadow(0 0 5px #38eaff)}

/* Bring the actions inward, and restore the concept's price underline. */
@media(min-width:1101px){
 .hero-web-preview .ai-hero-copy{width:min(960px,calc(100% - 80px));grid-template-columns:minmax(0,1fr) 300px;column-gap:12px}
 .hero-web-preview .ai-hero-copy .dragon-actions{padding-left:16px}
}
.preview-offer-lead{position:relative;display:inline-block;white-space:nowrap}
.preview-offer-lead::after{content:'';position:absolute;left:0;right:0;bottom:-.2em;height:3px;border-radius:2px;background:#ff0018}
@media(max-width:760px){.preview-offer-lead::after{height:2px;bottom:-.14em}}
.hero-web-preview .ai-server-podium{clip-path:url(#preview-podium-contour)}
/* Soft taper: no uniform dashed bar or hard tail edge. */
.preview-frame-light path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.preview-frame-light--halo{stroke-width:32;filter:blur(12px);opacity:.85}
.preview-frame-light--glow{stroke-width:13;filter:blur(5px);opacity:.9}
.preview-frame-light--core{stroke-width:3;filter:blur(.6px) drop-shadow(0 0 4px #6df3ff);opacity:.9}
.preview-frame-light-head{filter:blur(3px)}

/* Brand-colored gradient, with readable solid-color fallback. */
@supports (background-clip:text) or (-webkit-background-clip:text){
 .hero-web-preview .preview-offer-price strong{background-image:linear-gradient(to bottom,#b80835 0%,#ff0033 48%,#ef4f2b 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
@media(forced-colors:active){.hero-web-preview .preview-offer-price strong{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}

/* Preserve the final glyph's ink beyond its negative tracking advance. */
.hero-web-preview .preview-offer-price strong{padding-inline:.02em .1em;margin-inline:-.02em -.1em;flex-shrink:0;overflow:visible}