:root { --ink:#102a43; --blue:#1f7a9a; --mist:#eef7fa; --accent:#70e1d0; }
* { box-sizing:border-box; } body { margin:0; font-family:Inter,Segoe UI,sans-serif; color:var(--ink); background:#f7fbfc; }
.hero { min-height:52vh; padding:8rem 2rem 5rem; text-align:center; color:white; background:radial-gradient(circle at 20% 20%,#3e94bd,transparent 38%),linear-gradient(135deg,#102a43,#175b79); }
.badge { display:inline-block; padding:.45rem .75rem; border:1px solid #70e1d0; border-radius:999px; font-size:.72rem; letter-spacing:.12em; } h1 { font-size:clamp(2.7rem,7vw,5.5rem); margin:1.2rem 0 .7rem; } .hero p { font-size:1.2rem; opacity:.9; } .install { display:inline-block; margin-top:1.4rem; padding:.85rem 1.25rem; color:#102a43; text-decoration:none; font-weight:700; border-radius:.7rem; background:var(--accent); }
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; max-width:1080px; margin:-2.2rem auto 3rem; padding:0 1rem; } article,.install-panel { background:white; border:1px solid #d8e9ef; border-radius:1rem; padding:1.5rem; box-shadow:0 12px 30px #102a4314; } article span { font-size:2rem; } article h2 { margin:.7rem 0 .4rem; } article p { color:#516a7a; line-height:1.55; }.install-panel { max-width:760px; margin:0 auto 4rem; } li { padding:.45rem 0; }