:root { --ink:#10231d; --green:#16744a; --mint:#dff5e8; --cream:#f7f6ef; --line:#cbd8d0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font:16px/1.55 Arial, Helvetica, sans-serif; }
a { color:inherit; }
.nav { max-width:1180px; margin:auto; padding:26px 32px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; font-size:1.05rem; font-weight:800; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; color:white; background:var(--green); border-radius:9px; font-family:Georgia, serif; }
.nav-link { font-size:.9rem; font-weight:700; text-underline-offset:4px; }
.hero { min-height:650px; max-width:1180px; margin:auto; padding:72px 32px 88px; display:grid; grid-template-columns:1.02fr .98fr; gap:72px; align-items:center; }
.eyebrow { margin:0 0 18px; color:var(--green); font-size:.75rem; font-weight:800; letter-spacing:.15em; }
h1 { margin:0; max-width:650px; font:700 clamp(3.2rem,7vw,6.8rem)/.86 Georgia, serif; letter-spacing:-.055em; }
h1 em { color:var(--green); font-weight:400; }
.intro { max-width:540px; margin:30px 0; font-size:1.15rem; color:#40554d; }
.actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 20px; border:1px solid var(--ink); border-radius:8px; font-weight:800; text-decoration:none; transition:.2s ease; }
.primary { gap:24px; color:white; background:var(--ink); }
.primary:hover { background:var(--green); border-color:var(--green); transform:translateY(-2px); }
.secondary:hover { background:white; }
.note { margin:14px 0 0; font-size:.8rem; color:#6a7b74; }
.app-card { overflow:hidden; background:white; border:1px solid var(--line); border-radius:18px; box-shadow:18px 24px 0 var(--mint), 0 20px 60px #10231d1a; transform:rotate(1.5deg); }
.window-bar { display:flex; align-items:center; gap:7px; padding:13px 15px; background:#edf3ef; border-bottom:1px solid var(--line); }
.window-bar span { width:9px; height:9px; border-radius:50%; background:#bac8c0; }
.window-bar b { margin:auto; padding-right:40px; font-size:.75rem; }
.app-content { padding:26px; }
.app-heading { display:flex; justify-content:space-between; font-size:1.15rem; }
.total { color:var(--green); }
.chart { height:130px; margin:24px 0 28px; display:flex; align-items:end; gap:10px; border-bottom:1px solid var(--line); }
.chart i { flex:1; height:var(--h); background:var(--green); border-radius:5px 5px 0 0; opacity:.8; }
.rows > div { display:grid; grid-template-columns:40px 1fr auto; gap:12px; align-items:center; padding:12px 0; border-top:1px solid #e7ece9; }
.rows p { margin:0; display:flex; flex-direction:column; }
.rows small { color:#718179; }
.icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; font-weight:800; }
.food { background:#fff0cb; }.ride { background:#dfeaff; }.fun { background:#f1e1ff; }
.features { border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); }
.features article { padding:52px max(32px,6vw); }
.features article + article { border-left:1px solid var(--line); }
.features span { color:var(--green); font:italic 1.1rem Georgia, serif; }
.features h2 { margin:18px 0 10px; font:700 1.55rem Georgia, serif; }
.features p { margin:0; color:#52645d; }
footer { max-width:1180px; margin:auto; padding:30px 32px; display:flex; justify-content:space-between; gap:20px; font-size:.85rem; font-weight:700; }
@media (max-width:800px) { .hero { padding-top:40px; grid-template-columns:1fr; gap:50px; }.app-card { transform:none; }.features { grid-template-columns:1fr; }.features article + article { border-left:0; border-top:1px solid var(--line); } }
@media (max-width:520px) { .nav,.hero,footer { padding-left:20px; padding-right:20px; }.nav-link { font-size:.78rem; } h1 { font-size:3.25rem; }.actions { flex-direction:column; }.button { width:100%; }.app-content { padding:18px; } footer { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.button { transition:none; } }