:root { --ink:#10231d; --green:#19a974; --mint:#dff8ed; --cream:#f7f6ef; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { background:var(--cream); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
.shell { min-height:100vh; position:relative; overflow:hidden; padding:34px clamp(24px,6vw,92px); display:grid; grid-template-rows:auto 1fr auto; }
.shell::before { content:""; position:absolute; width:580px; height:580px; right:-90px; top:100px; border-radius:50%; background:var(--mint); z-index:-2; }
.nav { display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:800; text-decoration:none; letter-spacing:-.03em; }
.brandMark { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--ink); color:white; font-size:24px; }
.status { display:flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid rgba(16,35,29,.12); border-radius:100px; font-size:13px; font-weight:650; background:rgba(255,255,255,.45); }
.status i { width:8px; height:8px; background:var(--green); border-radius:50%; box-shadow:0 0 0 5px rgba(25,169,116,.12); }
.hero { align-self:center; max-width:710px; padding:70px 0; z-index:1; }
.eyebrow { display:inline-flex; color:#147b58; background:var(--mint); padding:9px 13px; border-radius:8px; font-size:13px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
h1 { margin:24px 0 22px; font-size:clamp(54px,8vw,108px); line-height:.94; letter-spacing:-.075em; font-weight:850; }
h1 span { color:var(--green); }
.hero p { max-width:580px; margin:0 0 32px; color:#4d5e58; font-size:clamp(17px,2vw,21px); line-height:1.65; }
.cta { display:inline-flex; align-items:center; gap:20px; background:var(--ink); color:white; padding:16px 21px; border-radius:12px; text-decoration:none; font-weight:750; box-shadow:0 12px 30px rgba(16,35,29,.16); transition:transform .2s,box-shadow .2s; }
.cta:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(16,35,29,.22); }
.cta span { color:#7ce4bc; font-size:20px; }
.visual { position:absolute; right:clamp(20px,5vw,80px); top:50%; transform:translateY(-35%); width:min(32vw,440px); height:430px; border:2px solid rgba(16,35,29,.08); border-radius:220px 220px 28px 28px; background:rgba(255,255,255,.32); z-index:-1; }
.roadLine { position:absolute; left:50%; top:45px; bottom:0; border-left:3px dashed rgba(16,35,29,.12); }
.parkingCard { position:absolute; left:-45px; top:46%; display:flex; align-items:center; gap:14px; width:330px; padding:16px; background:#fff; border-radius:18px; box-shadow:0 24px 55px rgba(16,35,29,.14); }
.pin { width:48px; height:48px; flex:none; display:grid; place-items:center; border-radius:14px; background:var(--mint); color:#12835c; }
.pin b { font-size:23px; }
.parkingCard div { display:grid; gap:4px; }
.parkingCard strong { font-size:14px; }
.parkingCard small { color:#78847f; }
.check { margin-left:auto; width:25px; height:25px; display:grid; place-items:center; color:white; background:var(--green); border-radius:50%; }
footer { display:flex; justify-content:space-between; align-items:center; color:#718079; font-size:13px; }
footer a { text-decoration:none; }
@media (max-width:900px) { .visual { opacity:.4; right:-170px; } .hero { max-width:670px; } }
@media (max-width:620px) { .shell { padding:24px; } .status { font-size:0; padding:12px; } .status i { width:9px;height:9px; } .hero { padding:72px 0; } h1 { font-size:clamp(52px,17vw,76px); } .visual { display:none; } footer { gap:12px; flex-direction:column; align-items:flex-start; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }