:root {
  --bg: #0b0b0c;
  --bg-alt: #141412;
  --gold: #d4af37;
  --gold-light: #f0cf6d;
  --red: #d64545;
  --red-light: #e97070;
  --white: #f5f5f0;
  --gray: #a8a8a2;
  --gray-dark: #555550;
  --todo-bg: #3a2f0a;
  --todo-text: #f0cf6d;
  --max-width: 960px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: 'Inter', -apple-system, sans-serif;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 0.5em;
}

.script {
  font-family: 'Kaushan Script', cursive;
  color: var(--gold);
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
}

.text-red { color: var(--red-light); }
.text-red strong { color: var(--red-light); }

p { color: var(--gray); }

a { color: var(--gold); }

ul { color: var(--gray); }

/* TODO placeholder styling */
.todo {
  background: var(--todo-bg);
  color: var(--todo-text) !important;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-style: italic;
  font-size: 0.92em;
}
p.todo, div.phase__goal.todo {
  display: block;
  background: var(--todo-bg);
  padding: 0.75em 1em;
  border-left: 3px solid var(--gold);
  border-radius: 4px;
}

/* Buttons */
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  border-radius: 999px;
  padding: 1em 2.2em;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn--gold {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: #1a1200;
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,175,55,0.35); }
.btn--outline {
  background: transparent;
  color: var(--gold);
  border: 2px solid var(--gold);
}
.btn--large { font-size: 1.1rem; padding: 1.1em 2.6em; }

.hero__cta {
  border-radius: 8px;
  font-size: 1.3rem;
  padding: 1.3em 3.2em;
}
.btn--small { font-size: 0.85rem; padding: 0.6em 1.3em; }

/* Sticky CTA */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(11,11,12,0.95);
  border-top: 1px solid var(--gold);
  backdrop-filter: blur(6px);
  z-index: 100;
  padding: 0.75em 1em;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}
.sticky-cta__text { font-weight: 600; color: var(--white); }

/* Announcement bar */
.announce-bar {
  background: var(--red);
  color: var(--white);
  text-align: center;
  padding: 0.7em 1em;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.announce-bar strong { color: #1a0a0a; }

/* Hero */
.hero {
  background: var(--bg);
}
.hero__content {
  padding: 1.5em 1.5em 3.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: radial-gradient(ellipse at top, #1a1710 0%, var(--bg) 65%);
}

.hero__badge {
  display: inline-block;
  align-self: center;
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 0.5em 1em;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.8em;
}
.hero__badge span { color: var(--gold); font-weight: 700; }

.hero__underline {
  width: 70px;
  height: 3px;
  background: var(--gold);
  margin: 0.7em auto 1.2em;
}

.hero__laptop-img {
  max-width: 560px;
  width: 100%;
  height: auto;
  margin: 0 0 0.1em;
}

.hero__caption {
  font-size: 0.95rem;
  margin: 0 0 0.5em;
}

@media (max-width: 860px) {
  .hero { position: relative; }
  .countdown__timer { justify-content: center; }
  .hero__icons { justify-content: center; }
  .hero__icon { align-items: center; text-align: center; }
}
.logo__stars { color: var(--gold); font-size: 1.1rem; letter-spacing: 0.3em; }
.logo--small { text-align: center; margin: 0 0 1em; }
.logo--small .logo__main { font-size: 2.2rem; }
.logo--small .logo__sub { font-size: 0.95rem; }
.logo--small .logo__stars { font-size: 0.8rem; }

.eyebrow {
  color: var(--gold);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 700;
}
.hero__headline { font-size: 2.8rem; line-height: 1.1; margin-bottom: 0.3em; }
.hero__sub { max-width: 520px; margin: 0 0 0.3em; font-size: 1.05rem; }

.countdown { margin: 1em 0 2.6em; text-align: center; }
.countdown__label { color: var(--gray); margin-bottom: 1em; white-space: nowrap; font-size: clamp(0.7rem, 3.2vw, 1rem); }
.countdown__label strong { color: var(--white); }
.countdown__timer { display: flex; justify-content: center; gap: 1.2em; }
.countdown__unit {
  background: var(--bg-alt);
  border: 1px solid #33322c;
  border-radius: 10px;
  padding: 1em 0.7em;
  min-width: 74px;
}
.countdown__unit span { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 2.6rem; color: var(--gold); }
.countdown__unit small { color: var(--gray); font-size: 0.75rem; letter-spacing: 0.1em; }

.hero__icons {
  display: flex;
  justify-content: flex-start;
  gap: 2.2em;
  margin-top: 2.5em;
  flex-wrap: wrap;
}
.hero__icon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.4em;
  color: var(--gray);
  font-size: 0.85rem;
  max-width: 130px;
}
.hero__icon-glyph { display: flex; }
.hero__icon-glyph svg { width: 30px; height: 30px; color: var(--white); opacity: 0.85; }

/* Stat bar */
.stat-bar {
  border-top: 1px solid #2a2a26;
  border-bottom: 1px solid #2a2a26;
  padding: 2.5em 1.5em 1em;
}
.stat-bar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 1em;
  text-align: center;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-alt);
  border: 1px solid #2a2a26;
  border-radius: 12px;
  padding: 1.5em 1em;
}
.stat__num { font-family: 'Bebas Neue', sans-serif; font-size: 2.6rem; line-height: 1; color: var(--gold); }
.stat__label { font-size: 0.85rem; color: var(--gray); max-width: 160px; margin-top: 0.5em; }
.stat-bar__note { text-align: center; font-size: 0.75rem; color: var(--gray-dark); margin-top: 1.5em; }

/* Generic section */
.section { padding: 4em 1.5em; max-width: var(--max-width); margin: 0 auto; }
.section--alt { background: var(--bg-alt); max-width: none; }
.section--alt > * { max-width: var(--max-width); margin-left: auto; margin-right: auto; }
.section--dark { background: #111; max-width: none; }
.section--dark > * { max-width: var(--max-width); margin-left: auto; margin-right: auto; }
.section--narrow { max-width: 680px; }
.section--center { text-align: center; }
.section__title { font-size: 2rem; }
.section__title--center { text-align: center; }
.section__sub { color: var(--gray); }
.section__sub--center { text-align: center; }

.thesis {
  font-size: 1.6rem;
  font-family: 'Bebas Neue', sans-serif;
  text-transform: none;
  letter-spacing: normal;
  color: var(--white);
  max-width: 680px;
  margin: 0 auto;
}

/* Section divider */
.divider {
  width: 70px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin: 0 auto;
}
.divider--red { background: var(--red); }
.hero__divider { margin-top: 1.5em; margin-bottom: 1.5em; }

/* Big two-tone statement block */
.statement {
  text-align: center;
  padding: 3em 1.5em;
}
.statement--tight-bottom { padding-bottom: 0.5em; }
.statement__line {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.6rem;
  line-height: 1.15;
  color: var(--white);
  margin: 0;
}
.statement__line--accent { color: var(--red); }
.statement__sub {
  color: var(--gray);
  max-width: 640px;
  margin: 1em auto 0;
}

/* Offer / phases */
.phase {
  border: 1px solid #2a2a26;
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  padding: 1.8em;
  margin-bottom: 1.5em;
}
.phase--red { border-left-color: var(--red); }
.phase--amber { border-left-color: #e0a83f; }
.phase--todo { opacity: 0.75; }
.phase__head { display: flex; align-items: baseline; gap: 0.7em; margin-bottom: 0.8em; }
.phase__num { color: var(--gold); font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; }
.phase--red .phase__num { color: var(--red-light); }
.phase--amber .phase__num { color: #e0a83f; }
.phase__name { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; }
.phase__goal { color: var(--white); font-weight: 500; }
.phase__list li { margin-bottom: 0.6em; }
.phase__panel {
  background: var(--bg-alt);
  border-radius: 8px;
  padding: 1em 1.2em;
  margin-top: 1em;
}
.phase__panel-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--gold);
  font-weight: 700;
  display: block;
  margin-bottom: 0.5em;
}

/* Bonuses */
.bonus-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2em;
  max-width: var(--max-width);
  margin: 0 auto;
}
.bonus {
  border: 1px solid #2a2a26;
  border-radius: 12px;
  padding: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}
.bonus__tag {
  align-self: flex-start;
  background: var(--gold);
  color: #1a1200;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  padding: 0.3em 0.8em;
  border-radius: 4px;
}
.bonus__info h3 { font-size: 1.1rem; margin-bottom: 0.2em; }
.bonus__info p { margin: 0; font-size: 0.9rem; }
.bonus__value { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; color: var(--gold); white-space: nowrap; }
.bonus__value s { color: var(--gray-dark); margin-right: 0.4em; }

/* Value math */
.value-math { max-width: 480px; margin: 0 auto 1.5em; }
.value-math__row {
  display: flex;
  justify-content: space-between;
  padding: 0.7em 0;
  border-bottom: 1px solid #2a2a26;
  color: var(--gray);
}
.value-math__total { color: var(--white); font-weight: 700; border-bottom: 2px solid var(--gold); }
.value-math__price { color: var(--gold); font-size: 1.4rem; font-weight: 800; border: none; }
.value-math__note { max-width: 560px; margin: 0 auto; font-size: 0.85rem; color: var(--gray-dark); }
.value-math__group-label {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--red-light);
  margin: 1.4em 0 0.3em;
}
.value-math__group-label:first-child { margin-top: 0; }
.value-math__discount { color: var(--gold); font-weight: 700; margin-top: 0.5em; }

/* Price cards */
.section--price { text-align: center; }
.price-cards {
  display: flex;
  justify-content: center;
  gap: 1.5em;
  flex-wrap: wrap;
  margin: 2em 0;
}
.price-card {
  background: var(--bg-alt);
  border: 1px solid #2a2a26;
  border-radius: 16px;
  padding: 2em;
  width: 260px;
}
.price-card--featured { border-color: var(--gold); position: relative; }
.price-card__tag {
  position: absolute;
  top: -0.8em;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #1a1200;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 0.3em 1em;
  border-radius: 4px;
}
.price-card__label { color: var(--gray); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; }
.price-card__amount { font-family: 'Bebas Neue', sans-serif; font-size: 2.6rem; color: var(--white); margin: 0.2em 0; }
.price-card__sub { color: var(--gray-dark); margin-bottom: 1.2em; }
.price-card__urgency { color: var(--gray); font-size: 0.9rem; }

/* Rhythm recap */
.rhythm { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.8em; }
.rhythm__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 0.8em 1.2em;
}
.rhythm__step span { color: var(--gold); font-size: 0.7rem; letter-spacing: 0.1em; margin-bottom: 0.3em; }
.rhythm__arrow { color: var(--gray-dark); font-size: 1.2rem; }

/* Benefit list */
.benefit-list { max-width: 620px; margin: 0 auto; padding: 0; list-style: none; }
.benefit-list li {
  padding: 0.7em 0 0.7em 2em;
  position: relative;
  border-bottom: 1px solid #2a2a26;
}
.benefit-list li::before {
  content: "\2713";
  color: var(--gold);
  position: absolute;
  left: 0;
  font-weight: 700;
}

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5em; }
.team-card { background: var(--bg-alt); border-radius: 12px; padding: 1.5em; text-align: center; }
.team-card__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 3px solid var(--gold);
  margin-bottom: 1em;
}
.team-card__role { color: var(--gold); font-size: 0.85rem; margin-bottom: 0.8em; }
.team-card p:not(.team-card__role) { text-align: left; }

/* Testimonials */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5em;
  max-width: var(--max-width);
  margin: 2em auto 0;
  text-align: left;
}
.testimonial { background: var(--bg-alt); border-radius: 12px; padding: 1.5em; }
.testimonial__stars { color: var(--gold); letter-spacing: 0.1em; margin-bottom: 0.7em; }
.testimonial__quote { color: var(--gray); font-style: italic; margin: 0; }
.testimonial__author { color: var(--white); font-weight: 700; margin: 0.9em 0 0; }

/* Fit grid */
.fit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2em; max-width: var(--max-width); margin: 0 auto; }
.fit-col h3 { font-size: 1.3rem; }
.fit-col--not h3 { color: var(--gray); }
.fit-col ul { list-style: none; padding: 0; }
.fit-col li {
  margin-bottom: 0.6em;
  padding-left: 1.6em;
  position: relative;
}
.fit-col li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}
.fit-col--not li::before {
  content: "\2717";
  color: var(--red-light);
}

/* FAQ */
.faq__item {
  border-bottom: 1px solid #2a2a26;
  padding: 1em 0;
}
.faq__item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--white);
}
.faq__item p { margin: 0.8em 0 0; }

/* Footer */
.footer {
  text-align: center;
  padding: 3em 1.5em 6em;
  border-top: 1px solid #2a2a26;
  color: var(--gray-dark);
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .hero__headline { font-size: 2.2rem; }
  .countdown__timer { gap: 0.5em; }
  .countdown__unit { min-width: 52px; padding: 0.5em 0.6em; }
  .countdown__unit span { font-size: 1.3rem; }
  .hero__icons { gap: 1.5em; }
  .stat-bar__inner { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: 1.8em 1em; }
}