:root{
  --text:#0f172a;
  --muted:#475569;

  --nav:#0b1220;
  --navText:#e5e7eb;
  --navHover:rgba(255,255,255,.10);

  --line:rgba(148,163,184,.40);
  --card:rgba(255,255,255,.78);

  --accent:#2563eb;
  --accent2:#1d4ed8;
  --outline:rgba(147,197,253,.95);

  --radius:18px;
  --shadow: 0 18px 44px rgba(15,23,42,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;

  /* more obvious light blue + tan gradient (you WILL see it) */
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(37,99,235,.22), transparent 62%),
    radial-gradient(900px 520px at 82% 12%, rgba(205,170,120,.22), transparent 62%),
    linear-gradient(180deg, #eef4ff 0%, #f7efe3 44%, #ffffff 100%);
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(11,18,32,.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(148,163,184,.20);
}

.nav{
  max-width:1020px;
  margin:0 auto;
  padding:12px 18px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.nav a{
  color:var(--navText);
  text-decoration:none;
  font-weight:780;
  padding:9px 12px;
  border-radius:12px;
}

.nav a:hover{ background:var(--navHover); }

.container{
  max-width:1020px;
  margin:0 auto;
  padding:48px 18px 80px;
}

.hero{ padding:6px 0 6px; }

.kicker{
  margin:0 0 10px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--muted);
}

h1{
  font-size:46px;
  line-height:1.05;
  margin:0 0 10px;
  letter-spacing:-1px;
}

.lede{
  margin:0;
  font-size:18px;
  color:var(--muted);
  max-width:78ch;
}

.section{ margin-top:36px; }

.card{
  border:1px solid rgba(148,163,184,.38);
  border-radius:var(--radius);
  background:var(--card);
  padding:20px;
  box-shadow: 0 12px 26px rgba(15,23,42,.08);
}

.actions{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* beveled buttons + thin light-blue outline */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  text-decoration:none;
  font-weight:920;
  color:#0f172a;

  box-shadow:
    0 0 0 1px var(--outline),
    0 14px 28px rgba(15,23,42,.12);

  border:1px solid rgba(148,163,184,.40);
  background:rgba(255,255,255,.82);
  overflow:hidden;
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.85), rgba(255,255,255,0) 55%),
    radial-gradient(120% 140% at 50% 115%, rgba(15,23,42,.20), rgba(15,23,42,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.50), rgba(15,23,42,.06));
  pointer-events:none;
}

.btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -12px 18px rgba(15,23,42,.14),
    inset 0 0 0 1px rgba(15,23,42,.06);
  pointer-events:none;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 0 0 1px var(--outline),
    var(--shadow);
}

.btn.primary{
  color:#ffffff;
  border:1px solid rgba(37,99,235,.85);
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:
    0 0 0 1px var(--outline),
    0 16px 30px rgba(37,99,235,.18),
    0 14px 28px rgba(15,23,42,.14);
}

.btn.primary::before{
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.34), rgba(255,255,255,0) 55%),
    radial-gradient(120% 140% at 50% 115%, rgba(0,0,0,.22), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.08));
}

.btn.primary::after{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -12px 18px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

/* ICON ROW — hard cap sizes so they can’t blow up */
.iconRow{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:18px;
}

.iconPill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.40);
  background:rgba(255,255,255,.70);
  box-shadow: 0 12px 24px rgba(15,23,42,.06);
}

.iconCircle{
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.65), rgba(255,255,255,0) 55%),
    radial-gradient(120% 140% at 50% 115%, rgba(15,23,42,.22), rgba(15,23,42,0) 55%),
    linear-gradient(135deg, rgba(37,99,235,.30), rgba(59,130,246,.12));
  border:1px solid rgba(147,197,253,.70);
}

.iconCircle svg{
  width:16px !important;
  height:16px !important;
  max-width:16px !important;
  max-height:16px !important;
  display:block;
  color:#0f172a;
  opacity:.9;
}

.iconText{
  font-weight:900;
  color:#0f172a;
  font-size:14px;
}

.iconSub{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  margin-top:2px;
}

.kv{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width: 900px){
  .kv{ grid-template-columns: 1.2fr .8fr; }
}

.footer{
  margin-top:46px;
  padding-top:18px;
  border-top:1px solid rgba(148,163,184,.30);
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  color:var(--muted);
  font-size:14px;
}

.footer a{
  color:#e5e7eb;
  background:rgba(11,18,32,.92);
  padding:8px 10px;
  border-radius:12px;
  text-decoration:none;
  font-weight:900;
  border:1px solid rgba(148,163,184,.20);
}

.footer a:hover{ border-color:rgba(147,197,253,.55); }