/* v2 · 12 "How we work" — three floating software layers (Applications / Logic / Data) driven by six stages.
   Real HTML text; the illustration is one crisp SVG drawn in an isometric projection. */
.hww{--bg:#2c2e94;--tx:#f8f7ff;--tx2:#d0ceff;--mu:#b4b2eb;--rule:rgba(208,206,255,.28);--mono:'JetBrains Mono',Consolas,'Courier New',monospace;
  position:relative;color:var(--tx);padding:96px 0 64px;overflow:hidden;
  background:radial-gradient(60% 55% at 72% 42%,rgba(98,104,240,.55),rgba(44,46,148,0) 70%),radial-gradient(40% 40% at 15% 20%,rgba(70,74,200,.35),transparent 70%),var(--bg)}
.hww-wrap{position:relative;max-width:1440px;margin:0 auto;padding:0 56px}
.hww-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head fig" "act fig";column-gap:24px;align-items:start}
.hww-head{grid-area:head}.hww-active{grid-area:act}.hww-fig{grid-area:fig;align-self:center}
.hww-eyebrow{margin:0 0 26px;font:600 11px/1 var(--mono);letter-spacing:.2em;color:var(--tx)}
.hww-title{margin:0;font-size:clamp(40px,4.3vw,64px);line-height:1.04;letter-spacing:-.045em;font-weight:500;color:var(--tx)}
.hww-title span{display:block;color:var(--tx2)}
.hww-intro{margin:22px 0 0;max-width:560px;font-size:16px;line-height:1.6;color:#e9e8ff}
.hww-active{position:relative;margin-top:58px;min-height:250px}
.hww-id{display:flex;align-items:center;gap:14px;font:500 11.5px/1 var(--mono);letter-spacing:.18em;color:var(--mu);text-transform:uppercase}
.hww-id::after{content:"";height:1px;width:110px;background:rgba(208,206,255,.45)}
.hww-h{margin:26px 0 0;font-size:clamp(32px,3.2vw,46px);line-height:1.08;letter-spacing:-.035em;font-weight:500;color:var(--tx);max-width:440px}
.hww-d{margin:18px 0 0;font-size:clamp(17px,1.45vw,21px);line-height:1.4;color:var(--tx2);max-width:420px}
.hww-c{margin:30px 0 0;font:500 10.5px/1.4 var(--mono);letter-spacing:.2em;color:#9f9de6;text-transform:uppercase}
.hww-active .sw{transition:opacity .2s ease,transform .2s ease}
.hww-active.swap .sw{opacity:0;transform:translateY(6px)}
/* the illustration */
.hww-fig{position:relative;margin:-24px -8px 0 0;aspect-ratio:860/650}
.hww-fig svg.hw-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hww-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hww-leader{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hww-leader path{fill:none;stroke:rgba(208,206,255,.5);stroke-width:1}
.hww-leader circle{fill:#f8f7ff}
/* stage row */
.hww-steps{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:28px}
.hww-step{appearance:none;background:none;border:0;border-top:1px solid var(--rule);color:inherit;text-align:left;padding:20px 0 6px;width:100%;cursor:pointer;font:inherit;position:relative;transition:border-color .28s ease}
.hww-step::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--tx);transform:scaleX(0);transform-origin:0 50%;transition:transform .28s ease}
.hww-step[aria-pressed="true"]::before{transform:none}
.hww-step:focus-visible{outline:2px solid #f8f7ff;outline-offset:6px;border-radius:2px}
.hww-step small{display:block;font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--mu)}
.hww-step b{display:block;margin-top:18px;font-size:19px;font-weight:500;letter-spacing:-.01em;color:#cfcdf6;transition:color .25s}
.hww-step span{display:block;margin-top:12px;font-size:14px;line-height:1.6;color:#c4c2ef}
.hww-step[aria-pressed="true"] b,.hww-step:hover b{color:var(--tx)}
.hww-foot{margin-top:40px;padding-top:22px;border-top:1px solid var(--rule);display:flex;align-items:center;gap:14px;font-size:14px;color:#dddcff}
.hww-foot svg{width:22px;height:16px;flex:none;fill:none;stroke:#b4b2eb;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---- SVG model ---- */
.hw-svg text{font-family:var(--mono)}
.hw-glass{fill:url(#hwGlass);stroke:rgba(236,236,255,.75);stroke-width:1.3}
.hw-edge{fill:rgba(126,130,226,.55)}
.hw-shadow{fill:rgba(16,18,90,.35);filter:url(#hwSoft)}
.hw-lbl{font-size:15px;letter-spacing:.24em;fill:#eef0ff;font-weight:600}
.hw-box{fill:rgba(222,224,255,.22);stroke:rgba(240,240,255,.55);stroke-width:1}
.hw-line{fill:rgba(240,240,255,.62)}
.hw-line.b{fill:rgba(255,255,255,.9)}
.hw-node{fill:rgba(225,227,255,.42);stroke:rgba(255,255,255,.75);stroke-width:1}
.hw-node.dn{fill:rgba(240,240,255,.55)}
.hw-path{fill:none;stroke:rgba(240,240,255,.7);stroke-width:1.6;stroke-linecap:round}
.hw-row line{stroke:rgba(240,240,255,.22);stroke-width:1}
.hw-dot{fill:rgba(255,255,255,.75)}
.hw-team{font-size:11px;letter-spacing:.14em;fill:#fff}
.hw-tm{opacity:0;transition:opacity .5s}
.hw-reg{transition:fill .5s,stroke .5s}
.hw-reg.lit{fill:rgba(255,255,255,.42);stroke:#fff}
.hw-row-hl{fill:rgba(255,255,255,0);transition:fill .6s}
.hw-row-hl.lit{fill:rgba(255,255,255,.22)}
/* connections between layers (screen space) */
.hw-cx{fill:none;stroke:rgba(248,247,255,.85);stroke-width:2;stroke-linecap:round;transition:opacity .6s,stroke-dasharray .6s}
.hw-cx.glow{filter:url(#hwGlow)}
.hw-pt{fill:#fff8ef;filter:url(#hwGlow);transition:opacity .5s}
.hw-sig{fill:#fffaf0;filter:url(#hwGlowBig);opacity:0}
.hw-pill rect{fill:rgba(44,46,148,.55);stroke:rgba(248,247,255,.8);stroke-width:1}
.hw-pill text{font-size:12px;fill:#fff;letter-spacing:.06em;text-anchor:middle}
.hw-anch,.hw-fb,.hw-messy,.hw-direct,.hw-scan{transition:opacity .6s}
/* stage states — all through one attribute so every change is a transition from the current look */
.hw-svg .det{transition:opacity .7s}
.hw-svg[data-s="1"] .det{opacity:.35}
.hw-svg[data-s="1"] .hw-reg{fill:none}
.hw-svg .hw-messy{opacity:0}.hw-svg[data-s="1"] .hw-messy{opacity:.75}
.hw-svg[data-s="1"] .hw-clean{opacity:.25}
.hw-svg .hw-clean{transition:opacity .7s}
.hw-svg .hw-direct{opacity:0}.hw-svg.refined .hw-direct{opacity:1}
.hw-svg.refined .hw-detour{opacity:0}
.hw-svg .hw-detour{transition:opacity .8s}
.hw-svg .hw-dn{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.hw-svg.refined .hw-dn{transform:translate(-14px,6px)}
.hw-svg .hw-anch{opacity:0}.hw-svg[data-s="4"] .hw-anch{opacity:1}
.hw-svg .hw-fb{opacity:0}.hw-svg[data-s="6"] .hw-fb{opacity:1}
.hw-svg[data-s="5"] .hw-tm{opacity:1}
.hw-svg .hw-api{transition:opacity .6s}.hw-svg[data-s="1"] .hw-api{opacity:0}
.hw-svg[data-s="1"] .hw-cx{stroke-dasharray:6 7;opacity:.55}
.hw-svg[data-s="1"] .hw-cx.c3,.hw-svg[data-s="1"] .hw-cx.c4{opacity:0}
.hw-svg[data-s="2"] .hw-cx.c3,.hw-svg[data-s="2"] .hw-cx.c4{opacity:.45}
.hw-svg .hw-gap{opacity:0;transition:opacity .5s}.hw-svg[data-s="1"] .hw-gap{opacity:1}
.hw-gap circle{fill:none;stroke:#ffd9d4;stroke-width:1.4}

/* responsive */
@media(max-width:1100px){.hww-wrap{padding:0 32px}.hww-steps{column-gap:20px}.hww-step b{font-size:17px}}
@media(max-width:900px){
  .hww{padding:72px 0 56px}
  .hww-grid{grid-template-columns:1fr;grid-template-areas:"head" "fig" "act"}
  .hww-fig{margin:28px 0 0}.hww-active{margin-top:28px;min-height:0}
  .hww-leader{display:none}
  .hww-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px}
  .hww-id::after{width:60px}
}
@media(max-width:760px){.hww-wrap{padding:0 20px}}
@media(max-width:420px){.hww-steps{grid-template-columns:1fr}.hww-title br{display:none}}
@media(prefers-reduced-motion:reduce){.hww *,.hww *::before{transition:none!important;animation:none!important}}

/* glass layers: frosted, with a soft top sheen; connections pass through holes in the glass */
.hw-glass{fill:url(#hwGlass);stroke:rgba(240,240,255,.7);stroke-width:1.2}
.hw-sheen{fill:none;stroke:rgba(255,255,255,.35);stroke-width:2}
.hw-hole{fill:rgba(24,26,110,.55)}
.hw-rim{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.3}
.hw-port{transition:opacity .6s}
/* links are hidden until the layers have arrived, then draw in */
.hw-svg .hw-links .hw-cx{transition:opacity .8s,stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1),stroke-dasharray .6s}
.hw-svg:not(.linked) .hw-links .hw-cx{opacity:0}
.hw-svg:not(.linked) .hw-port{opacity:0}
.hw-svg:not(.linked) .hw-api{opacity:0}