/* /process 合作方式 (pages/process, 2026-10-14). Needs public/css/rt-hue.css (tokens, .hx-*). Behaviour: public/js/pg-process.js.
   1. hero: a "project card" travels a winding nine-station path; stations light up, get a tick, the contract gets a stamp
   2. stations: rail of colour tiles + one open panel with a small scene (desktop), vertical timeline (≤760px)
   3. scenes, 4. deliverables folder, 5. principles. Both themes use tokens; light overrides at the end of the file. */

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

.pc-wrap{max-width:1500px;margin:0 auto;padding:clamp(18px,2.4vw,34px) clamp(16px,3vw,48px) 0}
.pc-sec{padding:clamp(56px,6.4vw,96px) 0 0;scroll-margin-top:calc(var(--nav-h,56px) + 16px)}
.pc-wrap .hx-more{min-height:44px}

/* ================= 1. HERO ================= */
.pc-hero{--pcc:var(--c,var(--hx-web));transition:--pcc .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(--pcc)}
.pc-frame{position:relative;display:grid;min-height:max(560px,42cqw);overflow:hidden;isolation:isolate;background:var(--hx-stage);color:var(--hx-text)}
.pc-frame::before{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(var(--hx-grid) 1.2px,transparent 1.6px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(80% 90% at 70% 50%,#000 30%,transparent 85%);mask-image:radial-gradient(80% 90% at 70% 50%,#000 30%,transparent 85%)}
.pc-aura{position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:radial-gradient(34% 40% at 72% 48%,color-mix(in srgb,var(--pcc) 26%,transparent),transparent 70%),
             radial-gradient(26% 32% at 14% 90%,color-mix(in srgb,var(--hx-sub) 16%,transparent),transparent 70%),
             radial-gradient(24% 28% at 32% 8%,color-mix(in srgb,var(--hx-ai) 15%,transparent),transparent 70%);
  animation:pc-drift 20s ease-in-out infinite alternate}
@keyframes pc-drift{to{transform:translate3d(-3%,2%,0) scale(1.06)}}
.pc-body{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:3cqw;padding:3.4cqw 3.4cqw 3.4cqw 4.6cqw}

.pc-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:7px 15px;border:1px solid color-mix(in srgb,var(--pcc) 45%,var(--line));border-radius:99px;background:color-mix(in srgb,var(--pcc) 9%,transparent);font:600 14.5px/1.25 var(--font-mono);letter-spacing:.04em;color:var(--hx-text-2)}
.pc-kicker i{width:8px;height:8px;border-radius:50%;background:var(--pcc);box-shadow:0 0 10px var(--pcc);animation:pc-blink 1.8s ease-in-out infinite}
@keyframes pc-blink{50%{opacity:.25}}
.pc-hero h1{margin:0;font-size:clamp(36px,4.3cqw,64px);line-height:1.14;letter-spacing:-.035em;font-weight:900;color:var(--hx-text);word-break:keep-all}
.pc-hero h1 span{display:block}
.pc-hero h1 .g{margin-top:.18em;font-size:.64em;line-height:1.25;letter-spacing:-.02em;background:linear-gradient(100deg,var(--hx-web) 0%,var(--hx-ai) 50%,var(--hx-sub) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pc-now{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin:24px 0 0;font-size:18px;font-weight:700;color:var(--hx-text-2)}
.pc-now .n b{font-family:var(--font-mono);color:var(--pcc)}
.pc-now .w{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:11px;background:color-mix(in srgb,var(--pcc) 15%,transparent);border:1px solid color-mix(in srgb,var(--pcc) 50%,transparent);color:var(--pcc);font-weight:800}
.pc-now .w::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--pcc)}
.pc-now .got{display:inline-flex;align-items:center;gap:6px;font-size:.92em}
.pc-now .got svg{width:18px;height:18px;color:var(--hx-sub)}
.pc-now .got em{font-style:normal;color:var(--hx-text);font-weight:800}
.pc-now.is-swap .w,.pc-now.is-swap .got{animation:pc-swap .5s cubic-bezier(.2,.8,.2,1)}
.pc-now.is-swap .got{animation-delay:.08s}
@keyframes pc-swap{from{opacity:0;transform:translateY(10px)}}
.pc-lead{margin:18px 0 0;max-width:30em;font-size:18px;line-height:1.8;color:var(--hx-text-2)}
.pc-hero .actions{margin-top:28px;gap:12px}

/* the journey map */
.pc-map{position:relative;height:clamp(400px,36cqw,540px)}
.pc-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pc-path path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.pc-path .trk{stroke:color-mix(in srgb,var(--hx-text) 9%,transparent);stroke-width:14}
.pc-path .flow{stroke:color-mix(in srgb,var(--hx-text) 32%,transparent);stroke-width:2.2;stroke-dasharray:2 12;animation:pc-flow 1.4s linear infinite}
@keyframes pc-flow{to{stroke-dashoffset:-28}}
.pc-path .done{stroke:url(#pc-grad);stroke-width:5;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--pcc) 55%,transparent))}

.pc-node{position:absolute;left:var(--x);top:var(--y);z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px;width:96px;margin:-22px 0 0 -48px;padding:0;border:0;background:none;color:var(--hx-text-2);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pc-node .dot{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--hx-surface);border:2px solid color-mix(in srgb,var(--c) 45%,var(--line));color:var(--c);
  box-shadow:var(--hx-shadow);transition:background .35s,border-color .35s,color .35s,transform .35s cubic-bezier(.2,.9,.3,1.3),box-shadow .35s}
.pc-node .dot svg{width:20px;height:20px;transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.3,1.4)}
.pc-node .dot .ok{position:absolute;inset:0;margin:auto;opacity:0;transform:scale(.3)}
.pc-node .dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--c);opacity:0;pointer-events:none}
.pc-node .lb{padding:3px 9px;border-radius:99px;background:color-mix(in srgb,var(--hx-stage) 78%,transparent);font-size:14.5px;font-weight:800;line-height:1.3;white-space:nowrap;transition:color .3s,background .3s}
.pc-node:hover .dot{transform:translateY(-3px)}
.pc-node:hover .lb{color:var(--hx-text)}
.pc-node.is-past .dot{background:var(--c);border-color:var(--c);color:var(--hx-on)}
.pc-node.is-past .dot .ic{opacity:0;transform:scale(.4)}
.pc-node.is-past .dot .ok{opacity:1;transform:none}
.pc-node.is-here .dot{border-color:var(--c);transform:scale(1.12);box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 20%,transparent),0 0 32px -4px var(--c)}
.pc-node.is-here .lb{color:var(--hx-text);background:color-mix(in srgb,var(--c) 20%,var(--hx-surface))}
.pc-node.is-ping .dot::after{animation:pc-ping 1s ease-out}
@keyframes pc-ping{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.1)}}
.pc-node:focus-visible{outline:none}
.pc-node:focus-visible .dot{outline:2px solid var(--accent);outline-offset:4px}

.pc-card{position:absolute;left:0;top:0;z-index:4;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 10px;width:178px;padding:10px 12px 12px 10px;border-radius:14px;
  background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--pcc) 55%,var(--line));color:var(--hx-text);pointer-events:none;will-change:transform;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.65),0 0 0 4px color-mix(in srgb,var(--pcc) 12%,transparent);transition:opacity .35s ease,border-color .9s}
.pc-card::after{content:"";position:absolute;left:var(--tx,50%);bottom:-7px;width:12px;height:12px;margin-left:-6px;background:var(--hx-surface);border-right:1px solid color-mix(in srgb,var(--pcc) 55%,var(--line));border-bottom:1px solid color-mix(in srgb,var(--pcc) 55%,var(--line));transform:rotate(45deg)}
.pc-card .ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--pcc);color:var(--hx-on);transition:background .9s}
.pc-card .ic svg{width:20px;height:20px}
.pc-card small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--hx-text-2)}
.pc-card b{display:block;margin-top:1px;font-size:15.5px;font-weight:900;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-card .pg{grid-column:1/-1;height:4px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.pc-card .pg i{display:block;width:100%;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--hx-web),var(--hx-ai),var(--hx-sub));transform:scaleX(var(--p,.111));transform-origin:left;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.pc-card .stamp{position:absolute;right:-16px;top:-18px;padding:4px 8px 3px;border:2px solid var(--hx-sub);border-radius:7px;background:color-mix(in srgb,var(--hx-surface) 88%,transparent);color:var(--hx-sub);font-size:12.5px;font-weight:900;letter-spacing:.1em;opacity:0;transform:rotate(-12deg) scale(.4);transition:opacity .25s,transform .25s}
.pc-card.is-signed .stamp{opacity:1;transform:rotate(-12deg)}
.pc-card.is-stamp .stamp{animation:pc-stamp .6s cubic-bezier(.2,.9,.3,1.3)}
@keyframes pc-stamp{0%{opacity:0;transform:rotate(-26deg) scale(2.3)}60%{opacity:1;transform:rotate(-10deg) scale(.9)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}
.pc-card.is-pop .ic{animation:pc-bump .5s cubic-bezier(.2,.9,.3,1.6)}
@keyframes pc-bump{50%{transform:scale(1.18) rotate(-6deg)}}
.pc-card.is-moving{border-color:color-mix(in srgb,var(--pcc) 80%,var(--line))}
.pc-card.is-reset{opacity:0}

/* status bar */
.pc-bar{display:flex;align-items:center;gap:18px;padding:6px 18px;border-top:1px solid var(--line);color:var(--fg-2)}
.pc-tog{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--fg);cursor:pointer;transition:border-color .2s,color .2s}
.pc-tog svg{width:15px;height:15px;fill:currentColor}
.pc-tog:hover{border-color:var(--accent);color:var(--accent)}
.pc-tog .i-play,.pc-hero.is-paused .pc-tog .i-pause{display:none}
.pc-hero.is-paused .pc-tog .i-play{display:block}
.pc-chaps{flex:1;display:flex;gap:10px;margin:0;padding:0;list-style:none;min-width:0}
.pc-chaps li{flex:1 1 0;min-width:0}
.pc-chaps button{display:flex;flex-direction:column;justify-content:center;gap:8px;width:100%;min-height:44px;padding:0;border:0;background:none;color:var(--fg-2);font:600 14.5px/1.2 var(--font-sans);text-align:left;cursor:pointer}
.pc-chaps i{position:relative;display:block;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.pc-chaps i::after{content:"";position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:left}
.pc-chaps .is-done i::after{transform:none}
.pc-chaps .is-on i::after{animation:pc-fill var(--dur,3.8s) linear forwards}
.pc-hero.is-paused .pc-chaps .is-on i::after,.pc-hero.is-away .pc-chaps .is-on i::after{animation-play-state:paused}
@keyframes pc-fill{to{transform:none}}
.pc-chaps span{display:block;white-space:nowrap;transition:color .2s}
.pc-chaps button:hover span,.pc-chaps .is-on span{color:var(--fg)}
.pc-chaps .is-on span{font-weight:800;color:var(--fg)}
.pc-hero :is(button,a):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pc-hero.is-away *,.pc-hero.is-away *::before,.pc-hero.is-away *::after{animation-play-state:paused!important}

/* ================= 2. STATIONS ================= */
.pc-x{--fill:0;position:relative;scroll-margin-top:calc(var(--nav-h,56px) + 16px)}
.pc-x-list{position:relative}
/* phone / no-JS: vertical timeline */
.pc-x-list::before{content:"";position:absolute;left:23px;top:30px;bottom:30px;width:3px;border-radius:3px;opacity:.4;
  background:linear-gradient(var(--hx-web),var(--hx-teal),var(--hx-blue),var(--hx-sub),var(--hx-pink),var(--hx-ai),var(--hx-orange),var(--hx-rose),var(--hx-teal))}
.pc-x-tab{position:relative;z-index:1;display:grid;grid-template-columns:48px minmax(0,1fr) 24px;align-items:center;column-gap:14px;width:100%;min-height:66px;padding:9px 0;border:0;background:none;color:var(--fg);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;scroll-margin-top:calc(var(--nav-h,56px) + 12px)}
.pc-x-tab .dot{grid-row:1/3;position:relative;display:grid;place-items:center;width:48px;height:48px;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 10px 24px -14px var(--c);transition:transform .35s cubic-bezier(.16,.84,.3,1),box-shadow .3s,filter .3s}
.pc-x-tab .dot svg{width:23px;height:23px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.pc-x-tab .dot b{position:absolute;right:-8px;top:-8px;min-width:26px;height:26px;padding:0 6px;border-radius:99px;background:var(--panel);border:1.5px solid var(--c);color:var(--fg);font:800 14px/23px var(--font-mono);text-align:center}
.pc-x-tab .dot .ai{position:absolute;left:-6px;bottom:-6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--hx-ai);color:var(--hx-on);box-shadow:0 0 0 2px var(--panel)}
.pc-x-tab .dot .ai svg{width:12px;height:12px;filter:none}
.pc-x-tab .nm{display:none}
.pc-x-tab .full{grid-column:2;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:18px;font-weight:800;line-height:1.35}
.pc-x-tab .ai-t{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;background:color-mix(in srgb,var(--hx-ai) 16%,transparent);color:var(--hx-ai);font-size:14.5px;font-weight:800}
.pc-x-tab .ai-t svg{width:13px;height:13px}
.pc-x-tab .tg{grid-column:2;font-size:15.5px;font-weight:700;color:var(--c)}
.pc-x-tab .chev{grid-column:3;grid-row:1/3;width:10px;height:10px;border-right:2px solid var(--fg-2);border-bottom:2px solid var(--fg-2);transform:rotate(45deg);transition:transform .3s}
.pc-x-tab[aria-expanded="true"] .chev{transform:rotate(225deg)}
.pc-x-tab .pr{display:none}
.pc-x-tab:focus-visible{outline:none}
.pc-x-tab:focus-visible .dot{outline:2px solid var(--accent);outline-offset:4px}

.pc-x-panel{position:relative;display:grid;grid-template-columns:1fr;gap:16px;margin:4px 0 22px 62px;padding:16px;border:1px solid var(--line);border-radius:20px;
  background:radial-gradient(70% 80% at 100% 100%,color-mix(in srgb,var(--c) 10%,transparent),transparent 70%),var(--panel);box-shadow:var(--card-shadow);scroll-margin-top:calc(var(--nav-h,56px) + 16px)}
.pc-js .pc-x-panel:not(.is-open){display:none}
.pc-x-body{min-width:0;padding:4px 4px 0}
.pc-x-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0}
.pc-x-meta .no{padding:5px 12px;border-radius:99px;background:var(--c);color:var(--hx-on);font:800 14.5px/1.25 var(--font-mono)}
.pc-x-meta .tg{font-size:16px;font-weight:800;color:var(--c)}
.pc-x-body h3{margin:12px 0 0;font-size:clamp(24px,2.2vw,32px);font-weight:900;line-height:1.25;letter-spacing:-.02em;color:var(--fg)}
.pc-x-body .what{margin:12px 0 0;max-width:38em;font-size:17.5px;line-height:1.8;color:var(--fg-2)}
.pc-ai{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;padding:12px 16px;border-radius:16px;border:1px solid color-mix(in srgb,var(--hx-ai) 32%,var(--line));background:color-mix(in srgb,var(--hx-ai) 9%,transparent);font-size:16.5px;line-height:1.7;color:var(--fg)}
.pc-ai svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--hx-ai)}
.pc-ai b{margin-right:10px;color:var(--hx-ai);font-weight:800}
.pc-x-cols{display:grid;grid-template-columns:1fr;gap:20px;margin:0;padding:0}
.pc-x-cols .col{display:flex;flex-direction:column;padding:24px;border-radius:16px;background:color-mix(in srgb,var(--c) 7%,var(--panel));border:1px solid color-mix(in srgb,var(--c) 28%,var(--line))}
.pc-x-cols h4{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:800;line-height:1.3;color:var(--fg)}
.pc-x-cols h4 svg{flex:none;width:36px;height:36px;padding:7px;border-radius:12px;background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c)}
.pc-x-cols ul{margin:14px 0 0;padding:0;list-style:none}
.pc-x-cols li{position:relative;padding:4px 0 4px 18px;font-size:16.5px;line-height:1.75;color:var(--fg-2)}
:is(.pc-x-cols li,.pc-x-body .what,.pc-pr-card p,.pc-lead,.pc-gate b){text-wrap:pretty}
.pc-x-cols li::before{content:"";position:absolute;left:2px;top:calc(4px + .875em - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--c)}
.pc-x-cols .get li{display:flex;align-items:flex-start;gap:8px;padding-left:0;color:var(--fg);font-weight:700}
.pc-x-cols .get li::before{display:none}
.pc-x-cols .get li svg{flex:none;width:18px;height:18px;margin-top:5px;color:var(--c)}
.pc-x-cols .get ul.is-many{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
.pc-gate{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin:14px 0 0;padding:13px 16px;border-radius:16px;border:1.5px dashed color-mix(in srgb,var(--c) 55%,var(--line));background:color-mix(in srgb,var(--c) 7%,transparent)}
.pc-gate svg{width:20px;height:20px;color:var(--c)}
.pc-gate span{font-size:15px;font-weight:700;color:var(--fg-2)}
.pc-gate b{font-size:17px;font-weight:800;line-height:1.5;color:var(--fg)}
.pc-x-nav{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin:0;padding:0}
.pc-x-nav .action{margin:0}
.pc-step-btn.is-next{border-color:color-mix(in srgb,var(--c) 45%,var(--line))}
.pc-step-btn:hover{border-color:var(--c)}
.pc-step-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* opening a panel: the scene wipes in, the text rises in order */
.pc-x-panel.is-play .pc-x-scene{animation:pc-wipe .8s cubic-bezier(.77,0,.18,1) both}
.pc-x-panel.is-play .pc-x-body>*{animation:pc-up .6s cubic-bezier(.16,.84,.3,1) both}
.pc-x-panel.is-play .pc-x-body>:nth-child(2){animation-delay:.06s}.pc-x-panel.is-play .pc-x-body>:nth-child(3){animation-delay:.12s}
.pc-x-panel.is-play .pc-x-body>:nth-child(4){animation-delay:.18s}.pc-x-panel.is-play .pc-x-body>:nth-child(5){animation-delay:.24s}
.pc-x-panel.is-play :is(.pc-x-cols,.pc-x-nav){animation:pc-up .6s cubic-bezier(.16,.84,.3,1) .3s both}
@keyframes pc-wipe{from{clip-path:inset(0 100% 0 0 round 16px)}to{clip-path:inset(0 0 0 0 round 16px)}}
@keyframes pc-up{from{opacity:0;transform:translateY(14px)}}

@media (min-width:761px){
  .pc-js .pc-x-list{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:6px}
  .pc-js .pc-x-list::before,.pc-js .pc-x-list::after{content:"";position:absolute;left:calc(100% / 18);top:37px;bottom:auto;height:3px;border-radius:3px;opacity:1}
  .pc-js .pc-x-list::before{right:calc(100% / 18);width:auto;background:var(--line)}
  .pc-js .pc-x-list::after{width:calc((100% - 100% / 9) * var(--fill));background:linear-gradient(90deg,var(--hx-web),var(--hx-ai),var(--hx-sub));transition:width .7s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 12px -2px var(--hx-ai)}
  .pc-js .pc-x-tab{grid-row:1;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:0;padding:6px 2px 16px;text-align:center;color:var(--fg-2)}
  .pc-js .pc-x-tab .dot{width:62px;height:62px;border-radius:14px;filter:saturate(.72) brightness(.92)}
  .pc-js .pc-x-tab .dot svg{width:28px;height:28px}
  .pc-js .pc-x-tab .nm{display:block;font-size:15.5px;font-weight:700;line-height:1.35;white-space:nowrap;transition:color .25s}
  .pc-js .pc-x-tab :is(.full,.tg,.chev){display:none}
  .pc-js .pc-x-tab .pr{display:block;position:absolute;left:50%;bottom:3px;width:34px;height:3px;margin-left:-17px;border-radius:2px;background:var(--line);overflow:hidden;opacity:0;transition:opacity .3s}
  .pc-js .pc-x-tab .pr::after{content:"";position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:left}
  .pc-js .pc-x-tab:hover .dot{transform:translateY(-3px);filter:none}
  .pc-js .pc-x-tab:hover .nm{color:var(--fg)}
  .pc-js .pc-x-tab[aria-expanded="true"] .dot{transform:translateY(-4px) scale(1.06);filter:none;box-shadow:0 0 0 2px var(--panel),0 0 0 4.5px var(--c),0 16px 34px -14px var(--c)}
  .pc-js .pc-x-tab[aria-expanded="true"] .nm{color:var(--fg);font-weight:800}
  .pc-js .pc-x-tab[aria-expanded="true"] .pr{opacity:1}
  .pc-js .pc-x-tab[aria-expanded="true"] .pr::after{transform:none}
  .pc-x.is-auto .pc-x-tab[aria-expanded="true"] .pr::after{transform:scaleX(0);animation:pc-xfill var(--auto,9000ms) linear forwards}
  .pc-x.is-hold .pc-x-tab .pr::after,.pc-x.is-away .pc-x-tab .pr::after{animation-play-state:paused}
  .pc-js .pc-x-tab.is-hop .dot{animation:pc-hop .6s ease-out}
  /* every panel sits in the same cell, so the row is as tall as the tallest one and nothing below jumps */
  .pc-js .pc-x-panel,.pc-js .pc-x-panel:not(.is-open){grid-row:2;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-rows:1fr auto auto;grid-template-areas:"scene body" "cols cols" "nav nav";gap:24px clamp(24px,3vw,44px);margin:14px 0 0;padding:28px;border-radius:20px}
  .pc-js .pc-x-panel:not(.is-open){visibility:hidden;opacity:0;pointer-events:none}
  .pc-js .pc-x-scene{grid-area:scene;min-height:330px}
  .pc-js .pc-x-body{grid-area:body;align-self:center;padding:8px clamp(4px,1.4vw,18px) 8px 0}
  .pc-js .pc-x-cols{grid-area:cols;grid-template-columns:repeat(3,minmax(0,1fr))}
  .pc-js .pc-x-nav{grid-area:nav;padding:0}
}
@keyframes pc-xfill{to{transform:none}}
@keyframes pc-hop{45%{transform:translateY(-11px) scale(1.12) rotate(-7deg)}75%{transform:translateY(-3px) scale(1.02) rotate(2deg)}}

/* ================= 3. SCENES (partials/pg-process/scene) ================= */
.pc-x-scene{position:relative;min-height:0;aspect-ratio:16/11;border-radius:16px;overflow:hidden;isolation:isolate;border:1px solid var(--line-soft);
  background:radial-gradient(70% 80% at 65% 60%,color-mix(in srgb,var(--c) 24%,transparent),transparent 70%),radial-gradient(50% 60% at 0% 100%,color-mix(in srgb,var(--hx-sub) 10%,transparent),transparent 70%),var(--hx-stage)}
@media (min-width:761px){.pc-js .pc-x-scene{aspect-ratio:auto}}
.pc-x-scene::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--hx-grid) 1.2px,transparent 1.6px);background-size:22px 22px}
.pc-scn{--u:min(1cqw,1.5cqh);--fs:max(13px,calc(var(--u) * 3.2));position:absolute;inset:0;container-type:size;font-family:var(--font-sans);color:var(--hx-text)}
.pc-scn .demo{position:absolute;right:12px;top:11px;z-index:3;padding:4px 9px;border-radius:99px;border:1px solid var(--line-soft);background:var(--hx-surface);font:600 12.5px/1.2 var(--font-mono);color:var(--hx-text-2)}
.pc-scn .st{position:absolute;left:50%;top:54%;width:calc(var(--u) * 88);height:calc(var(--u) * 60);transform:translate(-50%,-50%);font-size:var(--fs);line-height:1.4}
.pc-scn i,.pc-scn b,.pc-scn em{display:block;font-style:normal}
.pc-scn svg{fill:none;stroke:currentColor}
.pc-x.is-away .pc-scn *,.pc-x.is-away .pc-scn *::before,.pc-x.is-away .pc-scn *::after{animation-play-state:paused!important}
@keyframes pc-pop{from{opacity:0;transform:translateY(calc(var(--u) * 3)) scale(.9)}}
@keyframes pc-in{from{opacity:0}}
@keyframes pc-tick{from{transform:scale(0)}70%{transform:scale(1.3)}to{transform:none}}
@keyframes pc-grow{from{transform:scaleX(0)}}
@keyframes pc-gone{0%,99%{opacity:1}100%{opacity:0}}
.pc-scn .tick{display:inline-grid;place-items:center}

/* talk: chat bubbles + sticky note */
.sc-talk .b{position:absolute;left:0;display:flex;align-items:flex-end;gap:calc(var(--u) * 1.6);max-width:62%;margin:0}
.sc-talk .b>i{flex:none;display:grid;place-items:center;width:calc(var(--u) * 7);height:calc(var(--u) * 7);border-radius:50%;background:var(--hx-surface-2);border:1px solid var(--line);font-weight:800;font-size:.9em;color:var(--hx-text-2)}
.sc-talk .b>span{padding:calc(var(--u) * 2) calc(var(--u) * 2.6);border-radius:calc(var(--u) * 2.4) calc(var(--u) * 2.4) calc(var(--u) * 2.4) calc(var(--u) * .6);font-weight:700;line-height:1.45}
.sc-talk .you{top:4%}
.sc-talk .you>span{background:var(--hx-surface);border:1px solid var(--line)}
.sc-talk .us{top:44%;left:4%}
.sc-talk .us>i{background:linear-gradient(135deg,var(--hx-web),var(--hx-ai));color:#fff;border:0}
.sc-talk .us>.tx{background:var(--c);color:var(--hx-on)}
.sc-talk .dots{position:absolute;left:calc(var(--u) * 8.6);bottom:0;display:flex;gap:4px;padding:calc(var(--u) * 2.4) calc(var(--u) * 2.6);border-radius:calc(var(--u) * 2.4);background:var(--hx-surface);border:1px solid var(--line);opacity:0}
.sc-talk .dots b{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:pc-dot 1s ease-in-out infinite}
.sc-talk .dots b:nth-child(2){animation-delay:.15s}.sc-talk .dots b:nth-child(3){animation-delay:.3s}
@keyframes pc-dot{50%{transform:translateY(-4px);opacity:.4}}
.sc-talk .note{position:absolute;right:0;top:18%;width:34%;padding:calc(var(--u) * 2.4);border-radius:calc(var(--u) * 1.6);background:color-mix(in srgb,var(--hx-sub) 16%,var(--hx-surface));border:1px solid color-mix(in srgb,var(--hx-sub) 45%,transparent);transform:rotate(3deg);box-shadow:var(--hx-shadow)}
.sc-talk .note strong{display:block;font-weight:900;color:var(--hx-sub)}
.sc-talk .note ul{margin:calc(var(--u) * 1.2) 0 0;padding:0;list-style:none}
.sc-talk .note li{display:flex;align-items:center;gap:6px;padding:calc(var(--u) * .7) 0;font-weight:700}
.sc-talk .note li::before{content:"✓";display:grid;place-items:center;flex:none;width:1.25em;height:1.25em;border-radius:4px;background:var(--hx-sub);color:var(--hx-on);font-size:.8em;font-weight:900}
.is-play .sc-talk .you{animation:pc-pop .5s cubic-bezier(.2,.9,.3,1.3) .25s both}
.is-play .sc-talk .us{animation:pc-pop .5s cubic-bezier(.2,.9,.3,1.3) .9s both}
.is-play .sc-talk .dots{animation:pc-typing 1.1s linear .9s both}
@keyframes pc-typing{0%{opacity:0}10%,90%{opacity:1}100%{opacity:0}}
.is-play .sc-talk .us>.tx{animation:pc-in .3s ease 2s both}
.is-play .sc-talk .note{animation:pc-note .6s cubic-bezier(.2,.9,.3,1.2) 2.3s both}
@keyframes pc-note{from{opacity:0;transform:translateX(calc(var(--u) * 6)) rotate(10deg)}}
.is-play .sc-talk .note li::before{animation:pc-tick .4s cubic-bezier(.2,.9,.3,1.5) both;animation-delay:calc(2.9s + var(--i) * .35s)}

/* discover: a lens sorts what already exists */
.sc-discover .grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:calc(var(--u) * 3);height:100%}
.sc-discover .t{position:relative;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u) * 1.2);padding:calc(var(--u) * 2.4) calc(var(--u) * 3);border-radius:calc(var(--u) * 2);background:var(--hx-surface);border:1px solid var(--line-soft);box-shadow:var(--hx-shadow)}
.sc-discover .t>svg{width:calc(var(--u) * 6);height:calc(var(--u) * 6);stroke-width:1.8;color:var(--c)}
.sc-discover .t b{font-weight:800}
.sc-discover .t em{position:absolute;right:calc(var(--u) * 2);top:calc(var(--u) * 2);padding:3px 8px;border-radius:99px;background:var(--c);color:var(--hx-on);font-size:.92em;font-weight:800}
.sc-discover .lens{position:absolute;left:75%;top:75%;display:grid;place-items:center;width:calc(var(--u) * 14);height:calc(var(--u) * 14);margin:calc(var(--u) * -7) 0 0 calc(var(--u) * -7);border-radius:50%;
  background:color-mix(in srgb,var(--c) 14%,transparent);border:2px solid var(--c);color:var(--c);box-shadow:0 0 30px -6px var(--c);opacity:0}
.sc-discover .lens svg{width:45%;height:45%;stroke-width:2}
.is-play .sc-discover .lens{animation:pc-lens 3.4s cubic-bezier(.5,0,.3,1) .3s both}
@keyframes pc-lens{0%{left:25%;top:25%;opacity:0}12%,20%{left:25%;top:25%;opacity:1}32%{left:75%;top:25%}52%{left:25%;top:75%}72%,88%{left:75%;top:75%;opacity:1}100%{left:75%;top:75%;opacity:0}}
.is-play .sc-discover .t em{animation:pc-pop .4s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:calc(.9s + var(--i) * .7s)}

/* plan: sitemap tree + proposal with phases */
.sc-plan .tree{position:absolute;left:0;top:6%;width:46%;height:88%}
.sc-plan .root,.sc-plan .kids i{display:grid;place-items:center;border-radius:calc(var(--u) * 1.4);background:var(--hx-surface);border:1.5px solid var(--c);font-weight:800}
.sc-plan .root{width:46%;height:24%;margin:0 auto;background:var(--c);color:var(--hx-on)}
.sc-plan .ln{display:block;width:100%;height:30%;overflow:visible}
.sc-plan .ln path{stroke:color-mix(in srgb,var(--c) 70%,transparent);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:200;stroke-dashoffset:0}
.sc-plan .kids{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u) * 1.6);height:26%}
.sc-plan .doc{position:absolute;right:0;top:0;width:48%;height:100%;display:flex;flex-direction:column;gap:calc(var(--u) * 2.2);padding:calc(var(--u) * 3);border-radius:calc(var(--u) * 2);background:var(--hx-surface);border:1px solid var(--line);box-shadow:var(--hx-shadow)}
.sc-plan .doc>b{font-weight:900}
.sc-plan .doc p{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:calc(var(--u) * 1.6);margin:0;font-size:.9em;font-weight:700;color:var(--hx-text-2)}
.sc-plan .doc p i{height:calc(var(--u) * 2.2);border-radius:99px;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 40%,var(--hx-ai)));width:calc(var(--w) * 100%);transform-origin:left}
.sc-plan .quote{align-self:flex-start;margin-top:auto;padding:4px 10px;border:2px solid var(--hx-sub);border-radius:7px;color:var(--hx-sub);font-weight:900;transform:rotate(-5deg)}
.is-play .sc-plan .root{animation:pc-pop .45s cubic-bezier(.2,.9,.3,1.3) .2s both}
.is-play .sc-plan .ln path{animation:pc-draw .7s ease .6s both}
@keyframes pc-draw{from{stroke-dashoffset:200}}
.is-play .sc-plan .kids i{animation:pc-pop .4s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(1.1s + var(--i) * .18s)}
.is-play .sc-plan .doc{animation:pc-pop .5s ease 1.4s both}
.is-play .sc-plan .doc p i{animation:pc-grow .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(1.8s + var(--i) * .35s)}
.is-play .sc-plan .quote{animation:pc-slam .5s cubic-bezier(.2,.9,.3,1.3) 3s both}
@keyframes pc-slam{from{opacity:0;transform:rotate(-16deg) scale(2)}}

/* sign: contract, signature, stamp */
.sc-sign .paper{position:absolute;left:50%;top:48%;width:66%;height:94%;padding:calc(var(--u) * 3.6) calc(var(--u) * 4);border-radius:calc(var(--u) * 1.6);background:var(--hx-surface);border:1px solid var(--line);box-shadow:var(--hx-shadow);transform:translate(-50%,-50%) rotate(-2deg)}
.sc-sign .paper>b{font-size:1.25em;font-weight:900;letter-spacing:.3em}
.sc-sign ul{margin:calc(var(--u) * 2) 0 0;padding:0;list-style:none}
.sc-sign li{display:flex;align-items:center;gap:8px;padding:calc(var(--u) * 1) 0;border-bottom:1px dashed var(--line);font-weight:700}
.sc-sign li::before{content:"✓";display:grid;place-items:center;flex:none;width:1.3em;height:1.3em;border-radius:4px;background:var(--c);color:var(--hx-on);font-size:.8em;font-weight:900}
.sc-sign .sig{position:relative;margin-top:calc(var(--u) * 3);width:62%}
.sc-sign .sig svg{display:block;width:100%;height:calc(var(--u) * 8);overflow:visible}
.sc-sign .sig path{stroke:var(--hx-text);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:0}
.sc-sign .sig i{height:1.5px;background:var(--line)}
.sc-sign .sig small{display:block;margin-top:4px;font-size:.92em;color:var(--hx-text-2)}
.sc-sign .stamp{position:absolute;right:7%;bottom:12%;display:grid;place-items:center;width:calc(var(--u) * 17);height:calc(var(--u) * 17);border-radius:50%;border:3px double var(--hx-sub);color:var(--hx-sub);font-weight:900;font-size:1.05em;letter-spacing:.06em;transform:rotate(-14deg);
  background:color-mix(in srgb,var(--hx-sub) 10%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--hx-sub) 14%,transparent)}
.is-play .sc-sign li::before{animation:pc-tick .4s cubic-bezier(.2,.9,.3,1.5) both;animation-delay:calc(.5s + var(--i) * .4s)}
.is-play .sc-sign .sig path{animation:pc-sig 1.2s ease-in-out 1.9s both}
@keyframes pc-sig{from{stroke-dashoffset:260}}
.is-play .sc-sign .stamp{animation:pc-seal .6s cubic-bezier(.2,.9,.3,1.25) 3.2s both}
@keyframes pc-seal{0%{opacity:0;transform:rotate(-30deg) scale(2.4)}60%{opacity:1;transform:rotate(-12deg) scale(.9)}100%{transform:rotate(-14deg) scale(1)}}
.is-play .sc-sign .paper{animation:pc-thud .3s ease 3.55s}
@keyframes pc-thud{50%{transform:translate(-50%,-49%) rotate(-2deg) scale(.985)}}

/* design: wireframe gets pins, a note, colour, then a tick; phone preview beside */
.sc-design .wire{position:absolute;left:0;top:0;width:70%;height:100%;display:flex;flex-direction:column;gap:calc(var(--u) * 2.2);padding:calc(var(--u) * 2.6);border-radius:calc(var(--u) * 2);background:var(--hx-surface);border:1px solid var(--line);box-shadow:var(--hx-shadow)}
.sc-design .nav{height:calc(var(--u) * 3);width:40%;border-radius:99px;background:var(--line)}
.sc-design .hero{position:relative;flex:1.3;border-radius:calc(var(--u) * 1.4);background:var(--hx-surface-2);border:1px dashed var(--line);overflow:hidden}
.sc-design .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 75%,#fff),var(--c) 50%,color-mix(in srgb,var(--hx-ai) 70%,var(--c)))}
.sc-design .row{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u) * 1.6)}
.sc-design .row i{position:relative;border-radius:calc(var(--u) * 1.2);background:var(--hx-surface-2);border:1px dashed var(--line);overflow:hidden}
.sc-design .row i::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--c) 22%,var(--hx-surface))}
.sc-design .pin{position:absolute;left:var(--x);top:var(--y);display:grid;place-items:center;width:calc(var(--u) * 5.6);height:calc(var(--u) * 5.6);margin:calc(var(--u) * -2.8) 0 0 calc(var(--u) * -2.8);border-radius:50% 50% 50% 0;background:var(--hx-sub);color:var(--hx-on);font-weight:900;font-size:.9em;box-shadow:0 6px 14px -6px rgba(0,0,0,.5);opacity:0}
.sc-design .note{position:absolute;left:30%;top:14%;padding:5px 10px;border-radius:9px;background:var(--hx-surface);border:1px solid var(--hx-sub);font-weight:800;font-size:.9em;box-shadow:var(--hx-shadow);white-space:nowrap;opacity:0}
.sc-design .ok{position:absolute;right:calc(var(--u) * -2);bottom:calc(var(--u) * -2);display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:99px;background:var(--c);color:var(--hx-on);font-weight:900;box-shadow:0 10px 24px -10px var(--c)}
.sc-design .ok svg{width:1.1em;height:1.1em}
.sc-design .phone{position:absolute;right:0;top:8%;width:24%;height:84%;display:flex;flex-direction:column;gap:calc(var(--u) * 1.4);padding:calc(var(--u) * 3.4) calc(var(--u) * 1.6) calc(var(--u) * 2);border-radius:calc(var(--u) * 3.4);border:calc(var(--u) * .6) solid var(--hx-text-2);background:var(--hx-surface)}
.sc-design .phone .nav{width:60%;height:calc(var(--u) * 1.8)}
.sc-design .phone .hero{flex:1.4;border:0}
.sc-design .phone .c{flex:.6;border-radius:calc(var(--u) * 1);background:color-mix(in srgb,var(--c) 22%,var(--hx-surface))}
.is-play .sc-design .pin{animation:pc-pin 2.4s ease both;animation-delay:calc(.5s + var(--i) * .3s)}
@keyframes pc-pin{0%{opacity:0;transform:translateY(-12px) scale(.4)}15%{opacity:1;transform:none}80%{opacity:1;transform:none}100%{opacity:0;transform:scale(.6)}}
.is-play .sc-design .note{animation:pc-notefade 1.8s ease 1.3s both}
@keyframes pc-notefade{0%{opacity:0;transform:translateY(6px)}15%,80%{opacity:1;transform:none}100%{opacity:0}}
.is-play .sc-design .hero::after,.is-play .sc-design .row i::after,.is-play .sc-design .phone .c{animation:pc-in .8s ease 2.9s both}
.is-play .sc-design .ok{animation:pc-pop .5s cubic-bezier(.2,.9,.3,1.4) 3.5s both}

/* build: stages fill, the test site moves up a version, feedback arrives */
.sc-build .stages{position:absolute;left:0;top:4%;width:44%;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:calc(var(--u) * 2.6)}
.sc-build .stages li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:calc(var(--u) * 1.6);padding:calc(var(--u) * 2) calc(var(--u) * 2.2);border-radius:calc(var(--u) * 1.6);background:var(--hx-surface);border:1px solid var(--line-soft);font-weight:800}
.sc-build .stages i{height:calc(var(--u) * 2);border-radius:99px;background:var(--line-soft);position:relative;overflow:hidden}
.sc-build .stages i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 50%,var(--hx-web)));transform-origin:left}
.sc-build .stages svg{width:calc(var(--u) * 4.4);height:calc(var(--u) * 4.4);padding:3px;border-radius:50%;background:var(--c);color:var(--hx-on);stroke-width:3}
.sc-build .site{position:absolute;right:0;top:0;width:50%;height:78%;display:flex;flex-direction:column;border-radius:calc(var(--u) * 1.8);background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--c) 40%,var(--line));box-shadow:var(--hx-shadow);overflow:hidden}
.sc-build .site .bar{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--u) * 1.4) calc(var(--u) * 2);background:var(--hx-surface-2);border-bottom:1px solid var(--line-soft);font-weight:800;font-size:.9em}
.sc-build .v{position:relative;width:2.8em;height:1.7em}
.sc-build .v b{position:absolute;inset:0;display:grid;place-items:center;border-radius:99px;background:var(--c);color:var(--hx-on);font:800 .92em/1 var(--font-mono);opacity:0}
.sc-build .v .v3{opacity:1}
.sc-build .site .body{flex:1;display:flex;flex-direction:column;gap:calc(var(--u) * 1.6);padding:calc(var(--u) * 2.2)}
.sc-build .site .body i{height:calc(var(--u) * 2.4);border-radius:99px;background:color-mix(in srgb,var(--hx-text) 12%,transparent)}
.sc-build .site .body .h{height:calc(var(--u) * 7);border-radius:calc(var(--u) * 1.2);background:color-mix(in srgb,var(--c) 30%,var(--hx-surface))}
.sc-build .site .body .s{width:60%}
.sc-build .site .body .new{height:calc(var(--u) * 5);border-radius:calc(var(--u) * 1.2);background:transparent;border:1.5px dashed var(--c)}
.sc-build .fb{position:absolute;right:0;bottom:0;max-width:62%;padding:calc(var(--u) * 1.6) calc(var(--u) * 2.4);border-radius:calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * .5) calc(var(--u) * 2);background:var(--hx-sub);color:var(--hx-on);font-weight:800;font-size:.92em;line-height:1.4;box-shadow:0 12px 24px -12px var(--hx-sub)}
.is-play .sc-build .stages i::after{animation:pc-grow 1s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(.4s + var(--i) * 1.1s)}
.is-play .sc-build .stages svg{animation:pc-tick .4s cubic-bezier(.2,.9,.3,1.5) both;animation-delay:calc(1.4s + var(--i) * 1.1s)}
.is-play .sc-build .v .v1{animation:pc-gone 1.5s linear forwards}
.is-play .sc-build .v .v2{animation:pc-gone 1.1s linear 1.5s forwards}
.is-play .sc-build .v .v3{animation:pc-in .2s ease 2.6s both}
.is-play .sc-build .fb{animation:pc-pop .5s cubic-bezier(.2,.9,.3,1.3) 1.2s both}
.is-play .sc-build .site .body .new{animation:pc-in .5s ease 2.6s both}

/* launch: checklist, switch from test to live, live badge */
.sc-launch .chk{position:absolute;left:0;top:6%;width:38%;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:calc(var(--u) * 1.8)}
.sc-launch .chk li{display:flex;align-items:center;gap:8px;padding:calc(var(--u) * 1.6) calc(var(--u) * 2);border-radius:calc(var(--u) * 1.4);background:var(--hx-surface);border:1px solid var(--line-soft);font-weight:800}
.sc-launch .chk li::before{content:"✓";display:grid;place-items:center;flex:none;width:1.3em;height:1.3em;border-radius:50%;background:var(--c);color:var(--hx-on);font-size:.8em;font-weight:900}
.sc-launch .site{position:absolute;right:0;top:4%;width:56%;height:84%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u) * 4);border-radius:calc(var(--u) * 2);background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--c) 45%,var(--line));box-shadow:var(--hx-shadow)}
.sc-launch .url{position:relative;width:84%;height:calc(var(--u) * 6.4);border-radius:99px;background:var(--hx-surface-2);border:1px solid var(--line-soft);font:700 .9em/1 var(--font-mono)}
.sc-launch .url span{position:absolute;inset:0;display:grid;place-items:center}
.sc-launch .url .u1{color:var(--hx-text-2);opacity:0}
.sc-launch .url .u2{color:var(--hx-text)}
.sc-launch .sw{display:flex;align-items:center;gap:calc(var(--u) * 1.6);font-weight:800;font-size:.92em;color:var(--hx-text-2)}
.sc-launch .sw i{position:relative;width:calc(var(--u) * 10);height:calc(var(--u) * 5.2);border-radius:99px;background:var(--c)}
.sc-launch .sw b{position:absolute;left:calc(var(--u) * .6);top:calc(var(--u) * .6);width:calc(var(--u) * 4);height:calc(var(--u) * 4);border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transform:translateX(calc(var(--u) * 4.8))}
.sc-launch .live{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:99px;background:color-mix(in srgb,var(--c) 16%,transparent);border:1px solid var(--c);color:var(--c);font-weight:900}
.sc-launch .live i{width:9px;height:9px;border-radius:50%;background:var(--c);animation:pc-blink 1.4s ease-in-out infinite}
.sc-launch .burst{position:absolute;left:50%;top:50%;width:40%;aspect-ratio:1;margin:-20% 0 0 -20%;border-radius:50%;border:2px solid var(--c);opacity:0;pointer-events:none}
.is-play .sc-launch .chk li::before{animation:pc-tick .4s cubic-bezier(.2,.9,.3,1.5) both;animation-delay:calc(.3s + var(--i) * .35s)}
.is-play .sc-launch .sw i{animation:pc-swbg .4s ease 2s both}
@keyframes pc-swbg{from{background:var(--line)}}
.is-play .sc-launch .sw b{animation:pc-knob .4s cubic-bezier(.2,.8,.2,1) 2s both}
@keyframes pc-knob{from{transform:none}}
.is-play .sc-launch .url .u1{animation:pc-gone 2.2s linear forwards}
.is-play .sc-launch .url .u2{animation:pc-in .3s ease 2.2s both}
.is-play .sc-launch .live{animation:pc-pop .5s cubic-bezier(.2,.9,.3,1.4) 2.5s both}
.is-play .sc-launch .burst{animation:pc-burst 1s ease-out 2.5s}
@keyframes pc-burst{from{opacity:.8;transform:scale(.4)}to{opacity:0;transform:scale(2.2)}}

/* handover: a cursor shows how, the kit fills, done */
.sc-handover .scr{position:absolute;left:0;top:4%;width:48%;height:88%;display:flex;flex-direction:column;gap:calc(var(--u) * 1.8);padding:calc(var(--u) * 2.6);border-radius:calc(var(--u) * 2);background:var(--hx-surface);border:1px solid var(--line);box-shadow:var(--hx-shadow)}
.sc-handover .scr>i{height:calc(var(--u) * 2.2);border-radius:99px;background:color-mix(in srgb,var(--hx-text) 12%,transparent)}
.sc-handover .scr>.h{height:calc(var(--u) * 6);border-radius:calc(var(--u) * 1.2);background:color-mix(in srgb,var(--c) 22%,var(--hx-surface))}
.sc-handover .scr>.s{width:55%}
.sc-handover .btn{position:relative;align-self:flex-start;margin-top:auto;padding:6px 12px;border-radius:8px;background:var(--c);color:var(--hx-on);font-weight:800;font-size:.9em}
.sc-handover .btn::after{content:"";position:absolute;inset:-4px;border-radius:12px;border:2px solid var(--c);opacity:0}
.sc-handover .cur{position:absolute;left:62%;top:62%;width:calc(var(--u) * 4.6);height:calc(var(--u) * 4.6);background:var(--hx-text);clip-path:polygon(0 0,0 78%,24% 58%,42% 100%,56% 94%,38% 54%,70% 54%);filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.sc-handover .kit{position:absolute;right:0;top:0;width:46%;height:100%;display:flex;flex-direction:column;padding:calc(var(--u) * 3);border-radius:calc(var(--u) * 2);background:color-mix(in srgb,var(--c) 10%,var(--hx-surface));border:1.5px solid color-mix(in srgb,var(--c) 50%,var(--line));box-shadow:var(--hx-shadow)}
.sc-handover .kit>b{font-weight:900;color:var(--c)}
.sc-handover .kit ul{margin:calc(var(--u) * 1.6) 0 0;padding:0;list-style:none}
.sc-handover .kit li{display:flex;align-items:center;gap:7px;padding:calc(var(--u) * 1.3) 0;font-weight:700;line-height:1.35}
.sc-handover .kit li::before{content:"✓";display:grid;place-items:center;flex:none;width:1.3em;height:1.3em;border-radius:4px;background:var(--c);color:var(--hx-on);font-size:.8em;font-weight:900}
.sc-handover .done{display:inline-flex;align-items:center;align-self:flex-start;gap:5px;margin-top:auto;padding:5px 11px;border-radius:99px;background:var(--c);color:var(--hx-on);font-weight:900}
.sc-handover .done svg{width:1.1em;height:1.1em;stroke-width:3}
.is-play .sc-handover .cur{animation:pc-cursor 2.8s ease-in-out .3s infinite}
@keyframes pc-cursor{0%{left:62%;top:30%}40%,60%{left:calc(var(--u) * 8);top:calc(100% - var(--u) * 6)}100%{left:62%;top:30%}}
.is-play .sc-handover .btn::after{animation:pc-click 2.8s ease-out .3s infinite}
@keyframes pc-click{0%,42%{opacity:0;transform:scale(.9)}46%{opacity:1}62%{opacity:0;transform:scale(1.35)}100%{opacity:0}}
.is-play .sc-handover .kit li{animation:pc-slidein .5s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(.6s + var(--i) * .55s)}
@keyframes pc-slidein{from{opacity:0;transform:translateX(calc(var(--u) * -8))}}
.is-play .sc-handover .done{animation:pc-pop .5s cubic-bezier(.2,.9,.3,1.4) 2.5s both}

/* care: steady heartbeat, a new module slots in */
.sc-care .mon{position:absolute;left:0;right:0;top:0;height:48%;padding:calc(var(--u) * 2.4) calc(var(--u) * 3);border-radius:calc(var(--u) * 2);background:var(--hx-surface);border:1px solid var(--line);box-shadow:var(--hx-shadow)}
.sc-care .mon>b{font-weight:900}
.sc-care .okk{position:absolute;right:calc(var(--u) * 3);top:calc(var(--u) * 2.2);display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--c)}
.sc-care .okk i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent);animation:pc-blink 1.6s ease-in-out infinite}
.sc-care .ecg{position:absolute;left:calc(var(--u) * 3);right:calc(var(--u) * 3);bottom:calc(var(--u) * 2);width:calc(100% - var(--u) * 6);height:52%;overflow:visible}
.sc-care .ecg path{stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sc-care .ecg .base{stroke:color-mix(in srgb,var(--c) 30%,transparent)}
.sc-care .ecg .hi{stroke:var(--c);stroke-dasharray:70 330;stroke-dashoffset:0;filter:drop-shadow(0 0 4px var(--c))}
.is-play .sc-care .ecg .hi{animation:pc-ecg 2.6s linear infinite}
@keyframes pc-ecg{from{stroke-dashoffset:70}to{stroke-dashoffset:-330}}
.sc-care .mods{position:absolute;left:0;right:0;bottom:0;height:42%;display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u) * 2)}
.sc-care .mods i{display:grid;place-items:center;border-radius:calc(var(--u) * 1.6);background:color-mix(in srgb,var(--c) 14%,var(--hx-surface));border:1px solid color-mix(in srgb,var(--c) 35%,var(--line));font-weight:800}
.sc-care .mods .slot{position:relative;border:1.5px dashed var(--hx-sub);background:color-mix(in srgb,var(--hx-sub) 14%,var(--hx-surface));text-align:center;align-content:center;gap:2px}
.sc-care .slot b{font-weight:900;color:var(--hx-text)}
.sc-care .slot em{font-size:.92em;font-weight:700;color:var(--hx-sub)}
.is-play .sc-care .mods .slot>*{animation:pc-drop .6s cubic-bezier(.2,.9,.3,1.3) 1.2s both}
@keyframes pc-drop{from{opacity:0;transform:translateY(calc(var(--u) * -10))}}

/* ================= 4. DELIVERABLES FOLDER ================= */
.pc-dl{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(26px,4vw,64px);align-items:center}
.pc-ticks{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px;padding:0;list-style:none}
.pc-ticks li{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;background:color-mix(in srgb,var(--hx-teal) 7%,var(--panel));border:1px solid color-mix(in srgb,var(--hx-teal) 28%,var(--line));font-size:16px;font-weight:700;color:var(--fg)}
.pc-ticks svg{width:16px;height:16px;color:var(--hx-teal)}
.pc-tree{--c:var(--hx-blue);border-radius:16px}
.pc-tree .hx-win-bar{height:32px;font-size:12.5px}
.pc-tree .hx-win-body{margin:0;padding:24px;list-style:none;columns:2;column-gap:32px}
.pc-tree .fd{break-inside:avoid;padding:4px 0 8px}
.pc-tree .row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:color-mix(in srgb,var(--c) 10%,transparent)}
.pc-tree .row svg{flex:none;width:21px;height:21px;color:var(--c)}
.pc-tree .row b{font-size:17.5px;font-weight:800;color:var(--fg)}
.pc-tree .row small{margin-left:auto;padding:3px 10px;border-radius:99px;background:var(--c);color:var(--hx-on);font-size:14.5px;font-weight:800;line-height:1.4;white-space:nowrap}
.pc-tree .fd ul{position:relative;margin:6px 0 0 20px;padding:0 0 0 14px;list-style:none;border-left:1.5px solid color-mix(in srgb,var(--c) 35%,var(--line))}
.pc-tree .fd ul li{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:16.5px;font-weight:600;color:var(--fg-2)}
.pc-tree .fd ul li svg{flex:none;width:18px;height:18px;color:color-mix(in srgb,var(--c) 70%,var(--fg-2))}
.pc-tree .cursor{padding:6px 8px}
.pc-tree .cursor i{display:block;width:10px;height:18px;background:var(--accent);animation:pc-blink 1s steps(2) infinite}
#deliver .pc-tree :is(.fd,.fd li,.cursor){opacity:0;transform:translateX(-10px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 85ms + .15s)}
#deliver.in-view .pc-tree :is(.fd,.fd li,.cursor){opacity:1;transform:none}

/* ================= 5. PRINCIPLES ================= */
.pc-pr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.pc-pr-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden;box-shadow:var(--card-shadow);transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s}
.pc-pr-card h3{margin:24px 26px 0;font-size:21px;font-weight:800;line-height:1.35;color:var(--fg)}
.pc-pr-card h3::before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:50%;background:var(--c);vertical-align:2px}
.pc-pr-card p{margin:10px 26px 26px;font-size:16.5px;line-height:1.75;color:var(--fg-2)}
[data-reveal] .pc-pr-card{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].in-view .pc-pr-card{opacity:1;transform:none}
.pc-pr .art{position:relative;height:190px;overflow:hidden;border-bottom:1px solid var(--line-soft);
  background:radial-gradient(60% 75% at 55% 60%,color-mix(in srgb,var(--c) 20%,transparent),transparent 70%),var(--hx-stage)}
.pc-pr .art::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--hx-grid) 1.2px,transparent 1.6px);background-size:20px 20px}
.pc-pr .art i,.pc-pr .art b,.pc-pr .art em{display:block;font-style:normal}
.pc-pr .art svg{fill:none;stroke:currentColor}
.pc-pr:not(.is-live) .art *,.pc-pr:not(.is-live) .art *::before,.pc-pr:not(.is-live) .art *::after{animation-play-state:paused!important}
/* gate: the folder walks, stops at each gate until it ticks, then the arm lifts */
.art-gate .track{position:absolute;left:8%;right:8%;top:62%;height:4px;border-radius:99px;background:color-mix(in srgb,var(--c) 28%,var(--line))}
.art-gate .g{position:absolute;top:62%;width:4px;height:46px;margin:-42px 0 0 -2px;border-radius:3px;background:var(--hx-text-2)}
.art-gate .g1{left:38%}.art-gate .g2{left:66%}
.art-gate .g b{position:absolute;left:0;top:2px;width:58px;height:7px;margin-left:-27px;border-radius:99px;background:repeating-linear-gradient(90deg,var(--hx-sub) 0 9px,var(--hx-surface) 9px 18px);border:1px solid var(--hx-sub);transform-origin:27px 50%;animation:pc-arm1 6s ease-in-out infinite}
.art-gate .g2 b{animation-name:pc-arm2}
.art-gate .g svg{position:absolute;left:50%;top:-34px;width:26px;height:26px;margin-left:-13px;padding:5px;border-radius:50%;background:var(--c);color:var(--hx-on);stroke-width:3;transform:scale(0);animation:pc-ok1 6s ease-in-out infinite}
.art-gate .g2 svg{animation-name:pc-ok2}
.art-gate .walker{position:absolute;top:62%;left:10%;display:grid;place-items:center;width:38px;height:38px;margin:-46px 0 0 -19px;border-radius:11px;background:var(--c);color:var(--hx-on);box-shadow:0 10px 20px -10px var(--c);animation:pc-walk 6s ease-in-out infinite}
.art-gate .walker svg{width:21px;height:21px}
.art-gate .end{position:absolute;right:7%;top:62%;margin-top:-40px;color:var(--hx-sub)}
.art-gate .end svg{width:32px;height:32px}
@keyframes pc-walk{0%{left:10%;opacity:0}6%{opacity:1}22%,40%{left:32%}60%,76%{left:60%}94%{left:88%;opacity:1}100%{left:88%;opacity:0}}
@keyframes pc-ok1{0%,26%{transform:scale(0)}31%,90%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes pc-ok2{0%,64%{transform:scale(0)}69%,90%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes pc-arm1{0%,32%{transform:rotate(0)}38%,90%{transform:rotate(-78deg)}100%{transform:rotate(0)}}
@keyframes pc-arm2{0%,70%{transform:rotate(0)}76%,90%{transform:rotate(-78deg)}100%{transform:rotate(0)}}
/* peek: a test site that keeps growing a version at a time */
.art-peek .win{position:absolute;left:14%;right:22%;top:18%;bottom:14%;display:flex;flex-direction:column;border-radius:12px;background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--c) 40%,var(--line));box-shadow:var(--hx-shadow);overflow:hidden}
.art-peek .bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;background:var(--hx-surface-2);border-bottom:1px solid var(--line-soft)}
.art-peek .bar>i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.art-peek .bar em{position:relative;margin-left:auto;width:34px;height:18px}
.art-peek .bar em b{position:absolute;inset:0;display:grid;place-items:center;border-radius:99px;background:var(--c);color:var(--hx-on);font:800 12px/1 var(--font-mono);opacity:0}
.art-peek .v1{animation:pc-v1 7.5s steps(1) infinite}.art-peek .v2{animation:pc-v2 7.5s steps(1) infinite}.art-peek .v3{animation:pc-v3 7.5s steps(1) infinite}
@keyframes pc-v1{0%{opacity:1}33.3%,100%{opacity:0}}
@keyframes pc-v2{0%{opacity:0}33.3%{opacity:1}66.6%,100%{opacity:0}}
@keyframes pc-v3{0%{opacity:0}66.6%{opacity:1}100%{opacity:1}}
.art-peek .body{flex:1;display:flex;flex-direction:column;gap:8px;padding:12px}
.art-peek .body i{border-radius:7px;background:color-mix(in srgb,var(--c) 22%,var(--hx-surface));transform-origin:left}
.art-peek .b1{height:30%}.art-peek .b2{height:16%;width:70%}.art-peek .b3{height:22%;width:85%}
.art-peek .b2{animation:pc-b2 7.5s ease infinite}.art-peek .b3{animation:pc-b3 7.5s ease infinite}
@keyframes pc-b2{0%,30%{transform:scaleX(0);opacity:0}38%,95%{transform:none;opacity:1}100%{opacity:0}}
@keyframes pc-b3{0%,63%{transform:scaleX(0);opacity:0}71%,95%{transform:none;opacity:1}100%{opacity:0}}
.art-peek .eye{position:absolute;right:10%;bottom:16%;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--hx-surface);border:2px solid var(--c);color:var(--c);box-shadow:0 12px 26px -12px var(--c);animation:pc-look 7.5s ease-in-out infinite}
.art-peek .eye svg{width:24px;height:24px;stroke-width:2}
@keyframes pc-look{0%,100%{transform:translate(0,0)}33%{transform:translate(-30px,-46px)}66%{transform:translate(-14px,-18px)}}
/* team: one team, four jobs orbiting it */
.art-team .core{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 60%);color:var(--hx-on);font-size:14px;font-weight:900;text-align:center;line-height:1.3;padding:12px;box-shadow:0 0 0 8px color-mix(in srgb,var(--c) 16%,transparent),0 16px 34px -14px var(--c)}
.art-team .orbit{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--c) 45%,var(--line));animation:pc-spin 26s linear infinite}
.art-team .orbit b{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(-75px)}
.art-team .orbit em{position:absolute;left:0;top:0;padding:5px 11px;border-radius:99px;background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--c) 50%,var(--line));color:var(--hx-text);font-size:13.5px;font-weight:800;white-space:nowrap;transform:translate(-50%,-50%) rotate(calc(var(--a) * -1));animation:pc-unspin 26s linear infinite}
@keyframes pc-spin{to{transform:rotate(360deg)}}
@keyframes pc-unspin{to{transform:translate(-50%,-50%) rotate(calc(var(--a) * -1 - 360deg))}}

/* ================= responsive ================= */
@media (max-width:1180px){
  .pc-frame{min-height:0}
  .pc-body{grid-template-columns:1fr;gap:30px;padding:42px 36px 30px}
  .pc-hero h1{font-size:clamp(34px,6cqw,56px)}
  .pc-map{height:420px}
  .pc-dl{grid-template-columns:1fr}
  .pc-pr{grid-template-columns:1fr 1fr}
  .pc-chaps{gap:8px}
}
@media (max-width:760px){
  .pc-wrap{padding-top:14px}
  .pc-hero{border-radius:14px}
  .pc-body{padding:28px 20px 20px;gap:22px}
  .pc-hero h1{font-size:clamp(30px,8.6cqw,40px)}
  .pc-hero h1 .g{font-size:.68em}
  .pc-now{margin-top:18px}
  .pc-hero .actions .action{flex:1 1 100%}
  .pc-map{height:400px;margin:0 -8px}
  .pc-node{width:84px;margin-left:-42px}
  .pc-node .lb{padding:2px 7px}
  .pc-card{width:150px;padding:8px 10px 10px 8px;gap:7px 9px}
  .pc-card .ic{width:32px;height:32px}
  .pc-card b{font-size:14.5px}
  .pc-chaps span{display:none}
  .pc-chaps button{pointer-events:none}
  .pc-bar{gap:14px;padding:6px 14px}
  .pc-x-panel{margin-left:0;padding:10px}
  .pc-tree .hx-win-body{columns:1;padding:20px}
  .pc-pr{grid-template-columns:1fr}
  .pc-x-nav .pc-step-btn{flex:1 1 40%}
  .pc-x-cols .col{padding:20px}
  .pc-x-body .what{font-size:16.5px}
  .pc-js .pc-x-meta{display:none}
  .pc-js .pc-x-body h3{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .pc-js .pc-x-body .what{margin-top:2px}
}
@media (prefers-reduced-motion:reduce){
  .pc-hero *,.pc-hero *::before,.pc-hero *::after,.pc-scn *,.pc-scn *::before,.pc-scn *::after,.pc-pr .art *,.pc-x-panel,.pc-x-panel *,.pc-x-scene{animation:none!important;transition:none!important}
  .pc-path .done,.pc-card .pg i{transition:none}
  #deliver .pc-tree :is(.fd,.fd li,.cursor),[data-reveal] .pc-pr-card{opacity:1;transform:none;transition:none}
  .art-peek .v3,.art-gate .g svg{opacity:1;transform:none}
  .art-gate .walker{left:88%}
}

/* ================= light theme ================= */
html[data-theme="light"] .pc-hero{box-shadow:0 30px 64px -42px rgba(15,40,70,.4),0 0 90px -60px var(--pcc)}
html[data-theme="light"] .pc-path .trk{stroke:color-mix(in srgb,var(--hx-text) 7%,transparent)}
html[data-theme="light"] .pc-path .flow{stroke:color-mix(in srgb,var(--hx-text) 26%,transparent)}
html[data-theme="light"] .pc-card{box-shadow:0 16px 34px -18px rgba(15,40,70,.45),0 0 0 4px color-mix(in srgb,var(--pcc) 12%,transparent)}
html[data-theme="light"] .pc-node .lb{background:color-mix(in srgb,var(--hx-stage) 88%,transparent)}
html[data-theme="light"] .pc-x-tab .dot{background:linear-gradient(150deg,color-mix(in srgb,var(--c) 70%,#fff) 0%,var(--c) 55%,color-mix(in srgb,var(--c) 85%,#000) 100%)}
html[data-theme="light"] .pc-x-tab .dot b{background:#fff}
html[data-theme="light"] .sc-launch .sw b{box-shadow:0 1px 4px rgba(15,40,70,.35)}
html[data-theme="light"] .sc-handover .cur{filter:drop-shadow(0 1px 1px rgba(15,40,70,.3))}