@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --yellow:#ffde59; --orange:#f37021; --orange-dark:#d95b16; --teal:#386c6e; --teal-dark:#244c4d; --ink:#212121; --paper:#fffaf0; --white:#fffdf8; --muted:#6d6b63; --line:#e6e0d3; --shell:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans', ui-sans-serif, system-ui, sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
.shell { width:min(calc(100% - 48px), var(--shell)); margin:0 auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:16px; top:-60px; z-index:20; padding:10px 14px; border-radius:8px; background:var(--ink); color:white; }
.skip-link:focus { top:16px; }
.site-header { position:sticky; top:0; z-index:10; background:rgba(255,250,240,.92); border-bottom:1px solid rgba(230,224,211,.8); backdrop-filter:blur(16px); }
.header-inner { min-height:76px; display:flex; align-items:center; gap:34px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700; letter-spacing:-.04em; white-space:nowrap; }
.brand em { color:var(--orange); font-style:normal; }
.brand img { flex:0 0 auto; background:var(--yellow); border-radius:11px; padding:2px; }
.desktop-nav { display:flex; align-items:center; gap:28px; margin-left:auto; font-size:14px; font-weight:600; color:#5f5d55; }
.desktop-nav a { transition:color .2s ease; }
.desktop-nav a:hover,.footer-links a:hover { color:var(--orange); }
.header-actions { display:flex; gap:12px; align-items:center; }
.language-control select { appearance:none; border:1px solid var(--line); background:var(--white); border-radius:8px; padding:9px 28px 9px 11px; color:var(--ink); font:600 12px 'DM Sans',sans-serif; cursor:pointer; }
.header-cta,.button { display:inline-flex; justify-content:center; align-items:center; gap:12px; border-radius:8px; font-size:14px; font-weight:700; transition:transform .2s ease,background .2s ease,box-shadow .2s ease; }
.header-cta { padding:11px 16px; background:var(--ink); color:#fff; }
.header-cta:hover,.button-dark:hover { transform:translateY(-2px); background:#3a3934; }
.hero { position:relative; overflow:hidden; padding:86px 0 108px; background:var(--yellow); }
.hero-grid { display:grid; grid-template-columns:minmax(0, .92fr) minmax(450px, .86fr); align-items:center; gap:80px; }
.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 22px; color:var(--orange-dark); font-size:11px; font-weight:700; letter-spacing:.14em; }
.eyebrow-light { color:#b8e1dc; }
.eyebrow-dot { width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 5px rgba(243,112,33,.12); }
h1,h2,h3 { font-family:'Space Grotesk',sans-serif; letter-spacing:-.06em; line-height:1.05; }
h1 { max-width:680px; margin:0; font-size:clamp(3rem,6vw,5.3rem); font-weight:700; }
.hero-lead { max-width:530px; margin:28px 0 0; color:#4e4937; font-size:18px; line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.button { min-height:48px; padding:13px 18px; }
.button-primary { background:var(--orange); color:#fff; box-shadow:0 7px 0 rgba(33,33,33,.12); }
.button-primary:hover { transform:translateY(-2px); background:var(--orange-dark); box-shadow:0 9px 0 rgba(33,33,33,.12); }
.button-quiet { border:1px solid rgba(33,33,33,.24); color:var(--ink); }
.button-quiet:hover { background:rgba(255,255,255,.28); transform:translateY(-2px); }
.trust-row { display:flex; flex-wrap:wrap; gap:18px; margin-top:32px; color:#5f573f; font-size:12px; font-weight:600; }
.trust-row span { display:inline-flex; align-items:center; gap:6px; }
.mini-icon { display:inline-grid; place-items:center; width:19px; height:19px; border:1px solid rgba(33,33,33,.25); border-radius:50%; font-size:11px; font-style:normal; }
.hero-visual { position:relative; min-height:500px; display:grid; place-items:center; }
.search-panel { position:relative; z-index:2; width:min(100%,440px); padding:17px; border:1px solid rgba(33,33,33,.11); border-radius:14px; background:rgba(255,253,248,.91); box-shadow:20px 25px 0 rgba(33,33,33,.1),0 18px 45px rgba(72,57,12,.13); transform:rotate(2deg); }
.panel-topline,.panel-footer,.progress-label { display:flex; align-items:center; }
.panel-topline { gap:8px; color:#777266; font-size:9px; font-weight:700; letter-spacing:.12em; }
.panel-menu { margin-left:auto; letter-spacing:2px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(243,112,33,.14); }
.search-field { display:flex; align-items:center; gap:10px; margin:14px 0 12px; padding:13px 14px; border:1px solid var(--line); border-radius:8px; background:#fff; color:#57544b; font-size:14px; font-weight:600; }
.search-symbol { color:var(--orange); font-size:24px; line-height:.7; }
.search-filter { margin-left:auto; color:#99958b; }
.map-stage { position:relative; height:270px; overflow:hidden; border-radius:10px; background:#d9ece8; }
.map-stage:before,.map-stage:after { content:""; position:absolute; background:#eff8f2; border-radius:40%; transform:rotate(-12deg); }
.map-stage:before { width:150%; height:48px; top:68px; left:-20%; box-shadow:0 68px 0 #eff8f2,0 136px 0 #eff8f2; }
.map-stage:after { width:50px; height:150%; top:-20%; left:47%; transform:rotate(20deg); box-shadow:-74px 0 0 rgba(239,248,242,.8),74px 0 0 rgba(239,248,242,.8); }
.map-road { position:absolute; z-index:1; height:3px; background:#9ac5bd; border-radius:4px; transform:rotate(-27deg); }
.road-a { width:290px; top:86px; left:86px; }.road-b { width:230px; top:191px; left:-24px; transform:rotate(34deg); }.road-c { width:270px; top:139px; right:-26px; transform:rotate(74deg); }
.map-block { position:absolute; z-index:1; border:1px solid rgba(98,154,145,.25); border-radius:7px; background:rgba(198,224,215,.72); }.block-a { width:88px;height:51px;top:32px;left:28px; }.block-b { width:84px;height:57px;bottom:26px;right:40px; }.block-c { width:55px;height:45px;top:123px;left:181px; }
.map-pin { position:absolute; z-index:3; display:grid; place-items:center; width:32px; height:32px; border-radius:50% 50% 50% 0; background:var(--orange); color:#fff; font-size:14px; transform:rotate(-45deg); box-shadow:0 5px 8px rgba(211,80,20,.22); }.map-pin::first-letter { transform:rotate(45deg); }.pin-a { top:43px;right:72px; }.pin-b { bottom:48px;left:100px; background:var(--teal); }.pin-c { top:119px;right:175px; transform:rotate(-45deg) scale(.78); }
.you-are-here { position:absolute; z-index:3; top:118px; left:218px; width:28px; height:28px; border:2px solid white; border-radius:50%; background:rgba(62,143,137,.28); box-shadow:0 0 0 10px rgba(62,143,137,.13); }.you-are-here span { display:block; width:8px; height:8px; margin:8px; border-radius:50%; background:var(--teal); }
.map-label { position:absolute; z-index:4; left:15px; bottom:14px; display:flex; flex-direction:column; padding:8px 11px; border-radius:7px; background:#fff; box-shadow:0 6px 13px rgba(40,72,67,.15); }.map-label strong { color:var(--orange); font:700 22px 'Space Grotesk'; line-height:1; }.map-label small { color:#6c746f; font-size:9px; }
.panel-footer { justify-content:space-between; gap:10px; padding:13px 2px 1px; color:#7c786f; font-size:11px; }.panel-footer strong { color:var(--ink); font-size:12px; }.panel-footer span:last-child { color:var(--orange); font-size:17px; }
.float-card { position:absolute; z-index:3; display:flex; align-items:center; gap:9px; min-width:165px; padding:10px 12px; border:1px solid rgba(33,33,33,.08); border-radius:10px; background:#fff; box-shadow:0 12px 25px rgba(72,57,12,.13); font-size:11px; }.float-card strong,.float-card small { display:block; }.float-card strong { font-size:11px; }.float-card small { margin-top:2px; color:#8d887d; font-size:10px; }.float-card-one { top:51px; left:0; animation:drift 5s ease-in-out infinite; }.float-card-two { right:-8px; bottom:68px; animation:drift 5s 1.2s ease-in-out infinite; }.float-icon { display:grid; place-items:center; width:29px; height:29px; border-radius:8px; font-size:17px; }.float-icon.orange { background:#ffeadf; color:var(--orange); }.float-icon.teal { background:#e0f1ee; color:var(--teal); }.float-badge { margin-left:auto; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--orange); color:#fff; font-size:10px; }
.visual-orbit { position:absolute; border:1px solid rgba(56,108,110,.18); border-radius:50%; }.orbit-one { width:510px;height:510px; }.orbit-two { width:630px;height:630px; border-style:dashed; border-color:rgba(243,112,33,.17); }
.hero-scribble { position:absolute; right:8%; bottom:22px; color:rgba(56,108,110,.36); font-size:46px; transform:rotate(12deg); }
.coverage-strip { border-bottom:1px solid rgba(56,108,110,.16); background:var(--teal); color:#fff; }.coverage-inner { min-height:78px; display:flex; align-items:center; gap:24px; }.coverage-inner > div { display:flex; align-items:center; gap:11px; }.coverage-inner strong { font-size:13px; }.coverage-mark { display:grid; place-items:center; width:33px; height:33px; border-radius:50%; background:var(--yellow); color:var(--ink); font:700 11px 'Space Grotesk'; }.coverage-mark.france { background:#f5a5a5; }.coverage-line { width:44px; height:1px; background:rgba(255,255,255,.35); }.coverage-note { margin-left:auto; color:#c7dfdc; font-size:12px; }
.section { padding:125px 0; }.section-heading { max-width:710px; }.section-heading h2,.pass-copy h2,.pro-copy h2,.download-copy h2 { margin:0; font-size:clamp(2.3rem,4.5vw,4rem); }.section-heading > p:last-child { margin:22px 0 0; color:var(--muted); font-size:17px; }.feature-grid { display:grid; grid-template-columns:1.08fr 1fr 1fr; gap:16px; margin-top:58px; }.feature-card { position:relative; min-height:330px; overflow:hidden; padding:28px; border:1px solid var(--line); border-radius:14px; background:#fffdf8; }.feature-card-tall { min-height:390px; background:var(--orange); color:#fff; border-color:var(--orange); }.feature-number { color:#a6a198; font:600 12px 'Space Grotesk'; }.feature-card-tall .feature-number { color:#ffd5bd; }.feature-icon { display:grid; place-items:center; width:46px; height:46px; margin-top:42px; border-radius:12px; font-size:25px; }.icon-search { background:#ffeadf; color:var(--orange); }.icon-heart { background:#e7f3ef; color:var(--teal); }.icon-bell { background:#fff1bb; color:#9b7400; }.feature-card h3 { max-width:280px; margin:21px 0 0; font-size:24px; }.feature-card p { max-width:320px; margin:13px 0 0; color:var(--muted); font-size:14px; line-height:1.7; }.feature-card-tall p { color:#fff0e7; }.mini-list { position:absolute; left:28px; right:28px; bottom:25px; display:grid; gap:10px; border-top:1px solid rgba(255,255,255,.28); padding-top:15px; font-size:12px; font-weight:600; }.mini-list span { display:flex; align-items:center; gap:8px; }.mini-list i { display:grid; place-items:center; width:20px; height:20px; border-radius:6px; background:rgba(255,255,255,.2); font-style:normal; }.feature-line-art { position:absolute; right:17px; bottom:19px; color:#d6ebe5; font:700 45px 'Space Grotesk'; letter-spacing:-14px; transform:rotate(-10deg); opacity:.7; }.feature-line-art span { color:#f4b5a7; }.notification-demo { position:absolute; right:20px; bottom:20px; width:148px; padding:12px; border:1px solid #f1e2a9; border-radius:9px; background:#fff8d9; box-shadow:0 8px 20px rgba(93,81,12,.08); }.notification-demo span,.notification-demo small { display:block; color:#9b9173; font-size:9px; }.notification-demo b { display:block; margin:9px 0 3px; font-size:10px; }
.pass-section { overflow:hidden; padding:120px 0; background:var(--teal-dark); color:#fff; }.pass-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:100px; }.pass-copy h2 { max-width:520px; }.pass-copy > p:not(.eyebrow) { max-width:460px; margin:25px 0 0; color:#c8dfdb; font-size:17px; line-height:1.7; }.text-link { display:inline-flex; gap:10px; align-items:center; margin-top:30px; font-size:14px; font-weight:700; }.light-link { color:var(--yellow); }.light-link:hover { color:#fff; }.passport-card { position:relative; min-height:355px; padding:27px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:#fbf3dd; color:var(--ink); box-shadow:18px 20px 0 rgba(255,222,89,.15); transform:rotate(3deg); }.passport-card:after { content:""; position:absolute; width:220px; height:220px; right:-90px; top:-100px; border:1px solid rgba(56,108,110,.15); border-radius:50%; box-shadow:0 0 0 27px rgba(56,108,110,.05),0 0 0 54px rgba(56,108,110,.04); }.passport-top { display:flex; justify-content:space-between; color:var(--teal); font:600 11px 'Space Grotesk'; letter-spacing:.15em; }.passport-top strong { font-size:22px; letter-spacing:.04em; }.passport-stamp { display:grid; place-items:center; width:45px;height:45px;border:1px dashed var(--orange);border-radius:50%;color:var(--orange);font-size:25px;transform:rotate(-18deg); }.passport-progress { margin-top:62px; }.progress-label { justify-content:space-between; color:#8d887b; font:600 10px 'Space Grotesk'; letter-spacing:.12em; }.progress-label strong { color:var(--orange); font-size:20px; letter-spacing:0; }.progress-bar { height:8px; margin-top:10px; overflow:hidden; border-radius:10px; background:#e4dbc4; }.progress-bar span { display:block; width:68%; height:100%; border-radius:10px; background:var(--orange); }.passport-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:46px; padding-top:20px; border-top:1px solid #ded3ba; }.passport-stats strong,.passport-stats span { display:block; }.passport-stats strong { color:var(--teal); font:700 27px 'Space Grotesk'; }.passport-stats span { margin-top:4px; color:#8d887b; font-size:10px; }.passport-footer { position:absolute; right:27px; bottom:24px; left:27px; display:flex; align-items:center; gap:9px; color:#6f6c63; font-size:11px; }.passport-footer > span:nth-child(2) { flex:1; }.passport-footer > span:last-child { color:var(--orange); font-size:18px; }.passport-avatar { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--yellow); color:var(--teal); }
.comments-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:110px; }.comment-wall { position:relative; min-height:370px; border-radius:14px; background:#f5e6be; background-image:radial-gradient(#e9d49b 1px,transparent 1px); background-size:18px 18px; }.comment-note { position:absolute; width:205px; padding:20px 18px 17px; border-radius:8px; background:#fff; box-shadow:0 9px 19px rgba(91,72,23,.1); transform:rotate(-5deg); }.comment-note span { color:var(--orange); font:700 35px Georgia; line-height:.6; }.comment-note p { margin:10px 0 13px; font-size:13px; font-weight:600; line-height:1.45; }.comment-note small { color:#8f897a; font-size:10px; }.note-one { left:16%; top:14%; }.note-two { right:11%; top:39%; transform:rotate(5deg); }.note-three { left:22%; bottom:8%; transform:rotate(-2deg); }.community-points { display:grid; gap:12px; margin-top:29px; color:var(--teal); font-size:13px; font-weight:700; }.community-points > span { display:flex; gap:9px; align-items:center; }.community-points > span > span { color:var(--ink); }
.pro-section { padding:74px 0; background:var(--yellow); }.pro-grid { position:relative; display:grid; grid-template-columns:1.02fr .84fr auto; align-items:center; gap:45px; }.pro-badge { position:absolute; top:-28px; left:0; display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--orange); color:#fff; font:700 11px 'Space Grotesk'; transform:rotate(-12deg); }.pro-copy h2 { max-width:510px; font-size:clamp(2.1rem,3.5vw,3.2rem); }.pro-copy > p:not(.eyebrow) { max-width:480px; margin:19px 0 0; color:#5a5136; font-size:14px; }.pro-benefits { display:grid; gap:15px; padding-left:25px; border-left:1px solid rgba(33,33,33,.2); font-size:13px; font-weight:700; }.pro-benefits div { display:flex; gap:10px; align-items:center; }.pro-check { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; background:var(--teal); color:#fff; font-size:12px; }.button-dark { background:var(--ink); color:#fff; white-space:nowrap; }
.download-section { padding:100px 0 110px; }.download-inner { display:flex; align-items:end; justify-content:space-between; gap:50px; padding:55px 60px; border:1px solid var(--line); border-radius:14px; background:#fffdf8; }.download-copy { max-width:570px; }.download-copy h2 { font-size:clamp(2.2rem,4vw,3.8rem); }.download-copy > p:last-child { margin:18px 0 0; color:var(--muted); font-size:16px; }.store-buttons { display:flex; flex-wrap:wrap; gap:10px; }.store-button { min-width:160px; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:9px; background:var(--ink); color:#fff; transition:transform .2s ease,background .2s ease; }.store-button:hover { transform:translateY(-2px); background:var(--teal); }.store-symbol { display:grid; place-items:center; width:24px; height:24px; font-size:18px; }.store-button small,.store-button strong { display:block; line-height:1.1; }.store-button small { color:#c7c7c2; font-size:9px; }.store-button strong { margin-top:4px; font:600 14px 'Space Grotesk'; }
.site-footer { padding:29px 0 22px; background:var(--ink); color:#fff; }.footer-top,.footer-bottom { display:flex; align-items:center; }.footer-top { gap:30px; }.footer-brand { color:#fff; }.footer-top > p { margin:0; color:#a9aaa4; font-size:13px; }.footer-links { display:flex; gap:20px; margin-left:auto; color:#d0d0c9; font-size:12px; }.footer-bottom { justify-content:space-between; margin-top:28px; padding-top:17px; border-top:1px solid rgba(255,255,255,.13); color:#80827c; font-size:11px; }
.reveal { opacity:0; transform:translateY(20px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1); }.reveal.is-visible { opacity:1; transform:translateY(0); }.reveal-delay { transition-delay:.14s; }.reveal-delay-short { transition-delay:.07s; }
@keyframes drift { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-9px) rotate(1deg); } }
@media (max-width:960px) { .desktop-nav { display:none; }.hero-grid { grid-template-columns:1fr; gap:50px; }.hero-copy { max-width:720px; }.hero-visual { min-height:450px; max-width:650px; }.coverage-inner { flex-wrap:wrap; padding-top:17px; padding-bottom:17px; }.coverage-note { width:100%; margin-left:0; }.feature-grid { grid-template-columns:1fr 1fr; }.feature-card-tall { grid-row:span 2; }.pass-grid,.comments-grid { gap:60px; }.pro-grid { grid-template-columns:1fr 1fr; }.pro-benefits { padding-left:0; border-left:0; }.pro-grid > .button { grid-column:2; justify-self:start; }.download-inner { align-items:start; flex-direction:column; } }
@media (max-width:640px) { .shell { width:min(calc(100% - 32px), var(--shell)); }.header-inner { min-height:68px; gap:10px; }.brand { font-size:16px; }.brand img { width:36px; height:36px; }.header-cta { display:none; }.language-control select { padding:8px 25px 8px 8px; }.hero { padding:59px 0 74px; }.hero-grid { gap:34px; }.hero-lead { font-size:16px; }.trust-row { gap:12px; }.hero-visual { min-height:375px; margin:0 -4px; }.search-panel { width:calc(100% - 30px); }.map-stage { height:218px; }.you-are-here { top:92px; left:48%; }.float-card { min-width:145px; }.float-card-one { top:14px; left:-2px; }.float-card-two { right:-3px; bottom:17px; }.orbit-one { width:390px; height:390px; }.orbit-two { width:465px; height:465px; }.hero-scribble { right:4%; bottom:8px; font-size:32px; }.coverage-inner { gap:13px; }.coverage-line { width:20px; }.coverage-inner strong { font-size:11px; }.section,.pass-section { padding:80px 0; }.section-heading h2,.pass-copy h2 { font-size:2.45rem; }.feature-grid { grid-template-columns:1fr; margin-top:38px; }.feature-card,.feature-card-tall { min-height:330px; grid-row:auto; }.feature-card-tall { min-height:365px; }.pass-grid,.comments-grid { grid-template-columns:1fr; gap:47px; }.passport-card { width:calc(100% - 10px); min-height:325px; }.comments-grid { gap:42px; }.comment-wall { min-height:330px; }.comment-note { width:175px; padding:16px 14px; }.note-one { left:5%; }.note-two { right:4%; }.note-three { left:13%; }.pro-section { padding:68px 0; }.pro-grid { grid-template-columns:1fr; gap:26px; }.pro-badge { top:-21px; }.pro-benefits { gap:12px; }.pro-grid > .button { grid-column:auto; justify-self:stretch; }.download-section { padding:70px 0; }.download-inner { padding:34px 24px; gap:30px; }.store-buttons { width:100%; }.store-button { flex:1; min-width:138px; }.footer-top { align-items:flex-start; flex-direction:column; gap:17px; }.footer-links { flex-wrap:wrap; margin-left:0; gap:12px 19px; }.footer-bottom { align-items:flex-start; flex-direction:column; gap:7px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; }.float-card { animation:none; }.button,.store-button { transition:none; } }