/* Bitara. Deep navy, one teal accent, white and cool-grey pages.
   One spacing scale (8px steps) so every page lines up; movement kept to a
   few quiet touches. One light theme, so the site looks the same everywhere. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('fonts/manrope-latin.woff2') format('woff2');}

:root{
  /* Colour */
  --navy:#0A1B30; --navy-2:#10263F; --navy-3:#1A3352;
  --teal:#0D7480; --teal-hover:#0A5F69; --teal-soft:#E6F2F3; --aqua:#7CCBD1;
  --bg:#F6F8FA; --surface:#FFFFFF; --sunken:#F1F4F7; --tint:#EEF3F6;
  --border:#E2E7ED; --border-strong:#CBD3DD;
  --text:#0A1B30; --text-2:#46556A; --text-3:#66748A;
  --on-dark:#E6ECF2; --on-dark-2:#A9B7C8; --on-dark-3:#7D8DA1; --line-dark:rgba(255,255,255,.09);
  --ok:#15803D; --ok-bg:#DCFCE7; --bad:#B91C1C; --bad-bg:#FEE2E2;
  /* Space */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --section:var(--s7);
  /* Shape */
  --r:10px; --r-lg:14px;
  --shadow:0 1px 2px rgba(10,27,48,.05);
  --shadow-md:0 12px 32px rgba(10,27,48,.08),0 2px 6px rgba(10,27,48,.04);
  --wrap:1160px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:hidden;}
@supports (overflow:clip){html{overflow-x:clip;}}
/* Phones widen the page to fit anything that sticks out, and body alone does
   not stop them: html, body and main all clip sideways. clip, not hidden,
   so the sticky header and hero still stick. */
main{overflow-x:clip;}
body{margin:0;font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.65;color:var(--text);background:var(--bg);overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
h1,h2,h3,p,ul,ol,figure{margin:0;}
h1,h2,h3{text-wrap:balance;}
p{text-wrap:pretty;}
a{color:var(--teal);text-underline-offset:3px;}
a:hover{color:var(--teal-hover);}
img,svg{display:block;}
.icon{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s4);}
.narrow{max-width:760px;}
.sprite{position:absolute;width:0;height:0;overflow:hidden;}
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--surface);padding:8px 12px;border-radius:8px;z-index:100;}
.skip-link:focus{left:8px;}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px;}

/* ---- Top bar ---- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(10,27,48,.96);color:var(--on-dark);
  border-bottom:1px solid var(--line-dark);}
.topbar-inner{display:flex;align-items:center;gap:var(--s3);height:72px;}
.brand{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;}
.brand:hover{color:#fff;}
.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;
  background:var(--teal);color:#fff;}
.brand-mark svg{width:22px;height:22px;}
.brand-name{font-weight:800;font-size:19px;letter-spacing:-.02em;}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px;}
.nav a:not(.btn){color:var(--on-dark-2);text-decoration:none;font-weight:600;font-size:15px;padding:8px 14px;border-radius:8px;
  transition:color .15s,background-color .15s;}
.nav a:not(.btn):hover{color:#fff;background:rgba(255,255,255,.06);}
.nav a[aria-current="page"]:not(.btn){color:#fff;}
.nav .btn{margin-left:var(--s2);}
.nav-mobile{display:none;margin-left:auto;position:relative;}
.nav-mobile summary{list-style:none;cursor:pointer;color:#fff;padding:8px;border-radius:8px;}
.nav-mobile summary::-webkit-details-marker{display:none;}
.nav-mobile summary .icon{width:24px;height:24px;}
/* On a phone the menu drops down the full width under the bar: the main
   sections and Contact, each a full-width row easy to tap. */
.nav-mobile-panel{position:fixed;left:0;right:0;top:64px;background:var(--surface);border-bottom:1px solid var(--border);
  box-shadow:0 18px 32px rgba(10,27,48,.18);padding:var(--s1) var(--s2) var(--s3);display:grid;}
.nav-mobile-panel a:not(.btn){display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 4px;
  color:var(--text);text-decoration:none;font-weight:700;font-size:17px;border-bottom:1px solid var(--border);}
.nav-mobile-panel a:not(.btn) .icon{color:var(--text-3);}
.nav-mobile-panel .btn{margin-top:var(--s2);min-height:48px;}
.nav-mobile[open] summary{background:rgba(255,255,255,.08);}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;font:inherit;font-weight:700;font-size:15px;line-height:1.2;
  padding:13px 22px;border-radius:var(--r);border:1px solid transparent;text-decoration:none;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s;}
.btn-sm{padding:9px 16px;font-size:14px;}
.btn-primary{background:var(--teal);color:#fff;}
.btn-primary:hover{background:var(--teal-hover);color:#fff;}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong);}
.btn-secondary:hover{border-color:var(--teal);color:var(--teal);}
.btn-ghost{color:#fff;border-color:rgba(255,255,255,.25);}
.btn-ghost:hover{color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.4);}
.btn-light{background:#fff;color:var(--navy);}
.btn-light:hover{background:var(--teal-soft);color:var(--navy);}
.btn .icon{width:16px;height:16px;transition:transform .2s var(--ease);}
.btn:hover .icon{transform:translateX(2px);}

/* ---- Type ---- */
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);}
.section h2{font-size:clamp(28px,3.2vw,38px);line-height:1.18;letter-spacing:-.025em;font-weight:800;margin-top:12px;}
.h3,.section h2.h3{font-size:22px;letter-spacing:-.015em;margin:0 0 var(--s3);}
.lede{margin-top:var(--s2);font-size:18px;line-height:1.6;color:var(--text-2);}
.fine{margin-top:var(--s3);font-size:14px;color:var(--text-3);}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;color:var(--on-dark);
  background:radial-gradient(1000px 520px at 85% -10%,rgba(13,116,128,.30),transparent 65%),
             linear-gradient(180deg,var(--navy),var(--navy-2));}
.hero-net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55;z-index:0;}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.45fr 1fr;gap:var(--s6);align-items:center;
  padding-top:var(--s7);padding-bottom:var(--s7);}
.hero .eyebrow{color:var(--aqua);}
.hero h1{margin-top:var(--s2);font-size:clamp(38px,4.6vw,58px);line-height:1.06;letter-spacing:-.035em;font-weight:800;color:#fff;}
.rotator{margin-top:var(--s2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;color:var(--aqua);min-height:1.6em;}
.rotator .prompt{color:var(--on-dark-3);}
.caret{display:inline-block;width:8px;height:1.05em;background:var(--aqua);vertical-align:-3px;margin-left:3px;opacity:.8;
  animation:blink 1.2s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
[data-rotate]{display:inline-block;transition:opacity .4s var(--ease),transform .4s var(--ease);}
[data-rotate].out{opacity:0;transform:translateY(6px);}
.hero-lede{margin-top:var(--s3);font-size:18px;line-height:1.65;color:var(--on-dark-2);max-width:38rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s4);}
.pills{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:var(--s4);}
.pills li{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--on-dark-2);}
.pills .icon{width:16px;height:16px;color:var(--aqua);}
.hero-side{display:grid;gap:var(--s2);}
.terminal{border-radius:var(--r-lg);overflow:hidden;background:rgba(5,14,27,.7);border:1px solid var(--line-dark);
  box-shadow:0 24px 48px rgba(0,0,0,.28);}
.terminal-bar{display:flex;align-items:center;gap:6px;padding:11px 16px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--line-dark);}
.terminal-bar i{width:11px;height:11px;border-radius:50%;background:#EF6B63;}
.terminal-bar i:nth-child(2){background:#F2BE4A;}
.terminal-bar i:nth-child(3){background:#4FC46A;}
.terminal-bar span{margin-left:8px;font-size:12px;color:var(--on-dark-3);font-family:ui-monospace,Menlo,Consolas,monospace;}
.terminal pre{margin:0;padding:18px 20px 20px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;line-height:1.7;color:#BFE3E6;white-space:pre-wrap;min-height:calc(7 * 1.7em + 38px);}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s3);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px;}
.stat-big{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.15;}
.stat-small{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);}
.hero .stat{background:rgba(255,255,255,.04);border-color:var(--line-dark);box-shadow:none;padding:14px 16px;}
.hero .stat-big{color:#fff;font-size:clamp(17px,1.6vw,21px);white-space:nowrap;}
.hero .stat-small{color:var(--on-dark-3);font-size:11px;}

/* AI line art behind the hero. The wrapper (.ha) is moved by the script:
   leaning with the pointer and gliding away from it; the drawing inside drifts
   and turns on its own. */
.hero-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.ha{position:absolute;color:var(--aqua);opacity:.3;transition:opacity .45s var(--ease),filter .45s var(--ease);will-change:transform;}
.ha.near{opacity:.9;filter:drop-shadow(0 0 12px rgba(124,203,209,.55));}
.ha svg{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;animation:ha-float var(--t,16s) ease-in-out infinite alternate;}
@keyframes ha-float{0%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(12px,-16px) rotate(3deg);}
  100%{transform:translate(-10px,10px) rotate(-3deg);}}
.ha-turn{transform-box:view-box;transform-origin:50% 50%;animation:ha-turn 40s linear infinite;}
.ha-fast{animation-duration:12s;}
.ha-reverse{animation-duration:24s;animation-direction:reverse;}
@keyframes ha-turn{to{transform:rotate(360deg);}}
.ha-lines{opacity:.45;}
.ha-nodes circle{fill:var(--navy);animation:ha-blink 3.2s ease-in-out infinite;}
.ha-nodes circle:nth-child(3n+1){animation-delay:-1s;}
.ha-nodes circle:nth-child(3n+2){animation-delay:-2.1s;}
@keyframes ha-blink{0%,100%{fill:var(--navy);}50%{fill:var(--aqua);}}
.ha-core{fill:rgba(124,203,209,.12);animation:ha-glow 2.6s ease-in-out infinite alternate;}
@keyframes ha-glow{to{fill:rgba(124,203,209,.4);}}
.ha text{fill:currentColor;stroke:none;font:800 17px Manrope,sans-serif;}
.ha-fill{fill:currentColor;stroke:none;}
.ha-lit{fill:rgba(124,203,209,.16);animation:ha-glow 3s ease-in-out infinite alternate;}
.ha-faint{opacity:.4;}
.ha-bars line{stroke-width:5;transform-box:fill-box;transform-origin:center;animation:ha-level 1.4s ease-in-out infinite alternate;}
.ha-bars line:nth-child(2n){animation-delay:-.5s;}
.ha-bars line:nth-child(3n){animation-delay:-.9s;}
@keyframes ha-level{from{transform:scaleY(.35);}to{transform:scaleY(1);}}
.ha-spark svg{fill:currentColor;stroke:none;animation:ha-twinkle 3.4s ease-in-out infinite;}
@keyframes ha-twinkle{0%,100%{transform:scale(.5) rotate(0deg);opacity:.3;}50%{transform:scale(1.1) rotate(45deg);opacity:1;}}
.ha-net{top:6%;left:38%;width:250px;--t:18s;}
.ha-globe{bottom:-80px;right:-60px;width:300px;opacity:.2;--t:26s;}
.ha-chip{top:8%;right:3%;width:96px;--t:14s;}
.ha-orbit{top:-60px;left:-70px;width:250px;opacity:.24;--t:21s;}
.ha-hex{bottom:5%;left:-30px;width:170px;--t:17s;}
.ha-wave{bottom:7%;left:56%;width:200px;--t:15s;}
.ha-cube{top:58%;left:50%;width:72px;--t:12s;}
.ha-spark{width:14px;opacity:.7;}
.ha-spark-1{top:22%;left:31%;}
.ha-spark-2{top:72%;left:35%;width:10px;}
.ha-spark-3{top:13%;left:63%;width:12px;}
.ha-spark-4{top:86%;right:31%;width:16px;}
.ha-spark-5{top:44%;left:3%;width:10px;}
.ha-spark-2 svg{animation-delay:-1.2s;}
.ha-spark-3 svg{animation-delay:-2.3s;}
.ha-spark-4 svg{animation-delay:-.6s;}
.ha-spark-5 svg{animation-delay:-1.8s;}
@media (max-width:900px){
  .ha{opacity:.2;}
  .ha-net{top:auto;bottom:24%;left:auto;right:-40px;width:200px;}
  .ha-wave,.ha-cube,.ha-spark-3{display:none;}
}
@media (max-width:720px){
  .ha-chip{top:4%;width:70px;}
  .ha-globe{width:220px;}
  .ha-hex{width:120px;}
}

/* ---- The hero as a stargate ----
   site.js adds .gate-on (not for reduced motion) and sets --p from 0 to 1 as
   the page scrolls: the hero holds still, a gate opens in it and the view
   flies through, while the next section rises over it from below. */
.gate{position:absolute;left:50%;top:var(--gy,48%);width:min(78vw,680px);aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  z-index:0;opacity:0;}
.gate-ring{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(124,203,209,.9) 0deg 6deg,transparent 6deg 40deg);
  -webkit-mask:radial-gradient(circle,transparent 0 61%,#000 62% 68%,transparent 69%);
          mask:radial-gradient(circle,transparent 0 61%,#000 62% 68%,transparent 69%);}
.gate-ring::before{content:"";position:absolute;inset:3%;border-radius:50%;border:2px solid rgba(124,203,209,.55);}
.gate-ring::after{content:"";position:absolute;inset:-4%;border-radius:50%;border:1px solid rgba(124,203,209,.25);}
.gate-horizon{position:absolute;inset:16%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85) 0,rgba(124,203,209,.55) 22%,rgba(13,116,128,.4) 48%,rgba(10,27,48,0) 70%);
  animation:horizon 2.8s ease-in-out infinite alternate;}
@keyframes horizon{from{scale:.94;opacity:.75;}to{scale:1.04;opacity:1;}}
.gate-on .hero{position:sticky;top:var(--stick,72px);z-index:0;}
.gate-on main > section:not(.hero){position:relative;z-index:1;}
.gate-on main > .section:not(.section-tint):not(.section-dark){background:var(--bg);}
.gate-on .hero + section{border-radius:28px 28px 0 0;box-shadow:0 -28px 60px rgba(5,14,27,.45);}
.gate-on .gate{opacity:calc(min(1, var(--p,0) * 5) * (1 - var(--p,0) * .8));scale:calc(.3 + var(--p,0) * 2.8);}
.gate-on .gate-ring{rotate:calc(var(--p,0) * 200deg);}
.gate-on .gate-horizon{opacity:calc(var(--p,0) * 1.6);}
.gate-on .hero-inner{transform-origin:50% var(--gy,45%);scale:calc(1 + var(--p,0) * .45);opacity:calc(1 - var(--p,0) * 1.6);}
.gate-on .hero-net{scale:calc(1 + var(--p,0) * .9);}
.gate-on .ha{translate:calc(var(--wx,0) * var(--p,0) * 70vw) calc(var(--wy,0) * var(--p,0) * 70vh);
  scale:calc(1 + var(--p,0) * 1.6);}
@media (max-width:720px){
  .gate-on .hero + section{border-radius:20px 20px 0 0;}
}

/* ---- Page heads ---- */
.page-hero{padding:var(--s6) 0 var(--s5);background:var(--surface);border-bottom:1px solid var(--border);}
.page-hero h1{font-size:clamp(34px,4.2vw,50px);line-height:1.1;letter-spacing:-.03em;font-weight:800;margin-top:var(--s2);}
.page-hero .lede{max-width:46rem;}
.page-hero .hero-actions{margin-top:var(--s4);}
.page-hero-title{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2);}
.page-hero-title h1{margin-top:0;}
.page-hero-title .tag{margin-bottom:8px;}
.crumbs{font-size:13px;color:var(--text-3);}
.crumbs a{color:var(--text-2);text-decoration:none;}
.crumbs a:hover{color:var(--teal);}
.page-hero-dark{position:relative;overflow:hidden;color:var(--on-dark);border-bottom:0;
  background:radial-gradient(900px 420px at 90% -20%,rgba(13,116,128,.28),transparent 65%),linear-gradient(180deg,var(--navy),var(--navy-2));}
.page-hero-dark .wrap{position:relative;z-index:1;}
.page-hero-dark h1{color:#fff;}
.page-hero-dark .lede{color:var(--on-dark-2);}
.page-hero-dark .crumbs,.page-hero-dark .crumbs a{color:var(--on-dark-3);}
.page-hero-dark .crumbs a:hover{color:#fff;}
.page-hero-dark .card-icon{background:rgba(124,203,209,.12);color:var(--aqua);}

/* ---- Sections ---- */
.section{padding:var(--section) 0;}
.section-tint{background:var(--tint);}
.section-head{max-width:720px;margin-bottom:var(--s5);}
/* Two plain sections in a row share one gap, divided by a hairline. */
.section:not(.section-tint):not(.section-dark) + .section:not(.section-tint):not(.section-dark){padding-top:0;}
.section:not(.section-tint):not(.section-dark) + .section:not(.section-tint):not(.section-dark) > .wrap{border-top:1px solid var(--border);padding-top:var(--section);}
.section-slim{--section:var(--s6);}
.section-dark{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--navy),var(--navy-2));color:var(--on-dark);}
.section-dark .eyebrow{color:var(--aqua);}
.section-dark h2{color:#fff;}
.section-dark .lede{color:var(--on-dark-2);}
.section-dark + .section-dark{padding-top:0;}
.section-dark + .section-dark > .wrap{border-top:1px solid var(--line-dark);padding-top:var(--section);}
.section-dark > .wrap{position:relative;z-index:1;}

/* ---- Cards ---- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);}
.card-grid-3{grid-template-columns:repeat(3,1fr);}
.card-grid-4{grid-template-columns:repeat(4,1fr);}
/* Flex instead of grid where the count varies, so a short last row sits in the middle. */
.card-grid-center{display:flex;flex-wrap:wrap;justify-content:center;}
.card-grid-center > *{flex:0 0 calc((100% - 2 * var(--s3)) / 3);}
@media (max-width:980px){ .card-grid-center > *{flex-basis:calc((100% - var(--s3)) / 2);} }
@media (max-width:720px){ .card-grid-center > *{flex-basis:100%;} }
.card,.panel{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);}
.card{padding:28px;display:flex;flex-direction:column;gap:12px;}
.card .card-icon{margin-bottom:4px;}
.service-card{color:inherit;text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s;}
.service-card:hover{color:inherit;transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-strong);}
.card h3{font-size:18px;line-height:1.35;letter-spacing:-.01em;}
.card p{color:var(--text-2);font-size:15px;}
.card-more{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--teal);}
.card-more .icon{width:15px;height:15px;transition:transform .2s var(--ease);}
.service-card:hover .card-more .icon{transform:translateX(3px);}
.card-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--teal-soft);color:var(--teal);flex:none;}
.card-icon .icon{width:22px;height:22px;}
.card-icon-lg{width:56px;height:56px;border-radius:12px;}
.card-icon-lg .icon{width:28px;height:28px;}
.panel{padding:var(--s4);}
.panel h2{font-size:22px;letter-spacing:-.015em;margin:0 0 var(--s3);}
.panel-accent{border-top:3px solid var(--teal);}
.value-card h3{font-size:17px;}
.feature-no{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;font-weight:700;color:var(--teal);letter-spacing:.06em;}
.tag{display:inline-block;align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;color:var(--navy);background:var(--aqua);}
.tag-light{background:var(--teal-soft);color:var(--teal);margin-bottom:8px;}
.tag-soon{background:#F4E2B8;color:#6B4A0E;}
.tag-light.tag-soon{background:#FBF1DC;color:#7A520C;}

/* Products on the dark band. */
.product-card{color:var(--on-dark);text-decoration:none;background:rgba(255,255,255,.035);border-color:var(--line-dark);box-shadow:none;
  transition:transform .2s var(--ease),border-color .2s,background-color .2s;}
.product-card:hover{color:var(--on-dark);transform:translateY(-3px);border-color:rgba(124,203,209,.4);background:rgba(255,255,255,.06);}
.product-card h3{color:#fff;font-size:19px;}
.product-card p{color:var(--on-dark-2);}
.product-card .card-icon{background:rgba(124,203,209,.12);color:var(--aqua);}
.product-card .card-more{color:var(--aqua);}
.product-card:hover .card-more .icon{transform:translateX(3px);}

/* Zero trust: three principle cards on the dark band. */
.zt-card{background:rgba(255,255,255,.035);border-color:var(--line-dark);box-shadow:none;gap:14px;}
.zt-card h3{color:#fff;font-size:20px;}
.zt-card > p{color:var(--on-dark-2);}
.zt-card .card-icon{background:rgba(124,203,209,.12);color:var(--aqua);}
.zt-card .ticks{margin-top:4px;}
.zt-card .ticks li{color:var(--on-dark);font-size:15px;}
.zt-card .ticks .icon{color:var(--aqua);}
.zt-no{position:absolute;top:24px;right:26px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;
  font-weight:700;letter-spacing:.06em;color:var(--on-dark-3);}
.section-dark .text-link{color:var(--aqua);}
.section-dark .text-link:hover{color:#fff;}

/* ---- Split layouts ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start;}
.why{margin-top:var(--s4);padding-left:var(--s3);border-left:2px solid var(--teal);}
.why h3{font-size:18px;}
.why h3 span{color:var(--teal);}
.why p{color:var(--text-2);margin-top:6px;}
.ai-panel{display:grid;gap:var(--s2);border-top:3px solid var(--teal);}
.ai-panel h3{font-size:22px;letter-spacing:-.015em;}
.ai-panel p{color:var(--text-2);}
.text-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none;}
.text-link .icon{width:15px;height:15px;transition:transform .2s var(--ease);}
.text-link:hover .icon{transform:translateX(3px);}
.link-row{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:var(--s4);}

/* ---- Lists ---- */
.ticks{list-style:none;padding:0;display:grid;gap:12px;}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--text-2);}
.ticks .icon{width:18px;height:18px;margin-top:4px;color:var(--teal);stroke-width:2.4;}
.ticks-inline{margin-top:var(--s2);gap:6px;}
.ticks-inline li{font-size:14px;}
.ticks-inline .icon{width:16px;height:16px;margin-top:3px;}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);}
.steps li{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow);}
.step-no{display:grid;place-items:center;width:36px;height:36px;border-radius:999px;background:var(--navy);color:#fff;font-weight:800;font-size:15px;}
.steps h3{margin-top:var(--s2);font-size:18px;}
.steps p{margin-top:6px;color:var(--text-2);font-size:15px;}
.service-list{display:grid;gap:var(--s2);}
.service-row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:start;}
.service-row h2{font-size:21px;margin:0 0 6px;letter-spacing:-.015em;}
.service-row h2 a{color:var(--text);text-decoration:none;}
.service-row h2 a:hover{color:var(--teal);}
.service-row p{color:var(--text-2);}
.service-row .btn{align-self:center;}
.about-stats{display:grid;gap:var(--s2);}
.prose p{margin-top:var(--s2);color:var(--text-2);font-size:17px;}
.prose h2{font-size:24px;margin-top:var(--s5);}
.prose h2:first-child{margin-top:0;}
.prose ul,.prose ol{margin-top:var(--s2);padding-left:22px;color:var(--text-2);display:grid;gap:8px;font-size:16px;}
.legal-list{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px;margin-top:var(--s2);font-size:16px;}
.legal-list dt{font-weight:700;color:var(--text);}
.legal-list dd{margin:0;color:var(--text-2);}

/* ---- Flows ---- */
.flow{padding:28px 28px 24px;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--navy),var(--navy-2));
  border:1px solid var(--navy-3);box-shadow:var(--shadow-md);overflow-x:auto;scrollbar-width:none;}
.flow::-webkit-scrollbar{display:none;}
.panel .flow{margin-top:var(--s1);}
.flow figcaption{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--aqua);margin-bottom:var(--s3);}
.flow-steps{--n:6;list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(104px,1fr);
  position:relative;min-width:calc(var(--n) * 104px);}
.flow-steps::before{content:"";position:absolute;left:calc(50% / var(--n));right:calc(50% / var(--n));top:9px;height:2px;
  background:rgba(124,203,209,.28);}
.flow-steps::after{content:"";position:absolute;top:5px;left:calc(50% / var(--n));width:10px;height:10px;border-radius:50%;
  background:#fff;box-shadow:0 0 12px 3px rgba(124,203,209,.7);animation:travel var(--flow-t) linear infinite;}
@keyframes travel{from{left:calc(50% / var(--n));}to{left:calc(100% - 50% / var(--n) - 10px);}}
.flow-steps li,.flow-branches li{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:0 8px;}
.flow-dot{width:20px;height:20px;border-radius:50%;background:var(--navy);border:2px solid var(--aqua);position:relative;z-index:1;}
.flow-label{font-size:13px;font-weight:600;color:var(--on-dark-2);line-height:1.35;}
/* One trip of the pulse takes --flow-t; step i is reached i/(n-1) of the way,
   and lights up then, glowing briefly before it fades for the next one. */
.flow{--flow-t:calc(var(--n,6) * 1.4s);}
.flow-steps,.flow-branches{--flow-t:calc(var(--n) * 1.4s);}
.flow-dot{animation:flow-lit var(--flow-t) linear infinite;animation-delay:calc(var(--i,0) / (var(--n) - 1) * var(--flow-t));}
.flow-label{animation:flow-lit-label var(--flow-t) linear infinite;animation-delay:calc(var(--i,0) / (var(--n) - 1) * var(--flow-t));}
@keyframes flow-lit{0%,10%{background:var(--aqua);box-shadow:0 0 0 5px rgba(124,203,209,.18),0 0 18px 2px rgba(124,203,209,.75);transform:scale(1.18);}
  28%,100%{background:var(--navy);box-shadow:none;transform:none;}}
@keyframes flow-lit-label{0%,10%{color:#fff;}28%,100%{color:var(--on-dark-2);}}
/* Branches: a dashed bracket down from two neighbouring steps, joining at a
   node of its own, for the path taken only sometimes. */
.flow-branches{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(var(--n),minmax(104px,1fr));
  min-width:calc(var(--n) * 104px);}
.flow-branches li{grid-row:1;padding-top:46px;}
.flow-branches li::before{content:"";position:absolute;top:0;left:calc(25% + 6px);right:calc(25% + 6px);height:22px;border:2px dashed rgba(124,203,209,.35);
  border-top:0;border-radius:0 0 14px 14px;}
.flow-branches li::after{content:"";position:absolute;top:22px;left:50%;width:0;height:24px;border-left:2px dashed rgba(124,203,209,.35);}
.flow-branches .flow-dot{width:16px;height:16px;}
/* A branch spans two columns, but its neighbour may start one column along:
   its label keeps to one column's width so two neighbours never overlap. */
.flow-branches .flow-label{font-weight:500;font-size:12.5px;max-width:min(150px,50%);}
.fb-0{grid-column:1 / span 2;} .fb-1{grid-column:2 / span 2;} .fb-2{grid-column:3 / span 2;} .fb-3{grid-column:4 / span 2;}
.fb-4{grid-column:5 / span 2;} .fb-5{grid-column:6 / span 2;} .fb-6{grid-column:7 / span 2;} .fb-7{grid-column:8 / span 2;}

/* ---- Capabilities ---- */
.cap-index{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4);}
.cap-index a{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--on-dark);text-decoration:none;background:rgba(255,255,255,.04);border:1px solid var(--line-dark);transition:background-color .15s,border-color .15s;}
.cap-index a:hover{color:#fff;background:rgba(124,203,209,.12);border-color:rgba(124,203,209,.35);}
.cap-index span{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--aqua);font-size:12px;}
.cap-list{display:grid;gap:var(--s3);}
.cap{scroll-margin-top:96px;display:grid;gap:var(--s3);}
.cap-head{display:flex;align-items:baseline;gap:var(--s2);}
.cap-head h2{margin:0;font-size:23px;}
.cap-body{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);}
.cap-body h3{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s2);}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s2);}
.chips li{padding:5px 11px;border-radius:999px;font-size:13px;font-weight:600;background:var(--sunken);border:1px solid var(--border);color:var(--text-2);}
.chips li.chip-own{background:var(--navy);color:#fff;border-color:var(--navy);}

/* ---- The spec sheet ---- */
.spec-section .wrap{align-items:center;}
.spec{border-radius:var(--r-lg);overflow:hidden;background:rgba(5,14,27,.6);border:1px solid var(--line-dark);}
.spec dl{margin:0;padding:20px 22px 22px;display:grid;grid-template-columns:auto 1fr;gap:10px 20px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;}
.spec dt{color:var(--aqua);}
.spec dt::after{content:":";}
.spec dd{margin:0;color:var(--on-dark);}
.spec dd b{color:#fff;}
.spec dd em{font-style:normal;color:var(--on-dark-3);}
.meter{display:block;height:5px;margin-top:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;max-width:260px;}
.meter i{display:block;height:100%;width:0;border-radius:inherit;background:var(--aqua);transition:width 1.6s var(--ease);}

/* ---- Call to action ---- */
.cta-band{background:var(--navy-2);color:#fff;border-top:1px solid var(--line-dark);}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-top:var(--s6);padding-bottom:var(--s6);flex-wrap:wrap;}
.cta-band h2{font-size:clamp(24px,2.8vw,32px);letter-spacing:-.02em;line-height:1.2;}
.cta-band p{margin-top:8px;color:var(--on-dark-2);}

/* ---- Forms ---- */
.form{display:grid;gap:20px;}
.field{display:grid;gap:8px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);}
.field label{font-weight:700;font-size:14px;}
.optional{font-weight:500;color:var(--text-3);}
input,select,textarea{font:inherit;font-size:15px;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r);padding:12px 14px;width:100%;transition:border-color .15s,box-shadow .15s;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,116,128,.16);}
textarea{resize:vertical;min-height:150px;}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-2);}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--teal);}
.form .btn{justify-self:start;}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
.msg{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r);margin-bottom:20px;}
.msg ul{margin:0;padding-left:18px;}
.msg-ok{background:var(--ok-bg);color:#14532D;}
.msg-ok .icon{color:var(--ok);margin-top:3px;}
.msg-bad{background:var(--bad-bg);color:#7F1D1D;}
.contact-split{grid-template-columns:1.5fr 1fr;gap:var(--s4);}
.contact-aside p{color:var(--text-2);}
.contact-list{list-style:none;padding:0;margin-top:var(--s3);display:grid;gap:12px;}
.contact-list li{display:flex;gap:10px;align-items:center;}
.contact-list .icon{color:var(--teal);}

/* ---- Games ---- */
/* The page is one screen: header 72 + padding 2x32 + panel padding 2x24 leave
   100svh - 184px for the board, which is drawn at 220x396 and scaled up. */
.games-page{padding:var(--s4) 0;background:var(--bg);}
.games{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:center;
  min-height:calc(100svh - 72px - 2 * var(--s4));}
.games-intro{display:grid;gap:var(--s3);align-content:center;max-width:460px;}
.games-intro h1{font-size:clamp(34px,4.2vw,50px);line-height:1.1;letter-spacing:-.03em;font-weight:800;margin-top:-8px;}
.games-intro .lede{margin-top:-8px;}
.games-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:var(--sunken);
  border:1px solid var(--border);border-radius:12px;}
.games-tabs button{font:inherit;font-weight:700;font-size:15px;min-height:44px;border:0;border-radius:9px;
  background:transparent;color:var(--text-2);cursor:pointer;transition:background-color .15s,color .15s;}
.games-tabs button:hover{color:var(--text);}
.games-tabs button[aria-selected="true"]{background:var(--surface);color:var(--teal);box-shadow:var(--shadow);}
.games-scores{display:flex;gap:var(--s5);font-size:14px;color:var(--text-3);}
.games-scores strong{display:block;color:var(--text);font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.2;
  font-variant-numeric:tabular-nums;}
.games-hint{font-size:14px;color:var(--text-3);min-height:2.6em;}
.games-board{display:grid;justify-items:center;gap:var(--s2);padding:var(--s3);}
.games-canvas{display:block;width:min(330px,calc((100svh - 184px) * 220 / 396));min-width:180px;height:auto;aspect-ratio:220/396;
  border-radius:10px;background:var(--navy);image-rendering:pixelated;touch-action:none;cursor:pointer;}
.games-pad{display:grid;grid-template-columns:repeat(3,64px) 1fr;grid-template-rows:repeat(2,52px);gap:8px;width:100%;max-width:330px;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.games-pad button{display:grid;place-items:center;font:inherit;font-weight:800;font-size:15px;border:1px solid var(--border-strong);
  border-radius:12px;background:var(--surface);color:var(--text);cursor:pointer;touch-action:none;}
.games-pad button:active{background:var(--teal-soft);border-color:var(--teal);color:var(--teal);}
.games-pad button[hidden]{display:none;}
.games-pad .icon{width:24px;height:24px;stroke-width:2.4;}
.pad-up{grid-column:2;grid-row:1;}
.pad-left{grid-column:1;grid-row:2;}
.pad-down{grid-column:2;grid-row:2;}
.pad-right{grid-column:3;grid-row:2;}
.pad-action{grid-column:4;grid-row:1 / 3;background:var(--teal) !important;border-color:var(--teal) !important;color:#fff !important;}
.pad-action:active{background:var(--teal-hover) !important;}
/* A keyboard and a mouse need no buttons. */
@media (hover:hover) and (pointer:fine){ .games-pad{display:none;} }
/* Narrow screens stack: a short heading, the tabs and scores, then the board
   and its buttons, which give way so they fit on the screen together. */
@media (max-width:900px){
  .games{grid-template-columns:1fr;gap:var(--s2);min-height:0;justify-items:center;}
  .games-intro{max-width:520px;width:100%;gap:12px;}
  .games-intro h1{font-size:30px;margin-top:0;}
  .games-intro .lede{display:none;}
  .games-scores{justify-content:space-between;gap:var(--s2);}
  .games-scores span{display:flex;align-items:baseline;gap:8px;}
  .games-scores strong{font-size:20px;}
  .games-hint{display:none;}
  .games-board{width:100%;max-width:520px;padding:var(--s2);gap:12px;}
  .games-canvas{width:min(100%,330px,calc((100svh - 380px) * 220 / 396));min-width:160px;}
}
@media (max-width:900px) and (hover:hover) and (pointer:fine){
  .games-canvas{width:min(100%,330px,calc((100svh - 300px) * 220 / 396));}
}

/* ---- Footer ---- */
.footer{background:var(--navy);color:var(--on-dark-3);padding-top:var(--s6);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s5);}
.brand-footer .brand-name{font-size:18px;}
.footer-slogan{margin-top:var(--s2);color:var(--on-dark);font-weight:700;}
.footer-note{margin-top:8px;font-size:14px;max-width:26rem;}
.footer-title{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark);margin-bottom:var(--s2);}
.footer-title-gap{margin-top:var(--s4);}
.footer-links{list-style:none;padding:0;display:grid;gap:10px;font-size:14px;}
.footer-links a{color:var(--on-dark-2);text-decoration:none;}
.footer-links a:hover{color:#fff;}
.footer-contact{margin-top:var(--s3);}
.footer-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:var(--s6);padding-top:var(--s3);padding-bottom:var(--s4);
  border-top:1px solid var(--line-dark);font-size:13px;}

/* ---- Quiet movement ---- */
/* Items fade in as they are scrolled to, after a short random pause (--d,
   from the script), and stay. A fade only: nothing moves while the page
   scrolls. */
.js [data-reveal]{opacity:0;}
.js [data-reveal].in{opacity:1;transition:opacity 2.2s var(--ease) var(--d,0ms);}
/* Card icons bob, each at its own pace (--fd, --fo from the script). */
.card .card-icon{animation:icon-bob var(--fd,5s) ease-in-out var(--fo,0s) infinite alternate;}
@keyframes icon-bob{from{transform:translateY(-3px) rotate(-3deg);}to{transform:translateY(3px) rotate(3deg);}}

/* Scroll progress, under the header. */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;}
.scroll-progress i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:var(--teal);}

/* No scrollbar, as the owner asked. The page scrolls with wheel, touch and keys;
   where you are is shown by the section dots, the back-to-top ring and the line. */
html{scrollbar-width:none;-ms-overflow-style:none;}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none;}
.cap-index{scrollbar-width:none;}
.cap-index::-webkit-scrollbar{display:none;}

/* Section navigator: a dot per section on the right edge. */
.section-nav{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:12px;}
.section-nav[hidden]{display:none;}
.section-nav a{position:relative;display:flex;align-items:center;justify-content:flex-end;width:14px;height:14px;text-decoration:none;}
.section-nav .dot{width:7px;height:7px;border-radius:50%;background:rgba(102,116,138,.45);transition:transform .2s var(--ease),background-color .2s;}
.section-nav a:hover .dot{background:var(--teal);}
.section-nav a.on .dot{background:var(--teal);transform:scale(1.45);}
.section-nav .label{position:absolute;right:22px;white-space:nowrap;font-size:12.5px;font-weight:600;color:#fff;
  background:var(--navy);padding:5px 10px;border-radius:6px;
  opacity:0;transform:translateX(4px);transition:opacity .15s,transform .15s var(--ease);pointer-events:none;}
.section-nav a:hover .label,.section-nav a:focus-visible .label{opacity:1;transform:none;}

/* Back to top, with a ring that fills as you scroll. */
.to-top{position:fixed;right:20px;bottom:20px;z-index:55;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);box-shadow:0 8px 20px rgba(10,27,48,.25);color:#fff;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s,transform .25s var(--ease);}
.to-top:hover{color:#fff;}
.to-top.show{opacity:1;transform:none;pointer-events:auto;}
.to-top > svg:first-child{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
.ring-track{fill:none;stroke:rgba(255,255,255,.12);stroke-width:2.5;}
.ring{fill:none;stroke:var(--aqua);stroke-width:2.5;stroke-linecap:round;}
.to-top-arrow{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease);}
.to-top:hover .to-top-arrow{transform:translateY(-2px);}

/* ---- Smaller screens ---- */
@media (max-width:1080px){
  .section-nav{display:none;}
}
/* Six menu items need about 900px; below that, the menu button. */
@media (max-width:900px){
  .nav{display:none;}
  .nav-mobile{display:block;}
  .nav-mobile-panel{top:72px;}
}
@media (max-width:980px){
  :root{--section:80px;}
  .hero-inner,.split,.contact-split{grid-template-columns:1fr;gap:var(--s5);}
  .hero-inner{padding-top:var(--s6);padding-bottom:var(--s6);}
  .card-grid,.card-grid-3{grid-template-columns:repeat(2,1fr);}
  .card-grid-4,.steps{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:720px){
  :root{--section:var(--s6);}
  .section-slim{--section:var(--s5);}
  .wrap{padding:0 var(--s2);}
  .topbar-inner{height:64px;}
  .nav-mobile-panel{top:64px;}
  .hero-inner{padding-top:var(--s5);padding-bottom:var(--s5);}
  .hero-lede{font-size:17px;}
  .hero-stats{grid-template-columns:1fr;}
  .page-hero{padding:var(--s5) 0 var(--s4);}
  .card-grid,.card-grid-3,.card-grid-4,.steps,.field-row,.footer-grid,.cap-body{grid-template-columns:1fr;}
  .card,.panel,.steps li{padding:var(--s3);}
  .section-head{margin-bottom:var(--s4);}
  .service-row{grid-template-columns:1fr;gap:var(--s2);}
  .service-row .btn{justify-self:start;}
  .page-hero-title{align-items:flex-start;flex-direction:column;}
  .terminal pre{font-size:12px;min-height:calc(8 * 1.7em + 38px);}
  .flow{padding:20px 16px;}
  .legal-list{grid-template-columns:1fr;gap:0;}
  .legal-list dd{margin-bottom:10px;}
  .cta-inner{padding-top:var(--s5);padding-bottom:var(--s5);}
  .to-top{right:14px;bottom:14px;width:44px;height:44px;}
}
/* Touch screens: every link and button at least 44px tall, so a thumb hits
   the one it means; labels no smaller than 12px. */
@media (pointer:coarse), (max-width:720px){
  .footer-links{gap:0;}
  .footer-links a,.text-link,.crumbs a,.service-row h2 a,.contact-list a,.cap-index a{display:inline-flex;align-items:center;min-height:44px;}
  .crumbs a{padding:0 4px;margin:0 -4px;}
  .link-row{gap:0 24px;}
  .nav-mobile summary{display:grid;place-items:center;width:44px;height:44px;padding:0;}
  .check{min-height:44px;align-items:center;}
  .check input{width:22px;height:22px;margin-top:0;}
  .tag,.hero .stat-small,.stat-small{font-size:12px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important;}
  .caret,.flow-steps::after,.flow-dot,.flow-label,.ha svg,.ha-turn,.ha-nodes circle,.ha-core,.ha-lit,.ha-bars line{animation:none !important;}
  .js [data-reveal]{opacity:1;}
  .card .card-icon{animation:none;}
}

/* ---- Measured availability (app/status.py, templates/_availability.html) ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.avail{margin-top:var(--s3);max-width:420px;}
.avail-head{display:flex;flex-wrap:wrap;gap:6px 22px;}
.avail-figure{margin:0;font-size:13px;color:var(--text-2);}
.avail-figure strong{font-size:20px;color:var(--text);letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-right:2px;}
.avail-chart{display:block;width:100%;max-width:340px;height:auto;margin-top:8px;overflow:visible;}
.avail-grid{stroke:var(--border);stroke-width:1;}
.avail-axis{font-size:9px;fill:var(--text-3);font-variant-numeric:tabular-nums;}
.avail-line{fill:none;stroke:var(--teal);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.avail-dot circle{fill:var(--teal);stroke:var(--surface);stroke-width:2;}
.avail-dot .avail-hit{fill:transparent;stroke:none;}
.avail-dot:hover circle:not(.avail-hit){r:5;}
.avail-note{margin:6px 0 0;font-size:12px;color:var(--text-3);}
.avail-panel .avail{margin-top:0;max-width:none;}
.avail-panel .avail-chart{max-width:400px;}

/* Desktop scrolling: the stargate's moving layers are handed to the
   compositor up front, and the hero's repaints stay inside the hero. */
.gate-on .hero{contain:paint;}
.gate-on .hero-inner,.gate-on .gate,.gate-on .gate-ring,.gate-on .hero-net,.gate-on .ha{will-change:transform,scale,translate,rotate,opacity;}

/* Scroll-driven, where the browser supports it (html.sda, set by site.js):
   the stargate and the progress bar follow the scroll position directly, in
   step with it and off the main thread. The keyframes are the --p rules above
   with p running 0 to 1 between --gs and --ge, which site.js measures. */
@keyframes sda-progress{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes gate-open{0%{opacity:0;scale:.3;}20%{opacity:.84;scale:.86;}100%{opacity:.2;scale:3.1;}}
@keyframes gate-turn{from{rotate:0deg;}to{rotate:200deg;}}
@keyframes gate-glow{0%{opacity:0;}62.5%,100%{opacity:1;}}
@keyframes gate-text{0%{scale:1;opacity:1;}62.5%{opacity:0;}100%{scale:1.45;opacity:0;}}
@keyframes gate-net{from{scale:1;}to{scale:1.9;}}
@keyframes gate-fly{from{translate:0 0;scale:1;}to{translate:calc(var(--wx,0) * 70vw) calc(var(--wy,0) * 70vh);scale:2.6;}}
.sda .scroll-progress i{animation:sda-progress linear both;animation-timeline:scroll(root);}
.sda.gate-on .gate{animation:gate-open linear both;}
.sda.gate-on .gate-ring{animation:gate-turn linear both;}
.sda.gate-on .hero-inner{animation:gate-text linear both;}
.sda.gate-on .hero-net{animation:gate-net linear both;}
.sda.gate-on .ha{animation:gate-fly linear both;}
.sda.gate-on .gate,.sda.gate-on .gate-ring,.sda.gate-on .hero-inner,.sda.gate-on .hero-net,.sda.gate-on .ha{
  animation-timeline:scroll(root);animation-range:var(--gs,0px) var(--ge,600px);}
/* The horizon keeps its slow pulse in size; its brightness follows the scroll. */
.sda.gate-on .gate-horizon{animation:horizon 2.8s ease-in-out infinite alternate,gate-glow linear both;
  animation-timeline:auto,scroll(root);animation-range:normal,var(--gs,0px) var(--ge,600px);}