/* landing.css — Ssup v2 marketing landing · Electric Midnight
   Reuses tokens from styles.css. All landing classes prefixed .lp- to avoid
   clashing with the in-app .s2- classes. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background-color: var(--surface-app); color: var(--text-primary);
  font-family: var(--font-display, 'Gabarito', system-ui);
  letter-spacing: -0.01em; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* faint REAL dark map behind everything — real CARTO tiles, dimmed + vignetted */
.lp-root { position: relative; z-index: 1; }
.lp-mapbg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lp-mapbg-grid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; opacity: 0.22;
  -webkit-mask-image: radial-gradient(135% 125% at 50% 42%, #000 48%, rgba(0,0,0,0.55) 78%, transparent 100%);
  mask-image: radial-gradient(135% 125% at 50% 42%, #000 48%, rgba(0,0,0,0.55) 78%, transparent 100%); }
.lp-mapbg-grid img { display: block; }
.lp-mapbg::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 40%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 72%); mix-blend-mode: screen; }
::selection { background: var(--accent); color: #fff; }

:root {
  --lp-max: 1180px;
  --lp-mono: 'DM Mono', ui-monospace, monospace;
  --lp-ease: cubic-bezier(.22,.7,.2,1);
  --s2-tilt: 1;
}

/* ── shared atoms ───────────────────────────────────────── */
.lp-wrap { max-width: var(--lp-max); margin: 0 auto; padding: 0 28px; }
.lp-eyebrow {
  font-family: var(--lp-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); display: inline-flex; gap: 9px; align-items: center;
}
.lp-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 99px; background: var(--live);
  box-shadow: 0 0 0 0 var(--live); animation: lp-ping 2.4s var(--lp-ease) infinite; }
@keyframes lp-ping { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--live) 60%, transparent); } 70%,100% { box-shadow: 0 0 0 9px transparent; } }

.lp-accent { color: var(--accent); }
.lp-live { color: var(--live); }
.lp-dim { color: var(--text-secondary); }

h1,h2,h3 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; text-wrap: balance; }
.lp-h1 { font-size: clamp(44px, 7.2vw, 96px); }
.lp-h2 { font-size: clamp(34px, 5.2vw, 62px); }
.lp-h3 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.03em; }
.lp-lead { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5; color: var(--text-secondary); font-weight: 500; text-wrap: pretty; }

/* ── buttons ────────────────────────────────────────────── */
.lp-btnrow { display: flex; gap: 14px; flex-wrap: wrap; }
.lp-store {
  display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px 14px 18px;
  border-radius: 16px; background: var(--text-primary); color: #0A0E16; text-decoration: none;
  transition: transform .25s var(--lp-ease), box-shadow .25s var(--lp-ease), background .2s;
  box-shadow: 0 10px 30px rgba(0,0,0,.4); will-change: transform;
}
.lp-store:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 44px rgba(0,0,0,.55); }
.lp-store:active { transform: translateY(-1px) scale(.99); }
.lp-store small { display: block; font-family: var(--lp-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; opacity: .62; }
.lp-store b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; margin-top: 1px; }
.lp-store.lp-store-ghost { background: transparent; color: var(--text-primary); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.lp-store.lp-store-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }

.lp-cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 99px;
  background: var(--accent); color: #fff; text-decoration: none; font-weight: 800; font-size: 16px;
  border: none; cursor: pointer; transition: transform .25s var(--lp-ease), box-shadow .25s var(--lp-ease);
  box-shadow: 0 12px 34px var(--blue-glow); will-change: transform;
}
.lp-cta:hover { transform: translateY(-3px); box-shadow: 0 20px 50px var(--blue-glow); }
.lp-cta:active { transform: translateY(-1px); }

/* ── nav ────────────────────────────────────────────────── */
.lp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 0;
  transition: background .3s, backdrop-filter .3s, padding .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.lp-nav.lp-stuck { background: color-mix(in oklab, var(--surface-app) 78%, transparent);
  backdrop-filter: blur(16px); border-bottom-color: var(--border-hairline); padding: 11px 0; }
.lp-nav-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.lp-nav-links { display: flex; gap: 28px; align-items: center; }
.lp-nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 15px; font-weight: 600;
  transition: color .2s; }
.lp-nav-links a:hover { color: var(--text-primary); }
.lp-nav-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 99px;
  background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px;
  transition: transform .2s var(--lp-ease), box-shadow .2s; box-shadow: 0 8px 24px var(--blue-glow); }
.lp-nav-pill:hover { transform: translateY(-2px); }
@media (max-width: 760px) { .lp-nav-links { display: none; } }

/* ── section rhythm ─────────────────────────────────────── */
.lp-section { padding: clamp(80px, 11vw, 150px) 0; position: relative; }
.lp-section-head { max-width: 760px; }
.lp-section-head .lp-h2 { margin-top: 16px; }
.lp-section-head .lp-lead { margin-top: 18px; }

/* ── reveal + parallax ──────────────────────────────────── */
.lp-reveal { opacity: 0; transform: translateY(34px); transition: opacity .6s var(--lp-ease), transform .6s var(--lp-ease); }
.lp-reveal.lp-in { opacity: 1; transform: none; }
/* above-the-fold (eager) content stays visible even if the entrance timer is throttled */
.lp-reveal.lp-eager { opacity: 1; transform: none; }
.lp-reveal.lp-d1 { transition-delay: .06s; }
.lp-reveal.lp-d2 { transition-delay: .12s; }
.lp-reveal.lp-d3 { transition-delay: .18s; }
.lp-reveal.lp-d4 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .lp-reveal { opacity: 1; transform: none; transition: none; } }
.lp-parallax { will-change: transform; }

/* ── phone mock (floating, light bezel) ─────────────────── */
.lp-phone {
  position: relative; width: var(--pw, 300px); aspect-ratio: 402 / 874; border-radius: 40px;
  overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 1px var(--border-strong),
  inset 0 0 0 1px rgba(255,255,255,.05); background: var(--surface-app); flex: 0 0 auto;
}
.lp-phone-inner { position: absolute; top: 0; left: 0; width: 402px; height: 874px;
  transform-origin: top left; transform: scale(calc(var(--pw, 300px) / 402px)); }
.lp-phone-glow { position: absolute; inset: -40% -30% auto; height: 70%; border-radius: 99px;
  background: radial-gradient(closest-side, var(--blue-glow), transparent); filter: blur(30px); z-index: -1; pointer-events: none; }

/* ── hero ───────────────────────────────────────────────── */
.lp-hero { position: relative; min-height: 100svh; display: flex; align-items: center;
  padding-top: 96px; overflow: hidden; }
.lp-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; width: 100%; }
.lp-hero h1 { margin-top: 22px; }
.lp-hero .lp-lead { margin-top: 24px; max-width: 480px; }
.lp-hero .lp-btnrow { margin-top: 34px; }
.lp-hero-note { margin-top: 18px; font-family: var(--lp-mono); font-size: 12px; color: var(--text-tertiary); letter-spacing: 0.04em; }

/* hero phone cluster */
.lp-hero-stage { position: relative; height: 620px; }
.lp-hero-stage .lp-phone { position: absolute; }

/* single clean hero phone (medium) */
.lp-hero-stage-solo { display: flex; align-items: center; justify-content: center; height: 600px; }
.lp-hero-phone { position: relative; }
.lp-hero-phone .lp-phone { position: static; --pw: 310px; transform: rotate(-2deg); }
.lp-phone-a { --pw: 290px; right: 6%; top: 30px; z-index: 3; transform: rotate(5deg); }
.lp-phone-b { --pw: 232px; left: 0; top: 150px; z-index: 2; transform: rotate(-8deg); }
.lp-phone-c { --pw: 186px; right: 2%; bottom: 0; z-index: 4; transform: rotate(-3deg); }

/* pulse-city backdrop */
.lp-citybg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lp-rings { position: absolute; left: 62%; top: 42%; transform: translate(-50%,-50%); }
.lp-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent); transform: translate(-50%,-50%);
  animation: lp-ringpulse 5.5s var(--lp-ease) infinite; }
@keyframes lp-ringpulse { 0% { width: 60px; height: 60px; opacity: .9; } 100% { width: 1100px; height: 1100px; opacity: 0; } }
.lp-glowblob { position: absolute; width: 620px; height: 620px; left: 58%; top: 30%;
  background: radial-gradient(closest-side, var(--blue-glow), transparent 72%); filter: blur(30px); opacity: .5; }
.lp-dot { position: absolute; width: 6px; height: 6px; border-radius: 99px; background: var(--accent);
  box-shadow: 0 0 10px var(--accent); animation: lp-drift 9s ease-in-out infinite; }
.lp-dot.lp-dot-live { background: var(--live); box-shadow: 0 0 10px var(--live); }
@keyframes lp-drift { 0%,100% { transform: translate(0,0); opacity: .5; } 50% { transform: translate(14px,-18px); opacity: 1; } }
.lp-scrollcue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-family: var(--lp-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-tertiary);
  display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lp-scrollcue span:last-child { width: 1px; height: 30px; background: linear-gradient(var(--accent), transparent); animation: lp-cue 1.8s ease-in-out infinite; }
@keyframes lp-cue { 0%,100% { transform: scaleY(.5); opacity: .4; transform-origin: top; } 50% { transform: scaleY(1); opacity: 1; } }

@media (max-width: 900px) {
  .lp-hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .lp-hero-stage { height: 460px; order: 2; }
  .lp-hero-stage-solo { height: 440px; }
  .lp-hero-phone .lp-phone { --pw: 250px; }
  .lp-phone-a { --pw: 230px; right: 8%; }
  .lp-phone-b { --pw: 180px; }
  .lp-phone-c { --pw: 150px; }
}

/* ── interactive demo ───────────────────────────────────── */
.lp-demo { background: var(--surface-alt); border-radius: 36px; padding: clamp(28px, 4vw, 52px);
  box-shadow: inset 0 0 0 1px var(--border-hairline); position: relative; overflow: hidden; }
.lp-demo-grid { display: grid; grid-template-columns: 1fr 360px; gap: 44px; align-items: center; }
.lp-demo-controls { min-width: 0; }
.lp-field { margin-top: 22px; }
.lp-field:first-child { margin-top: 0; }
.lp-field-label { font-family: var(--lp-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 11px; display: flex; justify-content: space-between; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.lp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px;
  background: var(--surface-card); color: var(--text-secondary); border: none; cursor: pointer; font-family: inherit;
  font-size: 14.5px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--border-hairline);
  transition: transform .18s var(--lp-ease), background .18s, color .18s, box-shadow .18s; }
.lp-chip:hover { transform: translateY(-2px); color: var(--text-primary); }
.lp-chip.lp-on { background: var(--accent-tint-18); color: var(--text-primary); box-shadow: inset 0 0 0 1.5px var(--accent);
  transform: rotate(-1.4deg); }
.lp-chip .lp-cdot { width: 9px; height: 9px; border-radius: 99px; }
.lp-demo-result { display: flex; justify-content: center; }
.lp-demo-readout { margin-top: 26px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lp-demo-count { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: var(--live);
  font-variant-numeric: tabular-nums; line-height: 1; }
@media (max-width: 820px) { .lp-demo-grid { grid-template-columns: 1fr; gap: 30px; }
  .lp-demo-result { order: -1; } }

/* result card inside demo */
.lp-rescard { width: 320px; background: var(--surface-card); border-radius: 26px; padding: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 0 0 1px var(--border-hairline); }
.lp-resmove { display: flex; gap: 12px; align-items: center; padding: 11px; border-radius: 16px;
  background: var(--surface-raised); margin-top: 10px; animation: lp-pop .45s var(--lp-ease) both; }
@keyframes lp-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.lp-resmove img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex: 0 0 46px; }
.lp-resthumb { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 46px; display: flex; align-items: center;
  justify-content: center; color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, var(--surface-card)); }

/* ── steps (how it works) ───────────────────────────────── */
.lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; }
.lp-step { background: var(--surface-card); border-radius: 24px; padding: 24px; position: relative;
  box-shadow: inset 0 0 0 1px var(--border-hairline); transition: transform .3s var(--lp-ease), box-shadow .3s; }
.lp-step:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--accent), 0 24px 50px rgba(0,0,0,.4); }
.lp-step-n { font-family: var(--lp-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.1em; }
.lp-step-ic { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-tint-18); color: var(--accent); margin: 16px 0 16px; }
.lp-step h3 { font-size: 20px; letter-spacing: -0.02em; }
.lp-step p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.lp-step-arrow { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); z-index: 2; }
@media (max-width: 900px) { .lp-steps { grid-template-columns: repeat(2, 1fr); } .lp-step-arrow { display: none; } }
@media (max-width: 520px) { .lp-steps { grid-template-columns: 1fr; } }

/* ── feature rows (4 tabs) ──────────────────────────────── */
.lp-feat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,6vw,90px); align-items: center; margin-top: 110px; }
.lp-feat:first-of-type { margin-top: 60px; }
.lp-feat.lp-flip .lp-feat-media { order: 2; }
.lp-feat-media { display: flex; justify-content: center; position: relative; }
.lp-feat-tag { font-family: var(--lp-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.lp-feat h3 { margin-top: 14px; }
.lp-feat p { margin-top: 16px; }
.lp-feat-list { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.lp-feat-li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--text-secondary); font-weight: 500; }
.lp-feat-li span { color: var(--accent); margin-top: 1px; flex: 0 0 auto; }
@media (max-width: 820px) { .lp-feat, .lp-feat.lp-flip { grid-template-columns: 1fr; gap: 30px; }
  .lp-feat.lp-flip .lp-feat-media { order: 0; } }

/* ── not a feed (manifesto contrast) ────────────────────── */
.lp-notfeed { text-align: center; }
.lp-bigstatement { font-size: clamp(40px, 7vw, 92px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
.lp-strike { position: relative; color: var(--text-tertiary); }
.lp-strike::after { content: ''; position: absolute; left: -2%; right: -2%; top: 52%; height: 6px; border-radius: 99px;
  background: var(--danger-400); transform: rotate(-2deg); }
.lp-notfeed-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.lp-vs { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 99px;
  background: var(--surface-card); font-weight: 700; font-size: 15px; box-shadow: inset 0 0 0 1px var(--border-hairline); }
.lp-vs.lp-yes { color: var(--live); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--live) 40%, transparent); }
.lp-vs.lp-no { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: var(--danger-400); }

/* ── safety cards ───────────────────────────────────────── */
.lp-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 50px; }
.lp-scard { background: var(--surface-card); border-radius: 24px; padding: 26px;
  box-shadow: inset 0 0 0 1px var(--border-hairline); transition: transform .3s var(--lp-ease); }
.lp-scard:hover { transform: translateY(-6px); }
.lp-scard-ic { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-tint-18); color: var(--accent); margin-bottom: 18px; }
.lp-scard h3 { font-size: 20px; }
.lp-scard p { margin: 9px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); }
@media (max-width: 820px) { .lp-cards3 { grid-template-columns: 1fr; } }

/* ── cities row ─────────────────────────────────────────── */
.lp-cities { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 40px; }
.lp-citychip { display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; border-radius: 16px;
  background: var(--surface-card); font-weight: 700; font-size: 16px; box-shadow: inset 0 0 0 1px var(--border-hairline);
  transition: transform .25s var(--lp-ease), color .2s; }
.lp-citychip:hover { transform: translateY(-3px) rotate(-1.5deg); color: var(--accent); }
.lp-citychip .lp-cdotlive { width: 8px; height: 8px; border-radius: 99px; background: var(--live); box-shadow: 0 0 8px var(--live); }

/* ── manifesto ──────────────────────────────────────────── */
.lp-manifesto { background: var(--surface-alt); border-radius: 36px; padding: clamp(36px, 6vw, 80px);
  position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px var(--border-hairline); }
.lp-quote { font-size: clamp(24px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.22; max-width: 880px; text-wrap: balance; }
.lp-quote em { color: var(--accent); font-style: normal; }
.lp-sign { margin-top: 32px; display: flex; align-items: center; gap: 14px; }
.lp-sign-av { width: 46px; height: 46px; border-radius: 99px; background: var(--accent-tint-18); display: flex; align-items: center;
  justify-content: center; color: var(--accent); font-weight: 800; }
.lp-sign b { display: block; font-size: 15px; }
.lp-sign small { display: block; font-family: var(--lp-mono); font-size: 11.5px; color: var(--text-tertiary); letter-spacing: 0.04em; }

/* ── FAQ ────────────────────────────────────────────────── */
.lp-faq { margin-top: 46px; max-width: 820px; }
.lp-faq-item { border-top: 1px solid var(--border-hairline); }
.lp-faq-item:last-child { border-bottom: 1px solid var(--border-hairline); }
.lp-faq-q { width: 100%; background: none; border: none; cursor: pointer; text-align: left; color: var(--text-primary);
  font-family: inherit; font-size: clamp(17px, 2vw, 21px); font-weight: 700; letter-spacing: -0.02em;
  padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.lp-faq-q:hover { color: var(--accent); }
.lp-faq-plus { flex: 0 0 auto; width: 26px; height: 26px; position: relative; transition: transform .3s var(--lp-ease); color: var(--accent); }
.lp-faq-item.lp-open .lp-faq-plus { transform: rotate(45deg); }
.lp-faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--lp-ease), opacity .3s; opacity: 0; }
.lp-faq-item.lp-open .lp-faq-a { max-height: 240px; opacity: 1; }
.lp-faq-a p { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); max-width: 680px; }

/* ── final CTA ──────────────────────────────────────────── */
.lp-final { text-align: center; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in oklab, var(--accent) 24%, var(--surface-app)), var(--surface-app) 60%);
  border-radius: 40px; padding: clamp(56px, 9vw, 120px) 28px; box-shadow: inset 0 0 0 1px var(--border-hairline); }
.lp-final .lp-h1 { font-size: clamp(40px, 7vw, 84px); }
.lp-final .lp-btnrow { justify-content: center; margin-top: 36px; }
.lp-final-rings { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* ── footer ─────────────────────────────────────────────── */
.lp-footer { padding: 56px 0 0; border-top: 1px solid var(--border-hairline); overflow: hidden; position: relative; }
.lp-footer-in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.lp-footer-links { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-flink { display: inline-flex; align-items: center; padding: 9px 17px; border-radius: 99px; white-space: nowrap;
  box-shadow: inset 0 0 0 1.5px var(--border-strong); color: var(--text-secondary); text-decoration: none;
  font-size: 14px; font-weight: 700; transition: transform .25s var(--lp-ease), color .2s, box-shadow .2s, background .2s; }
.lp-flink:nth-child(odd) { transform: rotate(-2deg); }
.lp-flink:nth-child(even) { transform: rotate(1.6deg); }
.lp-flink:hover { transform: rotate(0deg) translateY(-2px); color: var(--text-primary);
  box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--accent-tint-18); }
.lp-footer small { font-family: var(--lp-mono); font-size: 11.5px; color: var(--text-tertiary); letter-spacing: 0.04em; }

/* giant cropped sign-off */
.lp-footer-giant { position: relative; margin-top: 44px; text-align: center; user-select: none;
  font-family: var(--font-display, 'Gabarito'); font-size: clamp(120px, 21vw, 270px); font-weight: 800;
  letter-spacing: -0.05em; line-height: 0.74; transform: translateY(0.13em); color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in oklab, var(--accent) 42%, transparent);
  transition: color .45s var(--lp-ease); }
.lp-footer-giant:hover { color: var(--accent); }
.lp-footer-sticker { position: absolute; right: max(20px, 9%); top: -10%; transform: rotate(4deg); white-space: nowrap;
  background: var(--live); color: #0A0E16; font-family: var(--lp-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.02em; padding: 9px 15px; border-radius: 99px; -webkit-text-stroke: 0;
  box-shadow: 0 14px 34px rgba(0,0,0,.5); }
@media (max-width: 720px) { .lp-footer-sticker { left: 50%; right: auto; top: -30px; transform: translateX(-50%) rotate(-2deg); } }

/* ── mobile pass ─────────────────────────────────── */
@media (max-width: 640px) {
  .lp-wrap { padding: 0 20px; }
  .lp-nav { padding: 12px 0; }
  .lp-nav-pill { padding: 9px 15px; font-size: 13.5px; }
  .lp-mark { height: 32px !important; }

  .lp-hero { min-height: auto; padding-top: 102px; padding-bottom: 56px; }
  .lp-hero-grid { gap: 34px; }
  .lp-h1 { font-size: clamp(40px, 12.5vw, 54px); }
  .lp-hero .lp-lead { font-size: 16.5px; margin-top: 18px; }
  .lp-hero .lp-btnrow { margin-top: 26px; }
  .lp-store { padding: 12px 18px 12px 15px; flex: 1 1 auto; justify-content: center; }
  .lp-scrollcue { display: none; }

  .lp-hero-stage-vibe { margin-top: 4px; }
  .lp-vibecard { transform: none; padding: 20px; border-radius: 26px; }
  .lp-vibenote { right: 14px; top: -14px; font-size: 11px; padding: 7px 12px; }
  .lp-chip { padding: 9px 14px; font-size: 13.5px; }

  .lp-section { padding: 76px 0; }
  .lp-bigstatement { font-size: clamp(34px, 10.5vw, 46px); }
  .lp-steps2 { margin-top: 42px; }
  .lp-step2 { padding: 2px 6px 4px 18px; }
  .lp-step2-big { font-size: 46px; -webkit-text-stroke-width: 1.2px; }
  .lp-step2 h3 { margin-top: 13px; font-size: 19px; }
  .lp-step2 p { font-size: 14px; }

  .lp-livecities { margin-top: 64px; }
  .lp-ticker { margin-top: 18px; }
  .lp-second-cta { margin-top: 64px; }
  .lp-second-cta .lp-h2 { font-size: clamp(34px, 10.5vw, 46px); }
  .lp-second-cta .lp-btnrow { margin-top: 24px; }
  .lp-hero-note { font-size: 11px; }

  .lp-footer { padding-top: 46px; }
  .lp-footer-in { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  .lp-footer-links { justify-content: center; }
  .lp-footer-giant { margin-top: 56px; font-size: clamp(92px, 27vw, 140px); -webkit-text-stroke-width: 1.2px; }
}

.lp-mark { height: 30px; width: auto; display: block; }

/* ── sticker word (brand sticker treatment, matches wordmark) ─ */
.lp-stickerword { display: inline-block; background: var(--accent); color: #fff; white-space: nowrap;
  padding: 0.04em 0.18em 0.1em; border-radius: 0.16em; transform: rotate(-2deg); margin-top: 0.1em;
  box-shadow: 0 16px 40px var(--blue-glow); }
.lp-stickerword.lp-sticker-lime { background: var(--live); color: #0A0E16; transform: rotate(1.6deg);
  box-shadow: 0 16px 40px color-mix(in oklab, var(--live) 30%, transparent); }

/* ── film grain ────────────────────────────────────── */
.lp-root::after { content: ''; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── compact hero vibe card (replaces phone mock) ────────── */
.lp-hero-stage-vibe { display: flex; align-items: center; justify-content: center; min-width: 0; }
.lp-vibecard { width: 100%; max-width: 470px; background: var(--surface-alt); border-radius: 30px; padding: 26px;
  box-shadow: inset 0 0 0 1px var(--border-hairline), 0 40px 90px rgba(0,0,0,.45); position: relative;
  transform: rotate(1.4deg); }
.lp-vibenote { position: absolute; top: -15px; right: 26px; transform: rotate(2.5deg); z-index: 2; white-space: nowrap;
  background: var(--live); color: #0A0E16; font-family: var(--lp-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em; padding: 8px 14px; border-radius: 99px; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.lp-vibecard-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.lp-vibecard .lp-field { margin-top: 16px; }
.lp-vibecard .lp-field-label { margin-bottom: 9px; }
.lp-vibecard .lp-chip { padding: 8px 14px; font-size: 13.5px; }
.lp-vibe-div { height: 1px; background: var(--border-hairline); margin: 20px 0 4px; }
.lp-vibecard .lp-resmove { background: var(--surface-card); }
.lp-vibe-readout { display: flex; align-items: center; gap: 12px; margin-top: 18px;
  font-size: 13.5px; color: var(--text-secondary); font-weight: 600; line-height: 1.35; }
.lp-vibe-readout .lp-demo-count { font-size: 32px; }
.lp-vibe-readout em { color: var(--text-primary); font-style: normal; }
@media (max-width: 900px) { .lp-hero-stage-vibe { order: 2; margin-top: 26px; } .lp-hero { padding-bottom: 70px; } }

/* ── page 2: why + how + CTA ─────────────────────────────── */
.lp-steps2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 64px; text-align: left; }
.lp-step2 { padding: 4px 28px 6px 24px; border-left: 1px solid var(--border-strong); }
.lp-step2-big { display: block; font-size: clamp(54px, 6vw, 84px); font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--accent) 60%, transparent); }
.lp-step2 h3 { font-size: 21px; letter-spacing: -0.02em; margin-top: 22px; }
.lp-step2 p { margin: 9px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); }
@media (max-width: 900px) { .lp-steps2 { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } }
@media (max-width: 520px) { .lp-steps2 { grid-template-columns: 1fr; } }

/* ── city ticker ───────────────────────────────────── */
.lp-livecities { margin-top: clamp(64px, 8vw, 100px); }
.lp-ticker { margin-top: 26px; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.lp-ticker-track { display: flex; width: max-content; animation: lp-tick 30s linear infinite; }
.lp-ticker:hover .lp-ticker-track { animation-play-state: paused; }
@keyframes lp-tick { to { transform: translateX(-50%); } }
.lp-tick-run { display: flex; align-items: center; }
.lp-tick-item { display: inline-flex; align-items: center; white-space: nowrap;
  font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; letter-spacing: -0.03em; }
.lp-tick-item.lp-ghost { color: transparent; -webkit-text-stroke: 1.2px var(--text-tertiary); }
.lp-tick-sep { color: var(--live); font-size: 0.45em; margin: 0 0.8em; -webkit-text-stroke: 0; }
@media (prefers-reduced-motion: reduce) { .lp-ticker-track { animation: none; } }

.lp-second-cta { margin-top: clamp(64px, 8vw, 100px); }
.lp-second-cta .lp-h2 { line-height: 1.08; }
.lp-second-cta .lp-btnrow { justify-content: center; margin-top: 30px; }

/* ════════════════════════════════════════════════════════
   ILLUSTRATION KIT — vibrant, custom (no real app screens)
   ════════════════════════════════════════════════════════ */
.lp-illu { position: relative; width: 100%; max-width: 460px; margin: 0 auto; aspect-ratio: 1 / 1; }
.lp-illu * { box-sizing: border-box; }

/* glow + disc + rings */
.lp-glowc { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, var(--blue-glow), transparent 72%); filter: blur(24px); pointer-events: none; }
.lp-disc { position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 20%, transparent), transparent 72%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 26%, transparent); }
.lp-ringline { position: absolute; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent); }
.lp-sweep { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, color-mix(in oklab, var(--accent) 34%, transparent) 46deg, transparent 92deg);
  animation: lp-spin 7s linear infinite; }
@keyframes lp-spin { to { transform: rotate(360deg); } }
.lp-illu-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 26px var(--blue-glow)); }

/* avatar bubble */
.lp-bub { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; }
.lp-bub img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 0 2.5px var(--surface-app), 0 0 0 4px color-mix(in oklab, var(--accent) 55%, transparent); }
.lp-bub.lp-live img { box-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 0 2.5px var(--surface-app), 0 0 0 4px var(--live), 0 0 22px color-mix(in oklab, var(--live) 55%, transparent); }
.lp-bub.lp-you img { box-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 0 2.5px var(--surface-app), 0 0 0 4px #fff; }

/* glass card */
.lp-gcard { position: absolute; background: color-mix(in oklab, var(--surface-card) 90%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 18px; padding: 13px 15px;
  box-shadow: 0 26px 60px rgba(0,0,0,.55), inset 0 0 0 1px var(--border-strong); color: var(--text-primary); }
.lp-grow { display: flex; align-items: center; }
.lp-gcard b { font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em; }
.lp-gmeta { font-family: var(--lp-mono); font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.02em; }

/* floating tag / pill */
.lp-tag { position: absolute; font-family: var(--lp-mono); font-size: 12px; font-weight: 500; padding: 7px 13px;
  border-radius: 99px; background: var(--accent); color: #fff; box-shadow: 0 10px 28px var(--blue-glow); white-space: nowrap; transform: translate(-50%,-50%); }
.lp-tag.lp-tag-lime { background: var(--live); color: #0A0E16; box-shadow: 0 10px 24px color-mix(in oklab, var(--live) 50%, transparent); }
.lp-illu-pill { position: absolute; display: inline-flex; }

/* connecting line svg */
.lp-illu svg.lp-net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* hero art (taller stage) */
.lp-heroart { position: absolute; inset: 0; }
.lp-heroart .lp-bub img { box-shadow: 0 12px 30px rgba(0,0,0,.6), 0 0 0 3px var(--surface-app), 0 0 0 4.5px color-mix(in oklab, var(--accent) 55%, transparent); }

/* stamp / passport cards */
.lp-stamp { position: absolute; width: 168px; border-radius: 16px; overflow: hidden; background: var(--surface-card);
  box-shadow: 0 24px 55px rgba(0,0,0,.55), inset 0 0 0 1px var(--border-strong); }
.lp-stamp img { width: 100%; height: 132px; object-fit: cover; display: block; }
.lp-stamp-cap { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; }
.lp-stamp-cap b { font-size: 13.5px; font-weight: 800; }

/* move chip (compass illu) */
.lp-movechip { position: absolute; width: 212px; display: flex; gap: 11px; align-items: center; }
.lp-movechip img { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; flex: 0 0 44px; }

/* route pin (go illu) */
.lp-pin { position: absolute; transform: translate(-50%, -100%); color: var(--accent); filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.lp-pin.lp-pin-live { color: var(--live); }
.lp-pin-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%,-50%);
  background: var(--live); box-shadow: 0 0 16px var(--live); }

/* shield (safety illu) */
.lp-shield { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: var(--accent);
  filter: drop-shadow(0 14px 34px var(--blue-glow)); }
.lp-frost { position: absolute; border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--border-hairline); }
.lp-frost img { width: 100%; height: 100%; object-fit: cover; filter: blur(7px) saturate(1.1) brightness(.7); }

@media (max-width: 900px) { .lp-illu { max-width: 360px; } }

/* ── LIVE MAP section (real dark map tiles + overlays) ───── */
.lp-mapwrap { position: relative; margin-top: 46px; height: 600px; border-radius: 32px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border-strong), 0 40px 90px rgba(0,0,0,.5); background: var(--surface-alt); }
.lp-maplive { position: absolute; inset: 0; }
.lp-maptiles { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; opacity: .92; }
.lp-maptiles img { display: block; }
.lp-map-blue { position: absolute; inset: 0; background: radial-gradient(58% 52% at 50% 44%, var(--blue-glow), transparent 70%);
  mix-blend-mode: screen; opacity: .55; pointer-events: none; }
.lp-map-vig { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 92% at 50% 38%, transparent 28%, color-mix(in oklab, var(--surface-app) 62%, transparent) 76%, var(--surface-app) 100%); }
.lp-mapradar { opacity: .8; }

.lp-mappin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--accent); }
.lp-mappin.lp-live { color: var(--live); }
.lp-mlabel { background: color-mix(in oklab, var(--surface-card) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 12px; padding: 8px 12px; box-shadow: 0 16px 34px rgba(0,0,0,.55), inset 0 0 0 1px var(--border-strong);
  display: flex; align-items: center; gap: 9px; white-space: nowrap; color: var(--text-primary); }
.lp-mlabel b { font-size: 13px; font-weight: 800; }
.lp-mlabel small { font-family: var(--lp-mono); font-size: 10.5px; color: var(--text-tertiary); margin-left: 2px; }
.lp-mdot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; flex: 0 0 8px; }
.lp-mppoint { width: 14px; height: 14px; border-radius: 50%; background: currentColor; position: relative;
  box-shadow: 0 0 0 4px color-mix(in oklab, currentColor 22%, transparent), 0 0 16px currentColor; }
.lp-mppoint::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid currentColor;
  animation: lp-mapping 2.6s ease-out infinite; }
@keyframes lp-mapping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }

@media (max-width: 720px) { .lp-mapwrap { height: 520px; } }