:root { --teal:#00332c; --lime:#98e70e; --canvas:#f2f2f2; --ink:#102421; --muted:#6d7a77; }
* { box-sizing:border-box; } html { background:var(--canvas); } body { margin:0; min-width:320px; background:var(--canvas); color:var(--ink); font-family:Arial,Helvetica,sans-serif; } a { color:inherit; text-decoration:none; }
main { max-width:1280px; margin:0 auto; padding:24px; }.hero { min-height:690px; position:relative; overflow:hidden; border-radius:32px; padding:28px clamp(28px,6vw,82px) 54px; color:#fff; background:var(--teal); }nav { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }.brand { font-size:13px; letter-spacing:2.6px; font-weight:800; }.brand span { display:inline-block; width:7px; height:7px; margin:0 0 6px 5px; border-radius:50%; background:var(--lime); }.login { padding:11px 17px; border:1px solid rgba(255,255,255,.18); border-radius:14px; font-size:14px; background:rgba(255,255,255,.07); }
.hero-copy { position:relative; z-index:1; max-width:640px; padding-top:118px; }.kicker { margin:0 0 18px; color:var(--lime); font-size:12px; letter-spacing:1.8px; font-weight:800; }h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-.055em; }h1 { max-width:600px; font-size:clamp(3.1rem,6.5vw,5.6rem); line-height:1.03; }.hero h1 strong { color:var(--lime); }.subtitle { max-width:440px; margin:25px 0 30px; color:rgba(255,255,255,.72); font-size:18px; line-height:1.55; }.primary-action { display:inline-flex; align-items:center; gap:26px; padding:18px 22px; border-radius:17px; background:var(--lime); color:#0b211d; font-size:17px; font-weight:700; box-shadow:0 10px 24px rgba(0,0,0,.12); }.primary-action b { font-size:23px; line-height:12px; }
.halo { position:absolute; border-radius:50%; pointer-events:none; }.halo-top { width:560px; height:560px; top:-365px; right:-95px; border:1px solid rgba(152,231,14,.22); box-shadow:0 0 0 74px rgba(152,231,14,.04),0 0 0 150px rgba(152,231,14,.025); }.halo-bottom { width:350px; height:350px; bottom:-235px; left:-120px; background:rgba(255,255,255,.035); }.app-card { position:absolute; z-index:1; right:clamp(28px,6vw,82px); bottom:47px; width:300px; padding:20px; border-radius:25px; color:var(--ink); background:#fff; box-shadow:0 25px 55px rgba(0,0,0,.22); transform:rotate(-3deg); }.card-top { display:flex; justify-content:space-between; color:#75817e; font-size:10px; letter-spacing:1.1px; font-weight:800; }.card-top .status { color:#35675e; }.card-title { margin:29px 0 25px; font-size:31px; line-height:1.04; font-weight:700; letter-spacing:-.06em; }.metrics { display:flex; gap:12px; }.metrics div { flex:1; padding:12px; border-radius:13px; background:#f2f5f4; }.metrics b { display:block; font-size:21px; }.metrics span { display:block; margin-top:4px; color:#71807d; font-size:10px; }.start-row { display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding:14px 15px; border-radius:13px; background:var(--lime); font-weight:700; font-size:14px; }.start-row i { font-style:normal; font-size:21px; }
.promise { padding:128px clamp(28px,8vw,150px) 96px; }.promise .kicker { color:#276258; }.promise h2 { max-width:760px; font-size:clamp(2.8rem,6vw,5.2rem); line-height:1.04; }.promise h2 em { color:#276258; font-style:normal; }.promise > p:last-child { max-width:500px; margin:30px 0 0; color:var(--muted); font-size:18px; line-height:1.6; }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding-bottom:70px; }.steps article { min-height:205px; padding:27px; border-radius:22px; background:#fff; }.steps article:first-child { background:var(--lime); }.steps span { color:#55716b; font-size:12px; font-weight:800; letter-spacing:1.4px; }.steps h3 { margin-top:45px; font-size:24px; }.steps p { margin:12px 0 0; color:var(--muted); font-size:15px; line-height:1.45; }.steps article:first-child p,.steps article:first-child span { color:#35675e; }footer { max-width:1280px; margin:0 auto; padding:0 24px 34px; display:flex; justify-content:space-between; color:#55716b; font-size:12px; font-weight:700; letter-spacing:.7px; }
@media (max-width:760px) { main { padding:12px; }.hero { min-height:720px; border-radius:24px; padding:24px 24px 34px; }.hero-copy { padding-top:86px; }.subtitle { font-size:16px; }.app-card { right:24px; bottom:28px; width:min(286px,calc(100% - 48px)); }.halo-top { right:-240px; }.promise { padding:86px 26px 65px; }.steps { grid-template-columns:1fr; gap:12px; padding:0 12px 48px; }.steps article { min-height:170px; }.steps h3 { margin-top:28px; } footer { padding:0 22px 28px; } }