:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #101616; color: #f1f4ed; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 83% 7%, #355c4d, transparent 29rem), #101616; }
main { width: min(1100px, calc(100% - 40px)); margin: auto; }
nav { display: flex; align-items: center; gap: 32px; padding: 28px 0; }
.brand { color: #eaf575; font-weight: 900; font-size: 1.45rem; letter-spacing: .12em; text-decoration: none; }
.brand span { color: #f1f4ed; }.nav-link { color: #b6c3ba; text-decoration: none; }
.hero { min-height: 570px; padding: 110px 0 80px; }.eyebrow { color: #eaf575; letter-spacing: .11em; text-transform: uppercase; font-size: .76rem; font-weight: 700; }
h1 { margin: 18px 0; max-width: 760px; font-size: clamp(3rem, 8vw, 6.5rem); line-height: .94; letter-spacing: -.07em; }
h2 { font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -.05em; margin: 10px 0; }.lead, .section-lead { max-width: 550px; color: #b6c3ba; font-size: 1.12rem; line-height: 1.6; }
.actions, .payment-types { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }.button { border: 0; border-radius: 999px; padding: 13px 20px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.primary { background: #eaf575; color: #17201c; }.secondary { background: transparent; border: 1px solid #75857b; color: #f1f4ed; }.hint, .field-hint { color: #aebbb2; font-size: .9rem; line-height: 1.5; }
.tariffs, .purchase { padding: 84px 0; border-top: 1px solid #324038; }.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-top: 32px; }
.plan { min-height: 245px; padding: 24px; background: #1b2520; border: 1px solid #35463b; border-radius: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }.plan h3 { margin: 0; font-size: 1.35rem; }.plan p { margin: 0; color: #b6c3ba; }.plan strong { font-size: 1.55rem; margin-top: auto; }
.purchase { max-width: 620px; } form { margin-top: 26px; } label { display: block; margin-bottom: 8px; font-weight: 700; } input { width: 100%; border: 1px solid #596b60; background: #17201c; border-radius: 12px; padding: 15px; color: #f1f4ed; font: inherit; } footer { width: min(1100px, calc(100% - 40px)); margin: 0 auto; padding: 40px 0; color: #829087; font-size: .9rem; }
@media (max-width: 600px) { .hero { min-height: 480px; padding-top: 72px; } nav { gap: 20px; } }