/* ============================================================
   landing.css — Landing page styles
   Builds on base.css — do not redefine base tokens here.
   ============================================================ */

/* ── Fixed Nav ────────────────────────────────────────────────────── */

.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 64px;
  background: var(--color-background);
  border-bottom: 0.5px solid var(--color-border);
}

.landing-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-nav__logo {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-text-primary);
  font-weight: 400;
}

.landing-nav__cta {
  padding: 10px 20px;
  font-size: 14px;
}

/* ── Hero ─────────────────────────────────────────────────────────── */

.hero {
  padding-top: 140px;
  padding-bottom: 96px;
  text-align: center;
}

.hero-content {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
  /* Entrance animation — JS adds .loaded after 100ms */
  opacity: 0;
  transform: translateY(16px);
}

.hero-content.loaded {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Eyebrow badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-purple-50);
  border: 0.5px solid var(--color-purple-200);
  color: var(--color-purple-600);
  padding: 6px 14px;
  border-radius: 99px;
  font: var(--weight-medium) 12px var(--font-body);
  margin-bottom: 24px;
}

.hero-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-purple-500);
  flex-shrink: 0;
}

/* Headline */
.hero-headline {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0;
}

/* Subline */
.hero-subline {
  font: var(--weight-regular) 18px var(--font-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 480px;
  margin: 24px auto 0;
}

/* CTA row */
.hero-cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

.hero-cta-primary {
  padding: 14px 32px;
  font-size: 16px;
}

.hero-secondary-link {
  font: var(--weight-medium) 15px var(--font-body);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2px;
  transition: border-bottom-color 120ms ease;
}

.hero-secondary-link:hover {
  border-bottom-color: var(--color-text-secondary);
}

/* ── Floating Preview Card ────────────────────────────────────────── */

.hero-preview-wrap {
  max-width: 520px;
  margin: 64px auto 0;
}

.hero-preview-card {
  border-radius: 16px;
  overflow: hidden;
  transform: rotate(-1.5deg);
  padding: 24px;
}

.log-preview {
  background: #080808;
  border-radius: 12px;
  padding: 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 140px;
}

/* Log line animation */
@keyframes logLineAppear {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  88%  { opacity: 1; }
  95%  { opacity: 0; }
  100% { opacity: 0; }
}

.log-line {
  display: block;
  opacity: 0;
}

.log-line-1 { animation: logLineAppear 7s ease-in infinite 0.2s; }
.log-line-2 { animation: logLineAppear 7s ease-in infinite 1.0s; }
.log-line-3 { animation: logLineAppear 7s ease-in infinite 1.8s; }
.log-line-4 { animation: logLineAppear 7s ease-in infinite 2.6s; }
.log-line-5 { animation: logLineAppear 7s ease-in infinite 3.4s; }

/* ── Trust Bar ────────────────────────────────────────────────────── */

.trust-bar {
  background: var(--color-surface);
  border-top: 0.5px solid var(--color-border);
  border-bottom: 0.5px solid var(--color-border);
  padding: 20px 24px;
}

.trust-bar__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  gap: 8px;
  align-items: center;
  font: var(--weight-regular) 13px var(--font-body);
  color: var(--color-text-secondary);
}

.trust-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-purple-500);
  flex-shrink: 0;
}

/* ── Problem Section ──────────────────────────────────────────────── */

.problem-section {
  padding: 96px 24px;
}

.problem-section__inner {
  max-width: 960px;
  margin: 0 auto;
}

.problem-heading {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  margin-top: 12px;
  max-width: 600px;
}

.problem-body {
  font: var(--weight-regular) 16px var(--font-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 560px;
  margin-top: 16px;
}

.problem-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

@media (max-width: 640px) {
  .problem-cards {
    grid-template-columns: 1fr;
  }
}

.problem-card {
  padding: 24px;
}

.problem-card__title {
  font: var(--weight-semibold) 15px var(--font-body);
  color: var(--color-text-primary);
}

.problem-card__body {
  font: var(--weight-regular) 13px var(--font-body);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-top: 8px;
}

/* ── $25,000 Callout ─────────────────────────────────────────────── */

.callout-25k {
  background: #0D0D0D;
  padding: 96px 24px;
  text-align: center;
}

.callout-25k__inner {
  max-width: 640px;
  margin: 0 auto;
}

.callout-25k__number {
  font-family: var(--font-display);
  font-size: clamp(72px, 12vw, 120px);
  font-weight: 400;
  line-height: 1;
  color: var(--color-orange-400);
}

.callout-25k__label {
  font: var(--weight-medium) 18px var(--font-body);
  color: #FFFFFF;
  margin-top: 20px;
}

.callout-25k__body {
  font: var(--weight-regular) 16px var(--font-body);
  color: #9CA3AF;
  line-height: var(--leading-relaxed);
  max-width: 520px;
  margin: 16px auto 0;
}

.callout-25k__fine {
  font: var(--weight-regular) 12px var(--font-body);
  color: #525252;
  margin-top: 24px;
}

/* ── How It Works ─────────────────────────────────────────────────── */

.how-it-works {
  padding: 96px 24px;
}

.how-it-works__inner {
  max-width: 720px;
  margin: 0 auto;
}

.how-heading {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  margin-top: 12px;
}

/* Steps */
.steps {
  position: relative;
  margin-top: 56px;
}

.steps__line {
  position: absolute;
  left: 23px;
  top: 48px;
  width: 1px;
  height: calc(100% - 96px);
  background: var(--color-border);
}

.step {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding-bottom: 48px;
}

.step:last-child {
  padding-bottom: 0;
}

.step__number {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 400;
  color: var(--color-purple-100);
  line-height: 1;
  width: 48px;
  flex-shrink: 0;
  text-align: center;
}

.step__content {
  flex: 1;
  padding-top: 8px;
}

.step__title {
  font: var(--weight-semibold) 18px var(--font-body);
  color: var(--color-text-primary);
}

.step__body {
  font: var(--weight-regular) 14px var(--font-body);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-top: 8px;
}

/* ── Final CTA ────────────────────────────────────────────────────── */

.final-cta {
  background: var(--color-surface);
  border-top: 0.5px solid var(--color-border);
  padding: 96px 24px;
  text-align: center;
}

.final-cta__inner {
  max-width: 640px;
  margin: 0 auto;
}

.final-cta__heading {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.final-cta__btn {
  padding: 16px 40px;
  font-size: 16px;
  display: inline-block;
  margin-top: 32px;
}

.final-cta__note {
  font: var(--weight-regular) 13px var(--font-body);
  color: var(--color-text-muted);
  margin-top: 12px;
}

/* ── Footer ───────────────────────────────────────────────────────── */

.landing-footer {
  background: #0D0D0D;
  padding: 32px 24px;
}

.landing-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.landing-footer__logo {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  color: #FFFFFF;
}

.landing-footer__credit {
  font: var(--weight-regular) 12px var(--font-body);
  color: #525252;
}

/* ── Scroll-reveal ────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms ease, transform 400ms ease;
}

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

.reveal.stagger-1 { transition-delay: 0ms; }
.reveal.stagger-2 { transition-delay: 60ms; }
.reveal.stagger-3 { transition-delay: 120ms; }