:root { --canvas:#f4f5f1; --surface:#fff; --ink:#14211e; --muted:#56635d; --line:#ccd4ce; --accent:#0a7658; --accent-dark:#075a43; --pale:#d9eee6; font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-size:16px; line-height:1.5; }
a { color:inherit; }
.shell { width:min(100% - 2.5rem, 1200px); margin-inline:auto; }
.site-header { min-height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:.7rem; font-size:.88rem; font-weight:800; letter-spacing:.08em; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; color:#fff; background:var(--accent); border-radius:8px; letter-spacing:0; }
nav { display:flex; align-items:center; gap:1.15rem; font-size:.9rem; }
nav a { text-decoration:none; }
.header-action,.primary-action,button { min-height:42px; padding:.6rem .9rem; color:#fff; background:var(--accent); border:0; border-radius:8px; font:inherit; font-weight:750; text-decoration:none; cursor:pointer; }
.header-action:hover,.primary-action:hover,button:hover:not(:disabled) { background:var(--accent-dark); }
.hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.7fr); gap:clamp(2rem,8vw,8rem); align-items:end; padding-block:clamp(4rem,10vw,9rem); }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:10ch; margin-bottom:1.25rem; font-size:clamp(3rem,7vw,6.2rem); line-height:.95; letter-spacing:-.04em; }
.hero > div > p { max-width:56ch; color:var(--muted); font-size:clamp(1.05rem,1.6vw,1.2rem); }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:1.7rem; }
.text-action { color:var(--accent-dark); font-weight:750; text-underline-offset:.2em; }
.hero-facts { display:grid; gap:1.2rem; margin:0; padding:1.5rem; background:var(--surface); border-radius:14px; box-shadow:0 18px 44px rgb(20 33 30 / .08); }
.hero-facts div { padding-bottom:1.1rem; border-bottom:1px solid var(--line); }.hero-facts div:last-child { padding:0; border:0; }.hero-facts dt { margin-bottom:.2rem; color:var(--accent-dark); font-size:.84rem; font-weight:800; }.hero-facts dd { margin:0; color:var(--muted); }
section { padding-block:clamp(3.5rem,8vw,7rem); }
.section-intro { max-width:690px; margin-bottom:2rem; }.section-intro h2,.signup h2 { max-width:15ch; margin-bottom:.8rem; font-size:clamp(2rem,4.5vw,3.8rem); line-height:1; letter-spacing:-.035em; }.section-intro p,.signup p { color:var(--muted); font-size:1.05rem; }
.benefit-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }.benefit-grid article { min-height:190px; padding:1.35rem; background:var(--canvas); }.benefit-grid h3 { margin-bottom:.65rem; font-size:1.1rem; }.benefit-grid p { margin-bottom:0; color:var(--muted); font-size:.92rem; }
.workflow { border-top:1px solid var(--line); }.workflow ol { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin:0; padding:0; list-style:none; counter-reset:steps; }.workflow li { counter-increment:steps; }.workflow li::before { content:"0" counter(steps); display:block; margin-bottom:.8rem; color:var(--accent-dark); font-size:.85rem; font-weight:800; }.workflow strong,.workflow span { display:block; }.workflow span { margin-top:.35rem; color:var(--muted); }
.tariffs { border-top:1px solid var(--line); }.tariff-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.tariff-grid article { display:flex; flex-direction:column; align-items:flex-start; min-height:245px; padding:1.4rem; background:var(--surface); border-radius:14px; box-shadow:0 18px 44px rgb(20 33 30 / .07); }.tariff-grid .featured { color:#fff; background:var(--accent-dark); }.tariff-grid h3 { margin-bottom:1rem; font-size:1.2rem; }.tariff-size { margin-bottom:auto; color:var(--muted); }.featured .tariff-size { color:#d9eee6; }.tariff-price { margin:.9rem 0; font-size:1.8rem; font-weight:800; letter-spacing:-.04em; }.tariff-grid a { color:var(--accent-dark); font-weight:750; text-underline-offset:.2em; }.featured a { color:#fff; }
.signup { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.8fr); gap:clamp(2rem,8vw,7rem); align-items:start; border-top:1px solid var(--line); }.signup form { display:grid; gap:.55rem; padding:1.3rem; background:var(--surface); border-radius:14px; box-shadow:0 18px 44px rgb(20 33 30 / .08); }.signup label { margin-top:.35rem; font-size:.88rem; font-weight:700; }.signup input { min-height:44px; padding:.65rem .8rem; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:8px; font:inherit; }.signup input:focus { outline:3px solid color-mix(in srgb,var(--accent) 20%,transparent); border-color:var(--accent); }.signup button { margin-top:.5rem; }.signup button:disabled { color:#718078; background:#d8dfda; cursor:not-allowed; }.signup form p { min-height:1.3em; margin:.25rem 0 0; color:var(--muted); font-size:.85rem; }
footer { display:flex; justify-content:space-between; gap:1rem; padding-block:1.5rem; color:var(--muted); border-top:1px solid var(--line); font-size:.8rem; } footer span { text-align:right; }
@media (max-width:800px) { .hero,.signup { grid-template-columns:1fr; }.benefit-grid { grid-template-columns:repeat(2,1fr); }.workflow ol,.tariff-grid { grid-template-columns:1fr; }.tariff-grid article { min-height:auto; }.tariff-size { margin-bottom:1.2rem; } }
@media (max-width:520px) { .shell { width:min(100% - 2rem,1200px); }.site-header { min-height:64px; } nav > a:first-child { display:none; }.hero { padding-block:3.5rem; } .benefit-grid { grid-template-columns:1fr; }.workflow ol { gap:1.5rem; } footer { display:grid; } footer span { text-align:left; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }