:root{
  --bg:#0d1117;
  --bg-soft:#0f131a;
  --card:#111722;
  --text:#c9d1d9;
  --muted:#8b949e;
  --red:#e11d48;
  --red-soft:#f43f5e22;
  --outline:#1f2937;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:"Courier New",monospace;line-height:1.55}

a{color:#fff;text-decoration:none}
a.link{color:#8fd3ff;text-decoration:underline}

.nav{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg,#0b0f15 0%, #0d1117 100%);
  border-bottom:1px solid #0f172a; padding:12px 18px;
  display:flex;align-items:center;justify-content:space-between
}
.brand{font-weight:700;letter-spacing:.5px}
.brand span{color:var(--red)}
.nav nav a{margin-left:16px;color:#b8c0cc}
.nav nav a:hover{color:#fff}

main{max-width:1100px;margin:0 auto;padding:28px 16px}

.hero{
  display:grid;grid-template-columns:1.25fr .9fr;gap:28px;align-items:stretch;margin:20px 0 8px
}
.hero-copy h1{font-size:clamp(28px,4vw,44px);margin:0 0 10px}
.glow{text-shadow:0 0 16px var(--red),0 0 32px var(--red)}
.hero-copy p{color:var(--muted);max-width:58ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}

.hero-card{
  border:1px solid #1f2937;background:radial-gradient(120% 120% at 100% 0%, #1b2232 0%, #131a26 50%, #0f151f 100%);
  border-radius:16px;padding:18px;display:grid;gap:12px;align-content:center
}
.stat{background:var(--card);border:1px solid #1f2937;padding:14px;border-radius:12px}
.stat-num{font-size:32px;font-weight:800;color:#fff}
.stat-label{color:#9aa3ae}

.split{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;margin:24px 0}
.panel{background:var(--card);border:1px solid #1f2937;padding:20px;border-radius:16px}
.bullets{margin:0;padding-left:18px}
.bullets li{margin:8px 0}
.links{margin-top:12px}
.chart-card{display:flex;flex-direction:column;align-items:center;justify-content:center}
.caption{color:#94a3b8;margin-top:8px}

.social-proof{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;margin:24px 0}
.proof-left p{color:var(--muted)}

.placements{margin:36px 0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid #1f2937;padding:18px;border-radius:16px}
.card h3{margin:0 0 8px}
.price{margin-top:10px;font-weight:800;font-size:24px;color:#fff}
.price span{font-weight:600;font-size:14px;color:#9aa3ae}

.why{margin:26px 0}
.pill-row{display:flex;gap:10px;flex-wrap:wrap}
.pill{
  padding:8px 12px;border-radius:999px;border:1px solid #253044;
  background:#101826;color:#d6e3ff
}

.cta{text-align:center;margin:42px 0}
.fine{color:#778192;margin-top:10px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:12px;border:1px solid #2a3347;cursor:pointer;
  transition:transform .1s ease, box-shadow .2s ease, background .2s ease
}
.btn-primary{
  background:linear-gradient(180deg,#ff3350,#b3122c);
  border-color:#751427;box-shadow:0 0 18px var(--red-soft)
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-outline{background:transparent;color:#fff}
.btn-outline:hover{background:#131a23}
.btn-ghost{background:#0e1420}

.footer{border-top:1px solid #111827;padding:24px;text-align:center;color:#9aa3ae}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .social-proof{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}

/* Tweet screenshot link styling */
.tweet-image-link {
  display: inline-block;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tweet-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.tweet-image-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(255, 39, 64, 0.3);
}