:root{
  --brand: #2b82ff;           /* Primary blue */
  --brand-2: #7ab6ff;         /* Lighter accent */
  --brand-dark: #1246c9;
  --surface-0: #070a16;       /* Page background */
  --surface-1: #0c1226;       /* Card background */
  --surface-2: #121a34;       /* Elevated */
  --text: #e9f1ff;            /* Main text */
  --text-muted: #9fb1d9;      /* Muted text */
  --line: rgba(255,255,255,.08);
  --radius-lg: 18px;
  --radius-md: 14px;
  --shadow-1: 0 6px 18px rgba(0,0,0,.35);
  --shadow-2: 0 12px 40px rgba(0,0,0,.45);
}

/* Reset & base ------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 20% -10%, #0f1a3e 0%, transparent 60%),
    linear-gradient(180deg, var(--surface-0) 0%, #060915 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px;margin:0 auto;padding:24px 16px}
.container-tight{max-width:860px;margin:0 auto;padding:24px 16px}

header{
  display:flex;align-items:center;gap:16px;
  padding:16px;
}
header img{height:44px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
nav{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}
nav a{color:var(--text);opacity:.9;font-weight:600}
nav a:hover{opacity:1}

/* Typography --------------------------------------------------------------- */
h1{font-size: clamp(28px, 3.8vw, 44px);line-height:1.12;margin:10px 0 8px}
h2{font-size: clamp(22px, 3vw, 32px);line-height:1.18;margin:28px 0 12px}
h3{font-size: clamp(18px, 2.2vw, 22px);margin:16px 0 8px}
.lead{font-size: clamp(16px, 2.2vw, 18px);color:var(--text-muted);max-width:70ch}

/* Hero --------------------------------------------------------------------- */
.hero{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow: var(--shadow-2);
  border:1px solid var(--line);
}
.hero picture img{width:100%;height:auto;display:block}
.hero .overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(70% 60% at 20% 10%, rgba(17,37,112,.45) 0%, transparent 60%),
    linear-gradient(0deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.10) 40%, transparent 70%);
}
.hero .content{
  position:absolute;left:0;right:0;bottom:0;padding:22px 20px 20px;
}

/* Buttons ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:14px;font-weight:800;
  text-transform:uppercase;letter-spacing:.4px;border:0;cursor:pointer;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  will-change: transform, filter;
}
.btn:focus{outline:2px solid #ffffff55;outline-offset:2px}

/* Shimmering blue button (premium) */
.btn-blue{
  color:#fff;
  background: linear-gradient(100deg, var(--brand) 0%, var(--brand-2) 40%, var(--brand) 80%);
  background-size: 240% 100%;
  animation: btnShine 3s linear infinite;
  box-shadow: 0 10px 24px rgba(57,132,255,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-blue:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn-blue:active{transform:translateY(0)}
@keyframes btnShine{
  0%{background-position:0% 0%}
  100%{background-position:240% 0%}
}

/* Badges & chips ----------------------------------------------------------- */
.badge{
  display:inline-block;background:linear-gradient(180deg,#1b2a58,#0f1c47);
  color:#cfe1ff;border:1px solid #1f3780;box-shadow: var(--shadow-1);
  padding:6px 10px;border-radius:999px;font-size:13px
}

/* Cards & surfaces --------------------------------------------------------- */
.card{
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding:18px;
  box-shadow: var(--shadow-1);
}
.section{margin-top:28px}

/* Grid --------------------------------------------------------------------- */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid-3{grid-template-columns:1fr}}

/* Table (cleaner, subtle stripes) ----------------------------------------- */
.table{
  width:100%;border-collapse:separate;border-spacing:0 0;
  font-size:15px;
}
.table thead th{
  color:#d6e4ff;text-align:left;padding:12px 10px;
  border-bottom:1px solid var(--line);
  font-weight:700;letter-spacing:.2px
}
.table tbody td{
  padding:12px 10px;border-bottom:1px solid var(--line);color:var(--text)
}
.table tbody tr:nth-child(odd) td{background:rgba(255,255,255,.02)}

/* Breadcrumbs -------------------------------------------------------------- */
.breadcrumbs{font-size:14px;color:var(--text-muted);margin:8px 0}
.breadcrumbs a{color:#cfe1ff}
.breadcrumbs a:hover{text-decoration:underline}

/* FAQ ---------------------------------------------------------------------- */
.faq details{
  margin:12px 0;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:12px;padding:12px
}
.faq summary{cursor:pointer;font-weight:700;color:#d6e4ff}
.faq details[open]{box-shadow: var(--shadow-1)}

/* Footer ------------------------------------------------------------------- */
.footer{color:#c7d6ff90;font-size:14px;padding:28px 0;border-top:1px solid var(--line)}
.footer a{color:#d6e4ff}

/* Images ------------------------------------------------------------------- */
img{height:auto;max-width:100%;border-radius:10px}
figure{margin:0}

/* Utilities ---------------------------------------------------------------- */
.m-0{margin:0}
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.small{font-size:13px;color:var(--text-muted)}