:root {
  --blue: #4a2bf5;
  --blue-dark: #2e16d9;
  --purple: #bd2ee8;
  --pink: #ed2487;
  --orange: #fa7a1f;
  --green: #24c762;
  --ink: #071226;
  --muted: #697184;
  --line: rgba(18, 24, 38, .12);
  --background: #f2f2f7;
  --surface: #ffffff;
  --elevated: #fafafe;
  --soft-blue: #f3efff;
  --soft-purple: #fbedfb;
  --gradient: linear-gradient(135deg, var(--blue), var(--purple) 42%, var(--pink) 68%, var(--orange));
  --shadow: 0 18px 52px rgba(21, 24, 38, .12);
  --radius-lg: 30px;
  --radius-md: 22px;
  --radius-sm: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Segoe UI, sans-serif;
  background: var(--background);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
::selection { background: rgba(74,43,245,.18); }
.skip-link { position: absolute; top: -48px; left: 16px; z-index: 999; padding: 10px 14px; border-radius: 999px; background: var(--ink); color: white; }
.skip-link:focus { top: 16px; }
.shell { width: min(1120px, calc(100% - 36px)); margin: 0 auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(160%) blur(18px);
  background: rgba(242,242,247,.78);
  border-bottom: 1px solid rgba(18,24,38,.08);
}
.nav-shell { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand-lockup { display: flex; align-items: center; width: 160px; min-width: 160px; }
.brand-wordmark { width: 160px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 8px; }
.site-nav a { color: rgba(7,18,38,.74); font-size: 14px; font-weight: 800; padding: 10px 12px; border-radius: 999px; }
.site-nav a:hover { color: var(--ink); background: rgba(255,255,255,.82); }
.site-nav .nav-pill { color: white; background: var(--gradient); box-shadow: 0 10px 26px rgba(74,43,245,.18); }
.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 11px; }
.nav-toggle span { display: block; height: 2px; margin: 4px 0; border-radius: 999px; background: var(--ink); }

.hero { position: relative; overflow: hidden; padding: 70px 0 80px; }
.hero::before { content: ""; position: absolute; width: 720px; height: 720px; right: -220px; top: -260px; background: radial-gradient(circle, rgba(189,46,232,.22), transparent 62%); pointer-events: none; }
.hero::after { content: ""; position: absolute; width: 560px; height: 560px; left: -220px; bottom: -260px; background: radial-gradient(circle, rgba(74,43,245,.13), transparent 60%); pointer-events: none; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(330px, .72fr); gap: 64px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.78); border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 900; box-shadow: 0 10px 28px rgba(20,24,38,.06); }
.pulse-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 6px rgba(36,199,98,.13); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 22px 0 18px; max-width: 760px; font-size: clamp(46px, 6.4vw, 82px); line-height: .92; letter-spacing: -.07em; font-weight: 950; }
h2 { margin-bottom: 14px; font-size: clamp(32px, 4vw, 54px); line-height: .98; letter-spacing: -.055em; font-weight: 950; }
h3 { margin-bottom: 8px; letter-spacing: -.025em; }
.hero-lede { max-width: 680px; color: var(--muted); font-size: clamp(17px, 2vw, 21px); line-height: 1.48; font-weight: 650; }
.store-row, .hero-actions, .trust-strip { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.store-row { margin-top: 28px; }
.store-button { min-width: 166px; display: inline-flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(20,24,38,.08); }
.store-button.primary { background: var(--ink); color: white; border-color: transparent; }
.store-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 24px; line-height: 1; }
.play-icon { font-size: 18px; color: var(--blue); }
.store-button small { display: block; font-size: 10px; font-weight: 800; opacity: .72; line-height: 1.1; }
.store-button strong { display: block; font-size: 17px; font-weight: 950; line-height: 1.1; }
.hero-actions { margin-top: 18px; }
.main-cta, .secondary-cta, .beta-form button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; font-weight: 950; border: 0; cursor: pointer; }
.main-cta, .beta-form button { background: var(--gradient); color: white; box-shadow: 0 16px 34px rgba(74,43,245,.22); }
.secondary-cta { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.trust-strip { margin-top: 26px; color: var(--muted); font-size: 13px; font-weight: 900; }
.trust-strip span { padding: 7px 10px; background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 999px; }

.hero-preview { display: grid; justify-items: center; gap: 12px; }
.phone-frame { width: min(100%, 382px); padding: 12px; border-radius: 44px; background: linear-gradient(160deg, #181a22, #05070c); box-shadow: 0 34px 90px rgba(7,18,38,.28), inset 0 0 0 1px rgba(255,255,255,.08); }
.phone-glass { overflow: hidden; height: 736px; border-radius: 34px; background: var(--background); border: 1px solid rgba(255,255,255,.12); }
.phone-status { display: flex; justify-content: space-between; padding: 14px 22px 6px; font-size: 12px; font-weight: 900; color: rgba(7,18,38,.74); }
.app-header-preview { height: 58px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding: 0 15px; }
.app-header-preview img { width: 174px; margin: 0 auto; }
.round-icon { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.98); color: var(--ink); font-weight: 900; }
.mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 16px 6px; }
.mode-toggle span { display: grid; place-items: center; height: 38px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-size: 15px; font-weight: 800; }
.mode-toggle .selected { color: white; background: var(--gradient); border-color: transparent; }
.section-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px 8px; font-size: 16px; }
.filter-pill { padding: 8px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 12px; font-weight: 900; }
.event-card { margin: 8px 14px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,.035); }
.hot-card { border: 2px solid rgba(255,214,10,.95); }
.card-topline { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; padding: 11px 12px 4px; }
.card-topline h3 { margin: 0; font-size: 17px; line-height: 1.13; font-weight: 950; }
.status-stack { display: grid; gap: 4px; justify-items: end; }
.mini { display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 9px; font-weight: 950; }
.mini.hot { background: #ffd60a; color: #171000; }
.mini.live { color: white; background: #ff2d55; }
.mini.soon { color: var(--blue); background: var(--soft-blue); }
.host-row { display: flex; align-items: center; gap: 8px; padding: 2px 12px 8px; }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: #101119; color: white; font-size: 12px; font-weight: 950; }
.avatar.soft { background: var(--soft-blue); color: var(--blue); }
.host-row b { display: block; color: var(--blue); font-size: 12.9px; line-height: 1.1; }
.host-row small { display: block; color: var(--muted); font-size: 10px; font-weight: 800; }
.event-body-row { display: grid; grid-template-columns: 1fr 104px; gap: 11px; padding: 0 12px 10px; }
.meta-list { display: grid; gap: 4px; color: var(--muted); font-size: 11.5px; font-weight: 800; }
.event-thumb { min-height: 82px; border-radius: 13px; display: grid; place-items: center; color: white; font-size: 12px; font-weight: 950; background: var(--gradient); border: 1px solid rgba(255,255,255,.4); }
.event-thumb.purple { background: linear-gradient(135deg, var(--blue), var(--purple)); }
.pill-row, .action-row { display: flex; gap: 5px; align-items: center; padding: 0 12px 10px; }
.pill-row span { padding: 5px 8px; border-radius: 999px; background: var(--soft-blue); color: var(--blue); font-size: 9px; font-weight: 950; }
.action-row { border-top: 1px solid rgba(18,24,38,.08); padding: 8px 10px 9px; color: var(--muted); font-size: 12px; font-weight: 950; }
.action-row span { flex: 1; }
.action-row span:last-child { text-align: right; color: var(--ink); }
.action-row.muted span:last-child { color: var(--muted); }
.bottom-tabs { display: grid; grid-template-columns: repeat(5,1fr); align-items: center; margin-top: 10px; padding: 10px 8px 12px; border-top: 1px solid var(--line); background: rgba(255,255,255,.78); font-size: 10px; font-weight: 950; color: var(--muted); text-align: center; }
.bottom-tabs .active { color: var(--blue); }
.preview-note { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; }

.section { padding: 86px 0; }
.light-section { background: rgba(255,255,255,.46); border-top: 1px solid rgba(18,24,38,.06); border-bottom: 1px solid rgba(18,24,38,.06); }
.section-kicker { margin-bottom: 12px; color: var(--blue); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 950; }
.split-section { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 48px; align-items: start; }
.split-section p, .section-heading p, .business-copy p, .about-copy p, .beta-card p { color: var(--muted); line-height: 1.62; font-weight: 650; font-size: 17px; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.feature-card, .large-card, .dashboard-card, .beta-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); }
.feature-card { padding: 20px; }
.feature-card span { display: inline-grid; place-items: center; width: 34px; height: 28px; border-radius: 999px; color: white; background: var(--gradient); font-size: 12px; font-weight: 950; margin-bottom: 18px; }
.feature-card h3, .large-card h3 { margin-bottom: 8px; font-size: 20px; }
.feature-card p, .large-card p { color: var(--muted); line-height: 1.5; font-weight: 650; margin-bottom: 0; }
.section-heading { max-width: 780px; text-align: center; }
.three-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 30px; }
.large-card { padding: 26px; }
.card-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: white; background: var(--gradient); margin-bottom: 24px; font-weight: 950; }
.business-section { background: radial-gradient(circle at top right, rgba(237,36,135,.12), transparent 38%), var(--background); }
.business-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(320px, .78fr); gap: 46px; align-items: center; }
.business-copy .main-cta { margin-top: 10px; }
.dashboard-card { padding: 22px; }
.dashboard-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.dashboard-top strong { font-size: 22px; letter-spacing: -.03em; }
.dashboard-top span { color: white; background: var(--gradient); padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 950; }
.metric-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.metric-row div { padding: 14px; border-radius: 18px; background: var(--soft-blue); border: 1px solid rgba(74,43,245,.08); }
.metric-row b { display: block; font-size: 23px; letter-spacing: -.04em; }
.metric-row small { color: var(--muted); font-weight: 800; }
.chart-lines { display: grid; gap: 8px; margin: 24px 0; }
.chart-lines span { display: block; height: 13px; border-radius: 999px; background: var(--gradient); opacity: .95; }
.chart-lines span:nth-child(2) { width: 82%; }
.chart-lines span:nth-child(3) { width: 62%; }
.chart-lines span:nth-child(4) { width: 74%; }
.dashboard-list { display: grid; gap: 8px; }
.dashboard-list p { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink); font-weight: 800; }
.dashboard-list span { color: var(--muted); }
.narrow-gap { gap: 30px; }
.beta-section { padding-top: 40px; }
.beta-card { display: grid; grid-template-columns: minmax(0,.9fr) minmax(320px,.7fr); gap: 34px; padding: clamp(24px, 4vw, 46px); overflow: hidden; position: relative; }
.beta-card::before { content: ""; position: absolute; right: -130px; top: -170px; width: 340px; height: 340px; background: radial-gradient(circle, rgba(74,43,245,.13), transparent 67%); }
.beta-card > * { position: relative; z-index: 1; }
.beta-form { display: grid; gap: 12px; }
.beta-form label { display: grid; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 950; }
.beta-form input, .beta-form select, .beta-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px; background: #fff; color: var(--ink); outline: none; }
.beta-form input:focus, .beta-form select:focus, .beta-form textarea:focus { border-color: rgba(74,43,245,.45); box-shadow: 0 0 0 4px rgba(74,43,245,.1); }
.beta-form button { width: 100%; margin-top: 2px; }
.hidden { display: none; }
.form-note { margin: 2px 0 0; font-size: 12px !important; line-height: 1.35 !important; }
.site-footer { padding: 48px 0; background: #0b0d14; color: white; }
.footer-grid { display: grid; grid-template-columns: 1.3fr .7fr .7fr; gap: 28px; }
.footer-logo { width: 160px; margin-bottom: 14px; }
.site-footer p { color: rgba(255,255,255,.64); font-weight: 650; }
.site-footer div { display: grid; align-content: start; gap: 10px; }
.site-footer strong { margin-bottom: 4px; }
.site-footer a { color: rgba(255,255,255,.68); font-weight: 750; }
.site-footer a:hover { color: white; }

.thanks-page { min-height: 100vh; display: grid; place-items: center; background: var(--background); }
.thanks-shell { width: min(620px, calc(100% - 36px)); }
.thanks-logo { width: 170px; margin: 0 auto 24px; }
.thanks-card { padding: 36px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; }
.thanks-card h1 { font-size: clamp(34px, 6vw, 54px); margin: 8px 0 12px; }
.thanks-card p { color: var(--muted); font-weight: 650; line-height: 1.55; }
.thanks-card .main-cta { margin-top: 12px; }

@media (max-width: 900px) {
  .hero-grid, .split-section, .business-grid, .beta-card { grid-template-columns: 1fr; }
  .hero { padding-top: 46px; }
  .hero-grid { gap: 44px; }
  .business-grid { gap: 28px; }
  .three-card-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .shell { width: min(100% - 28px, 1120px); }
  .nav-toggle { display: block; }
  .site-nav { position: absolute; left: 14px; right: 14px; top: 72px; display: none; grid-template-columns: 1fr; padding: 10px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); }
  .site-nav.is-open { display: grid; }
  .site-nav a { padding: 13px 14px; }
  .feature-grid { grid-template-columns: 1fr; }
  .phone-frame { width: min(100%, 360px); }
  .phone-glass { height: 690px; }
  h1 { font-size: clamp(42px, 15vw, 64px); }
  .hero-lede { font-size: 17px; }
  .store-button { width: 100%; }
  .main-cta, .secondary-cta { width: 100%; }
  .section { padding: 64px 0; }
  .beta-card { padding: 22px; }
}
@media (max-width: 390px) {
  .event-body-row { grid-template-columns: 1fr 92px; }
  .event-thumb { min-height: 72px; }
  .app-header-preview img { width: 154px; }
  .phone-glass { height: 658px; }
}