/* EduAlpha — public marketing stylesheet.
   Shared by landing.html, contact.html, demo.html and transportation.html.
   Colour comes from docs/BRAND.md only (CLAUDE.md rule 7). Gold is an identity accent and
   is never a link, a button or a status. */

:root{
  --blue:#0057B8; --blue-deep:#003E87; --gold:#FFC72C;
  --paper:#FFFFFF; --ink:#333333; --bg:#F5F7FA;

  --blue-hover:#256DCE; --blue-500:#4385E1; --blue-200:#B2D2FF;
  --blue-100:#D7E8FF; --blue-50:#EEF5FF;
  --gold-ink:#836404; --gold-100:#FFEFCA; --gold-50:#FFF6E2;
  --ink-muted:#646B75; --ink-faint:#8C939C;
  --line:#DCE0E5; --line-strong:#CCD1D8; --sunken:#F9FAFC;
  --success:#008743; --success-soft:#DBF9E2; --idle:#69717C; --idle-soft:#EDF0F6;
  /* docs/BRAND.md section 2 — burnt orange, deliberately NOT amber, so a warning never reads
     as the gold identity accent sitting next to it. */
  --warn:#B84A15; --warn-soft:#FFEBE4;

  --display:"Calistoga",Georgia,serif;
  --body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Code",Menlo,monospace;

  --r:12px; --r-sm:8px;
  --gutter:clamp(20px,4vw,40px); --max:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 2px rgba(16,32,56,.04),0 8px 24px -12px rgba(16,32,56,.14);
  --shadow-lg:0 2px 4px rgba(16,32,56,.05),0 24px 48px -20px rgba(16,32,56,.22);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,svg,canvas{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance;}
p{margin:0;}
::selection{background:var(--blue-100);color:var(--blue-deep);}
:focus-visible{outline:3px solid var(--blue-500);outline-offset:3px;border-radius:2px;}

.shell{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);}
.h-d{font-family:var(--display);font-weight:400;line-height:1.06;letter-spacing:-.015em;}
.lede{font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.62;color:var(--ink-muted);}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:.72rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--gold);flex:none;}
.eyebrow--onblue{color:var(--gold);}
.eyebrow--onlight{color:var(--ink-faint);}

.sec{padding-block:clamp(64px,7.5vw,96px);}
.sec-head{max-width:62ch;}
.sec-head h2{font-family:var(--display);font-size:clamp(1.95rem,3.6vw,2.85rem);
  margin-top:18px;line-height:1.1;letter-spacing:-.015em;}
.sec-head p{margin-top:16px;}
/* A second, quieter line under the lede: the lede states the idea, this one carries the
   practical reassurance. Tighter top margin so the two read as one block, not two. */
.sec-head .sec-sub{margin-top:11px;color:var(--ink-muted);font-size:.97rem;line-height:1.6;max-width:58ch;}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:.95rem;font-weight:600;padding:14px 26px;border:1.5px solid transparent;
  border-radius:var(--r-sm);cursor:pointer;
  transition:background 160ms ease,color 160ms ease,border-color 160ms ease,box-shadow 200ms ease,transform 160ms ease;}
.btn svg{width:17px;height:17px;flex:none;}
.btn:active{transform:translateY(1px);}
.btn--pri{background:var(--blue);color:#fff;box-shadow:0 6px 18px -8px rgba(0,87,184,.6);}
.btn--pri:hover{background:var(--blue-hover);box-shadow:0 10px 26px -8px rgba(0,87,184,.55);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-50);}
.btn--white{background:#fff;color:var(--blue-deep);}
.btn--white:hover{background:var(--blue-50);}
.btn--wline{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);}
.btn--wline:hover{background:rgba(255,255,255,.1);border-color:#fff;}

/* ---------------- nav ---------------- */
/* Brand Gold across the very top edge of the page. BRAND.md names "the top edge of a header"
   as a permitted structural use — it carries no information, it just says whose product this
   is, which is the one job gold is allowed to do. */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  border-top:4px solid var(--gold);}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:28px;height:76px;}
.nav__brand{display:flex;align-items:center;gap:10px;}
.nav__brand img.m{width:32px;} .nav__brand img.w{width:114px;}
.nav__links{display:flex;gap:30px;}
.nav__links a{font-size:.9rem;font-weight:500;color:var(--ink-muted);transition:color 150ms ease;}
.nav__links a:hover{color:var(--blue);}
.nav .btn{padding:11px 20px;font-size:.87rem;}
@media(max-width:960px){.nav__links{display:none;}}
@media(max-width:480px){.nav__brand img.w{display:none;}}

/* ---------------- hero ---------------- */
.hero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 100% at 80% 0%,#1263C9 0%,var(--blue-deep) 55%,#00306A 100%);}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 100%,rgba(255,199,44,.10),transparent 70%);}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(28px,4vw,56px);align-items:center;padding-block:clamp(56px,7vw,88px);}
@media(max-width:1000px){.hero__in{grid-template-columns:1fr;}}
.hero h1{font-family:var(--display);font-size:clamp(2.5rem,5vw,4.1rem);margin-top:22px;
  line-height:1.05;letter-spacing:-.02em;}
.hero h1 .gold{color:var(--gold);}
/* The hook names the problem and carries the weight; the lede answers it. Two sizes and two
   colours keep that order legible without another heading level. */
.hero__hook{margin-top:24px;max-width:44ch;color:#fff;font-weight:600;
  font-size:clamp(1.12rem,1.55vw,1.38rem);line-height:1.45;letter-spacing:-.005em;}
.hero__lede{margin-top:14px;max-width:52ch;color:#CFE0F7;font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.62;}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
/* Six of these instead of three, so they are trimmed a step to keep the set to two tidy rows
   rather than sprawling down the hero. */
.hero__pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;max-width:56ch;}
.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  font-size:.79rem;color:#E4EEFB;white-space:nowrap;}
.pill svg{width:14px;height:14px;color:var(--gold);flex:none;}

/* 3D */
.stage{position:relative;border-radius:var(--r);overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);}
.stage__viz{position:relative;}
.stage canvas{width:100%;height:clamp(340px,38vw,470px);}
.stage__fb{display:none;place-items:center;height:clamp(340px,38vw,470px);}

/* Layer labels ring the stack, alternating left and right so each side has twice the vertical
   room. Every label and every leader line is positioned from the plate's real projected
   silhouette — the same matrices the shader uses — so the callouts stay welded to their plate
   as the stack turns and tilts. */
.stage__labels{position:absolute;inset:0;pointer-events:none;}
.lead{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.lead line{stroke:rgba(255,255,255,.4);stroke-width:1;}
.lead line.on-live{stroke:var(--gold);stroke-width:1.5;}
.lead circle{fill:rgba(255,255,255,.55);}
.lead circle.on-live{fill:var(--gold);}
.lbl{position:absolute;transform:translateY(-50%);font-family:var(--mono);font-size:.6rem;
  letter-spacing:.02em;color:#CFE0F7;white-space:nowrap;
  opacity:0;transition:opacity 500ms var(--ease);}
.stage.ready .lbl{opacity:1;}
.lbl--l{text-align:right;}
.lbl--live{color:var(--gold);font-weight:500;}
.lbl--base{color:#8FB6E6;}
@media(max-width:700px){.stage__labels{display:none;}}
.stage__fb img{width:140px;}
.stage.nogl canvas{display:none;} .stage.nogl .stage__fb{display:grid;}
.stage__bar{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:12px 16px;border-top:1px solid rgba(255,255,255,.14);font-family:var(--mono);
  font-size:.68rem;color:#BFD5F0;}
.stage__keys{display:flex;gap:14px;flex-wrap:wrap;}
.stage__k{display:flex;align-items:center;gap:6px;}
.sw{width:10px;height:10px;border-radius:2px;}
.sw--g{background:var(--gold);} .sw--b{background:var(--blue-500);} .sw--d{background:#0B4EA2;}

/* ---------------- audience strip ---------------- */
.aud{border-bottom:1px solid var(--line);background:var(--bg);}
.aud__in{display:flex;align-items:center;justify-content:center;gap:12px 40px;
  flex-wrap:wrap;padding-block:24px;}
.aud__lab{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.aud__item{display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:500;color:var(--ink-muted);}
.aud__item svg{width:17px;height:17px;color:var(--blue);}

/* ---------------- modules ---------------- */
.mods{background:var(--bg);}
.mods__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;}
.mods__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(32px,4vw,48px);}
@media(max-width:980px){.mods__grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.mods__grid{grid-template-columns:1fr;}}

.mcard{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px 24px;box-shadow:var(--shadow);
  transition:transform 240ms var(--ease),box-shadow 240ms var(--ease),border-color 240ms ease;}
.mcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--blue-200);}
.mcard__ico{width:46px;height:46px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--blue-50);border:1px solid var(--blue-100);color:var(--blue);margin-bottom:18px;}
.mcard__ico svg{width:23px;height:23px;}
.mcard h3{font-size:1.09rem;font-weight:700;letter-spacing:-.01em;line-height:1.3;}
.mcard p{margin-top:9px;font-size:.94rem;color:var(--ink-muted);line-height:1.58;}
.mcard__tag{position:absolute;top:22px;right:22px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;background:var(--idle-soft);color:var(--idle);}
.mcard--live{border-color:var(--gold);box-shadow:0 2px 4px rgba(16,32,56,.05),0 20px 44px -22px rgba(0,87,184,.4);}
.mcard--live::before{content:"";position:absolute;inset:-1px -1px auto;height:4px;
  border-radius:var(--r) var(--r) 0 0;background:linear-gradient(90deg,var(--gold),#FFD972);}
.mcard--live .mcard__ico{background:var(--gold-50);border-color:var(--gold-100);color:var(--gold-ink);}
.mcard--live .mcard__tag{background:var(--success-soft);color:var(--success);}

/* Ten cards in a three-column grid strands the tenth on a row of its own. This tile spans two
   columns so the grid closes at twelve units — four clean rows — and it doubles as the
   mid-page CTA the showcase pattern asks for. */
.mcard--cta{grid-column:span 2;background:linear-gradient(120deg,var(--blue-deep),var(--blue));
  border-color:transparent;color:#fff;display:flex;flex-direction:column;justify-content:center;}
.mcard--cta:hover{border-color:transparent;}
.mcard--cta h3{font-family:var(--display);font-size:1.4rem;font-weight:400;letter-spacing:-.01em;}
.mcard--cta p{color:#CFE0F7;max-width:44ch;}
.mcard--cta .btn{align-self:flex-start;margin-top:18px;}
@media(max-width:620px){.mcard--cta{grid-column:span 1;}}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.dot--live{background:var(--success);animation:pulse 2.4s ease-out infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,135,67,.5);}70%{box-shadow:0 0 0 8px rgba(0,135,67,0);}100%{box-shadow:0 0 0 0 rgba(0,135,67,0);}}

/* ---------------- showcase (product mockup) ---------------- */
.show{background:var(--paper);}
.show__in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4.5vw,60px);align-items:center;}
@media(max-width:1000px){.show__in{grid-template-columns:1fr;}}
.show__list{margin-top:26px;display:grid;gap:14px;}
.show__item{display:flex;gap:13px;align-items:flex-start;}
.show__item .tick{width:22px;height:22px;border-radius:50%;background:var(--blue-50);
  color:var(--blue);display:grid;place-items:center;flex:none;margin-top:2px;}
.show__item .tick svg{width:13px;height:13px;}
.show__item b{display:block;font-size:.98rem;font-weight:600;}
.show__item span{font-size:.92rem;color:var(--ink-muted);}

.mock{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-lg);background:var(--paper);}
.mock__bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--sunken);border-bottom:1px solid var(--line);}
.mock__dots{display:flex;gap:6px;} .mock__dots i{width:9px;height:9px;border-radius:50%;background:var(--line-strong);}
.mock__title{font-family:var(--mono);font-size:.7rem;color:var(--ink-muted);margin-left:6px;}
.mock__body{display:grid;grid-template-columns:150px 1fr;min-height:330px;}
@media(max-width:560px){.mock__body{grid-template-columns:1fr;} .mock__side{display:none;}}
.mock__side{border-right:1px solid var(--line);padding:16px 12px;background:var(--sunken);}
.mock__nav{display:grid;gap:3px;}
.mock__nav a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;
  font-size:.79rem;color:var(--ink-muted);}
.mock__nav a svg{width:15px;height:15px;}
.mock__nav a.on{background:var(--blue-50);color:var(--blue);font-weight:600;}
.mock__main{padding:20px;}
.mock__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.kpi{border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;}
.kpi span{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);}
.kpi b{display:block;margin-top:5px;font-family:var(--mono);font-size:1.45rem;font-weight:500;
  color:var(--blue-deep);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.kpi i{font-style:normal;font-size:.7rem;color:var(--success);}
.mock__chart{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;}
.mock__chart h4{font-size:.82rem;font-weight:600;margin-bottom:10px;}
.bars{display:flex;align-items:flex-end;gap:9px;height:96px;}
.bars i{flex:1;background:var(--blue-100);border-radius:3px 3px 0 0;
  transform-origin:bottom;animation:grow 900ms var(--ease) backwards;}
.bars i.hi{background:var(--blue);}
@keyframes grow{from{transform:scaleY(0);}to{transform:scaleY(1);}}
.mock__rows{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;}
.mrow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--line);font-size:.83rem;}
.mrow:last-child{border-bottom:0;}
.mrow em{font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--ink-faint);}
.mrow s{text-decoration:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--success-soft);color:var(--success);}
.mrow s.idle{background:var(--idle-soft);color:var(--idle);}

/* ---------------- features ---------------- */
.feat{background:var(--bg);}
.feat__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(32px,4vw,48px);}
@media(max-width:1020px){.feat__grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.feat__grid{grid-template-columns:1fr;}}
.fcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;
  transition:transform 220ms var(--ease),box-shadow 220ms var(--ease);}
.fcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.fcard__ico{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--gold-50);border:1px solid var(--gold-100);color:var(--gold-ink);margin-bottom:15px;}
.fcard__ico svg{width:20px;height:20px;}
.fcard h3{font-size:1rem;font-weight:700;letter-spacing:-.008em;}
.fcard p{margin-top:7px;font-size:.9rem;color:var(--ink-muted);line-height:1.55;}

/* ---------------- benefits ---------------- */
.ben{background:var(--paper);}
.ben__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(32px,4vw,48px);}
@media(max-width:900px){.ben__grid{grid-template-columns:1fr;}}
.bcard{border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;background:var(--sunken);}
.bcard__n{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--blue);
  padding-bottom:12px;border-bottom:2px solid var(--gold);display:inline-block;margin-bottom:16px;}
.bcard h3{font-family:var(--display);font-size:1.32rem;letter-spacing:-.01em;line-height:1.2;}
.bcard p{margin-top:11px;font-size:.95rem;color:var(--ink-muted);line-height:1.6;}

/* ---------------- cta ---------------- */
.cta{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(110% 130% at 15% 0%,#1263C9,var(--blue-deep) 60%,#002E66 100%);}
.cta__mark{position:absolute;right:-60px;bottom:-90px;width:min(38vw,380px);opacity:.08;
  filter:grayscale(1) brightness(4);pointer-events:none;}
.cta__in{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,4vw,56px);align-items:center;padding-block:clamp(56px,7vw,88px);}
@media(max-width:900px){.cta__in{grid-template-columns:1fr;}}
.cta h2{font-family:var(--display);font-size:clamp(1.95rem,4vw,3rem);line-height:1.08;
  letter-spacing:-.018em;margin-top:20px;}
.cta p{margin-top:18px;color:#CFE0F7;max-width:48ch;}
.contact{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r);padding:26px 24px;}
.contact h3{font-size:1rem;font-weight:700;margin-bottom:16px;}
.contact__row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid rgba(255,255,255,.14);}
.contact__row:first-of-type{border-top:0;}
.contact__row svg{width:18px;height:18px;color:var(--gold);flex:none;}
.contact__row span{font-size:.92rem;color:#E4EEFB;}
.contact .btn{width:100%;margin-top:18px;}

/* ---------------- footer ---------------- */
.foot{background:var(--paper);padding-block:40px;border-top:1px solid var(--line);}
.foot__in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.foot__b{display:flex;align-items:center;gap:10px;}
.foot__b img{width:26px;}
.foot__b span{font-size:.87rem;color:var(--ink-muted);}
.foot__b b{color:var(--ink);font-weight:600;}
.foot__l{display:flex;gap:24px;font-size:.86rem;color:var(--ink-muted);flex-wrap:wrap;}
.foot__l a:hover{color:var(--blue);}
.foot__c{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.71rem;color:var(--ink-faint);}

/* ---------------- pain ---------------- */
.pain{background:var(--paper);}
.pain__in{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,4.5vw,64px);align-items:center;}
@media(max-width:900px){.pain__in{grid-template-columns:1fr;}}
.pain h2{font-family:var(--display);font-size:clamp(1.95rem,3.6vw,2.85rem);margin-top:18px;
  line-height:1.1;letter-spacing:-.015em;}
.pain__fix{margin-top:22px;font-size:1.06rem;font-weight:600;color:var(--blue);}
.pain__list{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.pain__row{display:flex;gap:13px;align-items:flex-start;background:var(--paper);padding:17px 20px;}
.pain__row .x{width:22px;height:22px;border-radius:50%;background:var(--warn-soft);color:var(--warn);
  display:grid;place-items:center;flex:none;margin-top:1px;}
.pain__row .x svg{width:12px;height:12px;}
.pain__row p{font-size:.96rem;color:var(--ink-muted);}
.pain__row b{color:var(--ink);font-weight:600;display:block;font-size:.99rem;}

/* ---------------- dashboard bullets ---------------- */
.show__list .tick svg{width:13px;height:13px;}

/* ---------------- comparison ---------------- */
.cmp{background:var(--paper);}
.cmp__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(30px,4vw,46px);}
@media(max-width:820px){.cmp__grid{grid-template-columns:1fr;}}
.cmp__col{border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;background:var(--sunken);}
.cmp__col--us{border-color:var(--blue-200);background:var(--paper);box-shadow:var(--shadow-lg);position:relative;}
.cmp__col--us::before{content:"";position:absolute;inset:-1px -1px auto;height:4px;
  border-radius:var(--r) var(--r) 0 0;background:linear-gradient(90deg,var(--blue),var(--gold));}
.cmp__ttl{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);padding-bottom:16px;border-bottom:1px solid var(--line);}
.cmp__col--us .cmp__ttl{color:var(--blue);}
.cmp__row{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:.96rem;}
.cmp__row:last-child{border-bottom:0;}
.cmp__row .m{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;}
.cmp__row .m svg{width:11px;height:11px;}
.cmp__row .m--no{background:var(--warn-soft);color:var(--warn);}
.cmp__row .m--yes{background:var(--success-soft);color:var(--success);}
.cmp__col--us .cmp__row{font-weight:500;}

/* ---------------- security ---------------- */
.sek{color:#fff;background:radial-gradient(110% 120% at 20% 0%,#0B4EA2,var(--blue-deep) 55%,#002E66 100%);}
.sek h2{font-family:var(--display);font-size:clamp(1.95rem,3.6vw,2.85rem);margin-top:18px;line-height:1.1;letter-spacing:-.015em;}
.sek__lede{margin-top:16px;color:#CFE0F7;max-width:62ch;font-size:1.04rem;line-height:1.62;}
.sek__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(30px,4vw,46px);}
@media(max-width:980px){.sek__grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.sek__grid{grid-template-columns:1fr;}}
.sek__card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);padding:20px 18px;}
.sek__card .i{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:rgba(255,199,44,.14);color:var(--gold);margin-bottom:13px;}
.sek__card .i svg{width:18px;height:18px;}
.sek__card h3{font-size:.97rem;font-weight:700;}
.sek__card p{margin-top:6px;font-size:.87rem;color:#BFD5F0;line-height:1.5;}

/* ---------------- integrations ---------------- */
.integ{background:var(--paper);}
.integ__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(30px,4vw,46px);}
@media(max-width:860px){.integ__grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.integ__grid{grid-template-columns:1fr;}}
.integ__item{display:flex;align-items:center;gap:13px;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:15px 17px;background:var(--sunken);
  transition:border-color 200ms ease,background 200ms ease;}
.integ__item:hover{border-color:var(--blue-200);background:var(--blue-50);}
.integ__item .i{width:34px;height:34px;border-radius:8px;background:var(--paper);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--blue);flex:none;}
.integ__item .i svg{width:17px;height:17px;}
.integ__item b{font-size:.94rem;font-weight:600;display:block;}
.integ__item span{font-size:.8rem;color:var(--ink-muted);}

/* ---------------- who uses ---------------- */
.who{background:var(--bg);}
.who__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(30px,4vw,46px);}
@media(max-width:980px){.who__grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.who__grid{grid-template-columns:1fr;}}
.who__card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 18px;display:flex;align-items:center;gap:13px;
  transition:transform 200ms var(--ease),box-shadow 200ms var(--ease);}
.who__card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.who__card .i{width:38px;height:38px;border-radius:var(--r-sm);background:var(--blue-50);
  border:1px solid var(--blue-100);color:var(--blue);display:grid;place-items:center;flex:none;}
.who__card .i svg{width:19px;height:19px;}
.who__card b{font-size:.95rem;font-weight:600;}

/* ---------------- testimonials (PLACEHOLDER — see comment in markup) ---------------- */
.tst{background:var(--paper);}
.tst__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(30px,4vw,46px);}
@media(max-width:860px){.tst__grid{grid-template-columns:1fr;}}
.tst__card{border:1.5px dashed var(--line-strong);border-radius:var(--r);padding:26px 24px;
  background:var(--sunken);min-height:190px;display:flex;flex-direction:column;}
.tst__mark{font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--blue-200);}
.tst__card p{margin-top:10px;color:var(--ink-faint);font-size:.95rem;line-height:1.6;flex:1;}
.tst__who{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}

/* ---------------- faq ---------------- */
.faq{background:var(--bg);}
.faq__list{margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--line-strong);max-width:none;}
.faq__item{border-bottom:1px solid var(--line-strong);}
.faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:22px 4px;font-size:1.04rem;font-weight:600;
  transition:color 160ms ease;}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary:hover{color:var(--blue);}
.faq__item summary .pm{width:26px;height:26px;flex:none;border-radius:50%;border:1px solid var(--line-strong);
  display:grid;place-items:center;position:relative;transition:background 200ms ease,border-color 200ms ease;}
.faq__item summary .pm::before,.faq__item summary .pm::after{content:"";position:absolute;
  background:var(--ink-muted);border-radius:1px;transition:transform 260ms var(--ease),background 200ms ease;}
.faq__item summary .pm::before{width:11px;height:1.5px;}
.faq__item summary .pm::after{width:1.5px;height:11px;}
.faq__item[open] summary .pm{background:var(--blue);border-color:var(--blue);}
.faq__item[open] summary .pm::before,.faq__item[open] summary .pm::after{background:#fff;}
.faq__item[open] summary .pm::after{transform:scaleY(0);}
.faq__item .a{padding:0 44px 24px 4px;color:var(--ink-muted);font-size:.98rem;line-height:1.65;max-width:80ch;}

/* ---------------- motion ---------------- */
.js [data-r]{opacity:0;transform:translateY(16px);}
.js [data-r].in{opacity:1;transform:none;transition:opacity 420ms var(--ease),transform 440ms var(--ease);}
.js [data-rs]>*{opacity:0;transform:translateY(14px);}
.js [data-rs].in>*{opacity:1;transform:none;transition:opacity 380ms var(--ease),transform 400ms var(--ease);}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .js [data-r],.js [data-rs]>*{opacity:1!important;transform:none!important;}
}

/* ============================================================================
   SUB-PAGES — contact, demo, module detail. Everything above is shared.
   ============================================================================ */

.mcard__more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:.87rem;font-weight:600;color:var(--gold);}
.mcard__more svg{width:14px;height:14px;transition:transform 200ms var(--ease);}
.mcard--live:hover .mcard__more svg{transform:translateX(3px);}

/* compact hero for inner pages */
.phero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 130% at 78% 0%,#1263C9 0%,var(--blue-deep) 55%,#00306A 100%);}
.phero__in{position:relative;z-index:2;padding-block:clamp(48px,6.5vw,80px);}
.phero h1{font-family:var(--display);font-size:clamp(2.1rem,4.4vw,3.5rem);margin-top:20px;
  line-height:1.06;letter-spacing:-.02em;max-width:20ch;}
.phero h1 .gold{color:var(--gold);}
.phero p{margin-top:20px;color:#CFE0F7;max-width:56ch;font-size:clamp(1.02rem,1.3vw,1.14rem);line-height:1.62;}
.crumb{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:#9FC2EA;}
.crumb a:hover{color:#fff;}
.crumb svg{width:12px;height:12px;}

/* two-column split used by contact + demo */
.split{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,4.5vw,60px);align-items:start;}
@media(max-width:920px){.split{grid-template-columns:1fr;}}

/* forms */
.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3vw,34px);box-shadow:var(--shadow);}
.form h2{font-family:var(--display);font-size:1.5rem;letter-spacing:-.01em;margin-bottom:6px;}
.form__hint{font-size:.92rem;color:var(--ink-muted);margin-bottom:22px;}
.field{margin-bottom:17px;}
.field label{display:block;font-size:.87rem;font-weight:600;margin-bottom:7px;}
.field label .req{color:var(--warn);font-weight:400;}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line-strong);border-radius:var(--r-sm);padding:12px 14px;
  transition:border-color 160ms ease,box-shadow 160ms ease;}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,87,184,.14);}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);}
.field__help{margin-top:6px;font-size:.8rem;color:var(--ink-faint);}
.field__row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.field__row{grid-template-columns:1fr;}}
.form .btn{width:100%;margin-top:6px;}
.form__note{margin-top:15px;font-size:.8rem;color:var(--ink-faint);line-height:1.5;text-align:center;}
.form__ok{margin-top:16px;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--success-soft);color:var(--success);font-size:.9rem;font-weight:500;display:none;}
.form__ok.on{display:block;}

/* contact detail rail */
.rail{display:grid;gap:14px;}
.rail__card{display:flex;gap:14px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:20px 20px;}
.rail__card .i{width:38px;height:38px;border-radius:var(--r-sm);background:var(--blue-50);
  border:1px solid var(--blue-100);color:var(--blue);display:grid;place-items:center;flex:none;}
.rail__card .i svg{width:18px;height:18px;}
.rail__card b{display:block;font-size:.95rem;font-weight:700;}
.rail__card span{font-size:.9rem;color:var(--ink-muted);}
.rail__card a{color:var(--blue);font-weight:500;}
.rail__card a:hover{text-decoration:underline;}

/* what-happens-next list */
.next{display:grid;gap:16px;margin-top:26px;}
.next__row{display:flex;gap:14px;align-items:flex-start;}
.next__n{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.14);
  color:#fff;display:grid;place-items:center;flex:none;font-family:var(--mono);font-size:.72rem;font-weight:500;}
.next__row b{display:block;font-size:.96rem;color:#fff;}
.next__row span{font-size:.9rem;color:#CFE0F7;line-height:1.55;}

/* module detail: feature rows */
.mfeat{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:clamp(30px,4vw,46px);}
@media(max-width:820px){.mfeat{grid-template-columns:1fr;}}
.mfeat__card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px;transition:transform 220ms var(--ease),box-shadow 220ms var(--ease);}
.mfeat__card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.mfeat__card .i{width:42px;height:42px;border-radius:var(--r-sm);background:var(--blue-50);
  border:1px solid var(--blue-100);color:var(--blue);display:grid;place-items:center;margin-bottom:15px;}
.mfeat__card .i svg{width:21px;height:21px;}
.mfeat__card h3{font-size:1.06rem;font-weight:700;letter-spacing:-.008em;}
.mfeat__card p{margin-top:8px;font-size:.94rem;color:var(--ink-muted);line-height:1.58;}

/* audience-for-module chips */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
.chip-l{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:var(--blue-50);border:1px solid var(--blue-100);font-size:.86rem;color:var(--blue-deep);}
.chip-l svg{width:15px;height:15px;color:var(--blue);}