/* ============================================================
   Drift — landing page
   Palette + type pulled from the app's Flow v3 design system
   ============================================================ */

:root{
  /* surfaces */
  --bg:#F6F4FD;
  --bg-tint:#EFEAFB;
  --card:#FFFFFF;
  --night:#180A47;

  /* ink */
  --ink:#1D0F4E;
  --ink2:#4A3D80;
  --ink3:#8B82B5;

  /* brand */
  --indigo:#230074;
  --indigo-deep:#170050;
  --accent:#9B7BF7;
  --accent-deep:#6C3DF4;
  --accent-tint:rgba(155,123,247,.14);

  /* activities */
  --ride:#00B392;
  --run:#FF5C33;
  --walk:#2F80ED;
  --sun:#FFB323;

  /* rules */
  --rule:rgba(35,0,116,.08);
  --rule-strong:rgba(35,0,116,.16);

  --r:24px;
  --r-sm:15px;

  --font-d:'Bricolage Grotesque', system-ui, sans-serif;
  --font:'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'DM Mono', ui-monospace, Menlo, monospace;

  --shadow-card:0 12px 30px rgba(35,0,116,.08);
  --shadow-pop:0 18px 50px rgba(35,0,116,.22);

  --maxw:1180px;
  --nav-h:72px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block}
h1,h2,h3{font-family:var(--font-d);font-weight:800;line-height:1.02;letter-spacing:-.02em}

.grad-text{
  background:linear-gradient(100deg,var(--indigo),var(--accent-deep) 55%,var(--run));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font);font-weight:700;font-size:.97rem;
  padding:.72em 1.35em;border-radius:999px;cursor:pointer;border:0;
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn--lg{padding:.92em 1.7em;font-size:1.02rem}
.btn--solid{
  color:#fff;
  background:linear-gradient(120deg,var(--indigo),var(--accent-deep));
  box-shadow:0 8px 22px rgba(108,61,244,.32);
}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(108,61,244,.42)}
.btn--ghost{
  background:var(--card);color:var(--ink);
  border:1.5px solid var(--rule-strong);
}
.btn--ghost:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent-deep)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  display:flex;align-items:center;gap:1.5rem;
  padding:0 clamp(1rem,4vw,2.4rem);
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.nav.is-stuck{
  background:rgba(246,244,253,.82);
  backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 var(--rule);
}
.nav__brand{display:flex;align-items:center;gap:.55rem;font-family:var(--font-d);font-weight:800;font-size:1.3rem}
.nav__logo{width:30px;height:30px;object-fit:contain}
.nav__links{display:flex;gap:1.6rem;margin-left:auto;font-weight:500;color:var(--ink2)}
.nav__links a{position:relative;transition:color .2s}
.nav__links a:hover{color:var(--accent-deep)}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--accent);transition:right .25s ease}
.nav__links a:hover::after{right:0}
.nav__cta{margin-left:.4rem}

/* ---------- layout helpers ---------- */
section{position:relative}
.section-kicker{
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.22em;
  font-size:.74rem;color:var(--accent-deep);font-weight:500;margin-bottom:.9rem;
}
.section-kicker.center{text-align:center}
.section-title{font-size:clamp(2rem,4.4vw,3.2rem);color:var(--ink)}
.section-title.center{text-align:center}
.eyebrow{
  display:inline-block;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-deep);
  background:var(--accent-tint);border:1px solid var(--rule);
  padding:.45em 1em;border-radius:999px;margin-bottom:1.6rem;
}

/* ============================================================
   CINEMATIC SCROLL STORY (the landing)
   ============================================================ */
.cinema{position:relative}
.cinema__pin{position:relative;height:100svh;overflow:hidden;background:
    linear-gradient(180deg,#d7e4f7,#eae3fb 60%,var(--bg));}
/* full-bleed Three.js canvas */
.scene-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.scene-loading{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink3);transition:opacity .6s ease}
.scene-loading.hide{opacity:0;pointer-events:none}

/* current-activity HUD badge */
.stage__badge{
  position:absolute;top:calc(var(--nav-h) + 1rem);left:50%;transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.82);backdrop-filter:blur(8px);
  border:1px solid var(--rule);box-shadow:var(--shadow-card);
  padding:.5rem 1.05rem;border-radius:999px;font-weight:700;font-size:.92rem;
  font-family:var(--font);transition:color .3s;
}
.stage__dot{width:9px;height:9px;border-radius:50%;background:var(--ride);transition:background .3s}

/* INTRO overlay */
.intro{
  position:absolute;z-index:5;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--nav-h) clamp(1.2rem,6vw,4.5rem) 0;
  pointer-events:none;will-change:transform,opacity;
}
.intro::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(245,243,253,.85) 0%,rgba(245,243,253,.45) 40%,transparent 66%)}
.intro__inner{max-width:var(--maxw);width:100%;margin:0 auto}
.intro__title{font-size:clamp(2.9rem,8.5vw,6.6rem);letter-spacing:-.03em;margin-bottom:1.3rem}
.intro__sub{font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--ink2);max-width:34ch;margin-bottom:2.4rem;
  text-shadow:0 1px 12px rgba(246,244,253,.8)}
.intro__cue{display:flex;flex-direction:column;gap:.6rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.intro__cue-line{width:1px;height:42px;background:linear-gradient(var(--accent),transparent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* STORY narrative — VECTR-style, bottom-left, tracks scroll */
.story{
  position:absolute;z-index:5;left:0;bottom:0;
  width:min(440px,92vw);padding:0 0 clamp(1.6rem,4vh,3rem) clamp(1.2rem,6vw,4.5rem);
  opacity:0;pointer-events:none;
}
.story::before{content:"";position:absolute;inset:-2rem 2rem -1rem -2rem;z-index:-1;
  background:radial-gradient(130% 110% at 8% 100%,rgba(245,243,253,.7),transparent 72%)}
.story__kicker{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.22em;
  font-size:.72rem;color:var(--accent-deep);margin-bottom:.8rem}
.steps{list-style:none;display:flex;flex-direction:column;gap:.35rem}
.step{
  display:flex;gap:.9rem;padding:.85rem 1rem;border-radius:var(--r-sm);
  border:1px solid transparent;transition:all .45s ease;opacity:.38;
}
.step.is-active{
  opacity:1;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border-color:var(--rule);box-shadow:var(--shadow-card);
}
.step__idx{font-family:var(--font-mono);font-size:.82rem;color:var(--ink3);padding-top:.15rem}
.step.is-active .step__idx{color:var(--c)}
.step__title{font-family:var(--font-d);font-weight:700;font-size:1.15rem;margin-bottom:.2rem}
.step.is-active .step__title{color:var(--c)}
.step__desc{font-size:.92rem;color:var(--ink2);max-width:36ch;max-height:0;overflow:hidden;
  opacity:0;transition:max-height .45s ease,opacity .45s ease}
.step.is-active .step__desc{max-height:8em;opacity:1;margin-top:.15rem}

/* ARRIVAL overlay */
.arrival{
  position:absolute;z-index:6;inset:0;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;
  padding:var(--nav-h) clamp(1.2rem,6vw,4.5rem) 0;
  opacity:0;pointer-events:none;will-change:opacity,transform;
}
.arrival::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(55% 48% at 50% 46%,rgba(245,243,253,.78),transparent 72%)}
.arrival>*{position:relative}
.arrival__title{font-size:clamp(2.6rem,7vw,5rem);letter-spacing:-.03em;margin-bottom:1rem}
.arrival__sub{color:var(--ink2);font-size:clamp(1rem,1.7vw,1.25rem);max-width:34ch;margin-bottom:2rem}

/* progress rail */
.rail{position:absolute;z-index:5;left:0;top:0;width:3px;height:100%;background:var(--rule)}
.rail__fill{display:block;width:100%;height:0;background:linear-gradient(var(--indigo),var(--accent-deep),var(--run))}

/* ---------- activities ---------- */
.activities{padding:7rem clamp(1rem,5vw,2.4rem);max-width:var(--maxw);margin:0 auto}
.acard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
.acard{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:2rem 1.8rem;box-shadow:var(--shadow-card);
  transition:transform .3s ease, box-shadow .3s ease;position:relative;overflow:hidden;
}
.acard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--c)}
.acard:hover{transform:translateY(-6px);box-shadow:var(--shadow-pop)}
.acard__icon{
  width:60px;height:60px;border-radius:18px;display:grid;place-items:center;
  color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);margin-bottom:1.4rem;
}
.acard h3{font-size:1.5rem;margin-bottom:.5rem}
.acard p{color:var(--ink2);font-size:.98rem}

/* ---------- features ---------- */
.features{
  background:var(--night);color:#EDEAFB;border-radius:40px;
  max-width:calc(var(--maxw) + 40px);margin:2rem auto;
  padding:clamp(3rem,6vw,5.5rem) clamp(1.4rem,5vw,4rem);position:relative;overflow:hidden;
}
.features::after{
  content:"";position:absolute;width:60%;height:60%;right:-10%;top:-20%;
  background:radial-gradient(circle,rgba(155,123,247,.35),transparent 70%);
}
.features__head{position:relative;z-index:1;max-width:640px;margin-bottom:3rem}
.features .section-kicker{color:var(--accent)}
.features .section-title{color:#fff}
.features__lead{color:#BCB2E8;font-size:1.12rem;margin-top:1.2rem;max-width:48ch}
.feat-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.feat{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);padding:1.8rem;transition:background .3s,transform .3s;
}
.feat:hover{background:rgba(255,255,255,.09);transform:translateY(-4px)}
.feat__num{font-family:var(--font-mono);color:var(--accent);font-size:.85rem;margin-bottom:1rem;letter-spacing:.1em}
.feat h3{font-size:1.3rem;color:#fff;margin-bottom:.5rem}
.feat p{color:#BCB2E8;font-size:.96rem}

/* ---------- cta ---------- */
.cta{padding:6rem clamp(1rem,5vw,2.4rem) 5rem;max-width:var(--maxw);margin:0 auto}
.cta__card{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(135deg,#fff, #F4F0FE);
  border:1px solid var(--rule);border-radius:40px;
  padding:clamp(3rem,6vw,5rem) clamp(1.4rem,5vw,3rem);box-shadow:var(--shadow-card);
}
.cta__glow{
  position:absolute;inset:auto -10% -40% -10%;height:80%;
  background:radial-gradient(50% 100% at 50% 100%,rgba(108,61,244,.28),transparent 70%);
}
.cta__card>*{position:relative;z-index:1}
.cta .section-kicker{text-align:center}
.cta__title{font-size:clamp(2.1rem,5vw,3.4rem);margin-bottom:.8rem}
.cta__sub{color:var(--ink2);max-width:46ch;margin:0 auto 2.2rem;font-size:1.08rem}
.signup{display:flex;gap:.6rem;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.signup__input{
  flex:1;min-width:220px;font-family:var(--font);font-size:1rem;
  padding:.92em 1.2em;border-radius:999px;border:1.5px solid var(--rule-strong);
  background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s;
}
.signup__input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
.signup__msg{min-height:1.4em;margin-top:1rem;font-weight:600;font-size:.95rem;color:var(--ride)}
.signup__msg.err{color:var(--run)}
.stores{display:flex;gap:1rem;justify-content:center;margin-top:2.4rem;flex-wrap:wrap}
.store-badge{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--night);color:#fff;border-radius:14px;padding:.6rem 1.1rem;
  opacity:.85;cursor:default;
}
.store-badge span{display:flex;flex-direction:column;line-height:1.1;text-align:left;font-weight:700;font-size:1rem}
.store-badge small{font-weight:400;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7}

/* ---------- footer ---------- */
.footer{
  max-width:var(--maxw);margin:0 auto;padding:3rem clamp(1rem,5vw,2.4rem) 4rem;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;text-align:center;
  border-top:1px solid var(--rule);
}
.footer__brand{display:flex;align-items:center;gap:.5rem;font-family:var(--font-d);font-weight:800;font-size:1.4rem}
.footer__logo{width:30px;height:30px;object-fit:contain}
.footer__tag{font-family:var(--font-d);color:var(--accent-deep);font-size:1.1rem}
.footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.4rem;color:var(--ink2);font-weight:500;margin:.4rem 0}
.footer__links a:hover{color:var(--accent-deep)}
.footer__copy{color:var(--ink3);font-size:.85rem;font-family:var(--font-mono)}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .nav__links{display:none}
  .intro{padding-top:calc(var(--nav-h) + 1rem);justify-content:flex-start}
  .intro__sub{max-width:none}
  .story{width:auto;right:0;text-align:left}
  .story .step:not(.is-active){display:none}
  .acard-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  html{scroll-behavior:auto}
  .step{opacity:1}
}