:root { --ink:#142018; --muted:#617066; --paper:#f5f4ee; --lime:#c7ff52; --line:#dce0d7; --dark:#18271d; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
.shell { max-width:1180px; margin:auto; padding:26px 32px 72px; }
.nav { display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:700; letter-spacing:.08em; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:"Space Grotesk",sans-serif; font-size:13px; }
.brand-mark { display:grid; place-items:center; width:39px; height:31px; color:white; background:var(--dark); border-radius:5px; letter-spacing:-.08em; font-size:14px; }
.secure,.status { display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:600; letter-spacing:.02em; }
.secure i,.status i { width:7px; height:7px; border-radius:50%; background:#7db80b; box-shadow:0 0 0 3px #e5f2c9; }
.hero { min-height:493px; padding:74px 75px; margin-top:23px; display:flex; justify-content:space-between; gap:40px; overflow:hidden; border-radius:18px; color:white; background:linear-gradient(113deg,#1a2c20 0%,#18251d 67%,#274229 100%); position:relative; }
.hero:after { content:""; position:absolute; right:-100px; top:-150px; width:530px; height:530px; border:1px solid #5a735d; border-radius:50%; opacity:.35; box-shadow:0 0 0 65px rgba(155,201,105,.06),0 0 0 130px rgba(155,201,105,.04); }
.hero-copy { position:relative; z-index:1; max-width:620px; }
.eyebrow { margin:0 0 13px; color:#84a18b; font-size:11px; font-weight:700; letter-spacing:.16em; }
h1,h2,h3 { font-family:"Space Grotesk",sans-serif; margin:0; }
h1 { font-size:clamp(39px,5vw,62px); line-height:1.02; letter-spacing:-.055em; }
h1 em { color:var(--lime); font-style:normal; }
.intro { max-width:470px; margin:25px 0 31px; color:#c6d1c7; font-size:17px; line-height:1.55; }
.actions { display:flex; gap:13px; align-items:center; }
.button { display:inline-flex; gap:15px; align-items:center; padding:14px 20px; border-radius:7px; font-weight:700; font-size:14px; text-decoration:none; }
.primary { background:var(--lime); color:#17261a; }.primary span,.panel a span { font-size:20px; line-height:10px; }.subtle { color:white; border:1px solid #4c5f4f; }
.belt-card { z-index:1; align-self:flex-end; width:270px; padding:22px; background:#e2e7d4; color:#18271d; border-radius:12px; transform:rotate(3deg); box-shadow:15px 18px 30px #08150a55; }
.card-top,.card-bottom { display:flex; justify-content:space-between; font-size:9px; letter-spacing:.12em; font-weight:bold; }.belt { margin:50px -22px 23px; height:28px; background:#f6f5eb; position:relative; }.belt:before { content:""; position:absolute; width:83px; height:28px; left:0; background:#315987; }.belt:after { content:""; position:absolute; right:22px; top:-14px; width:50px; height:50px; border:9px solid #315987; border-radius:50%; }.belt-card p { font-family:"Space Grotesk"; margin:0 0 33px; font-size:22px; line-height:1.05; letter-spacing:-.04em; }.belt-card strong { color:#365e3b; }
.dashboard { padding:70px 0 0; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:25px; }.section-heading h2 { font-size:30px; letter-spacing:-.04em; }.status { font-size:12px; }.grid { display:grid; grid-template-columns:1.22fr 1fr 1fr; gap:15px; }.panel { min-height:221px; padding:27px; border:1px solid var(--line); border-radius:12px; background:#fff; }.panel.featured { color:white; border:0; background:#607d46; }.icon { display:inline-grid; place-items:center; width:35px; height:35px; margin-bottom:31px; background:#eff4e6; color:#45632c; border-radius:8px; font-size:21px; }.featured .icon { color:#18301e; background:var(--lime); }.panel h3 { font-size:18px; letter-spacing:-.03em; }.panel p { min-height:42px; margin:9px 0 18px; color:var(--muted); font-size:13px; line-height:1.45; }.featured p { color:#e1ecdb; }.panel a { color:#456d23; font-size:13px; font-weight:bold; text-decoration:none; }.featured a { color:var(--lime); }footer { max-width:1180px; margin:auto; padding:0 32px 30px; color:#778078; font-size:11px; }footer span { margin:0 8px; }
@media (max-width:760px) { .shell{padding:20px 18px 50px}.secure{display:none}.hero{padding:48px 28px;min-height:auto}.belt-card{display:none}.grid{grid-template-columns:1fr}.section-heading{align-items:start;gap:20px}.section-heading h2{font-size:25px}.status{display:none}.actions{flex-wrap:wrap}footer{padding:0 18px 25px;} }