:root{
  --navy:#002b45;
  --yellow:#ffd400;
  --muted:#6b7280;
  --bg:#f6f8fb;
  --card:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter,Segoe UI,Arial; margin:0;background:var(--bg);color:#0b2540}
.container{max-width:980px;margin:0 auto;padding:1rem}
.site-header{background:linear-gradient(90deg,var(--navy),#003b5c);color:var(--yellow);padding:1rem 0}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;margin:0}
nav a.btn, nav button{margin-left:0.5rem}
.btn{background:var(--yellow);color:var(--navy);border:none;padding:.6rem 1rem;border-radius:6px;text-decoration:none;cursor:pointer}
.btn-outline{background:transparent;border:2px solid rgba(255,212,0,0.9);color:var(--yellow)}
.hero{padding:4rem 1rem;text-align:center}
.hero h2{font-size:2rem;margin:.5rem 0}
.hero p{color:var(--muted)}
.actions{margin-top:1rem}
.large{padding:0.9rem 1.4rem}
.card{background:var(--card);border-radius:8px;padding:1.25rem;margin:1rem 0;box-shadow:0 6px 18px rgba(11,37,64,0.06)}
label{display:block;margin:0.6rem 0;color:var(--muted)}
input{width:100%;padding:.6rem;border-radius:6px;border:1px solid #e6e9ee;margin-top:.25rem}
.footer{padding:1rem 0;text-align:center;color:var(--muted)}
@media(min-width:700px){.hero{padding:6rem 1rem}}