/* ============ THEME TOKENS ============ */
:root{
  --blue:#3EA9F7; --purple:#6F4AF6; --title:#2E1065;
  --ink:#272727; --muted:#595959;
  --bg:#FFFFFF; --surface:#F1F5FA; --line:#E1E6EF; --card:#FFFFFF;
  --onhero:#FFFFFF; --onhero-mute:#D6DEEA;
  --pill-bg:#EEF3FA; --pill-line:#DCE5F2;
  --maxw:1180px;
}
/* Dark palette. Brand blue is FILL-ONLY on light; on a dark ground it is legible,
   so it becomes the accent that carries the brand. Purple lightens to hold 4.5:1. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --title:#C9B8FF; --ink:#E8EBF0; --muted:#A6AFBD;
    --bg:#121319; --surface:#191B23; --line:#2A2D38; --card:#1B1E27;
    --purple:#9B82FF; --pill-bg:#20242F; --pill-line:#2E3340;
  }
}
:root[data-theme="dark"]{
  --title:#C9B8FF; --ink:#E8EBF0; --muted:#A6AFBD;
  --bg:#121319; --surface:#191B23; --line:#2A2D38; --card:#1B1E27;
  --purple:#9B82FF; --pill-bg:#20242F; --pill-line:#2E3340;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);
     font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
     min-height:100vh;display:flex;flex-direction:column}
/* a short page (Contact) otherwise leaves the footer stranded mid-screen with
   dead space under it; this pushes it to the bottom without stretching content */
body > footer{margin-top:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4.5vw,44px)}
img{max-width:100%;display:block}
a{color:inherit}

/* ============ NAV ============ */
nav{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:20}
.navrow{display:flex;align-items:center;gap:20px;padding-top:16px;padding-bottom:16px}
.brand{display:flex;flex-direction:column;flex:0 0 auto;text-decoration:none}
.brand img{height:clamp(22px,5.6vw,32px);width:auto;max-width:60vw}
.brand .tl{font-size:clamp(8.5px,2.2vw,10.5px);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:4px}
:root[data-theme="dark"] .brand img,
:root:not([data-theme="light"]) .brand img{filter:brightness(1.35)}
.navlinks{display:flex;gap:clamp(14px,1.8vw,26px);font-size:14.5px;margin-left:auto}
.navlinks a{text-decoration:none;color:var(--ink);white-space:nowrap}
.navtools{display:flex;align-items:center;gap:10px;margin-left:auto}
.navcta{background:var(--purple);color:#fff;padding:9px 15px;border-radius:6px;
        font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.tgl{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:6px;
     width:38px;height:34px;font-size:15px;cursor:pointer;line-height:1}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:6px;
        width:40px;height:36px;color:var(--ink);font-size:17px;cursor:pointer;line-height:1}
.burger:focus-visible,.tgl:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
/* Mobile menu. A panel rather than a slide-over: it is one tap to open, one to choose,
   and it cannot trap focus off-screen the way a full-screen overlay can. */
.menu{display:none;border-top:1px solid var(--line);background:var(--bg)}
.menu.open{display:block}
.menu a{display:block;padding:15px 0;font-size:17px;text-decoration:none;color:var(--ink);
        border-bottom:1px solid var(--line)}
.menu a:last-of-type{border-bottom:none}
.menu a.on{color:var(--title);font-weight:700}
.menu a.on:before{content:"";display:inline-block;width:3px;height:15px;background:var(--purple);
        margin-right:10px;vertical-align:-2px;border-radius:2px}
.menu .mcta{margin:14px 0 18px;background:var(--purple);color:#fff;text-align:center;
        border-radius:7px;padding:14px;font-weight:700;border-bottom:none}

/* ============ HERO ============ */
.hero{position:relative;isolation:isolate;background:#0B0E14;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(8,10,16,.94) 0%,rgba(8,10,16,.86) 42%,rgba(8,10,16,.42) 72%,rgba(8,10,16,.28) 100%)}
.heroinner{padding-top:clamp(56px,9vw,110px);padding-bottom:clamp(48px,7vw,84px)}
.kicker{font-size:clamp(10.5px,2.6vw,12.5px);letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:20px;font-weight:700}
h1{font-size:clamp(27px,6.4vw,60px);line-height:1.06;letter-spacing:-.025em;color:var(--onhero);
   max-width:16ch;margin-bottom:22px;font-weight:700}
.lede{font-size:clamp(15.5px,2vw,20px);color:var(--onhero);max-width:54ch;margin-bottom:14px}
.lede2{font-size:clamp(14.5px,1.8vw,18px);color:var(--onhero-mute);max-width:56ch;margin-bottom:30px;line-height:1.6}
.lede2 b{color:var(--onhero);font-weight:700}
.ctarow{display:flex;gap:12px;flex-wrap:wrap}
.btn{background:var(--purple);color:#fff;padding:14px 24px;border-radius:7px;font-weight:700;
     text-decoration:none;font-size:15.5px;display:inline-block}
.btn.ghost{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.pills span{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);color:var(--onhero);
            border-radius:999px;padding:6px 13px;font-size:13.5px}
.pills b{font-weight:700}

/* ============ PRINCIPLE STRIP ============ */
.principle{background:var(--surface);border-bottom:1px solid var(--line);padding:clamp(30px,4vw,42px) 0}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,30px)}
.pgrid div .w{font-size:clamp(17px,2.1vw,21px);color:var(--title);font-weight:700;letter-spacing:-.01em}
.pgrid div p{font-size:14px;color:var(--muted);margin-top:5px;line-height:1.45}
.plabel{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}

/* ============ SECTIONS ============ */
section.pad{padding:clamp(48px,7vw,84px) 0}
h2{font-size:clamp(21px,4.4vw,34px);color:var(--title);letter-spacing:-.02em;margin-bottom:10px;line-height:1.15}
.sublede{font-size:clamp(15.5px,1.8vw,17.5px);color:var(--muted);max-width:64ch;margin-bottom:34px}

/* chain */
.rail{position:relative}
.rail:before{content:"";position:absolute;left:9%;right:9%;top:15px;height:2px;background:var(--line)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative}
.step{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:0 16px 18px}
.step .n{width:32px;height:32px;border-radius:50%;background:var(--bg);border:2px solid var(--title);
         color:var(--title);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;
         margin:-16px auto 14px;position:relative;z-index:2}
.step.anchor .n{background:var(--title);color:var(--bg);border-color:var(--title)}
.badge{display:inline-block;background:var(--pill-bg);color:var(--muted);font-size:10.5px;font-weight:700;
       letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:4px;margin-bottom:8px}
.badge.on{background:var(--purple);color:#fff}
.step h3{font-size:16.5px;color:var(--title);margin-bottom:4px}
.step .q{font-size:13px;color:var(--muted);font-style:italic;margin-bottom:9px;min-height:34px}
.step p{font-size:13.5px;line-height:1.45;margin-bottom:10px}
.step .dur{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:9px}
.note{font-size:13.5px;color:var(--muted);margin-top:18px}

/* latest */
.latest{background:var(--surface);border-top:1px solid var(--line)}
.two{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,3vw,34px)}
.feature{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.feature .ph{aspect-ratio:16/7;background:#0B0E14;position:relative;overflow:hidden}
.feature .ph img{width:100%;height:100%;object-fit:cover;opacity:.85}
.feature .body{padding:22px 24px 24px}
.eyeb{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);font-weight:700;margin-bottom:6px}
.pubrow{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:11px}
.pubrow .when{font-size:12.5px;color:var(--muted)}
.pubrow .sep{font-size:12.5px;color:var(--line)}
.pubrow .kind{font-size:12.5px;color:var(--muted)}
.feature h3{font-size:clamp(19px,2.4vw,25px);color:var(--title);line-height:1.2;margin-bottom:10px;letter-spacing:-.015em}
.feature p{font-size:15px;color:var(--ink);margin-bottom:16px}
.rd{font-size:14.5px;font-weight:700;color:var(--purple);text-decoration:none}
.brief{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 24px 24px;display:flex;flex-direction:column}
.brief .eyeb{margin-bottom:6px}
.brief h3{font-size:19px;color:var(--title);line-height:1.25;margin-bottom:12px}
.brief ul{list-style:none;margin-bottom:16px}
.brief li{font-size:14px;padding:9px 0 9px 16px;border-bottom:1px solid var(--line);position:relative;line-height:1.45}
.brief li:before{content:"";position:absolute;left:0;top:16px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.brief li:last-child{border-bottom:none}
.streak{margin-top:auto;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:13px}

footer{border-top:1px solid var(--line);padding:30px 0;font-size:13.5px;color:var(--muted)}
footer .fr{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .rail:before{display:none}
  .pgrid{grid-template-columns:repeat(2,1fr);gap:22px}
}
/* eight nav items: the row needs ~1100px, so it collapses to the menu at 1200px and below */
@media (max-width:1200px){
  .navlinks{display:none}
  .burger{display:block}
  .navtools{margin-left:auto}
}
@media (max-width:860px){
  .two{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr;gap:16px}
  .hero:after{background:linear-gradient(180deg,rgba(8,10,16,.58) 0%,rgba(8,10,16,.80) 26%,rgba(8,10,16,.93) 58%,rgba(8,10,16,.96) 100%)}
  h1{max-width:100%}
  .btn{width:100%;text-align:center}
  .navcta{display:none}
  .lede,.lede2,.sublede{max-width:100%}
}
/* Narrow handsets and folding-phone cover screens. Nothing may overflow at 320px. */
@media (max-width:400px){
  .navrow{gap:10px}
  .tgl,.burger{width:34px;height:32px}
  .pills{gap:6px}
  .pills span{font-size:12.5px;padding:5px 10px}
  .feature .body,.brief{padding-left:16px;padding-right:16px}
  .step{padding-left:14px;padding-right:14px}
  .footer .fr,footer .fr{gap:10px}
}
@media (max-width:340px){
  .brand .tl{display:none}
  .pills span{width:100%}
}

/* ---- shared page furniture, used by every page except the landing ---- */
.pagehero{position:relative;isolation:isolate;background:#0B0E14;overflow:hidden}
.pagehero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pagehero:after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(8,10,16,.94) 0%,rgba(8,10,16,.88) 46%,rgba(8,10,16,.50) 76%,rgba(8,10,16,.34) 100%)}
.pagehero .inner{padding-top:clamp(46px,7vw,84px);padding-bottom:clamp(40px,6vw,66px)}
.crumb{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:16px}
.pagehero h1{font-size:clamp(30px,5.4vw,52px);color:#fff;max-width:18ch;margin-bottom:18px;line-height:1.08}
.pagehero .lede{color:#fff;max-width:56ch}
.qualifier{border-left:4px solid var(--blue);background:rgba(255,255,255,.08);
  padding:18px 22px;margin:22px 0 26px;max-width:72ch;font-size:15.5px;line-height:1.6;color:#fff}
.qualifier b{color:#fff}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px)}
.card{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:22px 22px 24px}
.card h3{font-size:17.5px;color:var(--title);margin-bottom:8px}
.card p{font-size:14.5px;line-height:1.5}
.deliv{list-style:none}
.deliv li{padding:13px 0 13px 30px;border-bottom:1px solid var(--line);position:relative;font-size:15.5px;line-height:1.5}
.deliv li:last-child{border-bottom:none}
.deliv li:before{content:"";position:absolute;left:1px;top:18px;width:8px;height:8px;border-radius:2px;background:var(--purple)}
.deliv li b{color:var(--title)}
.stat{display:flex;gap:clamp(20px,4vw,40px);flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.stat div b{display:block;font-size:clamp(26px,4vw,34px);color:var(--title);line-height:1.1}
.stat div span{font-size:13px;color:var(--muted)}
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rung{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:0 18px 20px;overflow:hidden}
.rung .bar{height:6px;margin:0 -18px 16px}
.rung .r{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.rung h3{font-size:16.5px;color:var(--title);margin-bottom:7px}
.rung p{font-size:13.5px;line-height:1.45}
.phase{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ph{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:20px 20px 22px;border-top:4px solid var(--purple)}
.ph .wk{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--purple);font-weight:700;margin-bottom:7px}
.ph h3{font-size:18px;color:var(--title);margin-bottom:8px}
.ph p{font-size:14px;line-height:1.5;margin-bottom:12px}
.ph .gate{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.callout{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--purple);
  border-radius:0 11px 11px 0;padding:22px 24px;margin-top:26px}
.callout p{font-size:16px;line-height:1.55}
.callout b{color:var(--title)}
.cta-band{background:var(--surface);border-top:1px solid var(--line)}
.cta-band .inner{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding-top:clamp(34px,5vw,52px);padding-bottom:clamp(34px,5vw,52px)}
.cta-band h2{margin-bottom:6px}
.cta-band p{color:var(--muted);font-size:15.5px;max-width:52ch}
@media (max-width:1080px){.ladder{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.grid2{grid-template-columns:1fr}.phase{grid-template-columns:1fr}}
@media (max-width:560px){.ladder,.grid3{grid-template-columns:1fr}.pagehero h1{max-width:100%}}

/* ============ PRODUCTS (landing) ============ */
.products{border-top:1px solid var(--line)}
.prod{display:flex;flex-direction:column}
.prod .eyeb{margin-bottom:8px}
.prod h3{font-size:clamp(19px,2.2vw,23px);line-height:1.2}
.prod p{margin-bottom:18px;font-size:15px}
.prodcta{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:auto}
.prodcta .btn{padding:11px 18px;font-size:14.5px}
@media (max-width:860px){.products .grid2{grid-template-columns:1fr}}