:root { --ink:#102a43; --muted:#58758d; --blue:#157fca; --sky:#dff6ff; --surface:#f7fbff; --line:#d9e9f3; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--surface); font-family:"Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x:hidden; }
.page-glow { position:absolute; z-index:-1; border-radius:999px; filter:blur(4px); pointer-events:none; }
.glow-one { width:46rem; height:46rem; top:-22rem; right:-18rem; background:#d8f4ff; }
.glow-two { width:36rem; height:36rem; top:48rem; left:-27rem; background:#e3f8ff; }
.site-header, main, footer { width:min(1160px, calc(100% - 48px)); margin-inline:auto; }
.site-header { height:92px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-weight:750; font-size:22px; letter-spacing:-.035em; text-decoration:none; }
.brand img { width:36px; height:36px; border-radius:50%; background:#eaf8ff; }
nav { display:flex; align-items:center; gap:24px; }
nav a { color:var(--muted); font-size:14px; font-weight:600; text-decoration:none; }
.language { width:38px; height:32px; border:1px solid var(--line); border-radius:999px; color:var(--ink); background:rgba(255,255,255,.75); font:700 12px inherit; cursor:pointer; }
.hero { min-height:650px; display:grid; grid-template-columns:1.02fr .98fr; gap:36px; align-items:center; padding:52px 0 82px; }
.eyebrow { margin:0 0 14px; color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.12em; }
h1, h2, h3, p { margin-top:0; }
h1 { max-width:650px; margin-bottom:20px; font-size:clamp(48px, 6vw, 76px); line-height:.98; letter-spacing:-.062em; }
.lede { max-width:570px; margin-bottom:32px; color:var(--muted); font-size:18px; line-height:1.55; }
.beta-panel { max-width:540px; padding:24px; border:1px solid rgba(115,188,225,.38); border-radius:22px; background:rgba(255,255,255,.8); box-shadow:0 16px 36px rgba(21,86,118,.08); backdrop-filter:blur(16px); }
.beta-kicker { margin-bottom:6px; color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.12em; }
.beta-panel h2 { margin-bottom:8px; font-size:25px; letter-spacing:-.035em; }
.beta-copy { margin-bottom:18px; color:var(--muted); font-size:15px; line-height:1.45; }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0 20px; border:0; border-radius:14px; font:700 15px inherit; text-decoration:none; }
.button-primary { color:#fff; background:var(--blue); box-shadow:0 10px 20px rgba(21,127,202,.24); }
.button-muted { width:100%; color:#69859b; background:#eff6fa; cursor:not-allowed; }
.fine-print { margin:14px 0 0; color:#71889b; font-size:12px; line-height:1.4; }
.is-hidden { display:none; }
.hero-art { min-height:590px; position:relative; display:grid; place-items:center; }
.phone-shadow { position:absolute; width:310px; height:510px; border-radius:42%; background:rgba(27,117,169,.22); filter:blur(32px); transform:translateY(36px) rotate(-5deg); }
.phone { width:288px; height:580px; position:relative; z-index:1; padding:9px; border:4px solid #0f1e2a; border-radius:44px; background:#192d3c; box-shadow:0 24px 44px rgba(16,42,67,.25), inset 0 0 0 1px rgba(255,255,255,.16); transform:rotate(4deg); }
.phone::before, .phone::after { position:absolute; content:""; background:#253d4d; border-radius:4px; }
.phone::before { width:4px; height:56px; left:-8px; top:132px; }.phone::after { width:4px; height:78px; right:-8px; top:168px; }
.phone-screen { position:relative; width:100%; height:100%; overflow:hidden; border-radius:32px; background:linear-gradient(155deg,#dff8e7 0 13%,#edf7f0 13% 33%,#f4f8fb 33% 100%); }
.dynamic-island { position:absolute; z-index:3; top:10px; left:50%; width:105px; height:25px; border-radius:99px; background:#05080b; transform:translateX(-50%); }
.map-route { position:absolute; height:13px; border:4px solid rgba(50,157,202,.55); border-radius:100%; transform:rotate(-27deg); }.route-one { width:330px; top:180px; left:-58px; }.route-two { width:380px; top:310px; right:-150px; border-color:rgba(156,109,204,.34); transform:rotate(41deg); }
.map-label { position:absolute; padding:6px 9px; border:1px solid rgba(129,162,177,.22); border-radius:12px; color:#385769; background:rgba(255,255,255,.72); font-size:11px; font-weight:700; box-shadow:0 5px 12px rgba(45,91,114,.1); }.label-one { top:96px; left:22px; }.label-two { top:208px; right:17px; }.label-three { top:363px; left:32px; }
.cool-pin { position:absolute; display:grid; width:39px; height:39px; place-items:center; border:4px solid white; border-radius:50% 50% 50% 10%; color:#fff; background:#32b8df; box-shadow:0 6px 12px rgba(28,109,145,.3); transform:rotate(-45deg); }.cool-pin::first-letter { transform:rotate(45deg); }.pin-one { top:140px; left:94px; }.pin-two { top:265px; right:60px; background:#228ed2; }.pin-three { top:414px; left:115px; }.pin-four { top:464px; right:88px; background:#56c693; }
.map-card { position:absolute; right:16px; bottom:73px; left:16px; display:grid; grid-template-columns:14px 1fr; column-gap:9px; padding:15px; border:1px solid rgba(255,255,255,.75); border-radius:18px; background:rgba(255,255,255,.88); box-shadow:0 12px 24px rgba(38,86,108,.17); font-size:12px; }.map-card-dot { width:11px; height:11px; margin-top:3px; border-radius:50%; background:#52bf78; }.map-card strong { font-size:13px; }.map-card small { grid-column:2; color:#638093; font-size:11px; }
.map-search { position:absolute; right:16px; bottom:16px; left:16px; padding:13px 14px; border-radius:15px; color:#7891a1; background:rgba(255,255,255,.78); font-size:13px; }
.how-it-works { padding:92px 0 110px; }.how-it-works h2 { max-width:590px; margin-bottom:42px; font-size:clamp(38px,4.5vw,58px); line-height:1; letter-spacing:-.055em; }
.feature-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }.feature-grid article { min-height:230px; padding:25px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.66); }.feature-number { display:block; margin-bottom:46px; color:#74bddd; font-size:13px; font-weight:800; }.feature-grid h3 { margin-bottom:9px; font-size:21px; letter-spacing:-.03em; }.feature-grid p { margin-bottom:0; color:var(--muted); font-size:14px; line-height:1.5; }
footer { display:flex; justify-content:space-between; gap:16px; padding:24px 0 36px; border-top:1px solid var(--line); color:#7891a1; font-size:13px; }
footer a { color:inherit; text-decoration:none; } footer a:hover { color:var(--blue); }
.footer-links { display:flex; gap:16px; }
.footer-preferences, .text-link-button { appearance:none; margin:0; padding:0; border:0; color:inherit; background:transparent; font:inherit; cursor:pointer; }
.footer-preferences:hover, .text-link-button:hover { color:var(--blue); }
.text-link-button { color:var(--blue); font-weight:650; text-decoration:underline; }
.analytics-consent { position:fixed; z-index:10; right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom)); left:max(20px, env(safe-area-inset-left)); width:min(620px, calc(100% - 40px)); margin-left:auto; padding:18px; border:1px solid rgba(115,188,225,.48); border-radius:20px; color:var(--ink); background:rgba(255,255,255,.96); box-shadow:0 20px 50px rgba(16,42,67,.2); backdrop-filter:blur(18px); }
.analytics-consent-copy strong { display:block; margin-bottom:6px; font-size:15px; letter-spacing:-.015em; }.analytics-consent-copy p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.analytics-consent-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:14px; }.analytics-button { min-height:38px; padding:0 13px; border-radius:11px; font:700 13px inherit; cursor:pointer; }.analytics-button-primary { border:1px solid var(--blue); color:#fff; background:var(--blue); }.analytics-button-secondary { border:1px solid var(--line); color:var(--ink); background:#fff; }
.legal { min-height:100vh; }.legal-main { width:min(760px, calc(100% - 48px)); margin:0 auto; padding:54px 0 96px; }.legal-main h1 { max-width:700px; margin-bottom:20px; font-size:clamp(42px, 6vw, 64px); }.legal-intro { max-width:650px; margin-bottom:34px; color:var(--muted); font-size:18px; line-height:1.55; }.legal-card { padding:28px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.72); box-shadow:0 16px 36px rgba(21,86,118,.06); }.legal-card + .legal-card { margin-top:16px; }.legal-card h2 { margin-bottom:12px; font-size:23px; letter-spacing:-.035em; }.legal-card h3 { margin:22px 0 8px; font-size:17px; }.legal-card p, .legal-card li { color:var(--muted); line-height:1.58; }.legal-card p:last-child { margin-bottom:0; }.legal-card ul { margin:0; padding-left:20px; }.legal-card a { color:var(--blue); font-weight:650; }.support-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
@media (max-width:820px) { .site-header, main, footer { width:min(100% - 32px, 590px); }.site-header { height:76px; } nav a { display:none; }.hero { grid-template-columns:1fr; padding-top:30px; text-align:left; }.hero-art { min-height:490px; order:-1; }.phone { width:240px; height:482px; transform:rotate(2deg); }.phone-shadow { width:260px; height:420px; }.lede { font-size:16px; }.feature-grid { grid-template-columns:1fr; }.feature-grid article { min-height:0; }.feature-number { margin-bottom:24px; }.legal-main { width:min(100% - 32px, 590px); padding-top:30px; }.legal-card { padding:22px; } footer { align-items:flex-start; flex-wrap:wrap; }.analytics-consent { width:calc(100% - 32px); right:16px; bottom:16px; left:16px; } }
@media (max-width:420px) { h1 { font-size:48px; }.hero { gap:16px; }.beta-panel { padding:20px; }.hero-art { min-height:435px; }.phone { width:215px; height:432px; }.phone-screen { border-radius:25px; }.map-card { bottom:65px; }.map-search { bottom:13px; }.feature-grid { gap:12px; } }