.landing-page { margin:-2.5rem calc(50% - 50vw) -2.5rem; overflow:hidden; }
.landing-page h1,.landing-page h2,.landing-page h3 { color:#102a2a; }
.landing-hero { min-height:720px; display:grid; grid-template-columns:minmax(0, .9fr) minmax(520px, 1.1fr); align-items:center; gap:clamp(2rem,6vw,7rem); padding:clamp(4.5rem,8vw,8rem) max(5vw,calc((100vw - 1200px)/2)); background:radial-gradient(circle at 86% 12%,rgba(217,246,81,.32),transparent 28%),linear-gradient(145deg,#f8faf4 0%,#eef3ea 100%); }
.hero-copy { max-width:610px; position:relative; z-index:2; }
.hero-copy h1 { font-size:clamp(3.4rem,6.6vw,6.7rem); line-height:.91; letter-spacing:-.065em; margin:.35rem 0 1.5rem; }
.hero-lead { max-width:590px; color:#506464; font-size:clamp(1.1rem,1.5vw,1.32rem); line-height:1.65; }
.hero-actions { display:flex; gap:1.3rem; align-items:center; margin:2rem 0; }
.landing-primary { box-shadow:0 12px 32px rgba(16,42,42,.15); padding:.9rem 1.4rem; }
.text-link { font-weight:750; text-decoration:none; }
.trust-list { display:flex; flex-wrap:wrap; gap:1.2rem; padding:0; margin:2.2rem 0 0; list-style:none; color:#506464; font-size:.92rem; }
.trust-list i { display:inline-grid; place-items:center; width:1.35rem; height:1.35rem; margin-right:.3rem; color:#173b38; background:#d9f651; border-radius:50%; font-style:normal; font-weight:900; }
.product-preview { min-width:0; transform:perspective(1200px) rotateY(-4deg) rotateX(1deg); filter:drop-shadow(0 30px 45px rgba(24,54,52,.2)); }
.preview-window { overflow:hidden; border:1px solid rgba(16,42,42,.12); border-radius:22px; background:#fff; }
.preview-topbar { height:48px; display:flex; align-items:center; gap:7px; padding:0 17px; color:#6b7b7a; background:#fff; border-bottom:1px solid #e8ece6; font-size:.78rem; }
.preview-topbar span { width:8px; height:8px; border-radius:50%; background:#dce2dc; }
.preview-topbar strong { margin-left:10px; }
.preview-body { display:grid; grid-template-columns:64px 1fr; min-height:510px; }
.preview-sidebar { display:flex; flex-direction:column; align-items:center; gap:25px; padding:18px 0; background:#102a2a; }
.preview-brand { display:grid; place-items:center; width:31px; height:31px; border-radius:9px; color:#102a2a; background:#d9f651; font-weight:900; }
.preview-sidebar i { display:block; width:20px; height:6px; border-radius:3px; background:#44615e; }
.preview-sidebar i:first-of-type { background:#d9f651; }
.preview-map { position:relative; overflow:hidden; background:#e9efe8; }
.preview-map:before,.preview-map:after { content:""; position:absolute; inset:0; opacity:.55; background-image:linear-gradient(33deg,transparent 48%,#d2ddd2 49%,#d2ddd2 50%,transparent 51%),linear-gradient(103deg,transparent 48%,#d7e1d7 49%,#d7e1d7 50%,transparent 51%); background-size:150px 110px,190px 140px; }
.preview-map svg { position:absolute; inset:0; width:100%; height:100%; z-index:2; }
.terrain { position:absolute; z-index:1; border:1px solid #cad9c8; border-radius:48% 52% 58% 42%; background:#dfeadc; }
.terrain-one { width:260px; height:210px; right:5%; top:6%; transform:rotate(20deg); }
.terrain-two { width:320px; height:260px; left:0; bottom:-8%; transform:rotate(-12deg); }
.road { fill:none; stroke:#fff; stroke-width:14; stroke-linecap:round; opacity:.9; }
.route { fill:none; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 2px 2px rgba(16,42,42,.15)); }
.route-run { stroke:#f24e4e; }.route-bike { stroke:#3b82f6; }.route-hike { stroke:#22a866; }
.pin { stroke:#fff; stroke-width:4; }.run-pin { fill:#f24e4e; }
.map-stat { position:absolute; z-index:3; top:20px; left:20px; display:flex; flex-direction:column; padding:13px 16px; border-radius:12px; background:rgba(255,255,255,.92); box-shadow:0 8px 20px rgba(16,42,42,.1); }
.map-stat strong { font-size:1.5rem; }.map-stat span { color:#687b79; font-size:.72rem; }
.map-legend { position:absolute; z-index:3; display:flex; flex-wrap:wrap; gap:12px; right:18px; bottom:18px; padding:11px 13px; border-radius:10px; background:rgba(255,255,255,.94); font-size:.7rem; font-weight:700; }
.map-legend span { display:flex; align-items:center; gap:5px; }.map-legend i,.activity-mini>i { display:block; width:8px; height:8px; border-radius:50%; }
.run-dot { background:#f24e4e; }.bike-dot { background:#3b82f6; }.hike-dot { background:#22a866; }
.landing-section { padding:clamp(5rem,9vw,9rem) max(5vw,calc((100vw - 1200px)/2)); }
.section-heading { max-width:720px; margin:0 auto 3.5rem; text-align:center; }
.section-heading h2,.showcase-copy h2,.privacy-band h2,.landing-cta h2 { font-size:clamp(2.4rem,4vw,4rem); line-height:1; letter-spacing:-.05em; }
.section-heading>p:last-child { color:#627474; font-size:1.1rem; line-height:1.6; }
.step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.step-grid article { position:relative; min-height:300px; padding:2rem; background:#fff; border:1px solid #e2e8e0; border-radius:20px; box-shadow:0 16px 40px rgba(16,42,42,.045); }
.step-grid article>span { position:absolute; right:1.5rem; top:1.35rem; color:#a8b5aa; font-weight:800; }
.step-grid h3 { margin:1.5rem 0 .65rem; font-size:1.3rem; }.step-grid p { color:#627474; line-height:1.65; }
.feature-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:16px; color:#102a2a; background:#d9f651; font-size:1.7rem; font-weight:900; }
.color-feature { display:flex; gap:4px; }.color-feature i { width:9px; height:28px; border-radius:5px; background:#ef4444; }.color-feature i:nth-child(2){background:#3b82f6;height:38px}.color-feature i:nth-child(3){background:#22a866;height:22px}
.map-feature { background:#d8e8ff; color:#2466b1; }
.feature-showcase { padding-top:2rem; }
.showcase-card { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,8vw,8rem); align-items:center; padding:clamp(2.5rem,6vw,5.5rem); border-radius:32px; color:#fff; background:#102a2a; overflow:hidden; }
.showcase-copy h2 { color:#fff; }.showcase-copy>ul { display:grid; gap:1.4rem; padding:0; list-style:none; }
.showcase-copy li { display:grid; grid-template-columns:28px 1fr; gap:12px; }.showcase-copy li>i { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; color:#102a2a; background:#d9f651; font-style:normal; font-weight:900; }
.showcase-copy li span { display:flex; flex-direction:column; gap:5px; color:#b8c9c5; line-height:1.5; }.showcase-copy li strong { color:#fff; }
.activity-stack { display:grid; gap:12px; transform:rotate(2deg); }
.activity-mini,.mini-total { display:flex; align-items:center; gap:14px; padding:18px; color:#102a2a; background:#fff; border-radius:15px; box-shadow:0 18px 34px rgba(0,0,0,.18); }
.activity-mini>i { width:13px; height:43px; border-radius:7px; }.activity-mini div { display:flex; flex:1; flex-direction:column; gap:4px; }.activity-mini span { color:#6c7c7a; font-size:.82rem; }.activity-mini b { font-size:1.2rem; }
.mini-total { display:grid; grid-template-columns:1fr auto; margin-top:8px; }.mini-total>span { color:#6c7c7a; }.mini-total>strong { font-size:1.7rem; }.mini-total>div { grid-column:1/-1; height:7px; border-radius:8px; background:#edf1e9; overflow:hidden; }.mini-total>div i { display:block; width:72%; height:100%; background:#d9f651; }
.privacy-band { display:grid; grid-template-columns:1.1fr 1fr; gap:3rem 6rem; align-items:end; padding:clamp(5rem,8vw,8rem) max(5vw,calc((100vw - 1200px)/2)); background:#d9f651; }
.privacy-band h2 { margin-bottom:0; }.privacy-band>p { color:#334c49; line-height:1.7; }.privacy-band>a { grid-column:2; font-weight:800; text-decoration:none; }
.landing-cta { display:flex; flex-direction:column; align-items:center; padding:clamp(5rem,8vw,8rem) 5vw; text-align:center; background:#f7f8f3; }
.landing-cta h2 { max-width:700px; margin:1.4rem 0 .8rem; }.landing-cta p { max-width:560px; color:#627474; font-size:1.1rem; }.landing-cta>.button { margin:1rem 0 1.5rem; }.landing-cta>span:last-child { color:#627474; }
@media (max-width:950px) { .landing-hero { grid-template-columns:1fr; padding-top:5rem; }.hero-copy { max-width:760px; }.product-preview { max-width:760px; transform:none; }.step-grid { grid-template-columns:1fr; }.step-grid article { min-height:0; }.showcase-card { grid-template-columns:1fr; }.activity-stack { transform:none; }.privacy-band { grid-template-columns:1fr; }.privacy-band>a { grid-column:auto; } }
@media (max-width:620px) { .landing-page { margin-top:-1.5rem; }.landing-hero { min-height:auto; padding:3.5rem 1.1rem 4.5rem; }.hero-copy h1 { font-size:clamp(3.1rem,15vw,4.4rem); }.hero-actions { align-items:stretch; flex-direction:column; }.hero-actions .button { text-align:center; }.trust-list { display:grid; gap:.75rem; }.product-preview { margin-right:-5rem; }.preview-body { grid-template-columns:44px 1fr; min-height:360px; }.preview-sidebar { gap:18px; }.preview-map svg { min-width:500px; right:auto; }.map-legend { left:12px; right:auto; }.landing-section { padding:4.5rem 1.1rem; }.showcase-card { padding:2rem 1.1rem; border-radius:22px; }.activity-mini { padding:14px 12px; }.privacy-band { padding:4.5rem 1.1rem; }.landing-cta { padding:4.5rem 1.1rem; } }