/* Hubot Sans and Mona Sans: SIL Open Font License 1.1 (github/hubot-sans, github/mona-sans), latin variable subsets via Fontsource 5.3.0, self-hosted unmodified; licences in /assets/fonts/OFL-*.txt */
@font-face{font-family:"Hubot Sans";font-style:normal;font-display:swap;font-weight:200 900;font-stretch:75% 125%;src:url("/assets/fonts/hubot-sans-latin-wdth.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:"Mona Sans";font-style:normal;font-display:swap;font-weight:200 900;font-stretch:75% 125%;src:url("/assets/fonts/mona-sans-latin-wdth.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}
:root{--logo:url("/assets/img/logo.webp")}

/* =====================================================================
   Grimlet Labs — Concept C "Strata" (Advanced Technology Experience)
   Production stylesheet (Cloudflare Pages build in /site). Fonts (OFL) and
   the logo are self-hosted under /assets. Design notes: docs/concept-c-design-notes.md
   ===================================================================== */

/* Registered properties let the 3D stack transition smoothly */
@property --spread{syntax:"<number>";inherits:true;initial-value:1}
@property --twist{syntax:"<angle>";inherits:true;initial-value:0deg}
@property --yaw{syntax:"<angle>";inherits:true;initial-value:-32deg}
@property --pitch{syntax:"<angle>";inherits:true;initial-value:58deg}
@property --scroll{syntax:"<number>";inherits:true;initial-value:0}

/* ============ Tokens ============ */
:root{
  /* dark stage */
  --abyss:#06111F; --ink:#0B1B2E; --ink-2:#10243B; --ink-3:#163050;
  --ink-line:#1F3A58; --ink-line-2:#2B4C70;
  --on-ink:#EAF2FB; --on-ink-2:#B0C3D8; --on-ink-3:#8EA5BE;
  /* light from the logo */
  --signal:#45D3F7; --current:#3D9BFF; --signal-soft:rgba(69,211,247,.14);
  --grad-signal:linear-gradient(100deg,#45D3F7 0%,#3D9BFF 100%);
  /* reading surfaces */
  --porcelain:#EDF1F5; --paper:#F8FAFC; --white:#FFFFFF;
  --graphite:#0E1C2B; --slate:#3E4F63; --mist:#56687D;
  --rule:#D6DEE7; --rule-2:#C2CDDA;
  --link-ink:#1F56D6; --signal-ink:#0A6F8C;
  /* status */
  --built:#4BE0B0; --built-ink:#0E7A5A; --built-soft:#DDF5EC;
  --planned:#F5BE6A; --planned-ink:#8A5300; --planned-soft:#FBEED8;
  --danger:#B42318;
  /* type */
  --display:"Hubot Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --body:"Mona Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --code:ui-monospace,"Cascadia Code","SFMono-Regular",Consolas,monospace;
  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  /* layout */
  --container:1240px; --gutter:clamp(20px,4vw,48px); --header-h:72px;
  --hexcut:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  --hexagon:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  --shadow-ui:0 1px 2px rgba(14,28,43,.06),0 18px 40px -16px rgba(14,28,43,.28);
  --focus:#1F56D6;
}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--abyss);color:var(--slate);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body.menu-open{overflow:hidden}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:650;line-height:1.08;letter-spacing:-.015em;text-wrap:balance;color:var(--graphite)}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.dark :focus-visible,.header :focus-visible,.mobile-menu :focus-visible{--focus:var(--signal)}
::selection{background:#BDEBFA;color:var(--graphite)}
.container{width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:300;background:var(--signal);color:var(--abyss);padding:12px 16px;border-radius:8px;font-weight:600}
.skip:focus{top:12px}

/* Surfaces */
.dark{background:var(--ink);color:var(--on-ink-2);color-scheme:dark}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--on-ink)}
.light{background:var(--porcelain);color:var(--slate);color-scheme:light}
.paper{background:var(--paper);color:var(--slate);color-scheme:light}

/* Type scale (≈1.25) */
.h2{font-size:clamp(34px,4.6vw,60px);font-weight:640;letter-spacing:-.025em;line-height:1.02}
.lead{font-size:clamp(17px,1.35vw,19px);line-height:1.6;max-width:54ch}
.light .lead,.paper .lead{color:var(--mist)}
.dark .lead{color:var(--on-ink-2)}
.section{padding-block:clamp(80px,11vw,152px)}
.section-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px 72px;align-items:end;margin-bottom:clamp(44px,6vw,72px)}

/* ============ Buttons (hex-ended, echoing the mark) ============ */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid transparent;border-radius:10px;font:600 15px/1 var(--display);letter-spacing:.005em;white-space:nowrap;color:var(--abyss);transition:transform .2s var(--ease-out),border-color .2s,box-shadow .2s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .2s;pointer-events:none}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:10px}
.btn-primary{background:var(--grad-signal);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 24px -14px rgba(61,155,255,.75)}
.btn-primary::after{background:#fff}
.btn-primary:hover::after{opacity:.16}
.btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 28px -14px rgba(61,155,255,.9)}
.btn-ghost{color:var(--on-ink);border-color:rgba(69,211,247,.42);background:rgba(255,255,255,.02)}
.btn-ghost::after{background:rgba(69,211,247,.10)}
.btn-ghost:hover{border-color:var(--signal)}
.btn-ghost:hover::after{opacity:1}
.light .btn-ghost,.paper .btn-ghost,.contact-card .btn-ghost{color:var(--graphite);border-color:rgba(14,28,43,.28);background:transparent}
.light .btn-ghost::after,.paper .btn-ghost::after,.contact-card .btn-ghost::after{background:rgba(14,28,43,.05)}
.light .btn-ghost:hover,.paper .btn-ghost:hover,.contact-card .btn-ghost:hover{border-color:var(--graphite)}
.btn-ink{color:#fff;background:var(--graphite)}
.btn-ink::after{background:var(--grad-signal)}
.btn-ink:hover::after{opacity:.3}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px;border-radius:8px}
.btn-sm:focus-visible{border-radius:8px}
.btn[disabled]{cursor:not-allowed;opacity:.45;transform:none}
.text-link{display:inline-flex;align-items:center;gap:8px;font:600 15.5px/1.3 var(--display);color:var(--link-ink);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px}
.dark .text-link,.hero .text-link{color:var(--signal)}
.text-link:hover{background-size:100% 2px}

/* Status chips */
.chip{display:inline-flex;align-items:center;gap:7px;font:600 12.5px/1 var(--display);padding:6px 10px;border-radius:999px;white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip-dev{background:var(--planned-soft);color:var(--planned-ink)}
.dark .chip-dev,.header .chip-dev,.mobile-menu .chip-dev{background:rgba(245,190,106,.13);color:var(--planned)}
.chip-built{background:var(--built-soft);color:var(--built-ink)}
.chip-planned{background:var(--planned-soft);color:var(--planned-ink)}
.chip-sample{background:transparent;border:1px solid currentColor;color:var(--mist);padding:5px 9px}
.chip-sample::before{display:none}
.dark .chip-sample{color:var(--on-ink-3)}

/* Brand mark (raster logo embedded once, see fonts block) */
.mark{display:block;width:26px;height:28px;background:var(--logo) center/contain no-repeat;flex:none}

/* ============ Header ============ */
.header{position:sticky;top:0;z-index:60;height:var(--header-h);background:rgba(6,17,31,.74);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid transparent;color:var(--on-ink-2);transition:border-color .25s,background-color .25s}
.header.is-scrolled{border-bottom-color:rgba(69,211,247,.14);background:rgba(6,17,31,.9)}
.header-inner{height:100%;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;font:650 18px/1 var(--display);letter-spacing:-.01em;color:var(--on-ink);flex:none}
.nav{display:flex;align-items:center;gap:2px;margin-left:16px}
.nav-link,.nav-trigger{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 13px;border-radius:8px;font:540 15px/1 var(--body);color:var(--on-ink-2);transition:color .15s,background-color .15s}
.nav-link:hover,.nav-trigger:hover,.nav-trigger[aria-expanded="true"]{color:var(--on-ink);background:rgba(255,255,255,.06)}
.nav-trigger svg{width:14px;height:14px;transition:transform .2s var(--ease-out)}
.nav-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-item{position:relative}
.dropdown{position:absolute;top:calc(100% + 12px);left:-10px;min-width:360px;background:var(--ink-2);border:1px solid var(--ink-line);border-radius:14px;box-shadow:0 30px 70px -20px rgba(0,0,0,.7);padding:10px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s var(--ease-out),transform .18s var(--ease-out),visibility 0s .18s}
.dropdown.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)}
.dropdown a{display:block;padding:11px 12px;border-radius:10px}
.dropdown a:hover{background:rgba(255,255,255,.05)}
.dropdown strong{display:flex;align-items:center;gap:10px;font:600 15px/1.25 var(--display);color:var(--on-ink)}
.dropdown .dd-desc{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--on-ink-3)}
.dropdown .dd-note{display:block;margin:4px 0 0;padding:11px 12px;border:1px dashed var(--ink-line-2);border-radius:10px;font-size:13.5px;color:var(--on-ink-3);line-height:1.45}
.dropdown .dd-foot{margin-top:6px;padding:12px;border-top:1px solid var(--ink-line);border-radius:0;font-size:14px;color:var(--on-ink-2)}
.dropdown .dd-foot:hover{background:none;color:var(--signal)}
.dropdown-wide{min-width:620px;display:grid;grid-template-columns:1fr 1fr;gap:0 4px}
.dropdown-wide .dd-foot{grid-column:1/-1;display:flex;gap:24px}
.dropdown-wide .dd-foot a{padding:0;display:inline}
.dropdown-wide .dd-foot a:hover{background:none;color:var(--signal)}
.header-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.menu-toggle{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--ink-line-2);align-items:center;justify-content:center;color:var(--on-ink)}
.menu-toggle svg{width:20px;height:20px}

.mobile-menu{position:fixed;inset:var(--header-h) 0 0;z-index:59;background:var(--abyss);padding:8px var(--gutter) 40px;overflow-y:auto;overscroll-behavior:contain;display:none;color:var(--on-ink-2)}
.mobile-menu.is-open{display:block}
.mobile-menu h2{font:600 13.5px/1 var(--display);color:var(--on-ink-3);margin:26px 0 6px;letter-spacing:0}
.mobile-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;border-bottom:1px solid var(--ink-line);font-size:17px;font-weight:500;color:var(--on-ink)}
.mobile-menu .btn{width:100%;margin-top:28px;border-bottom:0;justify-content:center;color:var(--abyss)}

/* ============ Strata (3D hexagonal plates, CSS 3D transforms) ============ */
.strata{position:relative;--pw:300px;--ph:calc(var(--pw) * 1.1547);--gap:58px;perspective:1500px;perspective-origin:50% 40%}
.rig{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(var(--pitch)) rotateZ(var(--yaw));--S:calc(var(--spread) + var(--scroll) * 1.35)}
.plate{position:absolute;left:0;top:0;width:var(--pw);height:var(--ph);margin:calc(var(--ph) / -2) 0 0 calc(var(--pw) / -2);transform-style:preserve-3d;
  transform:translateZ(calc((var(--i) - 2) * var(--gap) * var(--S))) rotateZ(calc(var(--twist) * (var(--i) - 2)));
  transition:opacity .9s var(--ease-out) calc(var(--i) * 90ms)}
.plate::before,.plate::after{content:"";position:absolute;inset:0;clip-path:var(--hexagon);background:#0A2036}
.plate::before{transform:translateZ(-3px);background:#0E2C49}
.plate::after{transform:translateZ(-6px);background:#071728}
.face{position:absolute;inset:0;clip-path:var(--hexagon);color:var(--signal);
  background:linear-gradient(162deg,rgba(69,211,247,.30) 0%,rgba(61,155,255,.13) 42%,rgba(9,28,49,.78) 100%)}
.face svg{width:100%;height:100%;overflow:visible}
.rim{fill:none;stroke:url(#rimGrad);stroke-width:5}
.etch{fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:.62}
.etch-fill{fill:currentColor;opacity:.16}
.etch-node{fill:#0A1F35;stroke:currentColor;stroke-width:3.2;opacity:.9}
.plate[data-l="base"] .face{background:linear-gradient(162deg,rgba(61,155,255,.18),rgba(6,17,31,.92) 70%)}
.plate[data-l="ui"] .face{background:linear-gradient(162deg,rgba(150,236,255,.42) 0%,rgba(61,155,255,.18) 45%,rgba(9,28,49,.7) 100%)}
.plate[data-l="ui"] .etch{opacity:.85}
.glow{position:absolute;left:50%;top:50%;width:calc(var(--pw) * 2.3);height:calc(var(--pw) * 2.3);margin:calc(var(--pw) * -1.15) 0 0 calc(var(--pw) * -1.15);border-radius:50%;
  background:radial-gradient(closest-side,rgba(61,155,255,.26),rgba(69,211,247,.08) 55%,transparent 72%);transform:translateZ(calc(-2.6 * var(--gap) * var(--S)));pointer-events:none}
.filament{position:absolute;left:0;top:0;width:1.5px;height:calc(var(--gap) * 4);margin-left:-.75px;transform-origin:50% 0;
  background:linear-gradient(to bottom,rgba(69,211,247,0),rgba(69,211,247,.75) 30%,rgba(69,211,247,.75) 70%,rgba(69,211,247,0));
  transform:translate3d(var(--x),var(--y),calc(-2 * var(--gap) * var(--S))) rotateZ(var(--r,0deg)) rotateX(90deg) scaleY(var(--S))}
.pulse{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:radial-gradient(closest-side,#fff 0,#BDF1FF 28%,rgba(69,211,247,.55) 52%,rgba(69,211,247,0) 100%);
  opacity:0;animation:rise var(--dur,3.6s) var(--ease-io) var(--delay,0s) infinite}
@keyframes rise{
  0%{opacity:0;transform:translate3d(var(--x),var(--y),calc(-2 * var(--gap) * var(--S)))}
  6%{opacity:1}
  42%{opacity:1}
  48%,100%{opacity:0;transform:translate3d(var(--x),var(--y),calc(2 * var(--gap) * var(--S)))}
}
.spark{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:radial-gradient(closest-side,#fff,rgba(69,211,247,.6) 50%,rgba(69,211,247,0));transform:translateZ(1px);
  opacity:0;animation:glide var(--dur,4.8s) var(--ease-io) var(--delay,0s) infinite}
@keyframes glide{
  0%{opacity:0;transform:translate3d(calc(var(--pw) * var(--ax)),calc(var(--ph) * var(--ay)),1px)}
  8%,34%{opacity:1}
  40%,100%{opacity:0;transform:translate3d(calc(var(--pw) * var(--bx)),calc(var(--ph) * var(--by)),1px)}
}
.tag{position:absolute;left:100%;top:50%;width:max-content;transform-origin:0 50%;
  transform:rotateZ(calc(var(--twist) * (2 - var(--i)))) rotateZ(calc(-1 * var(--yaw))) rotateX(calc(-1 * var(--pitch))) translate(10px,-50%);
  display:flex;align-items:center;gap:10px;pointer-events:none;transition:opacity .6s var(--ease-out) calc(.5s + var(--i) * 120ms)}
.tag::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,rgba(69,211,247,0),rgba(69,211,247,.9))}
.tag b{display:block;font:640 14px/1.1 var(--display);color:var(--on-ink);letter-spacing:.01em}
.tag small{display:block;font-size:12px;line-height:1.3;color:var(--on-ink-3);margin-top:3px}
/* intro: the page's one orchestrated moment, pure CSS so it never waits on script */
@keyframes assemble{from{--spread:2.8;--twist:22deg}}
@keyframes appear{from{opacity:0}}
/* opacity is animated on leaf layers only: opacity on a preserve-3d element would flatten the stack */
#hero-strata .rig{animation:assemble 1.9s var(--ease-out) .1s backwards}
#hero-strata .face,#hero-strata .plate::before,#hero-strata .plate::after{animation:appear 1s var(--ease-out) backwards;animation-delay:calc(.1s + var(--i) * 90ms)}
#hero-strata .tag{animation:appear .7s var(--ease-out) backwards;animation-delay:calc(1s + var(--i) * 110ms)}
#hero-strata .pulse,#hero-strata .spark{animation-delay:calc(var(--delay,0s) + 2.1s)}
.strata.is-paused *,.strata.is-offscreen *{animation-play-state:paused!important}

/* ============ Hero ============ */
.hero{position:relative;background:var(--abyss);color:var(--on-ink-2);isolation:isolate;overflow:clip;color-scheme:dark;margin-top:calc(var(--header-h) * -1);padding-top:var(--header-h)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 620px at 76% 44%,rgba(61,155,255,.16),transparent 70%),radial-gradient(600px 400px at 92% 0%,rgba(69,211,247,.10),transparent 70%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(69,211,247,.35),transparent)}
/* Content-sized hero: the copy starts a fixed rhythm below the header instead of being centred in a viewport-tall box */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:stretch;padding-block:clamp(56px,6vw,96px) clamp(40px,4.5vw,72px)}
.hero-copy{align-self:start}
.hero h1{font-size:clamp(34px,calc(2.9vw + 22px),64px);font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--on-ink)}
.hero h1 .line{display:block}
.hero-lead{margin-top:28px;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--on-ink-2);max-width:48ch}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;margin-top:40px}
.hero-actions .text-link{margin-left:2px}
/* The visual stretches to the copy's height; the stack is centred in it and the caption sits below, in flow */
.hero-visual{position:relative;display:flex;flex-direction:column;min-height:clamp(440px,38vw,580px);margin-right:calc(var(--gutter) * -1)}
.hero-visual .strata{position:relative;flex:1 1 auto;min-height:0;--pw:clamp(220px,19vw,290px);--gap:clamp(44px,4vw,60px)}
.hero-visual .rig{left:40%;top:50%}
.hero-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-right:var(--gutter);margin-top:8px;font-size:13px;color:var(--on-ink-3)}
.anim-toggle{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--ink-line-2);border-radius:999px;font:560 13px/1 var(--body);color:var(--on-ink-2);background:rgba(6,17,31,.6);flex:none}
.anim-toggle:hover{color:var(--on-ink);border-color:var(--on-ink-3)}
.anim-toggle svg{width:14px;height:14px}
/* headline intro */
@keyframes settle{from{opacity:0;transform:translateY(18px)}}
.hero h1 .line,.hero-lead,.hero-actions{animation:settle .9s var(--ease-out) both}
.hero h1 .line:nth-child(2){animation-delay:.08s}.hero h1 .line:nth-child(3){animation-delay:.16s}
.hero-lead{animation-delay:.3s}.hero-actions{animation-delay:.42s}

/* ============ What we build ============ */
.builds{border-bottom:1px solid var(--rule)}
.builds-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding-top:clamp(56px,7vw,88px)}
.builds-head h2{font-size:clamp(22px,2vw,26px);letter-spacing:-.01em}
.builds-head p{color:var(--mist);font-size:15.5px;max-width:52ch}
.halves{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(28px,4vw,44px)}
.half{position:relative;padding:clamp(28px,4vw,48px) clamp(0px,4vw,56px) clamp(56px,7vw,88px) 0;display:flex;flex-direction:column;gap:18px}
.half + .half{border-left:1px solid var(--rule);padding-left:clamp(24px,4vw,56px);padding-right:0}
.half .big{font:700 clamp(64px,9vw,128px)/.86 var(--display);letter-spacing:-.045em;color:var(--graphite)}
.half .big span{display:inline-block;width:.42em;height:.48em;margin-left:.06em;clip-path:var(--hexagon);background:var(--grad-signal);vertical-align:.04em}
.half h3{font-size:clamp(22px,2.1vw,28px);margin-top:6px}
.half p{color:var(--mist);max-width:46ch}
.half-list{display:grid;gap:0;margin-top:6px;border-top:1px solid var(--rule)}
.half-list a,.half-list .soon{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;border-bottom:1px solid var(--rule);font:560 15.5px/1.3 var(--display);color:var(--graphite)}
.half-list .soon{color:var(--mist);font-weight:500}
.half-list a:hover{color:var(--link-ink)}
.svc-cols{grid-template-columns:1fr 1fr;column-gap:24px}
.half .text-link{align-self:flex-start;margin-top:8px}

/* ============ Products ============ */
.portfolio{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:start}
.rail{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:10px}
.rail h3{font:600 14px/1 var(--display);color:var(--mist);margin:0 0 6px;letter-spacing:0}
.rail-item{display:grid;grid-template-columns:40px 1fr;gap:3px 12px;align-items:center;width:100%;padding:14px;border-radius:14px;text-align:left;background:var(--white);box-shadow:var(--shadow-ui);border:1px solid var(--rule)}
.rail-item .logo{grid-row:span 2;width:40px;height:40px;clip-path:var(--hexagon);background:var(--grad-signal);display:grid;place-items:center;color:var(--abyss);font:700 16px/1 var(--display)}
.rail-item strong{font:640 16px/1.2 var(--display);color:var(--graphite)}
.rail-item span{font-size:13px;color:var(--mist);line-height:1.35}
.rail-next{padding:14px;border:1px dashed var(--rule-2);border-radius:14px;font-size:13.5px;line-height:1.45;color:var(--mist);display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center}
.rail-next i{width:40px;height:40px;clip-path:var(--hexagon);background:repeating-linear-gradient(135deg,var(--rule-2) 0 2px,transparent 2px 7px)}
.rail-next strong{display:block;color:var(--graphite);font:600 14.5px/1.3 var(--display)}
.product{min-width:0}
.product-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:end;padding-bottom:28px;border-bottom:1px solid var(--rule)}
.product-name{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.product-name h3{font-size:clamp(34px,3.6vw,46px);letter-spacing:-.03em}
.product-value{margin-top:12px;font-size:clamp(18px,1.6vw,21px);line-height:1.45;color:var(--graphite);max-width:40ch}
.product-note{margin-top:8px;font-size:14.5px;color:var(--mist)}
/* chaptered demo */
.demo{margin-top:32px}
.demo-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.chapters{display:flex;gap:6px;padding:4px;border-radius:12px;background:var(--white);border:1px solid var(--rule);box-shadow:0 1px 2px rgba(14,28,43,.04)}
.chapter-tab{position:relative;display:grid;gap:2px;align-content:center;text-align:left;padding:9px 16px 11px;border-radius:9px;min-width:132px;min-height:44px;overflow:hidden}
.chapter-tab b{font:620 15px/1.2 var(--display);color:var(--graphite)}
.chapter-tab span{font-size:12.5px;color:var(--mist)}
.chapter-tab[aria-selected="true"]{background:var(--graphite)}
.chapter-tab[aria-selected="true"] b{color:#fff}
.chapter-tab[aria-selected="true"] span{color:#B9C8D8}
.chapter-tab .bar{position:absolute;left:10px;right:10px;bottom:4px;height:2px;border-radius:2px;background:var(--signal);transform:scaleX(0);transform-origin:0 50%}
.demo.is-playing .chapter-tab[aria-selected="true"] .bar{animation:fill var(--step,4.6s) linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.play{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border-radius:10px;font:600 14px/1 var(--display);color:var(--graphite);border:1px solid var(--rule-2);background:var(--white)}
.play:hover{border-color:var(--graphite)}
.play svg{width:14px;height:14px}
.stage{position:relative;border-radius:18px;background:linear-gradient(160deg,#DCE6F0,#E9EEF4 50%,#DDE5EE);padding:clamp(14px,2.4vw,28px);border:1px solid var(--rule)}
.window{background:var(--white);border:1px solid var(--rule);border-radius:14px;box-shadow:0 2px 4px rgba(14,28,43,.05),0 40px 80px -36px rgba(14,28,43,.45);overflow:hidden}
.window-bar{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-bottom:1px solid var(--rule);background:#F4F7FA;font-size:12.5px;color:var(--mist);font-weight:500}
.window-bar .dots{display:flex;gap:6px;margin-right:4px}
.window-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--rule-2)}
.window-bar .chip-sample{margin-left:auto;font-size:11.5px;padding:4px 8px}
.app{display:grid;grid-template-columns:150px minmax(0,1fr);min-height:380px}
.app-side{border-right:1px solid var(--rule);padding:14px 10px;background:#FBFCFD;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.brand-switch{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--rule);border-radius:9px;background:#fff;font-weight:600;color:var(--graphite);margin-bottom:10px;font-size:12px;line-height:1.2}
.brand-switch b{width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,#F59E0B,#E4572E);flex:none}
.app-side span{display:flex;justify-content:space-between;align-items:center;padding:7px 8px;border-radius:7px;color:var(--mist)}
.app-side span.on{background:#E6F0FE;color:#1F56D6;font-weight:600}
.app-side span em{font-style:normal;font-size:11px;font-weight:600;color:var(--planned-ink);background:var(--planned-soft);padding:2px 6px;border-radius:99px}
.app-main{padding:16px;min-width:0}
.app-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.app-head strong{font:620 15px/1.2 var(--display);color:var(--graphite)}
.seg{display:flex;border:1px solid var(--rule);border-radius:8px;overflow:hidden;font-size:11.5px}
.seg span{padding:5px 9px;color:var(--mist)}
.seg span.on{background:var(--graphite);color:#fff}
.chapter{animation:none}
.chapter-caption{font-size:14.5px;color:var(--slate);margin:16px 2px 0;max-width:72ch}
/* plan */
.week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.day{position:relative;border:1px solid var(--rule);border-radius:9px;min-height:250px;padding:7px;background:#fff;display:flex;flex-direction:column;gap:7px}
.day>b{font-size:11px;font-weight:600;color:var(--mist);display:flex;justify-content:space-between}
.day>b em{font-style:normal;color:var(--graphite)}
.day.today{border-color:#B7CDF6;background:#FAFCFF}
.best{position:absolute;left:4px;right:4px;top:30px;height:66px;border-radius:7px;background:repeating-linear-gradient(135deg,rgba(69,211,247,.16) 0 6px,rgba(69,211,247,.06) 6px 12px);border:1px dashed rgba(10,111,140,.4)}
.best i{position:absolute;right:5px;bottom:4px;font-style:normal;font-size:11px;font-weight:600;color:var(--signal-ink)}
.post{position:relative;border-radius:7px;padding:7px;font-size:11px;line-height:1.3;background:#F2F5F8;color:var(--graphite);--dot:#9AA8B6}
.post small{display:flex;align-items:center;gap:5px;color:var(--mist);font-size:11px;margin-top:3px}
.post small::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot);flex:none}
.post.s{--dot:#1F56D6;background:#EEF3FE}
.post.p{--dot:var(--built-ink);background:#ECF8F3}
.post.hl{box-shadow:0 0 0 2px #1F56D6,0 12px 24px -10px rgba(31,86,214,.5);background:#fff}
/* publish */
.composer{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:14px}
.nets{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.nets span{font-size:11px;font-weight:600;padding:5px 9px;border-radius:7px;border:1px solid var(--rule);color:var(--mist)}
.nets span.on{border-color:var(--graphite);color:var(--graphite)}
.c-text{border:1px solid var(--rule);border-radius:9px;padding:11px;font-size:12.5px;color:var(--graphite);line-height:1.55;min-height:96px}
.c-media{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:11px;color:var(--mist)}
.c-media i{width:52px;height:64px;border-radius:7px;background:linear-gradient(160deg,#FCD34D,#E4572E);position:relative}
.c-media i::after{content:"4:5";position:absolute;inset:auto 3px 3px auto;font-style:normal;font-size:9px;font-weight:700;color:#fff;background:rgba(0,0,0,.35);padding:1px 4px;border-radius:4px}
.checks{margin-top:10px;display:grid;gap:5px}
.checks li{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--slate)}
.checks svg{width:14px;height:14px;color:var(--built-ink);flex:none}
.sched{margin-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sched span{font-size:11.5px;padding:7px 10px;border-radius:8px;background:#F2F5F8;border:1px solid var(--rule);color:var(--graphite)}
.sched .go{position:relative;background:#1F56D6;border-color:#1F56D6;color:#fff;font-weight:600;overflow:hidden}
.sched .go .after{position:absolute;inset:0;display:grid;place-items:center;background:var(--built-ink);opacity:0}
.preview{border:1px solid var(--rule);border-radius:11px;overflow:hidden;align-self:start;font-size:11px;color:var(--graphite)}
.preview .ph{display:flex;align-items:center;gap:7px;padding:8px}
.preview .ph i{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#F59E0B,#E4572E)}
.preview .img{aspect-ratio:4/5;background:linear-gradient(160deg,#FCD34D,#E4572E)}
.preview p{padding:8px;line-height:1.4;color:var(--mist)}
/* measure */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{border:1px solid var(--rule);border-radius:9px;padding:11px}
.kpi small{display:block;font-size:11px;color:var(--mist)}
.kpi strong{display:block;font:640 20px/1.2 var(--display);color:var(--graphite);font-variant-numeric:tabular-nums;margin-top:3px}
.kpi em{font-style:normal;font-size:11px;color:var(--built-ink);font-weight:600}
.charts{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:10px;margin-top:10px}
.chart{position:relative;border:1px solid var(--rule);border-radius:9px;padding:11px;overflow:hidden}
.chart-head{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--mist);margin-bottom:8px}
.chart-head b{color:var(--graphite);font-weight:600}
.chart svg{width:100%;height:132px}
.chart .cover{position:absolute;left:11px;right:0;top:36px;bottom:0;background:#fff;transform-origin:100% 50%;transform:scaleX(0)}
.bars{display:grid;gap:10px;font-size:11.5px;color:var(--slate)}
.bars div{display:grid;grid-template-columns:70px 1fr 34px;align-items:center;gap:8px}
.bars i{height:8px;border-radius:4px;background:#E6ECF2;position:relative;overflow:hidden}
.bars i::after{content:"";position:absolute;inset:0;background:#1F56D6;transform-origin:0 50%;transform:scaleX(var(--v))}
.bars b{font-weight:600;color:var(--graphite);text-align:right;font-variant-numeric:tabular-nums}
.export{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--graphite);border:1px solid var(--rule);padding:4px 8px;border-radius:7px}
/* chapter motion (only when JS runs a chapter; final state is the default) */
.js .chapter.is-run .week .post{animation:pop .5s var(--ease-out) both;animation-delay:calc(.1s + var(--k,0) * 70ms)}
.js .chapter.is-run .best{animation:fade .8s var(--ease-out) .7s both}
.js .chapter.is-run .post.hl{animation:pop .5s var(--ease-out) both,lift .6s var(--ease-out) 1.1s both}
.js .chapter.is-run .checks li{animation:pop .4s var(--ease-out) both;animation-delay:calc(.4s + var(--k,0) * 260ms)}
.js .chapter.is-run .sched .go .after{animation:fade .35s var(--ease-out) 1.9s both}
.js .chapter.is-run .sched .go{animation:press .3s var(--ease-out) 1.75s both}
.js .chapter.is-run .chart .cover{animation:wipe 1.4s var(--ease-io) .3s both}
.js .chapter.is-run .bars i::after{animation:grow 1s var(--ease-out) both;animation-delay:calc(.6s + var(--k,0) * 120ms)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}
@keyframes fade{from{opacity:0}}
@keyframes lift{from{transform:none}to{transform:translateY(-2px)}}
@keyframes press{50%{transform:scale(.94)}}
@keyframes wipe{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes grow{from{transform:scaleX(0)}}
.product-lists{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:40px}
.product-lists h4{display:flex;align-items:center;gap:10px;font-size:17px;margin-bottom:12px}
.product-lists li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--rule);font-size:15.5px;line-height:1.45;color:var(--slate)}
.product-lists li svg{width:16px;height:16px;flex:none;margin-top:3px}
.list-built svg{color:var(--built-ink)}
.list-planned svg{color:var(--planned-ink)}
.list-planned li{color:var(--mist)}
.product-cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.product-cta p{font-size:14px;color:var(--mist)}

/* ============ Services (interactive systems) ============ */
.services{background:var(--ink);position:relative;isolation:isolate}
.services::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(800px 500px at 85% 0%,rgba(61,155,255,.13),transparent 70%)}
.scene-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;border-bottom:1px solid var(--ink-line)}
.scene-tab{position:relative;display:grid;gap:4px;text-align:left;padding:16px 18px 18px 0;color:var(--on-ink-3)}
.scene-tab b{font:630 16px/1.2 var(--display);color:var(--on-ink-2)}
.scene-tab span{font-size:13.5px;line-height:1.35}
.scene-tab::after{content:"";position:absolute;left:0;right:12px;bottom:-1px;height:2px;background:var(--grad-signal);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease-out)}
.scene-tab[aria-selected="true"] b{color:var(--on-ink)}
.scene-tab[aria-selected="true"]::after{transform:scaleX(1)}
.scene-tab:hover b{color:var(--on-ink)}
.scene-panel{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-top:clamp(32px,4vw,48px)}
.scene-panel h3{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.02em}
.scene-copy p{margin-top:14px;color:var(--on-ink-2);font-size:16px}
.scene-copy .covers{margin-top:20px;font-size:14px;color:var(--on-ink-3)}
.scene-copy .covers a{color:var(--on-ink);border-bottom:1px solid var(--ink-line-2)}
.scene-copy .covers a:hover{border-color:var(--signal)}
.controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.toggle{display:inline-flex;padding:3px;border-radius:10px;border:1px solid var(--ink-line-2);background:var(--abyss)}
.toggle button{min-height:38px;padding:0 12px;border-radius:7px;font:560 13.5px/1 var(--body);color:var(--on-ink-3)}
.toggle button[aria-pressed="true"]{background:var(--ink-3);color:var(--on-ink)}
.run{display:inline-flex;align-items:center;gap:8px}
.run svg{width:14px;height:14px}
.scene-wrap{position:relative;min-width:0}
.scene-note{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px;font-size:13px;color:var(--on-ink-3)}
.scene{position:relative;padding:22px;border-radius:18px;border:1px solid var(--ink-line);background:linear-gradient(180deg,rgba(16,36,59,.85),rgba(6,17,31,.9));min-height:360px}
.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wire{fill:none;stroke:var(--ink-line-2);stroke-width:1.5}
.wire-lit{fill:none;stroke:var(--signal);stroke-width:2;opacity:0;transition:opacity .4s}
.wire-lit.on{opacity:1}
.wire-lit.warn{stroke:var(--planned)}
.dot-halo{fill:var(--signal);opacity:.28}
.dot-core{fill:#fff}
.node{position:relative;z-index:1;border:1px solid var(--ink-line-2);border-radius:11px;background:var(--ink-2);padding:11px 12px;min-width:0}
.node::after{content:"";position:absolute;inset:-1px;border-radius:12px;border:1px solid var(--signal);box-shadow:0 0 0 3px rgba(69,211,247,.12),0 10px 30px -10px rgba(69,211,247,.45);opacity:0;transition:opacity .35s;pointer-events:none}
.node.is-lit::after{opacity:1}
.node.is-warn::after{border-color:var(--planned);box-shadow:0 0 0 3px rgba(245,190,106,.12)}
.node b{display:block;font:620 13.5px/1.25 var(--display);color:var(--on-ink)}
.node small{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:var(--on-ink-3)}
.node .st{display:block;margin-top:6px;font-size:11.5px;font-weight:600;color:var(--signal);min-height:1em}

.node.is-warn .st{color:var(--planned)}
.node-kind{display:inline-block;margin-bottom:6px;font-size:11.5px;font-weight:600;color:var(--on-ink-3);border:1px solid var(--ink-line-2);border-radius:6px;padding:2px 6px}
.node.ghost{opacity:.5;transition:opacity .35s}
.node.ghost.is-lit{opacity:1}
/* scene A */
.sc-auto{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"email ai rules erp" "portal ai human rpa" "done done done done";gap:22px 34px;align-items:center}
.fields{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin-top:9px;font-size:11.5px}
.fields dt{color:var(--on-ink-3)}
.fields dd{margin:0;color:var(--on-ink);font-weight:500;opacity:.25;transition:opacity .3s}
.node.is-filled .fields dd{opacity:1}
.outcome{grid-area:done;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;border:1px dashed var(--ink-line-2);font-size:13.5px;color:var(--on-ink-3);position:relative;z-index:1}
.outcome svg{width:18px;height:18px;flex:none}
.outcome.is-lit{border-style:solid;border-color:rgba(75,224,176,.5);color:var(--on-ink)}
.outcome.is-lit svg{color:var(--built)}
.outcome.is-warn{border-color:rgba(245,190,106,.5)}
/* scene B */
.sc-int{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"store hub erp" "crm hub wh" ". payload support";gap:22px 44px;align-items:center}
.hub{grid-area:hub;text-align:center;padding:22px 14px;background:linear-gradient(180deg,rgba(61,155,255,.16),rgba(16,36,59,.9));border-color:rgba(69,211,247,.35)}
.hub b{font-size:15px}
.payload{grid-area:payload;position:relative;z-index:1;margin:0;padding:12px;border-radius:10px;background:var(--abyss);border:1px solid var(--ink-line);font:12px/1.55 var(--code);color:#CFE6F7;white-space:pre-wrap;word-break:break-word;min-height:120px}
.payload .k{color:#8EC9FF}.payload .s{color:#9BE6C9}.payload .n{color:#F5C98A}
.events{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.events button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--ink-line-2);font:560 13.5px/1 var(--body);color:var(--on-ink-2)}
.events button[aria-pressed="true"]{border-color:var(--signal);color:var(--on-ink);background:rgba(69,211,247,.08)}
/* scene C */
.sc-cus{display:grid;gap:30px}
.layer-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center}
.layer-row>span{font:600 13px/1.25 var(--display);color:var(--on-ink-3);display:flex;align-items:center;gap:8px}
.layer-row>span::before{content:"";width:12px;height:13px;clip-path:var(--hexagon);background:var(--grad-signal);opacity:.8;flex:none}
.layer-nodes{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px}
.trace{counter-reset:t;display:grid;gap:2px;margin-top:22px}
.trace li{counter-increment:t;display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;padding:6px 0;font-size:14px;line-height:1.45;color:var(--on-ink-3);transition:color .3s}
.trace li::before{content:counter(t);width:22px;height:22px;border-radius:50%;border:1px solid var(--ink-line-2);display:grid;place-items:center;font:600 11px/1 var(--display);color:var(--on-ink-3);transition:background-color .3s,color .3s,border-color .3s}
.trace li.on{color:var(--on-ink)}
.trace li.on::before{background:var(--signal);border-color:var(--signal);color:var(--abyss)}
/* scene D */
.sc-ms{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px 40px;align-items:start}
.form-mock{position:relative;z-index:1;border-radius:12px;background:#F7F9FB;color:var(--graphite);overflow:hidden;border:1px solid #CBD5E1}
.fm-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:#1E3A5F;color:#fff;font-size:12.5px;font-weight:600}
.fm-top span{font-weight:500;opacity:.8}
.bpf{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:12px 14px;border-bottom:1px solid #E2E8F0;background:#fff}
.bpf li{position:relative;font-size:11px;color:var(--mist);padding-top:16px;text-align:center}
.bpf li::before{content:"";position:absolute;top:0;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;border:2px solid #CBD5E1;background:#fff;z-index:1}
.bpf li::after{content:"";position:absolute;top:5px;left:-50%;right:50%;height:2px;background:#CBD5E1}
.bpf li:first-child::after{display:none}
.bpf li.done{color:var(--graphite)}
.bpf li.done::before{background:#1F56D6;border-color:#1F56D6}
.bpf li.done::after{background:#1F56D6}
.bpf li.cur{color:#1F56D6;font-weight:600}
.bpf li.cur::before{border-color:#1F56D6}
.fm-body{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:14px}
.fm-body div{display:grid;gap:3px}
.fm-body label,.fm-body .lbl{font-size:11px;font-weight:600;color:var(--mist)}
.fm-body output,.fm-body .val{font-size:12.5px;padding:7px 9px;border:1px solid #E2E8F0;border-radius:6px;background:#fff;color:var(--graphite)}
.fm-body .fm-status{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;font-size:12px;padding-top:4px}
.fm-status b{font-weight:600}
.flow-lane{display:grid;gap:18px}
.scene-steps{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
/* services index */
.svc-index{margin-top:clamp(64px,8vw,104px)}
.svc-index>h3{font-size:clamp(24px,2.4vw,30px);margin-bottom:22px}
.svc-list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink-line)}
.svc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:start;padding:22px 0;border-bottom:1px solid var(--ink-line);scroll-margin-top:calc(var(--header-h) + 24px)}
.svc:nth-child(odd){padding-right:clamp(16px,3vw,40px)}
.svc:nth-child(even){padding-left:clamp(16px,3vw,40px);border-left:1px solid var(--ink-line)}
.svc h4{font-size:18px;letter-spacing:-.01em}
.svc p{grid-column:1;font-size:15px;color:var(--on-ink-3);max-width:50ch}
.svc button{grid-column:2;grid-row:1/span 2;align-self:center;min-height:40px;padding:0 12px;border-radius:9px;border:1px solid var(--ink-line-2);font:560 13px/1 var(--body);color:var(--on-ink-2);white-space:nowrap}
.svc button:hover{border-color:var(--signal);color:var(--on-ink)}
.svc:target{background:linear-gradient(90deg,rgba(69,211,247,.07),transparent 70%)}
.svc-foot{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.svc-foot p{color:var(--on-ink);font-weight:500;font-size:17px}

/* ============ How we work ============ */
.process{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.process-visual{position:sticky;top:calc(var(--header-h) + 32px);height:min(560px,calc(100svh - var(--header-h) - 64px));overflow:clip}
.process-visual .strata{position:absolute;inset:0;--pw:250px;--gap:48px}
.strata--light .face{color:#1F56D6;background:linear-gradient(162deg,rgba(255,255,255,.95),rgba(214,226,239,.85))}
.strata--light .plate::before{background:#C6D3E1}
.strata--light .plate::after{background:#AFC0D2}
.strata--light .etch-node{fill:#fff}
.strata--light .glow{background:radial-gradient(closest-side,rgba(61,155,255,.18),transparent 70%)}
.strata--light .rim{stroke:url(#rimGradLight)}
.strata--light .filament{background:linear-gradient(to bottom,rgba(31,86,214,0),rgba(31,86,214,.6) 30%,rgba(31,86,214,.6) 70%,rgba(31,86,214,0))}
.strata--light .plate,.strata--light .filament,.strata--light .pulse-wrap{transition:opacity .6s var(--ease-out)}
.strata--light [data-on]:not(.is-on){opacity:0}
.strata--light .plate.is-wire:not(.is-solid) .face{background:transparent}
.strata--light .plate.is-wire:not(.is-solid) .face use:not(.rim){opacity:0}
.strata--light .face use{transition:opacity .6s}
.strata--light .plate.is-wire:not(.is-solid) .rim{stroke:#1F56D6;stroke-dasharray:14 12}
.strata--light .plate.is-wire:not(.is-solid)::before,.strata--light .plate.is-wire:not(.is-solid)::after{opacity:0}
.strata--light .face .etch{transition:opacity .6s}
.strata--light .plate[data-l="ui"] .face{background:linear-gradient(162deg,#fff,rgba(205,224,246,.92))}
.strata--light .plate[data-l="next"] .face{background:linear-gradient(162deg,rgba(69,211,247,.55),rgba(61,155,255,.25))}
/* process pulses play once when "Evolve" is reached (no endless loop without a pause control) */
.strata--light .pulse{animation:none}
.strata--light[data-stage="5"] .pulse.is-on{animation:rise 3.4s var(--ease-io) var(--delay,0s) 1 both}
.strata--light .pulse{background:radial-gradient(closest-side,#fff 0,#7FD9F5 35%,rgba(31,86,214,.45) 60%,rgba(31,86,214,0))}
.stage-caption{position:absolute;left:0;right:0;bottom:0;text-align:center;font:600 14px/1.3 var(--display);color:var(--graphite)}
.stage-caption span{display:block;font:400 13px/1.4 var(--body);color:var(--mist);margin-top:3px}
.steps{display:grid}
.step{display:grid;grid-template-columns:52px 1fr;gap:0 18px;padding:clamp(28px,6vh,56px) 0;border-top:1px solid var(--rule);min-height:clamp(220px,34vh,320px);align-content:start}
.step:last-child{border-bottom:1px solid var(--rule)}
.step-num{width:44px;height:50px;clip-path:var(--hexagon);display:grid;place-items:center;font:700 15px/1 var(--display);color:var(--slate);background:var(--rule);transition:background-color .4s,color .4s;font-variant-numeric:tabular-nums}
.step.is-active .step-num,.no-io .step-num{background:var(--graphite);color:#fff}
.step h3{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.025em}
.step p{grid-column:2;margin-top:10px;color:var(--mist);max-width:46ch}
.step .out{grid-column:2;margin-top:14px;display:flex;gap:9px;align-items:flex-start;font:560 14.5px/1.4 var(--display);color:var(--graphite)}
.step .out svg{width:16px;height:16px;color:var(--built-ink);flex:none;margin-top:2px}
.approach-note{margin-top:28px;font-size:14px;color:var(--mist);max-width:60ch}

/* ============ Technology ============ */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters button{min-height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--rule-2);font:560 14px/1 var(--body);color:var(--slate);background:var(--white)}
.filters button:hover{border-color:var(--graphite)}
.filters button[aria-pressed="true"]{background:var(--graphite);border-color:var(--graphite);color:#fff}
.tech-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--graphite)}
.tech{padding:22px 22px 26px 0}
.tech + .tech{padding-left:22px;border-left:1px solid var(--rule)}
.tech h3{font-size:17px;letter-spacing:-.01em}
.tech p{font-size:14px;color:var(--mist);margin-top:6px;line-height:1.5}
.tech ul{margin-top:18px;display:flex;flex-wrap:wrap;gap:7px}
.tech li{display:inline-flex;align-items:center;gap:7px;font:560 14px/1 var(--display);color:var(--graphite);padding:8px 11px;border-radius:8px;background:var(--white);border:1px solid var(--rule);transition:opacity .3s,transform .3s var(--ease-out)}
.tech li::before{content:"";width:8px;height:9px;clip-path:var(--hexagon);background:var(--grad-signal)}
.tech li.is-dim{opacity:.32;transform:scale(.97)}
.fineprint{margin-top:22px;font-size:13px;color:var(--mist)}
.filter-status{font-size:13.5px;color:var(--mist);margin:-14px 0 20px;min-height:1.4em}

/* ============ About ============ */
.about{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,7vw,112px);align-items:start;border-top:1px solid var(--rule);padding-top:clamp(56px,7vw,96px)}
.about-body>p{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--slate)}
.about-body>p + p{margin-top:18px}
.about .h2{font-size:clamp(32px,3.6vw,50px)}
.principles{margin-top:40px;display:grid;border-top:1px solid var(--rule)}
.principle{display:grid;grid-template-columns:30px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--rule)}
.principle i{width:22px;height:25px;clip-path:var(--hexagon);background:var(--grad-signal);margin-top:2px}
.principle h3{font-size:18px}
.principle p{margin-top:6px;font-size:15px;color:var(--mist)}

/* ============ Contact ============ */
.contact{background:var(--abyss);position:relative;isolation:isolate;overflow:clip}
.contact::before{content:"";position:absolute;z-index:-1;right:-180px;top:-120px;width:720px;height:830px;clip-path:var(--hexagon);background:radial-gradient(closest-side,rgba(61,155,255,.18),rgba(69,211,247,.04) 70%,transparent);pointer-events:none}
.contact-art{position:absolute;z-index:-1;right:-140px;top:50%;width:min(760px,70vw);height:auto;transform:translateY(-50%) rotate(-8deg);pointer-events:none;overflow:visible}
.contact-art use{fill:none;stroke:url(#rimGrad)}
.contact-art .r1{stroke-width:2.5;opacity:.55}.contact-art .r2{stroke-width:2;opacity:.32}.contact-art .r3{stroke-width:1.6;opacity:.18}
@media (max-width:900px){.contact-art{top:auto;bottom:-160px;transform:rotate(-8deg);width:520px;right:-220px}}
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start}

.contact .lead{margin-top:20px}
.next{margin-top:40px;display:grid;gap:20px;counter-reset:n}
.next li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;counter-increment:n}
.next li::before{content:counter(n);width:30px;height:34px;clip-path:var(--hexagon);display:grid;place-items:center;font:650 13px/1 var(--display);color:var(--abyss);background:var(--grad-signal)}
.next strong{display:block;color:var(--on-ink);font:600 16px/1.3 var(--display)}
.next span{font-size:15px;color:var(--on-ink-3)}
.contact-card{background:var(--white);color:var(--slate);border-radius:20px;box-shadow:0 40px 100px -30px rgba(0,0,0,.7);color-scheme:light;overflow:hidden;--focus:#1F56D6}
.contact-card :focus-visible{--focus:#1F56D6}
.contact-card h3{color:var(--graphite)}
.mode-tabs{display:grid;grid-template-columns:1fr 1fr;background:#E9EEF3;padding:5px;gap:5px}
.mode-tab{min-height:46px;border-radius:10px;font:600 14.5px/1.2 var(--display);color:var(--mist);padding:6px 10px}
.mode-tab small{display:block;font:500 11.5px/1.2 var(--body);color:var(--mist);margin-top:2px}
.mode-tab[aria-selected="true"]{background:var(--white);color:var(--graphite);box-shadow:0 1px 3px rgba(14,28,43,.12)}
.mode-panel{padding:clamp(22px,3vw,34px)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:6px;align-content:start}
.field.full{grid-column:1/-1}
.field label{font:600 14px/1.3 var(--display);color:var(--graphite)}
.field label .opt{font-weight:400;color:var(--mist)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:11px 13px;border:1px solid var(--rule-2);border-radius:10px;background:#fff;color:var(--graphite);font-size:16px;transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:132px;resize:vertical;line-height:1.5}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2356687D' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#9AAABB}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;border-color:#1F56D6;box-shadow:0 0 0 3px rgba(31,86,214,.22)}
.field [aria-invalid="true"]{border-color:#C2281D}
.err{font-size:13px;color:var(--danger)}
.err:empty{display:none}
.form-foot{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;justify-content:space-between}
.form-foot p{font-size:13px;color:var(--mist);max-width:40ch}
.form-foot p a{color:var(--link-ink);text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-error{margin-top:16px;padding:12px 14px;border-radius:10px;background:#FDECEA;border:1px solid #F5C2BD;color:#8A1C12;font-size:14.5px;line-height:1.5}
.form-error a{color:inherit;font-weight:600;text-decoration:underline}
.btn[aria-busy="true"]{cursor:progress;opacity:.75}
.form-done{display:none}
.is-done #contact-form{display:none}
.is-done .form-done{display:block}
.form-done h3{font-size:22px}
.form-done p{margin-top:8px;color:var(--mist)}
.form-done pre{margin:16px 0 0;padding:14px;border-radius:10px;background:var(--porcelain);border:1px solid var(--rule);font:13.5px/1.55 var(--body);white-space:pre-wrap;color:var(--graphite);max-height:260px;overflow:auto}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
/* scoping helper (rule-based demo) */
.helper-note{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:10px;background:var(--planned-soft);color:#5E3B00;font-size:13.5px;line-height:1.45;margin-bottom:18px}
.helper-note svg{width:18px;height:18px;flex:none;margin-top:1px}
.samples{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.samples button{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--rule-2);font-size:13px;color:var(--slate);background:#fff;text-align:left}
.samples button:hover{border-color:var(--graphite);color:var(--graphite)}
.convo{display:grid;gap:14px;margin-top:20px}
.msg{padding:14px 16px;border-radius:14px;background:var(--porcelain);border:1px solid var(--rule);font-size:14.5px;line-height:1.5;color:var(--slate)}
.msg h3{font-size:15px;margin-bottom:8px}
.signals{display:flex;flex-wrap:wrap;gap:6px}
.signals span{font-size:12.5px;font-weight:600;padding:4px 9px;border-radius:999px;background:#DCEBFD;color:#173F9C}
.suggest{display:grid;gap:8px;margin-top:4px}
.suggest li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start}
.suggest li i{width:16px;height:18px;clip-path:var(--hexagon);background:var(--grad-signal);margin-top:3px}
.suggest b{color:var(--graphite);font-weight:600}
.suggest small{display:block;font-size:12.5px;color:var(--mist)}
.qgroup{border:0;margin:14px 0 0;padding:0}
.qgroup legend{font:600 14px/1.3 var(--display);color:var(--graphite);margin-bottom:8px;padding:0}
.opts{display:flex;flex-wrap:wrap;gap:7px}
.opts label{position:relative}
.opts input{position:absolute;opacity:0;width:1px;height:1px}
.opts span{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--rule-2);background:#fff;font-size:13px;color:var(--slate);cursor:pointer}
.opts input:checked + span{background:var(--graphite);border-color:var(--graphite);color:#fff}
.opts input:focus-visible + span{outline:2px solid #1F56D6;outline-offset:2px}
.brief dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}
.brief dt{color:var(--mist);font-weight:500}
.brief dd{margin:0;color:var(--graphite);overflow-wrap:anywhere}

/* ============ Footer ============ */
.footer{background:var(--abyss);color:var(--on-ink-3);border-top:1px solid var(--ink-line);padding:64px 0 32px;font-size:14.5px}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:32px}
.footer-about{margin-top:16px;max-width:32ch;line-height:1.55}
.footer h2{font:600 13.5px/1 var(--display);color:var(--on-ink-2);margin-bottom:14px;letter-spacing:0}
.footer li + li{margin-top:9px}
.footer a:hover{color:var(--on-ink)}
.footer-bottom{margin-top:52px;padding-top:24px;border-top:1px solid var(--ink-line);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:13px}
.legal-note{max-width:62ch}
.legal-note:focus{outline:2px solid var(--signal);outline-offset:4px}

.toast{position:fixed;left:50%;bottom:24px;z-index:120;transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--graphite);color:#fff;padding:12px 18px;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 20px 50px -12px rgba(0,0,0,.5);transition:opacity .2s,transform .2s var(--ease-out);max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ============ Responsive ============ */
@media (max-width:1180px){
  .scene-panel{grid-template-columns:1fr}
  .scene-copy{max-width:66ch}
  .tech-map{grid-template-columns:1fr 1fr}
  .tech:nth-child(3){padding-left:0;border-left:0}
  .tech:nth-child(n+3){border-top:1px solid var(--rule)}
  .dropdown-wide{min-width:540px}
}
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;row-gap:8px;padding-bottom:24px}
  .hero-visual{min-height:clamp(340px,46vw,440px);margin-inline:calc(var(--gutter) * -1)}
  .hero-visual .rig{left:44%}
  .hero-foot{padding-inline:var(--gutter)}
  .portfolio{grid-template-columns:1fr}
  .rail{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail h3{grid-column:1/-1}
  .process{grid-template-columns:1fr}
  .process-visual{position:relative;top:0;height:380px}
  .step{min-height:0}
}
@media (max-width:900px){
  .nav,.header-cta .btn{display:none}
  .menu-toggle{display:inline-flex}
  .section-head{grid-template-columns:1fr;align-items:start}
  .builds-head{flex-direction:column}
  .halves{grid-template-columns:1fr}
  .half{padding-right:0}
  .half + .half{border-left:0;border-top:1px solid var(--rule);padding-left:0}
  .scene-tabs{grid-template-columns:1fr 1fr}
  .product-top{grid-template-columns:1fr}
  .product-lists{grid-template-columns:1fr}
  .svc-list{grid-template-columns:1fr}
  .svc:nth-child(n){padding-left:0;padding-right:0;border-left:0}
  .about,.contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
  .sc-ms{grid-template-columns:1fr}
}
@media (max-width:760px){
  .sc-auto{grid-template-columns:1fr 1fr;grid-template-areas:"email portal" "ai ai" "rules human" "erp rpa" "done done";gap:26px 16px}
  .sc-int{grid-template-columns:1fr 1fr;grid-template-areas:"store crm" "hub hub" "erp wh" "support support" "payload payload";gap:26px 16px}
  .layer-row{grid-template-columns:1fr;gap:10px}
  .layer-nodes{grid-template-columns:repeat(var(--m,var(--n)),minmax(0,1fr))}
  .app{grid-template-columns:1fr}
  .app-side{display:none}
  .composer{grid-template-columns:1fr}
  .preview{display:none}
  .charts{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero-actions .btn{flex:1 1 auto}
  .hero-actions .text-link{margin-left:0}
  .hero-visual{min-height:340px}
  .hero-visual .strata{--pw:180px;--gap:40px}
  .hero-visual .rig{left:38%}
  .tag b{font-size:12.5px}
  .tag small{display:none}
  .tag::before{width:18px}
  .hero-foot{flex-direction:row-reverse;justify-content:space-between}
  .hero-foot p{display:none}
  .svc-cols{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr}
  .svc button{grid-column:1;grid-row:auto;justify-self:start;margin-top:10px}
  .rail{grid-template-columns:1fr}
  .chapters{width:100%}
  .chapter-tab{min-width:0;flex:1;padding:9px 10px 11px}
  .chapter-tab span{display:none}
  .week{grid-template-columns:repeat(3,minmax(0,1fr))}
  .week .day:nth-child(n+4){display:none}
  .day{min-height:210px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpis .kpi:nth-child(3){display:none}
  .scene{padding:14px}
  .scene-tabs{grid-template-columns:1fr}
  .scene-tab{padding:12px 0 14px}
  .scene-tab::after{right:0}
  .layer-nodes{--m:2}
  .process-visual{height:320px}
  .process-visual .strata{--pw:180px;--gap:36px}
  .step{grid-template-columns:44px 1fr;gap:0 14px}
  .step-num{width:38px;height:44px}
  .tech-map{grid-template-columns:1fr}
  .tech + .tech,.tech:nth-child(3){padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .form-grid{grid-template-columns:1fr}
  .form-foot .btn{width:100%}
  .fm-body{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .dropdown-wide{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .pulse,.spark{display:none}
  .anim-toggle{display:none} /* nothing moves, so no pause control is needed */
}

/* ============ Secondary pages (privacy notice, 404) ============ */
.page-header .header-inner{justify-content:space-between}
.page-main{background:var(--porcelain);color:var(--slate);color-scheme:light;padding-block:clamp(56px,8vw,112px);min-height:calc(100svh - var(--header-h) - 220px)}
.prose{max-width:68ch}
.prose h1{font-size:clamp(34px,4vw,52px);letter-spacing:-.025em;line-height:1.05;margin-bottom:12px}
.prose .updated{color:var(--mist);font-size:15px;margin-bottom:36px}
.prose h2{font-size:clamp(20px,1.8vw,24px);margin:36px 0 10px;letter-spacing:-.01em}
.prose p,.prose li{font-size:17px;line-height:1.65}
.prose p + p{margin-top:12px}
.prose ul{list-style:disc;padding-left:22px;margin-top:10px;display:grid;gap:6px}
.prose ul + p{margin-top:14px}
.prose h3{font-size:18px;margin:22px 0 6px;letter-spacing:-.005em}
.prose h2 + h3{margin-top:12px}
.prose a{color:var(--link-ink);text-decoration:underline;text-underline-offset:2px}
.notfound{display:grid;gap:18px;justify-items:start}
.notfound h1{font-size:clamp(40px,6vw,72px);letter-spacing:-.03em}
.notfound p{font-size:18px;color:var(--mist);max-width:46ch}