:root{ --bg:#f7fafc; --card:#fff; --ink:#0a0c0e; --ink2:#3f464c; --muted:#7b848c; --line:#e2e8ec; --acc:#008ac9; --acc2:#00a0e6; --accsoft:#e6f4fb; --green:#008ac9; --greensoft:#e6f4fb; --radius:18px; --pad:clamp(20px,5vw,64px); --f-d:"Unbounded",sans-serif; --f:"Onest",system-ui,sans-serif; }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--f); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
::selection{ background:var(--acc); color:#fff; }
a{ color:var(--acc); text-decoration:none; } a:hover{ color:var(--acc2); }
h1,h2,h3{ font-family:var(--f-d); font-weight:600; line-height:1.18; margin:0; letter-spacing:-.01em; }
.wrap{ max-width:920px; margin:0 auto; padding-inline:var(--pad); }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--acc); }
.eyebrow::before{ content:""; width:24px; height:2px; background:var(--acc); border-radius:2px; }
.nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px var(--pad); background:rgba(247,250,252,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.brand{ display:flex; align-items:center; gap:10px; }
.brand .mk{ width:32px; height:32px; flex:none; }
.brand .nm{ font-family:var(--f-d); font-weight:700; font-size:14px; color:var(--ink); }
.brand .nm b{ color:var(--acc); }
.nav a.back{ font-size:14px; color:var(--ink2); font-weight:500; }
.nav a.back:hover{ color:var(--acc); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--f); font-weight:700; font-size:15px; cursor:pointer; white-space:nowrap; padding:13px 26px; border-radius:999px; border:1.5px solid transparent; transition:all .2s; }
.btn-acc{ background:var(--acc); color:#fff; box-shadow:0 10px 26px -12px rgba(0,138,201,.65); }
.btn-acc:hover{ background:var(--acc2); color:#fff; transform:translateY(-2px); }
.btn-ghost{ border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--bg); }
.hero{ padding:64px 0 20px; }
.hero h1{ font-size:clamp(26px,4vw,42px); margin-top:16px; }
.hero .lead{ color:var(--ink2); font-size:clamp(16px,1.4vw,18.5px); margin:18px 0 0; text-wrap:pretty; }
.hero .price-tag{ display:inline-flex; align-items:baseline; gap:10px; margin-top:22px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 22px; }
.hero .price-tag .p{ font-family:var(--f-d); font-weight:700; font-size:20px; color:var(--acc); }
.hero .price-tag .s{ font-size:13px; color:var(--muted); }
.cta-row{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
section{ padding-block:36px; }
h2{ font-size:clamp(20px,2.6vw,28px); margin-bottom:16px; }
p{ color:var(--ink2); margin:0 0 14px; text-wrap:pretty; }
.benefits{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0; padding:0; list-style:none; }
.benefits li{ display:flex; gap:11px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-size:14.5px; color:var(--ink2); }
.benefits li svg{ width:18px; height:18px; flex:none; color:var(--green); margin-top:2px; }
.faq{ display:grid; gap:10px; }
.faq details{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 20px; }
.faq summary{ font-weight:700; font-size:15.5px; cursor:pointer; color:var(--ink); }
.faq p{ margin:10px 0 0; font-size:14.5px; }
.cta-final{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:32px; text-align:center; margin-block:24px 8px; }
.cta-final h2{ margin-bottom:10px; }
.cta-final p{ max-width:520px; margin-inline:auto; }
.cta-final .cta-row{ justify-content:center; }
.foot{ border-top:1px solid var(--line); padding:28px var(--pad); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13.5px; color:var(--muted); margin-top:40px; }
.foot a{ color:var(--ink2); }
.related-links{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.related-links li{ border:1px solid var(--line); border-radius:12px; background:var(--card); transition:border-color .2s; }
.related-links li:hover{ border-color:var(--acc); }
.related-links a{ display:block; padding:14px 18px; font-weight:600; font-size:15px; color:var(--ink); }
.related-links a:hover{ color:var(--acc); }
@media (max-width:680px){ .benefits{ grid-template-columns:1fr; } }