:root {
  color-scheme: light dark;
  --ink: #10253d;
  --muted: #607086;
  --soft: #eef5f5;
  --paper: rgba(255,255,255,.92);
  --paper-solid: #ffffff;
  --line: rgba(20,61,93,.12);
  --navy: #071a31;
  --teal: #236f7e;
  --teal-2: #3d8d98;
  --violet: #6256a8;
  --gold: #f1b66f;
  --shadow: 0 28px 80px rgba(7,26,49,.13);
  --radius: 30px;
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(255,196,110,.28), transparent 32rem),
    radial-gradient(circle at 88% 10%, rgba(139,120,230,.17), transparent 30rem),
    linear-gradient(180deg,#f5f9fb 0%,#eef5f5 55%,#f9f7f2 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.shell { min-height: 100vh; padding: 24px 18px 42px; }
.frame { width: min(var(--max),100%); margin: 0 auto; }

.topbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding: 4px 4px 22px;
}
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.brand img { width:48px; height:48px; object-fit:contain; filter:drop-shadow(0 8px 18px rgba(5,24,46,.14)); }
.wordmark { font-size:24px; font-weight:760; letter-spacing:-.55px; }
.nav { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.nav a {
  text-decoration:none; font-size:14px; font-weight:680; color:var(--muted);
  padding:10px 13px; border-radius:999px;
}
.nav a:hover { background:rgba(255,255,255,.55); color:var(--ink); }

.card {
  background:var(--paper); border:1px solid rgba(255,255,255,.82);
  border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; backdrop-filter:blur(18px);
}

.home-hero {
  position:relative;
  min-height:min(720px,78vh);
  display:grid; align-items:end; overflow:hidden;
  color:white;
  background-image:
    linear-gradient(110deg,rgba(5,24,48,.84) 0%,rgba(18,74,92,.62) 50%,rgba(87,64,137,.48) 100%),
    url("/assets/hero-light.webp");
  background-size:cover;
  background-position:center;
}
.home-hero::before {
  content:""; position:absolute; width:470px; height:470px;
  border-radius:50%; border:1px solid rgba(255,255,255,.20);
  left:61%; top:-255px;
  box-shadow:0 0 0 54px rgba(255,255,255,.045),0 0 0 108px rgba(255,255,255,.025);
}
.home-hero::after {
  content:""; position:absolute; inset:auto 0 0; height:54%;
  background:linear-gradient(180deg,transparent,rgba(2,14,30,.46));
}
.hero-inner {
  position:relative; z-index:1; padding:clamp(38px,7vw,82px);
  max-width:880px;
}
.eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  margin-bottom:20px; font-size:12px; font-weight:760;
  text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.82);
}
.eyebrow::before {
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 6px rgba(241,182,111,.14);
}
.home-hero h1 {
  margin:0; max-width:810px;
  font-size:clamp(48px,8vw,86px); line-height:.96; letter-spacing:-3.9px;
}
.home-hero p {
  margin:24px 0 0; max-width:720px;
  font-size:clamp(18px,2.6vw,23px); line-height:1.56; color:rgba(255,255,255,.84);
}
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 20px; border-radius:999px;
  text-decoration:none; font-size:15px; font-weight:740;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:white; color:#10253d; box-shadow:0 12px 30px rgba(0,0,0,.15); }
.btn-ghost { color:white; border:1px solid rgba(255,255,255,.30); background:rgba(255,255,255,.08); }

.section { padding:clamp(48px,7vw,82px); }
.section + .section { border-top:1px solid var(--line); }
.section-head { max-width:760px; margin-bottom:28px; }
.kicker {
  margin:0 0 10px; color:var(--teal); font-size:12px; font-weight:760;
  text-transform:uppercase; letter-spacing:.14em;
}
.section h2 { margin:0; font-size:clamp(32px,5vw,52px); line-height:1.04; letter-spacing:-2px; }
.section-head p, .lead {
  color:#44586e; font-size:18px; line-height:1.72; margin:18px 0 0;
}

.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.tile {
  border:1px solid var(--line); background:rgba(249,252,252,.76);
  border-radius:22px; padding:24px;
}
.tile .num {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,rgba(35,111,126,.13),rgba(98,86,168,.12));
  color:var(--teal); font-size:13px; font-weight:800; margin-bottom:18px;
}
.tile h3 { margin:0 0 8px; font-size:19px; letter-spacing:-.3px; }
.tile p { margin:0; color:#5c6c7d; font-size:15px; line-height:1.66; }

.quote {
  padding:clamp(36px,6vw,62px); border-radius:26px;
  background:linear-gradient(135deg,rgba(223,242,242,.9),rgba(248,250,249,.92));
  border:1px solid rgba(35,111,126,.14);
}
.quote p { margin:0; font-size:clamp(25px,4vw,38px); line-height:1.28; letter-spacing:-1px; }
.quote small { display:block; margin-top:18px; color:#56717d; font-weight:680; }

.beta-panel {
  display:grid; grid-template-columns:1.35fr .65fr; gap:24px; align-items:center;
  padding:clamp(32px,6vw,58px); border-radius:26px;
  color:white; background:linear-gradient(135deg,#0f5060,#383777 68%,#4b3d7c);
}
.beta-panel h2 { margin:0; font-size:clamp(34px,5vw,50px); letter-spacing:-1.8px; }
.beta-panel p { margin:14px 0 0; max-width:680px; color:rgba(255,255,255,.80); font-size:17px; line-height:1.66; }
.beta-panel .actions { justify-content:flex-end; margin:0; }
.beta-panel .btn { width:100%; }

.detail-hero {
  position:relative; min-height:320px; display:grid; align-items:end;
  padding:clamp(34px,6vw,64px); color:white; overflow:hidden;
  background-image:
    linear-gradient(125deg,rgba(5,24,48,.78),rgba(18,74,92,.62),rgba(87,64,137,.58)),
    url("/assets/hero-light.webp");
  background-size:cover; background-position:center;
}
.detail-hero::after { content:""; position:absolute; inset:auto 0 0; height:42%; background:linear-gradient(180deg,transparent,rgba(2,14,30,.30)); }
.detail-hero-inner { position:relative; z-index:1; max-width:760px; }
.detail-hero h1 { margin:0; font-size:clamp(40px,7vw,66px); line-height:.99; letter-spacing:-2.7px; }
.detail-hero p { margin:18px 0 0; font-size:clamp(17px,2.4vw,21px); line-height:1.55; color:rgba(255,255,255,.82); }

.content { padding:clamp(30px,6vw,62px); }
.intro { margin:0 0 34px; font-size:18px; line-height:1.72; color:#344a61; }
.legal-section { padding:28px 0; border-top:1px solid var(--line); }
.legal-section:first-of-type { border-top:0; padding-top:4px; }
.legal-section h2 { margin:0 0 12px; font-size:23px; letter-spacing:-.45px; }
.legal-section p, .legal-section li { font-size:16px; line-height:1.72; color:#44586e; }
.legal-section p { margin:0 0 12px; }
.legal-section p:last-child { margin-bottom:0; }
.legal-section ul { margin:12px 0 0; padding-left:20px; }
.legal-section li + li { margin-top:8px; }
.note {
  margin:22px 0 0; padding:18px 20px; border:1px solid rgba(35,111,126,.16);
  border-radius:18px; background:linear-gradient(135deg,rgba(223,242,242,.84),rgba(248,250,249,.88));
  color:#294b58; font-size:15px; line-height:1.62;
}
.mini-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:18px; }
.mini { border:1px solid var(--line); border-radius:20px; padding:22px; background:rgba(249,252,252,.72); }
.mini h3 { margin:0 0 8px; font-size:17px; }
.mini p { margin:0; font-size:14px; line-height:1.62; color:#5c6c7d; }
.meta { display:flex; flex-wrap:wrap; gap:10px 18px; padding-top:22px; color:#718096; font-size:13px; }

.footer {
  text-align:center; padding:28px 12px 0;
  color:#6c7c8d; font-size:13px; line-height:1.8;
}
.footer-links { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 18px; margin-bottom:5px; }
.footer a { font-weight:650; text-decoration:none; }

@media (max-width: 840px) {
  .grid-3 { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .beta-panel { grid-template-columns:1fr; }
  .beta-panel .actions { justify-content:flex-start; margin-top:4px; }
  .beta-panel .btn { width:auto; }
}
@media (max-width: 680px) {
  .shell { padding:14px 10px 30px; }
  .topbar { padding:4px 6px 16px; }
  .brand img { width:44px; height:44px; }
  .wordmark { font-size:21px; }
  .nav a:not(.nav-keep) { display:none; }
  .card { border-radius:24px; }
  .home-hero { min-height:650px; }
  .home-hero h1 { letter-spacing:-2.4px; }
  .hero-inner { padding:40px 26px; }
  .section, .content { padding:38px 25px; }
  .grid-4, .mini-grid { grid-template-columns:1fr; }
  .actions .btn { width:100%; }
  .beta-panel .btn { width:100%; }
  .detail-hero { min-height:300px; padding:34px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .btn { transition:none; }
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink:#edf5ff; --muted:#aab9ca; --paper:rgba(8,25,46,.94);
    --paper-solid:#091b31; --line:rgba(211,229,244,.12);
    --shadow:0 32px 90px rgba(0,0,0,.30);
  }
  body {
    background:
      radial-gradient(circle at 15% 0%,rgba(74,113,162,.21),transparent 32rem),
      radial-gradient(circle at 90% 16%,rgba(139,120,230,.16),transparent 28rem),
      linear-gradient(180deg,#061427 0%,#091b31 55%,#071829 100%);
  }
  .nav a:hover { background:rgba(255,255,255,.05); }
  .home-hero, .detail-hero {
    background-image:
      linear-gradient(110deg,rgba(4,14,30,.78),rgba(13,45,66,.60),rgba(62,42,103,.54)),
      url("/assets/hero-dark.webp");
  }
  .section-head p, .lead, .intro, .legal-section p, .legal-section li { color:#c4d1df; }
  .tile, .mini { background:rgba(255,255,255,.035); }
  .tile p, .mini p { color:#b1c0d0; }
  .quote, .note { background:linear-gradient(135deg,rgba(29,92,103,.34),rgba(21,40,59,.72)); }
  .quote small, .note { color:#d2eaeb; }
  .meta, .footer { color:#98aabc; }
}