/* Base */
*{box-sizing:border-box}html,body{margin:0;padding:0}
:root{
  --bg:#f5f7fb;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --ok:#16a34a;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#0b1221;--text:#e6edf5;--muted:#9aa3b2;--line:#1e293b}
}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.55}
a{color:#2563eb;text-decoration:none}
.container{width:min(1120px,92vw);margin:auto}
.row{display:flex;gap:16px;align-items:center}
.center{align-items:center} .between{justify-content:space-between}
.center-col{display:flex;flex-direction:column;align-items:center;text-align:center}

/* Header */
.site-header{position:sticky;top:0;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:10}
@media (prefers-color-scheme: dark){.site-header{background:rgba(11,18,33,.6)}}
.brand{font-weight:800;letter-spacing:.5px}
.brand span{color:#2563eb}
.nav{display:flex;gap:16px;padding:12px 0}
.nav .btn{border:1px solid var(--line);padding:8px 12px;border-radius:8px}

/* Hero */
.hero.compact{padding:36px 0 12px}
.pill{display:inline-block;border:1px solid #f59e0b;color:#d97706;background:#fff7ed;padding:.2rem .5rem;border-radius:999px;font-weight:700;font-size:.8em}
.subtle{color:var(--muted)}

/* Pricing */
.pricing.alt{padding:8px 0 36px}
.cards.four{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:white;border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 6px 20px rgba(0,0,0,.06)}
@media (prefers-color-scheme: dark){.card{background:#0b1327}}
.card .top{display:flex;align-items:flex-end;gap:8px}
.card .price{font-size:28px;margin:0;font-weight:900}
.card small{opacity:.9}
.card .plan{margin:0;font-weight:900}
.card ul{margin:6px 0 0;padding-left:18px}
.card li{margin:.35rem 0}
.card .btn{margin-top:auto;text-align:center;padding:10px 14px;border-radius:8px;border:0;color:white;font-weight:700;cursor:pointer}

/* Color themes to mimic screenshot */
.card.yellow .plan{color:#ca8a04}
.card.yellow .btn{background:#f59e0b}
.card.green .plan{color:#059669}
.card.green .btn{background:#22c55e}
.card.red .plan{color:#dc2626}
.card.red .btn{background:#ef4444}
.card.blue .plan{color:#2563eb}
.card.blue .btn{background:#2563eb}

.hint{margin-top:8px}

/* Benefits & Contact */
.benefits{padding:24px 0 8px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.benefit{background:white;border:1px solid var(--line);border-radius:12px;padding:16px}
@media (prefers-color-scheme: dark){.benefit{background:#0b1327}}

.contact{padding:12px 0 28px}
.form{display:grid;gap:12px}
.field{display:grid;gap:6px}
input,textarea{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:white}
@media (prefers-color-scheme: dark){input,textarea{background:#0b1327;color:#e6edf5;border-color:#1e293b}}
.btn.primary{background:#2563eb;color:white;border:0;padding:10px 16px;border-radius:10px}
.btn.ghost{background:transparent;border:1px solid var(--line);color:#2563eb}

.site-footer{border-top:1px solid var(--line);padding:14px 0;margin-top:8px}

@media (max-width: 1024px){
  .cards.four{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .cards.four{grid-template-columns:1fr}
  .nav{display:none}
}