:root { color-scheme: light; --bg:#f7f8fa; --ink:#182334; --muted:#576577; --accent:#2453ae; --line:#e3e7ee; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--bg); font:16px/1.6 system-ui,sans-serif; }
a { color:var(--accent); } a:focus-visible,button:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
nav { max-width:1100px; margin:auto; display:flex; justify-content:space-between; gap:20px; padding:24px; } nav .brand { font-weight:700; text-decoration:none; color:var(--ink); } nav .links { display:flex; gap:24px; }
main { max-width:1100px; margin:auto; padding:48px 24px; } .hero { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; } h1 { font-size:44px; line-height:1.15; margin:12px 0 24px; text-wrap:balance; } h2 { font-size:26px; line-height:1.3; text-wrap:balance; } p { text-wrap:pretty; } .muted { color:var(--muted); } .eyebrow { color:var(--accent); font-weight:600; }
.actions { display:flex; gap:20px; flex-wrap:wrap; align-items:center; margin:28px 0; } .button { background:var(--accent); color:white; padding:12px 20px; border-radius:8px; text-decoration:none; font-weight:600; } .preview { max-width:100%; border:1px solid var(--line); border-radius:12px; } .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:48px 0; } article,.pricing { background:white; border:1px solid var(--line); padding:24px; border-radius:10px; } article h2 { font-size:20px; margin-top:0; } .pricing strong { font-size:32px; font-variant-numeric:tabular-nums; } .pricing { margin:24px 0; } .content { max-width:760px; } footer { max-width:1100px; margin:auto; padding:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:24px; }
@media(max-width:760px) { .hero,.cards { grid-template-columns:1fr; } h1 { font-size:34px; } main { padding-top:24px; } nav .links { gap:16px; } }

.preview { width:100%; height:auto; }