/*
 * Centora landing page styles — extracted from inline <style> for maintainability.
 * Design tokens live in tokens.css and are imported below so a single change there
 * propagates to both the live site and scripts/og-source.html.
 */

@import url("tokens.css");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
  /* Suppress iOS/Android's native tap-highlight overlay. Inherited, so every
     descendant link/button picks it up — taps now feel like part of the
     design instead of the OS layering its own gray box on top. */
  -webkit-tap-highlight-color: transparent;
}

/* Subtle grain texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.6;
  pointer-events: none;
  z-index: 100;
  mix-blend-mode: overlay;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* NAV */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 11, 0.7);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.logo {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #ededf0 45%, #a8a8b0 100%);
  box-shadow:
    inset 0 -1px 2px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 14px rgba(232, 196, 104, 0.35);
  position: relative;
}
.logo-mark::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  width: 5px;
  height: 4px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  filter: blur(1px);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s ease;
}
.nav-link:hover {
  color: var(--text-primary);
}
.nav-cta {
  padding: 8px 16px;
  background: var(--text-primary);
  color: var(--bg);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
/* On hover-capable devices the nav CTA is a ghost at rest and a white slab
   slides up to fill it on hover — same choreography as the primary CTA but
   inverted polarity (slab is the brand white, not amber). Touch devices skip
   the whole thing and just see the solid white button (the base rule). */
@media (hover: hover) {
  .nav-cta {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-strong);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.3s cubic-bezier(0.19, 1, 0.22, 1),
                border-color 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .nav-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--text-primary);
    transform: translate3d(0, 100%, 0);
    transition: transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: -1;
    will-change: transform;
  }
  .nav-cta:hover {
    color: var(--bg);
    border-color: var(--text-primary);
  }
  .nav-cta:hover::before {
    transform: translateZ(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-cta::before {
    transition: none;
  }
}

/* HERO */
.hero {
  position: relative;
  padding: 96px 0 120px;
  text-align: center;
  overflow: hidden;
}
/* Amber radial behind the headline was removed — the only amber atmosphere
   in the hero now comes from the box-shadow glow on the .mockup card. */
.hero-content {
  position: relative;
  z-index: 1;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 32px;
  animation: fadeUp 0.6s ease-out;
}
.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}
h1.hero-title {
  font-family: var(--font-sans);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  animation: fadeUp 0.6s ease-out 0.1s both;
}
.hero-title .accent {
  font-weight: 600;
  color: var(--accent);
}
.hero-sub {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 auto 40px;
  line-height: 1.55;
  animation: fadeUp 0.6s ease-out 0.2s both;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeUp 0.6s ease-out 0.3s both;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.btn-primary {
  background: var(--text-primary);
  color: var(--bg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Amber slab slides up from below on hover. Wrapped in @media (hover: hover)
   so touch devices never trigger it — without that guard, mobile browsers
   synthesise a brief :hover on tap and the slab flashes up then back down
   before navigation completes. */
@media (hover: hover) {
  .btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: translate3d(0, 100%, 0);
    transition: transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: -1;
    will-change: transform;
  }
  .btn-primary:hover {
    transform: translateY(-1px);
  }
  .btn-primary:hover::before {
    transform: translateZ(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary::before {
    transition: none;
  }
}
.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover {
  background: var(--bg-card);
  border-color: var(--text-tertiary);
}
.arrow {
  display: inline-block;
  transition: transform 0.15s ease;
}
.btn:hover .arrow {
  transform: translateX(2px);
}

/* PRODUCT MOCKUP */
.product-shot {
  margin: 80px auto 0;
  max-width: 1080px;
  position: relative;
  z-index: 1;
  animation: fadeUp 0.8s ease-out 0.4s both;
}
.mockup {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--border),
    0 30px 60px -20px rgba(0, 0, 0, 0.8),
    0 0 100px -20px var(--accent-glow);
}
.mockup-header {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.mockup-dots {
  display: flex;
  gap: 6px;
}
.mockup-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--border-strong);
}
.mockup-url {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
}
.mockup-body {
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  text-align: left;
}
.profile-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.profile-header {
  display: flex;
  gap: 16px;
  align-items: center;
}
.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c4995a, #8a6839);
  flex-shrink: 0;
}
.profile-name {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 2px;
}
.profile-handle {
  font-size: 13px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.badge {
  padding: 4px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.badge.accent {
  background: var(--accent-dim);
  border-color: rgba(232, 196, 104, 0.3);
  color: var(--accent);
}
.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.stat-num {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
}
.stat-label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.stat-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--green);
}

/* Growth chart */
.growth-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.chart-title {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.chart-big {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
}
.chart-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--green);
  flex-shrink: 0;
  white-space: nowrap;
}
.trend-num {
  display: inline-block;
  min-width: 3ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.chart-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 400 / 110;
  min-height: 100px;
  /* Without min-width:0, the combination of aspect-ratio + min-height implies
     a min-width of 100 * (400/110) ≈ 364px. That implicit min-width inflates
     the mockup's grid track on mobile and overflows the card. */
  min-width: 0;
}
.chart-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.chart-svg.animate-ready .chart-line {
  will-change: stroke-dashoffset;
  opacity: 0;
  transition: opacity 0.15s linear;
}
.chart-svg.animate-ready.drawn .chart-line { opacity: 1; }

/* Fill reveals left-to-right via a clipPath rect whose width animates in sync
   with the line draw. Fill stays at opacity 1 — visibility is purely a clip. */
.chart-svg.animate-ready .chart-reveal-rect {
  width: 0;
}
.chart-svg.animate-ready.drawn .chart-reveal-rect {
  width: 400px;
  transition: width 2.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dots live in HTML, not the stretched SVG, so they stay perfectly round
   regardless of the SVG's aspect ratio. JS animates left/top to track the
   line tip across the path. */
.chart-canvas > .chart-dot,
.chart-canvas > .chart-dot-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: var(--accent);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: left, top;
}
.chart-canvas > .chart-dot {
  width: 8px;
  height: 8px;
  z-index: 2;
}
.chart-canvas > .chart-dot-glow {
  width: 16px;
  height: 16px;
  z-index: 1;
}
.chart-svg.animate-ready.drawn ~ .chart-dot { opacity: 1; }
.chart-svg.animate-ready.drawn ~ .chart-dot-glow { opacity: 0.3; }

@media (prefers-reduced-motion: reduce) {
  .chart-svg.animate-ready .chart-line { opacity: 1; transition: none; }
  .chart-svg.animate-ready .chart-reveal-rect {
    width: 400px;
    transition: none;
  }
  .chart-canvas > .chart-dot { opacity: 1; transition: none; }
  .chart-canvas > .chart-dot-glow { opacity: 0.3; transition: none; }
}
.chart-forecast {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.chart-forecast-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chart-forecast-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.chart-forecast-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.chart-forecast-value.accent {
  color: var(--accent);
}
.package-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}
.package-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.package-name {
  color: var(--text-secondary);
}
.package-price {
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-weight: 500;
}

/* SECTION TITLES */
section {
  padding: 120px 0;
}
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 16px;
}
.section-title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
  max-width: 700px;
}
.section-title .accent {
  font-weight: 600;
  color: var(--accent);
}
.section-sub {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 580px;
  margin-bottom: 64px;
}

/* FEATURE GRID */
.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.feature {
  background: var(--bg);
  padding: 36px;
  transition: background 0.3s ease;
  position: relative;
  overflow: hidden;
}
.feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 600px;
  margin-left: -300px;
  margin-top: -300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 196, 104, 0.09), transparent 60%);
  pointer-events: none;
  transform: translate3d(var(--mx, -1000px), var(--my, -1000px), 0);
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform;
}
.feature:hover::before {
  opacity: 1;
}
.feature-icon,
.feature-title,
.feature-text {
  position: relative;
}
.feature:hover {
  background: var(--bg-elevated);
}
.feature-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent-dim);
  border: 1px solid rgba(232, 196, 104, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--accent);
}
.feature-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.feature-text {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.55;
}

/* ALPHA SECTION */
.alpha-section {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.alpha-section .container {
  position: relative;
  z-index: 1;
}
.alpha-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.alpha-text {
  position: relative;
}
.alpha-quote {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
/* Each phrase wraps in its own block so the two sentences stay visually
   distinct on any width. Without this the natural word-wrap puts "big."
   alone on its own line and runs the second phrase onto the same row as
   the first phrase, which looks ragged on both desktop and mobile. */
.alpha-line {
  display: block;
}
.alpha-quote .scroll-word {
  color: rgba(255, 255, 255, 0.14);
  transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}
.alpha-quote .scroll-word.active {
  color: var(--text-primary);
}
.alpha-quote .scroll-word.accent {
  color: rgba(232, 196, 104, 0.18);
}
.alpha-quote .scroll-word.accent.active {
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .alpha-quote .scroll-word {
    color: var(--text-primary);
    transition: none;
  }
  .alpha-quote .scroll-word.accent {
    color: var(--accent);
  }
}
.alpha-sub {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
}
.alpha-chart {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  position: relative;
}
.alpha-chart-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  letter-spacing: 0.1em;
}
.alpha-chart-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 24px;
}
.creator-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.creator-row:last-child {
  border-bottom: none;
}
.creator-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.creator-info {
  min-width: 0;
}
.creator-name {
  font-size: 14px;
  font-weight: 500;
}
.creator-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.creator-spark {
  width: 80px;
  height: 24px;
}
.creator-trend {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--green);
  text-align: right;
  min-width: 50px;
}

/* MANIFESTO — APPLE-STYLE STICKY SCROLL */
.manifesto-section {
  position: relative;
  height: 240vh;
  height: 240svh;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.manifesto-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.manifesto-content {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  padding: 0 32px;
  text-align: center;
}
.manifesto-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 56px;
}
.manifesto-text {
  font-size: clamp(44px, 7.5vw, 84px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 56px;
}
.m-word {
  color: rgba(255, 255, 255, 0.08);
  transition: color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}
.m-word.active {
  color: var(--text-primary);
}
.m-word.accent {
  color: rgba(232, 196, 104, 0.1);
}
.m-word.accent.active {
  color: var(--accent);
}
.manifesto-sub {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.manifesto-sub.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .manifesto-section {
    height: auto;
    padding: 120px 0;
  }
  .manifesto-sticky {
    position: relative;
    height: auto;
  }
  .m-word {
    color: var(--text-primary);
  }
  .m-word.accent {
    color: var(--accent);
  }
  .manifesto-sub {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 768px) {
  .manifesto-section {
    height: 180vh;
    height: 180svh;
  }
  .manifesto-text {
    font-size: clamp(32px, 9vw, 52px);
  }
  .manifesto-eyebrow {
    margin-bottom: 36px;
  }
}

/* VERTICAL EXPANSION */
.vertical-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 48px;
}
.vertical-card {
  padding: 18px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.vertical-card.active {
  border-color: rgba(232, 196, 104, 0.4);
  background: var(--accent-dim);
}
.vertical-card.active::before {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}
.vertical-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}
.vertical-status {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.vertical-card.active .vertical-status {
  color: var(--accent);
}

/* FOUNDER */
.founder {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.founder-quote {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  color: var(--text-primary);
}
.founder-line {
  width: 40px;
  height: 1px;
  background: var(--border-strong);
  margin: 0 auto 16px;
}
.founder-sig {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* APPLY SECTION */
.apply-section {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-elevated) 100%);
  border-top: 1px solid var(--border);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.apply-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse at top, var(--accent-glow) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0.5;
}
.apply-inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
}
.apply-title {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.apply-title .accent {
  font-weight: 600;
  color: var(--accent);
}
.apply-sub {
  font-size: 17px;
  color: var(--text-secondary);
  margin-bottom: 36px;
}
.tab-switch {
  display: inline-flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px;
  margin-bottom: 28px;
}
.tab-btn {
  padding: 8px 20px;
  border-radius: 100px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.tab-btn.active {
  background: var(--text-primary);
  color: var(--bg);
}
.apply-tab-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.apply-tab-content[hidden] {
  display: none;
}
.apply-tab-content .btn {
  width: 100%;
  max-width: 320px;
  justify-content: center;
}
.apply-brand-note {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 480px;
  margin: 0 auto;
}


/* APPLY MODAL */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 6, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 20px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.modal-overlay[hidden] {
  display: none;
}
.modal {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 560px;
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.7),
    0 0 100px -20px var(--accent-glow);
  transform: translateY(12px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-overlay.open .modal {
  transform: translateY(0);
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.modal-close:hover {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
}
.modal-body {
  padding: 40px;
}
.modal-title {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-align: center;
}
.modal-title .accent {
  font-weight: 600;
  color: var(--accent);
}
.modal-sub {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 28px;
  text-align: center;
}

/* Success view sits as a centered block — title, subtitle, and the close
   button all share a vertical centerline to mirror the centered hero.
   Note: must NOT use `display: flex` here because that would override the
   `hidden` attribute and the success view would leak out of the modal. */
#applySuccessView {
  text-align: center;
}
#applySuccessView .modal-sub {
  margin-bottom: 8px;
}

/* Form fields */
.apply-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.apply-honeypot {
  display: none !important;
}
.apply-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apply-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.apply-required {
  color: var(--accent);
  margin-left: 2px;
}
.apply-optional {
  color: var(--text-tertiary);
  font-weight: 400;
  margin-left: 4px;
}
.apply-form input,
.apply-form select,
.apply-form textarea {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  width: 100%;
  transition: border-color 0.15s ease;
}
.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus {
  border-color: var(--accent);
}
.apply-form input::placeholder,
.apply-form textarea::placeholder {
  color: var(--text-tertiary);
}
.apply-form input.error,
.apply-form select.error,
.apply-form textarea.error {
  border-color: #d97676;
}
.apply-form textarea {
  resize: vertical;
  min-height: 64px;
  line-height: 1.5;
}
.apply-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 38px;
  cursor: pointer;
}
.apply-helper {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
  margin: 0;
}
.apply-counter {
  font-family: var(--font-mono);
}
.apply-submit {
  margin-top: 10px;
  justify-content: center;
  width: 100%;
}
.apply-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.apply-submit.loading {
  pointer-events: none;
}
.apply-form-error {
  background: rgba(217, 118, 118, 0.08);
  border: 1px solid rgba(217, 118, 118, 0.22);
  border-radius: 8px;
  padding: 12px 14px;
  color: #f3b8b8;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
.apply-form-error a {
  color: inherit;
  text-decoration: underline;
}
.apply-success-close {
  width: 100%;
  max-width: 200px;
  justify-content: center;
  margin-top: 24px;
}

/* FOOTER */
footer {
  border-top: 1px solid var(--border);
  padding: 48px 0 64px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-text {
  color: var(--text-tertiary);
  font-size: 13px;
  font-family: var(--font-mono);
}
.footer-links {
  display: flex;
  gap: 24px;
}
.footer-links a {
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s ease;
}
.footer-links a:hover {
  color: var(--text-primary);
}

/* ANIMATIONS */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .mockup-body {
    /* minmax(0, 1fr) instead of plain 1fr — otherwise the implicit auto
       min-track-size adopts the largest cell's min-content and inflates the
       track past the container, causing the mockup's overflow:hidden to clip
       content on the right. */
    grid-template-columns: minmax(0, 1fr);
  }
  .alpha-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .features {
    grid-template-columns: 1fr;
  }
  .vertical-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .nav-links .nav-link {
    display: none;
  }
  section {
    padding: 80px 0;
  }
  .hero {
    padding: 64px 0 80px;
  }
}
@media (max-width: 560px) {
  .container { padding: 0 24px; }
  .nav-inner { padding: 0 24px; }
  .vertical-row {
    grid-template-columns: repeat(2, 1fr);
  }
  /* .alpha-quote uses clamp() in its base rule — no responsive override needed. */
  .founder-quote {
    font-size: 22px;
  }
  /* Apply modal: tighten padding, soften title size on phone. */
  .modal-overlay {
    padding: 3vh 12px 5vh;
  }
  .modal {
    border-radius: 12px;
  }
  .modal-body {
    padding: 32px 22px 28px;
  }
  .modal-title {
    font-size: 24px;
  }
  .modal-sub {
    font-size: 14px;
    margin-bottom: 24px;
  }
  .modal-close {
    top: 10px;
    right: 10px;
  }
  .apply-form {
    gap: 16px;
  }
  .apply-title {
    font-size: clamp(28px, 7vw, 36px);
  }
  /* Smaller nav CTA so it doesn't crowd the logo */
  .nav-cta {
    padding: 7px 12px;
    font-size: 13px;
  }
  /* Tighter sections on phone */
  section {
    padding: 64px 0;
  }
  .hero {
    padding: 48px 0 64px;
  }
  /* Tighter mockup padding */
  .mockup-body {
    padding: 28px 22px;
    gap: 28px;
  }
  /* Forecast row: smaller label and gap on phone */
  .chart-forecast {
    gap: 10px;
  }
  .chart-forecast-label {
    font-size: 9px;
  }
  .chart-forecast-value {
    font-size: 12px;
  }
  /* Manifesto sub paragraph closer to text on phone */
  .manifesto-sub {
    font-size: 15px;
    padding: 0 16px;
  }
  /* Smaller chart big number */
  .chart-big {
    font-size: 20px;
  }
  .chart-title {
    font-size: 12px;
  }
  /* Stats grid stays 3 cols but tighter */
  .stats-row {
    gap: 8px;
  }
  .stat-num {
    font-size: 16px;
  }
  /* Tablet/manifesto eyebrow scale */
  .section-title {
    font-size: clamp(28px, 7vw, 36px);
  }
  .section-sub {
    font-size: 16px;
    margin-bottom: 40px;
  }
}
/* Disable hover-only effects on pure touch devices */
@media (hover: none) and (pointer: coarse) {
  .feature::before {
    display: none;
  }
  .feature:hover {
    background: var(--bg);
  }
}