:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #080b14;
  color: #f8fafc;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 50% -10%, #27345f 0, #11162a 35%, #080b14 70%); }
button { font: inherit; }
.shell { width: min(900px, 100%); margin: 0 auto; padding: max(36px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); }
.hero { text-align: center; margin: 0 auto 30px; max-width: 650px; }
.brand-mark { width: 54px; height: 54px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(145deg, #8b5cf6, #4f46e5); box-shadow: 0 12px 35px #5b4bea66; font-size: 28px; font-weight: 900; }
.eyebrow { color: #a5b4fc; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
h1 { margin: 8px 0 12px; font-size: clamp(30px, 7vw, 48px); line-height: 1.07; letter-spacing: -.04em; }
.subtitle { margin: 0; color: #aeb8cc; line-height: 1.6; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.plan { position: relative; display: flex; flex-direction: column; min-height: 315px; padding: 25px; border: 1px solid #303956; border-radius: 22px; background: linear-gradient(160deg, #171d31ee, #101526ee); box-shadow: 0 20px 60px #0005; }
.plan.featured { border-color: #8176ff; box-shadow: 0 20px 60px #5145c533; }
.pill { position: absolute; top: 17px; right: 17px; padding: 6px 10px; border-radius: 999px; color: #ddd9ff; background: #5c50ca55; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.plan h2 { margin: 0 0 12px; font-size: 21px; }
.price { margin: 0; font-size: 42px; font-weight: 850; letter-spacing: -.05em; }
.interval { color: #98a4ba; font-size: 15px; font-weight: 500; letter-spacing: 0; }
.description { flex: 1; margin: 18px 0 24px; color: #aeb8cc; line-height: 1.55; }
.subscribe { width: 100%; border: 0; border-radius: 13px; padding: 14px 18px; cursor: pointer; color: white; background: linear-gradient(135deg, #7768ef, #5145cd); font-weight: 800; transition: transform .15s, filter .15s; }
.subscribe:hover { filter: brightness(1.12); transform: translateY(-1px); }
.subscribe:disabled { cursor: wait; filter: grayscale(.4); opacity: .65; transform: none; }
.notice { margin: 0 auto 22px; padding: 15px 17px; max-width: 700px; border: 1px solid #3e4a70; border-radius: 14px; color: #dbe3f6; background: #1a2137; line-height: 1.5; text-align: center; }
.notice.success { border-color: #267a5a; background: #102d25; color: #bdf5da; }
.notice.error { border-color: #9f3e52; background: #351721; color: #fecdd3; }
.assurance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 25px; }
.assurance div { display: flex; gap: 12px; padding: 17px; color: #9fabc0; border: 1px solid #242c43; border-radius: 15px; background: #0e1321aa; }
.assurance span { color: #78d5ad; font-weight: 900; }
.assurance p { margin: 0; line-height: 1.5; font-size: 13px; }
.assurance strong { color: #e7ebf4; }
.fine-print { margin: 24px auto 0; max-width: 600px; text-align: center; color: #758197; font-size: 12px; line-height: 1.6; }
@media (max-width: 560px) { .assurance { grid-template-columns: 1fr; } .shell { padding-left: 15px; padding-right: 15px; } }