@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/Inter-var.woff2') format('woff2-variations'),url('/assets/fonts/Inter-var.woff2') format('woff2');}@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('/assets/fonts/JetBrainsMono-var.woff2') format('woff2-variations'),url('/assets/fonts/JetBrainsMono-var.woff2') format('woff2');}

:root{
  /* ground. The reference's darkbg / darkcard / darkborder, verbatim. */
  --ground:#07090e; --surface:#0f141c; --surface-2:#131a24; --line:#1f293d;

  /* ink ramp. --ink-3 is NOT the reference's slate-500: that measures 3.9:1 on the ground
     and it carries words in the stat tiles. #8595ad is 5.6:1 and reads the same. */
  --ink:#ffffff; --ink-2:#cbd5e1; --ink-3:#94a3b8; --ink-4:#8595ad;
  --line-ink:#64748b;   /* rules and dividers only, never text */

  /* accents, from the reference's tailwind.config brand block */
  --cyan:#06b6d4; --cyan-t:#22d3ee; --accent:#00f2fe;
  --blue:#2563eb; --blue-t:#60a5fa;
  --violet:#8b5cf6; --violet-t:#a78bfa;
  --emerald:#10b981; --emerald-t:#34d399;
  --amber:#f59e0b; --amber-t:#fbbf24;
  --rose-t:#fb7185;

  --brand:linear-gradient(90deg,#06b6d4,#2563eb,#8b5cf6);

  --shell:min(1280px,92vw);
  --bar:80px;

  /* the reference's rounding scale: xl / 2xl / 3xl */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:24px;

  --ease:cubic-bezier(.22,1,.36,1);
  --t:.5s;
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ground);color:var(--ink-2);
  font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1rem;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{background:var(--blue);color:#fff}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}

/* Type scale. The reference's: h1 36->72, h2 30->48, h3 30, h4 20, body 14-16.
   Nothing is uppercase except .mono eyebrows - that is the whole point of the change. */
h1,h2,h3,h4,h5{margin:0;color:var(--ink);font-weight:800;letter-spacing:-.025em;line-height:1.1}
.d1{font-size:clamp(2.25rem,5.2vw,4.5rem);line-height:1.08;letter-spacing:-.035em}
.d2{font-size:clamp(1.875rem,3.4vw,3rem);line-height:1.12}
.d3{font-size:clamp(1.5rem,2.2vw,1.875rem);font-weight:800}
.d4{font-size:1.25rem;font-weight:700;letter-spacing:-.018em;line-height:1.3}
.d5{font-size:.9375rem;font-weight:700;letter-spacing:-.008em;line-height:1.4}
p{margin:0}

.lead{font-size:clamp(1rem,1.15vw,1.125rem);line-height:1.7;color:var(--ink-2)}
.lead-lg{font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.65;color:var(--ink-2)}
.sm{font-size:.9375rem;line-height:1.65;color:var(--ink-3)}
.xs{font-size:.8125rem;line-height:1.6;color:var(--ink-4)}

.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:500;font-variant-ligatures:none}
.eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-t);
  display:block}

.grad{background:var(--brand);-webkit-background-clip:text;background-clip:text;
  color:transparent}

.ic{width:1.25rem;height:1.25rem;flex:none}
.ic-lg{width:1.5rem;height:1.5rem;flex:none}
.ic-sm{width:1rem;height:1rem;flex:none}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--cyan);
  color:#04121a;padding:12px 20px;border-radius:0 0 var(--r) 0;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--cyan-t);outline-offset:3px;border-radius:4px}


/* --- utility banner. The reference's top security strip. ---------------- */
.util{background:linear-gradient(90deg,#0b1220,#0d1524 45%,#120f24);
  border-bottom:1px solid var(--line);font-size:.75rem;color:var(--ink-3)}
.util .in{width:var(--shell);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:8px 0;flex-wrap:wrap}
.util .l,.util .r{display:flex;align-items:center;gap:10px;min-width:0}
.util .r{gap:18px}
.pill-live{display:inline-flex;align-items:center;gap:7px;padding:2px 9px;border-radius:5px;
  font-family:'JetBrains Mono',monospace;font-size:.625rem;font-weight:600;letter-spacing:.06em;
  background:rgba(16,185,129,.1);color:var(--emerald-t);border:1px solid rgba(16,185,129,.22)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--emerald-t);flex:none}
.util a{color:var(--ink-3);transition:color .2s}
.util a:hover{color:var(--cyan-t)}
.util .r .it{display:inline-flex;align-items:center;gap:7px;font-size:.6875rem}
.util .r .it .ic-sm{color:var(--cyan-t)}

/* --- header ------------------------------------------------------------- */
.top{position:sticky;top:0;z-index:60;height:var(--bar);
  background:rgba(15,20,28,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(31,41,61,.8);transition:background .3s,border-color .3s}
.top.scrolled{background:rgba(7,9,14,.92);border-bottom-color:var(--line)}
.top .in{width:var(--shell);margin:0 auto;height:100%;display:flex;align-items:center;gap:clamp(12px,2vw,32px)}

.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand .mk{width:40px;height:40px;border-radius:var(--r);flex:none;padding:1.5px;
  background:linear-gradient(135deg,var(--cyan),var(--blue) 55%,var(--violet));
  box-shadow:0 6px 20px -8px rgba(6,182,212,.5);transition:box-shadow .3s}
.brand:hover .mk{box-shadow:0 8px 26px -6px rgba(6,182,212,.75)}
.brand .mk>span{width:100%;height:100%;border-radius:10.5px;background:#05070c;
  display:flex;align-items:center;justify-content:center;color:var(--cyan-t)}
.brand .mk .ic-lg{transition:transform .7s var(--ease)}
.brand:hover .mk .ic-lg{transform:rotate(180deg)}
.brand .wm{font-size:1.125rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);
  line-height:1.1;white-space:nowrap}
.brand .sub{display:block;font-family:'JetBrains Mono',monospace;font-size:.5625rem;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin-top:2px}

.nav{display:flex;align-items:center;gap:clamp(10px,1.5vw,26px);margin-left:auto;
  list-style:none;margin-block:0;padding:0;height:100%}
.nav>li{position:relative;height:100%;display:flex;align-items:center}
.nav>li>a,.nav>li>button{display:inline-flex;align-items:center;gap:6px;background:none;
  border:0;padding:0;font-size:.875rem;font-weight:500;color:var(--ink-2);cursor:pointer;
  transition:color .2s;white-space:nowrap}
.nav>li>a:hover,.nav>li>button:hover,.nav>li.open>button{color:var(--cyan-t)}
.nav>li>a[aria-current]{color:var(--cyan-t)}
.caret{width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);opacity:.6;transition:transform .25s}
.nav>li.open .caret{transform:rotate(225deg) translate(-1px,-1px)}

/* --- mega menu. The reference's 540px two-line product menu. ------------ */
.menu{position:absolute;top:100%;left:-16px;width:540px;padding-top:12px;list-style:none;
  margin:0;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s}
.nav>li.open .menu{opacity:1;visibility:visible;transform:translateY(0)}
.menu .sheet{background:rgba(7,9,14,.97);backdrop-filter:blur(16px);
  border:1px solid rgba(51,65,85,.6);border-radius:var(--r-lg);padding:14px;
  box-shadow:0 28px 60px -20px rgba(0,0,0,.85)}
.menu .hd{font-family:'JetBrains Mono',monospace;font-size:.625rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);padding:4px 12px 10px}
.menu li a{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:var(--r);
  transition:background .18s}
.menu li a:hover{background:rgba(30,41,59,.6)}
.menu .bx{width:38px;height:38px;border-radius:var(--r-sm);display:flex;align-items:center;
  justify-content:center;flex:none;transition:background .18s,color .18s}
.menu .n{display:block;font-size:.9375rem;font-weight:600;color:var(--ink);transition:color .18s}
.menu .d{display:block;font-size:.75rem;color:var(--ink-3);margin-top:2px;line-height:1.5}
.menu .c-cyan .bx{background:rgba(6,182,212,.1);color:var(--cyan-t)}
.menu .c-blue .bx{background:rgba(37,99,235,.14);color:var(--blue-t)}
.menu .c-violet .bx{background:rgba(139,92,246,.12);color:var(--violet-t)}
.menu .c-emerald .bx{background:rgba(16,185,129,.1);color:var(--emerald-t)}
.menu .c-amber .bx{background:rgba(245,158,11,.1);color:var(--amber-t)}
.menu .c-cyan a:hover .bx{background:var(--cyan);color:#05070c}
.menu .c-blue a:hover .bx{background:var(--blue);color:#fff}
.menu .c-violet a:hover .bx{background:var(--violet);color:#fff}
.menu .c-emerald a:hover .bx{background:var(--emerald);color:#05070c}
.menu .c-amber a:hover .bx{background:var(--amber);color:#05070c}
.menu .tag{font-family:'JetBrains Mono',monospace;font-size:.5625rem;font-weight:600;
  padding:2px 7px;border-radius:4px;letter-spacing:.06em;white-space:nowrap}
.menu .row{display:flex;align-items:center;justify-content:space-between;gap:10px}

.burger{display:none;width:42px;height:42px;background:none;border:1px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;position:relative;flex:none;margin-left:auto}
.burger span,.burger span::before,.burger span::after{position:absolute;left:11px;width:18px;
  height:1.6px;background:var(--ink-2);transition:transform .3s var(--ease),opacity .2s}
.burger span{top:calc(50% - .8px)}
.burger span::before{content:"";top:-6px;left:0}
.burger span::after{content:"";top:6px;left:0}
.top.open .burger span{background:transparent}
.top.open .burger span::before{transform:translateY(6px) rotate(45deg)}
.top.open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* --- footer ------------------------------------------------------------- */
.foot{border-top:1px solid var(--line);background:#05070c;padding:clamp(48px,7vh,80px) 0 32px;
  margin-top:clamp(56px,9vh,110px)}
.foot .in{width:var(--shell);margin:0 auto}
.foot-grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:clamp(24px,4vw,56px);
  align-items:start}
.foot .bmk{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.foot .bmk .mk{width:36px;height:36px;border-radius:10px;padding:1.5px;
  background:linear-gradient(135deg,var(--cyan),var(--blue) 55%,var(--violet))}
.foot .bmk .mk>span{width:100%;height:100%;border-radius:9px;background:#05070c;display:flex;
  align-items:center;justify-content:center;color:var(--cyan-t)}
.foot .bmk b{font-size:1.0625rem;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.foot .tag{font-size:.875rem;line-height:1.65;color:var(--ink-3);max-width:34ch}
.foot h4{font-family:'JetBrains Mono',monospace;font-size:.6875rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot ul a{font-size:.875rem;color:var(--ink-3);transition:color .2s}
.foot ul a:hover{color:var(--cyan-t)}
.foot-base{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  margin-top:clamp(32px,5vh,52px);padding-top:22px;border-top:1px solid var(--line);
  font-size:.6875rem;color:var(--ink-4)}


main{display:block}
.sec{padding:clamp(56px,8vh,96px) 0;position:relative}
/* the sticky header is position:sticky, so an in-page anchor lands underneath it
   unless every jump target reserves its height. */
section[id],[id]{scroll-margin-top:calc(var(--bar) + 20px)}
.sec.tight{padding:clamp(40px,5.5vh,64px) 0}
.sec.band{background:rgba(5,7,12,.6);border-block:1px solid var(--line)}
.in{width:var(--shell);margin:0 auto;position:relative;z-index:1}

/* Section openers. Centred like the reference, left-aligned where a section has a
   control on the right (programs). */
/* 48rem is the reference's max-w-3xl. At 56ch the section headings wrapped to three
   lines, which is the "header going 2 lines" complaint in a different costume. */
.head{max-width:min(48rem,100%);margin:0 auto clamp(36px,5vh,60px);text-align:center}
.head .eyebrow{margin-bottom:10px}
.head .lead{margin-top:14px;color:var(--ink-3)}
.head-l{max-width:none;margin:0 0 clamp(32px,4.5vh,52px);text-align:left;display:flex;
  flex-wrap:wrap;gap:22px;align-items:flex-end;justify-content:space-between}
.head-l .t{max-width:58ch}
.head-l .eyebrow{margin-bottom:8px}
.head-l .lead{margin-top:12px;color:var(--ink-3)}

/* --- ambient. The reference's grid-pattern + glow orbs. ----------------- */
.dots{background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:32px 32px}
.orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.orb-a{top:22%;left:50%;width:min(700px,92vw);height:500px;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,rgba(6,182,212,.15),rgba(139,92,246,.05) 50%,transparent 80%)}
.orb-b{top:30%;right:-40px;width:min(384px,70vw);height:384px;
  background:rgba(139,92,246,.1);filter:blur(64px)}
@media (hover:hover) and (min-width:900px) and (prefers-reduced-motion:no-preference){
  .orb-a{animation:pulse 8s infinite ease-in-out}
}
@keyframes pulse{0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.6;transform:translate(-50%,-50%) scale(1.05)}}

/* --- scroll reveal -----------------------------------------------------
   Aswin: "each will be separate cards which will render left and right in the
   animation basis ... from fade to block". Hence the directional variants.
   Gated on .js so a script failure cannot blank the page - audit enforces this. */
.js .rv{opacity:0;transform:translateY(22px);
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
.js .rv-l{transform:translate3d(-38px,10px,0)}
.js .rv-r{transform:translate3d(38px,10px,0)}
.js .rv.vis{opacity:1;transform:none}
.js .d1-1{transition-delay:.06s}.js .d1-2{transition-delay:.12s}
.js .d1-3{transition-delay:.18s}.js .d1-4{transition-delay:.24s}
.js .d1-5{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
}


/* --- glass panel, the reference's core surface ------------------------- */
.glass{background:rgba(15,20,28,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg)}
.glass-h{transition:border-color .3s,box-shadow .3s}
.glass-h:hover{border-color:rgba(6,182,212,.3);box-shadow:0 10px 30px -10px rgba(6,182,212,.15)}

/* --- buttons ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:var(--r);font-size:.875rem;font-weight:700;
  letter-spacing:.01em;cursor:pointer;border:1px solid transparent;
  transition:transform .18s var(--ease),box-shadow .25s,background .25s,border-color .25s;
  text-align:center}
.btn:active{transform:scale(.985)}
.btn-pri{background:linear-gradient(90deg,var(--cyan),var(--blue) 55%,var(--violet));color:#fff;
  box-shadow:0 12px 30px -12px rgba(6,182,212,.55)}
.btn-pri:hover{box-shadow:0 16px 38px -10px rgba(6,182,212,.75);transform:translateY(-1px)}
.btn-sec{background:var(--surface);color:var(--ink-2);border-color:rgba(51,65,85,.8)}
.btn-sec:hover{background:#18202c;color:var(--ink);border-color:var(--line-ink)}
.btn-sec .ic{color:var(--ink-3);transition:color .2s}
.btn-sec:hover .ic{color:var(--cyan-t)}
.btn-sm{padding:10px 18px;font-size:.8125rem}
.btn-cyan{background:var(--cyan);color:#04121a}
.btn-cyan:hover{background:var(--cyan-t)}

/* --- badges and pills --------------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border-radius:999px;
  background:rgba(15,20,28,.8);border:1px solid rgba(51,65,85,.8);font-size:.75rem;
  color:var(--ink-2);backdrop-filter:blur(8px)}
.ping{position:relative;display:flex;width:8px;height:8px;flex:none}
.ping i{position:absolute;inset:0;border-radius:50%;background:var(--cyan-t);opacity:.75}
.ping b{position:relative;width:8px;height:8px;border-radius:50%;background:var(--cyan);display:block}
@media (prefers-reduced-motion:no-preference){
  .ping i{animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
}
@keyframes ping{75%,100%{transform:scale(2.1);opacity:0}}
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--r-sm);
  background:#0c121b;border:1px solid var(--line);font-family:'JetBrains Mono',monospace;
  font-size:.75rem;font-weight:500;color:var(--ink-3)}
.chip .ic-sm{color:var(--cyan-t);width:.875rem;height:.875rem}
.tagx{display:inline-block;padding:3px 9px;border-radius:5px;font-family:'JetBrains Mono',monospace;
  font-size:.625rem;font-weight:600;letter-spacing:.05em}
.t-cyan{background:rgba(6,182,212,.18);color:#67e8f9}
.t-blue{background:rgba(37,99,235,.2);color:#93c5fd}
.t-violet{background:rgba(139,92,246,.18);color:#c4b5fd}
.t-emerald{background:rgba(16,185,129,.16);color:var(--emerald-t)}
.t-amber{background:rgba(245,158,11,.16);color:var(--amber-t)}

/* --- hero --------------------------------------------------------------- */
.hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:center;
  padding:clamp(40px,7vh,72px) 0 clamp(52px,8vh,92px);overflow:hidden}
.hero .in{text-align:center;max-width:62rem}
.hero .pill{margin-bottom:26px}
.hero .d1{margin-bottom:22px}
.hero .d1 .grad{display:block;margin-top:8px}
.hero .lead-lg{max-width:46rem;margin:0 auto 34px;color:var(--ink-2)}
.hero .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.trust{margin-top:clamp(40px,6vh,64px);padding-top:clamp(26px,4vh,40px);
  border-top:1px solid rgba(31,41,61,.8);display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.trust .it{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 14px;
  border-radius:var(--r-sm);background:rgba(15,20,28,.4);border:1px solid rgba(31,41,61,.5);
  font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:500;color:var(--ink-3)}
.trust .it .ic{width:1.0625rem;height:1.0625rem}
.trust .c1 .ic{color:var(--cyan-t)}.trust .c2 .ic{color:var(--violet-t)}
.trust .c3 .ic{color:var(--emerald-t)}.trust .c4 .ic{color:var(--amber-t)}

/* --- bento grid. Aswin named "Bento Grid" as a wanted pattern. ---------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.bento .cell{padding:clamp(22px,2.4vw,32px);position:relative;overflow:hidden}
.bento .w2{grid-column:span 2}
.bento .blob{position:absolute;top:0;right:0;width:256px;height:256px;border-radius:50%;
  background:rgba(6,182,212,.05);filter:blur(40px);transition:background .35s;pointer-events:none}
.bento .cell:hover .blob{background:rgba(6,182,212,.1)}
.bx{width:48px;height:48px;border-radius:var(--r);display:flex;align-items:center;
  justify-content:center;margin-bottom:22px}
.bx-cyan{background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.2);color:var(--cyan-t)}
.bx-violet{background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.2);color:var(--violet-t)}
.bx-emerald{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);color:var(--emerald-t)}
.bx-blue{background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.24);color:var(--blue-t)}
.bento .cell h4{margin-bottom:12px}
.bento .cell p{font-size:.9375rem;line-height:1.7;color:var(--ink-2)}
.bento .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.bento .quad{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:18px}
.bento .quad .chip{justify-content:center;text-align:center;padding:10px 8px;font-size:.6875rem}

/* --- product showcase. The reference's tabbed panels: bullets left,
   simulated product UI right. This is Aswin's "product visibility" ask. --- */
.tabs{display:flex;justify-content:center;margin-bottom:clamp(30px,4.5vh,48px)}
.tabs .rail{display:inline-flex;gap:4px;padding:6px;border-radius:var(--r-xl);
  background:rgba(15,20,28,.75);backdrop-filter:blur(16px);border:1px solid var(--line);
  overflow-x:auto;max-width:100%;scrollbar-width:none}
.tabs .rail::-webkit-scrollbar{display:none}
.tabs button{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border:0;
  border-radius:var(--r-lg);background:none;font-size:.8125rem;font-weight:600;
  color:var(--ink-3);cursor:pointer;white-space:nowrap;transition:color .2s,background .3s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:#fff;
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  box-shadow:0 8px 22px -10px rgba(6,182,212,.6)}
.tabs .ic-sm{width:.9375rem;height:.9375rem}

.panel[hidden]{display:none}
.panel .wrap{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,3vw,44px);align-items:center}
.pcopy{display:grid;gap:18px;align-content:start}
.pcopy .kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;
  border-radius:var(--r-sm);font-family:'JetBrains Mono',monospace;font-size:.75rem;
  font-weight:500;width:fit-content}
.k-cyan{background:rgba(6,182,212,.1);color:var(--cyan-t);border:1px solid rgba(6,182,212,.2)}
.k-blue{background:rgba(37,99,235,.12);color:var(--blue-t);border:1px solid rgba(37,99,235,.24)}
.k-violet{background:rgba(139,92,246,.1);color:var(--violet-t);border:1px solid rgba(139,92,246,.22)}
.k-emerald{background:rgba(16,185,129,.1);color:var(--emerald-t);border:1px solid rgba(16,185,129,.22)}
.k-amber{background:rgba(245,158,11,.1);color:var(--amber-t);border:1px solid rgba(245,158,11,.22)}
.pcopy p.sm{color:var(--ink-2)}
.feats{display:grid;gap:14px}
.feats .f{display:flex;gap:12px;align-items:flex-start}
.feats .f .ic-sm{margin-top:3px;width:1.0625rem;height:1.0625rem}
.feats .f h5{font-size:.875rem;font-weight:700;color:var(--ink);margin:0 0 2px;letter-spacing:-.008em}
.feats .f p{font-size:.8125rem;line-height:1.6;color:var(--ink-3)}
.f-cyan .ic-sm{color:var(--cyan-t)}.f-blue .ic-sm{color:var(--blue-t)}
.f-violet .ic-sm{color:var(--violet-t)}.f-emerald .ic-sm{color:var(--emerald-t)}
.f-amber .ic-sm{color:var(--amber-t)}

/* the simulated app window. This is the "product image" - no photograph is involved,
   which is the point: Aaron rejected every stock image as "not representative of our
   actual technologies", and a rendered UI is representative. */
.app{border:1px solid rgba(51,65,85,.8);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 28px 60px -24px rgba(0,0,0,.85);background:rgba(15,20,28,.75)}
.app .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;background:#0c1118;border-bottom:1px solid var(--line)}
.app .lights{display:flex;align-items:center;gap:7px;min-width:0}
.app .lights i{width:11px;height:11px;border-radius:50%;flex:none}
.app .lights i:nth-child(1){background:#ef4444}
.app .lights i:nth-child(2){background:#eab308}
.app .lights i:nth-child(3){background:#22c55e}
.app .lights span{font-family:'JetBrains Mono',monospace;font-size:.6875rem;color:var(--ink-3);
  margin-left:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .live{font-family:'JetBrains Mono',monospace;font-size:.5625rem;font-weight:600;
  letter-spacing:.06em;padding:3px 8px;border-radius:5px;background:rgba(16,185,129,.1);
  color:var(--emerald-t);border:1px solid rgba(16,185,129,.2);flex:none}
.app .canvas{padding:clamp(16px,2vw,24px);background:#05070c;display:grid;gap:20px}
.app .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.app .stat{padding:12px 13px;border-radius:var(--r);background:rgba(15,20,28,.8);
  border:1px solid var(--line)}
.app .stat .k{font-family:'JetBrains Mono',monospace;font-size:.625rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4);line-height:1.4}
.app .stat .v{font-family:'JetBrains Mono',monospace;font-size:1.0625rem;font-weight:700;
  margin-top:5px;line-height:1.2;letter-spacing:-.02em}
.app .stat .n{font-family:'JetBrains Mono',monospace;font-size:.5625rem;margin-top:5px;
  color:var(--ink-4);line-height:1.4}
.v-cyan{color:var(--cyan-t)}.v-emerald{color:var(--emerald-t)}.v-violet{color:var(--violet-t)}
.v-blue{color:var(--blue-t)}.v-amber{color:var(--amber-t)}.v-rose{color:var(--rose-t)}

.app .log{padding:14px;border-radius:var(--r);background:#0c1118;border:1px solid var(--line);
  display:grid;gap:8px;font-family:'JetBrains Mono',monospace;font-size:.6875rem}
.app .log .hd{font-size:.625rem;color:var(--ink-4)}
.app .log .ln{display:flex;gap:10px;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap}
.app .log .ln .t{color:var(--cyan-t);flex:none}
.app .log .ln .m{color:var(--ink-3);flex:1;min-width:0}
.app .log .ln .s{flex:none;font-weight:600}

/* a horizontal meter row, used where a log makes no sense (E-RECOV, Diamond-Droid) */
.app .meters{display:grid;gap:11px;padding:14px;border-radius:var(--r);background:#0c1118;
  border:1px solid var(--line)}
.app .meter .row{display:flex;justify-content:space-between;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:.6875rem;margin-bottom:6px}
.app .meter .row b{font-weight:600}
.app .meter .row span{color:var(--ink-3)}
.app .track{height:6px;border-radius:99px;background:#1a2230;overflow:hidden}
.app .fill{height:100%;border-radius:99px}

/* --- joint venture band. Aaron: "highlight the fact that this is a joint venture ...
   right now it looks like it's a product." Hence the explicit prefix label. -------- */
.jv{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,3vw,48px);align-items:center;
  padding:clamp(26px,3vw,44px);position:relative;overflow:hidden}
.jv .blob{position:absolute;top:-60px;right:-60px;width:320px;height:320px;border-radius:50%;
  background:rgba(37,99,235,.08);filter:blur(60px);pointer-events:none}
.jv .pre{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px}
.jv .pre .tagx{font-size:.6875rem;padding:4px 11px}
.jv h2{margin-bottom:14px}
.jv .sm{margin-bottom:22px}
.jv .facts{display:grid;gap:12px}
.jv .fact{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);
  background:rgba(15,20,28,.7);border:1px solid var(--line)}
.jv .fact .ic-sm{color:var(--blue-t);margin-top:2px;flex:none}
.jv .fact b{display:block;font-size:.875rem;color:var(--ink);font-weight:700;margin-bottom:2px}
.jv .fact span{font-size:.8125rem;color:var(--ink-3);line-height:1.6}

/* --- architecture flow. Corelight-style marketing architecture, which Aswin
   pointed at: "this is not a technical architecture, this is a marketing one." --- */
.flow{padding:clamp(22px,3vw,40px);border-radius:var(--r-xl);background:#05070c}
.flow .rail{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:stretch}
.flow .step{padding:22px 18px;border-radius:var(--r-lg);background:rgba(15,20,28,.9);
  border:1px solid var(--line);text-align:center;transition:border-color .3s;display:grid;
  align-content:start;gap:0}
.flow .s1:hover{border-color:rgba(6,182,212,.5)}
.flow .s2:hover{border-color:rgba(139,92,246,.5)}
.flow .s3:hover{border-color:rgba(16,185,129,.5)}
.flow .num{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;margin:0 auto 14px;font-family:'JetBrains Mono',monospace;
  font-size:.8125rem;font-weight:700}
.flow .s1 .num{background:rgba(6,182,212,.1);color:var(--cyan-t)}
.flow .s2 .num{background:rgba(139,92,246,.1);color:var(--violet-t)}
.flow .s3 .num{background:rgba(16,185,129,.1);color:var(--emerald-t)}
.flow .step h4{font-size:.9375rem;font-weight:700;margin-bottom:6px}
.flow .step p{font-size:.8125rem;color:var(--ink-3);line-height:1.6}
.flow .out{margin-top:16px;padding-top:13px;border-top:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:.625rem;letter-spacing:.06em}
.flow .s1 .out{color:#67e8f9}.flow .s2 .out{color:#c4b5fd}.flow .s3 .out{color:var(--emerald-t)}
.flow .arw{display:flex;align-items:center;justify-content:center;color:rgba(6,182,212,.5)}
.flow .arw2{color:rgba(139,92,246,.5)}
@media (prefers-reduced-motion:no-preference){.flow .arw .ic{animation:fade 2.6s ease-in-out infinite}}
@keyframes fade{0%,100%{opacity:.45}50%{opacity:1}}

/* --- programs. Srini, 09-01: "we should not show in a table ... show only a few,
   on click view all we have to show the entire thing." So: cards, filterable, with a
   disclosure. Aswin's reference used a table with a TRL column; TRL is stripped
   under Aaron's 09-03 copy rule. --------------------------------------------------- */
.filter{position:relative;width:min(100%,290px)}
.filter .ic-sm{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--ink-4);pointer-events:none}
.filter input{width:100%;padding:11px 16px 11px 40px;border-radius:var(--r);
  background:rgba(15,20,28,.9);border:1px solid rgba(51,65,85,.9);color:var(--ink);
  font-family:'JetBrains Mono',monospace;font-size:.75rem;transition:border-color .2s}
.filter input::placeholder{color:var(--ink-4)}
.filter input:focus{outline:none;border-color:var(--cyan)}

.progs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));
  gap:clamp(12px,1.4vw,18px)}
.prog{padding:20px;border-radius:var(--r-lg);background:rgba(15,20,28,.75);
  border:1px solid var(--line);transition:border-color .25s,transform .25s var(--ease);
  display:grid;align-content:start;gap:10px}
.prog:hover{border-color:rgba(6,182,212,.35);transform:translateY(-2px)}
/* NOT `.top`: that is the sticky site header, and reusing the name gave every
   programme card an 80px-tall row with the header's border-bottom. */
.prog .meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.prog .ag{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;
  font-size:.6875rem;font-weight:600;letter-spacing:.06em;color:var(--ink)}
.prog .ag .bd{width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none}
.prog h4{font-size:.9375rem;font-weight:700;line-height:1.45;letter-spacing:-.008em;color:var(--ink)}
.prog p{font-size:.8125rem;line-height:1.65;color:var(--ink-3)}
.progs:not(.all) .prog.extra{display:none}
.progs.all .prog.extra{display:grid}
/* Declared last and at equal specificity to `.progs.all .prog.extra`, so a card the
   filter has excluded stays hidden even while the full set is open. The obvious
   `.prog.hide{display:none}` loses that cascade fight and the filter appears broken. */
.progs .prog.hide{display:none}
.more-row{display:flex;justify-content:center;margin-top:clamp(24px,3.5vh,38px)}
.count{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--ink-4);
  text-align:center;margin-top:18px}
.count b{color:var(--ink-2);font-weight:600}
.empty{text-align:center;padding:40px 0;color:var(--ink-3);font-size:.9375rem}

/* --- locations. Aswin: "this location design, you have to change this section,
   it's too simple." Now a map-ish rail with the HQ given weight. ------------------- */
.locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:clamp(12px,1.4vw,18px)}
.loc{padding:22px;border-radius:var(--r-lg);background:rgba(15,20,28,.75);
  border:1px solid var(--line);position:relative;overflow:hidden;transition:border-color .25s}
.loc:hover{border-color:rgba(6,182,212,.35)}
.loc .ic{color:var(--ink-4);width:1.0625rem;height:1.0625rem;margin-bottom:14px;transition:color .25s}
.loc:hover .ic{color:var(--cyan-t)}
.loc .k{font-family:'JetBrains Mono',monospace;font-size:.625rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);display:block;margin-bottom:7px}
/* Aaron's ratio complaint lands exactly here: this pair used to be 62px against 16.8px.
   It is now 20px against 13px. */
.loc h3{font-size:1.25rem;font-weight:700;letter-spacing:-.018em;line-height:1.3;margin-bottom:5px}
.loc p{font-size:.8125rem;line-height:1.6;color:var(--ink-3)}
.loc.hq{background:linear-gradient(160deg,rgba(6,182,212,.08),rgba(15,20,28,.75) 55%);
  border-color:rgba(6,182,212,.25)}
.loc.hq .ic,.loc.hq .k{color:var(--cyan-t)}

/* --- partner marquee. Aswin: "don't make it static, it will add more rows.
   let it run, it's a marquee." Kept exactly as it was. ------------------- */
.mq{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq .trk{display:flex;gap:clamp(30px,4.5vw,64px);width:max-content;align-items:center}
@media (prefers-reduced-motion:no-preference){
  .mq .trk{animation:slide 48s linear infinite}
  .mq:hover .trk{animation-play-state:paused}
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* These marks are mostly dark ink on transparency - measured mean luminance runs 83 to
   166 across the eight files, with only SeaPort carrying its own light background. At the
   previous brightness(1.7)/opacity(.62) the dark ones landed around mid-grey on a near-black
   ground and were not readable. 2.4 lifts the darkest to roughly 230. */
.mq img{height:clamp(34px,3.6vw,46px);width:auto;opacity:.8;
  filter:grayscale(1) brightness(2.4) contrast(.92);
  transition:opacity .25s,filter .25s}
.mq a:hover img,.mq li:hover img{opacity:1;filter:grayscale(0) brightness(1)}
.mq ul{display:flex;gap:clamp(30px,4.5vw,64px);list-style:none;margin:0;padding:0;align-items:center}

/* --- contact / CTA ------------------------------------------------------ */
/* One centred block rather than two columns. The two-column version left the right-hand
   column a third the height of the left and the panel stretched to the taller one, which
   is the "on the right side most of the time it's empty" problem Aswin called out on
   site 7 at 10:01. The three audience points now use the full width instead. */
.cta-band{padding:clamp(28px,3.4vw,52px);display:grid;gap:clamp(24px,3vh,36px)}
.cta-band .top-row{max-width:min(46rem,100%);margin:0 auto;text-align:center}
.cta-band .top-row .lead{margin-top:14px;color:var(--ink-3)}
.cta-band .ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.cta-band .pts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);
  padding-top:clamp(22px,3vh,32px);border-top:1px solid var(--line)}
.cta-band .pt{display:grid;gap:7px;align-content:start}
.cta-band .pt .ic-sm{color:var(--cyan-t)}
.cta-band .pt b{font-size:.9375rem;color:var(--ink);font-weight:700;letter-spacing:-.008em}
.cta-band .pt span{font-size:.8125rem;color:var(--ink-3);line-height:1.65}
.cta-band .base{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--ink-4)}
.cta-band .base a{color:var(--ink-3)}
.cta-band .base a:hover{color:var(--cyan-t)}
.cta-band .base .it{display:inline-flex;align-items:center;gap:8px}
@media (max-width:820px){.cta-band .pts{grid-template-columns:1fr}}

.form{display:grid;gap:14px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:7px}
.field label{font-family:'JetBrains Mono',monospace;font-size:.6875rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;border-radius:var(--r);
  background:#0c1118;border:1px solid var(--line);color:var(--ink);font-size:.9375rem;
  transition:border-color .2s;font-family:inherit}
.field textarea{resize:vertical;min-height:112px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--cyan)}
.form .note{font-size:.75rem;color:var(--ink-4);line-height:1.6}
.form-msg{padding:13px 16px;border-radius:var(--r);font-size:.875rem;line-height:1.6}
.form-msg.ok{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.28);color:var(--emerald-t)}
.form-msg.err{background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.28);color:var(--rose-t)}
.form-msg[hidden]{display:none}

/* --- misc page furniture ------------------------------------------------ */
.figure{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.figcap{padding:10px 14px;font-size:.6875rem;color:var(--ink-4);background:#0c1118;
  border-top:1px solid var(--line)}
.prose{display:grid;gap:16px;max-width:68ch}
.prose p{font-size:1rem;line-height:1.75;color:var(--ink-2)}
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(12px,1.4vw,18px)}
.glance .g{padding:20px;border-radius:var(--r-lg);background:rgba(15,20,28,.75);
  border:1px solid var(--line);display:grid;gap:8px;align-content:start;
  transition:border-color .25s}
.glance .g:hover{border-color:rgba(6,182,212,.3)}
.glance .g .ic-sm{color:var(--cyan-t)}
.glance .g h4{font-size:.9375rem;font-weight:700;letter-spacing:-.008em}
.glance .g p{font-size:.8125rem;line-height:1.65;color:var(--ink-3)}
.fields-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(12px,1.4vw,18px)}
.fld{padding:20px;border-radius:var(--r-lg);background:rgba(15,20,28,.75);
  border:1px solid var(--line);transition:border-color .25s}
.fld:hover{border-color:rgba(139,92,246,.35)}
.fld h4{font-size:1.0625rem;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
.fld p{font-size:.8125rem;line-height:1.6;color:var(--ink-3)}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(12px,1.5vw,20px)}
.mem{padding:22px;border-radius:var(--r-lg);background:rgba(15,20,28,.75);border:1px solid var(--line)}
.mem h3{font-size:1.125rem;font-weight:700;letter-spacing:-.018em;margin-bottom:4px}
.mem .role{font-family:'JetBrains Mono',monospace;font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyan-t);display:block;margin-bottom:12px}
.mem p{font-size:.875rem;line-height:1.7;color:var(--ink-3)}
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:clamp(12px,1.4vw,18px)}
.cert{padding:22px;border-radius:var(--r-lg);background:rgba(15,20,28,.75);border:1px solid var(--line);
  display:grid;gap:12px;align-content:start;justify-items:start}
.cert img{height:44px;width:auto;opacity:.9}
.cert b{font-size:.9375rem;color:var(--ink);font-weight:700;letter-spacing:-.008em;line-height:1.4}
.cert span{font-size:.8125rem;color:var(--ink-3);line-height:1.6}
.crumb{display:flex;gap:9px;align-items:center;font-family:'JetBrains Mono',monospace;
  font-size:.75rem;color:var(--ink-4);margin-bottom:18px}
.crumb a{color:var(--ink-3);transition:color .2s}
.crumb a:hover{color:var(--cyan-t)}
.note-band{padding:16px 20px;border-radius:var(--r);background:rgba(15,20,28,.7);
  border:1px solid var(--line);border-left:2px solid var(--cyan);font-size:.875rem;
  line-height:1.7;color:var(--ink-3)}

/* --- inner pages -------------------------------------------------------
   Products, team, partnerships and contact. Same vocabulary as the landing page;
   these are the components the landing page happens not to use. */

/* page opener. Left-aligned, unlike the centred section .head, because a page title
   with a lead paragraph reads better ranged left at this width. */
/* Product hero: copy left, product console right. Replaces copy-left / nothing-right,
   which is the emptiness Aswin flagged at 10:01, and drops the generated placeholder
   photograph Aaron rejected at 18:55. */
/* Page opener for the pages that have no product console to show. Without it the title
   sat in a 62ch column and the right half of the viewport was blank, which is exactly the
   "on the right side most of the time it's empty, so the user has to keep on scrolling
   down" problem Aswin raised at 10:01. */
.page-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,4vw,64px);
  align-items:center}
@media (max-width:980px){.page-hero{grid-template-columns:1fr;gap:28px}}
.hero-facts{padding:clamp(20px,2.4vw,28px);display:grid;gap:0}
.hero-facts>div{display:grid;gap:5px;padding:clamp(14px,1.8vh,18px) 0;
  border-top:1px solid var(--line)}
.hero-facts>div:first-child{border-top:0;padding-top:0}
.hero-facts>div:last-child{padding-bottom:0}
.hero-facts .v{font-size:1.375rem;font-weight:800;letter-spacing:-.025em;line-height:1.2;
  color:var(--ink)}
.hero-facts .k{font-family:'JetBrains Mono',monospace;font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-4);line-height:1.55}

.phero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.4vw,56px);
  align-items:center}
@media (max-width:980px){.phero{grid-template-columns:1fr;gap:30px}}
.phero .stage{max-width:none}
.stage{max-width:62ch;position:relative;z-index:1}
.stage .eyebrow{margin-bottom:12px}
.stage .lead{margin-top:16px;color:var(--ink-3)}
.bloom{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bloom i{position:absolute;border-radius:50%}
.bloom i:nth-child(1){top:-120px;left:8%;width:420px;height:420px;
  background:radial-gradient(circle,rgba(6,182,212,.14),transparent 70%)}
.bloom i:nth-child(2){top:-60px;right:4%;width:360px;height:360px;
  background:radial-gradient(circle,rgba(139,92,246,.12),transparent 70%)}
.bloom i:nth-child(3){top:40%;left:38%;width:300px;height:300px;
  background:radial-gradient(circle,rgba(37,99,235,.1),transparent 70%)}

.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.ar{transition:transform .25s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}

/* product hero facts */
/* These carried bare numerals ("6", "75x") when the copy was the 2019 spec sheet, so the
   figure was set at 32px. The rewritten facts are short phrases, and 32px against an 11px
   mono label is Aaron's "29 against 8" disparity all over again. 18px against 11px is the
   subtle step he asked for, and phrases no longer wrap raggedly across three columns. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
  gap:clamp(14px,1.8vw,24px)}
.stats>div{display:grid;gap:6px;align-content:start;padding-left:13px;
  border-left:2px solid var(--line)}
.stats .fig{font-size:1.125rem;font-weight:700;letter-spacing:-.018em;line-height:1.35}
.stats .l{font-family:'JetBrains Mono',monospace;font-size:.6875rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-4);line-height:1.55}

.bul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bul li{position:relative;padding-left:22px;font-size:.9375rem;line-height:1.7;color:var(--ink-2)}
.bul li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--cyan);opacity:.85}

.spec{width:100%;border-collapse:collapse;font-size:.875rem;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.spec tr{border-bottom:1px solid var(--line)}
.spec tr:last-child{border-bottom:0}
.spec th{text-align:left;padding:14px 18px;width:min(240px,34%);vertical-align:top;
  font-family:'JetBrains Mono',monospace;font-size:.6875rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-4);background:rgba(15,20,28,.7)}
.spec td{padding:14px 18px;color:var(--ink-2);line-height:1.7;vertical-align:top}

/* product index cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:clamp(14px,1.6vw,22px)}
.card{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:rgba(15,20,28,.75);border:1px solid var(--line);
  transition:border-color .25s,transform .25s var(--ease)}
.card:hover{border-color:rgba(6,182,212,.4);transform:translateY(-3px)}
.card .shot{aspect-ratio:16/9;overflow:hidden;background:#0c1118;border-bottom:1px solid var(--line)}
.card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .shot img{transform:scale(1.04)}
.card .body{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1}
.card .lbl{font-family:'JetBrains Mono',monospace;font-size:.625rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-t)}
.card .body h3{font-size:1.1875rem;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.card .body p{font-size:.875rem;line-height:1.65;color:var(--ink-3);flex:1}
.card .go{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;font-weight:600;
  color:var(--cyan-t);margin-top:2px}
.card .go span{transition:transform .25s var(--ease)}
.card:hover .go span{transform:translateX(3px)}

/* team */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(14px,1.6vw,22px)}
.person{padding:24px;border-radius:var(--r-lg);background:rgba(15,20,28,.75);
  border:1px solid var(--line);display:grid;gap:9px;align-content:start;
  transition:border-color .25s}
.person:hover{border-color:rgba(6,182,212,.3)}
.person h3{font-size:1.1875rem;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.person .role{font-family:'JetBrains Mono',monospace;font-size:.6875rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-t)}
.person p{font-size:.875rem;line-height:1.7;color:var(--ink-3)}
.person .li{font-size:.8125rem;font-weight:600;color:var(--blue-t);margin-top:4px;
  justify-self:start}
.person .li:hover{color:var(--cyan-t)}

/* partnerships */
.orgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(14px,1.6vw,22px)}
.org{padding:24px;border-radius:var(--r-lg);background:rgba(15,20,28,.75);
  border:1px solid var(--line);display:grid;gap:12px;align-content:start;
  transition:border-color .25s}
.org:hover{border-color:rgba(6,182,212,.3)}
.org .plate{height:56px;display:flex;align-items:center;justify-content:flex-start;
  padding:8px 12px;border-radius:var(--r);background:#0c1118;border:1px solid var(--line);
  width:fit-content}
.org .plate img{height:38px;width:auto}
.org h3{font-size:1.0625rem;font-weight:700;letter-spacing:-.018em;line-height:1.35}
.org p{font-size:.875rem;line-height:1.7;color:var(--ink-3)}
.chips.rv>span,.chips>span{display:inline-flex;align-items:center;padding:5px 12px;
  border-radius:var(--r-sm);background:#0c121b;border:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--ink-3)}

/* contact form */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{padding:13px 16px;border-radius:var(--r);font-size:.875rem;line-height:1.6;
  background:rgba(15,20,28,.8);border:1px solid var(--line);color:var(--ink-3)}
.status:empty{display:none}
.status.ok{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.28);color:var(--emerald-t)}
.status.err{background:rgba(244,63,94,.1);border-color:rgba(244,63,94,.28);color:var(--rose-t)}
.cf-turnstile{min-height:65px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);
  align-items:start}
.contact-grid .aside{display:grid;gap:26px;align-content:start}
.contact-grid .pts{display:grid;gap:14px}
.contact-grid .pt{display:grid;gap:5px;align-content:start}
.contact-grid .pt .ic-sm{color:var(--cyan-t)}
.contact-grid .pt b{font-size:.9375rem;color:var(--ink);font-weight:700}
.contact-grid .pt span{font-size:.8125rem;color:var(--ink-3);line-height:1.65}
.form.glass{padding:clamp(22px,2.6vw,32px)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.loc .a{font-size:.8125rem;line-height:1.6;color:var(--ink-3)}


@media (max-width:1100px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .w2{grid-column:span 2}
  .bento .quad{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:980px){
  /* Below this width every two-column block is stacked, so a left/right entry has no
     column to enter from - and the 38px start offset on .rv-r pushed the product console
     past the right edge, which gave the whole document a horizontal scrollbar until the
     reveal finished. Fade up instead. */
  .js .rv-l,.js .rv-r{transform:translateY(22px)}
  .panel .wrap{grid-template-columns:1fr;gap:26px}
  .jv{grid-template-columns:1fr;gap:26px}
  .cta-band{grid-template-columns:1fr}
  .flow .rail{grid-template-columns:1fr}
  .flow .arw{transform:rotate(90deg);padding:2px 0}
}
@media (max-width:820px){
  :root{--bar:68px}
  .burger{display:block}
  .top .in{gap:12px}
  .nav{position:fixed;top:var(--bar);left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;height:auto;max-height:calc(100dvh - var(--bar));overflow-y:auto;
    background:rgba(7,9,14,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
    padding:10px 4vw 22px;margin:0;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .25s,transform .25s,visibility .25s}
  .top.open .nav{opacity:1;visibility:visible;transform:none}
  .nav>li{height:auto;display:block;border-bottom:1px solid var(--line)}
  .nav>li>a,.nav>li>button{width:100%;padding:15px 4px;justify-content:space-between;
    font-size:1rem}
  .menu{position:static;width:auto;padding-top:0;opacity:1;visibility:visible;transform:none;
    max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
  .nav>li.open .menu{max-height:640px}
  .menu .sheet{background:none;border:0;box-shadow:none;padding:0 0 12px}
  .hero-cta-top{display:none}
  .util .in{justify-content:center;text-align:center}
  .util .r{display:none}
}
@media (max-width:760px){
  .bento{grid-template-columns:1fr}
  .bento .w2{grid-column:span 1}
  .app .stats{grid-template-columns:1fr}
  .form .two{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .foot-base{flex-direction:column;gap:8px}
  .head-l{flex-direction:column;align-items:stretch}
  .filter{width:100%}
  .app .log .ln{gap:2px}
  .app .log .ln .m{flex-basis:100%}
}
@media (max-width:520px){
  body{font-size:.9375rem}
  .hero{min-height:auto}
  .tabs .rail{border-radius:var(--r-lg)}
  .tabs button{padding:10px 14px;font-size:.75rem}
  .bento .quad{grid-template-columns:1fr}
}