:root{
  --ss-navy:#0f2a3a;
  --ss-blue:#1f6feb;
  --ss-green:#2ea44f;
  --ss-slate:#64748b;
  --ss-paper:#f8fafc;
  --ss-white:#fff;
  --ss-border: rgba(15,42,58,.12);
  --ss-shadow: 0 10px 30px rgba(2,6,23,.08);
  --ss-radius: 18px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background: var(--ss-paper);
  color: var(--ss-navy);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}
a{ color: var(--ss-blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ width:100%; max-width:1100px; margin:0 auto; padding:0 18px; }

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(248,250,252,.80);
  border-bottom:1px solid var(--ss-border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand .site-title{ font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:14px; color: var(--ss-navy); }
.nav a{ margin-left:14px; color: var(--ss-navy); font-weight:600; }
.nav a:hover{ color: var(--ss-blue); text-decoration:none; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:999px;
  font-weight:700; border:1px solid var(--ss-border);
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
  transition: transform .08s ease, box-shadow .08s ease;
  text-decoration:none !important;
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px rgba(2,6,23,.08); }
.btn-primary{ background: var(--ss-navy); color: var(--ss-white); border-color: rgba(15,42,58,.18); }
.btn-secondary{ background: var(--ss-white); color: var(--ss-navy); }

.hero{
  padding: 54px 0 26px;
  background:
    radial-gradient(900px 450px at 20% 0%, rgba(31,111,235,.12), transparent 60%),
    radial-gradient(700px 420px at 85% 10%, rgba(46,164,79,.10), transparent 55%);
}
.hero-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:26px; align-items:center; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }

.card{
  background: var(--ss-white);
  border:1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
}
.hero-card{ padding:24px; }
.kicker{ color: var(--ss-slate); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12px; }
h1{ margin:10px 0 10px; font-size:42px; line-height:1.1; letter-spacing:-.02em; }
@media (max-width: 520px){ h1{ font-size:34px; } }
.lead{ margin:0; color: rgba(15,42,58,.78); font-size:18px; }
.actions{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.meta{ margin-top:14px; color: rgba(100,116,139,.95); font-size:14px; }

.section{ padding: 26px 0; }
.section h2{ margin:0 0 10px; font-size:28px; letter-spacing:-.01em; }
.muted{ color: rgba(15,42,58,.72); }

.grid3{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
@media (max-width: 900px){ .grid3{ grid-template-columns: 1fr; } }

.feature{ padding:16px; }
.feature h3{ margin:6px 0 6px; font-size:18px; }
.pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:6px 10px; border-radius:999px;
  background: rgba(31,111,235,.08);
  border:1px solid rgba(31,111,235,.18);
  color: var(--ss-navy);
  font-weight:700; font-size:12px;
}

.table-wrap{ overflow:auto; border-radius: var(--ss-radius); border:1px solid var(--ss-border); background: var(--ss-white); }
table{ width:100%; border-collapse:collapse; min-width:520px; }
th, td{ padding:12px 14px; border-bottom:1px solid var(--ss-border); text-align:left; }
th{ background: rgba(15,42,58,.03); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: rgba(15,42,58,.7); }
tr:last-child td{ border-bottom:none; }
.rank{ font-weight:900; }

.site-footer{
  margin-top: 30px;
  padding: 26px 0;
  border-top: 1px solid var(--ss-border);
  color: rgba(15,42,58,.72);
  font-size: 14px;
}
.footer-inner{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }