:root{
  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-2:#eef3f9;
  --ink:#0f1b2d;
  --muted:#5d6b7f;
  --line:#d9e2ee;
  --navy:#081425;
  --navy-2:#0d1c33;
  --gold:#c7a74a;
  --gold-2:#e1c97c;
  --blue:#1798ff;
  --white:#ffffff;
  --success:#0b7c63;
  --shadow:0 18px 40px rgba(10,24,42,.10);
  --radius:18px;
  --radius-sm:12px;
  --container:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(calc(100% - 32px), var(--container)); margin:0 auto}
.topbar{
  background:#06101d;
  color:#d7e0ea;
  font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar .container{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:10px 0;
}
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(8,20,37,.94);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:96px;
}
.brand{
  display:flex; align-items:center; gap:16px; flex:0 0 auto;
}
.brand img{
  width:220px; height:auto; object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.brand-text{display:none}
.nav-links{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.nav-links a{
  color:#dae5f1; font-size:15px; font-weight:600; padding:8px 0; position:relative;
}
.nav-links a.active, .nav-links a:hover{color:#fff}
.nav-links a.active::after, .nav-links a:hover::after{
  content:''; position:absolute; left:0; right:0; bottom:-8px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold),#fff);
}
.nav-cta{display:flex; align-items:center; gap:12px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:46px; padding:0 18px; border-radius:999px; font-weight:700;
  transition:.2s ease; border:1px solid transparent; cursor:pointer;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#081425; box-shadow:0 10px 20px rgba(199,167,74,.25)}
.btn.secondary{background:transparent; color:#fff; border-color:rgba(255,255,255,.24)}
.btn.dark{background:var(--navy); color:#fff}
.mobile-toggle{display:none; background:none; border:1px solid rgba(255,255,255,.22); color:#fff; border-radius:999px; min-height:42px; padding:0 16px; font-weight:700}
.mobile-menu{display:none; padding:0 0 16px}
.mobile-menu.open{display:grid; gap:10px; padding-bottom:18px}
.mobile-menu a{padding:12px 14px; border-radius:12px; background:#0d1c33; color:#fff}
.hero{
  position:relative;
  background:radial-gradient(circle at top left, rgba(23,152,255,.18), transparent 28%), linear-gradient(180deg,#081425 0%,#0d1c33 100%);
  color:#fff;
  overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.03), transparent 40%);
}
.hero .container{
  position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:40px; padding:84px 0;
}
.page-hero{
  background:linear-gradient(180deg,#081425 0%,#102341 100%);
  color:#fff;
}
.page-hero .container{padding:64px 0 56px}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px; font-weight:800;
  font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:#0b1220;
  background:linear-gradient(135deg,#f0ddb0,#d7e9ff);
}
.hero h1, .page-hero h1{font-size:clamp(38px,5vw,64px); line-height:1.05; margin:18px 0 16px; letter-spacing:-.03em}
.lead{font-size:18px; color:#cfdae6; max-width:780px}
.page-hero .lead{color:#d6e1ed}
.hero-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:28px;
}
.metric, .glass-card, .card, .strip, .notice, details, .cta-band{
  border:1px solid rgba(10,24,42,.08);
  box-shadow:var(--shadow);
}
.metric{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.10); padding:18px; border-radius:16px; backdrop-filter: blur(10px);
}
.metric strong{display:block; font-size:30px; line-height:1; margin-bottom:8px; color:#fff}
.metric span{color:#cfdae6; font-size:14px}
.hero-card, .glass-card{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.10); border-radius:24px; padding:28px; backdrop-filter: blur(12px);
}
.hero-card h3{font-size:24px; margin:0 0 16px}
.hero-list{margin:0; padding-left:20px; color:#e3ebf4}
.section{padding:80px 0}
.section.alt{background:var(--surface-2)}
.section.dark{background:linear-gradient(180deg,var(--navy),#0d1c33); color:#fff}
.section h2{font-size:clamp(30px,4vw,46px); line-height:1.08; margin:0 0 14px; letter-spacing:-.03em}
.section-lead{font-size:18px; color:var(--muted); max-width:820px; margin:0 0 28px}
.section.dark .section-lead{color:#c9d6e4}
.cards-2,.cards-3,.cards-4,.footer-grid,.split,.form-grid{display:grid; gap:22px}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{grid-template-columns:1.05fr .95fr; align-items:start}
.card{
  background:var(--surface); border-radius:var(--radius); padding:28px;
}
.section.dark .card{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.10); color:#fff}
.card h3{font-size:24px; line-height:1.15; margin:10px 0 12px}
.card p{margin:0 0 12px; color:var(--muted)}
.section.dark .card p{color:#d3deea}
.kicker{
  font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--blue); font-weight:800;
}
.checklist, .feature-list{list-style:none; padding:0; margin:16px 0 0}
.checklist li, .feature-list li{position:relative; padding-left:28px; margin:10px 0}
.checklist li::before, .feature-list li::before{
  content:'✓'; position:absolute; left:0; top:0; font-weight:800; color:var(--success);
}
.section.dark .checklist li::before, .section.dark .feature-list li::before{color:var(--gold-2)}
.strip{
  display:grid; gap:12px; background:var(--surface); border-radius:var(--radius); padding:24px;
}
.cta-band{
  background:linear-gradient(135deg,#0b1830,#10284b); color:#fff; padding:28px; border-radius:24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; border-color:rgba(255,255,255,.08)
}
.breadcrumbs{font-size:14px; color:#c8d6e4; margin-bottom:16px}
.notice{
  background:#fff7e5; color:#5e4b18; padding:16px 18px; border-radius:14px; border-color:#edd38f
}
.accordion{display:grid; gap:14px}
details{background:#fff; border-radius:16px; padding:4px 20px}
summary{cursor:pointer; list-style:none; padding:18px 0; font-weight:700; font-size:18px}
details p{margin:0 0 18px; color:var(--muted)}
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid .full{grid-column:1 / -1}
label{display:block; font-size:14px; font-weight:700; margin:0 0 8px}
input, select, textarea{
  width:100%; min-height:50px; border:1px solid var(--line); border-radius:14px; padding:12px 14px;
  font:inherit; color:var(--ink); background:#fff;
}
textarea{min-height:140px; resize:vertical}
footer{
  background:#06101d; color:#d9e5f1; padding:56px 0 40px; margin-top:0;
}
.footer-grid{grid-template-columns:1.5fr .7fr .7fr .7fr}
footer .brand{align-items:flex-start}
footer .brand img{width:230px}
footer h4{font-size:14px; text-transform:uppercase; letter-spacing:.12em; color:#fff; margin:0 0 14px}
footer ul{list-style:none; padding:0; margin:0}
footer li{margin:10px 0}
footer a{color:#d9e5f1}
footer a:hover{color:#fff}
.small{font-size:13px; color:#a7b7c8}
@media (max-width:1200px){
  .nav-links,.nav-cta{display:none}
  .mobile-toggle{display:inline-flex}
  .brand img{width:205px}
}
@media (max-width:980px){
  .hero .container,.split,.cards-3,.cards-4,.footer-grid{grid-template-columns:1fr}
  .cards-2,.form-grid{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
  .section,.hero .container,.page-hero .container{padding-top:56px; padding-bottom:56px}
  .brand img{width:185px}
  footer .brand img{width:205px}
}
@media (max-width:640px){
  .topbar .container{font-size:12px}
  .nav{min-height:84px}
  .brand img{width:165px}
  footer .brand img{width:185px}
  .btn{width:100%}
  .cta-band{padding:22px}
  .container{width:min(calc(100% - 20px), var(--container))}
}