/* ============================================================
   StreetNet — premium dark landing
   style.css : tokens, base, type, buttons, nav, hero, footer
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  /* surfaces (cool near-black, layered) */
  --bg:            #07090f;
  --bg-2:          #090c14;
  --panel:         #0c1018;
  --panel-2:       #11151f;
  --panel-hi:      #161b27;
  --line:          rgba(255,255,255,.07);
  --line-2:        rgba(255,255,255,.12);

  /* text */
  --ink:           #eef2f8;
  --ink-soft:      #c4ccda;
  --ink-mut:       #8a93a6;
  --ink-faint:     #5b6273;

  /* brand accents (from the app) */
  --blue:          #4d9fff;
  --blue-deep:     #2f7bff;
  --orange:        #ff7a1a;
  --violet:        #8b6cff;
  --maroon:        #2e0f0f;

  /* semantic for telemetry */
  --faster:        #46e0a8;   /* split faster than PR */
  --slower:        #ff6a4d;

  /* glows */
  --glow-blue:     0 0 0 1px rgba(77,159,255,.35), 0 18px 60px -12px rgba(47,123,255,.55);
  --glow-orange:   0 0 0 1px rgba(255,122,26,.40), 0 18px 50px -14px rgba(255,122,26,.55);

  /* type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-disp: 'Russo One', var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* layout */
  --max:        1200px;
  --max-wide:   1320px;
  --gutter:     clamp(20px, 5vw, 48px);
  --radius:     20px;
  --radius-lg:  28px;
  --radius-sm:  13px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
::selection{ background:rgba(77,159,255,.30); color:#fff; }

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.02em; line-height:1.05; text-wrap:balance; }
p{ margin:0; }

/* ---------- shell / page background ---------- */
.page{ position:relative; isolation:isolate; }

/* deep base wash */
body::before{
  content:""; position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(120% 80% at 50% -10%, #0c1322 0%, var(--bg) 55%),
    var(--bg);
}
/* subtle asphalt grain + grid */
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 70%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 70%);
  opacity:.6;
}

/* ---------- aurora blobs ---------- */
.aurora{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.aurora span{
  position:absolute; border-radius:50%;
  filter:blur(80px); opacity:.55; mix-blend-mode:screen;
  will-change:transform;
}
.aurora .a1{ width:640px;height:640px; left:-140px;top:-160px;
  background:radial-gradient(circle, var(--blue-deep), transparent 65%);
  animation:drift1 26s var(--ease) infinite alternate; }
.aurora .a2{ width:560px;height:560px; right:-120px;top:-40px;
  background:radial-gradient(circle, var(--violet), transparent 65%); opacity:.42;
  animation:drift2 30s var(--ease) infinite alternate; }
.aurora .a3{ width:420px;height:420px; left:38%;top:120px;
  background:radial-gradient(circle, var(--orange), transparent 68%); opacity:.18;
  animation:drift3 34s var(--ease) infinite alternate; }

@keyframes drift1{ to{ transform:translate3d(80px,60px,0) scale(1.12);} }
@keyframes drift2{ to{ transform:translate3d(-70px,50px,0) scale(1.1);} }
@keyframes drift3{ to{ transform:translate3d(60px,-40px,0) scale(1.18);} }
@media (prefers-reduced-motion: reduce){ .aurora span{ animation:none !important; } }

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-wide{ max-width:var(--max-wide); }
.section{ position:relative; padding-block:clamp(72px,10vw,140px); }
.center{ text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--blue);
}
.eyebrow::before{ content:""; width:7px;height:7px;border-radius:50%;
  background:var(--blue); box-shadow:0 0 12px 2px rgba(77,159,255,.8); }
.eyebrow.is-orange{ color:var(--orange); }
.eyebrow.is-orange::before{ background:var(--orange); box-shadow:0 0 12px 2px rgba(255,122,26,.8); }

.section-head{ max-width:760px; }
.section-head.center{ margin-inline:auto; }
.section-title{
  font-size:clamp(28px,4.4vw,52px); line-height:1.04; margin-top:18px;
  letter-spacing:-.025em;
}
.section-sub{
  margin-top:18px; color:var(--ink-mut); font-size:clamp(16px,1.6vw,19px);
  line-height:1.6; max-width:60ch;
}
.section-sub.center{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:54px; padding:0 26px; border-radius:14px;
  font-weight:600; font-size:16px; letter-spacing:-.01em;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background .25s var(--ease), border-color .25s var(--ease);
}
.btn svg{ width:18px;height:18px; }
.btn-primary{
  color:#fff;
  background:linear-gradient(180deg,#5aa6ff,var(--blue-deep));
  box-shadow:0 10px 30px -10px rgba(47,123,255,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{ transform:translateY(-2px);
  box-shadow:0 16px 40px -10px rgba(47,123,255,.85), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-orange{
  color:#1a0e05;
  background:linear-gradient(180deg,#ff9647,var(--orange));
  box-shadow:0 10px 30px -10px rgba(255,122,26,.7), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-orange:hover{ transform:translateY(-2px);
  box-shadow:0 16px 44px -10px rgba(255,122,26,.9), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-ghost{
  color:var(--ink); background:rgba(255,255,255,.04);
  border-color:var(--line-2); backdrop-filter:blur(8px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); transform:translateY(-2px); }
.btn-lg{ height:60px; padding:0 32px; font-size:17px; }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,10,16,.72); backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav-inner{ display:flex; align-items:center; gap:28px; height:72px; }
.brand{ display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:-.02em; font-size:18px; }
.brand-mark{
  width:34px;height:34px;border-radius:9px; flex:none;
  background:linear-gradient(150deg,#3a1414,#220a0a);
  border:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center; white-space:nowrap; line-height:1; letter-spacing:-.5px;
  font-family:var(--font-mono); font-weight:800; font-size:12px; color:#f4ece9;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.brand-mark b{ color:#fff; }
.brand span{ color:var(--ink); }
.brand span i{ color:var(--blue); font-style:normal; }
.nav-links{ display:flex; gap:4px; margin-left:8px; }
.nav-links a{
  padding:9px 14px; border-radius:9px; font-size:15px; color:var(--ink-mut);
  transition:color .2s, background .2s;
}
.nav-links a:hover{ color:var(--ink); background:rgba(255,255,255,.05); }
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.nav-cta .btn{ height:44px; padding:0 18px; font-size:14.5px; border-radius:11px; }
.nav-burger{ display:none; }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--line); padding-block:56px 40px; position:relative; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:32px 24px; } .footer-grid > :first-child{ grid-column:1 / -1; } }
@media (max-width:440px){ .footer-grid{ grid-template-columns:1fr; gap:28px; } }
.footer .brand{ margin-bottom:16px; }
.footer-blurb{ color:var(--ink-mut); font-size:15px; max-width:34ch; }
.footer h4{ font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-faint);
  font-family:var(--font-mono); font-weight:600; margin-bottom:16px; }
.footer-col a, .footer-col p{ display:block; color:var(--ink-soft); font-size:15px; padding:6px 0; }
.footer-col a:hover{ color:var(--blue); }
.footer-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  color:var(--ink-faint); font-size:13.5px; font-family:var(--font-mono); }

/* ---------- scroll reveal ----------
   Entrance is TRANSFORM-ONLY — opacity is never reduced — so even a frozen
   animation frame shows all content (just slightly offset), never blank.
   The offset is applied only under body.anim-on, which app.js adds after it
   confirms rAF advances; otherwise content sits in its normal position. */
body.anim-on [data-reveal]{ transform:translateY(24px); transition:transform .75s var(--ease); }
body.anim-on [data-reveal].in{ transform:none; }
body.anim-on [data-reveal][data-delay="1"]{ transition-delay:.07s; }
body.anim-on [data-reveal][data-delay="2"]{ transition-delay:.14s; }
body.anim-on [data-reveal][data-delay="3"]{ transition-delay:.21s; }
body.anim-on [data-reveal][data-delay="4"]{ transition-delay:.28s; }
@media (prefers-reduced-motion: reduce){
  body.anim-on [data-reveal]{ transform:none !important; transition:none !important; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding-top:148px; padding-bottom:clamp(60px,8vw,110px); overflow:hidden; }
.hero-grid{ display:grid; gap:clamp(40px,5vw,64px); align-items:center; }

.hero-badge{
  display:inline-flex; align-items:center; gap:10px; padding:7px 7px 7px 14px;
  border:1px solid var(--line-2); border-radius:999px;
  background:rgba(255,255,255,.03); font-size:13.5px; color:var(--ink-soft);
  backdrop-filter:blur(8px);
}
.hero-badge b{ font-weight:600; color:var(--ink); }
.hero-badge .pill{
  font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.08em;
  padding:4px 9px; border-radius:999px; color:#0c1322;
  background:linear-gradient(180deg,#67b0ff,var(--blue)); text-transform:uppercase;
}
.hero h1{
  font-family:var(--font-disp); font-weight:400;
  font-size:clamp(32px,7.4vw,86px); line-height:.98; letter-spacing:-.01em;
  margin-top:26px; text-transform:none;
}
.hero h1 .grad{
  background:linear-gradient(110deg,#7bb6ff 0%, var(--blue) 40%, var(--violet) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero h1 .orange{ color:var(--orange); }
.hero-sub{ margin-top:26px; font-size:clamp(17px,1.9vw,21px); color:var(--ink-mut);
  line-height:1.55; max-width:54ch; }
.hero-actions{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; }
.hero-trust{ margin-top:26px; display:flex; flex-wrap:wrap; gap:20px 26px; align-items:center;
  color:var(--ink-faint); font-size:13.5px; font-family:var(--font-mono); }
.hero-trust span{ display:inline-flex; align-items:center; gap:8px; }
.hero-trust span::before{ content:""; width:6px;height:6px;border-radius:50%;
  background:var(--faster); box-shadow:0 0 10px 1px rgba(70,224,168,.7); }

/* hero stage (phone + floating cards) */
.hero-stage{ position:relative; }
.hero-cards{ position:absolute; inset:0; z-index:3; pointer-events:none; }

/* ---- hero variant A: split (default) ---- */
.hero-grid{ grid-template-columns:1.05fr .95fr; }
@media (max-width:920px){ .hero-grid{ grid-template-columns:1fr; } }

/* ---- variant B: centered ---- */
body.hero-b .hero-grid{ grid-template-columns:1fr; justify-items:center; text-align:center; max-width:900px; margin-inline:auto; }
body.hero-b .hero-sub{ margin-inline:auto; }
body.hero-b .hero-actions, body.hero-b .hero-trust{ justify-content:center; }
body.hero-b .hero-copy{ order:0; }
body.hero-b .hero-stage{ order:1; margin-top:44px; }

/* ---- variant C: asymmetric big ---- */
body.hero-c .hero-grid{ grid-template-columns:1.25fr .75fr; }
body.hero-c .hero h1{ font-size:clamp(42px,9vw,108px); }
body.hero-c .hero-stage{ transform:translateX(4%) rotate(-1deg); }
@media (max-width:920px){ body.hero-c .hero-grid{ grid-template-columns:1fr; } body.hero-c .hero-stage{ transform:none; } }

/* ---------- variant switcher (preview helper — removable) ---------- */
.variant-switch{
  position:fixed; right:18px; bottom:18px; z-index:90;
  display:flex; align-items:center; gap:6px; padding:7px 8px;
  background:rgba(12,16,24,.85); border:1px solid var(--line-2);
  border-radius:14px; backdrop-filter:blur(14px);
  box-shadow:0 12px 36px -10px rgba(0,0,0,.7); font-size:12.5px;
}
.variant-switch .vs-label{ font-family:var(--font-mono); color:var(--ink-faint);
  text-transform:uppercase; letter-spacing:.1em; font-size:10.5px; padding:0 6px; }
.variant-switch button{
  padding:7px 12px; border-radius:9px; border:1px solid transparent;
  background:transparent; color:var(--ink-mut); font-weight:600; font-size:13px;
  transition:all .2s;
}
.variant-switch button:hover{ color:var(--ink); background:rgba(255,255,255,.06); }
.variant-switch button.active{
  color:#fff; background:linear-gradient(180deg,#5aa6ff,var(--blue-deep));
  box-shadow:0 6px 18px -6px rgba(47,123,255,.8);
}