/* /web-design 企業網站設計 (pages/web-design, 2026-10-14). Needs public/css/rt-hue.css (tokens, .hx-*). JS: public/js/pg-web-design.js.
   1. hero: a design canvas (rulers, selection box, cursor). Wireframe → colour → desktop + phone → AI adds a block.
   2. real client sites: a big browser that scrolls each home page top to bottom, a list switches sites.
   3. AI after hand-over (violet panel, scenario films, compare grid).  4. annotated "what's included" mock.
   5. steps with tiny looping scenes.  6. which kind of site.
   Colours are tokens; light-theme tweaks at the end (site rule: no large dark block in the light theme).
   2026-10-14 SPEC-v2: radii 20 (panels) / 16 (cards) / 14 (icon tiles); card text 16.5px, secondary text >= 14.5px; no top-edge accents
   or inset top highlights; the compare grid is gone (no longer rendered). The hero is a still frame now (data-still, bar hidden). */

@property --wc{syntax:'<color>';inherits:true;initial-value:#3CC6F2}

.wd-wrap{max-width:1500px;margin:0 auto;padding:clamp(18px,2.4vw,34px) clamp(16px,3vw,48px) 0}
.wd-sec{padding:clamp(56px,6.4vw,96px) 0 0;scroll-margin-top:calc(var(--nav-h) + 16px)}
.wd-sub{display:flex;align-items:center;gap:14px;margin:0 0 16px;font-size:clamp(20px,1.6vw,24px);font-weight:800;line-height:1.35;color:var(--fg)}
.wd-sub::after{content:"";flex:1;height:1px;background:var(--line)}
#works .hx-head h2 .hl{color:var(--hx-sub)}
#kit .hx-head h2 .hl{color:var(--hx-pink)}
#fit .hx-head h2 .hl{color:var(--hx-teal)}
.wd-wrap .hx-head h2{word-break:keep-all;overflow-wrap:anywhere}
.wd-wrap .hx-head-row>.hx-more{padding:10px 0}

/* ================= 1. HERO: design canvas ================= */
.wd-hero{--c:var(--hx-web);--wc:var(--c);transition:--wc .9s ease;position:relative;container-type:inline-size;border:1px solid var(--line);border-radius:20px;overflow:hidden;isolation:isolate;background:var(--chrome);
  box-shadow:0 34px 80px -46px rgba(0,0,0,.85),0 0 110px -60px var(--wc)}
.wd-frame{position:relative;height:max(590px,45cqw);overflow:hidden;isolation:isolate;background:var(--hx-stage);color:var(--hx-text)}
.wd-frame::before{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(var(--hx-grid) 1px,transparent 1px),linear-gradient(90deg,var(--hx-grid) 1px,transparent 1px);background-size:32px 32px;
  -webkit-mask-image:radial-gradient(85% 95% at 70% 45%,#000 30%,transparent 88%);mask-image:radial-gradient(85% 95% at 70% 45%,#000 30%,transparent 88%)}
.wd-aura{position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:radial-gradient(34% 40% at 72% 46%,color-mix(in srgb,var(--wc) 28%,transparent),transparent 70%),
             radial-gradient(26% 32% at 14% 90%,color-mix(in srgb,var(--hx-sub) 15%,transparent),transparent 70%),
             radial-gradient(24% 28% at 32% 6%,color-mix(in srgb,var(--hx-pink) 13%,transparent),transparent 70%);
  animation:wd-drift 20s ease-in-out infinite alternate}
@keyframes wd-drift{to{transform:translate3d(-3%,2%,0) scale(1.06)}}

/* rulers along the top and left edge, with a highlight that follows the selection box */
.wd-ruler{position:absolute;z-index:1;pointer-events:none;background-color:color-mix(in srgb,var(--hx-surface) 72%,transparent)}
.wd-ruler.x{left:18px;right:0;top:0;height:18px;border-bottom:1px solid var(--line-soft);
  background-image:repeating-linear-gradient(90deg,color-mix(in srgb,var(--hx-text) 24%,transparent) 0 1px,transparent 1px 10px),repeating-linear-gradient(90deg,color-mix(in srgb,var(--hx-text) 42%,transparent) 0 1px,transparent 1px 50px);
  background-size:100% 5px,100% 10px;background-repeat:repeat-x;background-position:0 100%,0 100%}
.wd-ruler.y{left:0;top:18px;bottom:0;width:18px;border-right:1px solid var(--line-soft);
  background-image:repeating-linear-gradient(180deg,color-mix(in srgb,var(--hx-text) 24%,transparent) 0 1px,transparent 1px 10px),repeating-linear-gradient(180deg,color-mix(in srgb,var(--hx-text) 42%,transparent) 0 1px,transparent 1px 50px);
  background-size:5px 100%,10px 100%;background-repeat:repeat-y;background-position:100% 0,100% 0}
.wd-ruler.x::before{content:"";position:absolute;left:-18px;top:0;width:18px;height:18px;border-right:1px solid var(--line-soft);background:var(--hx-surface-2)}
.wd-ruler b{position:absolute;display:block;background:color-mix(in srgb,var(--wc) 26%,transparent);opacity:0;transition:left .7s cubic-bezier(.65,0,.35,1),top .7s cubic-bezier(.65,0,.35,1),width .7s cubic-bezier(.65,0,.35,1),height .7s cubic-bezier(.65,0,.35,1),opacity .4s}
.wd-ruler.x b{top:0;bottom:0;border-left:1px solid var(--wc);border-right:1px solid var(--wc)}
.wd-ruler.y b{left:0;right:0;border-top:1px solid var(--wc);border-bottom:1px solid var(--wc)}
.wd-ruler b.is-on{opacity:1}

.wd-body{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:3.2cqw;padding:calc(3.4cqw + 14px) 3.6cqw 3.4cqw calc(4.4cqw + 12px)}

/* copy */
.wd-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:7px 15px;border:1px solid color-mix(in srgb,var(--wc) 45%,var(--line));border-radius:99px;background:color-mix(in srgb,var(--wc) 9%,transparent);font:600 14.5px/1.25 var(--font-mono);letter-spacing:.06em;color:var(--hx-text-2)}
.wd-kicker i{width:8px;height:8px;border-radius:50%;background:var(--wc);box-shadow:0 0 10px var(--wc);animation:wd-blink 1.8s ease-in-out infinite}
@keyframes wd-blink{50%{opacity:.25}}
.wd-hero h1{margin:0;font-size:clamp(38px,4.6cqw,70px);line-height:1.1;letter-spacing:-.035em;font-weight:900;color:var(--hx-text);word-break:keep-all;text-wrap:balance}
.wd-hero h1 span{display:block}
.wd-hero h1 .g{margin-top:.2em;font-size:.58em;line-height:1.3;letter-spacing:-.02em;background:linear-gradient(100deg,var(--hx-pink) 0%,var(--hx-ai) 50%,var(--hx-sub) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.wd-now{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin:24px 0 0;font-size:clamp(17px,1.5cqw,21px);font-weight:700;color:var(--hx-text-2)}
.wd-now b{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:11px;background:color-mix(in srgb,var(--wc) 15%,transparent);border:1px solid color-mix(in srgb,var(--wc) 50%,transparent);color:var(--wc);font-weight:800}
.wd-now b::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--wc)}
.wd-now b.is-swap{animation:wd-swap .5s cubic-bezier(.2,.8,.2,1)}
@keyframes wd-swap{from{opacity:0;transform:translateY(10px)}}
.wd-lead{margin:18px 0 0;max-width:31em;font-size:18px;line-height:1.8;color:var(--hx-text-2)}
.wd-hero .actions{margin-top:28px;gap:12px}

/* visual: desktop browser, phone, swatch card, chat bubble, toast, selection box, cursor, chips */
.wd-visual{position:relative;height:min(100%,44cqw);min-height:430px}
.wd-desk{position:absolute;left:0;top:7%;width:94%;height:80%;--c:var(--wc);
  transition:width .85s cubic-bezier(.65,0,.35,1),height .85s cubic-bezier(.65,0,.35,1),top .85s cubic-bezier(.65,0,.35,1);
  box-shadow:0 44px 90px -44px rgba(0,0,0,.9),0 0 0 1px color-mix(in srgb,var(--wc) 30%,transparent),0 0 70px -24px color-mix(in srgb,var(--wc) 55%,transparent)}
.wd-desk .hx-win-bar,.wd-kit-desk .hx-win-bar{height:30px;font-size:12px}
.wd-url{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:3px 12px;border-radius:99px;background:var(--hx-surface);border:1px solid var(--line-soft);color:var(--hx-text-2)}
.wd-url::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--wc,var(--hx-web))}
.wd-desk .hx-win-body,.wd-kit-desk .hx-win-body{container-type:size;overflow:hidden;background:var(--hx-surface)}
.is-rwd .wd-desk{width:71%;height:70%;top:13%}

/* the site mock: a wireframe by default, coloured with .is-color (hero) or .is-done (kit) */
.wd-site{--newbg:linear-gradient(110deg,var(--hx-ai),color-mix(in srgb,var(--hx-ai) 45%,var(--hx-pink)));--newfg:var(--hx-on);--bar:color-mix(in srgb,var(--hx-text) 15%,transparent);--wire:color-mix(in srgb,var(--hx-text) 32%,transparent);--b1:var(--hx-pink);--b2:var(--hx-sub);--b3:var(--hx-teal);
  position:absolute;inset:0;display:flex;flex-direction:column;gap:2.6cqw;padding:3cqw 3.6cqw;font-family:var(--font-sans);color:var(--hx-text)}
.wd-site i,.wd-site b,.wd-site em{display:block;font-style:normal}
.wd-site .blk{position:relative;flex:none;border:1.5px dashed var(--wire);border-radius:1.6cqw;background-color:transparent;
  transition:background-color .6s ease,border-color .6s ease;transition-delay:calc(var(--i,0) * 120ms)}
.wd-site .blk[data-lb]::after{content:attr(data-lb);position:absolute;right:1.2cqw;top:1cqw;padding:.35cqw 1cqw;border-radius:.8cqw;background:var(--hx-stage);font:700 max(12px,1.6cqw)/1.2 var(--font-mono);color:var(--hx-text-2);transition:opacity .4s}
.wd-site .pill{width:13cqw;height:4.4cqw;border-radius:99px;border:1.5px dashed var(--wire);transition:background-color .6s,border-color .6s;transition-delay:calc(var(--i,0) * 120ms + 200ms)}
.wd-site .logo{width:5cqw;height:5cqw;border-radius:1.4cqw;border:1.5px dashed var(--wire);transition:background .6s,border-color .6s}
.w-nav{display:flex;align-items:center;gap:2.6cqw;height:8cqw;padding:0 1.8cqw}
.w-nav>i{width:8cqw;height:1.7cqw;border-radius:99px;background:var(--bar)}
.w-nav>.pill{margin-left:auto;width:11cqw;height:4cqw}
.w-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:3.4cqw;align-items:center;height:27cqw;padding:2.6cqw}
.wd-site .tx{display:flex;flex-direction:column;gap:2cqw}
.wd-site .tx i{height:3cqw;border-radius:.9cqw;background:var(--bar);transition:background-color .6s,opacity .6s;transition-delay:calc(var(--i,0) * 120ms + 150ms)}
.wd-site .tx .l1{width:94%}.wd-site .tx .l2{width:72%}.wd-site .tx .l3{width:84%;height:1.5cqw}
.wd-site .tx .pill{margin-top:1.2cqw}
.wd-site .ph{position:relative;height:100%;min-height:0;border-radius:1.8cqw;overflow:hidden;border:1.5px dashed var(--wire);background-color:transparent;transition:background-color .7s,border-color .7s;transition-delay:calc(var(--i,1) * 120ms + 120ms)}
.wd-site .ph::before{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - 1px),var(--wire) 50%,transparent calc(50% + 1px)),linear-gradient(to bottom right,transparent calc(50% - 1px),var(--wire) 50%,transparent calc(50% + 1px));transition:opacity .5s}
.wd-site .ph .sun{position:absolute;right:17%;top:16%;width:22%;aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--b2) 85%,#fff);box-shadow:0 0 5cqw color-mix(in srgb,var(--b2) 70%,transparent);opacity:0;transform:translateY(30%);transition:opacity .6s .5s,transform .9s cubic-bezier(.2,.8,.2,1) .5s}
.wd-site .ph .hill{position:absolute;left:-12%;right:30%;bottom:-38%;height:72%;border-radius:50% 50% 0 0;background:color-mix(in srgb,var(--b1) 55%,var(--hx-stage));opacity:0;transform:translateY(40%);transition:opacity .6s .6s,transform .9s cubic-bezier(.2,.8,.2,1) .6s}
.wd-site .ph .hill.b{left:28%;right:-20%;bottom:-44%;height:66%;background:color-mix(in srgb,var(--b3) 55%,var(--hx-stage));transition-delay:.75s}
.w-cards{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw}
.w-cards .blk{display:flex;flex-direction:column;gap:1.3cqw;padding:1.6cqw;min-height:0;overflow:hidden}
.w-cards .im{flex:1;min-height:0;border-radius:1.2cqw;background:var(--bar);transition:background .6s;transition-delay:calc(var(--i,0) * 120ms + 150ms)}
.w-cards .t,.wd-site .card .t{height:1.8cqw;width:70%;border-radius:99px;background:var(--bar)}
.w-cards .s{height:1.4cqw;width:46%;border-radius:99px;background:var(--bar)}

/* coloured */
:is(.is-color .wd-site,.wd-site.is-done) .blk{border-style:solid;border-color:var(--line-soft);background-color:var(--hx-surface-2)}
:is(.is-color .wd-site,.wd-site.is-done) .blk[data-lb]::after{opacity:0}
:is(.is-color .wd-site,.wd-site.is-done) .w-nav{border-color:transparent;background-color:transparent}
:is(.is-color .wd-site,.wd-site.is-done) .logo{border-color:transparent;background:linear-gradient(135deg,var(--b1),var(--b2))}
:is(.is-color .wd-site,.wd-site.is-done) .pill{border-style:solid;border-color:transparent;background-color:var(--b1)}
:is(.is-color .wd-site,.wd-site.is-done) .w-hero{border-color:transparent;background-color:color-mix(in srgb,var(--b1) 11%,var(--hx-surface-2))}
:is(.is-color .wd-site,.wd-site.is-done) .tx .l1{background:var(--hx-text);opacity:.85}
:is(.is-color .wd-site,.wd-site.is-done) .tx .l2{background:var(--b1)}
:is(.is-color .wd-site,.wd-site.is-done) .ph{border-style:solid;border-color:transparent;background-color:color-mix(in srgb,var(--b1) 38%,var(--hx-ai))}
:is(.is-color .wd-site,.wd-site.is-done) .ph::before{opacity:0}
:is(.is-color .wd-site,.wd-site.is-done) .ph :is(.sun,.hill){opacity:1;transform:none}
:is(.is-color .wd-site,.wd-site.is-done) .w-cards .blk:nth-child(1) .im{background:color-mix(in srgb,var(--b1) 50%,var(--hx-surface))}
:is(.is-color .wd-site,.wd-site.is-done) .w-cards .blk:nth-child(2) .im{background:color-mix(in srgb,var(--b2) 50%,var(--hx-surface))}
:is(.is-color .wd-site,.wd-site.is-done) .w-cards .blk:nth-child(3) .im{background:color-mix(in srgb,var(--b3) 50%,var(--hx-surface))}

/* the block AI adds on request (desktop and phone) */
.wd-site .w-new{flex:none;display:flex;align-items:center;justify-content:space-between;gap:2cqw;max-height:0;margin-top:-2.6cqw;padding:0 2.4cqw;border-radius:1.6cqw;overflow:hidden;opacity:0;
  border:1.5px solid transparent;background:var(--newbg);color:var(--newfg)}
.wd-site .w-new>div{display:flex;flex-direction:column;gap:1cqw}
.wd-site .w-new b{font-size:max(12px,2.5cqw);font-weight:900;line-height:1.2;white-space:nowrap}
.wd-site .w-new>div>i{width:16cqw;height:1.4cqw;border-radius:99px;background:color-mix(in srgb,var(--newfg) 45%,transparent)}
.wd-site .w-new>span{display:flex;gap:1.4cqw}
.wd-site .w-new>span i{width:7cqw;height:7cqw;border-radius:1.2cqw;background:color-mix(in srgb,var(--newfg) 28%,transparent)}
.is-ai .wd-site .w-new{max-height:13cqw;height:13cqw;margin-top:0;opacity:1;animation:wd-new 1.3s cubic-bezier(.2,.8,.2,1) 1.3s backwards}
@keyframes wd-new{0%{max-height:0;margin-top:-2.6cqw;opacity:0;background:transparent;border-color:var(--hx-ai);border-style:dashed}
  45%{max-height:13cqw;margin-top:0;opacity:1;background:transparent;border-color:var(--hx-ai);border-style:dashed}
  70%{background:var(--newbg);border-color:transparent}}

/* phone */
.wd-phone{position:absolute;right:0;top:11%;height:80%;aspect-ratio:9/18.6;container-type:size;z-index:3;border-radius:7cqw;
  border:5px solid color-mix(in srgb,var(--hx-text) 86%,var(--hx-stage));background:var(--hx-surface);overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px color-mix(in srgb,var(--wc) 30%,transparent);
  opacity:0;transform:translateX(18%) scale(.9);transition:opacity .6s ease .25s,transform .85s cubic-bezier(.2,.8,.2,1) .25s}
.is-rwd .wd-phone{opacity:1;transform:none}
.wd-phone .notch,.wd-kit-phone .notch{position:absolute;z-index:2;left:50%;top:2.2cqh;width:30cqw;height:3.2cqh;margin-left:-15cqw;border-radius:99px;background:color-mix(in srgb,var(--hx-text) 86%,var(--hx-stage))}
.wd-site.m{gap:4cqw;padding:12cqh 7cqw 6cqw}
.wd-site.m .w-nav{height:11cqw;padding:0 3cqw}
.wd-site.m .logo{width:10cqw;height:10cqw;border-radius:3cqw}
.wd-site.m .burger{margin-left:auto;width:9cqw;height:7cqw;background:linear-gradient(var(--bar) 0 0) 0 0/100% 1.4cqw no-repeat,linear-gradient(var(--bar) 0 0) 0 50%/100% 1.4cqw no-repeat,linear-gradient(var(--bar) 0 0) 0 100%/100% 1.4cqw no-repeat}
.wd-site.m .ph{flex:none;height:46cqw;border-radius:4cqw}
.wd-site.m .ph .sun{width:28%}
.wd-site.m .tx{gap:3cqw}
.wd-site.m .tx i{height:5cqw;border-radius:2cqw}
.wd-site.m .tx .pill{width:36cqw;height:9cqw;margin-top:1cqw}
.wd-site.m .card{display:flex;flex-direction:column;gap:2.4cqw;padding:3cqw;flex:none;height:34cqw;border-radius:4cqw}
.wd-site.m .card .im{flex:1;border-radius:2.6cqw;background:var(--bar);transition:background .6s}
.wd-site.m .card .t{height:3.6cqw}
:is(.is-color .wd-site,.wd-site.is-done).m .card .im{background:color-mix(in srgb,var(--b2) 50%,var(--hx-surface))}
.wd-site.m .w-new{margin-top:-4cqw;padding:0 5cqw;border-radius:4cqw}
.wd-site.m .w-new b{font-size:max(12px,6cqw)}
.wd-site.m .w-new>div{gap:2.4cqw}
.wd-site.m .w-new>div>i{width:30cqw;height:3cqw}
.is-ai .wd-site.m .w-new{max-height:24cqw;height:24cqw;margin-top:0;animation-name:wd-new-m}
@keyframes wd-new-m{0%{max-height:0;margin-top:-4cqw;opacity:0;background:transparent;border-color:var(--hx-ai);border-style:dashed}
  45%{max-height:24cqw;margin-top:0;opacity:1;background:transparent;border-color:var(--hx-ai);border-style:dashed}
  70%{background:var(--newbg);border-color:transparent}}
.is-rwd .wd-phone .blk{animation:wd-pop .6s cubic-bezier(.2,.9,.3,1.15) backwards;animation-delay:calc(var(--i,0) * 120ms + 600ms)}
@keyframes wd-pop{from{opacity:0;transform:translateY(14px) scale(.94)}}

/* swatch card (visual design stage) */
.wd-swatch{position:absolute;z-index:4;right:30%;bottom:1%;display:flex;align-items:center;gap:12px;padding:11px 15px;border-radius:14px;background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--wc) 45%,var(--line));box-shadow:var(--hx-shadow);
  opacity:0;transform:translateY(14px) scale(.9);transition:opacity .4s,transform .5s cubic-bezier(.2,.9,.3,1.3);pointer-events:none}
.wd-swatch span{display:flex}
.wd-swatch span i{width:22px;height:22px;border-radius:50%;background:var(--s);border:2px solid var(--hx-surface)}
.wd-swatch span i+i{margin-left:-6px}
.wd-swatch b{font-size:22px;font-weight:900;line-height:1;color:var(--hx-text)}
.wd-swatch small{font-size:12px;font-weight:700;color:var(--hx-text-2)}
[data-stage="color"] .wd-swatch{opacity:1;transform:none;transition-delay:.7s}

/* chat bubble + toast (AI stage) */
.wd-say{position:absolute;z-index:5;left:2%;bottom:20%;display:flex;align-items:center;gap:10px;max-width:74%;margin:0;padding:9px 15px 9px 9px;border-radius:15px 15px 15px 4px;background:var(--hx-ai);color:var(--hx-on);
  font-size:clamp(13px,1.2cqw,15.5px);font-weight:800;line-height:1.3;box-shadow:0 18px 36px -18px var(--hx-ai);opacity:0;transform:translateY(14px) scale(.9);pointer-events:none}
.wd-say .av{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--hx-on) 22%,transparent);font-size:12px}
.wd-say .tx{display:block;white-space:nowrap;overflow:hidden}
.is-ai .wd-say{opacity:1;transform:none;animation:wd-in .5s cubic-bezier(.2,.9,.3,1.3) .15s backwards}
.is-ai .wd-say .tx{animation:wd-type 1.1s steps(11) .55s backwards}
@keyframes wd-in{from{opacity:0;transform:translateY(14px) scale(.9)}}
@keyframes wd-type{from{max-width:0}to{max-width:14em}}
.wd-toast{position:absolute;z-index:5;right:3%;bottom:2%;display:inline-flex;align-items:center;gap:8px;margin:0;padding:10px 15px;border-radius:12px;background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--hx-ai) 50%,var(--line));
  box-shadow:var(--hx-shadow);font-size:clamp(12.5px,1.1cqw,14.5px);font-weight:800;color:var(--hx-text);white-space:nowrap;opacity:0;transform:translateY(12px);pointer-events:none}
.wd-toast svg{width:16px;height:16px;color:var(--hx-ai)}
.is-ai .wd-toast{opacity:1;transform:none;animation:wd-in .5s cubic-bezier(.2,.9,.3,1.3) 3s backwards}

/* selection box + cursor (positioned by JS on the part being worked on) */
.wd-sel{position:absolute;z-index:6;left:0;top:0;width:0;height:0;border:1.5px solid var(--wc);border-radius:5px;pointer-events:none;opacity:0;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--wc) 14%,transparent);
  transition:left .75s cubic-bezier(.65,0,.35,1),top .75s cubic-bezier(.65,0,.35,1),width .75s cubic-bezier(.65,0,.35,1),height .75s cubic-bezier(.65,0,.35,1),opacity .4s,border-color .6s}
.wd-sel.is-on{opacity:1}
.wd-sel>i{position:absolute;width:8px;height:8px;border:1.5px solid var(--wc);border-radius:2px;background:var(--hx-surface)}
.wd-sel>i:nth-child(1){left:-5px;top:-5px}.wd-sel>i:nth-child(2){right:-5px;top:-5px}.wd-sel>i:nth-child(3){left:-5px;bottom:-5px}.wd-sel>i:nth-child(4){right:-5px;bottom:-5px}
.wd-sel em{position:absolute;left:-1.5px;bottom:100%;margin-bottom:6px;padding:4px 9px;border-radius:5px 5px 5px 0;background:var(--wc);color:var(--hx-on);font:700 12.5px/1.2 var(--font-mono);font-style:normal;white-space:nowrap}
.wd-cursor{position:absolute;z-index:7;left:0;top:0;width:24px;height:24px;fill:var(--hx-text);stroke:var(--hx-stage);stroke-width:1.5;stroke-linejoin:round;opacity:0;
  transform:translate(var(--x,0),var(--y,0));transition:transform .95s cubic-bezier(.65,0,.35,1) .12s,opacity .4s;filter:drop-shadow(0 5px 8px rgba(0,0,0,.35))}
.wd-cursor.is-on{opacity:1}
.wd-cursor.is-tap{animation:wd-tap .5s ease 1.05s}
@keyframes wd-tap{40%{scale:.82}}

/* chips */
.wd-chip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--wc) 50%,var(--line));
  box-shadow:var(--hx-shadow);font-size:clamp(12.5px,1.05cqw,14px);font-weight:800;color:var(--hx-text);white-space:nowrap}
.wd-chip svg{width:16px;height:16px;flex:none;color:var(--wc)}
.wd-chip[hidden]{display:none}
.wd-chip.c1{left:-2%;bottom:3%}
.wd-chip.c2{right:-1%;top:0}
.wd-chip.is-pop{animation:wd-chip .6s cubic-bezier(.2,.9,.3,1.3) both}
.wd-chip.c2.is-pop{animation-delay:.18s}
@keyframes wd-chip{from{opacity:0;transform:translateY(12px) scale(.85)}}
[data-stage="ai"] .wd-chip.c1{display:none}

/* status bar */
.wd-bar{display:flex;align-items:center;gap:14px;padding:8px 14px 9px;border-top:1px solid var(--line);font:12px/1 var(--font-mono);color:var(--muted)}
.wd-tog{flex:none;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--fg);cursor:pointer}
.wd-tog svg{width:13px;height:13px;fill:currentColor}
.wd-tog .i-play,.wd-hero.is-paused .wd-tog .i-pause{display:none}
.wd-hero.is-paused .wd-tog .i-play{display:block}
.wd-file{flex:none;color:var(--fg-2)}
.wd-file::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--wc);box-shadow:0 0 8px var(--wc);vertical-align:1px}
.wd-chaps{flex:1;display:flex;gap:6px;margin:0;padding:0;list-style:none;min-width:0}
.wd-chaps li{flex:1 1 0;min-width:0}
.wd-chaps button{display:block;width:100%;min-height:40px;padding:9px 0 4px;border:0;background:none;color:var(--muted);font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.wd-chaps i{position:relative;display:block;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.wd-chaps i::after{content:"";position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:left}
.wd-chaps .is-done i::after{transform:none}
.wd-chaps .is-on i::after{animation:wd-fill var(--dur,4.8s) linear forwards}
.wd-hero:is(.is-paused,.is-away) .wd-chaps .is-on i::after{animation-play-state:paused}
@keyframes wd-fill{to{transform:none}}
.wd-chaps span{display:block;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.wd-chaps button:hover span,.wd-chaps .is-on span{color:var(--fg)}
.wd-chaps .is-on span{font-weight:700}
.wd-hero :is(button,a):focus-visible,.wd-show :is(button,a):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wd-hero.is-away *,.wd-hero.is-away *::before,.wd-hero.is-away *::after{animation-play-state:paused!important}

/* ================= 2. REAL CLIENT SITES ================= */
.wd-show{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(290px,1fr);gap:clamp(18px,2.2vw,32px);align-items:stretch}
.wd-view{position:relative;display:flex;flex-direction:column;padding:clamp(12px,1.4vw,20px);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:radial-gradient(70% 80% at 100% 0%,color-mix(in srgb,var(--c) 17%,transparent),transparent 70%),radial-gradient(50% 60% at 0% 100%,color-mix(in srgb,var(--hx-sub) 8%,transparent),transparent 70%),var(--panel);box-shadow:var(--card-shadow)}
.wd-view-win{flex:1;min-height:380px;border-radius:14px;box-shadow:0 30px 60px -34px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--c) 26%,transparent)}
.wd-view-win .hx-win-bar{height:38px;font-size:14.5px}
.wd-view-url{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:3px 12px;border-radius:99px;background:var(--hx-surface);border:1px solid var(--line-soft);color:var(--hx-text-2);font-size:14.5px}
.wd-view-url svg{width:14px;height:14px;color:var(--c)}
.wd-view-win .hx-win-body{overflow:hidden;background:var(--hx-surface-2)}
.wd-view-ph,.wd-view-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.wd-view-ph{filter:saturate(.85) blur(1px)}
.wd-show.is-js .wd-view-shot{opacity:0;transition:opacity .45s ease}
.wd-show.is-js .wd-view-shot.is-in{opacity:1}
.wd-view-shot.is-run{animation:wd-pan var(--dur,8s) cubic-bezier(.45,0,.35,1) 1s both}
@keyframes wd-pan{from{object-position:50% 0}to{object-position:50% 100%}}
.wd-show:is(.is-hold,.is-away) .wd-view-shot{animation-play-state:paused}
.wd-view-tag{position:absolute;z-index:2;left:12px;top:12px;display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 9px;border-radius:99px;background:var(--c);color:var(--hx-on);font-size:14.5px;font-weight:800;box-shadow:0 10px 22px -12px var(--c)}
.wd-view-tag svg{width:14px;height:14px}
.wd-view.is-turn .wd-view-win{animation:wd-turn .7s cubic-bezier(.16,.84,.3,1)}
.wd-view.is-turn .wd-view-meta>*{animation:wd-up .6s cubic-bezier(.16,.84,.3,1) .1s backwards}
@keyframes wd-turn{from{opacity:.2;transform:translateY(16px) scale(.975)}}
@keyframes wd-up{from{opacity:0;transform:translateY(10px)}}
.wd-view-meta{display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 20px;padding:18px 6px 4px}
.wd-view-meta h3{font-size:clamp(21px,1.8vw,27px);font-weight:900;line-height:1.3;letter-spacing:-.01em;color:var(--fg)}
.wd-view-meta small{display:block;margin-top:3px;font-size:15px;font-weight:700;color:var(--c)}
.wd-view-meta p{grid-column:1/-1;margin:0;font-size:16.5px;line-height:1.7;color:var(--fg-2)}
.wd-view-meta .hx-more{color:var(--c);padding:8px 0}
.wd-view-meta .hx-more svg{width:15px;height:15px}

.wd-list{display:grid;grid-template-columns:1fr;align-content:start;gap:8px}
.wd-item{position:relative;display:grid;grid-template-columns:60px minmax(0,1fr);align-items:center;gap:13px;min-height:60px;padding:7px 14px 7px 8px;border:1px solid var(--line);border-radius:16px;
  background:var(--panel);color:var(--fg);font:inherit;text-align:left;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:border-color .25s,background-color .25s,transform .25s,box-shadow .25s}
.wd-item img{width:60px;height:44px;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--line-soft);background:var(--hx-surface-2)}
.wd-item b{display:block;font-size:16px;font-weight:800;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-item small{display:block;margin-top:3px;font-size:14.5px;font-weight:600;line-height:1.35;color:var(--c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-item:hover{border-color:color-mix(in srgb,var(--c) 50%,var(--line));transform:translateX(-3px)}
.wd-item[aria-selected="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,var(--panel));box-shadow:0 0 0 1px var(--c) inset,0 14px 30px -20px var(--c)}
.wd-item .prog{position:absolute;left:80px;right:14px;bottom:5px;height:3px;border-radius:2px;overflow:hidden;opacity:0}
.wd-item .prog::after{content:"";position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:left}
.wd-show.is-auto .wd-item[aria-selected="true"] .prog{opacity:1}
.wd-show.is-auto .wd-item.is-ready[aria-selected="true"] .prog::after{animation:wd-fill var(--t,10s) linear forwards}
.wd-show:is(.is-hold,.is-away) .wd-item .prog::after{animation-play-state:paused}
.wd-item-more{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-style:dashed;background:transparent;color:var(--accent)}
.wd-item-more b{color:var(--fg)}
.wd-item-more small{color:var(--fg-2)}
.wd-item-more>span:last-child{font-size:18px;font-weight:800}

/* ================= 3. AI AFTER HAND-OVER ================= */
.wd-ai{position:relative;border:1px solid color-mix(in srgb,var(--hx-ai) 38%,var(--line));border-radius:20px;padding:clamp(22px,3vw,48px);
  background:radial-gradient(55% 60% at 100% 0%,color-mix(in srgb,var(--hx-ai) 16%,transparent),transparent 70%),radial-gradient(45% 55% at 0% 100%,color-mix(in srgb,var(--hx-pink) 9%,transparent),transparent 70%),var(--panel)}
.wd-ai .hx-head h2 .hl{color:var(--hx-ai)}
.wd-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:6px 13px;border-radius:99px;background:var(--hx-ai);color:var(--hx-on);font-size:14.5px;font-weight:800;letter-spacing:.04em}
.wd-badge svg{width:15px;height:15px;fill:currentColor}
.wd-ai-pts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 44px;padding:0;list-style:none}
.wd-ai-pts li{display:grid;grid-template-columns:50px minmax(0,1fr);column-gap:18px;row-gap:4px;align-items:center;padding:24px 26px;border-radius:16px;background:var(--editor);border:1px solid var(--line-soft);transition:transform .3s,border-color .3s}
.wd-ai-pts li:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 50%,var(--line))}
.wd-ai-pts .ti,.wd-rt .ti{display:grid;place-items:center;width:50px;height:50px;margin-bottom:8px;border-radius:14px;color:#fff;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 78%,#fff) 0%,var(--c) 45%,color-mix(in srgb,var(--c) 62%,#04101C) 100%);box-shadow:0 12px 26px -16px var(--c)}
.wd-ai-pts .ti svg,.wd-rt .ti svg{width:25px;height:25px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.wd-ai-pts b{font-size:20px;font-weight:800;line-height:1.4;color:var(--fg)}
.wd-ai-pts li>span:last-child{font-size:16.5px;line-height:1.75;color:var(--fg-2)}
[data-reveal].wd-ai-pts li{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .65s cubic-bezier(.2,.8,.2,1),border-color .3s;transition-delay:calc(var(--i,0) * 90ms)}
[data-reveal].wd-ai-pts.in-view li{opacity:1;transform:none}
.wd-scenes .sv-scene{margin-top:4px}

/* ================= 4. WHAT'S INCLUDED (annotated mock) ================= */
.wd-kit{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"art l" "art r";column-gap:clamp(20px,2.8vw,44px);row-gap:16px;align-items:center}
.wd-kit-list{grid-area:l;align-self:end;display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
.wd-kit-list.r{grid-area:r;align-self:start}
.wd-kit-list li{position:relative;display:grid;grid-template-columns:34px 1fr;gap:14px;padding:20px 24px 20px 20px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:var(--card-shadow);
  transition:border-color .3s,box-shadow .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.wd-kit-list .no{display:grid;place-items:center;width:32px;height:32px;margin-top:1px;border-radius:50%;background:var(--c);color:var(--hx-on);font:800 14.5px/1 var(--font-mono)}
.wd-kit-list h3{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:800;line-height:1.4;color:var(--fg)}
.wd-kit-list h3 svg{flex:none;width:20px;height:20px;color:var(--c)}
.wd-kit-list p{margin:6px 0 0;font-size:16.5px;line-height:1.75;color:var(--fg-2)}
.wd-kit-list li.is-on{border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset,0 18px 40px -26px var(--c)}
.wd-kit-list li.is-on{transform:translateX(-6px)}
.wd-kit-art{grid-area:art;position:sticky;top:calc(var(--nav-h,60px) + 28px);align-self:start;width:100%;aspect-ratio:1/.96;border-radius:20px;border:1px solid var(--line-soft);
  background:radial-gradient(70% 80% at 80% 0%,color-mix(in srgb,var(--hx-pink) 14%,transparent),transparent 70%),radial-gradient(60% 70% at 0% 100%,color-mix(in srgb,var(--hx-web) 12%,transparent),transparent 70%),var(--hx-stage)}
.wd-kit-art::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(var(--hx-grid) 1.2px,transparent 1.6px);background-size:22px 22px}
.wd-kit-desk{position:absolute;left:4%;top:22%;width:72%;height:56%;--c:var(--hx-pink);overflow:visible}
.wd-kit-desk .hx-win-bar{border-radius:11px 11px 0 0}
.wd-kit-desk .hx-win-body{overflow:visible;border-radius:0 0 11px 11px}
.wd-kit-desk .wd-site{gap:2.6cqw;padding:2.6cqw 3.4cqw}
.wd-kit-desk .w-hero{flex:1;height:auto;min-height:0}
.w-form{display:flex;align-items:center;gap:2.4cqw;height:12cqw;padding:0 2.6cqw 0 5cqw}
.w-form b{font-size:max(12px,2.6cqw);font-weight:900;white-space:nowrap}
.w-form>i{flex:1;height:5cqw;border-radius:1.2cqw;background:var(--hx-surface);border:1px solid var(--line)}
.w-form .pill{flex:none}
.w-form .crm{position:absolute;left:21cqw;top:-4.4cqw;display:inline-flex;align-items:center;gap:1cqw;padding:1cqw 2cqw;border-radius:99px;background:var(--hx-blue);color:var(--hx-on);font:800 max(12px,2.2cqw)/1 var(--font-mono)}
.w-form .crm svg{width:max(11px,2.6cqw);height:max(11px,2.6cqw)}
.wd-kit-serp{position:absolute;right:3%;top:4%;width:42%;padding:12px 14px 13px;border-radius:14px;background:var(--hx-surface);border:1px solid var(--line);box-shadow:var(--hx-shadow);color:var(--hx-text)}
.wd-kit-serp small{display:block;font-size:12px;color:var(--hx-text-2)}
.wd-kit-serp b{display:block;margin:3px 0 7px;font-size:clamp(13px,1.1vw,15px);font-weight:800;color:var(--hx-blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-kit-serp i{display:block;height:6px;border-radius:99px;background:color-mix(in srgb,var(--hx-text) 14%,transparent)}
.wd-kit-serp i.s{width:70%;margin-top:6px}
.wd-kit-phone{position:absolute;right:4%;bottom:5%;height:52%;aspect-ratio:9/18.6;container-type:size;z-index:2;border-radius:7cqw;border:4px solid color-mix(in srgb,var(--hx-text) 86%,var(--hx-stage));background:var(--hx-surface);box-shadow:0 26px 50px -26px rgba(0,0,0,.7)}
.wd-kit-phone .wd-site{border-radius:inherit;overflow:hidden}
.wd-kit-phone .card{height:auto;flex:1}
.wd-kit-say{position:absolute;left:3%;bottom:7%;z-index:3;display:flex;align-items:center;gap:9px;margin:0;padding:8px 14px 8px 8px;border-radius:14px 14px 14px 4px;background:var(--hx-ai);color:var(--hx-on);font-size:clamp(12.5px,1.05vw,14.5px);font-weight:800;box-shadow:0 16px 30px -16px var(--hx-ai)}
.wd-kit-say .av{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--hx-on) 22%,transparent);font-size:11.5px}
.wd-kit-note{position:absolute;left:14px;top:12px;padding:3px 9px;border-radius:99px;border:1px solid var(--line);background:var(--hx-surface);font-size:12px;font-weight:700;color:var(--hx-text-2)}
.wd-kit-art .pin{position:absolute;z-index:4;right:-11px;top:-11px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--h);color:var(--hx-on);font:800 13px/1 var(--font-mono);box-shadow:0 0 0 3px var(--hx-surface),0 6px 14px -6px var(--h)}
.wd-kit-art .w-nav .pin{right:auto;left:-13px;top:50%;margin-top:-13px}
.wd-kit-art .w-hero .pin{right:auto;left:-13px;top:14%}
.wd-kit-art .w-form .pin{right:auto;left:-13px;top:50%;margin-top:-13px}
.wd-kit-say .pin{right:-12px;top:-12px}
.wd-kit-art [data-part]{--hl:var(--hx-web);transition:box-shadow .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.wd-kit-art [data-part="hero"]{--hl:var(--hx-pink)}.wd-kit-art [data-part="phone"]{--hl:var(--hx-teal)}.wd-kit-art [data-part="seo"]{--hl:var(--hx-orange)}
.wd-kit-art [data-part="form"]{--hl:var(--hx-blue)}.wd-kit-art [data-part="chat"]{--hl:var(--hx-ai)}
.wd-kit:is([data-focus="nav"]) .wd-kit-art [data-part="nav"],.wd-kit[data-focus="hero"] .wd-kit-art [data-part="hero"],.wd-kit[data-focus="phone"] .wd-kit-art [data-part="phone"],
.wd-kit[data-focus="seo"] .wd-kit-art [data-part="seo"],.wd-kit[data-focus="form"] .wd-kit-art [data-part="form"],.wd-kit[data-focus="chat"] .wd-kit-art [data-part="chat"]{box-shadow:0 0 0 2px var(--hl),0 0 0 7px color-mix(in srgb,var(--hl) 24%,transparent)}
.wd-kit[data-focus="phone"] .wd-kit-art [data-part="phone"],.wd-kit[data-focus="seo"] .wd-kit-art [data-part="seo"],.wd-kit[data-focus="chat"] .wd-kit-art [data-part="chat"]{transform:translateY(-4px)}
.wd-kit[data-focus="nav"] [data-part="nav"] .pin,.wd-kit[data-focus="hero"] [data-part="hero"] .pin,.wd-kit[data-focus="phone"] [data-part="phone"] .pin,
.wd-kit[data-focus="seo"] [data-part="seo"] .pin,.wd-kit[data-focus="form"] [data-part="form"] .pin,.wd-kit[data-focus="chat"] [data-part="chat"] .pin{animation:wd-ping 1.3s ease-out infinite}
@keyframes wd-ping{0%{box-shadow:0 0 0 3px var(--hx-surface),0 0 0 3px var(--h)}100%{box-shadow:0 0 0 3px var(--hx-surface),0 0 0 14px transparent}}

/* ================= 5. STEPS with tiny scenes ================= */
.wd-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none}
.wd-step{position:relative;display:flex;flex-direction:column;padding:16px 16px 26px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:var(--card-shadow);transition:border-color .25s}
.wd-step:hover{border-color:color-mix(in srgb,var(--c) 50%,var(--line))}
.wd-step+.wd-step::before{content:"";position:absolute;left:-15px;top:66px;width:10px;height:10px;border-top:2.5px solid var(--c);border-right:2.5px solid var(--c);transform:rotate(45deg);opacity:.7}
.wd-step .no{position:relative;z-index:1;display:grid;place-items:center;width:38px;height:38px;margin:-19px 0 0 10px;border-radius:50%;background:var(--c);color:var(--hx-on);font:800 16px/1 var(--font-mono);box-shadow:0 0 0 4px var(--panel)}
.wd-step h3{margin:12px 8px 0;font-size:21px;font-weight:800;line-height:1.35;color:var(--fg)}
.wd-step p{margin:8px 8px 0;font-size:16.5px;line-height:1.75;color:var(--fg-2)}
[data-reveal].wd-steps .wd-step{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 110ms)}
[data-reveal].wd-steps.in-view .wd-step{opacity:1;transform:none}
.mini{position:relative;height:132px;border-radius:14px;overflow:hidden;border:1px solid var(--line-soft);font-family:var(--font-sans);
  background:radial-gradient(80% 100% at 50% 0%,color-mix(in srgb,var(--c) 18%,transparent),transparent 72%),var(--hx-stage)}
.mini::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--hx-grid) 1.2px,transparent 1.6px);background-size:18px 18px}
.mini>*{position:absolute}
.mini i{display:block;font-style:normal}
/* talk */
.m-talk .b1,.m-talk .b2{max-width:78%;padding:7px 12px;border-radius:12px;font-size:13px;font-weight:700;line-height:1.35;white-space:nowrap}
.m-talk .b1{left:12px;top:16px;background:var(--hx-surface);border:1px solid var(--line);color:var(--hx-text);border-bottom-left-radius:3px}
.m-talk .b2{right:12px;bottom:16px;background:var(--c);color:var(--hx-on);border-bottom-right-radius:3px}
.m-talk .dots{right:14px;bottom:20px;display:flex;gap:4px;padding:8px 10px;border-radius:12px;background:var(--hx-surface);border:1px solid var(--line);opacity:0}
.m-talk .dots i{width:6px;height:6px;border-radius:50%;background:var(--c)}
.is-play .m-talk .b1{animation:wd-talk1 7s ease infinite}
.is-play .m-talk .dots{animation:wd-talkd 7s ease infinite}
.is-play .m-talk .dots i{animation:wd-dot .9s ease-in-out infinite}
.is-play .m-talk .dots i:nth-child(2){animation-delay:.15s}.is-play .m-talk .dots i:nth-child(3){animation-delay:.3s}
.is-play .m-talk .b2{animation:wd-talk2 7s ease infinite}
@keyframes wd-talk1{0%,4%{opacity:0;transform:translateY(8px)}10%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes wd-talkd{0%,18%{opacity:0}22%,36%{opacity:1}40%,100%{opacity:0}}
@keyframes wd-dot{50%{transform:translateY(-3px);opacity:.5}}
@keyframes wd-talk2{0%,38%{opacity:0;transform:translateY(8px) scale(.94)}44%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
/* draft: a wireframe sheet gets coloured */
.m-draft .sheet{left:50%;top:14px;bottom:14px;width:62%;margin-left:-31%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:12px 1fr 26px;gap:6px;padding:9px;border-radius:9px;background:var(--hx-surface);border:1px solid var(--line)}
.m-draft .sheet i{border:1.5px dashed color-mix(in srgb,var(--hx-text) 30%,transparent);border-radius:4px}
.m-draft .sheet .a{grid-column:1/-1}.m-draft .sheet .b{grid-column:1/-1}
.m-draft .ok{right:10px;bottom:10px;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:99px;background:var(--c);color:var(--hx-on);font-size:12.5px;font-weight:800;opacity:0}
.m-draft .ok svg{width:12px;height:12px}
.is-play .m-draft .sheet i{animation:wd-fillin 7s ease infinite}
.is-play .m-draft .sheet .b{animation-delay:.25s}.is-play .m-draft .sheet .c{animation-delay:.5s}
.is-play .m-draft .ok{animation:wd-ok 7s ease infinite}
@keyframes wd-fillin{0%,22%{background:transparent;border-color:color-mix(in srgb,var(--hx-text) 30%,transparent);border-style:dashed}
  34%,88%{background:color-mix(in srgb,var(--c) 42%,var(--hx-surface));border-color:transparent;border-style:solid}100%{background:transparent}}
@keyframes wd-ok{0%,46%{opacity:0;transform:scale(.7)}52%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
/* devices: desktop and phone show the same bars, in sync */
.m-devices .dt{left:14px;top:18px;width:58%;height:84px;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:8px;background:var(--hx-surface);border:1px solid var(--line)}
.m-devices .mb{right:18px;top:12px;width:44px;height:96px;display:flex;flex-direction:column;gap:5px;padding:14px 6px 6px;border-radius:10px;background:var(--hx-surface);border:2px solid color-mix(in srgb,var(--hx-text) 70%,transparent)}
.m-devices i{height:9px;border-radius:3px;background:color-mix(in srgb,var(--c) 55%,var(--hx-surface));transform-origin:left}
.m-devices .dt i:nth-child(1),.m-devices .mb i:nth-child(1){height:22px}
.m-devices i:nth-child(2){width:80%}.m-devices i:nth-child(3){width:55%;background:color-mix(in srgb,var(--hx-text) 18%,transparent)}
.is-play .m-devices i{animation:wd-sync 3.6s ease-in-out infinite}
.is-play .m-devices i:nth-child(2){animation-delay:.2s}.is-play .m-devices i:nth-child(3){animation-delay:.4s}
@keyframes wd-sync{0%,100%{transform:scaleX(1)}45%{transform:scaleX(.35)}60%{transform:scaleX(.35)}}
/* hand-over: live + a request + done */
.m-handover .live{left:12px;top:14px;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:99px;background:var(--hx-surface);border:1px solid var(--line);font-size:12.5px;font-weight:800;color:var(--hx-text)}
.m-handover .live i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 0 var(--c)}
.is-play .m-handover .live i{animation:wd-live 1.6s ease-out infinite}
@keyframes wd-live{to{box-shadow:0 0 0 8px transparent}}
.m-handover .say{right:12px;top:52px;padding:7px 12px;border-radius:12px 12px 3px 12px;background:var(--hx-ai);color:var(--hx-on);font-size:13px;font-weight:800;white-space:nowrap}
.m-handover .done{left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:12px;background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--hx-ai) 50%,var(--line));font-size:12.5px;font-weight:800;color:var(--hx-text)}
.m-handover .done svg{width:13px;height:13px;color:var(--hx-ai)}
.is-play .m-handover .say{animation:wd-talk1 6s ease infinite}
.is-play .m-handover .done{animation:wd-talk2 6s ease infinite}

/* ================= 6. WHICH KIND OF SITE ================= */
.wd-route{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.wd-rt{position:relative;display:flex;flex-direction:column;gap:10px;padding:28px 26px 26px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:var(--card-shadow);transition:transform .3s,border-color .3s}
.wd-rt:not(.is-here):hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 50%,var(--line))}
.wd-rt.is-here{border-color:color-mix(in srgb,var(--c) 60%,var(--line));background:radial-gradient(70% 60% at 100% 0%,color-mix(in srgb,var(--c) 15%,transparent),transparent 70%),var(--panel);box-shadow:0 26px 60px -38px var(--c)}
.wd-rt .here{position:absolute;right:22px;top:30px;padding:5px 12px;border-radius:99px;background:var(--c);color:var(--hx-on);font-size:14.5px;font-weight:800}
.wd-rt .ti{margin-bottom:2px}
.wd-rt h3{margin-top:4px;font-size:21px;font-weight:800;line-height:1.4;color:var(--fg)}
.wd-rt p{margin:0;font-size:16.5px;line-height:1.75;color:var(--fg-2)}
.wd-rt ul{display:flex;flex-direction:column;gap:9px;margin:6px 0 14px;padding:0;list-style:none}
.wd-rt li{display:flex;align-items:flex-start;gap:10px;font-size:16.5px;font-weight:600;line-height:1.6;color:var(--fg)}
.wd-rt li svg{flex:none;width:16px;height:16px;margin-top:5px;color:var(--c)}
.wd-rt .action,.wd-rt .hx-more{margin-top:auto;align-self:flex-start}
.wd-rt .hx-more{color:var(--c);padding:10px 0 4px;font-size:16px;white-space:normal}
[data-reveal].wd-route .wd-rt{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .65s cubic-bezier(.2,.8,.2,1),border-color .3s;transition-delay:calc(var(--i,0) * 100ms)}
[data-reveal].wd-route.in-view .wd-rt{opacity:1;transform:none}
[data-reveal].wd-route.in-view .wd-rt:not(.is-here):hover{transform:translateY(-3px)}

/* ================= responsive ================= */
@media (max-width:980px){
  .wd-kit{grid-template-columns:1fr;grid-template-areas:"art" "l" "r"}
  .wd-kit-art{position:relative;top:auto;max-width:680px;justify-self:center}
  .wd-kit-list li.is-on{transform:none}
}
@media (max-width:1180px){
  .wd-frame{height:auto;min-height:0}
  .wd-body{grid-template-columns:1fr;gap:34px;padding:52px 36px 34px 46px}
  .wd-visual{height:440px;min-height:0}
  .wd-hero h1{font-size:clamp(36px,6.4cqw,60px)}
  .wd-show{grid-template-columns:1fr}
  .wd-view-win{flex:none;min-height:0;aspect-ratio:16/10.4}
  .wd-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wd-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
  .wd-step+.wd-step::before{display:none}
  .wd-route{grid-template-columns:1fr 1fr}
  .wd-route .is-here{grid-column:1/-1}
  .wd-chaps span{font-size:11.5px}
}
@media (max-width:720px){
  .wd-wrap{padding-top:14px}
  .wd-hero{border-radius:14px}
  .wd-ruler{display:none}
  .wd-body{padding:28px 20px 22px;gap:28px}
  .wd-hero h1{font-size:clamp(33px,9.6cqw,42px)}
  .wd-hero h1 .g{font-size:.62em}
  .wd-now{margin-top:18px}
  .wd-hero .actions .action{flex:1 1 100%}
  .wd-visual{height:330px}
  .wd-desk{width:100%;height:84%;top:8%}
  .is-rwd .wd-desk{width:74%;height:72%;top:14%}
  .wd-phone{height:78%;top:13%;border-width:4px}
  .wd-swatch{right:1%;bottom:1%;padding:8px 11px;gap:9px}
  .wd-swatch b{font-size:18px}
  .wd-swatch small{display:none}
  .wd-say{left:0;bottom:16%;max-width:86%}
  .wd-toast{right:0;bottom:-2%}
  .wd-chip{padding:7px 11px}
  .wd-chip.c1{left:-4px;bottom:-8px}.wd-chip.c2{right:-4px;top:-12px}
  .wd-sel em{font-size:10.5px;padding:3px 7px}
  .wd-chaps span,.wd-file{display:none}
  .wd-chaps button{min-height:44px;padding:20px 0}
  .wd-list{display:flex;gap:10px;margin:0 -16px;padding:2px 16px 8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .wd-list::-webkit-scrollbar{display:none}
  .wd-item{flex:0 0 74%;scroll-snap-align:start}
  .wd-item-more{flex-basis:60%}
  .wd-view-meta{grid-template-columns:1fr}
  .wd-view-meta .hx-more{justify-self:start}
  .wd-ai-pts{grid-template-columns:1fr;margin-bottom:32px}
  .wd-ai-pts li{display:grid;grid-template-columns:50px 1fr;column-gap:14px;row-gap:2px;align-items:center}
  .wd-ai-pts .ti{grid-row:span 2;margin:0}
  .wd-kit-art{aspect-ratio:1/.92}
  .wd-kit-serp{width:56%}
  .wd-kit-say{font-size:12.5px}
  .wd-steps{grid-template-columns:1fr}
  .wd-route{grid-template-columns:1fr}
  .wd-rt .here{position:static;align-self:flex-start;order:-1}
  .wd-rt .action{width:100%}
  .wd-kit-list li,.wd-ai-pts li,.wd-rt{padding:20px}
  .wd-step{padding:14px 14px 22px}
  .wd-step h3,.wd-step p{margin-left:6px;margin-right:6px}
}
@media (prefers-reduced-motion:reduce){
  .wd-hero *,.wd-hero *::before,.wd-hero *::after,.wd-show *,.wd-kit *,.mini *,.wd-steps,.wd-step,.wd-route .wd-rt,.wd-ai-pts li{animation:none!important;transition:none!important}
  [data-reveal].wd-ai-pts li,[data-reveal].wd-steps .wd-step,[data-reveal].wd-route .wd-rt{opacity:1;transform:none}
  .wd-chaps .is-on i::after{transform:none}
  .m-talk .dots{display:none}.m-draft .ok{opacity:1}
}

/* ================= light theme ================= */
html[data-theme="light"] .wd-hero{box-shadow:0 30px 60px -40px rgba(15,40,70,.35),0 0 90px -60px var(--wc)}
html[data-theme="light"] .wd-desk{box-shadow:0 40px 70px -40px rgba(15,40,70,.42),0 0 0 1px color-mix(in srgb,var(--wc) 30%,transparent),0 0 60px -26px color-mix(in srgb,var(--wc) 50%,transparent)}
html[data-theme="light"] .wd-phone,html[data-theme="light"] .wd-kit-phone{border-color:#C9D4E0;box-shadow:0 28px 50px -30px rgba(15,40,70,.45),0 0 0 1px color-mix(in srgb,var(--wc,var(--hx-web)) 26%,transparent)}
html[data-theme="light"] :is(.wd-phone,.wd-kit-phone) .notch{background:#C9D4E0}
html[data-theme="light"] .wd-view-win{box-shadow:0 26px 50px -32px rgba(15,40,70,.4),0 0 0 1px color-mix(in srgb,var(--c) 26%,transparent)}
html[data-theme="light"] .wd-cursor{fill:#0B1B2B;stroke:#fff}
html[data-theme="light"] .wd-site .ph .hill{background:color-mix(in srgb,var(--b1) 60%,#fff)}
html[data-theme="light"] .wd-site .ph .hill.b{background:color-mix(in srgb,var(--b3) 55%,#fff)}
html[data-theme="light"] :is(.is-color .wd-site,.wd-site.is-done) .ph{background-color:color-mix(in srgb,var(--b1) 30%,#E9E2FF)}
html[data-theme="light"] .m-devices .mb{border-color:#9FB0C2}
/* chat bubbles: light tint instead of a solid violet block in the light theme */
html[data-theme="light"] :is(.wd-say,.wd-kit-say,.m-handover .say){background:color-mix(in srgb,var(--hx-ai) 12%,#fff);color:var(--hx-ai);border:1px solid color-mix(in srgb,var(--hx-ai) 38%,transparent);box-shadow:0 14px 28px -18px color-mix(in srgb,var(--hx-ai) 70%,transparent)}
html[data-theme="light"] :is(.wd-say,.wd-kit-say) .av{background:var(--hx-ai);color:#fff}
html[data-theme="light"] .m-talk .b2{background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 38%,transparent)}
html[data-theme="light"] .wd-site{--newbg:linear-gradient(110deg,color-mix(in srgb,var(--hx-ai) 20%,#fff),color-mix(in srgb,var(--hx-pink) 16%,#fff));--newfg:var(--hx-ai)}
/* card copy: no one-character last lines */
.wd-ai-pts li>span:last-child,.wd-step p,.wd-kit-list p,.wd-rt p,.wd-view-meta p{text-wrap:pretty}
.wd-ai-pts .ti{grid-row:span 2;align-self:start;margin:0}
html[data-theme="light"] .wd-badge{background:color-mix(in srgb,var(--hx-ai) 12%,#fff);color:var(--hx-ai);border:1px solid color-mix(in srgb,var(--hx-ai) 38%,transparent)}