/* apps/landing/styles.css */

:root {
  --bg:#080d1c; --bg2:#0f1628; --bg3:#151f35; --bg4:#1c2a42;
  --border:#1e2d48; --border2:#243555;
  --blue:#3d8ef0; --blue-dim:#1f4a82; --blue-glow:rgba(61,142,240,0.15);
  --green:#2ecc85; --orange:#f0923d; --purple:#8b5cf6; --cyan:#22d3ee;
  --text:#ffffff; --text2:#a8bdd6; --text3:#5a7090;
  --font:'DM Sans',sans-serif; --mono:'DM Mono',monospace;
  --radius:16px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); font-family:var(--font); color:var(--text2); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body::before { content:''; position:fixed; inset:0; background-image:linear-gradient(rgba(61,142,240,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(61,142,240,.03) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; z-index:0; }
.container { max-width:1120px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }

/* NAV */
.top { display:flex; align-items:center; justify-content:space-between; padding:20px 0; }
.brand { display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text); font-size:17px; font-weight:800; letter-spacing:-.3px; }
.brand-dot { width:8px; height:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 8px var(--blue); }
.nav { display:flex; align-items:center; gap:4px; }
.nav-link { color:var(--text3); text-decoration:none; font-size:14px; font-weight:500; padding:7px 12px; border-radius:10px; transition:all .2s; }
.nav-link:hover { color:var(--text); background:var(--bg3); }
.lang { display:flex; align-items:center; gap:4px; margin-left:8px; padding-left:12px; border-left:1px solid var(--border); }
.lang-sep { color:var(--text3); font-size:13px; }
.lang-btn { background:none; border:none; cursor:pointer; color:var(--text3); font-size:13px; font-weight:700; font-family:var(--font); padding:5px 8px; border-radius:7px; transition:all .2s; }
.lang-btn:hover { color:var(--text); background:var(--bg3); }
.lang-btn.is-active { background:var(--bg4); color:var(--text); border:1px solid var(--border2); }

/* HERO */
.hero { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:72px 0 80px; }
.hero-left { display:flex; flex-direction:column; gap:20px; }
.h1 { font-size:clamp(34px,4vw,52px); font-weight:800; color:var(--text); line-height:1.1; letter-spacing:-1.5px; }
.lead { font-size:16px; color:var(--text2); line-height:1.65; max-width:460px; }
.cta { display:flex; gap:10px; flex-wrap:wrap; }
.note { font-size:12px; color:var(--text3); }
.sport-pills { display:flex; gap:8px; flex-wrap:wrap; }
.sport-pill { display:flex; align-items:center; gap:6px; background:var(--bg3); border:1px solid var(--border); border-radius:20px; padding:5px 12px; font-size:12px; font-weight:600; color:var(--text2); }
.sport-pill svg { width:14px; height:14px; }
.orb { position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none; z-index:0; }
.orb-1 { width:500px; height:500px; background:rgba(61,142,240,.06); top:-100px; right:-100px; }
.orb-2 { width:400px; height:400px; background:rgba(139,92,246,.04); bottom:-50px; left:-80px; }

/* SECTIONS */
.section { padding:72px 0; }
.section-tight { padding:56px 0; }
.h2 { font-size:clamp(26px,3vw,36px); font-weight:800; color:var(--text); letter-spacing:-.8px; margin-bottom:36px; }
.divider { height:1px; background:var(--border); }

/* CARDS */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.card { background:var(--bg2); border:1px solid var(--border); border-radius:18px; padding:22px 20px; transition:all .2s; }
.card:hover { border-color:var(--blue-dim); background:var(--bg3); transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,0,0,.3); }
.card-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.icon { width:40px; height:40px; background:var(--bg3); border:1px solid var(--border2); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--blue); flex-shrink:0; }
.icon svg { width:20px; height:20px; }
.h3 { font-size:16px; font-weight:700; color:var(--text); }
.p { font-size:14px; color:var(--text2); line-height:1.6; }
.step-num { font-size:11px; font-weight:700; color:var(--blue); font-family:var(--mono); letter-spacing:1px; text-transform:uppercase; margin-bottom:4px; }

/* FEATURES */
.features { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:36px; }
.feature { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:16px 18px; display:flex; gap:12px; }
.feature-icon { width:32px; height:32px; border-radius:8px; background:var(--bg3); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--blue); }
.feature-icon svg { width:16px; height:16px; }
.feature-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:3px; }
.feature-desc { font-size:12px; color:var(--text3); line-height:1.5; }

/* APP BANNER */
.app-banner { background:linear-gradient(135deg,var(--bg2),#0d1e38); border:1px solid var(--blue-dim); border-radius:20px; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:80px; box-shadow:0 0 40px var(--blue-glow); }
.app-banner-text { font-size:15px; font-weight:600; color:var(--text); }
.app-banner-sub { font-size:13px; color:var(--text3); margin-top:2px; }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:var(--radius); font-size:15px; font-weight:700; font-family:var(--font); text-decoration:none; cursor:pointer; border:none; transition:all .2s; white-space:nowrap; }
.btn-primary { background:var(--blue); color:#fff; box-shadow:0 4px 20px rgba(61,142,240,.35); }
.btn-primary:hover { background:#2a7ade; box-shadow:0 6px 28px rgba(61,142,240,.5); transform:translateY(-1px); }
.btn-ghost { background:var(--bg2); color:var(--text2); border:1px solid var(--border2); }
.btn-ghost:hover { background:var(--bg3); color:var(--text); border-color:var(--blue-dim); }

/* FORMS */
.waitlist-wrap { max-width:560px; }
.form { display:flex; gap:8px; margin-top:20px; margin-bottom:12px; }
.input { flex:1; background:var(--bg2); border:1px solid var(--border2); border-radius:var(--radius); padding:13px 16px; font-size:15px; font-family:var(--font); color:var(--text); outline:none; transition:border-color .2s; }
.input::placeholder { color:var(--text3); }
.input:focus { border-color:var(--blue-dim); box-shadow:0 0 0 3px var(--blue-glow); }
.fine { font-size:12px; color:var(--text3); line-height:1.5; }
.fine-link { color:var(--text2); text-decoration:underline; text-underline-offset:3px; }
.fine-link:hover { color:var(--text); }
#waitlistStatus { min-height:18px; color:var(--green); margin-bottom:6px; }

/* FOOTER */
.footer { display:flex; align-items:center; justify-content:space-between; padding:24px 0; font-size:13px; color:var(--text3); }

/* PHONE MOCKUPS */
.hero-mockup { background:linear-gradient(135deg,#0f1628,#080d1c); border:1px solid #1e2d48; border-radius:20px; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.mockup-row { display:flex; gap:12px; align-items:flex-start; justify-content:center; }
.pm { width:185px; flex-shrink:0; background:#080d1c; border-radius:26px; border:1.5px solid #1e2d48; box-shadow:0 16px 48px rgba(0,0,0,.6); overflow:hidden; font-family:'DM Sans',sans-serif; }
.pm.wide { width:210px; }
.pm-island { width:56px; height:14px; background:#000; border-radius:9px; margin:8px auto 3px; }
.pm-status { display:flex; justify-content:space-between; padding:0 10px 5px; font-size:7.5px; font-weight:600; color:#fff; }
.pm-hdr { text-align:center; padding:4px 10px 7px; border-bottom:1px solid #1e2d48; }
.pm-hdr-title { font-size:8.5px; font-weight:600; color:#fff; }
.pm-prog { height:2px; background:#1e2d48; }
.pm-prog-fill { height:100%; background:linear-gradient(90deg,#3d8ef0,#22d3ee); border-radius:1px; }
.pm-body { padding:9px 9px 11px; }
.pm-big-title { font-size:12px; font-weight:800; color:#fff; text-align:center; margin:6px 0 10px; letter-spacing:-.3px; line-height:1.2; }
.pm-opt { display:flex; align-items:center; gap:7px; background:#0f1628; border:1px solid #1e2d48; border-radius:9px; padding:7px 9px; margin-bottom:5px; }
.pm-opt-ico { width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pm-opt-ico.b { background:rgba(61,142,240,.15); }
.pm-opt-ico.t { background:rgba(34,211,238,.12); }
.pm-opt-ico.g { background:rgba(46,204,133,.12); }
.pm-opt-title { font-size:8px; font-weight:700; color:#fff; }
.pm-opt-desc { font-size:6.5px; color:#5a7090; margin-top:1px; }
.pm-voice { background:#0f1628; border:1px solid #243555; border-radius:8px; padding:6px; display:flex; align-items:center; justify-content:center; gap:5px; font-size:7.5px; font-weight:700; color:#3d8ef0; margin-top:5px; }
.pm-vol { font-size:8.5px; font-weight:700; color:#fff; text-align:center; font-family:'DM Mono',monospace; margin-bottom:6px; }
.pm-tabs { display:flex; background:#0f1628; border-radius:7px; padding:2px; gap:1px; margin-bottom:7px; }
.pm-tab { flex:1; text-align:center; padding:4px; border-radius:5px; font-size:7px; font-weight:600; color:#5a7090; }
.pm-tab.on { background:#1c2a42; color:#fff; }
.pm-day { display:flex; align-items:center; border-radius:7px; overflow:hidden; margin-bottom:4px; }
.pm-dlabel { width:24px; padding:6px 0; font-size:7px; font-weight:700; color:#fff; text-align:center; flex-shrink:0; }
.pm-dcontent { flex:1; padding:5px 7px; display:flex; align-items:center; gap:5px; }
.pm-dname { font-size:7.5px; font-weight:600; color:#fff; flex:1; }
.pm-dsub { font-size:6.5px; color:rgba(255,255,255,.5); }
.pm-day.bl { background:#102244; } .pm-day.bl .pm-dlabel { background:#0d1c38; }
.pm-day.gr { background:#0c2c1c; } .pm-day.gr .pm-dlabel { background:#092216; }
.pm-day.or { background:#2a1a08; } .pm-day.or .pm-dlabel { background:#1e1206; }
.pm-day.pu { background:#1e1040; } .pm-day.pu .pm-dlabel { background:#170c32; }
.pm-day.gy { background:#0f1628; border:1px solid #1e2d48; }
.pm-day.em { background:transparent; border:1px solid #1e2d48; }
.pm-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:6px 1px; border-top:1px solid #1e2d48; margin-top:3px; }
.pm-toggle-label { font-size:7px; color:#a8bdd6; }
.pm-toggle { width:20px; height:11px; background:#3d8ef0; border-radius:6px; position:relative; flex-shrink:0; }
.pm-toggle::after { content:''; position:absolute; right:2px; top:2px; width:7px; height:7px; background:#fff; border-radius:50%; }
.pm-next-btn { background:#3d8ef0; border-radius:7px; padding:6px; text-align:center; font-size:7.5px; font-weight:700; color:#fff; margin-top:5px; }
.pm-cal-nav { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.pm-cal-month { font-size:9px; font-weight:800; color:#fff; }
.pm-cal-arr { font-size:8px; color:#5a7090; }
.pm-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.pm-cal-dow { font-size:5.5px; font-weight:700; color:#5a7090; text-align:center; padding:2px 0; }
.pm-cal-day { aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:6.5px; color:#a8bdd6; gap:1px; border-radius:3px; }
.pm-cal-day.dim { color:#2a3a52; }
.pm-cal-day.today { background:rgba(61,142,240,.2); color:#fff; font-weight:700; }
.pm-dot { width:3px; height:3px; border-radius:50%; }
.pm-legend { background:#0f1628; border:1px solid #1e2d48; border-radius:7px; padding:6px 8px; margin-top:5px; }
.pm-leg-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:3px; font-size:6.5px; }
.pm-leg-row:last-child { margin-bottom:0; }
.pm-leg-l { display:flex; align-items:center; gap:5px; color:#a8bdd6; }
.pm-leg-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.pm-leg-val { color:#fff; font-family:'DM Mono',monospace; }

/* PREVIEW */
.preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.preview-card { background:var(--bg2); border:1px solid var(--border); border-radius:18px; padding:24px; display:flex; justify-content:center; }
.preview-cta { margin-top:16px; background:var(--bg2); border:1px solid var(--border); border-radius:18px; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }

/* PROSE — legal, privacy pages */
.prose h1 { font-size:clamp(28px,4vw,44px); font-weight:800; color:var(--text); letter-spacing:-1px; line-height:1.15; margin:0 0 8px; }
.prose h2 { font-size:20px; font-weight:700; color:var(--text); letter-spacing:-.3px; margin:28px 0 8px; }
.prose p { font-size:15px; color:var(--text2); line-height:1.65; margin:0 0 12px; }
.prose ul { padding-left:20px; margin:0 0 12px; }
.prose li { font-size:15px; color:var(--text2); line-height:1.65; margin-bottom:6px; }
.prose strong { color:var(--text); font-weight:700; }

/* ANIMATIONS */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.hero-left > * { animation:fadeUp .5s ease both; }
.hero-left > *:nth-child(1) { animation-delay:.05s }
.hero-left > *:nth-child(2) { animation-delay:.12s }
.hero-left > *:nth-child(3) { animation-delay:.18s }
.hero-left > *:nth-child(4) { animation-delay:.22s }
.hero-right { animation:fadeUp .6s .1s ease both; }

/* RESPONSIVE */
@media(max-width:900px) {
  .hero { grid-template-columns:1fr; gap:32px; padding-top:40px; }
  .hero-left { order:1; }
  .hero-right { order:2; }
  .cards { grid-template-columns:1fr; }
  .preview-grid { grid-template-columns:1fr; }
  .features { grid-template-columns:1fr; }
  .nav .nav-link { display:none; }
  .app-banner, .preview-cta { flex-direction:column; text-align:center; }
}
@media(max-width:600px) {
  .form { flex-direction:column; }
  .pm { width:155px; }
  .pm.wide { width:175px; }
}