:root{
  --au-primary:#005BBB;
  --au-secondary:#FFC107;
  --au-bg:#F7F9FC;
  --au-surface:#FFFFFF;
  --au-text:#0F172A;
}
@media (prefers-color-scheme: dark){
  :root{
    --au-bg:#0b1220;
    --au-surface:#0f172a;
    --au-text:#e5e7eb;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--au-text); background:var(--au-bg); line-height:1.5}
img{max-width:100%; height:auto}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.container{width:min(1100px, 92%); margin-inline:auto}

/* Header */
.site-header{position:sticky; top:0; background:rgba(255,255,255,.7); backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid rgba(15,23,42,.06); z-index:10}
@media (prefers-color-scheme: dark){ .site-header{ background:rgba(15,23,42,.5); border-color:rgba(255,255,255,.1)}}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.brand{display:inline-flex; align-items:center; gap:.5rem; font-weight:600; text-decoration:none}
.site-nav{display:flex; gap:1rem; align-items:center}
.nav-toggle{display:none}
.site-nav a, .ghost{padding:.35rem .6rem; border-radius:8px; text-decoration:none}
.ghost{background:transparent; border:1px solid rgba(15,23,42,.15)}
@media (prefers-color-scheme: dark){ .ghost{ border-color:rgba(255,255,255,.2)}}

@media (max-width: 800px){
  .nav-toggle{display:block; background:none; border:none; font-size:1.25rem}
  .site-nav{position:absolute; right:0; top:56px; flex-direction:column; align-items:flex-start; background:var(--au-surface); padding:1rem; border:1px solid rgba(15,23,42,.06); border-radius:12px; margin-right:4%;}
  .site-nav[data-collapsed="true"]{display:none}
}

/* Hero */
.hero{color:#fff; background: radial-gradient(1200px 400px at 10% 0%, rgba(0,91,187,.25), transparent), radial-gradient(900px 500px at 90% -10%, rgba(0,91,187,.18), transparent), linear-gradient(180deg, #001a33 0%, #0b2a4d 60%, #0f1b2d 100%);}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; padding:5.5rem 0 3rem}
@media (max-width: 900px){ .hero-inner{grid-template-columns:1fr}}
.pill{display:inline-block; font-size:.9rem; background:rgba(255,255,255,.15); padding:.35rem .6rem; border-radius:999px}
.hero h1{font-size:clamp(1.8rem, 2.5vw + 1rem, 3rem); margin:.5rem 0 0}
.hero p{opacity:.9; max-width:60ch}
.search{display:flex; gap:.5rem; margin:1rem 0}
.search input{flex:1; padding:.85rem .9rem; border-radius:12px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); color:#fff}
.search button{padding:.85rem 1rem; border-radius:12px; border:none; background:#FFC107; color:#0b1220; font-weight:600}
.actions{display:flex; gap:.6rem; flex-wrap:wrap}
.btn{padding:.7rem 1rem; border-radius:12px; border:1px solid transparent; text-decoration:none; display:inline-block}
.btn.primary{background:var(--au-primary); color:#fff}
.btn.ghost{background:transparent; border-color:rgba(255,255,255,.35); color:#fff}

/* Cards / sections */
.section{padding:3rem 0}
.section.alt{background:#f0f4fb} /* light alt */
@media (prefers-color-scheme: dark){ .section.alt{background:#0f172a}}
.section-title{position:relative; margin:0 0 .75rem}
.section-title::after{content:""; position:absolute; left:0; bottom:-8px; width:64px; height:3px; background:var(--au-primary); border-radius:2px}
.muted{color:#475569}
@media (prefers-color-scheme: dark){ .muted{color:#98a2b3}}
.grid.cards{display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem}
@media (max-width:1100px){ .grid.cards{grid-template-columns:repeat(3, 1fr)}}
@media (max-width:800px){ .grid.cards{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:520px){ .grid.cards{grid-template-columns:1fr}}
.card{display:block; background:var(--au-surface); padding:1rem; border-radius:16px; border:1px solid rgba(15,23,42,.08); text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-4px); box-shadow:0 1rem 2rem rgba(2,6,23,.08)}
.card-top{display:flex; justify-content:flex-end}
.badge{display:inline-block; padding:.25rem .5rem; border-radius:999px; font-size:.8rem}
.badge.primary{background:#e6f0ff; color:#003b8e}
.badge.success{background:#e6f8ec; color:#126b2e}
.badge.info{background:#e8f5ff; color:#0b66a7}
.badge.warning{background:#fff7e6; color:#8a5a00}

/* Two column */
.grid.two{display:grid; grid-template-columns:1fr 1fr; gap:2rem}
@media (max-width: 800px){ .grid.two{grid-template-columns:1fr}}

/* Glass card */
.glass{align-self:start; padding:1rem; border-radius:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25)}

/* Footer */
.site-footer{background:#0b1220; color:#e5e7eb; padding:2rem 0}
.footer-inner{display:flex; gap:2rem; justify-content:space-between; flex-wrap:wrap}
.footer-inner a{color:#e5e7eb; text-decoration:none}
.footer-nav{display:flex; gap:1rem; flex-wrap:wrap}
.footer-meta{display:flex; justify-content:space-between; gap:1rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.2)}