/* ───────── HOW IT WORKS ───────── */
.how{position:relative;max-width:1440px;margin:0 auto;padding:clamp(72px,10vw,140px) clamp(16px,4vw,56px) clamp(64px,8vw,120px)}
.how-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-bottom:28px}
.how-eyebrow{font:500 12px "JetBrains Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--au)}
.how h2{margin-top:14px;font:800 clamp(34px,4.6vw,64px)/1.02 "Sora",sans-serif;letter-spacing:-.035em;color:var(--ink)}
.how h2 em{font-style:normal;background:linear-gradient(100deg,var(--cu-hi),var(--cu) 25%,var(--ag) 50%,var(--au) 75%,var(--au-hi));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.how-head p{max-width:470px;margin-top:14px;color:#b7b1a8;font-size:16px;line-height:1.65;font-weight:300}
.how-ctrl{display:flex;align-items:center;gap:12px}
.how-cycle{font:500 12px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.how-cycle b{color:var(--ink);font-weight:500}
.how-play{all:unset;box-sizing:border-box;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);transition:background .2s}
.how-play:hover{background:rgba(255,255,255,.1)}
.how-play:focus-visible,.how-step button:focus-visible{outline:2px solid var(--au);outline-offset:3px}
.how-play svg{width:16px;height:16px}

/* stage */
.how-stage{position:relative;border-radius:24px;overflow:hidden;
  background:radial-gradient(60% 80% at 50% 40%,rgba(233,185,73,.06),transparent 70%),linear-gradient(180deg,#101015,#0a0a0d);
  box-shadow:inset 0 0 0 1px var(--line),0 40px 120px -40px rgba(0,0,0,.9)}
.how-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:24px 24px;
  -webkit-mask:radial-gradient(80% 80% at 50% 50%,#000,transparent);mask:radial-gradient(80% 80% at 50% 50%,#000,transparent)}
.how-scroll{position:relative;overflow-x:auto;scrollbar-width:none}
.how-scroll::-webkit-scrollbar{display:none}
#howSvg{display:block;width:100%;height:auto}
.stage-cap{position:absolute;z-index:2;top:20px;left:22px;max-width:250px;pointer-events:none}
.stage-cap .n{font:500 11px "JetBrains Mono",monospace;letter-spacing:.18em;color:var(--au)}
.stage-cap .t{display:block;margin-top:6px;font:700 20px/1.2 "Sora",sans-serif;color:var(--ink);letter-spacing:-.01em;transition:opacity .3s}
.swipe-hint{display:none}

/* svg primitives */
#howSvg text{font-family:"Sora",sans-serif}
#howSvg [data-on]{transition:opacity .6s ease}
#howSvg .dim{opacity:.2}
#howSvg .hw-agent.dim{opacity:.55}
.track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flow{fill:none;stroke:#f2e6d0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 10;animation:hwDash .9s linear infinite;opacity:.75}
.flow.dim{opacity:0!important}
.flow.c-au{stroke:#e9b949}.flow.c-ag{stroke:#c9ced6}.flow.c-cu{stroke:#d9875a}.flow.c-burn{stroke:#ff8a4c}
@keyframes hwDash{to{stroke-dashoffset:-12}}
.plabel{font-size:13px;font-weight:700}
.plabel.au{fill:#e9b949}.plabel.ag{fill:#c9ced6}.plabel.cu{fill:#d9875a}.plabel.burn{fill:#ff8a4c}

.node .ring{fill:#121217;stroke:url(#hwMetal);stroke-width:1.5}
.node .halo{fill:none;stroke:rgba(233,185,73,.22);stroke-width:1;transform-box:fill-box;transform-origin:center}
.node:not(.dim) .halo{animation:hwHalo 2.6s ease-out infinite}
@keyframes hwHalo{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.25);opacity:0}}
.node.ping .ring{stroke-width:3.5;filter:url(#hwGlow)}
.ico{fill:none;stroke:#f2efe9;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lbl{fill:#f2efe9;font-size:15px;font-weight:600;text-anchor:middle}
.sub{fill:#8a857d;font-size:11px;text-anchor:middle;font-family:"JetBrains Mono",monospace!important}

.vault{fill:#0f0f14;stroke:rgba(255,255,255,.12)}
.treasury.ping .vault{stroke:#d9875a;stroke-width:2}
.guard{fill:none;stroke:rgba(201,206,214,.35);stroke-width:1.2;stroke-dasharray:6 6;transition:stroke .3s}
.guard-lbl{fill:#8a857d;font-size:10px;letter-spacing:.14em;font-family:"JetBrains Mono",monospace!important}
.guard.block{stroke:#ff5a4c;stroke-width:2.2;stroke-dasharray:none;filter:url(#hwGlow)}
.guard-lbl.block{fill:#ff6b5c}
.cap{stroke:rgba(255,255,255,.28);stroke-dasharray:3 5}
.cap-lbl{fill:#8a857d;font-size:10px;font-family:"JetBrains Mono",monospace!important}
.cap.block{stroke:#ff5a4c;stroke-dasharray:none}
.bar-pct{fill:#f2efe9;font-size:12px;font-weight:700;text-anchor:middle}
.bar-sym{fill:#8a857d;font-size:11px;font-weight:600;text-anchor:middle}
.ghost{fill:rgba(255,90,76,.14);stroke:#ff5a4c;stroke-dasharray:4 4;opacity:0;transition:opacity .3s}
.ghost.on{opacity:1}

.hw-agent .a-orbit{fill:none;stroke:rgba(233,185,73,.45);stroke-width:1.2;stroke-dasharray:2 7}
.hw-agent .a-orbit2{fill:none;stroke:rgba(255,255,255,.08);stroke-width:1}
.hw-agent .a-hex{fill:#121217;stroke:url(#hwMetal);stroke-width:2}
.hw-agent .a-net line{stroke:rgba(233,185,73,.45);stroke-width:1}
.hw-agent .a-net circle{fill:#e9b949;animation:hwBlink 2s ease-in-out infinite}
.hw-agent .a-net circle:nth-child(2n){animation-delay:-.7s}.hw-agent .a-net circle:nth-child(3n){animation-delay:-1.3s}
@keyframes hwBlink{50%{opacity:.25}}
.hw-agent .a-eye{fill:url(#hwCore);filter:url(#hwGlow)}
.hw-agent .a-state{fill:#7fe0b0;font-size:11px;text-anchor:middle;font-family:"JetBrains Mono",monospace!important}
.hw-agent[data-mode="block"] .a-state{fill:#ff6b5c}
.hw-agent[data-mode="exec"] .a-state,.hw-agent[data-mode="scan"] .a-state{fill:#ffe08a}
.hw-agent[data-mode="block"] .a-hex{stroke:#ff5a4c}
.agent-title{fill:#f2efe9;font-size:15px;font-weight:700;text-anchor:middle}

.beam{stroke:#ffe08a;stroke-width:1.6;stroke-dasharray:5 6;animation:hwDash .5s linear infinite;filter:url(#hwGlow)}
.beam.red{stroke:#ff5a4c}
.arc{fill:none;stroke-width:1.2;stroke-dasharray:3 6;opacity:.6}
.chip rect{fill:rgba(18,18,24,.92);stroke:rgba(233,185,73,.4)}
.chip text{fill:#f2efe9;font-size:11px;text-anchor:middle;dominant-baseline:central;font-family:"JetBrains Mono",monospace!important}

.holder-c{fill:#16161c;stroke:rgba(233,185,73,.55);stroke-width:1.2;transition:fill .25s}
.holder-g{fill:none;stroke:#cfc8bb;stroke-width:1.5;stroke-linecap:round}
.holder.hit .holder-c{fill:#e9b949;filter:url(#hwGlow)}
.holder.hit .holder-g{stroke:#1a1206}
.flame-o{fill:url(#hwFlame)}
.flame-i{fill:#ffe08a;opacity:.9}
.burn-n.flare .flame-o{filter:url(#hwGlow)}
.burn-n .flame{transform-box:fill-box;transform-origin:50% 100%;transition:transform .15s}
.burn-n.flare .flame{transform:scale(1.35)}
.supply-bg{fill:rgba(255,255,255,.08)}
.supply-fg{fill:#ff8a4c;transition:width .4s}

/* bottom: steps + console */
.how-bottom{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;margin-top:14px}
.how-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0;padding:0}
.how-step button{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;height:100%;width:100%;
  padding:18px 18px 22px;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--line);
  transition:background .3s,box-shadow .3s}
.how-step button:hover{background:rgba(255,255,255,.05)}
.how-step .n,.how-step .t,.how-step .d{display:block}
.how-step .n{font:500 11px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--muted)}
.how-step .t{margin-top:8px;font:600 16px/1.3 "Sora",sans-serif;color:var(--ink)}
.how-step .d{margin-top:8px;font-size:13.5px;line-height:1.55;color:#9f998f}
.how-step .prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.05)}
.how-step .prog i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--cu),var(--ag),var(--au))}
.how-step.active button{background:rgba(233,185,73,.07);box-shadow:inset 0 0 0 1px rgba(233,185,73,.4)}
.how-step.active .n{color:var(--au)}
.how-step.done .prog i{transform:scaleX(1);opacity:.35}

.agent-console{padding:16px 18px;border-radius:16px;background:linear-gradient(180deg,rgba(20,20,26,.9),rgba(12,12,16,.9));
  box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:12px;min-width:0}
.ac-head{display:flex;align-items:center;gap:12px}
.ac-avatar{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--cu),var(--au));color:#1a1206;font:800 13px "Sora"}
.ac-head b{display:block;font:600 14px "Sora";color:var(--ink)}
.ac-state{display:inline-flex;align-items:center;gap:6px;font:500 11px "JetBrains Mono",monospace;color:#7fe0b0;margin-top:2px}
.ac-state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.ac-state[data-mode="scan"],.ac-state[data-mode="exec"]{color:#ffe08a}
.ac-state[data-mode="block"]{color:#ff6b5c}
.ac-tag{margin-left:auto;font:500 9px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:99px;
  background:rgba(255,255,255,.06);color:#bdb6aa}
.ac-powers{display:flex;flex-wrap:wrap;gap:6px}
.ac-powers span{font:500 11px "JetBrains Mono",monospace;padding:5px 10px;border-radius:99px;color:var(--muted);
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line);transition:all .3s}
.ac-powers span.on{color:#1a1206;background:var(--au);box-shadow:0 0 18px rgba(233,185,73,.45)}
.ac-powers span.lim.on{background:#ff5a4c;color:#fff;box-shadow:0 0 18px rgba(255,90,76,.45)}
.ac-log{font:400 12px/1.75 "JetBrains Mono",monospace;color:#d6d0c6;height:128px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  -webkit-mask:linear-gradient(transparent,#000 35%);mask:linear-gradient(transparent,#000 35%)}
.ac-log div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:hwIn .4s ease-out}
.ac-log .k{color:var(--au)}.ac-log .g{color:#7fe0b0}.ac-log .r{color:#ff6b5c}.ac-log .c{color:var(--cu-hi)}.ac-log .m{color:var(--muted)}
@keyframes hwIn{from{opacity:0;transform:translateY(6px)}}
.ac-rules{font-size:11.5px;line-height:1.5;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.ac-rules b{color:#cfc8bb;font-weight:600}

@media (max-width:1100px){
  .how-bottom{grid-template-columns:1fr}
}
@media (max-width:900px){
  #howSvg{width:900px;max-width:none}
  .how-steps{grid-template-columns:1fr 1fr}
  .stage-cap{position:relative;top:auto;left:auto;max-width:none;padding:16px 16px 0}
  .stage-cap .t{font-size:15px}
  .swipe-hint{display:block;position:absolute;right:14px;top:14px;z-index:2;font:500 10px "JetBrains Mono",monospace;letter-spacing:.14em;
    color:var(--muted);text-transform:uppercase;pointer-events:none}
}
@media (max-width:560px){
  .how-steps{grid-template-columns:1fr}
  .how-step .d{display:none}
  .how-step.active .d{display:block}
}
@media (prefers-reduced-motion:reduce){
  .flow,.node .halo,.beam,.hw-agent .a-net circle{animation:none!important}
}

/* ── Desktop: whole section fits one screen ── */
@media (min-width:1101px) and (min-height:600px){
  .how{height:100svh;min-height:600px;display:grid;grid-template-columns:minmax(0,1fr) 330px;
       grid-template-rows:auto minmax(0,1fr) auto;gap:14px;padding-top:28px;padding-bottom:28px}
  .how-head{grid-column:1/-1;margin-bottom:4px;align-items:center;flex-wrap:nowrap}
  .how-head>div:first-child{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:48px;align-items:end}
  .how-eyebrow{grid-column:1;grid-row:1}
  .how h2{grid-column:1;grid-row:2;white-space:nowrap}
  .how-head p{grid-column:2;grid-row:1/span 2;align-self:end;margin:0;max-width:560px;font-size:14.5px;line-height:1.55}
  .how h2{margin-top:8px;font-size:clamp(28px,2.6vw,42px)}
  .how h2 br{display:none}
  .how-bottom{display:contents}
  .how-stage{grid-column:1;grid-row:2;min-height:0;display:flex}
  .how-scroll{flex:1;min-height:0;display:flex}
  #howSvg{width:100%;height:100%}
  .agent-console{grid-column:2;grid-row:2;min-height:0}
  .ac-log{flex:1;height:auto;min-height:60px}
  .how-steps{grid-column:1/-1;grid-row:3}
  .how-step button{padding:14px 16px 16px}
  .how-step .t{margin-top:6px;font-size:15px}
  .how-step .d{margin-top:6px;font-size:13px;line-height:1.5}
}
.how-cycle{white-space:nowrap}
@media (min-width:1101px) and (min-height:600px){
  .stage-cap{top:auto;left:auto;right:24px;bottom:20px;text-align:right;max-width:280px}
}