/* CycleHub SA — coming soon page */
:root{
  --ink:#111827;--muted:#6b7280;--border:#e5e7eb;
  --green:#16a34a;--green-deep:#15803d;--green-50:#f0fdf4;--green-100:#dcfce7;--green-900:#14532d;
  --emerald:#10b981;--dark:#0a0f0d;--dark-2:#101714;--dark-border:#2a3530;
  --on-dark:#f2f7f4;--on-dark-muted:#c3cfc8;--on-dark-faint:#8fa39a;
  --orange:#ea580c;--teal:#0d9488;--violet:#7c3aed;--red:#dc2626;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:var(--dark);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--green)}a:hover{color:var(--green-deep)}
:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
input,button{font-family:inherit}
img,svg{display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* ---- Dark hero ---- */
.hero-zone{background:var(--dark);color:var(--on-dark);position:relative;overflow:hidden}
.atmo{position:absolute;inset:0;background:
  repeating-radial-gradient(circle at 75% 15%,rgba(16,185,129,.05) 0 1px,transparent 1px 90px),
  repeating-radial-gradient(circle at 15% 85%,rgba(16,185,129,.04) 0 1px,transparent 1px 70px)}
.route-svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:50%;opacity:.5}
.route-svg path{stroke-dasharray:2400;stroke-dashoffset:2400;animation:routeDraw 5s ease-out .4s forwards}
@keyframes routeDraw{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

.site-header{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px}
.brand{display:flex;align-items:center;gap:10px}
.brand strong{font-size:17px;font-weight:600;letter-spacing:-.01em}
.status-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;border:1px solid rgba(16,185,129,.35);background:rgba(16,185,129,.08);color:#6ee7b7;font-size:13px;font-weight:500}
.status-pill .dot{width:7px;height:7px;border-radius:999px;background:var(--emerald)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 18px;border-radius:10px;border:none;background:var(--green-deep);color:#fff;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer}
.btn-lg{min-height:48px;padding:0 26px;font-size:16px}
.push{margin-left:auto}

.hero{position:relative;display:flex;gap:48px;flex-wrap:wrap;align-items:center;padding-top:56px;padding-bottom:72px}
.hero-copy{flex:1 1 420px;min-width:280px}
h1{margin:0;max-width:15ch;font-size:clamp(36px,5.5vw,58px);line-height:1.05;font-weight:600;letter-spacing:-.02em}
.hero-sub{margin:22px 0 0;max-width:52ch;font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--on-dark-muted)}
.hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:32px}
.hero-note,.hero-tease{font-size:14px;color:var(--on-dark-faint)}
.hero-tease{margin:36px 0 0;max-width:48ch}

/* ---- Phone preview ---- */
.phone-wrap{flex:0 1 300px;margin:0 auto}
.phone{width:290px;border-radius:42px;background:#0b0b0b;border:1px solid var(--dark-border);padding:9px;box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 6px rgba(16,185,129,.05)}
.screen{border-radius:34px;background:#f4f5f7;overflow:hidden;display:flex;flex-direction:column;position:relative}
.notch{display:flex;justify-content:center;padding-top:8px}
.notch span{width:84px;height:20px;border-radius:999px;background:#0b0b0b}
.app-top{padding:16px 14px 8px;display:flex;align-items:center;gap:8px}
.avatar{width:34px;height:34px;border-radius:999px;background:#2563eb;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.app-top .who{flex:1}
.app-top .hi{font-size:9px;color:var(--muted)}
.app-top .nm{font-size:12px;font-weight:700;color:var(--ink)}
.icn{width:28px;height:28px;border-radius:999px;background:#fff;display:inline-flex;align-items:center;justify-content:center}
.icn-sos{border:1.5px solid var(--red);font-size:8px;font-weight:700;color:var(--red)}
.app-actions{margin:4px 12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.act{border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:4px}
.act b{font-size:12px;font-weight:700;line-height:1.2}
.act small{font-size:9px;line-height:1.4}
.act-green{background:var(--green-deep);color:#fff}.act-green small{opacity:.9}
.act-white{background:#fff;border:1px solid var(--border)}.act-white b{color:var(--ink)}.act-white small{color:var(--muted)}
.booking{margin:8px 12px 0;border-radius:14px;background:#fff;border:1px solid var(--border);overflow:hidden}
.booking-head{display:flex;align-items:center;justify-content:space-between;background:var(--green-100);padding:7px 10px}
.booking-head .tag{display:inline-flex;align-items:center;gap:5px;font-size:8px;font-weight:700;color:var(--green-deep);letter-spacing:.05em}
.booking-head .tag i{width:5px;height:5px;border-radius:999px;background:var(--green)}
.booking-head time{font-size:8.5px;font-weight:700;color:var(--ink)}
.booking-row{display:flex;align-items:center;gap:10px;padding:10px}
.booking-row .mc{font-size:11px;font-weight:700;color:var(--orange)}
.booking-row .t{flex:1}
.booking-row .t b{font-size:11px;font-weight:700;color:var(--ink);display:block}
.booking-row .t small{font-size:9px;color:var(--muted)}
.booking-row .chev{color:#9ca3af;font-size:12px}
.stats{margin:8px 12px 0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.stat{border-radius:12px;background:#fff;border:1px solid var(--border);padding:9px 6px;text-align:center}
.stat b{font-size:13px;font-weight:700;color:var(--ink);display:block}
.stat small{font-size:8px;color:var(--muted)}
.map-head{margin:10px 12px 0;display:flex;align-items:center;justify-content:space-between}
.map-head b{font-size:12px;font-weight:700;color:var(--ink)}
.map-head span{font-size:9px;font-weight:600;color:var(--green-deep)}
.map{margin:6px 12px 10px;position:relative;border-radius:12px;border:1px solid var(--border);background:#fff;height:74px;overflow:hidden}
.map .grid{position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,transparent 0 17px,#f3f4f6 17px 18px),
  repeating-linear-gradient(90deg,transparent 0 17px,#f3f4f6 17px 18px)}
.map .me{position:absolute;left:48%;top:44%;width:8px;height:8px;border-radius:999px;background:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.map .sos-fab{position:absolute;right:10px;bottom:8px;width:32px;height:32px;border-radius:999px;background:var(--red);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(220,38,38,.35)}
.tabbar{display:flex;justify-content:space-around;border-top:1px solid var(--border);background:#fff;padding:8px 0 14px;font-size:8px;color:var(--muted);font-weight:500}
.tabbar .on{color:var(--green-deep);font-weight:700}
.preview-note{margin:12px 0 0;text-align:center;font-size:12px;color:var(--on-dark-faint)}

/* ---- Light sections ---- */
.section-light{background:#fff;padding:64px 0 72px}
h2{margin:0;font-size:clamp(26px,3.5vw,34px);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.section-sub{margin:10px 0 34px;font-size:16px;color:var(--muted);max-width:56ch}

/* Audience cards */
.aud-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.aud-card{text-align:left;cursor:pointer;background:#fff;border:2px solid var(--border);border-radius:1rem;padding:22px;display:flex;flex-direction:column;gap:12px;font:inherit;box-shadow:0 1px 2px rgba(17,24,39,.04);transition:box-shadow .15s,border-color .15s}
.aud-card:hover{box-shadow:0 6px 18px rgba(17,24,39,.08)}
.aud-card .head{display:flex;align-items:center;gap:8px}
.pill{align-self:flex-start;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:500}
.pill-green{background:var(--green-100);color:var(--green-900)}
.pill-orange{background:#ffedd5;color:#7c2d12}
.pill-teal{background:#ccfbf1;color:#134e4a}
.pill-violet{background:#ede9fe;color:#4c1d95}
.sel-flag{font-size:12px;font-weight:600;display:none}
.aud-card.selected .sel-flag{display:inline}
.aud-card[data-type="cyclist"].selected{border-color:var(--green)}.aud-card[data-type="cyclist"] .sel-flag{color:var(--green)}
.aud-card[data-type="mechanic"].selected{border-color:var(--orange)}.aud-card[data-type="mechanic"] .sel-flag{color:var(--orange)}
.aud-card[data-type="bike_shop"].selected{border-color:var(--teal)}.aud-card[data-type="bike_shop"] .sel-flag{color:var(--teal)}
.aud-card[data-type="club"].selected{border-color:var(--violet)}.aud-card[data-type="club"] .sel-flag{color:var(--violet)}
.aud-card h3{margin:0;font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.aud-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.5;color:#374151}
.aud-card li{display:flex;gap:8px}
.aud-card li::before{content:"";flex:none;width:6px;height:6px;border-radius:999px;margin-top:7px}
.aud-card[data-type="cyclist"] li::before{background:var(--green)}
.aud-card[data-type="mechanic"] li::before{background:var(--orange)}
.aud-card[data-type="bike_shop"] li::before{background:var(--teal)}
.aud-card[data-type="club"] li::before{background:var(--violet)}
.anchor{margin-top:auto;font-size:13px;font-weight:600;color:var(--ink)}

/* Console preview */
.section-console{background:#f9fafb;border-top:1px solid var(--border);padding:64px 0 72px}
.console{border:1px solid var(--border);border-radius:1rem;overflow:hidden;background:#fff;box-shadow:0 12px 32px rgba(17,24,39,.08);max-width:960px}
.console .chrome{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);background:#f9fafb}
.console .chrome i{width:10px;height:10px;border-radius:999px;background:var(--border)}
.console .url{margin-left:10px;flex:1;max-width:360px;min-height:24px;display:flex;align-items:center;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--border);font-size:11px;color:var(--muted)}
.console .appbar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border);background:#fff}
.console .appbar strong{font-size:12px;color:var(--ink)}
.console .appbar strong em{font-style:normal;color:var(--orange)}
.badge-pro{padding:2px 7px;border-radius:6px;background:#ffedd5;color:#9a3412;font-size:9px;font-weight:700}
.console .search{flex:1;max-width:300px;min-height:26px;display:flex;align-items:center;padding:0 10px;border-radius:8px;background:#f3f4f6;font-size:10px;color:#9ca3af}
.console .user{margin-left:auto;width:26px;height:26px;border-radius:999px;background:var(--orange);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff}
.console .uname{font-size:10px;color:#374151;font-weight:600}
.console .body{display:flex;min-height:300px}
.console nav{flex:0 0 160px;border-right:1px solid var(--border);padding:12px 8px;display:flex;flex-direction:column;gap:2px;font-size:11px;color:#374151}
.console nav span{padding:7px 10px;border-radius:8px}
.console nav .active{display:flex;align-items:center;justify-content:space-between;background:#ffedd5;color:#9a3412;font-weight:700}
.console nav .count{min-width:16px;height:16px;border-radius:999px;background:var(--orange);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:9px}
.console .main{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px;background:#f9fafb}
.console .main-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.console .main-head b{font-size:14px;color:var(--ink)}
.console .main-head small{display:block;font-size:10px;color:var(--muted)}
.btn-export{display:inline-flex;align-items:center;min-height:26px;padding:0 12px;border-radius:8px;background:var(--orange);color:#fff;font-size:10px;font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.kpi{border:1px solid var(--border);border-radius:12px;background:#fff;padding:12px}
.kpi small{font-size:9px;color:var(--muted);display:block}
.kpi b{font-size:16px;font-weight:700;color:var(--ink)}
.kpi .ok{color:var(--green-deep)}
.table{border:1px solid var(--border);border-radius:12px;background:#fff;overflow:hidden}
.trow{display:grid;grid-template-columns:1.4fr 1.2fr 1fr .8fr;gap:8px;padding:10px 14px;font-size:10px;color:#374151;align-items:center;border-bottom:1px solid #f3f4f6}
.trow:last-child{border-bottom:none}
.trow.thead{padding:9px 14px;border-bottom:1px solid var(--border);font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.trow .cname{font-weight:600;color:var(--ink)}
.tag-ok{padding:2px 8px;border-radius:999px;background:var(--green-100);color:#166534;font-size:9px;font-weight:600}
.tag-pending{padding:2px 8px;border-radius:999px;background:#fef9c3;color:#713f12;font-size:9px;font-weight:600}
.console-note{margin:14px 0 0;font-size:12px;color:var(--muted)}

/* Trust strip */
.trust{background:var(--green-50);border-top:1px solid var(--green-100);border-bottom:1px solid var(--green-100);padding:26px 0}
.trust .wrap{display:flex;align-items:center;gap:14px 30px;flex-wrap:wrap}
.trust strong{font-size:13px;font-weight:600;color:var(--green-900);text-transform:uppercase;letter-spacing:.06em}
.trust-item{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#1f2937}

/* Q4 teaser */
.section-q4{background:#fff;padding:56px 0 64px}
.section-q4 h2{font-size:clamp(22px,3vw,28px)}
.q4-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:24px;max-width:760px}
.q4-card{background:#fff;border:1px solid var(--border);border-radius:1rem;padding:20px;display:flex;flex-direction:column;gap:10px}
.q4-card b{font-size:17px;font-weight:600;color:var(--ink)}
.q4-card p{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
.q4-note{margin:18px 0 0;font-size:14px;color:var(--muted)}

/* ---- Dark form section ---- */
.section-form{background:var(--dark);color:var(--on-dark);padding:72px 0 64px}
.form-wrap{max-width:600px;margin:0 auto;padding:0 20px}
.section-form h2{color:var(--on-dark);font-size:clamp(28px,4vw,38px);letter-spacing:-.015em}
.form-sub{margin:12px 0 32px;font-size:16px;line-height:1.6;color:var(--on-dark-muted)}
.live{margin:0 0 12px;font-size:14px;color:#6ee7b7;min-height:1em}
form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:6px}
.field label,fieldset legend{font-size:14px;font-weight:500;color:#e2e9e5}
.field input{min-height:46px;padding:0 14px;border-radius:10px;border:1px solid var(--dark-border);background:var(--dark-2);color:var(--on-dark);font-size:16px}
.field input[aria-invalid="true"]{border-color:#fca5a5}
.err{margin:0;font-size:13px;color:#fca5a5}
fieldset{margin:0;padding:0;border:none;display:flex;flex-direction:column;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;cursor:pointer;font-size:14px;font-weight:500;border:1px solid var(--dark-border);color:var(--on-dark-muted)}
.chip input{width:16px;height:16px}
.chip-cyclist input{accent-color:var(--green)}
.chip-mechanic input{accent-color:var(--orange)}
.chip-shop input{accent-color:var(--teal)}
.chip-club input{accent-color:var(--violet)}
.chip:has(input:checked){background:rgba(16,185,129,.10);color:var(--on-dark)}
.chip-cyclist:has(input:checked){border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.chip-mechanic:has(input:checked){border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
.chip-shop:has(input:checked){border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.chip-club:has(input:checked){border-color:var(--violet);box-shadow:inset 0 0 0 1px var(--violet)}
.checks{display:flex;flex-direction:column;gap:10px}
.check{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;color:var(--on-dark-muted);min-height:24px;cursor:pointer}
.check input{accent-color:var(--green);width:18px;height:18px;margin-top:1px;flex:none}
.fail{margin:0;padding:12px 14px;border-radius:10px;border:1px solid rgba(252,165,165,.35);background:rgba(252,165,165,.08);font-size:14px;color:#fca5a5}
#submit-btn{min-height:50px}
#submit-btn:disabled{opacity:.75}
#spinner{width:16px;height:16px;border-radius:999px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite}
.popia{margin:0;font-size:13px;line-height:1.5;color:var(--on-dark-faint)}
.success{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.35);border-radius:1rem;padding:28px;display:flex;flex-direction:column;gap:10px}
.success b{font-size:20px;font-weight:600;color:var(--on-dark)}
.success p{margin:0;font-size:15px;line-height:1.6;color:var(--on-dark-muted)}
.success p strong{color:var(--on-dark)}
.success small{font-size:14px;color:var(--on-dark-faint)}

/* FAQ */
.section-faq{background:var(--dark);color:var(--on-dark);padding:8px 0 64px}
.section-faq h2{color:#e2e9e5;font-size:20px;margin-bottom:14px}
.section-faq details{border-top:1px solid rgba(255,255,255,.1)}
.section-faq details:last-of-type{border-bottom:1px solid rgba(255,255,255,.1)}
summary{min-height:44px;display:flex;align-items:center;font-size:15px;font-weight:500;color:#e2e9e5;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
.section-faq details p{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--on-dark-muted)}

/* Footer */
footer{background:#060a08;color:var(--on-dark-faint);padding:36px 0}
footer .wrap{display:flex;align-items:center;gap:12px 28px;flex-wrap:wrap;font-size:13px}
footer .brand strong{color:#e2e9e5;font-size:13px}
footer a{color:#6ee7b7}