/* ═══════════════════════════════════════════════════════════════════════════
   Fusion Labs — styles.css
   Sections: tokens · base · buttons · nav · hero · about · services ·
   capabilities · system · security · work · dialog · process · why ·
   contact · footer · pages · cursor · motion
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fonts (self-hosted, SIL OFL — see assets/fonts/LICENSE-OFL.txt) */
@font-face{font-family:"Geist";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/geist-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/geist-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/geist-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/geist-mono-latin-500-normal.woff2) format("woff2")}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root{
  color-scheme:dark;
  --bg:#07080A; --bg-2:#0B0C0F; --bg-3:#111317; --bg-4:#171A1F;
  /* section + surface system: base sections sit on --bg, graphite bands on --bg-band,
     cards one step above whatever they sit on, footer on --bg-deep */
  --bg-band:#0F1115; --bg-deep:#040506; --surface-low:#0D0F12; --surface:#13161B; --edge:rgba(233,231,226,.11);
  --shadow-1:0 1px 0 rgba(233,231,226,.035) inset,0 18px 40px -24px rgba(0,0,0,.8);
  --shadow-2:0 1px 0 rgba(233,231,226,.05) inset,0 30px 60px -30px rgba(0,0,0,.9);
  --fg:#E9E7E2; --fg-soft:rgba(233,231,226,.7); --fg-mute:rgba(233,231,226,.6); --fg-faint:rgba(233,231,226,.16);
  --line:rgba(233,231,226,.08); --line-2:rgba(233,231,226,.16); --line-3:rgba(233,231,226,.28);
  --accent:#4C74FF; --accent-fill:#3D63F0; --accent-soft:rgba(76,116,255,.14); --ok:#59D49B; --err:#F09A86;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-hero:clamp(3.4rem,12.2vw,13.4rem); --fs-h2:clamp(2.4rem,6.6vw,7rem); --fs-lead:clamp(1.05rem,1.35vw,1.3rem);
  --gutter:clamp(16px,4vw,64px); --maxw:1560px; --nav-h:76px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.76,0,.24,1);
  --r:4px; --r-2:10px;
  --z-cursor:900; --z-dialog:600; --z-nav:100; --z-menu:95;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--nav-h) + 10px);background:var(--bg)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:1rem;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;font-feature-settings:"ss01","cv11"}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{list-style:none;padding:0}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-100px;z-index:1000;background:var(--fg);color:var(--bg);padding:12px 18px;font-weight:600;border-radius:var(--r)}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:clamp(88px,12vw,190px)}
.section--alt{background:linear-gradient(180deg,rgba(233,231,226,.022),transparent 260px),var(--bg-band);border-block:1px solid var(--edge)}
/* two sections that form one chapter share a band, split by an inner rule */
.section--open{border-bottom:0}
.section--cont{padding-top:0;border-top:0;background:var(--bg-band)}
.section--cont .shead{border-top:1px solid var(--line-2);padding-top:clamp(64px,8vw,120px)}
/* security: faint accent light behind the visual */
.section--glow{background:radial-gradient(ellipse 55% 45% at 22% 50%,rgba(76,116,255,.075),transparent 70%),linear-gradient(180deg,rgba(233,231,226,.022),transparent 260px),var(--bg-band)}
@media (max-width:999px){.section--glow{background:radial-gradient(ellipse 90% 30% at 50% 22%,rgba(76,116,255,.08),transparent 70%),linear-gradient(180deg,rgba(233,231,226,.022),transparent 260px),var(--bg-band)}}
/* contact: the conversion point gets an accent edge and top light */
.section--cta{background:radial-gradient(ellipse 70% 320px at 50% 0,rgba(76,116,255,.085),transparent 75%),var(--bg-band)}
.section--cta::before{content:"";position:absolute;inset:-1px 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(76,116,255,.55) 30%,rgba(76,116,255,.55) 70%,transparent)}

/* Type */
.display{font-weight:500;letter-spacing:-.05em;line-height:.92}
.h2{font-size:var(--fs-h2);margin-top:26px;overflow-wrap:break-word}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.lead{font-size:var(--fs-lead);color:var(--fg-soft);line-height:1.55;max-width:46ch}
.muted{color:var(--fg-mute)}
.accent{color:var(--accent)}
.line-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line-mask>span{display:block}
.shead{display:grid;gap:26px;margin-bottom:clamp(48px,7vw,110px)}
.slabel{display:flex;align-items:center;gap:14px;color:var(--fg-mute)}
.slabel b{color:var(--accent);font-weight:500;font-variant-numeric:tabular-nums}
.slabel i{flex:0 0 40px;height:1px;background:linear-gradient(90deg,var(--accent),var(--line-3))}
@media (min-width:980px){.shead{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:end;gap:64px}}

/* ── Buttons & links ────────────────────────────────────────────────────── */
.btn{--bb:var(--fg);--bf:var(--bg);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:0 10px 0 24px;border-radius:999px;background:var(--bb);color:var(--bf);font-weight:500;font-size:.98rem;letter-spacing:-.01em;white-space:nowrap;transition:transform .5s var(--ease),color .4s,opacity .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent-fill);border-radius:inherit;transform:translateY(102%);transition:transform .6s var(--ease)}
.btn:hover,.btn:focus-visible{color:#fff}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:active{transform:scale(.98)}
.btn__ic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);color:var(--fg);overflow:hidden;position:relative;transition:background .4s}
.btn:hover .btn__ic{background:rgba(255,255,255,.16)}
.btn__ic svg{transition:transform .55s var(--ease)}
.btn__ic svg+svg{position:absolute;transform:translateX(-160%)}
.btn:hover .btn__ic svg:first-child{transform:translateX(160%)}
.btn:hover .btn__ic svg+svg{transform:none}
.btn--ghost{--bb:transparent;--bf:var(--fg);box-shadow:inset 0 0 0 1px var(--line-3);padding:0 24px}
.btn--ghost::before{background:var(--fg)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--bg)}
.btn[aria-disabled="true"]{opacity:.6;cursor:progress}
.tlink{position:relative;display:inline-flex;align-items:center;gap:10px;padding:8px 0;min-height:44px;font-weight:500}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform-origin:right;transition:transform .6s var(--ease)}
.tlink:hover::after{transform:scaleX(0)}
.tlink svg{transition:transform .5s var(--ease)}
.tlink:hover svg{transform:translateX(5px)}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:var(--z-nav);height:var(--nav-h);transition:height .5s var(--ease),background-color .5s}
.nav.is-solid{--nav-h:62px;background:rgba(7,8,10,.82);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.nav__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:inline-flex;align-items:center;gap:12px;font-weight:600;letter-spacing:-.02em;font-size:1.06rem;min-height:44px}
.logo svg{flex:none}
.logo small{font-family:var(--mono);font-weight:400;font-size:.62rem;letter-spacing:.1em;color:var(--fg-mute);text-transform:uppercase;border-left:1px solid var(--line-2);padding-left:12px;display:none}
@media (min-width:1240px){.logo small{display:inline}}
.nav__links{position:relative;display:none;gap:4px;padding:5px;border-radius:999px;background:rgba(233,231,226,.04);box-shadow:inset 0 0 0 1px var(--line)}
.nav__links a{position:relative;z-index:1;display:block;padding:8px 16px;border-radius:999px;font-size:.88rem;color:var(--fg-soft);transition:color .3s}
.nav__links a:hover,.nav__links a[aria-current="true"]{color:var(--fg)}
.nav__ind{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:rgba(233,231,226,.08);box-shadow:inset 0 0 0 1px var(--line-2);opacity:0;transition:transform .6s var(--ease),width .6s var(--ease),opacity .4s;pointer-events:none}
.nav__act{display:flex;gap:10px;align-items:center}
.nav .btn{display:none;min-height:46px;font-size:.9rem;padding:0 6px 0 18px}
.nav .btn .btn__ic{width:34px;height:34px}
.burger{position:relative;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2)}
.burger i{position:absolute;width:18px;height:1.5px;background:currentColor;transition:transform .5s var(--ease)}
.burger i:first-child{transform:translateY(-3.5px)}.burger i:last-child{transform:translateY(3.5px)}
.burger[aria-expanded="true"] i:first-child{transform:rotate(45deg)}.burger[aria-expanded="true"] i:last-child{transform:rotate(-45deg)}
.nav__prog{position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
@media (min-width:1000px){.nav__links{display:flex}.nav .btn{display:inline-flex}.burger{display:none}}
.mnav{position:fixed;inset:0;z-index:var(--z-menu);background:var(--bg);padding:calc(var(--nav-h) + 24px) var(--gutter) calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:space-between;gap:24px;overflow-y:auto;overscroll-behavior:contain;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .7s var(--ease-io),visibility 0s .7s}
.mnav.is-open{clip-path:inset(0);visibility:visible;transition:clip-path .7s var(--ease-io)}
.mnav__list li{overflow:hidden;border-bottom:1px solid var(--line)}
.mnav__list a{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;font-size:clamp(2.2rem,10vw,3.6rem);font-weight:500;letter-spacing:-.045em;line-height:1.08;transform:translateY(105%);transition:transform .8s var(--ease)}
.mnav__list a small{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--fg-mute)}
.mnav.is-open .mnav__list a{transform:none}
.mnav__list li:nth-child(2) a{transition-delay:.04s}.mnav__list li:nth-child(3) a{transition-delay:.08s}.mnav__list li:nth-child(4) a{transition-delay:.12s}.mnav__list li:nth-child(5) a{transition-delay:.16s}
.mnav__foot{display:grid;gap:14px}
@media (min-width:1000px){.mnav{display:none}}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.hero__canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 70% at 30% 70%,rgba(7,8,10,.85),rgba(7,8,10,.25) 60%,transparent),linear-gradient(180deg,transparent 70%,var(--bg))}
.hero__in{flex:1;display:grid;grid-template-rows:auto 1fr auto;padding-top:calc(var(--nav-h) + 22px);padding-bottom:24px}
.hero__top{display:flex;justify-content:space-between;gap:16px;color:var(--fg-mute)}
.hero__top span:last-child{display:none}
.hero__main{align-self:end;display:grid;gap:28px;padding-bottom:clamp(28px,5vh,56px)}
.hero__title{font-size:var(--fs-hero);letter-spacing:-.065em;line-height:.86;font-weight:500}
.hero__title .acc{color:var(--accent)}
.hero__sub{display:grid;gap:26px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero__bar{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;border-top:1px solid var(--line-2);padding-top:16px;color:var(--fg-mute)}
.hero__bar .ok{display:inline-flex;align-items:center;gap:10px;color:var(--fg-soft)}
.hero__bar .ok i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
@media (min-width:760px){.hero__top span:last-child{display:inline}}
@media (min-width:1000px){.hero__sub{grid-template-columns:minmax(0,1fr) auto;align-items:end}}
@media (max-width:420px){.hero__ctas .btn{flex:1 1 100%}}

/* ── About (normal document flow — no pinning) ──────────────────────────── */
.about__q{font-size:clamp(2.2rem,6vw,6.4rem);letter-spacing:-.055em;line-height:.96;font-weight:500;max-width:17ch;margin-top:30px}
.about__list{margin-top:clamp(28px,4vw,56px);display:grid;gap:4px}
.about__list li{font-size:clamp(1.45rem,3.4vw,3.4rem);letter-spacing:-.045em;line-height:1.12;color:var(--fg);transition:color .8s var(--ease)}
.about__list li::before{content:"";display:inline-block;width:.38em;height:.38em;margin-right:.4em;border-radius:50%;background:var(--accent);vertical-align:.16em;transition:background .8s var(--ease)}
.js-motion .about__list li:not(.is-on){color:var(--fg-faint)}
.js-motion .about__list li:not(.is-on)::before{background:var(--fg-faint)}
.about__end{margin-top:clamp(28px,4vw,56px);font-size:var(--fs-lead);color:var(--fg-soft);max-width:56ch}
.about__end b{font-weight:500;color:var(--fg)}

/* ── Services / two departments ─────────────────────────────────────────── */
.worlds{display:grid;gap:12px;grid-template-columns:1fr}
.world{position:relative;overflow:hidden;min-height:clamp(460px,70vh,780px);border-radius:var(--r-2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-1);transition:box-shadow .5s var(--ease);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,3vw,44px);isolation:isolate}
.world__viz{position:absolute;inset:0;z-index:-1;opacity:.85;transition:opacity .8s var(--ease)}
.world__viz svg{width:100%;height:100%}
.world::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(19,22,27,0) 25%,rgba(19,22,27,.96) 72%)}
.world__top{display:flex;justify-content:space-between;gap:12px;color:var(--fg-mute)}
.world__name{font-size:clamp(2.4rem,5.2vw,5.6rem);letter-spacing:-.06em;line-height:.92;font-weight:500}
.world__text{color:var(--fg-soft);max-width:40ch;font-size:1.05rem;margin-top:16px}
.world__list{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px}
.world__list li{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-soft)}
.world__list li::before{content:"/ ";color:var(--accent)}
.world .tlink{margin-top:18px;color:var(--fg)}
.world:hover .world__viz,.world:focus-within .world__viz{opacity:1}
.world:hover,.world:focus-within{box-shadow:inset 0 0 0 1px var(--line-3),var(--shadow-2)}
@media (max-width:640px){.world{min-height:0}.world__viz{bottom:auto;height:300px}.world>div:last-child{margin-top:210px}}
@media (min-width:1000px){
  .worlds{grid-template-columns:1fr 1fr;transition:grid-template-columns .9s var(--ease)}
  .worlds[data-focus="dev"]{grid-template-columns:1.25fr .75fr}
  .worlds[data-focus="sec"]{grid-template-columns:.75fr 1.25fr}
}
/* department illustrations — paused when off-screen (see .is-idle) */
.dv-win{opacity:.6;transition:opacity .8s var(--ease)}
.world:hover .dv-win,.world.is-auto .dv-win{opacity:1}
.dv-bar{transform-box:fill-box;transform-origin:bottom;animation:bar 3.6s var(--ease-io) infinite alternate}
@keyframes bar{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.dv-type{stroke-dasharray:1;stroke-dashoffset:1;animation:type 4s var(--ease) infinite}
@keyframes type{0%{stroke-dashoffset:1}40%,100%{stroke-dashoffset:0}}
.dv-cursor{animation:blink 1.1s steps(2) infinite}
@keyframes blink{to{opacity:0}}
.sv-ring{transform-box:fill-box;transform-origin:center;animation:spin 40s linear infinite}
.sv-ring.r2{animation-duration:70s;animation-direction:reverse}
.sv-sweep{transform-box:view-box;transform-origin:50% 46%;animation:spin 6s linear infinite}
.sv-node{animation:nodeblink 4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes nodeblink{50%{opacity:.25}}

/* ── Capabilities (accordion + desktop diagram viewer) ──────────────────── */
.caps{display:grid;gap:28px}
.caps>*{min-width:0}
.caps__list{border-top:1px solid var(--line-2)}
.caps__group{padding:26px 0 6px;color:var(--fg-mute);border-bottom:1px solid var(--line)}
.caps__group:not(:first-child){margin-top:20px}
.cap{border-bottom:1px solid var(--line)}
.cap__btn{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:20px 0;text-align:left;min-height:48px}
.cap__n{font-family:var(--mono);font-size:.72rem;color:var(--fg-mute)}
.cap__t{display:block;font-size:clamp(1.45rem,2.6vw,2.6rem);letter-spacing:-.05em;font-weight:500;line-height:1.02;color:var(--fg-soft);transition:color .4s,transform .7s var(--ease)}
.cap__s{display:block;font-size:.9rem;letter-spacing:0;color:var(--fg-mute);font-weight:400;margin-top:8px}
.cap__ar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--fg-mute);transition:transform .5s var(--ease),background .4s,color .4s,box-shadow .4s}
.cap__ar svg{transform:rotate(90deg)}
.cap__btn:hover .cap__t,.cap.is-open .cap__t{color:var(--fg)}
.cap.is-open .cap__ar{background:var(--accent-fill);box-shadow:none;color:#fff;transform:rotate(180deg)}
.cap.is-open .cap__t{transform:translateX(6px)}
.cap__body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .6s var(--ease)}
.cap__clip{overflow:hidden;min-height:0}
.cap__inner{display:grid;gap:16px;padding:0 0 26px 52px}
.cap__inner p{color:var(--fg-soft);max-width:58ch}
.js .cap:not(.is-open) .cap__body{grid-template-rows:0fr}
.js .cap:not(.is-open) .cap__clip{visibility:hidden;transition:visibility 0s .6s}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;padding:7px 10px;border:1px solid var(--line-2);border-radius:var(--r);color:var(--fg-soft)}
@media (max-width:520px){.cap__inner{padding-left:0}}
.viewer{display:none;position:relative;border-radius:var(--r-2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-1);overflow:hidden}
.viewer__head{min-width:0;white-space:nowrap;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--fg-mute)}
.viewer__head [data-v-path]{overflow:hidden;text-overflow:ellipsis;min-width:0}
.viewer__dots{display:flex;gap:6px}.viewer__dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.viewer__stage{position:relative;aspect-ratio:16/10;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px;background-position:center}
.viewer__stage svg{position:absolute;inset:0;width:100%;height:100%}
.viewer__foot{padding:16px 18px;border-top:1px solid var(--line);color:var(--fg-mute)}
.vn{transition:transform 1s var(--ease),opacity .5s}
.vn rect{fill:var(--bg-3);stroke:var(--line-3)}
.vn.is-hot rect{stroke:var(--accent);fill:#0E1424}
.vn text{fill:var(--fg-soft);font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.vn.is-hot text{fill:var(--fg)}
.vn.is-off{opacity:0}
.vl{stroke:var(--line-3);fill:none;stroke-width:1}
.vl.is-hot{stroke:var(--accent);stroke-dasharray:4 6;animation:flow 1.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-20}}
@media (min-width:1000px){
  .caps{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,90px);align-items:start}
  .viewer{display:grid;position:sticky;top:calc(var(--nav-h) + 24px)}
}

/* ── System — "from idea to infrastructure" (auto-plays, never pinned) ──── */
.cx__in{display:grid;gap:clamp(20px,3vw,36px)}
.cx__head{display:flex;justify-content:space-between;align-items:end;gap:20px}
.cx__title{font-size:clamp(2rem,4.4vw,4.4rem);letter-spacing:-.055em;font-weight:500;line-height:.98;max-width:16ch;margin-top:22px}
.cx__now{text-align:right;flex:none}
.cx__word{font-size:clamp(2rem,5.2vw,5.8rem);font-weight:500;letter-spacing:-.065em;line-height:.9;color:var(--fg);margin-top:8px;white-space:nowrap}
.cx__word.is-swap{animation:wordin .6s var(--ease)}
@keyframes wordin{from{opacity:0;transform:translateY(30%)}}
.cx__stage{position:relative;width:100%;aspect-ratio:1000/600;max-height:68vh;border-radius:var(--r-2);background:var(--surface-low);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-1);overflow:hidden}
.cx__stage svg{position:absolute;inset:0;width:100%;height:100%}
.cx__steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.cx__step{position:relative;display:grid;gap:4px;width:100%;padding:14px 0 6px;text-align:left;border-top:1px solid var(--line-2);font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute);transition:color .4s;min-height:48px}
.cx__step::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.cx__step.is-on{color:var(--fg)}
.cx__step.is-on::before{transform:scaleX(1)}
.cx__step:hover{color:var(--fg)}
.cx__cap{color:var(--fg-soft);font-size:var(--fs-lead);max-width:60ch;min-height:3.2em}
.cx-g{transition:opacity .6s var(--ease)}
.js .cx-g:not(.is-on){opacity:0}
.cx-draw{transition:stroke-dashoffset 1.1s var(--ease)}
.js .cx-draw{stroke-dasharray:1;stroke-dashoffset:1}
.js .cx-g.is-on .cx-draw{stroke-dashoffset:0}
.cx svg text{font-family:var(--mono);font-size:10px;letter-spacing:.08em;fill:var(--fg-soft)}
@media (max-width:760px){
  .cx__head{flex-direction:column;align-items:flex-start}
  .cx__now{text-align:left;display:flex;flex-direction:column-reverse}
  .cx__word{margin:6px 0 0}
  .cx__stage{aspect-ratio:700/520}
  .cx__steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:4px}
}

/* ── Security ───────────────────────────────────────────────────────────── */
.sec{overflow:hidden}
.sec__grid{display:grid;gap:40px;align-items:center}
.sec__viz{position:relative;aspect-ratio:1;max-height:72vh;width:100%;max-width:640px;justify-self:center}
.sec__viz canvas{width:100%;height:100%}
.sec__status{border-top:1px solid var(--line-2);margin-top:30px}
.sec__status li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-soft)}
.sec__status li b{font-weight:500;color:var(--ok);display:inline-flex;align-items:center;gap:8px}
.sec__status li b::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.sec__note{margin-top:14px;color:var(--fg-mute);font-size:.85rem}
@media (max-width:640px){.sec__viz{max-width:420px}}
@media (min-width:1000px){.sec__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,110px)}}

/* ── Work — concepts ────────────────────────────────────────────────────── */
.work__grid{display:grid;gap:clamp(36px,4vw,28px)}
.concept{position:relative;display:grid;gap:16px;align-self:start;align-content:start}
.concept__cover{position:relative;aspect-ratio:16/11;border-radius:var(--r-2);overflow:hidden;background:var(--surface-low);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-1);isolation:isolate;transition:box-shadow .5s var(--ease),transform .7s var(--ease)}
.concept:hover .concept__cover,.concept:focus-within .concept__cover{box-shadow:inset 0 0 0 1px var(--line-3),var(--shadow-2);transform:translateY(-3px)}
.concept__cover::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line-2);pointer-events:none;transition:box-shadow .5s var(--ease)}
.concept:hover .concept__cover::after,.concept:focus-within .concept__cover::after{box-shadow:inset 0 0 0 1px var(--line-3)}
.concept__cover .mock{position:absolute;inset:0;transition:transform 1.2s var(--ease)}
.concept:hover .mock,.concept:focus-within .mock{transform:scale(1.04)}
.concept__kind{position:absolute;left:14px;top:12px;display:flex;gap:8px;align-items:center;color:var(--fg-soft)}
.badge{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:rgba(7,8,10,.72);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--fg)}
.concept__go{position:absolute;right:14px;bottom:14px;width:52px;height:52px;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center;transform:scale(.6);opacity:0;transition:transform .6s var(--ease),opacity .6s var(--ease)}
.concept:hover .concept__go,.concept:focus-within .concept__go{transform:none;opacity:1}
@media (hover:none){.concept__go{transform:none;opacity:1;width:44px;height:44px}}
.concept__meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.concept__title{font-size:clamp(1.5rem,2.6vw,2.6rem);letter-spacing:-.05em;font-weight:500;line-height:1.02;transition:transform .7s var(--ease)}
.concept:hover .concept__title{transform:translateX(8px)}
.concept__open{text-align:left}
.concept__open::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r-2)}
.concept__open:focus-visible{outline:none}
.concept:has(.concept__open:focus-visible) .concept__cover{outline:2px solid var(--accent);outline-offset:4px}
.concept__sum{color:var(--fg-soft);max-width:52ch}
.mock{display:block;width:100%;height:100%}
.mock svg{width:100%;height:100%}
@media (min-width:900px){
  .work__grid{grid-template-columns:repeat(12,minmax(0,1fr));row-gap:clamp(48px,5vw,80px)}
  .concept:nth-child(1){grid-column:1 / 8}
  .concept:nth-child(2){grid-column:8 / 13;margin-top:clamp(80px,10vw,180px)}
  .concept:nth-child(3){grid-column:1 / 6}
  .concept:nth-child(4){grid-column:6 / 13;margin-top:clamp(80px,9vw,160px)}
  .concept:nth-child(2) .concept__cover,.concept:nth-child(3) .concept__cover{aspect-ratio:4/5;background:linear-gradient(rgba(233,231,226,.04) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(233,231,226,.04) 1px,transparent 1px) 0 0/40px 40px,var(--surface-low)}
  .concept:nth-child(2) .mbg,.concept:nth-child(3) .mbg{display:none}
}

/* Concept dialog */
.case{position:fixed;inset:0;z-index:var(--z-dialog);width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--bg);color:var(--fg);overflow:auto;overscroll-behavior:contain}
.case::backdrop{background:rgba(7,8,10,.6)}
.case__bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px var(--gutter);background:rgba(7,8,10,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.xbtn{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-2);transition:transform .6s var(--ease),background .3s}
.xbtn:hover{transform:rotate(90deg);background:var(--bg-4)}
.case__hero{padding-block:clamp(36px,6vw,90px) 0}
.case__title{font-size:clamp(2.6rem,9vw,9.6rem);letter-spacing:-.065em;line-height:.88;font-weight:500;margin-top:18px;overflow-wrap:break-word}
.case__cover{margin-top:36px;aspect-ratio:21/9;border-radius:var(--r-2);overflow:hidden;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.case__grid{display:grid;gap:40px;padding-block:clamp(48px,7vw,110px)}
.case__blk{display:grid;gap:14px;border-top:1px solid var(--line-2);padding-top:22px;align-content:start}
.case__blk h3{font-family:var(--mono);font-size:.72rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute)}
.case__blk p{color:var(--fg-soft);font-size:1.1rem;max-width:52ch}
.case__blk--wide{grid-column:1/-1}
.case__sys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.case__sys li{padding:16px;border-radius:var(--r);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);font-size:.95rem;display:flex;justify-content:space-between;gap:10px}
.case__sys li span{font-family:var(--mono);font-size:.68rem;color:var(--fg-mute)}
.case__note{color:var(--fg-mute);font-size:.88rem;border-left:2px solid var(--accent);padding-left:14px}
.case__cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding:30px 0 calc(64px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
@media (min-width:900px){.case__grid{grid-template-columns:1fr 1fr;column-gap:clamp(48px,6vw,100px)}.case__sys{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── Process ────────────────────────────────────────────────────────────── */
.process__grid{display:grid;gap:40px}
.stack{display:none;position:relative;place-items:center;perspective:1400px}
.stack__in{position:relative;width:min(80%,400px);aspect-ratio:1;transform:rotateX(58deg) rotateZ(-38deg);transform-style:preserve-3d}
.plate{position:absolute;inset:0;border:1px solid var(--line-2);border-radius:8px;background:rgba(17,19,23,.6);transform:translateZ(calc(var(--i) * 34px));transition:transform 1s var(--ease),border-color .6s,background .6s,opacity .6s;opacity:.35;display:grid;place-items:center}
.plate span{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--fg-mute);transform:rotateZ(38deg)}
.plate.is-built{opacity:1;border-color:var(--line-3)}
.plate.is-cur{border-color:var(--accent);background:rgba(76,116,255,.1);transform:translateZ(calc(var(--i) * 34px + 22px))}
.plate.is-cur span{color:var(--fg)}
.plate::before{content:"";position:absolute;inset:12%;border:1px dashed var(--line-2);border-radius:4px}
.steps{border-top:1px solid var(--line-2)}
.step{display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px 16px;padding:clamp(26px,4vw,54px) 0;border-bottom:1px solid var(--line);transition:opacity .5s}
.step__n{font-family:var(--mono);font-size:.78rem;color:var(--fg-mute);padding-top:10px}
.step h3{font-size:clamp(2rem,4.4vw,4.6rem);letter-spacing:-.06em;line-height:.98;font-weight:500}
.step p{grid-column:2;color:var(--fg-soft);max-width:46ch}
.step.is-cur .step__n{color:var(--accent)}
@media (min-width:1000px){
  .process__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,110px);align-items:start}
  .process__vis{position:sticky;top:calc(var(--nav-h) + 30px);height:calc(100vh - var(--nav-h) - 60px);max-height:820px;display:grid;grid-template-rows:auto 1fr}
  .stack{display:grid}
  .js .step h3{color:var(--fg-soft);transition:color .5s}.js .step.is-cur h3{color:var(--fg)}
  .step::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
  .step{position:relative}.step.is-cur::before{transform:scaleX(1)}
}

/* ── Why ────────────────────────────────────────────────────────────────── */
.princ{display:grid;border-top:1px solid var(--line-2)}
.pr{display:grid;gap:14px;padding:30px 0;border-bottom:1px solid var(--line);align-content:start}
.pr__n{font-family:var(--mono);font-size:.72rem;color:var(--accent)}
.pr h3{font-size:clamp(1.7rem,3vw,3rem);letter-spacing:-.05em;line-height:1.02;font-weight:500}
.pr p{color:var(--fg-soft);max-width:42ch}
@media (min-width:900px){.princ{grid-template-columns:1fr 1fr}.pr{padding:44px 44px 48px 0}.pr:nth-child(even){padding-left:44px;border-left:1px solid var(--line)}}

/* ── Contact ────────────────────────────────────────────────────────────── */
.convert__grid{display:grid;gap:48px}
.convert__intro{display:grid;gap:28px;align-content:start}
.next{display:grid;border-top:1px solid var(--line-2)}
.next li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--fg-soft)}
.next li span{font-family:var(--mono);font-size:.72rem;color:var(--accent);padding-top:4px}
.direct{display:grid;gap:4px}
.direct a{font-size:1.15rem;color:var(--fg);overflow-wrap:anywhere}
.brief{display:grid;gap:18px;padding:clamp(20px,3vw,40px);border-radius:var(--r-2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-2)}
.brief__head{display:grid;gap:6px}
.brief__head h3{font-size:clamp(1.4rem,2vw,1.8rem);letter-spacing:-.04em;font-weight:500;line-height:1.1}
.brief__head p{color:var(--fg-mute);font-size:.9rem}
.field{display:grid;gap:6px;min-width:0}
.field label{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-soft)}
.field label .opt{color:var(--fg-mute);text-transform:none;letter-spacing:0;font-family:var(--sans)}
.field input,.field textarea,.field select{width:100%;min-height:52px;padding:14px;border-radius:var(--r);border:1px solid var(--line-3);background:var(--bg);color:var(--fg);font-size:1rem;transition:border-color .3s}
.field select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23E9E7E2' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.field select option,.field select optgroup{background:var(--bg-3);color:var(--fg)}
.field textarea{min-height:150px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(233,231,226,.45)}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.field [aria-invalid="true"]{border-color:#E2725B}
.err{color:var(--err);font-size:.86rem}
.err:empty{display:none}
.row2{display:grid;gap:18px}
@media (min-width:560px){.row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:1000px){.convert__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(48px,6vw,110px);align-items:start}}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.brief__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;justify-content:space-between}
.brief__fine{color:var(--fg-mute);font-size:.84rem;max-width:44ch}
.brief__fine a{text-decoration:underline;text-underline-offset:3px;color:var(--fg-soft)}
.form-status{border-radius:var(--r);padding:14px 16px;font-size:.95rem;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--fg-soft)}
.form-status:empty{display:none}
.form-status[data-tone="error"]{box-shadow:inset 0 0 0 1px rgba(226,114,91,.6);background:rgba(226,114,91,.08);color:#F4C1B5}
.form-status[data-tone="error"] a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.form-done{display:grid;gap:14px;padding:clamp(20px,3vw,40px);border-radius:var(--r-2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--accent)}
.form-done h3{font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.045em;font-weight:500;line-height:1.05}
.form-done p{color:var(--fg-soft)}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer{background:var(--bg-deep);border-top:1px solid var(--edge);padding:clamp(64px,8vw,120px) 0 calc(28px + env(safe-area-inset-bottom))}
.footer__top{display:grid;gap:44px;padding-bottom:56px}
.footer__brand{display:grid;gap:16px;align-content:start}
.footer__logo{width:clamp(120px,14vw,170px);height:auto;aspect-ratio:563/586}
.fcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
.fcol h2{font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:14px}
.fcol li{color:var(--fg-soft);font-size:.94rem}
.fcol a{display:inline-block;padding:6px 0;overflow-wrap:anywhere}
.fcol a:hover{color:var(--fg)}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:24px;border-top:1px solid var(--line);color:var(--fg-mute);font-size:.84rem}
.footer__bottom a{text-decoration:underline;text-underline-offset:3px}
.footer__bottom a:hover{color:var(--fg)}
@media (min-width:1000px){.footer__top{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}.fcols{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── Simple pages (privacy, thanks, 404) ────────────────────────────────── */
.page{padding:calc(var(--nav-h) + clamp(40px,8vw,120px)) 0 clamp(64px,8vw,120px);min-height:70vh}
.page h1{font-size:clamp(2.6rem,7vw,6rem);letter-spacing:-.06em;line-height:.95;font-weight:500;margin:20px 0 28px}
.prose{display:grid;gap:18px;max-width:68ch;color:var(--fg-soft)}
.prose h2{font-size:1.4rem;letter-spacing:-.03em;font-weight:500;color:var(--fg);margin-top:18px}
.prose ul{list-style:disc;padding-left:1.2em;display:grid;gap:6px}
.prose a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}

/* ── Cursor (fine pointers only) ────────────────────────────────────────── */
.cursor{position:fixed;left:0;top:0;z-index:var(--z-cursor);pointer-events:none;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(233,231,226,.5);opacity:0;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),opacity .3s,background .4s,box-shadow .4s;display:grid;place-items:center}
.cursor::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--fg)}
.cursor.is-on{opacity:1}
.cursor.is-big{width:88px;height:88px;margin:-44px 0 0 -44px;background:var(--fg);box-shadow:none}
.cursor.is-big::after{display:none}
.cursor span{position:absolute;font-size:.78rem;font-weight:500;color:var(--bg);opacity:0;transition:opacity .3s}
.cursor.is-big span{opacity:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ── Motion ─────────────────────────────────────────────────────────────────
   .js-motion is set by the inline boot script only when motion is allowed.
   If app.js fails to load, the boot script removes it after 3s, so content
   is never left hidden. Reveals are transform/opacity only (no layout shift).
   ─────────────────────────────────────────────────────────────────────── */
.js-motion [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.js-motion [data-reveal].is-in{opacity:1;transform:none}
.js-motion [data-lines] .line-mask>span{transform:translateY(104%);transition:transform 1.15s var(--ease);transition-delay:calc(var(--i,0) * .1s)}
.js-motion [data-lines].is-in .line-mask>span{transform:none}
/* hero intro: plays immediately on load, never blocks interaction */
.js-motion [data-intro]{opacity:0;transform:translateY(-8px);transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.js-motion [data-intro-fade]{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease) var(--d,.45s),transform .9s var(--ease) var(--d,.45s)}
.js-motion .hero__title .line-mask>span{transform:translateY(104%);transition:transform 1.2s var(--ease) calc(.1s + var(--i,0) * .12s)}
.is-ready [data-intro],.is-ready [data-intro-fade]{opacity:1;transform:none}
.is-ready .hero__title .line-mask>span{transform:none}
/* pause decorative CSS loops while their section is off-screen */
.is-idle *,.is-idle *::before,.is-idle *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .cursor{display:none}
}