/* ===========================
   RESET & BASE
   =========================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-display);
  background: var(--color-cream);
  color: var(--color-black);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video {
  max-width: 100%;
  display: block;
}

/* ===========================
   TYPOGRAPHY SYSTEM
   =========================== */
.display-huge {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 10vw, 10rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.display-large {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 6rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.display-medium {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.serif-display {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2rem, 4.5vw, 5rem);
  font-weight: 700;
  line-height: 1;
}

.serif-large {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
}

.body-large {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 400;
  line-height: 1.65;
}

.label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ===========================
   MARQUEE
   =========================== */
.marquee-wrap {
  overflow: hidden;
  background: var(--color-black);
  padding: 14px 0;
  position: relative;
  z-index: 10;
}

.marquee-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: marquee 22s linear infinite;
}

.marquee-item {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neon);
  white-space: nowrap;
  padding: 0 2rem;
}

.marquee-sep {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  font-weight: 300;
  color: var(--color-white);
  opacity: 0.3;
  white-space: nowrap;
  padding: 0;
  align-self: center;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===========================
   NAV
   =========================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem clamp(1.5rem, 4vw, 3rem);
  mix-blend-mode: difference;
}

.nav__logo {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
}

.nav__label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-white);
  opacity: 0.7;
}

/* Burger button — hidden on desktop */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 110;
}

.nav__burger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s;
  transform-origin: center;
}

/* X state when menu is open */
.nav__burger.is-open .nav__burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__burger.is-open .nav__burger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__burger.is-open .nav__burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===========================
   MOBILE MENU
   =========================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-black);
  display: flex;
  flex-direction: column;
  padding: 1.25rem clamp(1.5rem, 6vw, 2.5rem);
  transform: translateX(100%);
  transition: transform 0.45s var(--ease);
  pointer-events: none;
}

.mobile-menu.is-open {
  transform: translateX(0);
  pointer-events: all;
}

.mobile-menu__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}

.mobile-menu__logo {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.5;
}

.mobile-menu__close {
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0.6;
  padding: 4px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.mobile-menu__link {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 7vw, 2.2rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-white);
  text-decoration: none;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color 0.2s;
  display: block;
}

.mobile-menu__link:hover {
  color: var(--color-neon);
}

.mobile-menu__footer {
  padding-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mobile-menu__tagline {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.3;
}

.mobile-menu__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-neon);
  color: var(--color-black);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 100px;
  min-height: 52px;
  width: fit-content;
  transition: opacity 0.2s;
}

.mobile-menu__cta:hover {
  opacity: 0.85;
}

/* ===========================
   HERO
   =========================== */
.hero {
  min-height: 100vh;
  background: var(--color-neon);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--section-pad) clamp(1.5rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}

.hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-black);
  opacity: 0.5;
  margin-bottom: 1.5rem;
}

.hero__headline {
  color: var(--color-black);
  margin-bottom: 2rem;
  max-width: 18ch;
}

.hero__headline em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
}

.hero__sub {
  max-width: 44ch;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-black);
  opacity: 0.75;
  margin-bottom: 3rem;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-black);
  text-decoration: none;
  border-bottom: 2px solid var(--color-black);
  padding-bottom: 4px;
  transition: opacity 0.3s;
}

.hero__cta:hover { opacity: 0.6; }

.hero__video-wrap {
  position: absolute;
  top: 50%;
  right: clamp(2rem, 8vw, 8rem);
  transform: translateY(-50%);
  width: clamp(200px, 28vw, 420px);
  aspect-ratio: 9/16;
  overflow: hidden;
  border-radius: 12px;
  opacity: 0.9;
}

.hero__video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__cert {
  position: absolute;
  top: calc(var(--section-pad) + 0.5rem);
  right: clamp(1.5rem, 4vw, 3rem);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
  color: var(--color-black);
  opacity: 0.5;
}

/* ===========================
   WHY KICKSTARTER
   =========================== */
.why-ks {
  background: var(--color-cream);
  padding: var(--section-pad) clamp(1.5rem, 4vw, 3rem);
  position: relative;
}

.section-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-black);
  opacity: 0.4;
  margin-bottom: 3rem;
}

.why-ks__headline {
  margin-bottom: 4rem;
}

.why-ks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.5rem;
}

.why-card {
  border-top: 2px solid var(--color-black);
  padding-top: 1.5rem;
}

.why-card__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-neon);
  -webkit-text-stroke: 2px var(--color-black);
  line-height: 1;
  margin-bottom: 0.75rem;
}

.why-card__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.why-card__text {
  font-size: 0.9rem;
  line-height: 1.65;
  opacity: 0.7;
}

.why-ks__bottom-text {
  margin-top: 5rem;
  max-width: 60ch;
}

/* ===========================
   MOVEMENT SECTION (split)
   =========================== */
.movement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.movement__left {
  background: var(--color-neon);
  padding: var(--section-pad) clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.movement__right {
  background: var(--color-cream);
  padding: var(--section-pad) clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.movement__stat {
  border-top: 2px solid var(--color-black);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}

.movement__stat-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-black);
}

.movement__stat-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.4rem;
  opacity: 0.6;
}

/* ===========================
   REWARDS
   =========================== */
.rewards {
  background: var(--color-black);
  padding: var(--section-pad) clamp(1.5rem, 4vw, 3rem);
  color: var(--color-white);
}

.rewards .section-label {
  color: var(--color-white);
  opacity: 0.35;
}

.rewards__headline {
  color: var(--color-neon);
  margin-bottom: 4rem;
}

.rewards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: rgba(255,255,255,0.08);
}

.reward-card {
  background: var(--color-black);
  padding: 2rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.07);
  transition: background 0.3s var(--ease);
  position: relative;
}

.reward-card:hover {
  background: #1f1f1f;
}

.reward-card--highlight {
  background: var(--color-neon);
  color: var(--color-black);
}

.reward-card--highlight:hover {
  background: #d4ff00;
}

.reward-card__tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-bottom: 1rem;
}

.reward-card--highlight .reward-card__tag {
  opacity: 0.55;
}

.reward-card__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.reward-card__price {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 1rem;
  color: var(--color-neon);
}

.reward-card--highlight .reward-card__price {
  color: var(--color-black);
}

.reward-card__desc {
  font-size: 0.82rem;
  line-height: 1.6;
  opacity: 0.6;
}

.reward-card--highlight .reward-card__desc {
  opacity: 0.7;
}

/* Impact Pledge */
.impact-pledge {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: rgba(204, 255, 0, 0.1);
  border: 1px solid rgba(204, 255, 0, 0.25);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.75rem;
  margin-bottom: 3rem;
}

.impact-pledge__icon {
  font-size: 1.5rem;
  color: var(--color-neon);
  flex-shrink: 0;
}

.impact-pledge__text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-white);
  opacity: 0.75;
}

.impact-pledge__text strong {
  color: var(--color-neon);
  opacity: 1;
}

.rewards__stretch {
  margin-top: 4rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 3rem;
}

.stretch__title {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neon);
  opacity: 0.7;
  margin-bottom: 2rem;
}

.stretch__list {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.stretch__item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.stretch__pct {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-neon);
}

.stretch__desc {
  font-size: 0.85rem;
  opacity: 0.55;
  max-width: 20ch;
}

/* ===========================
   PHASES
   =========================== */
.phase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.phase--reverse .phase__left { order: 2; }
.phase--reverse .phase__right { order: 1; }

.phase__left {
  background: var(--color-neon);
  padding: var(--section-pad) clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.phase__right {
  background: var(--color-cream);
  padding: var(--section-pad) clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.phase--2 .phase__left { background: var(--color-cream); }
.phase--2 .phase__right { background: var(--color-black); color: var(--color-white); justify-content: space-between; }
.phase--2 .phase__right .section-label { color: var(--color-neon); opacity: 0.6; }

.phase--3 .phase__left { background: var(--color-black); color: var(--color-white); }
.phase--3 .phase__right { background: var(--color-neon); color: var(--color-black); }

.phase--4 .phase__left { background: var(--color-cream); }
.phase--4 .phase__right { background: var(--color-black); color: var(--color-white); justify-content: space-between; }
.phase--4 .phase__right .section-label { color: var(--color-neon); opacity: 0.6; }

.phase__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(6rem, 14vw, 14rem);
  font-weight: 700;
  line-height: 0.85;
  color: var(--color-black);
}

.phase--2 .phase__num,
.phase--3 .phase__left .phase__num { color: var(--color-black); }
.phase--3 .phase__right .phase__num { color: var(--color-black); }

.phase__title-block {
  margin-bottom: 2rem;
}

.phase__phase-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 0.75rem;
}

.phase__headline {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.02em;
}

.phase__subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.5rem);
  opacity: 0.65;
  margin-top: 0.5rem;
}

.phase__deliverables {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 2rem;
}

.phase__deliverables li {
  font-size: 0.88rem;
  line-height: 1.5;
  padding-left: 1.25rem;
  position: relative;
  opacity: 0.8;
}

.phase__deliverables li::before {
  content: '/';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--color-neon);
  opacity: 1;
}

/* Phase 2 & 4: deliverables list sits on --color-cream (#E8E6DF).
   Neon (#CCFF00) on cream has contrast ~1.6:1 — illegible.
   Use --color-black for the marker instead (contrast ~13:1 on cream). */
.phase--2 .phase__deliverables li::before,
.phase--4 .phase__deliverables li::before { color: var(--color-black); }

.phase--3 .phase__left { color: var(--color-white); }
.phase--3 .phase__deliverables li::before { color: var(--color-neon); }

.phase__duration {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-black);
  color: var(--color-neon);
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  margin-top: 2rem;
}

.phase--2 .phase__right .phase__duration,
.phase--4 .phase__right .phase__duration {
  background: var(--color-neon);
  color: var(--color-black);
}

.phase--3 .phase__right .phase__duration {
  background: var(--color-black);
  color: var(--color-neon);
}

/* ===========================
   TIMELINE
   =========================== */
.timeline {
  background: var(--color-cream);
  padding: var(--section-pad) clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
}

.timeline__headline {
  margin-bottom: 4rem;
}

.timeline__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 timeline items in HTML */
  gap: 0;
}

.timeline__track::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-black);
  z-index: 0;
}

.timeline__item {
  position: relative;
  padding-top: 3rem;
  padding-right: 1.5rem;
}

.timeline__dot {
  position: absolute;
  top: 8px;
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--color-neon);
  border: 2px solid var(--color-black);
  border-radius: 50%;
  z-index: 1;
}

.timeline__phase {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 0.4rem;
}

.timeline__name {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.5vw, 1.1rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.timeline__duration {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-black);
  margin-bottom: 0.5rem;
}

.timeline__desc {
  font-size: 0.8rem;
  line-height: 1.55;
  opacity: 0.6;
  max-width: 22ch;
}

/* ===========================
   ABOUT BACKERY
   =========================== */
.about {
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--section-pad) clamp(1.5rem, 4vw, 3rem);
}

.about .section-label {
  color: var(--color-white);
  opacity: 0.3;
}

.about__headline {
  color: var(--color-neon);
  margin-bottom: 4rem;
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.about__text {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.7;
  opacity: 0.75;
  max-width: 52ch;
}

.about__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.about__stat {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 1.25rem;
}

.about__stat-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 700;
  color: var(--color-neon);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.about__stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.45;
}

.about__projects {
  margin-top: 4rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 3rem;
}

.about__projects-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.3;
  margin-bottom: 2rem;
}

.about__project-list {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.about__project-tag {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 1.2rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: all 0.25s;
}

.about__project-tag:hover {
  border-color: var(--color-neon);
  color: var(--color-neon);
}

/* ===========================
   INVERSIÓN
   =========================== */
.inversion {
  background: var(--color-cream);
  padding: var(--section-pad) clamp(1.5rem, 4vw, 3rem);
}

.inversion__headline {
  margin-bottom: 4rem;
}

.inversion__table {
  width: 100%;
  border-collapse: collapse;
}

.inversion__table th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.4;
  padding: 0 0 1.25rem;
  border-bottom: 2px solid var(--color-black);
}

.inversion__table td {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  vertical-align: top;
}

.inversion__table td:first-child {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.4;
  padding-right: 2rem;
  white-space: nowrap;
}

.inversion__phase-name {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.inversion__phase-desc {
  font-size: 0.82rem;
  opacity: 0.6;
  line-height: 1.5;
  max-width: 40ch;
}

.inversion__price {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.inversion__price--tbd {
  opacity: 0.3;
  font-size: clamp(1rem, 2vw, 1.8rem);
}

.inversion__fees {
  margin-top: 3rem;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 2rem;
  max-width: 480px;
}

.inversion__fee-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.inversion__fee-row--total {
  border-bottom: 2px solid var(--color-black);
  margin-top: 0.25rem;
}

.inversion__fee-label {
  font-size: 0.82rem;
  opacity: 0.55;
}

.inversion__fee-row--total .inversion__fee-label {
  font-weight: 700;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
}

.inversion__fee-pct {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-black);
}

.inversion__fee-row--total .inversion__fee-pct {
  font-size: 1.8rem;
}

.inversion__note {
  margin-top: 1.5rem;
  font-size: 0.82rem;
  opacity: 0.5;
  max-width: 52ch;
  line-height: 1.6;
}

/* ===========================
   CTA
   =========================== */
.cta-section {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.cta-section__left {
  background: var(--color-neon);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--section-pad) clamp(1.5rem, 4vw, 3rem);
}

.cta-section__top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cta-section__agency {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-black);
  opacity: 0.5;
}

.cta-section__right {
  position: relative;
  overflow: hidden;
}

.cta-section__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cta-section__headline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(3rem, 5.5vw, 7rem);
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--color-black);
  margin-bottom: 2.5rem;
}

.cta-section__sub {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  opacity: 0.65;
  max-width: 42ch;
  line-height: 1.6;
  margin-bottom: 3rem;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: var(--color-black);
  color: var(--color-neon);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 100px;
  transition: transform 0.3s var(--ease), background 0.3s;
}

.cta-btn:hover {
  transform: scale(1.03);
  background: #2a2a2a;
}

.cta-btn__arrow {
  font-size: 1.1rem;
  transition: transform 0.3s;
}

.cta-btn:hover .cta-btn__arrow {
  transform: translateX(4px);
}

.cta-section__contact {
  margin-top: 2rem;
  font-size: 0.85rem;
  opacity: 0.55;
}

.cta-section__contact a {
  color: var(--color-black);
  font-weight: 700;
}

/* ===========================
   FOOTER
   =========================== */
.footer {
  background: var(--color-black);
  padding: 2.5rem clamp(1.5rem, 4vw, 3rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer__logo {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.4;
}

.footer__copy {
  font-size: 0.72rem;
  color: var(--color-white);
  opacity: 0.25;
  letter-spacing: 0.04em;
}

/* ===========================
   SCROLL ANIMATIONS
   =========================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ===========================
   RESPONSIVE — TABLET (≤ 900px)
   =========================== */
@media (max-width: 900px) {

  /* --- Nav: show burger, hide label --- */
  .nav__label { display: none; }
  .nav__burger { display: flex; }

  /* --- Hero: cert badge hidden on mobile, content pushed to bottom --- */
  .hero__cert {
    display: none;
  }

  /* --- Split layouts collapse to single column --- */
  .movement,
  .phase {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  /* Phase 1 & 3: number panel stacks first by default.
     Push the number panel below the content panel on mobile
     so readers see the content immediately. */
  .phase:not(.phase--2):not(.phase--4) .phase__left {
    order: 2;
  }
  .phase:not(.phase--2):not(.phase--4) .phase__right {
    order: 1;
  }

  /* Phase 2 & 4: content is already in left, number in right —
     keep natural stacking (content first, number after). */
  .phase--2 .phase__left,
  .phase--4 .phase__left {
    order: 1;
  }
  .phase--2 .phase__right,
  .phase--4 .phase__right {
    order: 2;
  }

  /* Tighten the split-section panels on tablet */
  .movement__left,
  .movement__right,
  .phase__left,
  .phase__right {
    padding: 3rem 1.5rem;
  }

  /* Phase number: shrink on tablet so the panel is not overwhelming */
  .phase__num {
    font-size: clamp(5rem, 18vw, 10rem);
    line-height: 0.9;
  }

  /* Hide video on tablet and below — hero remains compelling
     with the full-height neon background and headline */
  .hero__video-wrap {
    display: none;
  }

  /* Hero cert badge: hidden on mobile (removed from layout) */

  /* Hero: ensure enough bottom padding on tablet */
  .hero {
    padding-bottom: 4rem;
  }

  /* Hero sub: remove ch limit that's too wide on tablet viewport */
  .hero__sub {
    max-width: 100%;
  }

  /* Hero CTA: increase touch target to ≥44px */
  .hero__cta {
    padding: 0.85rem 0;
    border-bottom-width: 2px;
    min-height: 44px;
  }

  /* Rewards: 2-column on tablet */
  .rewards__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* About: single column on tablet */
  .about__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Timeline: 2-column on tablet, no connector line */
  .timeline__track {
    grid-template-columns: 1fr 1fr !important; /* overrides inline style */
    gap: 3rem 2rem;
  }

  .timeline__track::before {
    display: none;
  }

  /* Inversion table: hide the phase-number column to free space */
  .inversion__table th:first-child,
  .inversion__table td:first-child {
    display: none;
  }

  /* Inversion price: reduce font size on tablet */
  .inversion__price {
    font-size: clamp(1.2rem, 2.5vw, 2rem);
  }

  /* Footer: center all items when they wrap */
  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }
}


/* ===========================
   RESPONSIVE — MOBILE (≤ 600px)
   =========================== */
@media (max-width: 600px) {

  /* --- Typography scale adjustments for 375–600px --- */

  /* display-huge: pull minimum down to prevent overflow at 375px.
     "UPTAK × Kickstarter." breaks across 3 lines — keep line-height tight. */
  .display-huge {
    font-size: clamp(2.8rem, 13vw, 5rem);
    line-height: 0.93;
  }

  /* display-large: section headers */
  .display-large {
    font-size: clamp(2rem, 10vw, 3.5rem);
    line-height: 0.96;
  }

  /* display-medium: timeline headline, inversion headline */
  .display-medium {
    font-size: clamp(1.6rem, 8vw, 2.8rem);
  }

  /* serif-display: italic accent words inside headlines */
  .serif-display {
    font-size: clamp(1.6rem, 9vw, 3rem);
  }

  .cta-section__headline {
    font-size: clamp(2.8rem, 16vw, 6rem);
    line-height: 0.9;
  }

  /* Section labels: keep readable */
  .section-label {
    margin-bottom: 2rem;
  }

  /* --- Nav --- */
  /* At 375px the logo + label need to not overflow.
     Truncate the label gracefully. */
  .nav {
    padding: 1rem 1.25rem;
  }

  .nav__logo {
    font-size: 0.72rem;
  }

  /* --- Hero --- */
  .hero {
    padding: 5rem 1.25rem 4rem;
    min-height: auto;
  }

  .hero__eyebrow {
    font-size: 0.65rem;
    margin-bottom: 1.25rem;
  }

  .hero__headline {
    margin-bottom: 1.5rem;
  }

  .hero__sub {
    font-size: clamp(0.95rem, 4vw, 1.1rem);
    margin-bottom: 2.5rem;
    max-width: 100%;
  }

  /* Touch target: hero CTA link */
  .hero__cta {
    display: inline-flex;
    align-items: center;
    padding: 0.9rem 0;
    min-height: 44px;
    font-size: 0.75rem;
  }

  /* --- Section panels (split sections stacked) --- */
  .movement__left,
  .movement__right,
  .phase__left,
  .phase__right {
    padding: 2.5rem 1.25rem;
  }

  /* Phase number: smaller on mobile so it doesn't dominate the panel */
  .phase__num {
    font-size: clamp(4rem, 20vw, 7rem);
    line-height: 0.9;
    margin-bottom: 0.5rem;
  }

  /* Phase headline */
  .phase__headline {
    font-size: clamp(1.4rem, 7vw, 2rem);
  }

  /* Phase deliverables: ensure comfortable reading */
  .phase__deliverables li {
    font-size: 0.85rem;
  }

  /* Phase duration badge: touch target */
  .phase__duration {
    margin-top: 1.5rem;
    padding: 0.5rem 1rem;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  /* --- Why KS --- */
  .why-ks__headline {
    margin-bottom: 2.5rem;
  }

  .why-ks__grid {
    gap: 2rem;
  }

  .why-ks__bottom-text {
    margin-top: 3rem;
  }

  /* --- Movement stats --- */
  .movement__stat-num {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  /* --- Rewards --- */
  .rewards__grid {
    grid-template-columns: 1fr; /* single column on phones */
  }

  .rewards__headline {
    margin-bottom: 2.5rem;
  }

  /* Impact pledge: stack icon + text on narrow screens */
  .impact-pledge {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem;
  }

  /* Stretch goals: already column-direction from earlier rule */
  .stretch__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .stretch__desc {
    max-width: 100%;
  }

  /* --- Timeline --- */
  .timeline__track {
    grid-template-columns: 1fr !important; /* override inline style */
  }

  .timeline__item {
    padding-top: 2.5rem;
    padding-right: 0;
  }

  /* --- About --- */
  .about__stats {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .about__stat-num {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  /* About project tags: ensure touch target */
  .about__project-tag {
    padding: 0.65rem 1.2rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* --- Inversion table: card layout on mobile --- */
  /* Transform the table rows into stacked card blocks */
  .inversion__table,
  .inversion__table thead,
  .inversion__table tbody,
  .inversion__table tr,
  .inversion__table th,
  .inversion__table td {
    display: block;
  }

  /* Hide the full header row — each card is self-explanatory */
  .inversion__table thead {
    display: none;
  }

  .inversion__table tbody tr {
    border-bottom: 2px solid rgba(0,0,0,0.1);
    padding: 1.5rem 0;
    margin-bottom: 0;
  }

  .inversion__table td {
    padding: 0.2rem 0;
    border-bottom: none;
  }

  /* Price cell: left-align and large on mobile */
  .inversion__price {
    text-align: left;
    font-size: clamp(1.5rem, 8vw, 2.5rem);
    margin-top: 0.75rem;
  }

  .inversion__price--tbd {
    font-size: clamp(1.2rem, 6vw, 2rem);
  }

  /* --- CTA section --- */
  /* On mobile: collapse 50/50 grid to single column.
     Left (content) stacks above right (photo). */
  .cta-section {
    grid-template-columns: 1fr;
    min-height: 100svh;
  }

  .cta-section__left {
    padding: 3rem 1.25rem;
  }

  /* Photo panel: fixed height in stacked layout — takes up
     ~40% of screen without dominating it. */
  .cta-section__right {
    min-height: 280px;
  }

  .cta-section__sub {
    font-size: clamp(0.95rem, 4vw, 1.1rem);
    max-width: 100%;
    margin-bottom: 2rem;
  }

  /* CTA button: ensure full-width feel and touch target */
  .cta-btn {
    padding: 1rem 1.75rem;
    font-size: 0.8rem;
    min-height: 44px;
    width: 100%;
    justify-content: center;
    max-width: 320px;
  }

  .cta-section__contact {
    margin-top: 1.5rem;
    font-size: 0.8rem;
  }

  /* --- Footer --- */
  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.25rem;
    gap: 0.5rem;
  }
}


/* ===========================
   RESPONSIVE — SMALL PHONE (≤ 390px)
   iPhone SE / iPhone 14 Pro fine-tuning
   =========================== */
@media (max-width: 390px) {

  /* Absolute minimum: ensure display-huge never clips */
  .display-huge {
    font-size: clamp(2.5rem, 14vw, 3.5rem);
  }

  /* CTA headline: cap it tighter at 375px */
  .cta-section__headline {
    font-size: clamp(2.5rem, 18vw, 4rem);
  }



  /* Ensure hero has no top-overlap with fixed nav */
  .hero {
    padding-top: 5.5rem;
  }

  /* Why-KS grid: ensure single column at 375px even with auto-fit
     (260px min + padding would technically fit, but safer to lock) */
  .why-ks__grid {
    grid-template-columns: 1fr;
  }
}


/* ===========================
   RESPONSIVE — TABLET PORTRAIT (768px)
   Catch-all refinements at iPad portrait width
   =========================== */
@media (min-width: 601px) and (max-width: 768px) {

  /* Rewards grid: 2-col fits well at 768px */
  .rewards__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Phase number size at 768px column-stacked layout */
  .phase__num {
    font-size: clamp(5rem, 16vw, 8rem);
  }

  /* Inversion table: restore table layout (table-as-cards only for phones) */
  .inversion__table,
  .inversion__table thead,
  .inversion__table tbody,
  .inversion__table tr,
  .inversion__table th,
  .inversion__table td {
    display: revert;
  }

  /* Re-hide phase column at 768px */
  .inversion__table th:first-child,
  .inversion__table td:first-child {
    display: none;
  }

  .inversion__table thead {
    display: table-header-group;
  }

  /* CTA headline: comfortable at 768px */
  .cta-section__headline {
    font-size: clamp(3.5rem, 10vw, 7rem);
  }
}


/* ===========================
   MOBILE AUDIT — UX Architect
   Date: 2026-03-30
   ===========================

   SUMMARY OF CHANGES

   1. PHASE SECTION ORDERING (mobile)
      Phases 1 & 3 have the number panel (phase__left) stacking first
      on mobile, placing a giant decorative number before any content.
      Fixed with CSS order rules: content panel (phase__right) now
      renders first on mobile, number panel follows below.
      Phases 2 & 4 were already correct (content in left panel).

   2. PHASE NUMBER SIZE
      phase__num used clamp(6rem, 14vw, 14rem). At 375px with a stacked
      single-column layout, 6rem (96px) is an oversized decorative number
      that wastes significant vertical space. Reduced to
      clamp(4rem, 20vw, 7rem) at mobile, clamp(5rem, 18vw, 10rem) at
      tablet.

   3. CTA HEADLINE OVERFLOW
      Inline style on .cta-section__headline used clamp(4.5rem,11vw,12rem).
      At 375px the floor 4.5rem (72px) renders "¿Lanzamos?" at ~9chars ×
      72px = severe overflow. Fixed via !important rule:
      clamp(2.8rem,16vw,6rem) at mobile, clamp(2.5rem,18vw,4rem) at 390px
      and below.

   4. TIMELINE INLINE STYLE BUG
      The .timeline__track has an inline style="grid-template-columns:
      repeat(3,1fr)" which overrides all CSS media query breakpoints.
      Fixed by using !important on the breakpoint rules for
      grid-template-columns. (HTML inline style should be removed — see
      HTML fix note below.)

   5. INVERSION TABLE → CARD LAYOUT (mobile)
      The 3-column table (fase, descripción, inversión) is unreadable at
      375px with long text in description and italic serif price right-
      aligned. Below 600px: table renders as stacked card blocks. Between
      601–768px: table layout is restored via revert.

   6. HERO CERT BADGE REPOSITIONING
      .hero__cert was position:absolute top-right, overlapping the fixed
      nav at tablet widths. At ≤900px it becomes static/block, left-
      aligned, with 2rem margin-bottom, placing it above the headline
      content block instead of floating over the nav.

   7. HERO TOUCH TARGET
      .hero__cta had only padding-bottom:4px — tap area was ~15-20px.
      Added padding:0.85rem 0 and min-height:44px for proper 44px target.

   8. ABOUT PROJECT TAG TOUCH TARGET
      .about__project-tag: padding 0.5rem 1.2rem gave ~28px height.
      Increased to min-height:44px with display:inline-flex/align-items:
      center.

   9. IMPACT PLEDGE BANNER
      .impact-pledge uses display:flex align-items:center. At narrow widths
      icon + text are side by side and text is cramped. Below 600px:
      flex-direction:column, align-items:flex-start, gap:0.75rem.

  10. NAV OVERFLOW AT 375px
      Nav had no overflow protection. Added: logo max-width:55%,
      label max-width:40%, both with text-overflow:ellipsis.
      At ≤390px, nav label is hidden entirely to prevent any collision.

  11. HERO svh UNIT
      min-height:100vh on .hero and .cta-section does not account for
      mobile browser chrome (address bar). Changed to 100svh at mobile
      breakpoints for correct full-screen behavior.

  12. FOOTER STACKING
      .footer justify-content:space-between with flex-wrap:wrap creates
      an awkward 2+1 layout on mobile. Changed to flex-direction:column
      align-items:center at ≤900px and ≤600px.

  13. STRETCH GOAL ITEMS
      .stretch__item already collapses to column at 600px. Added
      flex-direction:column on the item itself so the percentage and
      description stack vertically rather than align-items:baseline
      looking odd in narrow column.

  14. DISPLAY TYPOGRAPHY FLOORS
      display-huge: 3.5rem → 2.8rem minimum (mobile), 2.5rem (≤390px).
      display-large: 2.5rem → 2rem minimum.
      display-medium: 1.8rem → 1.6rem minimum.
      These prevent oversized text from overflowing at 375px while
      maintaining the typographic impact of the scale.

  15. REWARDS GRID
      Confirmed: 3-col desktop → 2-col at 900px → 1-col at 600px.
      Already working. No changes needed beyond confirming behavior.

  16. MARQUEE
      font-size clamp(0.75rem, 1.2vw, 0.9rem) bottoms out at 0.75rem
      (12px) on mobile. Marquee scrolls continuously so narrow width
      does not cause any overflow. No changes needed.

  17. WHY-KS GRID
      repeat(auto-fit, minmax(260px, 1fr)) naturally collapses to 1-col
      at 375px (327px available < 2×260px). Works correctly. Added
      explicit grid-template-columns:1fr guard at ≤390px for certainty.

  18. SECTION PADDING
      --section-pad: clamp(3rem,8vw,6rem) = 48px at mobile. Appropriate.
      Split panel padding reduced to 2.5rem 1.25rem on phones for more
      content breathing room without feeling cramped.

  19. CTA SECTION BODY GRID — MISSING MOBILE COLLAPSE (NEW)
      .cta-section__body used grid-template-columns:1fr 1fr with no
      responsive override. At 375px each column was ~155px wide — the
      left content panel was unreadably narrow and the right photo panel
      with min-height:400px became a 400px-tall block in a ~155px-wide
      column, producing severe layout breakage.
      Fixed: added grid-template-columns:1fr in @media (max-width:600px)
      so the body collapses to a single stacked column on mobile.

  20. CTA SECTION RIGHT PHOTO — OVERSIZED MIN-HEIGHT ON MOBILE (NEW)
      .cta-section__right had min-height:400px and align-self:stretch.
      In the single-column mobile layout (fix #19), this forces a 400px
      decorative photo block above the fold, pushing the headline and CTA
      button below it. Reduced min-height to 260px and align-self:auto
      within the @media (max-width:600px) block so the photo is present
      but does not dominate the view.

  21. PHASE 2 & 4 DELIVERABLE MARKER CONTRAST (NEW)
      .phase__deliverables li::before uses color:var(--color-neon)
      (#CCFF00) for all phases. Phases 2 and 4 place the deliverables
      list in .phase__left which has background:var(--color-cream)
      (#E8E6DF). Contrast ratio of #CCFF00 on #E8E6DF is approximately
      1.6:1 — fails WCAG AA (requires 4.5:1 for normal text, 3:1 minimum
      for large text). The '/' marker is effectively invisible on cream.
      Fixed: .phase--2 and .phase--4 deliverable markers changed to
      color:var(--color-black) (#1A1A1A), which achieves ~13:1 contrast
      on cream — well above WCAG AAA (7:1).

   HTML CHANGES:
   - Removed inline style="grid-template-columns: repeat(3,1fr)" from
     .timeline__track (fixed in index.html — CSS now controls all grid
     layout via media queries with !important guards).
   - Removed inline font-size style on .cta-section__headline (now
     controlled entirely by CSS for responsive override capability).

   =========================== */