@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

/* ================= HOPPR · MARKETING SYSTEM (app-accurate) =================
 * Tokens mirror the iOS/Android app:
 *   bg #080810, card #0f0f1a, purple #c47aff, hot #ff3cac
 *   Space Grotesk, 14/20/24px radii, thin feather icons
 * ========================================================================= */

:root {
  /* surfaces */
  --bg:       #080810;
  --bg-card:  #0f0f1a;
  --bg-deep:  #05050d;
  --bg-alt:   #0a0a14;

  /* brand */
  --purple:    #c47aff;
  --purple-2:  #7c6aff;
  --purple-d:  #8b4fd6;
  --hot:       #ff3cac;
  --green:     #4ade80;
  --amber:     #ffd700;

  /* text — tuned for WCAG AA on the #080810 field
     t-0 #fff 19:1 · t-1 #b4b4be 9:1 · t-2 #8c8c99 6:1 (was #666 ≈ 3.4:1, failed)
     t-3 #63636f 3.3:1 decorative/large only · t-4 hairline accents */
  --t-0:  #ffffff;
  --t-1:  #b4b4be;
  --t-2:  #8c8c99;
  --t-3:  #63636f;
  --t-4:  #2a2a35;

  /* lines */
  --bd:       rgba(255,255,255,0.07);
  --bd-soft:  rgba(255,255,255,0.04);
  --bd-p:     rgba(196,122,255,0.22);
  --bd-p-2:   rgba(196,122,255,0.35);

  /* shadows / glow */
  --glow-p:   0 0 20px rgba(196,122,255,0.55);
  --glow-p-s: 0 0 8px  rgba(196,122,255,0.35);
  --glow-h:   0 0 10px rgba(255,60,172,0.55);

  /* radii */
  --r-xs: 8px;
  --r-s:  12px;
  --r-m:  14px;
  --r-l:  20px;
  --r-xl: 28px;

  /* fluid type */
  --fs-h1:   clamp(2.6rem, 6.4vw, 5rem);
  --fs-h2:   clamp(2rem, 4.2vw, 3.2rem);
  --fs-h3:   clamp(1.3rem, 2vw, 1.75rem);
  --fs-lede: clamp(1rem, 1.15vw, 1.15rem);
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--t-0);
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; background: none; border: none; cursor: none; }
img { display: block; max-width: 100%; }
em { font-style: normal; color: var(--purple); }

/* keyboard focus — the custom cursor hides the pointer, so a visible focus ring
   is the only affordance keyboard users get. Mouse clicks stay ring-free. */
:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  border-radius: 6px;
}

/* grain overlay — subtle, app-like */
body::after {
  content:''; position: fixed; inset: 0; pointer-events: none;
  z-index: 900; opacity: 0.22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* subtle fixed aurora — matches the app's ambient purple */
body::before {
  content:''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 85% -5%, rgba(196,122,255,0.10), transparent 65%),
    radial-gradient(ellipse 50% 40% at 5% 25%, rgba(255,60,172,0.055), transparent 65%);
}

/* ============ CURSOR ============ */
#cur {
  position: fixed; z-index: 9999; top: 0; left: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 10px var(--purple);
  pointer-events: none; mix-blend-mode: screen;
  transition: width .2s, height .2s, background .2s;
  transform: translate3d(-20px,-20px,0);
}
#cur-ring {
  position: fixed; z-index: 9998; top: 0; left: 0;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(196,122,255,0.4);
  pointer-events: none;
  transition: width .2s, height .2s, border-color .2s, background .2s;
  transform: translate3d(-200px,-200px,0);
}
.cur-hover #cur { width: 10px; height: 10px; background: var(--hot); box-shadow: 0 0 12px var(--hot); }
.cur-hover #cur-ring { width: 48px; height: 48px; border-color: rgba(255,60,172,0.5); background: rgba(255,60,172,0.05); }

@media (max-width: 900px) {
  body { cursor: auto; }
  button, a { cursor: pointer; }
  #cur, #cur-ring { display: none; }
}

/* ============ NAV ============ */
nav#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; height: 64px;
  background: rgba(8,8,16,0.72);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
nav#nav.scrolled {
  background: rgba(8,8,16,0.92);
  border-bottom-color: var(--bd);
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo img { height: 28px; display: block; }
.nav-logo-mark {
  font-family: 'Satoshi', sans-serif; font-weight: 800; font-size: 1.3rem;
  letter-spacing: -0.02em; text-transform: lowercase;
  background: linear-gradient(180deg, #fff 0%, #d6c7ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav-logo img { filter: drop-shadow(0 0 8px rgba(196,122,255,0.6)); }
.nav-logo-mark::before { display: none; }

.nav-links {
  display: flex; align-items: center; gap: 28px;
  list-style: none;
}
.nav-links a {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--t-1);
  transition: color .2s;
  position: relative;
}
.nav-links a:hover, .nav-links a.active { color: var(--t-0); }
.nav-links a.active::after {
  content:''; position: absolute; left: 0; right: 0; bottom: -22px;
  height: 1px; background: var(--purple); box-shadow: var(--glow-p-s);
}
.nav-cta {
  padding: 10px 16px;
  background: rgba(196,122,255,0.07);
  color: var(--t-0) !important;
  border: 1px solid var(--bd-p-2);
  border-radius: 999px;
  font-family: 'Satoshi', sans-serif;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: all .2s !important;
}
.nav-cta:hover {
  background: var(--purple);
  color: #08060f !important;
  border-color: var(--purple);
  box-shadow: 0 6px 30px rgba(196,122,255,0.4);
}
.nav-cta::after { display: none !important; }

/* hamburger */
.hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  padding: 8px; z-index: 600;
}
.hamburger span {
  display: block; width: 20px; height: 1.5px;
  background: var(--t-0); border-radius: 1px;
  transition: all .3s cubic-bezier(.16,1,.3,1);
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mob-overlay {
  display: none; position: fixed; inset: 0; z-index: 498;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .3s;
}
.mob-overlay.open { display: block; opacity: 1; }

.mob-menu {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 82%; max-width: 320px;
  background: var(--bg-card);
  border-left: 1px solid var(--bd);
  padding: 96px 32px 40px;
  z-index: 499;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.mob-menu.open { transform: translateX(0); }
.mob-menu a {
  padding: 18px 0;
  border-bottom: 1px solid var(--bd-soft);
  color: var(--t-1); font-size: 0.95rem; font-weight: 500;
  transition: color .2s, padding-left .3s;
}
.mob-menu a:hover { color: var(--t-0); padding-left: 6px; }
.mob-menu .m-cta {
  margin-top: 28px;
  padding: 14px 20px;
  background: var(--purple);
  color: #fff !important;
  border-radius: var(--r-m);
  text-align: center;
  font-weight: 700;
  border-bottom: none !important;
}

@media (max-width: 900px) {
  nav#nav { padding: 0 22px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
}

/* ============ LAYOUT ============ */
.si { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.si-narrow { max-width: 820px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 700px) {
  .si, .si-narrow { padding: 0 22px; }
}

section { padding: 120px 0; position: relative; }
.page-hero {
  padding: 160px 40px 80px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 700px) {
  section { padding: 80px 0; }
  .page-hero { padding: 120px 22px 56px; }
}

/* ============ TYPOGRAPHY ============ */
h1, h2, h3, h4 {
  font-family: 'Satoshi', sans-serif;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--t-0);
}

.d1 { font-size: var(--fs-h1); }
.d2 { font-size: var(--fs-h2); }
.d3 { font-size: var(--fs-h3); font-weight: 700; }

.lede {
  color: var(--t-1);
  font-size: var(--fs-lede);
  line-height: 1.6;
  font-weight: 400;
  max-width: 560px;
}

/* section eyebrow */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--purple);
}
.tag::before {
  content:''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--purple); box-shadow: var(--glow-p-s);
}

/* live pill */
.live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(255,60,172,0.08);
  border: 1px solid rgba(255,60,172,0.28);
  border-radius: 100px;
  font-size: 0.72rem; font-weight: 600;
  color: var(--t-0);
}
.live-pill::before {
  content:''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--hot); box-shadow: 0 0 6px var(--hot);
  animation: blip 1.5s ease-in-out infinite;
}
@keyframes blip {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px;
  border-radius: var(--r-m);
  font-family: 'Satoshi', sans-serif;
  font-size: 0.88rem; font-weight: 700;
  letter-spacing: 0.005em;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-p {
  background: var(--purple);
  color: #fff;
  box-shadow: 0 4px 22px rgba(196,122,255,0.38);
}
.btn-p:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(196,122,255,0.55); }
.btn-p:active { transform: translateY(0); }

.btn-g {
  background: transparent;
  color: var(--t-0);
  border: 1px solid var(--bd);
}
.btn-g:hover { border-color: var(--bd-p); background: rgba(196,122,255,0.04); }

.btn-arr { font-size: 1rem; line-height: 1; transition: transform .2s; }
.btn:hover .btn-arr { transform: translateX(2px); }

/* app store buttons */
.store-row { display: flex; gap: 10px; flex-wrap: wrap; }
.store-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--bd);
  border-radius: var(--r-m);
  transition: all .2s;
  min-width: 170px;
}
.store-btn:hover { border-color: var(--bd-p); background: rgba(196,122,255,0.04); transform: translateY(-1px); }
.store-btn .ico { width: 22px; height: 22px; flex-shrink: 0; }
.store-btn .ico svg { width: 100%; height: 100%; }
.store-btn .tx { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-btn .small { font-size: 0.58rem; color: var(--t-2); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.store-btn .big { font-size: 0.92rem; color: var(--t-0); font-weight: 700; letter-spacing: -0.01em; }

/* ============ CARDS ============ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--bd);
  border-radius: var(--r-l);
  padding: 28px;
  transition: border-color .2s, transform .2s, background .2s;
}
.card:hover { border-color: var(--bd-p); }
.card-hov:hover { transform: translateY(-2px); background: rgba(196,122,255,0.03); }

.kicker {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px;
}
.kicker .num {
  color: var(--t-3); font-family: inherit; font-weight: 600;
}

/* ============ FOOTER ============ */
footer {
  border-top: 1px solid var(--bd);
  padding: 56px 40px 48px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center;
  margin-top: 60px;
}
footer .ft-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Satoshi'; font-weight: 800; font-size: 1rem;
  letter-spacing: -0.02em;
}
footer .ft-logo::before {
  content:''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--purple); box-shadow: var(--glow-p-s);
}
.ft-meta { color: var(--t-2); font-size: 0.78rem; }
.ft-meta em { color: var(--purple); }
.foot-links { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; }
.foot-links a { font-size: 0.78rem; color: var(--t-2); transition: color .2s; }
.foot-links a:hover { color: var(--t-0); }

/* ============ UTILITIES ============ */
.hr {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--bd-p) 50%, transparent);
}

/* reveal on scroll — never hide; just animate if animation engine runs */
.sr { opacity: 1; }
.js .sr.hide { opacity: 0; }
.js .sr.hide.in {
  animation: srIn .7s cubic-bezier(.16,1,.3,1) forwards;
}
.js .sr.d1.in { animation-delay: .08s; }
.js .sr.d2.in { animation-delay: .16s; }
.js .sr.d3.in { animation-delay: .24s; }
.js .sr.d4.in { animation-delay: .32s; }
@keyframes srIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* reduced motion — kill looping/idle motion and smooth scroll, keep all content
   visible. Reveals settle instantly; the live-pill stops pulsing but stays lit. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .sr, .sr.hide, .js .sr.hide, .js .sr.hide.in {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============ APP SCREEN / PHONE MOCK ============ */
.phone {
  position: relative;
  width: 280px;
  aspect-ratio: 9 / 19.5;
  background: #000;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 44px;
  padding: 8px;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.7),
    0 0 50px rgba(196,122,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.phone .notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 20px;
  background: #000; border-radius: 0 0 12px 12px;
  z-index: 10;
}
.phone .screen {
  width: 100%; height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: var(--bg);
  position: relative;
}
.phone .statusbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 26px 6px;
  font-size: 0.75rem; font-weight: 700;
  color: #fff;
}
.phone .statusbar .sbr {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.7rem;
}