:root{
    --bg-midnight:#0A1428;
    --bg-deep:#060D1C;
    --gold-beam:#F5B841;
    --gold-glow:#FFD479;
    --teal:#3FB6B2;
    --teal-deep:#1E6E6B;
    --text:#EAF0F7;
    --muted:#8FA3BC;
    --surface:#101E38;
    --border:#1E3358;
    --maxw:960px;
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:
      radial-gradient(1100px 600px at 22% -8%, rgba(63,182,178,.08), transparent 60%),
      radial-gradient(900px 500px at 88% 110%, rgba(245,184,65,.07), transparent 60%),
      linear-gradient(180deg, var(--bg-midnight), var(--bg-deep) 70%, #04091a);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:var(--gold-glow)}
  h1,h2,h3{line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em}
  h1{font-size:clamp(2rem,5.4vw,3.6rem);font-weight:800}
  h2{font-size:clamp(1.45rem,3.2vw,2.4rem);font-weight:750}
  h3{font-size:clamp(1.08rem,1.8vw,1.35rem);font-weight:700}
  p{margin:0 0 1rem}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  section{position:relative;padding:clamp(56px,8vw,112px) 0}

  .eyebrow{
    display:inline-block;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold-glow);font-weight:700;margin-bottom:14px;
    padding:5px 13px;border:1px solid rgba(245,184,65,.32);border-radius:999px;
    background:rgba(245,184,65,.06);
  }
  .lead{font-size:clamp(1rem,1.6vw,1.18rem);color:#cdd9ea;max-width:62ch}
  .muted{color:var(--muted)}
  .gold{color:var(--gold-glow)}
  .teal{color:var(--teal)}

  /* progress bar */
  #beam-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:90;
    background:linear-gradient(90deg,var(--teal),var(--gold-beam));
    box-shadow:0 0 12px rgba(63,182,178,.7);transition:width .12s linear}

  /* sticky nav */
  nav.topbar{position:fixed;top:0;left:0;right:0;z-index:80;
    backdrop-filter:blur(10px);background:rgba(6,13,28,.62);
    border-bottom:1px solid rgba(30,51,88,.6);
    transform:translateY(-110%);transition:transform .4s var(--ease)}
  nav.topbar.show{transform:translateY(0)}
  nav.topbar .inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;
    flex-wrap:wrap;gap:6px;padding:9px clamp(12px,4vw,24px);overflow:visible}
  nav.topbar .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;
    color:var(--text);text-decoration:none;margin-right:10px;white-space:nowrap}
  nav.topbar a.link{color:var(--muted);text-decoration:none;font-size:.82rem;white-space:nowrap;
    padding:6px 11px;border-radius:8px;transition:.2s}
  nav.topbar a.link:hover{color:var(--text);background:rgba(63,182,178,.12)}

  /* hero */
  .hero{min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:40px;position:relative}
  .hero .stars{position:absolute;inset:0;z-index:0}
  .hero .harbor{position:absolute;inset:0;z-index:0;width:100%;height:100%}
  .hero .wrap{position:relative;z-index:3}
  .hero h1{max-width:18ch;text-shadow:0 2px 40px rgba(0,0,0,.6)}
  .promise{font-size:clamp(1.02rem,1.8vw,1.38rem);font-weight:600;color:var(--teal);
    max-width:38ch;margin:18px 0 8px;text-shadow:0 0 26px rgba(63,182,178,.3)}
  .hero .lead{margin-top:16px}
  .downarrow{margin-top:38px;display:inline-flex;align-items:center;gap:10px;color:var(--muted);
    font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:.2s}
  .downarrow:hover{color:var(--text)}
  .downarrow svg{animation:bob 1.8s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
  .star{fill:#fff;opacity:0;animation:tw 4s ease-in-out infinite}
  @keyframes tw{0%,100%{opacity:.12}50%{opacity:.82}}

  /* grid / cards */
  .grid{display:grid;gap:20px}
  .two{grid-template-columns:repeat(2,1fr)}
  .three{grid-template-columns:repeat(3,1fr)}
  @media(max-width:780px){.two,.three{grid-template-columns:1fr}}
  .card{
    background:linear-gradient(180deg,rgba(16,30,56,.92),rgba(12,22,44,.92));
    border:1px solid var(--border);border-radius:18px;padding:26px 28px;
    position:relative;overflow:hidden;
    box-shadow:0 16px 48px -24px rgba(0,0,0,.8);
  }
  .card .tag{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
    font-weight:700;display:block;margin-bottom:6px}

  /* conductor diagram */
  .conductor-wrap{display:flex;justify-content:center;margin:38px 0 10px}
  .conductor-svg{width:100%;max-width:720px;height:auto;display:block}

  /* status pill */
  .status-pill{display:inline-flex;align-items:center;gap:8px;
    padding:7px 16px;border-radius:999px;font-size:.82rem;font-weight:700;
    border:1px solid rgba(63,182,178,.4);background:rgba(63,182,178,.08);
    color:var(--teal);letter-spacing:.06em}
  .status-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);
    box-shadow:0 0 8px var(--teal);animation:pulse 2s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}
  .status-pill.amber{border-color:rgba(245,184,65,.4);background:rgba(245,184,65,.08);color:var(--gold-glow)}
  .status-pill.amber .dot{background:var(--gold-beam);box-shadow:0 0 8px var(--gold-beam)}

  /* reveal */
  .reveal{opacity:1;transform:none;transition:opacity .65s var(--ease),transform .65s var(--ease)}
  .product-reveal-ready .reveal{opacity:0;transform:translateY(28px)}
  .reveal.in{opacity:1;transform:none}

  /* soul pillars */
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
  @media(max-width:680px){.pillars{grid-template-columns:1fr}}
  .pillar{padding:20px;border-radius:14px;border:1px solid var(--border);
    background:rgba(16,30,56,.55);text-align:center}
  .pillar .icon{font-size:1.8rem;display:block;margin-bottom:10px;line-height:1}
  .pillar h3{font-size:1rem;margin-bottom:6px}
  .pillar p{font-size:.9rem;color:var(--muted);margin:0}

  /* vs table */
  .vs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  @media(max-width:700px){.vs{grid-template-columns:1fr}}
  .vs .col{border-radius:18px;padding:24px;border:1px solid var(--border)}
  .vs .without{background:linear-gradient(180deg,rgba(143,163,188,.06),rgba(12,22,44,.9));border-color:rgba(143,163,188,.25)}
  .vs .with{background:linear-gradient(180deg,rgba(63,182,178,.08),rgba(12,22,44,.9));border-color:rgba(63,182,178,.34)}
  .vs ul{list-style:none;padding:0;margin:8px 0 0}
  .vs li{padding:9px 0 9px 28px;position:relative;border-top:1px solid rgba(255,255,255,.05);font-size:.95rem}
  .vs li:first-child{border-top:0}
  .vs .without li::before{content:"–";position:absolute;left:0;color:var(--muted)}
  .vs .with li::before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:800}

  /* closing */
  .closing{text-align:center}
  .one-liner{font-size:clamp(1.2rem,2.8vw,1.9rem);font-weight:750;color:var(--teal);
    max-width:30ch;margin:0 auto 22px;text-shadow:0 0 28px rgba(63,182,178,.25)}
  .cta-group{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:14px;
    font-weight:700;font-size:.95rem;text-decoration:none;transition:.18s;border:1px solid transparent}
  .cta-group .btn{min-height:32px}
  .btn-outline{border-color:rgba(63,182,178,.45);color:var(--teal);background:rgba(63,182,178,.07)}
  .btn-outline:hover{background:rgba(63,182,178,.14);color:var(--teal)}
  .btn-ghost{border-color:var(--border);color:var(--muted);background:transparent}
  .btn-ghost:hover{border-color:rgba(245,184,65,.4);color:var(--gold-glow);background:rgba(245,184,65,.06)}

  .wordmark{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:44px;color:var(--muted)}
  .wordmark .name{color:var(--text);font-weight:800;letter-spacing:.04em;font-size:1.05rem}
  footer{padding:32px 0 56px;text-align:center;color:var(--muted);font-size:.84rem}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001s !important;animation-iteration-count:1 !important;
      transition-duration:.001s !important;scroll-behavior:auto}
    .reveal{opacity:1;transform:none}
  }

/* Former style attributes moved into this product-scoped stylesheet for CSP compliance. */
.csp-hermes-inline-1.csp-hermes-inline-1{transform-box:fill-box;transform-origin:0 0}
.csp-hermes-inline-2.csp-hermes-inline-2{background:linear-gradient(180deg,rgba(30,110,107,.06),transparent)}
.csp-hermes-inline-3.csp-hermes-inline-3{margin-top:32px}
.csp-hermes-inline-4.csp-hermes-inline-4{margin-bottom:14px}
.csp-hermes-inline-5.csp-hermes-inline-5{margin-top:28px}
.csp-hermes-inline-6.csp-hermes-inline-6{color:var(--muted)}
.csp-hermes-inline-7.csp-hermes-inline-7{border-color:rgba(79,199,138,.3)}
.csp-hermes-inline-8.csp-hermes-inline-8{color:#4FC78A}
.csp-hermes-inline-9.csp-hermes-inline-9{margin:0}
.csp-hermes-inline-10.csp-hermes-inline-10{border-color:rgba(79,199,138,.28)}
.csp-hermes-inline-11.csp-hermes-inline-11{border-color:rgba(245,184,65,.3)}
.csp-hermes-inline-12.csp-hermes-inline-12{color:var(--gold-glow)}
.csp-hermes-inline-13.csp-hermes-inline-13{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.csp-hermes-inline-14.csp-hermes-inline-14{margin-top:22px;color:var(--muted);font-size:.95rem}
.csp-hermes-inline-15.csp-hermes-inline-15{margin:0 auto;text-align:center;max-width:58ch}
figure.conductor-wrap.diagram-scroll .conductor-svg{display:block;width:720px;max-width:none;min-width:720px;height:auto;margin:0 auto}


/* Shared resilient navigation and diagram behavior for product explainers. */
.skip-link{position:fixed;top:10px;left:10px;z-index:120;padding:10px 14px;
  border-radius:8px;background:#FFD479;color:#06101f;font-weight:800;
  transform:translateY(-160%);transition:transform .15s}
.skip-link:focus{transform:translateY(0)}
nav.topbar:focus-within,nav.tabs:focus-within{transform:translateY(0)}
figure.diagram-scroll{display:block;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-inline:contain;scrollbar-color:var(--teal) rgba(16,30,56,.9)}
figure.diagram-scroll:focus-visible{outline:3px solid var(--gold-glow);outline-offset:4px}
figure.diagram-scroll figcaption{max-width:72ch;margin:16px auto 0;color:#cdd9ea;font-size:.92rem;line-height:1.55}
.product-reveal-ready .layer{opacity:0;transform:translateX(-14px)}
.product-reveal-ready .layer.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .product-reveal-ready .reveal,.product-reveal-ready .layer{opacity:1;transform:none}
}