:root{
  --navy:#032e54;--navy-2:#021f3a;--navy-line:#0d3c66;
  --paper:#ffffff;--paper-2:#f3f6fa;--line:#dbe3ec;
  --text:#0b1f33;--muted:#4c6178;--accent:#0a5fa3;
  --amber:#f2b33d;--amber-ink:#8a5a00;--teal:#0f8a68;
  --on-navy:#eef3f8;--on-navy-muted:#9fbad3;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--paper);color:var(--text);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{width:min(1160px,100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:8px 12px;border-radius:6px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.brand img{height:48px;width:auto}
.nav nav{display:flex;gap:26px;align-items:center;font-size:14px}
.nav nav a{text-decoration:none;color:var(--muted)}
.nav nav a:hover{color:var(--navy)}
.btn-sm{background:var(--navy);padding:8px 16px;border-radius:999px;color:#fff!important}

/* type */
.eyebrow{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.08;color:var(--navy)}
h1{font-size:clamp(38px,5.6vw,68px)}
h1 em{font-style:italic;color:var(--accent)}
h2{font-size:clamp(30px,3.8vw,46px);max-width:20ch}
h3{font-size:17px;font-weight:600;line-height:1.35;color:var(--navy)}
.lede{font-size:19px;color:#2c4258;max-width:54ch;margin-top:24px}
.sub{color:var(--muted);max-width:62ch;margin-top:16px;font-size:17px}

/* buttons */
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;font-weight:600;padding:13px 22px;border-radius:999px;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px);background:#06406f}
.btn.ghost{background:transparent;color:var(--navy);border:1px solid var(--line)}
.btn.big{font-size:18px;padding:16px 28px;white-space:nowrap;background:var(--amber);color:var(--navy)}

/* hero */
.hero{padding:84px 0 72px;background:radial-gradient(900px 520px at 88% 0%,rgba(10,95,163,.08),transparent 62%)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.facts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;border-top:1px solid var(--line);padding-top:24px}
.facts strong{display:block;font:500 34px/1 var(--serif);color:var(--navy)}
.facts span{display:block;font-size:13px;color:var(--muted);margin-top:8px;line-height:1.45}
.hero-visual svg{width:100%;height:auto;filter:drop-shadow(0 28px 50px rgba(3,46,84,.28))}

/* principles */
.band{border-block:1px solid var(--line);background:var(--paper-2)}
.principles{display:grid;grid-template-columns:repeat(3,1fr)}
.principles>div{padding:36px 28px}
.principles>div+div{border-left:1px solid var(--line)}
.principles p{color:var(--muted);font-size:15px;margin-top:8px}

/* sections */
.section{padding:104px 0}
.section.alt{background:var(--paper-2);border-block:1px solid var(--line)}

/* patents */
.patents{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:0 1px 2px rgba(3,46,84,.04)}
.pcard.key{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.pcard.key h3{color:#fff}
.pcard.key>p,.pcard.key footer{color:var(--on-navy-muted)}
.pcard.key .pno{color:#fff}
.pcard.key footer{border-top-color:var(--navy-line)}
.pcard header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:18px}
.pno{font:600 13px var(--mono);color:var(--navy)}
.tag{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--teal);border:1px solid rgba(15,138,104,.35);padding:3px 8px;border-radius:999px}
.tag.amber{color:var(--amber);border-color:rgba(242,179,61,.55)}
.pcard h3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.25}
.pcard>p{color:var(--muted);font-size:15px;margin-top:14px}
.ticks{list-style:none;margin:20px 0 24px;display:grid;gap:8px;font-size:14px}
.ticks li{padding-left:22px;position:relative}
.ticks li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:2px;background:var(--accent)}
.pcard.key .ticks li::before{background:var(--amber)}
.pcard footer{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font:12px var(--mono);color:var(--muted)}
.note{margin-top:28px;font-size:13px;color:var(--muted)}

/* flow */
.flow{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);margin-top:52px}
.flow li{padding:24px 22px 8px;border-top:2px solid var(--line);position:relative}
.flow li::before{content:"";position:absolute;top:-7px;left:22px;width:12px;height:12px;border-radius:50%;background:var(--paper-2);border:2px solid var(--navy)}
.flow li:nth-child(3){border-top-color:var(--navy)}
.flow li:nth-child(3)::before{background:var(--amber);border-color:var(--amber)}
.flow .n{font:600 12px var(--mono);color:var(--accent)}
.flow h3{margin-top:8px}
.flow p{font-size:14px;color:var(--muted);margin-top:8px}

/* demo */
.demo-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.roles{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.roles button{font:500 14px var(--sans);color:var(--navy);background:#fff;border:1px solid var(--line);padding:9px 16px;border-radius:999px;cursor:pointer}
.roles button:hover{border-color:var(--navy)}
.roles button[aria-checked="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.explain{margin-top:20px;color:#2c4258;min-height:3.2em}
.stage{background:var(--navy-2);border:1px solid var(--navy-line);border-radius:16px;padding:20px;box-shadow:0 28px 50px rgba(3,46,84,.25)}
.hud{display:flex;justify-content:space-between;font:11px var(--mono);color:var(--on-navy-muted);letter-spacing:.06em;text-transform:uppercase}
.hud #count{color:var(--amber)}
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.p{text-align:center;padding:16px 8px 12px;border:1px solid var(--navy-line);border-radius:12px;transition:border-color .25s,background .25s}
.p span{display:block;font:12px var(--mono);color:var(--on-navy-muted);margin-top:10px}
.face{width:68px;height:68px;margin:auto;border-radius:12px;position:relative;overflow:hidden;
  background:conic-gradient(#0b3760 25%,#06284a 0 50%,#114673 0 75%,#06284a 0) 0 0/17px 17px;transition:all .35s}
.face::after{content:"";position:absolute;inset:0;margin:auto;width:16px;top:6px;
  background:linear-gradient(var(--on-navy-muted),var(--on-navy-muted)) center 70%/12px 8px no-repeat;
  border:2px solid var(--on-navy-muted);border-bottom:0;border-radius:8px 8px 0 0;height:8px;transform:translateY(-4px);opacity:.7}
.p.on{border-color:rgba(242,179,61,.7);background:rgba(242,179,61,.08)}
.p.on .face{background:var(--amber);border-radius:50%}
.p.on .face::after{border:0;width:30px;height:14px;opacity:1;transform:none;top:14px;
  background:radial-gradient(circle,var(--navy) 3px,transparent 3.5px) 0 0/15px 9px repeat-x}
.p.on span{color:#fff}
.fine{margin-top:14px;font-size:12px;color:var(--on-navy-muted)}

/* apps */
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:52px}
.app{border:1px solid var(--line);border-radius:14px;padding:24px;background:#fff}
.app.lead{grid-column:span 2;border-color:#b9cbe0}
.app.lead h3{font-family:var(--serif);font-weight:500;font-size:24px}
.app p{color:var(--muted);font-size:14.5px;margin-top:10px}

/* contact */
.contact{background:var(--navy);color:var(--on-navy)}
.contact h2{color:#fff}
.contact .sub{color:var(--on-navy-muted)}
.contact-in{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}

/* footer */
.foot{border-top:1px solid var(--line);padding:28px 0;font:12.5px var(--mono);color:var(--muted)}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap}
.foot-logo{height:32px;width:auto}

/* responsive */
@media (max-width:980px){
  .hero-grid,.demo-grid{grid-template-columns:1fr}
  .patents{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr 1fr}
  .apps{grid-template-columns:1fr 1fr}
  .nav nav a:not(.btn-sm){display:none}
}
@media (max-width:640px){
  .hero{padding-top:56px}
  .section{padding:72px 0}
  .principles{grid-template-columns:1fr}
  .principles>div+div{border-left:0;border-top:1px solid var(--line)}
  .facts{grid-template-columns:1fr;gap:16px}
  .flow,.apps{grid-template-columns:1fr}
  .app.lead{grid-column:auto}
  .people{grid-template-columns:repeat(2,1fr)}
  .btn.big{font-size:16px;white-space:normal}
  .brand img{height:40px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}