:root {
  --bg:#0f1721;
  --surface:#142131;
  --surface-alt:#1b2b3f;
  --ink:#edf4ff;
  --muted:#a7b9cf;
  --accent:#7bc1ff;
  --accent-soft:#20344d;
  --accent-2:#efc86b;
  --line:#2a3a50;
  --shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
  --heading:Avenir Next, Segoe UI, sans-serif;
  --body:Trebuchet MS, Arial, sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 12%, transparent), transparent 24%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 28%),
    var(--bg);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.7;
}
a { color:inherit; }
img { display:block; max-width:100%; }
.page-noise {
  position:fixed; inset:0; pointer-events:none; opacity:0.16;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 0);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.45), transparent 80%);
}
.site-header {
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom:1px solid var(--line);
}
.header-inner, .page-shell, .footer-inner {
  width:min(calc(100% - 2rem), 1180px);
  margin:0 auto;
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0;
}
.site-brand {
  display:flex; align-items:center; gap:.8rem; text-decoration:none; font-weight:800;
  letter-spacing:.01em;
}
.site-mark {
  width:2.8rem; height:2.8rem; border-radius:1rem;
  display:grid; place-items:center; background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#0f1721; box-shadow:var(--shadow);
}
.nav-toggle {
  display:none; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  padding:.7rem .95rem; border-radius:999px; font:inherit; font-weight:700;
}
.site-nav {
  display:flex; flex-wrap:wrap; gap:.7rem;
}
.site-nav a {
  text-decoration:none; padding:.65rem .9rem; border-radius:999px; border:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  color:var(--muted); font-weight:700; transition:transform .18s ease, border-color .18s ease, color .18s ease;
}
.site-nav a:hover, .site-nav a:focus-visible, .offer-button:hover, .footer-links a:hover, .footer-links a:focus-visible {
  transform:translateY(-1px); border-color:var(--accent); color:var(--accent); outline:none;
}
.page-shell {
  display:grid; gap:1.5rem; padding:1.5rem 0 3rem;
}
.hero-block, .offers-block, .insights-block, .article-shell, .author-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:1.8rem;
  box-shadow:var(--shadow);
}
.hero-block {
  display:grid; gap:1.2rem; padding:1.6rem; overflow:hidden; position:relative;
}
.hero-top {
  display:grid; gap:1.2rem;
}
.hero-copy {
  width:100%;
  max-width:none;
}
.hero-block::before {
  content:""; position:absolute; inset:0 0 auto 0; height:.7rem;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.hero-copy h1 {
  width:100%;
  margin:.4rem 0 1rem; font:900 clamp(2.2rem, 3.6vw, 3.95rem)/1.06 var(--heading); letter-spacing:-.04em;
  max-width:none;
}
.hero-copy p {
  width:100%;
  margin:0; max-width:none; color:var(--muted); font-size:1.16rem;
}
.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem; text-transform:uppercase; letter-spacing:.14em;
  font-size:.78rem; font-weight:800; color:var(--accent);
}
.hero-chips {
  width:100%;
  list-style:none; padding:0; margin:1.2rem 0 0; display:flex; flex-wrap:wrap; gap:.7rem;
}
.hero-chips li {
  padding:.65rem .85rem; border-radius:999px; background:var(--surface-alt); color:var(--ink); font-weight:700;
}
.hero-side {
  display:grid; gap:1rem; align-content:start;
}
.hero-stamp {
  padding:1.1rem 1.15rem; border-radius:1.2rem; background:var(--surface-alt); border:1px solid var(--line);
}
.hero-stamp strong {
  display:block; margin-bottom:.45rem; font-size:1rem;
}
.hero-stamp span, .metric-card span, .author-card p, .section-head p {
  color:var(--muted);
}
.metric-grid {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.9rem;
}
.metric-card {
  padding:1rem; border-radius:1.15rem; background:color-mix(in srgb, var(--surface-alt) 80%, var(--surface));
  border:1px solid var(--line);
}
.metric-card strong {
  display:block; margin-bottom:.28rem; font-size:1.15rem;
}
.section-head {
  display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:.8rem; margin-bottom:1rem;
}
.section-head h2 {
  margin:0; font:900 clamp(1.6rem, 2.6vw, 2.6rem)/1.05 var(--heading); letter-spacing:-.04em;
}
.offers-block, .insights-block {
  padding:1.35rem;
}
.hero-offers {
  margin-top:.1rem;
  box-shadow:none;
}
.hero-offers .section-head {
  margin-bottom:.8rem;
}
.hero-offers .offers-grid {
  display:grid;
  grid-template-columns:1fr !important;
  gap:.9rem;
}
.hero-offers .offer-card {
  grid-template-columns:3.2rem 9.75rem 1fr auto !important;
}
.offer-card {
  display:grid; grid-template-columns:3.4rem 11rem 1fr auto; gap:1rem; align-items:center;
  padding:1rem; border:1px solid var(--line); border-radius:1.35rem; background:color-mix(in srgb, var(--surface) 86%, var(--surface-alt));
}
.offer-rank {
  width:3.1rem; height:3.1rem; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0f1721; font-weight:900;
}
.offer-logo {
  padding:.65rem; background:var(--surface); border:1px solid var(--line); border-radius:1rem;
}
.offer-logo img {
  width:100%; height:5.5rem; object-fit:contain;
}
.offer-copy h3 {
  margin:0 0 .18rem; font:800 1.2rem/1.1 var(--heading);
}
.offer-stars {
  margin:0 0 .32rem; font-weight:800; color:var(--accent-2);
}
.offer-bonus {
  margin:0; color:var(--ink); font-weight:700;
}
.offer-button {
  text-decoration:none; min-width:7rem; text-align:center; font-weight:900; padding:1rem 1.1rem; border-radius:999px;
  border:1px solid transparent; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0f1721;
}
.insight-grid {
  display:grid; gap:1rem;
}
.insight-card {
  padding:1rem 1.1rem; border-radius:1.2rem; border:1px solid var(--line); background:var(--surface-alt);
}
.insight-number {
  display:inline-flex; margin-bottom:.6rem; font-weight:900; color:var(--accent);
}
.insight-card p {
  margin:0; color:var(--ink);
}
.article-shell {
  width:100%;
  max-width:74rem;
  margin-inline:auto;
  padding:2.2rem 2.35rem;
}
.article-kicker {
  display:flex; flex-wrap:wrap; gap:.7rem; padding:1rem 1.2rem; border-bottom:1px solid var(--line);
  max-width:48rem;
  margin:0 auto 1.1rem;
}
.article-kicker span {
  padding:.55rem .8rem; border-radius:999px; background:var(--surface-alt); color:var(--muted); font-weight:700;
}
.article-prose {
  padding:0;
  max-width:48rem;
  margin:0 auto;
}
.article-prose > *:first-child {
  margin-top:0;
}
.article-prose section {
  padding:1.75rem 2rem;
  border-bottom:1px solid color-mix(in srgb, var(--line) 75%, transparent);
}
.article-prose section:last-child {
  border-bottom:0;
}
.article-prose h2 {
  margin:0 0 1rem; font:900 clamp(1.5rem, 2.2vw, 2.25rem)/1.08 var(--heading); letter-spacing:-.03em;
}
.article-prose h3 {
  margin:1.6rem 0 .7rem; font:800 1.16rem/1.2 var(--heading);
}
.article-prose p, .article-prose li {
  color:var(--ink);
}
.article-prose p {
  margin:.8rem 0 0;
}
.article-prose ul, .article-prose ol {
  margin:1rem 0 0 1.2rem;
  padding:0;
}
.article-prose table {
  width:100%; border-collapse:collapse; margin-top:1.2rem; overflow:hidden; border-radius:1rem;
}
.article-prose th, .article-prose td {
  padding:.85rem .9rem; border:1px solid var(--line); text-align:left; vertical-align:top;
}
.article-prose th {
  background:var(--surface-alt); font-weight:800;
}
.article-prose blockquote {
  margin:1rem 0 0; padding:1rem 1.1rem; border-left:.35rem solid var(--accent); background:var(--surface-alt); border-radius:0 1rem 1rem 0;
}
.article-prose a {
  color:var(--accent); font-weight:700;
}
.section-visual {
  margin:1.2rem 0 0;
}
.section-visual img {
  width:100%; border-radius:1.3rem; border:1px solid var(--line); box-shadow:var(--shadow);
}
.author-card {
  width:100%;
  max-width:74rem;
  margin-inline:auto;
  padding:1.35rem; align-items:start; gap:1rem;
  display:grid;
  grid-template-columns:5rem 1fr;
}
.author-mark {
  width:5rem; height:5rem; border-radius:1.4rem; display:grid; place-items:center; font-weight:900; font-size:1.5rem;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0f1721;
}
.author-copy h2 {
  margin:.3rem 0 .35rem; font:900 1.7rem/1.1 var(--heading);
}
.author-meta {
  margin:0 0 .65rem; font-weight:700;
}
.site-footer {
  border-top:1px solid var(--line); padding:2rem 0 2.6rem;
}
.footer-inner {
  display:grid; gap:.35rem;
}
.footer-links {
  display:flex; flex-wrap:wrap; gap:.7rem;
}
.footer-links a {
  text-decoration:none; padding:.55rem .8rem; border-radius:999px; border:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  color:var(--muted); font-weight:700; transition:transform .18s ease, border-color .18s ease, color .18s ease;
}
.footer-inner p {
  margin:0; color:var(--muted);
}

.variant-9 .site-header {background:color-mix(in srgb, #0f1721 90%, transparent);}
.variant-9 .hero-block {
  background:
    radial-gradient(circle at top right, rgba(123,193,255,.12), transparent 30%),
    linear-gradient(180deg, #152334, #122031);
  border-color:#2c3c54;
}
.variant-9 .hero-top {grid-template-columns:1fr;}
.variant-9 .hero-copy p,
.variant-9 .hero-stamp span,
.variant-9 .metric-card span,
.variant-9 .footer-inner p {color:#b9c9dc;}
.variant-9 .hero-chips li,
.variant-9 .metric-card,
.variant-9 .hero-stamp,
.variant-9 .author-card,
.variant-9 .offers-block {background:#18273a; border-color:#2a3a50;}
.variant-9 .hero-side {grid-template-columns:1fr;}
.variant-9 .offers-grid .offer-card {
  background:linear-gradient(180deg, #172638, #132131);
  border-color:#2c3c54;
}
.variant-9 .offer-button {box-shadow:0 18px 32px rgba(0,0,0,.25);}
.variant-9 .author-card {background:linear-gradient(180deg, #19283b, #142131);}
.variant-9 .article-shell {
  background:
    linear-gradient(180deg, rgba(123,193,255,.08), transparent 8rem),
    #152334;
  border-color:#2a3a50;
}
.variant-9 .article-kicker span {background:#1d2e43; color:#d7e4f3;}
.variant-9 .article-prose {color:#edf4ff;}
.variant-9 .article-prose p,
.variant-9 .article-prose li,
.variant-9 .article-prose td,
.variant-9 .article-prose th,
.variant-9 .article-prose blockquote {color:#d7e4f3;}
.variant-9 .article-prose h2,
.variant-9 .article-prose h3,
.variant-9 .author-copy h2,
.variant-9 .section-head h2 {color:#f5f8ff;}
.variant-9 .article-prose table,
.variant-9 .article-prose th,
.variant-9 .article-prose td {border-color:#32465f;}
.variant-9 .article-prose th {background:#1b2b40;}
.variant-9 .article-prose blockquote {background:#18283a;}
.variant-9 .site-nav a {background:#172638; border-color:#2a3a50; color:#b9c9dc;}
.variant-9 .site-nav a:hover,
.variant-9 .site-nav a:focus-visible {color:#7bc1ff; border-color:#7bc1ff;}

@media (max-width: 980px) {
  .hero-top,
  .offers-grid,
  .article-shell,
  .hero-side {
    grid-template-columns:1fr !important;
  }
  .offer-card {
    grid-template-columns:3rem 1fr;
  }
  .offer-logo {
    grid-column:2 / 3;
  }
  .offer-copy {
    grid-column:1 / -1;
  }
  .offer-button {
    grid-column:1 / -1;
  }
}
@media (max-width: 760px) {
  .header-inner, .page-shell, .footer-inner {
    width:min(calc(100% - 1rem), 1180px);
  }
  .header-inner {
    align-items:flex-start;
  }
  .nav-toggle {
    display:inline-flex;
  }
  .site-nav {
    width:100%;
    display:none;
    flex-direction:column;
  }
  .site-nav[data-open="true"] {
    display:flex;
  }
  .hero-block, .offers-block, .insights-block, .article-shell, .author-card {
    border-radius:1.35rem;
  }
  .article-shell {
    padding:1.7rem 1.5rem;
  }
  .hero-copy h1 {
    font-size:2rem;
  }
  .article-prose section {
    padding:1.25rem;
  }
  .metric-grid {
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width: 560px) {
  .author-card,
  .variant-9 .author-card {
    grid-template-columns:1fr;
  }
  .metric-grid,
  .insight-grid {
    grid-template-columns:1fr !important;
  }
  .offer-card {
    grid-template-columns:1fr;
  }
  .offer-rank {
    margin-bottom:.5rem;
  }
  .hero-side {
    grid-template-columns:1fr !important;
  }
}