:root{
  --ax-navy:#082850;
  --ax-teal:#30B0C8;
  --ax-ink:#050B14;
  --ax-surface:#0B1626;
  --ax-text:#EAF2FF;
  --ax-muted:rgba(234,242,255,.72);
  --ax-border:rgba(234,242,255,.11);
  --ax-glass:rgba(255,255,255,.06);
  --shadow: 0 24px 70px rgba(0,0,0,.45);
  --radius: 26px;
  --max: 1120px;
  --header-h: 64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ax-text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(48,176,200,.18), transparent 55%),
    radial-gradient(900px 600px at 80% 22%, rgba(8,40,80,.35), transparent 60%),
    linear-gradient(180deg, var(--ax-ink), #02050b);
  min-height:100vh;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto}

/* Layout */
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.section{padding:64px 0}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  height:var(--header-h);
  backdrop-filter: blur(16px);
  background: rgba(0,0,0,.20);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:12px}
.brand .brand-sub{font-size:13px; color:rgba(234,242,255,.60); display:none}
@media (min-width:640px){.brand .brand-sub{display:inline}}
.logo{width:142px; height:auto; display:block}

.nav{display:flex; align-items:center; gap:14px}
.nav a{
  font-size:14px;
  color:rgba(234,242,255,.72);
  padding:10px 10px;
  border-radius:999px;
  transition:background .2s ease, color .2s ease;
}
.nav a:hover{background:rgba(255,255,255,.07); color:rgba(234,242,255,.92)}

.actions{display:flex; align-items:center; gap:10px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:14px;
  padding:11px 16px;
  border-radius:999px;
  border:1px solid var(--ax-border);
  background:rgba(255,255,255,.07);
  color:rgba(234,242,255,.92);
  transition: transform .15s ease, background .2s ease, opacity .2s ease;
  cursor:pointer;
  user-select:none;
}
.btn:hover{background:rgba(255,255,255,.11)}
.btn:active{transform:scale(.98)}
.btn.primary{
  background: var(--ax-teal);
  color:#000;
  border-color: rgba(0,0,0,.05);
}
.btn.primary:hover{opacity:.92}

.icon-btn{
  width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  border:1px solid var(--ax-border);
  background:rgba(255,255,255,.07);
  color:rgba(234,242,255,.85);
}
.icon-btn:hover{background:rgba(255,255,255,.11)}

/* Mobile menu */
.burger{display:inline-flex}
@media (min-width:920px){.burger{display:none}}
.nav-desktop{display:none}
@media (min-width:920px){.nav-desktop{display:flex}}

.mobile-panel{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  display:none;
  z-index:80;
}
.mobile-panel[data-open="true"]{display:block}
.mobile-drawer{
  position:absolute;
  right:0; top:0;
  height:100%;
  width:min(420px, 90vw);
  background: rgba(5,11,20,.92);
  border-left:1px solid rgba(255,255,255,.08);
  padding:18px;
  transform: translateX(8px);
}
.mobile-drawer .close-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 2px 14px}
.mobile-drawer .menu a{display:block; padding:12px 12px; border-radius:14px; color:rgba(234,242,255,.82)}
.mobile-drawer .menu a:hover{background:rgba(255,255,255,.07)}
.mobile-drawer .menu .label{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgba(234,242,255,.55); margin:14px 10px 6px}

/* Hero */
.hero{
  padding:56px 0 32px;
}
.hero-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}
.hero-card:before,
.hero-card:after{
  content:"";
  position:absolute;
  width:520px; height:520px;
  border-radius:999px;
  filter: blur(60px);
  opacity:.55;
  pointer-events:none;
}
.hero-card:before{background: rgba(48,176,200,.40); left:-220px; top:-240px}
.hero-card:after{background: rgba(59,130,246,.25); right:-240px; bottom:-280px}

.hero-inner{position:relative; padding:34px 28px}
@media (min-width:768px){.hero-inner{padding:54px 54px}}

.kicker{font-size:13px; letter-spacing:.06em; color:rgba(234,242,255,.65)}
.h1{margin:12px 0 0; font-size:34px; line-height:1.08; font-weight:680}
.h1 span{display:block; color:rgba(234,242,255,.85)}
@media (min-width:768px){.h1{font-size:54px}}
.lead{max-width:720px; margin:14px 0 0; color:rgba(234,242,255,.70); font-size:16px; line-height:1.55}
@media (min-width:768px){.lead{font-size:18px}}

.hero-actions{margin-top:22px; display:flex; flex-wrap:wrap; gap:12px}

.kpi-grid{
  margin-top:28px;
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media (min-width:640px){.kpi-grid{grid-template-columns: 1fr 1fr}}
@media (min-width:980px){.kpi-grid{grid-template-columns: 1fr 1fr 1fr}}

.card{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding:16px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.card:hover{transform: translateY(-2px); background: rgba(0,0,0,.24); border-color: rgba(255,255,255,.14)}

.kpi-value{font-size:26px; font-weight:700; letter-spacing:-.01em}
.kpi-label{margin-top:4px; font-size:13px; color:rgba(234,242,255,.62)}

/* Chapters */
.section-title{display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:14px}
.h2{margin:0; font-size:22px; font-weight:680}
.h2-note{display:none; font-size:13px; color:rgba(234,242,255,.58)}
@media (min-width:768px){.h2-note{display:inline}}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
@media (min-width:768px){.grid{grid-template-columns: 1fr 1fr}}
@media (min-width:1200px){.grid{grid-template-columns: 1fr 1fr 1fr}}

.chapter-card{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:22px;
  transition: transform .2s ease, background .2s ease;
  position:relative;
  overflow:hidden;
}
.chapter-card:hover{transform: translateY(-3px); background: rgba(255,255,255,.07)}
.chapter-card .title{font-size:18px; font-weight:680}
.chapter-card .desc{margin-top:6px; color:rgba(234,242,255,.65)}
.chapter-card .meta{margin-top:16px; display:flex; align-items:center; justify-content:space-between; color:rgba(234,242,255,.55); font-size:13px}

/* Fancy underline */
.hr{height:1px; background:rgba(255,255,255,.10); margin:16px 0 0}

/* Footer */
.footer{
  padding:32px 0 40px;
  border-top:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.footer-grid{display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:flex-start}
.small{font-size:13px; color:rgba(234,242,255,.60)}

/* Reveal on scroll */
.reveal{opacity:0; transform: translateY(14px); transition: opacity .65s ease, transform .65s ease}
.reveal.is-visible{opacity:1; transform:none}

/* Page header (chapters) */
.page-hero{padding:44px 0 18px}
.page-title{margin:0; font-size:30px; font-weight:720}
.page-sub{margin:10px 0 0; max-width:820px; color:rgba(234,242,255,.70); line-height:1.6}
.breadcrumb{font-size:13px; color:rgba(234,242,255,.60)}
.breadcrumb a{text-decoration:underline; text-decoration-color:rgba(234,242,255,.25)}

/* Progress bar */
.progress{
  position:fixed;
  top:0; left:0;
  height:3px;
  width:0;
  background: var(--ax-teal);
  z-index:90;
}

/* Utility */
.pill{display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color:rgba(234,242,255,.80); font-size:13px}
.muted{color:rgba(234,242,255,.65)}

/* Accessibility */
:focus-visible{outline:2px solid rgba(48,176,200,.85); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none}
  .card:hover,.chapter-card:hover{transform:none}
}

/* Forms & tables (used on Disclosures / Downloads) */
.search{
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(234,242,255,.92);
}
.search::placeholder{color:rgba(234,242,255,.55)}

.table{
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  overflow:hidden;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.table th, .table td{
  text-align:left;
  padding:12px 12px;
  font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
}
.table th{color:rgba(234,242,255,.70); font-weight:650; background: rgba(0,0,0,.18)}
.table tr:last-child td{border-bottom:none}
.table td{color:rgba(234,242,255,.78)}
.table .tag{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size:12px;
  color:rgba(234,242,255,.78)
}