:root { --ink:#1f2933; --muted:#68717d; --line:#e2e4df; --blue:#3f6658; --violet:#a56a43; --surface:#f5f3ee; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input { font:inherit; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none!important; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:22px; font-weight:800; letter-spacing:-.03em; }
.brand-mark { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; color:#fff; font-weight:900; background:var(--blue); }
.hero { min-height:650px; padding:88px max(28px,calc((100vw - 1180px)/2)); display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:70px; overflow:hidden; background:var(--surface); border-bottom:1px solid #e3e0d9; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; color:var(--blue); text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:800; }
.eyebrow i { width:7px; height:7px; border-radius:50%; background:currentColor; }
.hero h1 { max-width:660px; font-size:clamp(44px,6vw,72px); line-height:1.02; letter-spacing:-.055em; margin:20px 0 24px; }
.hero-copy>p { max-width:585px; margin:0; color:var(--muted); font-size:19px; line-height:1.7; }
.hero-actions { display:flex; align-items:center; gap:24px; margin-top:34px; flex-wrap:wrap; }
.button { display:inline-flex; justify-content:center; align-items:center; padding:16px 24px; border-radius:14px; font-weight:800; }
.button.primary { color:#fff; background:var(--blue); box-shadow:0 9px 22px rgba(31,41,51,.12); }
.secure-note { color:#667085; font-size:14px; }
.secure-note b { color:#20a26b; }
.hero-visual { position:relative; min-height:455px; display:grid; place-items:center; }
.device-card { position:absolute; border:1px solid #dddcd6; background:#fff; box-shadow:0 18px 45px rgba(31,41,51,.12); }
.back-card { width:230px; height:150px; right:3%; top:15%; padding:25px; border-radius:26px; transform:rotate(8deg); display:flex; flex-direction:column; justify-content:flex-end; }
.back-card span { color:var(--violet); font-weight:800; font-size:13px; }
.back-card strong { margin-top:5px; font-size:23px; }
.front-card { width:330px; height:405px; left:8%; padding:28px; border-radius:35px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.mini-brand { align-self:flex-start; font-weight:800; display:flex; align-items:center; gap:8px; }
.mini-brand i { width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:#fff;background:var(--blue);font-style:normal; }
.play-orb { margin:55px 0 38px; width:118px;height:118px;border:12px solid #e8e4da;border-radius:50%;display:grid;place-items:center;background:var(--blue); }
.play-orb span { color:#fff; font-size:47px; font-weight:800; }
.front-card strong { font-size:23px; }
.front-card small { color:var(--muted); margin-top:8px; }
.plans-section { max-width:1180px; margin:auto; padding:105px 28px; }
.section-heading { text-align:center; max-width:680px; margin:0 auto 48px; }
.section-heading h2 { font-size:clamp(34px,4vw,48px); letter-spacing:-.045em; margin:16px 0 12px; }
.section-heading p { color:var(--muted); line-height:1.65; }
.plans-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.plan-card { position:relative; min-height:252px; padding:30px; border:1px solid var(--line); border-radius:22px; background:#fff; color:var(--ink); text-align:left; cursor:pointer; transition:.22s ease; display:flex; flex-direction:column; align-items:flex-start; }
.plan-card:hover { transform:translateY(-4px); border-color:#b8c5bf; box-shadow:0 15px 34px rgba(31,41,51,.09); }
.plan-card.selected { border:2px solid var(--blue); padding:29px; background:#f7f8f4; box-shadow:0 14px 30px rgba(31,41,51,.08); }
.popular { position:absolute; top:-12px; left:22px; padding:6px 12px; border-radius:999px; color:#fff; background:var(--violet); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.plan-check { position:absolute; right:22px; top:22px; width:27px;height:27px;border-radius:50%;border:1px solid #dfe4ef;display:grid;place-items:center;color:#fff;background:#fff;font-size:14px; }
.selected .plan-check { border-color:var(--blue); background:var(--blue); }
.plan-name { color:#4e5871; font-weight:750; }
.plan-price { font-size:34px; font-weight:850; letter-spacing:-.045em; margin-top:20px; }
.plan-period { color:#7a8398; font-size:13px; margin-top:3px; }
.plan-link { margin-top:auto; color:var(--blue); font-weight:800; font-size:14px; }
.plan-link b { margin-left:5px; }
.checkout-section { padding:30px 28px 110px; scroll-margin-top:22px; }
.checkout-shell { max-width:1050px; margin:auto; display:grid; grid-template-columns:.84fr 1.16fr; border:1px solid var(--line); border-radius:32px; overflow:hidden; box-shadow:0 24px 55px rgba(31,41,51,.12); }
.order-summary { padding:55px 48px; color:#fff; background:#263c36; }
.eyebrow.light { color:#d9e5df; }
.order-summary h2 { font-size:38px; letter-spacing:-.04em; margin:22px 0 8px; }
.order-summary>p { color:#ccd3f0; }
.summary-price { padding:25px 0; margin:30px 0; border-block:1px solid rgba(255,255,255,.16); display:flex; justify-content:space-between; align-items:end; gap:12px; }
.summary-price strong { font-size:38px; }
.summary-price span { color:#cbd2ef; }
.order-summary ul { list-style:none; padding:0; margin:0; display:grid; gap:17px; color:#e9ecff; font-size:14px; }
.order-summary li b { color:#77edbd; margin-right:8px; }
.checkout-form { padding:52px; background:#fff; }
.step { color:var(--blue); font-size:11px; font-weight:850; letter-spacing:.14em; }
.checkout-form h3 { font-size:32px; letter-spacing:-.04em; margin:10px 0 8px; }
.checkout-form>p { color:var(--muted); margin:0 0 26px; }
.checkout-form>label:not(.consent-row) { display:grid; gap:9px; margin-top:18px; font-size:13px; font-weight:750; color:#34405a; }
.checkout-form input { width:100%; border:1px solid #dce1eb; border-radius:13px; padding:15px 16px; color:var(--ink); background:#fbfcfe; outline:none; transition:.2s; }
.checkout-form input:focus { border-color:var(--blue); box-shadow:0 0 0 4px #e9edff; background:#fff; }
.phone-field { display:flex; border:1px solid #dce1eb; border-radius:13px; background:#fbfcfe; overflow:hidden; }
.phone-field:focus-within { border-color:var(--blue); box-shadow:0 0 0 4px #e9edff; background:#fff; }
.phone-field span { display:flex; align-items:center; padding:0 14px; border-right:1px solid #e1e5ed; white-space:nowrap; font-size:13px; color:#505a70; }
.phone-field input { border:0; border-radius:0; box-shadow:none!important; }
.consent-row { display:flex; gap:10px; align-items:flex-start; margin:20px 0; color:#667085; font-size:12px; line-height:1.5; }
.consent-row input { width:17px; height:17px; margin-top:1px; accent-color:var(--blue); }
.consent-row a { color:var(--blue); font-weight:750; }
.submit-button { width:100%; border:0; padding:17px 20px; border-radius:14px; display:flex; justify-content:space-between; align-items:center; color:#fff; background:var(--blue); font-weight:850; cursor:pointer; box-shadow:0 10px 22px rgba(31,41,51,.12); }
.submit-button:hover { filter:brightness(1.05); transform:translateY(-1px); }
.submit-button:disabled { opacity:.72; cursor:wait; transform:none; }
.form-note { display:block; text-align:center; margin-top:15px; color:#7b8498; }
.privacy { max-width:850px; margin:0 auto; padding:65px 28px; text-align:center; border-top:1px solid var(--line); }
.privacy h2 { font-size:28px; margin:0 0 12px; }
.privacy p { color:var(--muted); line-height:1.7; }
footer { padding:32px max(28px,calc((100vw - 1180px)/2)); border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; background:#fbfcfe; color:#596277; }
footer .brand { color:var(--ink); font-size:18px; }
footer .brand-mark { width:29px;height:29px;font-size:14px; }
.success-backdrop { position:fixed; z-index:40; inset:0; display:grid; place-items:center; padding:22px; background:rgba(9,17,39,.62); backdrop-filter:blur(8px); }
.success-modal { width:min(100%,440px); padding:40px; border:1px solid rgba(255,255,255,.8); border-radius:28px; background:#fff; box-shadow:0 30px 90px rgba(7,15,42,.34); text-align:center; animation:modal-in .24s ease-out; }
.success-icon { width:68px; height:68px; margin:0 auto 22px; border-radius:50%; display:grid; place-items:center; color:#fff; background:#2f795a; font-size:32px; font-weight:900; }
.success-modal h2 { margin:0; font-size:30px; letter-spacing:-.04em; }
.success-modal>p { margin:10px 0 24px; color:var(--muted); line-height:1.6; }
.success-plan { display:grid; grid-template-columns:1fr auto; gap:5px 18px; padding:18px; border:1px solid #e5e9f2; border-radius:16px; background:#f8faff; text-align:left; }
.success-plan span { font-weight:800; }
.success-plan strong { grid-row:1 / span 2; grid-column:2; align-self:center; color:var(--blue); font-size:21px; }
.success-plan small { color:var(--muted); }
.success-modal button { width:100%; margin-top:24px; padding:15px 20px; border:0; border-radius:13px; color:#fff; background:var(--blue); font-weight:850; cursor:pointer; }
@keyframes modal-in { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }
.cookie-banner { position:fixed; z-index:20; left:24px; right:24px; bottom:22px; max-width:820px; margin:auto; padding:18px 20px; border:1px solid #e0e4ee; border-radius:17px; background:rgba(255,255,255,.96); backdrop-filter:blur(16px); box-shadow:0 18px 50px rgba(20,31,67,.2); display:flex; align-items:center; justify-content:space-between; gap:22px; }
.cookie-banner strong { font-size:14px; }
.cookie-banner p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.cookie-actions { display:flex; gap:9px; flex-shrink:0; }
.cookie-actions button { border:1px solid #dce1eb; background:#fff; color:#596277; padding:10px 13px; border-radius:10px; cursor:pointer; font-size:12px; font-weight:750; }
.cookie-actions .accept { border-color:var(--blue); background:var(--blue); color:#fff; }
@media (max-width:900px) { .hero{grid-template-columns:1fr;padding-top:55px;text-align:center;gap:20px}.hero-copy{display:flex;flex-direction:column;align-items:center}.hero-visual{min-height:430px}.plans-grid{grid-template-columns:repeat(2,1fr)}.checkout-shell{grid-template-columns:1fr}.order-summary{padding:40px}.checkout-form{padding:40px} }
@media (max-width:600px) { .hero{padding:55px 20px 35px}.hero h1{font-size:43px}.hero-copy>p{font-size:16px}.hero-visual{min-height:390px;transform:scale(.88)}.front-card{left:1%}.back-card{right:-7%}.plans-section{padding:75px 18px}.plans-grid{grid-template-columns:1fr}.plan-card{min-height:225px}.checkout-section{padding:10px 16px 80px}.checkout-shell{border-radius:24px}.order-summary,.checkout-form{padding:32px 25px}.summary-price strong{font-size:32px}.checkout-form h3{font-size:29px}footer{flex-direction:column;gap:15px;text-align:center}.cookie-banner{left:12px;right:12px;bottom:12px;flex-direction:column;align-items:stretch}.cookie-actions button{flex:1}.cookie-actions{width:100%} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}*{transition:none!important} }