/* SapienOS marketing site — brand tokens shared with the product design system */
:root{
  --bg:#0B1220; --surface:#111A2B; --card:#131D30; --muted:#1A2538;
  --border:#243149; --border-2:#2E3D58;
  --text:#F1F5F9; --text-2:#9AA8BF; --text-3:#647189;
  --accent:#2DD4A7; --accent-ink:#04140F;
  --info:#38BDF8; --warn:#F59E0B; --ok:#22C55E; --purple:#A78BFA;
  --slate-a:#597694; --slate-b:#3d5875;
  --radius:16px; --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  --nav-h:65px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* scroll reveal — hidden state only when JS is present; reduced-motion shows everything */
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease-out,transform .5s ease-out}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  html.js .reveal{opacity:1;transform:none}
}
body{background:var(--bg);color:var(--text);font:400 16px/1.6 'Fira Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
/* anchored targets clear the sticky nav, with a little breathing room */
:where(h1,h2,h3,h4,section,details,[id]){scroll-margin-top:calc(var(--nav-h) + 15px)}
.mono{font-family:'Fira Code',monospace}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:0 0 10px 0;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* nav */
#site-header{height:var(--nav-h)}
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.nav .brand{flex:none}
.nav .brand img{display:block;height:40px;width:auto;max-width:none}
.nav nav{display:flex;gap:22px;margin-left:auto}
.nav nav a{color:var(--text-2);font-size:14px;font-weight:500}
.nav nav a:hover{color:var(--text);text-decoration:none}
.nav .cta{margin-left:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 'Fira Sans',sans-serif;padding:13px 22px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:transform .18s,box-shadow .18s,background .18s}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px -10px var(--accent);text-decoration:none}
.btn.ghost{border-color:var(--border-2);color:var(--text)}
.btn.ghost:hover{border-color:var(--accent);text-decoration:none}
.btn.sm{padding:9px 16px;font-size:13.5px}
.btn:active{transform:scale(.98)}

/* hero */
.hero{padding:88px 0 40px;background:
  radial-gradient(90% 60% at 70% -10%, rgba(45,212,167,.08), transparent 60%),
  radial-gradient(60% 50% at 10% 0%, rgba(56,189,248,.06), transparent 60%)}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:16px}
h1{font-size:46px;line-height:1.12;letter-spacing:-.02em;font-weight:700}
h1 .grad{background:linear-gradient(90deg,var(--accent),var(--info));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p.lede{font-size:18px;color:var(--text-2);margin:20px 0 28px;max-width:56ch}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.chip{font-size:12.5px;color:var(--text-2);border:1px solid var(--border);border-radius:999px;padding:6px 13px;display:inline-flex;align-items:center;gap:7px}
.chip svg{color:var(--accent)}
.shot{border:1px solid var(--border-2);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--surface)}
.shot .bar{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border)}
.shot .bar span{width:10px;height:10px;border-radius:50%;background:var(--muted)}
.shot figcaption{font-size:12.5px;color:var(--text-2);padding:10px 14px;border-top:1px solid var(--border)}

/* sections */
section{padding:84px 0}
.sec-kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:10px}
h2{font-size:32px;letter-spacing:-.015em;line-height:1.2;max-width:24ch}
.sec-sub{color:var(--text-2);margin-top:12px;max-width:64ch}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.card .ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px}
.card h3{font-size:17px;margin-bottom:8px}
.card p{font-size:14px;color:var(--text-2)}
.card .tag,.uc-card .tag{display:inline-block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--border);padding:3px 9px;border-radius:999px;margin-top:14px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;counter-reset:step}
.step{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font:600 13px 'Fira Code',monospace;color:var(--accent);display:block;margin-bottom:12px}
.step h3{font-size:17px;margin-bottom:8px}
.step p{font-size:14px;color:var(--text-2)}

/* facts strip */
.facts{background:linear-gradient(150deg,var(--slate-a),var(--slate-b));border-radius:var(--radius);padding:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:40px}
.fact b{display:block;font:600 30px/1.1 'Fira Code',monospace;color:#fff}
.fact span{font-size:13px;color:rgba(255,255,255,.92);display:block;margin-top:8px}

/* mid-page CTA band */
.cta-band{margin-top:36px;border:1px solid var(--border-2);border-radius:var(--radius);
  background:radial-gradient(80% 120% at 50% -20%, rgba(45,212,167,.10), transparent 60%), var(--surface);
  padding:36px 32px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.cta-band p{font-size:19px;font-weight:600;max-width:34ch}
.cta-band span{display:block;font-size:13.5px;font-weight:400;color:var(--text-2);margin-top:6px}

/* faq */
.faq{max-width:820px}
.faq details{border:1px solid var(--border);border-radius:14px;background:var(--card);margin-top:12px}
.faq summary{cursor:pointer;font-weight:600;font-size:15.5px;padding:18px 20px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--text-3);font:400 20px/1 'Fira Code',monospace;flex:none}
.faq details[open] summary::after{content:'–'}
.faq details p{padding:0 20px 18px;color:var(--text-2);font-size:14.5px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:40px;align-items:start}
form{display:grid;gap:16px}
label{font-size:13.5px;font-weight:500;color:var(--text-2);display:grid;gap:7px}
input,textarea{background:var(--muted);border:1px solid var(--border);border-radius:11px;color:var(--text);font:400 15px 'Fira Sans',sans-serif;padding:13px 14px;width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--accent)}
.req{color:var(--warn)}
.hp{display:none}
/* inline form error (contact form; shown by site.js instead of navigating away).
   No literal fallback on purpose: the obvious one (#DC2626) is 4.49:1 on --bg
   — 4.30:1 once #contact's glow is composited in — i.e. AA-failing on the very
   ground this form sits on. Token or nothing.
   The region is always in the DOM and never display:none, so role="alert" has
   something to observe when the text lands; empty it generates no line box, and
   :empty drops the margin so an untouched form doesn't reserve space. */
.form-error{color:var(--danger);font-size:14px;margin:0 0 14px}
.form-error:empty{margin:0}

/* footer */
/* section rhythm — subtle tonal glows */
#how{background:radial-gradient(50% 70% at 50% 0%, rgba(56,189,248,.05), transparent 60%)}
#contact{background:radial-gradient(70% 90% at 50% 110%, rgba(45,212,167,.07), transparent 65%)}

/* mobile nav (disclosure) */
.mnav{display:none;position:relative;margin-left:auto}
.mnav summary{list-style:none;cursor:pointer;width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;color:var(--text-2)}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] summary{border-color:var(--accent);color:var(--accent)}
.mnav .panel{position:absolute;right:0;top:52px;background:var(--surface);border:1px solid var(--border-2);border-radius:14px;box-shadow:var(--shadow);padding:10px;display:grid;gap:2px;min-width:220px}
.mnav .panel a{display:block;padding:11px 14px;border-radius:9px;color:var(--text);font-size:14.5px;font-weight:500}
.mnav .panel a:hover{background:var(--muted);text-decoration:none}

footer{border-top:1px solid var(--border);padding:36px 0 48px;font-size:13px;color:var(--text-2)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer img{display:block;height:44px;width:auto}

@media (max-width:960px){
  .hero .grid,.contact-grid{grid-template-columns:1fr}
  .cards,.steps{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr 1fr}
  h1{font-size:36px}
  .nav nav{display:none}
  .mnav{display:block}
  .nav .cta{margin-left:0}
  /* compact lockup here: the bar also carries the pilot CTA, so the full
     lockup would overflow a 390px viewport */
  .nav .wrap{gap:16px}
  .nav .brand img{height:36px}
}
@media (max-width:600px){
  .cards,.steps,.facts{grid-template-columns:1fr}
  section{padding:60px 0}
  .hero{padding:56px 0 24px}
  h1{font-size:31px}
}

/* ============ LIGHT HYBRID (the shipped look) ============
   Dark slate nav/hero/footer bookends (native home of the lockup);
   enterprise-light body using the product design system's light tokens.
   These override the dark base tokens above via the cascade. */
:root{
  --bg:#F4F7FB; --surface:#FFFFFF; --card:#FFFFFF; --muted:#EEF2F8;
  --border:#E2E8F0; --border-2:#D4DDE9;
  /* --text-3 borrows #647189 from the dark base :root at the top of this file
     rather than adding a palette value: #8593A8 was 3.12:1 on white, 2.90:1 on --bg. */
  --text:#0F1B2D; --text-2:#51607A; --text-3:#647189;
  /* --accent darkened from #0FA27E (3.24:1 on white, and the same ratio for
     .btn.primary's white ink against its own fill). See the bookend re-scope below. */
  --accent:#0B7A5F; --accent-ink:#FFFFFF;
  --info:#0284C7; --warn:#D97706; --ok:#16A34A; --purple:#7C5CD4;
  /* --danger is light-body only (the dark bookends carry no form): #B91C1C is
     6.47:1 on white and 6.02:1 on --bg. #DC2626 would be 4.49:1 on --bg. */
  --danger:#B91C1C;
  --shadow:0 12px 28px -16px rgba(15,27,45,.22);
}
body{background:var(--bg)}

/* dark bookends: nav + hero + footer keep the brand-dark environment */
/* dark bookends re-scope the accent: #0B7A5F is 3.53:1 on #0B1220, but
   #2DD4A7 is 9.88:1. Light-body AA and dark-bookend AA need different values.
   The trap if the brand teal ever moves: --accent below and the hardcoded
   .hero .kicker further down this block must move together, or
   tools/check-contrast.py will verify the new value while the kicker keeps
   painting the old one. (.hero/.nav .btn.primary also hardcode #2DD4A7 but are
   already dead — the transparent-CTA block near the end of the file overrides
   both properties at equal specificity.) */
.hero,footer,.nav{--accent:#2DD4A7}
.nav{background:rgba(11,18,32,.92);border-bottom-color:#243149}
.nav nav a{color:#9AA8BF}
.nav nav a:hover{color:#F1F5F9}
.nav .btn.primary{background:#2DD4A7;color:#04140F}
.mnav summary{border-color:#243149;color:#9AA8BF}
.mnav .panel{background:#111A2B;border-color:#2E3D58}
.mnav .panel a{color:#F1F5F9}
.mnav .panel a:hover{background:#1A2538}

.hero{background:#0B1220;position:relative}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(90% 60% at 70% -10%, rgba(45,212,167,.08), transparent 60%),
  radial-gradient(60% 50% at 10% 0%, rgba(56,189,248,.06), transparent 60%)}
.hero .wrap{position:relative;z-index:1}
.hero .kicker{color:#2DD4A7}
.hero h1{color:#F1F5F9}
.hero p.lede{color:#9AA8BF}
.hero .btn.primary{background:#2DD4A7;color:#04140F}
.hero .btn.primary:hover{box-shadow:0 10px 26px -10px #2DD4A7}
.hero .btn.ghost{border-color:#2E3D58;color:#F1F5F9}
.hero .btn.ghost:hover{border-color:#2DD4A7}
.hero .chip{color:#9AA8BF;border-color:#243149}
.hero .shot{border-color:#2E3D58;background:#111A2B;box-shadow:0 24px 50px -20px rgba(0,0,0,.6)}
.hero .shot .bar{border-bottom-color:#243149}
.hero .shot .bar span{background:#1A2538}
.hero figcaption{color:#9AA8BF;border-top-color:#243149}
/* soften the dark-to-light seam */
.hero{padding-bottom:72px}

/* light-body adjustments */
#how{background:none}
#contact,.cta-final{background:radial-gradient(70% 90% at 50% 110%, rgba(15,162,126,.06), transparent 65%)}
.card,.step{box-shadow:0 1px 2px rgba(15,27,45,.04)}
.cta-band{background:radial-gradient(80% 120% at 50% -20%, rgba(15,162,126,.08), transparent 60%), var(--surface)}
input,textarea{background:#FFFFFF}

/* dark footer bookend */
footer{background:#0B1220;border-top:0;padding:44px 0 56px;color:#9AA8BF}

/* ============ PREMIUM PASS ============
   Display typography, aurora + grain hero, seam-straddling shot,
   gradient borders & depth, count-up facts, richer footer. */
h1,h2,h3,.cta-band p{font-family:'Space Grotesk','Fira Sans',sans-serif}
h1{font-size:clamp(38px,4.1vw,56px);letter-spacing:-.03em;line-height:1.08;font-weight:700;max-width:15ch}
h2{font-size:clamp(28px,3vw,40px);letter-spacing:-.02em}
.sec-kicker,.kicker{display:inline-flex;align-items:center;gap:10px}
.sec-kicker::before,.kicker::before{content:'';width:22px;height:1px;background:currentColor;opacity:.7}
.hero p.lede{font-size:19px}

/* hero: aurora + grain, extra depth */
.hero{position:relative;padding:96px 0 150px}
.hero::before{content:'';position:absolute;inset:-8% 0;pointer-events:none;filter:blur(70px);opacity:.9;background:
  radial-gradient(34% 30% at 72% 22%, rgba(45,212,167,.16), transparent 70%),
  radial-gradient(30% 32% at 18% 8%, rgba(56,189,248,.13), transparent 70%),
  radial-gradient(26% 26% at 48% 78%, rgba(124,92,212,.08), transparent 70%);
  animation:aurora 26s ease-in-out infinite alternate}
@keyframes aurora{from{transform:translate3d(-2.5%,-1.5%,0) scale(1)}to{transform:translate3d(2.5%,2%,0) scale(1.06)}}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion: reduce){.hero::before{animation:none}}

/* the shot straddles the dark→light seam */
.hero .grid{align-items:end}
.hero .chips{margin-bottom:6px}
.hero .shot{position:relative;z-index:2;margin-bottom:-260px;
  transform:perspective(1400px) rotateX(1.5deg) rotateY(-2.5deg);
  transition:transform .5s ease;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.65), 0 18px 40px -20px rgba(45,212,167,.14)}
.hero .shot:hover{transform:none}
@media (prefers-reduced-motion: reduce){.hero .shot{transform:none}}
#how{padding-top:200px}

/* gradient borders + hover depth on cards */
.card,.step,.cta-band{border:1px solid transparent;
  background-image:linear-gradient(var(--card),var(--card)),
    linear-gradient(160deg, rgba(45,212,167,.35), var(--border-2) 32%, var(--border) 70%);
  background-origin:border-box;background-clip:padding-box,border-box;
  transition:transform .25s ease, box-shadow .25s ease}
.step{background-image:linear-gradient(var(--surface),var(--surface)),
    linear-gradient(160deg, rgba(56,189,248,.30), var(--border-2) 32%, var(--border) 70%)}
.card:hover,.step:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(15,27,45,.25)}
.card .ico{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 6px 16px -8px rgba(15,27,45,.25)}

/* premium primary button */
.btn.primary,.hero .btn.primary,.nav .btn.primary{
  background:linear-gradient(160deg,#3BE3B6,#0FA27E 85%);color:#04140F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px -10px rgba(15,162,126,.55)}
.btn.primary:hover,.hero .btn.primary:hover{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 14px 30px -10px rgba(15,162,126,.6)}

/* facts strip: grain + gradient edge */
.facts{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -30px rgba(43,64,90,.55)}
.facts::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fact b{font-size:clamp(30px,2.6vw,38px)}

/* richer footer */
footer .foot-grid{display:grid;grid-template-columns:1.3fr 1fr .9fr;gap:36px;align-items:start}
.foot-line{font-size:13.5px;color:#9AA8BF;margin-top:14px;max-width:30ch}
.foot-nav{display:grid;gap:10px}
.foot-nav a{color:#9AA8BF;font-size:13.5px}
.foot-nav a:hover{color:#F1F5F9;text-decoration:none}
.foot-fine{display:grid;gap:8px;justify-items:end;text-align:right;color:#647189;font-size:12.5px}
@media (max-width:760px){
  footer .foot-grid{grid-template-columns:1fr;gap:26px}
  .foot-fine{justify-items:start;text-align:left}
  .hero{padding-bottom:120px}
  .hero .shot{margin-bottom:-150px;transform:none}
  #how{padding-top:150px}
}

/* ============ GLASS PASS ============
   Frosted surfaces throughout: deep-glass nav, frosted console frame, glass
   pills, glass cards over soft pastel fields (glass needs colour behind it),
   glass fact tiles on the slate strip. */
.nav{background:rgba(11,18,32,.86);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid rgba(255,255,255,.1)}

.hero .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* frosted frame around the console */
.hero .shot{background:rgba(17,26,43,.5);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.14);padding:10px}
.hero .shot .bar{border-bottom:0;padding:6px 8px 12px}
.hero .shot .bar span{background:rgba(255,255,255,.16)}
.hero .shot img{border-radius:9px;border:1px solid rgba(255,255,255,.08)}
.hero .shot figcaption{border-top:0;padding:12px 6px 4px;color:#B7C2D4}

/* pastel fields behind the light sections so the glass has something to frost */
#how,#platform,#modalities,#live,#faq,#contact,.cta-final{position:relative}
#how::before,#platform::before,#modalities::before,#faq::before,#contact::before,.cta-final::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(46% 38% at 12% 14%, rgba(45,212,167,.11), transparent 70%),
  radial-gradient(42% 36% at 88% 34%, rgba(56,189,248,.10), transparent 70%),
  radial-gradient(38% 30% at 55% 96%, rgba(124,92,212,.08), transparent 70%)}
section>.wrap{position:relative;z-index:1}

/* glass cards on the light body */
.card,.step,.cta-band,.faq details{background-image:none;background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 8px 30px -18px rgba(15,27,45,.28), inset 0 1px 0 rgba(255,255,255,.9)}
.card:hover,.step:hover{background:rgba(255,255,255,.7)}
.card .tag,.uc-card .tag{background:rgba(255,255,255,.5)}

/* glass fact tiles on the slate strip */
.facts{gap:16px;padding:22px}
.fact{position:relative;z-index:1;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  border-radius:14px;padding:20px 18px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}

/* glass inputs + mobile menu */
input,textarea{background:rgba(255,255,255,.7);border-color:rgba(15,27,45,.14)}
input:focus,textarea:focus{background:#fff}
.mnav .panel{background:rgba(17,26,43,.72);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border-color:rgba(255,255,255,.14)}

/* ============ PICS & MOTION PASS ============ */
/* animated data-flow diagram */
.flow{margin:44px 0 10px}
.flow .rail{stroke:var(--border-2);stroke-width:2;fill:none}
.flow .pulse{stroke:url(#g) var(--accent);stroke:var(--accent);stroke-width:2.5;fill:none;stroke-linecap:round;
  stroke-dasharray:26 210;animation:flowdash 2.6s linear infinite}
.flow .p2{animation-delay:1.3s;stroke:var(--info)}
@keyframes flowdash{from{stroke-dashoffset:236}to{stroke-dashoffset:0}}
.flow .ping{fill:var(--info);opacity:.25;transform-origin:center;transform-box:fill-box;animation:ping 2.6s ease-out infinite}
.flow .s2{animation-delay:.9s}.flow .s3{animation-delay:1.7s}
@keyframes ping{0%{transform:scale(.4);opacity:.45}80%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}}
.flow .nodebox{fill:rgba(255,255,255,.65);stroke:rgba(255,255,255,.9)}
.flow .nodebox.gw{stroke:rgba(45,212,167,.5)}
.flow .nodebox.tw{stroke:rgba(124,92,212,.4)}
.flow text{font:500 12px 'Fira Code',monospace;fill:var(--text-2);text-anchor:middle}

/* gallery */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.shot.g{background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);padding:8px;
  box-shadow:0 18px 50px -25px rgba(15,27,45,.4)}
.shot.g .bar{border-bottom:0;padding:6px 8px 10px}
.shot.g .bar span{background:rgba(15,27,45,.12)}
.shot.g .zoom{overflow:hidden;border-radius:9px}
.shot.g img{border-radius:9px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.shot.g:hover img{transform:scale(1.035)}
.shot.g figcaption{color:var(--text-2);border-top:0;padding:12px 6px 4px}
@media (max-width:860px){.gallery{grid-template-columns:1fr}}

/* primary button shine sweep */
.btn.primary{position:relative;overflow:hidden}
.btn.primary::after{content:'';position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .5s ease}
.btn.primary:hover::after{left:125%}

/* smooth FAQ expand (progressive: Chrome 131+) */
.faq details::details-content{height:0;overflow:clip;transition:height .3s ease,content-visibility .3s allow-discrete}
.faq details[open]::details-content{height:auto}
.faq{interpolate-size:allow-keywords}

/* ============ CTA CONTRAST PASS ============ */
/* nav links: brighter on the dark glass */
.nav nav a{color:#C7D2E2}
.nav nav a:hover{color:#FFFFFF}
.nav nav a.active{color:#FFFFFF}
/* nav CTA: white pill, ink text — maximum contrast on dark glass */
.nav .btn.primary{background:#FFFFFF;color:#0B1220;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 22px -10px rgba(255,255,255,.35)}
.nav .btn.primary:hover{background:#F2F6FA;box-shadow:0 10px 26px -10px rgba(255,255,255,.45)}
/* body primary CTAs: electric teal->cyan, echoes the logo's cyan glow */
.btn.primary,.hero .btn.primary{background:linear-gradient(135deg,#2DE0AE,#22C8E0 90%);color:#03161B;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 10px 26px -10px rgba(34,200,224,.55)}
.btn.primary:hover,.hero .btn.primary:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 16px 34px -10px rgba(34,200,224,.65)}

/* ============ NAV DROPDOWN (use cases) ============ */
/* literal dark-glass palette, not tokens — the nav is permanently dark and the
   light-hybrid tokens resolve wrong here (same precedent as the CTA-contrast pass) */
/* hover polish: underline-grow on the primary links + trigger */
.nav nav>a,.ndrop-btn{position:relative;transition:color .18s ease}
.nav nav>a::after,.ndrop-btn::before{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1.5px;
  background:#7FE9CC;transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.nav nav>a:hover::after,.ndrop-btn:hover::before{transform:scaleX(1)}
.ndrop{position:relative;display:flex;align-items:center}
.ndrop-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;
  font:500 14px/1.6 'Fira Sans',system-ui,sans-serif;color:#C7D2E2}
.ndrop-btn:hover,.ndrop-btn[aria-expanded="true"],.ndrop-btn.active{color:#FFFFFF}
.ndrop-btn .chev{flex:none;transition:transform .18s ease}
.ndrop-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.ndrop-panel{position:absolute;top:calc(100% + 19px);right:-14px;width:max-content;
  display:grid;grid-template-columns:auto auto auto;gap:2px 12px;padding:14px;
  background:rgba(17,26,43,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid #2E3D58;border-radius:14px;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.ndrop-btn[aria-expanded="true"]+.ndrop-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.ndrop-label{font:600 11px/1 'Fira Code',monospace;letter-spacing:.1em;text-transform:uppercase;color:#647189;padding:8px 10px 7px}
.nav .ndrop-panel a{display:block;padding:8px 10px;border-radius:8px;color:#F1F5F9;font-size:14px;font-weight:500;white-space:nowrap}
.nav .ndrop-panel a:hover{background:#1A2538;color:#7FE9CC;text-decoration:none}
.nav .ndrop-panel .ndrop-all{grid-column:1/-1;margin-top:10px;padding:12px 10px 4px;border-top:1px solid #243149;border-radius:0;color:#7FE9CC;font-weight:600}
.nav .ndrop-panel .ndrop-all:hover{background:none;color:#FFFFFF}
/* mobile panel: grouped use-case list + short-viewport scroll */
.mnav .panel{max-height:calc(100dvh - 76px);overflow-y:auto}
.mnav-label{font:600 10.5px/1 'Fira Code',monospace;letter-spacing:.1em;text-transform:uppercase;color:#647189;padding:12px 14px 5px}

/* ============ PHOTO PASS (Unsplash standard licence — Darmody/Meckler/Keane/Musalimov) ============ */
.mcard{overflow:hidden}
.mcard .mhead{margin:-24px -24px 18px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.7)}
.mcard .mhead img{width:100%;height:132px;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.mcard:hover .mhead img{transform:scale(1.045)}
/* modality strip demoted below the module model — smaller photo heads */
.cards.secondary{margin-top:32px}
.cards.secondary .mhead img{height:96px}
/* facts strip: facade texture beneath the slate gradient */
.facts{background:
  linear-gradient(150deg, rgba(89,118,148,.82), rgba(61,88,117,.9)),
  url('assets/texture-facade.jpg') center/cover}

/* ============ HERO BACKDROP + FLOW V2 ============ */
.hero{background:
  linear-gradient(100deg, rgba(11,18,32,.9) 30%, rgba(11,18,32,.55) 72%, rgba(11,18,32,.68)),
  url('assets/hero-city.jpg') center 24%/cover, #0B1220}

.flow{margin:48px 0 6px}
.flow .railbase{stroke:var(--border-2);stroke-width:1.6;fill:none}
.flow .railtop{stroke:url(#railg);stroke-width:1.6;fill:none;opacity:.35}
.flow .fglass{fill:rgba(255,255,255,.7);stroke:rgba(255,255,255,.95)}
.flow .fglass.gw{stroke:rgba(15,162,126,.45)}
.flow .fwin rect{fill:rgba(15,27,45,.10)}
.flow .fwin .lit{fill:rgba(45,212,167,.35)}
.flow .sdot{fill:#0FA27E}
.flow .sping{fill:none;stroke:#0FA27E;stroke-width:1.4;opacity:0;transform-origin:center;transform-box:fill-box;
  animation:sping 3s ease-out infinite}
.flow .sping.b{animation-delay:1s}.flow .sping.c{animation-delay:2s}
@keyframes sping{0%{transform:scale(.35);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.flow .ering{fill:none;stroke:#0FA27E;stroke-width:1.2;opacity:0;transform-origin:center;transform-box:fill-box;
  animation:ering 2.8s ease-out infinite}
.flow .ering.r2{animation-delay:1.4s}
@keyframes ering{0%{transform:scale(.85);opacity:.55}75%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.flow .tface.body{fill:rgba(124,92,212,.10);stroke:rgba(124,92,212,.55);stroke-width:1.6}
.flow .tface.top{fill:rgba(124,92,212,.22);stroke:rgba(124,92,212,.55);stroke-width:1.6}
.flow .tedge{fill:none;stroke:rgba(124,92,212,.4);stroke-width:1.2;stroke-dasharray:3 4;
  animation:tdash 6s linear infinite}
@keyframes tdash{to{stroke-dashoffset:-42}}
.flow .orbit{transform-origin:850px 105px;animation:orbit 7s linear infinite}
.flow .orbit.o2{animation-duration:11s;animation-direction:reverse}
@keyframes orbit{to{transform:rotate(360deg)}}
.flow .flab{font:600 13px 'Space Grotesk','Fira Sans',sans-serif;fill:var(--text);text-anchor:middle;letter-spacing:.12em}
.flow .fsub{font:500 10.5px 'Fira Code',monospace;fill:var(--text-3);text-anchor:middle}

/* ============ TEKVOCA-STYLE TRANSPARENT CTAS ============
   Flat tinted glass: accent @14% fill, 45% accent border, lightened accent
   text; no gradients, no glow, no sweep. */
.btn.primary,.hero .btn.primary,.nav .btn.primary{
  background:rgba(45,212,167,.14);
  border:1px solid rgba(45,212,167,.5);
  color:#7FE9CC;border-radius:10px;box-shadow:none}
.btn.primary:hover,.hero .btn.primary:hover,.nav .btn.primary:hover{
  background:rgba(45,212,167,.24);border-color:rgba(45,212,167,.75);
  transform:none;box-shadow:none}
.btn.primary::after{display:none}
/* on light body sections the same tint needs dark accent ink */
main .btn.primary{color:#0A6E56}
main .btn.primary:hover{background:rgba(15,162,126,.18);border-color:rgba(15,162,126,.7)}
/* but hero lives inside main and is dark — restore the light-text variant there */
main .hero .btn.primary{background:rgba(45,212,167,.14);border-color:rgba(45,212,167,.5);color:#7FE9CC}
main .hero .btn.primary:hover{background:rgba(45,212,167,.24);border-color:rgba(45,212,167,.75)}
/* ghost secondary aligns with the flat language — hero-scoped: body-placed ghosts keep the token border */
.hero .btn.ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.18)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.45)}

/* ============ SCAN SWEEP ON DEMO CTAS ============ */
.btn.primary::after{display:block;content:'';position:absolute;top:0;bottom:0;left:-90%;width:70%;
  background:linear-gradient(105deg,transparent 8%,rgba(255,255,255,.34) 38%,rgba(150,255,224,.65) 50%,rgba(255,255,255,.34) 62%,transparent 92%);
  transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.btn.primary:hover::after{left:145%}
.btn.primary:not(:hover)::after{transition:none;left:-90%}
@media (prefers-reduced-motion: reduce){.btn.primary::after{display:none}}

/* ============ BRAND SHEEN ON HOVER ============ */
/* The band is a child of <picture>, which is masked by the logo's own alpha —
   so the light glides across the mark and letterforms, not a rectangle. */
.nav .brand picture{position:relative;display:block;
  -webkit-mask:url('/assets/sapienos-lockup-v5.png') left center/contain no-repeat;
          mask:url('/assets/sapienos-lockup-v5.png') left center/contain no-repeat}
.nav .brand picture::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:42%;
  background:linear-gradient(105deg,transparent 4%,rgba(255,255,255,.5) 30%,rgba(190,255,240,.98) 50%,rgba(255,255,255,.5) 70%,transparent 96%);
  transform:skewX(-18deg);transition:left .65s ease;pointer-events:none}
.nav .brand:hover picture::after{left:145%}
.nav .brand:not(:hover) picture::after{transition:none;left:-60%}
/* the mask must follow whichever lockup <picture> swaps in, or the sheen clips
   to the wrong silhouette (the two lockups sit the wordmark at different heights).
   Must come after the base rule above to win on source order. */
@media (max-width:960px){
  .nav .brand picture{-webkit-mask-image:url('/assets/sapienos-nav-v5.png');mask-image:url('/assets/sapienos-nav-v5.png')}
}
@media (prefers-reduced-motion: reduce){.nav .brand picture::after{display:none}}

/* subpage */
.page-hero{padding:96px 0 48px}
.page-hero .kicker{margin-bottom:14px}
.page-hero h1{font-size:clamp(34px,5vw,52px);line-height:1.12;letter-spacing:-.02em;max-width:17ch}
.page-hero .lede{color:var(--text-2);font-size:19px;max-width:56ch;margin-top:18px}
.uc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px;margin-top:36px}
.uc-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px}
.uc-card h3{font-size:17px;margin-bottom:8px}
.uc-card p{color:var(--text-2);font-size:15px}
.uc-card.dev{grid-column:1/-1;border-style:dashed;background:transparent}
.uc-card.dev.inline{grid-column:auto}
.uc-grid.four{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
@media (max-width:1119px){.uc-grid.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:559px){.uc-grid.four{grid-template-columns:1fr}}
.uc-card.uc-link{display:flex;flex-direction:column;color:inherit;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
html.js .uc-card.uc-link.reveal{transition:opacity .5s ease-out,transform .5s ease-out,border-color .25s ease,box-shadow .25s ease}
.uc-card.uc-link:hover,.uc-card.uc-link:focus-visible{border-color:var(--accent);text-decoration:none;transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(15,27,45,.25)}
html.js .uc-card.uc-link.reveal.in:hover,html.js .uc-card.uc-link.reveal.in:focus-visible{transform:translateY(-3px)}
.uc-card.uc-link .uc-more{margin-top:auto;padding-top:14px;font-size:14px;font-weight:500;color:var(--accent);transition:transform .25s ease}
.uc-card.uc-link:hover .uc-more{transform:translateX(3px)}
.uc-shot{max-width:860px;margin:40px auto 0}
/* page-hero image split (use-case pages) */
.page-hero .grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.page-hero .page-shot{margin:0}
@media (max-width:768px){.page-hero .grid2{grid-template-columns:1fr;gap:30px}}
/* use-case link cards (thumb wrapper clips the hover zoom; seam stays fixed).
   The .uc-thumb is optional: the card zeroes its own padding, so .uc-body owns the
   whole inset — keep that pairing intact. 404.html uses the body-only form, no image. */
.uc-card.uc-link{padding:0;overflow:hidden}
.uc-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--border)}
.uc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.uc-card.uc-link .uc-body{display:flex;flex-direction:column;flex:1;padding:20px 24px 24px}
/* editorial callout (home pilot story) — quiet two-panel case-study block:
   duotone image one side, eyebrow + narrative + CTA the other; deliberately
   calmer than the .shot g demo frame above it */
.callout{display:grid;grid-template-columns:45fr 55fr;align-items:stretch;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 1px 2px rgba(15,27,45,.04)}
.callout-media{position:relative;min-height:300px}
.callout-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.callout-body{position:relative;padding:48px 48px 44px;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;border-left:1px solid var(--border)}
.callout-body::before{content:'';position:absolute;left:-1px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--accent),transparent 78%);opacity:.5}
.callout-body h2{font-size:clamp(24px,2.4vw,31px)}
.callout-body p{color:var(--text-2);font-size:15.5px;margin-top:14px;max-width:52ch}
.callout-body .btn{margin-top:26px}
@media (max-width:860px){
  .callout{grid-template-columns:1fr}
  .callout-media{min-height:0;aspect-ratio:16/7}
  .callout-body{padding:28px 24px 32px;border-left:0;border-top:1px solid var(--border)}
  .callout-body::before{left:0;right:0;top:-1px;bottom:auto;width:auto;height:2px;
    background:linear-gradient(90deg,var(--accent),transparent 78%)}
}

/* twin viewer — deliberately a dark console (dark-palette literals, like the
   nav/hero/footer bookends), whatever the page theme around it */
.twin-wrap{position:relative;border:1px solid #243149;border-radius:var(--radius);overflow:hidden;background:#111A2B;aspect-ratio:16/10;margin-top:36px;box-shadow:0 18px 50px -25px rgba(15,27,45,.4)}
#twin-viewer{position:absolute;inset:0}
.twin-wrap canvas{display:block;width:100%;height:100%}
.twin-wrap.poster{background:url('/assets/twin/poster-r4.jpg') center/cover}
/* hide the container, not the canvas — the renderer sets inline display on the canvas */
.twin-wrap.poster #twin-viewer,.twin-wrap.poster #twin-card{display:none}
.twin-wrap.poster::after{content:'3D demo needs WebGL — here\'s a snapshot.';position:absolute;bottom:14px;left:14px;font-size:13px;color:#9AA8BF;background:rgba(11,18,32,.8);padding:6px 10px;border-radius:8px}
/* scene switcher tabs (M7) — JS-injected inside the wrap on the interactive
   path only, top-left away from the top-right card (bottom-strip card on
   small screens). Same button treatment as the module control strip. */
.twin-tabs{position:absolute;top:14px;left:14px;display:flex;flex-wrap:wrap;gap:6px;z-index:2}
.twin-tabs button{font:600 11.5px/1 'Fira Sans',sans-serif;letter-spacing:.02em;color:#9AA8BF;background:rgba(17,26,43,.85);border:1px solid #2E3D58;border-radius:8px;padding:7px 12px;cursor:pointer}
.twin-tabs button:hover{color:#F1F5F9;border-color:#3D5578}
.twin-tabs button:focus-visible{outline:2px solid #2DD4A7;outline-offset:1px}
.twin-tabs button[aria-pressed="true"]{color:#2DD4A7;border-color:rgba(45,212,167,.55);background:rgba(45,212,167,.1)}
.twin-tabs button.loading{opacity:.55;cursor:progress}
.twin-wrap.poster .twin-tabs{display:none}
@media (max-width:480px){.twin-tabs button{padding:6px 9px;font-size:10.5px}}
#twin-card{position:absolute;top:14px;right:14px;width:250px;background:#131D30;border:1px solid #2E3D58;border-radius:12px;padding:16px;font-size:13px;color:#9AA8BF;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
#twin-card b{color:#F1F5F9;font-size:14px}
#twin-card .twin-close{position:absolute;top:6px;right:8px;width:28px;height:28px;background:none;border:0;color:#647189;font:400 20px/1 'Fira Sans',sans-serif;cursor:pointer;border-radius:8px}
#twin-card .twin-close:hover{color:#F1F5F9;background:#1A2538}
#twin-card .twin-meta{margin-top:3px}
#twin-card .twin-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
#twin-card .twin-chips span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#9AA8BF;border:1px solid #2E3D58;border-radius:999px;padding:3px 9px}
#twin-card .twin-reads{display:grid;gap:5px;margin-top:12px;font:500 12px/1.5 'Fira Code',monospace;color:#9AA8BF;border-top:1px solid #243149;padding-top:12px}
/* sensor status demo states (simulated) — amber threshold alarm, blue AI advisory */
#twin-card .twin-flag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.08em;border-radius:999px;padding:3px 9px;margin-top:10px}
#twin-card .twin-flag.alert{color:#F59E0B;border:1px solid rgba(245,158,11,.5);background:rgba(245,158,11,.08)}
#twin-card .twin-flag.watch{color:#38BDF8;border:1px solid rgba(56,189,248,.5);background:rgba(56,189,248,.08)}
#twin-card .twin-reads .twin-alert{color:#F59E0B}
#twin-card .twin-reads .twin-watch{color:#38BDF8}
/* small screens: taller viewer + bottom-strip card, so nothing clips */
@media (max-width:480px){
  .twin-wrap{aspect-ratio:4/3}
  #twin-card{left:14px;right:14px;width:auto;top:auto;bottom:14px;max-height:74%;overflow-y:auto;padding:12px 14px}
  #twin-card .twin-chips{margin-top:8px}
  #twin-card .twin-reads{margin-top:8px;padding-top:8px}
}
.twin-note{color:var(--text-3);font-size:13px;margin-top:10px}

/* module viewer — same dark-console treatment as the twin, in a smaller
   2-col hardware-lead card (viewer panel + copy). Secondary fallback: .flat
   hides the host and shows a one-line static note instead of a poster. */
.module-grid{display:grid;grid-template-columns:minmax(0,560px) 1fr;gap:36px;align-items:center;margin-top:36px}
.module-wrap{position:relative;border:1px solid #243149;border-radius:var(--radius);overflow:hidden;background:#111A2B;aspect-ratio:4/3;box-shadow:0 18px 50px -25px rgba(15,27,45,.4)}
#module-viewer{position:absolute;inset:0}
.module-wrap canvas{display:block;width:100%;height:100%}
.module-wrap .module-fallback{display:none}
.module-wrap.flat{aspect-ratio:auto}
.module-wrap.flat #module-viewer{display:none}
.module-wrap.flat .module-fallback{display:block;position:static;padding:18px;font-size:13px;color:#9AA8BF;margin:0}
.module-copy h3{font-size:clamp(20px,1.9vw,24px)}
.module-copy p{color:var(--text-2);font-size:15.5px;margin-top:12px;max-width:48ch}
.module-copy .tag{display:inline-block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--border);padding:3px 9px;border-radius:999px;margin-top:14px}
/* v2 control strip — JS-injected inside the card, overlaid along the bottom
   (dark-region literals). Real buttons for keyboard access; rows wrap on
   narrow screens. pointer-events pass through the strip's empty space so
   orbit drags aren't stolen. */
.module-ui{position:absolute;left:10px;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px;z-index:2;pointer-events:none}
.module-ui-row{display:flex;flex-wrap:wrap;gap:6px}
.module-ui button,.module-ui a{pointer-events:auto;font:600 11.5px/1 'Fira Sans',sans-serif;letter-spacing:.02em;color:#9AA8BF;background:rgba(17,26,43,.85);border:1px solid #2E3D58;border-radius:8px;padding:7px 10px;cursor:pointer;text-decoration:none}
.module-ui button:hover,.module-ui a:hover{color:#F1F5F9;border-color:#3D5578}
.module-ui button:focus-visible,.module-ui a:focus-visible{outline:2px solid #2DD4A7;outline-offset:1px}
.module-ui button.on{color:#2DD4A7;border-color:rgba(45,212,167,.55);background:rgba(45,212,167,.1)}
.module-ui .module-dl{margin-left:auto;color:#8fe8cf}
.module-ui .module-dl:hover{color:#2DD4A7;border-color:rgba(45,212,167,.55)}
.module-wrap.flat .module-ui{display:none}
@media (max-width:480px){.module-ui button,.module-ui a{padding:6px 8px;font-size:10.5px}}
@media (max-width:860px){.module-grid{grid-template-columns:1fr;gap:22px}}

/* ============ ICON + MOTION PASS ============
   Premium inline SVG icons (Lucide-style: stroke 2, currentColor, 24 viewBox)
   plus hover motion. Hover transforms are gated behind no-preference so a
   reduced-motion visit stays fully static, not just untransitioned. */
/* use-case card icon chips — cards sit on the LIGHT body: soft accent tint */
.uc-tt{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.uc-tt h3{margin-bottom:0}
.uc-chip{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent);
  transition:transform .25s ease,background .25s ease}
.uc-card.uc-link:hover .uc-chip,.uc-card.uc-link:focus-visible .uc-chip{
  background:color-mix(in srgb, var(--accent) 18%, transparent)}
/* family-header kicker icons (use-cases index) */
.sec-kicker svg{flex:none}
/* facts-strip icons — the strip is a dark glass region: white literals, like the tiles */
.fact .fact-ico{display:block;width:20px;height:20px;margin:0 0 10px;color:rgba(255,255,255,.75)}
/* hover motion: thumb zoom + chip lift */
@media (prefers-reduced-motion: no-preference){
  .uc-card.uc-link:hover .uc-thumb img,.uc-card.uc-link:focus-visible .uc-thumb img{transform:scale(1.04)}
  .uc-card.uc-link:hover .uc-chip,.uc-card.uc-link:focus-visible .uc-chip{transform:translateY(-2px)}
}
/* hero parallax figures: transform is scroll-driven inline (site.js) — keep the
   reveal to a fade so its transform transition never fights the parallax */
html.js .reveal[data-parallax]{transition:opacity .5s ease-out}