:root{
    --paper:#F6F8F9;
    --ink:#101B2C;
    --muted:#55637A;
    --signal:#0E7FA8;
    --signal-strong:#0B688A;
    --amber:#C77414;
    --panel:#0B1524;
    --panel-ink:#E7EEF6;
    --panel-muted:#93A5BC;
    --panel-line:rgba(150,180,215,.18);
    --line:#D8DFE7;
    --card:#FFFFFF;
    --chip:#EDF1F5;
    --btn-ink:#FFFFFF;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --paper:#0A111C;
      --ink:#E6EDF5;
      --muted:#8DA0B8;
      --signal:#4FC3E8;
      --signal-strong:#7AD4F0;
      --amber:#F5A83C;
      --line:#1E2C40;
      --card:#101A2A;
      --chip:#14202F;
      --btn-ink:#06202C;
    }
  }
  :root[data-theme="light"]{
    --paper:#F6F8F9; --ink:#101B2C; --muted:#55637A; --signal:#0E7FA8;
    --signal-strong:#0B688A; --amber:#C77414; --line:#D8DFE7; --card:#FFFFFF; --chip:#EDF1F5;
    --btn-ink:#FFFFFF;
  }
  :root[data-theme="dark"]{
    --paper:#0A111C; --ink:#E6EDF5; --muted:#8DA0B8; --signal:#4FC3E8;
    --signal-strong:#7AD4F0; --amber:#F5A83C; --line:#1E2C40; --card:#101A2A; --chip:#14202F;
    --btn-ink:#06202C;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background: radial-gradient(circle at 50% 0%, #172033, #0a111c); color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .serif{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace}

  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
  a{color:var(--signal)}
  h1,h2,h3{text-wrap:balance;margin:0}
  p{margin:0}

  .eyebrow{
    font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--signal);font-weight:600;
  }

  /* scroll progress */
  #progress{
    position:fixed;top:0;left:0;height:3px;width:0;
    background:linear-gradient(90deg,#0E7FA8,#4FC3E8);z-index:60;
    transition:width .1s linear;
  }

  /* ---------- nav ---------- */
  nav{
    position:sticky;top:0;z-index:50;
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-in{display:flex;align-items:center;gap:28px;padding:14px 24px;max-width:1120px;margin:0 auto}
  .brand{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:700;font-size:17px;letter-spacing:.06em;color:var(--ink);text-decoration:none}
  .brand b{color:var(--signal)}
  .nav-links{display:flex;gap:22px;margin-left:auto;align-items:center}
  .nav-links a{color:var(--muted);text-decoration:none;font-size:14.5px}
  .nav-links a:hover{color:var(--ink)}
  .btn{
    display:inline-block;text-decoration:none;font-weight:600;font-size:15px;
    padding:11px 20px;border-radius:6px;border:1px solid transparent;
    transition:transform .12s ease, opacity .12s ease;
  }
  .btn:hover{transform:translateY(-1px)}
  .btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
  .btn-primary{background:var(--signal);color:var(--btn-ink)}
  .nav-links a.btn-primary{color:var(--btn-ink)}
  .btn-ghost{border-color:var(--line);color:var(--ink)}
  .nav-cta{padding:8px 16px;font-size:14px}
  @media(max-width:760px){.nav-links a:not(.btn){display:none}}

  /* ---------- hero (always dark: the ops screen) ---------- */
  .hero{
    background:var(--panel);color:var(--panel-ink);
    position:relative;overflow:hidden;
    border-bottom:1px solid var(--panel-line);
  }
  .hero .wrap{position:relative;z-index:2;padding-top:88px;padding-bottom:0}
  #topo{position:absolute;inset:0;z-index:1;opacity:.9}
  .hero-grid{position:relative}
  .hero h1{
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    font-weight:600;font-size:clamp(38px,5.6vw,64px);line-height:1.08;
    max-width:15ch;margin:18px 0 22px;
  }
  .hero h1 em{font-style:italic;color:var(--signal-strong,#7AD4F0)}
  .hero .eyebrow{color:#7AD4F0}
  .hero .sub{max-width:56ch;font-size:18.5px;color:var(--panel-muted);margin-bottom:34px}
  .hero .sub strong{color:var(--panel-ink);font-weight:600}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
  .hero-paths{margin-bottom:56px}
  .hero-paths .hp-label{
    display:block;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--panel-muted);margin-bottom:10px;
  }
  .hero-paths a{
    display:inline-block;margin:0 10px 10px 0;padding:8px 14px;border-radius:999px;
    border:1px solid var(--panel-line);color:var(--panel-ink);text-decoration:none;
    font-size:13.5px;transition:border-color .15s ease, background .15s ease;
  }
  .hero-paths a:hover{border-color:#4FC3E8;background:rgba(79,195,232,.08)}
  .hero-paths a b{color:#7AD4F0;font-weight:650}
  .hero .btn-primary{background:#4FC3E8;color:#06202C}
  .hero .btn-ghost{border-color:var(--panel-line);color:var(--panel-ink)}
  .statbar{
    display:grid;grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--panel-line);
    background:color-mix(in srgb, #0B1524 55%, transparent);
    position:relative;z-index:2;
  }
  .statbar>div{padding:22px 24px;border-right:1px solid var(--panel-line)}
  .statbar>div:last-child{border-right:none}
  .statbar .n{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:26px;font-weight:700;color:#7AD4F0;font-variant-numeric:tabular-nums}
  .statbar .l{font-size:13px;color:var(--panel-muted);letter-spacing:.02em}
  @media(max-width:760px){.statbar{grid-template-columns:repeat(2,1fr)}.statbar>div:nth-child(2){border-right:none}}

  /* ---------- sections ---------- */
  section{padding:88px 0}
  .sec-head{max-width:62ch;margin-bottom:48px}
  .next-hook{
    display:inline-block;margin-top:36px;
    font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13.5px;
    color:var(--signal);text-decoration:none;font-weight:600;
  }
  .next-hook::after{content:"  ↓";font-weight:400}
  .next-hook:hover{text-decoration:underline}
  .on-dark .next-hook{color:#7AD4F0}
  .sec-head h2{
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    font-weight:600;font-size:clamp(28px,3.6vw,40px);line-height:1.15;margin:14px 0 16px;
  }
  .sec-head p:not(.eyebrow){color:var(--muted);font-size:17.5px}

  /* problem band */
  .problem{border-top:1px solid var(--line)}
  .prob-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
  .prob-grid>div{background:var(--card);padding:26px 24px}
  .prob-grid .n{
    font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:30px;font-weight:700;
    color:var(--amber);font-variant-numeric:tabular-nums;display:block;margin-bottom:8px;
  }
  .prob-grid p{font-size:14.5px;color:var(--muted)}
  .prob-note{margin-top:14px;font-size:13px;color:var(--muted)}
  @media(max-width:860px){.prob-grid{grid-template-columns:repeat(2,1fr)}}

  /* layer stack */
  .layers{border-top:1px solid var(--line)}
  .stack{border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .layer{
    display:grid;grid-template-columns:120px 220px 1fr;gap:20px;align-items:baseline;
    padding:18px 22px;background:var(--card);border-bottom:1px solid var(--line);
    transition:background .15s ease;
  }
  .layer:last-child{border-bottom:none}
  .layer:hover{background:var(--chip)}
  .layer .tag{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13px;font-weight:700;color:var(--signal);letter-spacing:.08em}
  .layer .name{font-weight:600;font-size:16px}
  .layer .what{color:var(--muted);font-size:15px}
  .layer.l7 .tag,.layer.l5 .tag{color:var(--amber)}
  @media(max-width:760px){.layer{grid-template-columns:80px 1fr}.layer .what{grid-column:1/-1}}

  /* capabilities */
  .caps{border-top:1px solid var(--line)}
  .cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .cap{
    background:var(--card);border:1px solid var(--line);border-radius:8px;
    padding:26px 24px;display:flex;flex-direction:column;gap:10px;
  }
  .cap .k{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);font-weight:600}
  .cap h3{font-size:18px;font-weight:650;line-height:1.3}
  .cap p{font-size:14.5px;color:var(--muted)}
  @media(max-width:900px){.cap-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.cap-grid{grid-template-columns:1fr}}

  /* product shots */
  .shots{border-top:1px solid var(--line)}
  .shot{
    border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card);
    box-shadow:0 12px 40px -18px rgba(11,21,36,.35);
  }
  .shot img{width:100%;display:block}
  .shot-bar{
    display:flex;align-items:center;gap:6px;padding:10px 14px;
    border-bottom:1px solid var(--line);background:var(--chip);
  }
  .shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:inline-block}
  .shot-bar .t{margin-left:8px;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;color:var(--muted)}
  .shot-cap{padding:14px 16px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
  .shot-cap strong{color:var(--ink)}
  .shots-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
  @media(max-width:860px){.shots-row{grid-template-columns:1fr}}

  /* use-case replays */
  .cases{border-top:1px solid var(--line)}
  .cases-grid{display:grid;grid-template-columns:340px 1fr;gap:28px;align-items:start}
  .case-list{display:flex;flex-direction:column;gap:8px}
  .case-btn{
    text-align:left;background:var(--card);border:1px solid var(--line);border-radius:8px;
    padding:14px 16px;cursor:pointer;font:inherit;color:var(--ink);
    transition:border-color .15s ease, background .15s ease;
  }
  .case-btn:hover{border-color:var(--signal)}
  .case-btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
  .case-btn .cb-title{display:block;font-weight:650;font-size:15.5px;margin-bottom:3px}
  .case-btn .cb-pain{display:block;font-size:13px;color:var(--muted)}
  .case-btn[aria-selected="true"]{border-color:var(--signal);background:var(--chip)}
  .case-btn[aria-selected="true"] .cb-title{color:var(--signal)}

  .case-stage{
    background:var(--panel);border:1px solid var(--panel-line);border-radius:10px;
    color:var(--panel-ink);overflow:hidden;min-height:430px;display:flex;flex-direction:column;
  }
  .stage-head{
    display:flex;align-items:center;gap:10px;
    padding:12px 18px;border-bottom:1px solid var(--panel-line);
    font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;color:var(--panel-muted);
  }
  .stage-head .rec{width:8px;height:8px;border-radius:50%;background:#F5A83C;animation:blink 1.6s infinite}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
  .stage-steps{list-style:none;margin:0;padding:26px 26px 8px;flex:1}
  .stage-steps li{
    position:relative;padding:0 0 26px 34px;opacity:.28;transition:opacity .45s ease;
  }
  .stage-steps li::before{
    content:"";position:absolute;left:7px;top:20px;bottom:0;width:2px;
    background:var(--panel-line);
  }
  .stage-steps li:last-child::before{display:none}
  .stage-steps li::after{
    content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:50%;
    border:2px solid var(--panel-muted);background:var(--panel);box-sizing:border-box;
    transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
  }
  .stage-steps li.on{opacity:1}
  .stage-steps li.on::after{border-color:#4FC3E8;background:#4FC3E8;box-shadow:0 0 10px rgba(79,195,232,.6)}
  .stage-steps li.done{opacity:.66}
  .stage-steps li.done::after{border-color:#4FC3E8;background:transparent;box-shadow:none}
  .stage-steps li.alert.on::after{border-color:#F5A83C;background:#F5A83C;box-shadow:0 0 10px rgba(245,168,60,.6)}
  .stage-steps .st-label{display:block;font-weight:600;font-size:15.5px;line-height:1.35}
  .stage-steps .st-detail{display:block;font-size:13.5px;color:var(--panel-muted);margin-top:3px}
  .stage-steps .st-tag{
    font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:10.5px;letter-spacing:.1em;
    color:#7AD4F0;display:block;margin-bottom:2px;
  }
  .stage-steps li.alert .st-tag{color:#F5A83C}
  .stage-outcome{
    margin:0 26px 24px;padding:16px 18px;border-radius:8px;
    border:1px solid rgba(63,207,155,.35);background:rgba(63,207,155,.08);
    opacity:0;transform:translateY(6px);transition:opacity .5s ease, transform .5s ease;
  }
  .stage-outcome.show{opacity:1;transform:none}
  .stage-outcome .oc-tag{
    font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:10.5px;letter-spacing:.12em;
    color:#3FCF9B;display:block;margin-bottom:4px;
  }
  .stage-outcome .oc-text{font-weight:650;font-size:15.5px;color:var(--panel-ink)}
  .cases-note{margin-top:18px;font-size:13px;color:var(--muted)}
  .midcta{
    margin-top:28px;border:1px solid var(--line);border-radius:10px;background:var(--card);
    padding:22px 26px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  }
  .midcta p{font-size:15.5px;color:var(--muted);max-width:60ch}
  .midcta p strong{color:var(--ink)}
  @media(max-width:900px){
    .cases-grid{grid-template-columns:1fr}
    .case-list{flex-direction:row;overflow-x:auto;padding-bottom:6px}
    .case-btn{min-width:230px}
  }

  /* pipeline */
  .how{border-top:1px solid var(--line)}
  .pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
  .step{position:relative;padding-top:18px}
  .step::before{
    counter-increment:step;content:"0" counter(step);
    font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13px;font-weight:700;color:var(--amber);
  }
  .step::after{
    content:"";position:absolute;top:9px;left:34px;right:0;height:1px;background:var(--line);
  }
  .step:last-child::after{display:none}
  .step h3{font-size:17px;font-weight:650;margin:10px 0 8px}
  .step p{font-size:14.5px;color:var(--muted)}
  @media(max-width:860px){.pipe{grid-template-columns:repeat(2,1fr)}.step::after{display:none}}

  /* agent crew (dark panel) */
  .agents{background:var(--panel);color:var(--panel-ink);border-top:1px solid var(--panel-line);border-bottom:1px solid var(--panel-line)}
  .agents .sec-head .eyebrow{color:#7AD4F0}
  .agents .sec-head p:not(.eyebrow){color:var(--panel-muted)}
  .agents-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
  .agent-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .agent{
    border:1px solid var(--panel-line);border-radius:8px;padding:18px;
    background:rgba(150,180,215,.04);
  }
  .agent .a-tag{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;letter-spacing:.12em;color:#7AD4F0;font-weight:700;display:block;margin-bottom:6px}
  .agent h3{font-size:15.5px;font-weight:650;margin-bottom:6px;color:var(--panel-ink)}
  .agent p{font-size:13.5px;color:var(--panel-muted)}
  .feed{
    border:1px solid var(--panel-line);border-radius:10px;overflow:hidden;
    background:#081020;display:flex;flex-direction:column;min-height:330px;
  }
  .feed-head{
    display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--panel-line);
    font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px;color:var(--panel-muted);
  }
  .feed-head .live{width:8px;height:8px;border-radius:50%;background:#3FCF9B;animation:blink 1.6s infinite}
  #feedLines{list-style:none;margin:0;padding:14px 16px;flex:1;display:flex;flex-direction:column;gap:9px;justify-content:flex-end}
  #feedLines li{
    font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12.5px;line-height:1.5;
    color:var(--panel-muted);opacity:0;transform:translateY(4px);
    transition:opacity .4s ease, transform .4s ease;
    overflow-wrap:anywhere;
  }
  #feedLines li.in{opacity:1;transform:none}
  #feedLines .ts{color:#55637A}
  #feedLines .ag{color:#7AD4F0;font-weight:700}
  #feedLines .ag.warn{color:#F5A83C}
  #feedLines .ok{color:#3FCF9B}
  .agents-note{margin-top:18px;font-size:13.5px;color:var(--panel-muted)}
  .agents-note strong{color:var(--panel-ink)}
  @media(max-width:900px){.agents-grid{grid-template-columns:1fr}}
  @media(max-width:560px){.agent-cards{grid-template-columns:1fr}}

  /* integrations */
  .integ{border-top:1px solid var(--line)}
  .integ-group{margin-bottom:26px}
  .integ-group .gl{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
  .chips{display:flex;flex-wrap:wrap;gap:10px}
  .chip{
    font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13.5px;
    background:var(--chip);border:1px solid var(--line);border-radius:5px;
    padding:7px 13px;color:var(--ink);
  }

  /* migrations */
  .migrations{border-top:1px solid var(--line)}
  .migrations .cap-grid{grid-template-columns:repeat(4,1fr)}
  @media(max-width:1000px){.migrations .cap-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.migrations .cap-grid{grid-template-columns:1fr}}

  /* security operations (light) */
  .secops{border-top:1px solid var(--line)}
  .secops .cap .k{color:var(--amber)}
  .secops .sec-head .eyebrow{color:var(--amber)}

  /* security (dark panel) */
  .secure{background:var(--panel);color:var(--panel-ink);border-top:1px solid var(--panel-line);border-bottom:1px solid var(--panel-line)}
  .secure .sec-head .eyebrow{color:#F5A83C}
  .secure .sec-head p:not(.eyebrow){color:var(--panel-muted)}
  .sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--panel-line);border:1px solid var(--panel-line)}
  .sec-grid>div{background:var(--panel);padding:24px 22px}
  .sec-grid h3{font-size:16px;font-weight:650;margin-bottom:8px;color:var(--panel-ink)}
  .sec-grid p{font-size:14px;color:var(--panel-muted)}
  .sec-grid .mono-tag{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;color:#7AD4F0;letter-spacing:.1em;display:block;margin-bottom:10px}
  @media(max-width:860px){.sec-grid{grid-template-columns:1fr}}

  /* trust / straight answers */
  .trust{border-top:1px solid var(--line)}
  .qa-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
  .qa{
    background:var(--card);border:1px solid var(--line);border-radius:8px;padding:24px;
  }
  .qa h3{font-size:16.5px;font-weight:650;margin-bottom:8px}
  .qa h3::before{content:"Q. ";font-family:ui-monospace,"SF Mono",Menlo,monospace;color:var(--signal);font-weight:700}
  .qa p{font-size:14.5px;color:var(--muted)}
  .qa p strong{color:var(--ink)}
  @media(max-width:760px){.qa-grid{grid-template-columns:1fr}}
  .deploy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:22px}
  .deploy-grid>div{background:var(--card);padding:22px}
  .deploy-grid .d-tag{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;letter-spacing:.12em;color:var(--signal);display:block;margin-bottom:8px;text-transform:uppercase;font-weight:700}
  .deploy-grid h3{font-size:16px;font-weight:650;margin-bottom:6px}
  .deploy-grid p{font-size:14px;color:var(--muted)}
  @media(max-width:760px){.deploy-grid{grid-template-columns:1fr}}
  .trust-cta{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .trust-cta .hint{font-size:13.5px;color:var(--muted)}

  /* final CTA */
  .cta-final{text-align:left}
  .cta-card{
    border:1px solid var(--line);border-radius:10px;background:var(--card);
    padding:52px 48px;display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between;
  }
  .cta-card h2{
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    font-weight:600;font-size:clamp(26px,3.4vw,36px);line-height:1.15;max-width:22ch;margin-bottom:12px;
  }
  .cta-card p:not(.eyebrow){color:var(--muted);max-width:52ch;font-size:16.5px}
  .cta-actions{display:flex;gap:14px;flex-wrap:wrap}

  /* ---------- subpages (privacy, terms, support, contact) ---------- */
  .page{padding:72px 0 104px;min-height:60vh}
  .page .wrap{max-width:780px}
  .page .back{
    font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13px;
    color:var(--signal);text-decoration:none;display:inline-block;margin-bottom:28px;
  }
  .page h1{
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    font-weight:600;font-size:clamp(30px,4vw,40px);line-height:1.12;margin-bottom:10px;
  }
  .page .updated{
    font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12.5px;
    color:var(--muted);display:block;margin-bottom:36px;
  }
  .page h2{font-size:19px;font-weight:650;margin:36px 0 10px}
  .page p{margin:0 0 14px;max-width:70ch}
  .page ul{margin:0 0 14px;padding-left:22px}
  .page li{margin-bottom:6px}
  .page .note{
    border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:6px;
    background:var(--card);padding:14px 16px;font-size:14.5px;color:var(--muted);margin:26px 0;
  }
  .sla{width:100%;border-collapse:collapse;margin:6px 0 14px;font-size:15px}
  .sla th,.sla td{text-align:left;padding:10px 14px;border:1px solid var(--line)}
  .sla th{background:var(--chip);font-weight:650;font-size:13.5px}
  .sla td:first-child{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13.5px;white-space:nowrap}

  /* ---------- enterprise footer ---------- */
  footer{border-top:1px solid var(--line);padding:56px 0 0;color:var(--muted);font-size:14px}
  .foot-grid{
    display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:36px;
    padding-bottom:44px;
  }
  .foot-brand p{margin-top:12px;max-width:30ch;font-size:14px;line-height:1.55}
  .fg-title{
    font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:14px;
  }
  .foot-grid ul{list-style:none;margin:0;padding:0}
  .foot-grid li{margin-bottom:9px}
  footer a{color:var(--muted);text-decoration:none}
  footer a:hover{color:var(--signal)}
  .foot-bottom{
    border-top:1px solid var(--line);padding:20px 0 34px;
    display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
    font-size:13px;
  }
  .foot-bottom .legal-links{display:flex;gap:18px}
  @media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .btn{transition:none}
  }


/* --- Premium 3D Theme Additions --- */
#webgl-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: auto; /* let users drag the globe */
}

/* Ensure the hero content sits above the 3D canvas */
.hero {
  position: relative;
  overflow: hidden;
  background: transparent !important; /* override any default background */
}
.hero::before {
  display: none !important; /* hide any background noise/pattern if present */
}
.hero-content {
  position: relative;
  z-index: 10;
  background: rgba(10, 17, 28, 0.4);
  backdrop-filter: blur(8px);
  padding: 40px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.05);
}

/* Make nav glassmorphic */
nav {
  background: rgba(10, 17, 28, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Enhance buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--signal), #2563eb) !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
  transition: all 0.3s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
}

/* Card hover effects */
.problem-card, .cap-card, .case-card, .feature {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px);
}
.problem-card:hover, .cap-card:hover, .case-card:hover, .feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================
   PREMIUM AESTHETICS OVERRIDE
   ========================================== */

/* 1. Base Typography & Background */
body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    background: radial-gradient(circle at top right, #1e293b, #0B1120) !important;
    background-attachment: fixed !important;
    color: #e2e8f0 !important;
    letter-spacing: 0.01em;
}

h1, h2, h3, h4, .serif {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700;
    letter-spacing: -0.03em;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
    line-height: 1.1 !important;
    background: linear-gradient(to right, #ffffff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    color: #f8fafc !important;
}

/* 2. Glassmorphism Navigation */
nav {
    background: rgba(11, 17, 32, 0.4) !important;
    backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.brand {
    font-weight: 800 !important;
    font-size: 24px !important;
    letter-spacing: -0.05em !important;
}

/* 3. Premium Buttons */
.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5) !important;
}

.btn-ghost {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease !important;
}

.btn-ghost:hover {
    background: rgba(255,255,255,0.1) !important;
    transform: translateY(-2px);
}

/* 4. Glass Cards (Capabilities, Problem Cards, Steps) */
.cap, .problem-card, .case-card, .step {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(12px) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cap:hover, .problem-card:hover, .case-card:hover, .step:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 5. 3D WebGL Container */
#webgl-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: auto;
}

.hero {
    position: relative;
    overflow: hidden;
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.hero::before { display: none !important; }

.hero-content {
    position: relative;
    z-index: 10;
    background: radial-gradient(circle at center, rgba(11,17,32,0.3) 0%, rgba(11,17,32,0.8) 100%);
    backdrop-filter: blur(4px);
    border-radius: 24px;
    padding: 60px 40px;
    margin-top: 60px;
    margin-bottom: 60px;
    border: 1px solid rgba(255,255,255,0.05);
}

/* Update text highlights */
em, strong, b {
    color: #38bdf8 !important;
    font-weight: 600;
}
.k { color: #818cf8 !important; }


/* =========================================================================
   SKETCHBOARD 3D TOPOLOGY, SUBPAGE BANNERS & HIGH-CONTRAST CARDS
   ========================================================================= */

/* Active Nav Link Styling */
.nav-item.active {
    color: #38bdf8 !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #38bdf8;
    padding-bottom: 4px;
}

/* 3D Visio Network Sketchboard Container */
#network-sketchboard {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: 
        radial-gradient(circle at 50% 30%, rgba(56, 189, 248, 0.08), transparent 70%),
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    background-position: 0 0, -1px -1px, -1px -1px;
}

/* Visio Sketchboard Hover Tooltip */
.sketchboard-tooltip {
    position: absolute;
    display: none;
    z-index: 100;
    background: rgba(11, 17, 32, 0.92);
    border: 1px solid rgba(56, 189, 248, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(56, 189, 248, 0.2);
    border-radius: 10px;
    padding: 12px 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #f8fafc;
    pointer-events: none;
    backdrop-filter: blur(8px);
}

.sketchboard-tooltip .tt-header {
    font-weight: 700;
    color: #38bdf8;
    font-size: 13px;
    margin-bottom: 2px;
}

.sketchboard-tooltip .tt-type {
    color: #818cf8;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.sketchboard-tooltip .tt-info {
    color: #cbd5e1;
    line-height: 1.4;
}

/* Subpage Persona Banners */
.subpage-banner {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.8) 0%, rgba(11, 17, 32, 1) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 60px 0 40px 0;
    text-align: center;
}

.subpage-banner h2 {
    font-size: clamp(2rem, 3.5vw, 2.8rem) !important;
    background: linear-gradient(to right, #ffffff, #38bdf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 8px;
    margin-bottom: 16px;
}

.subpage-banner p {
    max-width: 750px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: #cbd5e1;
    line-height: 1.6;
}

/* Enhanced High-Contrast Cards */
.problem-card, .cap, .case-card, .step, .layer, .feature {
    color: #cbd5e1 !important;
}

.problem-card p, .cap p, .case-card p, .step p, .layer .what {
    color: #cbd5e1 !important;
}

.problem-card h3, .cap h3, .case-card h3, .step h3, .layer .name {
    color: #f8fafc !important;
}

.hero-3d-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}