:root {
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Hanken Grotesk', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --c-bg: #0E1213;
  --c-bg-alt: #0C1011;
  --c-surface: #12181A;
  --c-border: #1C2223;
  --c-border-2: #202829;
  --c-border-3: #2A3132;

  --c-text: #F4F6F4;
  --c-text-dim: #C9D1CE;
  --c-text-dim-2: #9FB0AC;
  --c-text-mute: #5B6664;

  --c-teal: #14B8A6;
  --c-teal-dark: #0E9E8E;
  --c-teal-deep: #052421;
  --c-teal-line: #0BA595;
  --c-lime: #84CC16;

  --c-badge-border: #1F5F58;
  --c-badge-bg: #0F1F1D;
  --c-badge-text: #7FD9CE;

  --c-light-bg: #F4F6F4;
  --c-light-text: #0E1213;
  --c-light-border: #E2E6E3;
  --c-avatar-bg: #E4EEEB;

  --c-radar-1: #1A2122;
  --c-radar-2: #1F2829;
  --c-radar-3: #24302F;

  --wrap: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  width: 100%;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-display); margin: 0; }
p { margin: 0; }
a { color: var(--c-teal); text-decoration: none; }
a:hover { color: var(--c-teal-dark); }
img { max-width: 100%; }
input::placeholder { color: var(--c-text-mute); }
input:focus { outline: none; border-color: var(--c-teal) !important; }

.teal { color: var(--c-teal); }
.teal-dark { color: var(--c-teal-dark); }
.dim { color: var(--c-text-mute); }

.hide-mobile { display: flex; }
.hide-desktop { display: none; }

.mono-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-teal);
  margin-bottom: 1.25rem;
}
.eyebrow-light { color: var(--c-teal-dark); }
.eyebrow-cta { color: #063A34; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  text-align: center;
}
.btn-primary { background: var(--c-teal); color: var(--c-teal-deep); }
.btn-primary:hover { background: var(--c-teal); color: var(--c-teal-deep); opacity: 0.92; }
.btn-cta { background: var(--c-teal-deep); color: var(--c-text); }
.btn-sm { font-size: 1.0625rem; padding: 0.75rem 1.375rem; }
.btn-block { width: 100%; font-size: 1.125rem; padding: 1.125rem 1.875rem; }

/* ===== NAV ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(14, 18, 19, 0.72);
  border-bottom: 1px solid var(--c-border);
}
.nav-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.25rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 1.25rem; }
.brand-mark { display: flex; align-items: center; gap: 0.875rem; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; }
.brand-sep { width: 1px; height: 26px; background: var(--c-border-3); }
.brand-toi { align-items: center; gap: 0.5625rem; }
.brand-toi .toi-logo-sm { height: 17px; width: auto; opacity: 0.92; }
.nav-links { display: flex; align-items: center; gap: 2.25rem; }
.nav-links a:not(.btn) { color: var(--c-text-dim); font-size: 1.0625rem; }

/* ===== HERO ===== */
.hero-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 6.875rem 2.5rem 6rem;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 4.5rem;
  align-items: center;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--c-badge-border);
  background: var(--c-badge-bg);
  border-radius: 100px;
  padding: 0.5625rem 1.125rem;
  margin-bottom: 2.125rem;
}
.badge-dot { position: relative; display: inline-flex; width: 8px; height: 8px; }
.badge-dot-ping { position: absolute; inset: 0; border-radius: 100px; background: var(--c-lime); animation: pulseRing 2.6s ease-out infinite; }
.badge-dot-core { position: relative; width: 8px; height: 8px; border-radius: 100px; background: var(--c-lime); }
.badge-label { color: var(--c-badge-text); }
@keyframes pulseRing { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(2.4); opacity: 0; } 100% { opacity: 0; } }

.hero h1 { font-weight: 700; font-size: 4.875rem; line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 1.625rem; text-wrap: balance; }
.hero-lead { font-size: 1.5rem; line-height: 1.55; color: var(--c-text-dim); max-width: 560px; margin: 0 0 2.5rem; }

.waitlist-form { display: flex; flex-direction: column; gap: 0.875rem; max-width: 520px; }
.form-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.form-fields { display: flex; flex-direction: column; gap: 0.75rem; }
.form-fields[hidden], .form-success[hidden] { display: none; }
.waitlist-form input {
  flex: 1;
  min-width: 180px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-3);
  border-radius: 11px;
  padding: 1.125rem 1.25rem;
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--c-text);
  width: 100%;
}
.waitlist-form .iti { flex: 1; min-width: 180px; width: 100%; }
.waitlist-form .iti input { width: 100%; padding-left: 4.5rem; }
.form-success {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--c-badge-bg);
  border: 1px solid var(--c-badge-border);
  border-radius: 12px;
  padding: 1.375rem 1.5rem;
}
.success-icon { flex: none; }
.success-title { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; color: var(--c-text); }
.success-sub { font-size: 1.0625rem; color: var(--c-text-dim-2); margin-top: 0.125rem; }

.toi-mobile-note { align-items: center; justify-content: center; gap: 0.5625rem; margin-top: 1.625rem; }
.toi-mobile-note .toi-logo-sm { height: 16px; width: auto; opacity: 0.92; }

.hero-visual { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.radar-ring { position: absolute; border-radius: 50%; border: 1px solid var(--c-radar-1); }
.radar-ring-1 { width: 100%; height: 100%; }
.radar-ring-2 { width: 70%; height: 70%; border-color: var(--c-radar-2); }
.radar-ring-3 { width: 42%; height: 42%; border-color: var(--c-radar-3); }
.radar-mark { position: relative; z-index: 2; }
.radar-dot { position: absolute; border-radius: 50%; }
.radar-dot-1 { top: 14%; right: 18%; width: 14px; height: 14px; background: var(--c-border-3); }
.radar-dot-2 { bottom: 20%; left: 12%; width: 10px; height: 10px; background: var(--c-teal); }
.radar-dot-3 { bottom: 32%; right: 10%; width: 8px; height: 8px; background: var(--c-border-3); }

/* ===== TENSION ===== */
.tension { border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); background: var(--c-bg-alt); }
.tension-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 4rem 2.5rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  align-items: center;
}
.tension-statement { font-family: var(--font-display); font-weight: 500; font-size: 2.375rem; line-height: 1.35; letter-spacing: -0.02em; }
.tension-stats { display: flex; flex-direction: column; gap: 1.375rem; }
.stat { display: flex; align-items: baseline; gap: 1.125rem; }
.stat-num { font-family: var(--font-display); font-weight: 700; font-size: 2.75rem; }
.stat-desc { font-size: 1.1875rem; color: var(--c-text-dim-2); line-height: 1.4; }
.stat-divider { height: 1px; background: var(--c-border); }

/* ===== LIGHT SECTIONS (storytelling) ===== */
.storytelling { background: var(--c-light-bg); color: var(--c-light-text); }
.section-inner { max-width: var(--wrap); margin: 0 auto; padding: 6.5rem 2.5rem; }
.heading-light { font-weight: 600; font-size: 3rem; letter-spacing: -0.03em; margin: 0 0 3.5rem; max-width: 920px; line-height: 1.1; }
.story-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
.story-card {
  background: #FFFFFF;
  border: 1px solid var(--c-light-border);
  border-radius: 18px;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}
.story-head { display: flex; align-items: center; gap: 1rem; }
.avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--c-avatar-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.375rem;
  color: var(--c-teal-dark); flex: none;
}
.story-tag { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-teal-dark); }
.story-name { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin-top: 0.125rem; }
.story-before { font-size: 1.3125rem; line-height: 1.55; color: var(--c-text-mute); }
.story-after { font-size: 1.3125rem; line-height: 1.55; color: var(--c-light-text); }
.story-divider { display: flex; align-items: center; gap: 0.625rem; }
.story-divider-bar { width: 20px; height: 2px; background: var(--c-teal); display: inline-block; }
.story-divider-label { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-teal); }

/* ===== HOW ===== */
.how h2, .product h2 { font-weight: 600; font-size: 3.25rem; letter-spacing: -0.03em; margin: 0 0 3.75rem; max-width: 820px; line-height: 1.08; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.how-card { background: var(--c-surface); border: 1px solid var(--c-border-2); border-radius: 16px; padding: 2.5rem 2.25rem; }
.step-num { font-family: var(--font-mono); font-size: 0.9375rem; color: var(--c-teal); letter-spacing: 0.1em; }
.step-title { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; margin: 1.25rem 0 0.75rem; }
.step-desc { font-size: 1.1875rem; line-height: 1.55; color: var(--c-text-dim-2); }

/* ===== PRODUCT ===== */
.product { background: var(--c-bg-alt); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.section-head-center { text-align: center; margin-bottom: 3.5rem; }
.section-head-center .eyebrow { margin-bottom: 1.125rem; }
.section-head-center h2 { margin: 0; }
.product-mock {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 640px;
  margin: 0 auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: 16px;
  padding: 1.375rem;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.7);
}
.product-mock-head { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1.25rem; }
.product-mock-head span { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; }
.mock-row {
  background: var(--c-bg);
  border: 1px solid var(--c-border-2);
  border-radius: 12px;
  padding: 1.125rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.mock-label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8A9490; }
.mock-value { font-family: var(--font-display); font-weight: 700; font-size: 2.125rem; margin-top: 0.375rem; }
.mock-tag { font-size: 0.9375rem; color: #8A9490; }
.mock-tag-up { color: var(--c-lime); }
.mock-chart { background: var(--c-bg); border: 1px solid var(--c-border-2); border-radius: 12px; padding: 1.125rem 1.25rem; display: flex; align-items: flex-end; gap: 0.5rem; height: 96px; }
.mock-chart .bar { flex: 1; height: var(--h); background: var(--c-border-2); border-radius: 4px 4px 0 0; }
.mock-chart .bar-active { background: var(--c-teal); }

/* ===== VALUES ===== */
.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.625rem 3.75rem; }
.value { border-top: 1px solid var(--c-border-2); padding-top: 1.625rem; }
.value h3 { font-weight: 600; font-size: 1.625rem; margin-bottom: 0.625rem; }
.value p { font-size: 1.1875rem; color: var(--c-text-dim-2); line-height: 1.55; }

/* ===== CTA FINAL ===== */
.cta-final { background: var(--c-teal); color: var(--c-teal-deep); }
.cta-inner { max-width: 1000px; margin: 0 auto; padding: 6.875rem 2.5rem; text-align: center; }
.heading-cta { font-weight: 700; font-size: 3.75rem; letter-spacing: -0.03em; margin: 0 0 1.25rem; line-height: 1.04; }
.cta-lead { font-size: 1.375rem; line-height: 1.5; color: #0A3A34; max-width: 640px; margin: 0 auto 2.75rem; }
.waitlist-form--cta { max-width: 560px; margin: 0 auto; text-align: left; }
.waitlist-form--cta input {
  background: var(--c-light-bg);
  border: 1px solid var(--c-teal-line);
  color: var(--c-light-text);
  padding: 1.1875rem 1.375rem;
}
.form-success--cta {
  display: inline-flex;
  background: var(--c-teal-deep);
  color: var(--c-text);
  border: none;
}
.form-success--cta .success-title { font-size: 1.375rem; }
.cta-whatsapp { margin-top: 1.625rem; font-size: 1.125rem; color: #0A3A34; }
.cta-whatsapp a { color: var(--c-teal-deep); font-weight: 700; }

/* ===== FOOTER ===== */
.footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 3.25rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.footer-left { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; }
.footer-link { display: inline-flex; align-items: center; gap: 0.5625rem; color: var(--c-text-dim); font-size: 1.0625rem; }
.footer-right { display: flex; align-items: center; gap: 1.375rem; }
.footer-toi-label { text-align: right; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-text-mute); }
.footer-toi-label div:last-child { margin-top: 0.1875rem; }
.footer-toi-link { display: inline-flex; }
.footer-toi-link .toi-logo { height: 30px; width: auto; }
.footer-divider { display: none; width: 100%; height: 1px; background: var(--c-border); }

/* =====================================================
   MOBILE (<= 860px) — merges the Landing Mobile comp
   ===================================================== */
@media (max-width: 860px) {
  .hide-mobile { display: none !important; }
  .hide-desktop { display: flex !important; }

  .nav-inner { padding: 0.875rem 1.25rem; }
  .brand-name { font-size: 1.1875rem; }

  .hero-inner { grid-template-columns: 1fr; gap: 0; padding: 2.5rem 1.25rem 3rem; }
  .hero-visual { order: -1; width: 210px; height: 210px; margin: 0 auto 2.25rem; }
  .badge { margin: 0 auto 1.375rem; }
  .hero-content { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero h1 { font-size: 2.75rem; text-align: center; }
  .hero-lead { font-size: 1.125rem; text-align: center; max-width: none; margin-bottom: 1.875rem; }
  .waitlist-form { width: 100%; }
  .form-row { flex-direction: column; }

  .tension-inner { grid-template-columns: 1fr; gap: 2.125rem; padding: 2.75rem 1.25rem; }
  .tension-statement { font-size: 1.625rem; }
  .stat-num { font-size: 2.25rem; }
  .stat-desc { font-size: 1rem; }

  .section-inner { padding: 3.5rem 1.25rem; }
  .heading-light { font-size: 1.875rem; margin-bottom: 1.875rem; }
  .story-grid { grid-template-columns: 1fr; gap: 1rem; }
  .story-card { padding: 1.5rem; gap: 0.9375rem; }
  .story-before, .story-after { font-size: 1rem; }

  .how h2, .product h2 { font-size: 2rem; margin-bottom: 2rem; }
  .how-grid { grid-template-columns: 1fr; gap: 1rem; }
  .how-card { padding: 1.625rem 1.5rem; }
  .step-title { font-size: 1.4375rem; }
  .step-desc { font-size: 1rem; }

  .section-head-center { margin-bottom: 2rem; text-align: left; }

  .values-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .value h3 { font-size: 1.375rem; }
  .value p { font-size: 1rem; }

  .cta-inner { padding: 3.5rem 1.25rem; }
  .heading-cta { font-size: 2.125rem; }
  .cta-lead { font-size: 1.0625rem; margin-bottom: 1.875rem; }

  .footer-inner { flex-direction: column; align-items: flex-start; padding: 2.25rem 1.25rem; }
  .footer-left { flex-direction: column; align-items: flex-start; gap: 1.375rem; }
  .footer-divider { display: block; }
  .footer-right { width: 100%; justify-content: space-between; }
  .footer-toi-label { text-align: left; }
}