/* ====== Theme ====== */
:root{
  --bg:#f4f9ff; --bg-2:#e9f2ff;
  --ink:#0f1a2b; --muted:#5b6b81;
  --primary:#3b82f6; --primary-600:#2563eb; --primary-700:#1d4ed8;
  --card:#ffffff; --border:#d9e7ff;
  --shadow:0 12px 28px rgba(2,22,58,.08);
  --radius:16px; --radius-lg:22px; --maxw:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;line-height:1.5;color:var(--ink);background:linear-gradient(180deg,var(--bg) 0%,#fff 100%);overflow-x:hidden}

/* ====== Header (Top banner) ====== */
header.header-gradient{position:sticky;top:0;z-index:50;background:linear-gradient(90deg,#60a5fa 0%,#3b82f6 45%,#2563eb 75%,#1d4ed8 100%);color:#fff;border-bottom:1px solid rgba(255,255,255,.15);box-shadow:0 6px 18px rgba(29,78,216,.15)}
.nav{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;color:#fff}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;color:#fff}
.badge-logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.95),#cfe3ff);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.6)}
nav a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:rgba(255,255,255,.92);margin:0 10px;font-weight:800;position:relative;padding:6px 2px;border-radius:10px}
nav a:hover{color:#fff}
nav a::after{content:\"\";position:absolute;left:0;right:0;bottom:2px;height:2px;background:rgba(255,255,255,.9);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
nav a:hover::after{transform:scaleX(1)}
.btn{border:none;border-radius:999px;padding:10px 16px;font-weight:800;cursor:pointer}
.btn-primary{background:#fff;color:#1d4ed8;border:1px solid rgba(29,78,216,.15);box-shadow:var(--shadow)}
.btn-ghost{background:transparent;color:var(--primary-700);border:1px solid var(--border)}

/* ====== Layout ====== */
section{padding:72px 20px}
.container{max-width:var(--maxw);margin:0 auto}
.muted{color:var(--muted)}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:900;color:var(--primary-700)}
h1{font-size:clamp(34px,5vw,58px);line-height:1.06;margin:8px 0}
h2{font-size:clamp(26px,3.6vw,40px);margin:0 0 16px}

/* ====== Reveal ====== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.show{opacity:1;transform:none}

/* ====== Hero ====== */
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:center}
.hero-sub{font-size:18px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--border);color:var(--primary-700);border-radius:999px;padding:8px 12px;font-weight:800}
.badgebar{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hero-card{position:relative;background:linear-gradient(135deg,#e9f2ff,#fff);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow)}
.sparkle{position:absolute;right:14px;top:14px;animation:spin 10s linear infinite;opacity:.8}
@keyframes spin{to{transform:rotate(360deg)}}

/* ====== Table ====== */
.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;min-width:920px}
th,td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--border)}
thead th{position:sticky;top:0;background:#f0f6ff;z-index:1}
tbody tr{transition:background .25s ease}
tbody tr:hover{background:#f7fbff}

/* ====== Decorative blobs ====== */
.blob{position:fixed;z-index:-1;filter:blur(60px);opacity:.28;animation:float 18s ease-in-out infinite alternate}
.blob.a{top:-80px;left:-100px;width:360px;height:360px;background:radial-gradient(circle at 30% 30%,#bfe0ff,transparent 60%),radial-gradient(circle at 70% 70%,#88bfff,transparent 60%)}
.blob.b{bottom:-120px;right:-80px;width:420px;height:420px;background:radial-gradient(circle at 40% 40%,#cfe7ff,transparent 60%),radial-gradient(circle at 60% 60%,#a8d0ff,transparent 60%);animation-duration:22s}
@keyframes float{to{transform:translateY(-20px) translateX(20px)}}

/* ====== Footer (minimal) ====== */
.footer-min{background:#f1f6ff;border-top:1px solid var(--border);padding:22px 20px;margin-top:18px}
.subtle{color:#6b7280;font-size:14px}

/* ====== Responsive ====== */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr}
}