:root{
  --bg:#0f1115; --surface:#171a21; --surface-2:#1f2430; --text:#e6e6ea; --muted:#aeb4c0; --accent:#d0b24b; --accent-2:#8aa1ff; --ok:#99d98c;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.6 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--text); background:radial-gradient(1200px 600px at 80% -10%,#22283a00,transparent 60%), var(--bg);
}
.container{max-width:1100px;margin:auto;padding:clamp(0.75rem,2vw,1.25rem)}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:var(--accent);color:#000;padding:.5rem .75rem;border-radius:.5rem;z-index:1000}

.site-header{position:sticky;top:0;background:linear-gradient(180deg,var(--surface),#0000);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid #2a3040;z-index:50}
.header-inner{display:flex;align-items:center;gap:1rem}
.brand{display:flex;align-items:center;gap:.5rem}
.brand h1{font-size:1.25rem;margin:0}
.aquila{font-size:1.25rem;color:var(--accent)}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:.5rem;list-style:none;margin:0;padding:0}
.site-nav a{display:block;padding:.5rem .75rem;border-radius:.5rem;text-decoration:none;color:var(--text)}
.site-nav a.active,.site-nav a:hover{background:var(--surface-2);outline:1px solid #2a3040}
.nav-toggle{display:none}

.hero{padding:1rem 1.25rem;background:linear-gradient(180deg,#1b2030,#151822);border:1px solid #2a3040}
.hero h2{margin-top:0;font-size:1.75rem}
.hero-cta{display:flex;gap:.75rem;margin-top:.5rem;flex-wrap:wrap}
.button{background:var(--accent);color:#000;font-weight:700;padding:.6rem .9rem;border:0;border-radius:.6rem;text-decoration:none}
.button.secondary{background:var(--accent-2);color:#000}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.card{background:var(--surface);padding:1rem 1.25rem;border-radius:1rem;border:1px solid #2a3040;box-shadow:0 1px 0 #0008 inset,0 10px 24px #0004}
.card h3{margin-top:.25rem}
.checks{padding-left:1.25rem}
.checks li{margin:.25rem 0}
.callout{border-left:4px solid var(--accent);background:linear-gradient(180deg,#1d212e,#141722)}
.note{color:var(--muted);font-style:italic}

.breadcrumb{color:var(--muted);margin:.5rem 0 1rem}
.breadcrumb a{color:var(--accent)}

.site-footer{border-top:1px solid #2a3040;background:#0e1118}
.site-footer nav{display:flex;gap:.75rem;flex-wrap:wrap}

@media (max-width:900px){
  .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface-2);color:var(--text);border:1px solid #2a3040;border-radius:.5rem;padding:.4rem .6rem}
  .site-nav ul{display:none;position:absolute;right:1rem;top:3.5rem;flex-direction:column;background:var(--surface);padding:.5rem;border:1px solid #2a3040;border-radius:.75rem;min-width:200px}
  .site-nav ul.open{display:flex}
}