/* home.css — index.html only */

/* ─── HERO ───────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  background: var(--color-bg);
  padding-bottom: var(--space-xl);
}

/* Floating mockup field — parallax targets driven by mousemove + data-depth */
.hero__mockups {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-mock {
  position: absolute;
  background: #FFFFFF;
  border: 1px solid rgba(5, 5, 5, 0.08);
  border-radius: 12px;
  box-shadow:
    0 24px 60px -18px rgba(5, 5, 5, 0.30),
    0 4px 14px -6px rgba(5, 5, 5, 0.12);
  overflow: hidden;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Real PNG variant — image fills the card, top-aligned so screenshot reads. */
img.hero-mock,
.hero-mock--real {
  object-fit: cover;
  object-position: top center;
}

/* Skeleton variant — wireframe inside the card. */
.hero-mock--skeleton {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-mock__bar {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.hero-mock__bar span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(5, 5, 5, 0.18);
}

.hero-mock__row {
  height: 8px;
  border-radius: 3px;
  background: rgba(5, 5, 5, 0.10);
}
.hero-mock__row--head {
  height: 14px;
  background: rgba(5, 5, 5, 0.55);
}
.hero-mock__row--short { width: 60%; }

.hero-mock__hero {
  flex: 1;
  min-height: 50px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(5, 5, 5, 0.18), rgba(5, 5, 5, 0.06));
}

.hero-mock__cta {
  width: 80px;
  height: 18px;
  border-radius: 4px;
  background: #050505;
  margin-top: 4px;
}

.hero-mock__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  flex: 1;
}
.hero-mock__grid > div {
  min-height: 28px;
  border-radius: 4px;
  background: rgba(5, 5, 5, 0.10);
}

/* Ten slots — varied size, rotation, depth, and stacking so some overlap
   without flattening into a single grid. Center-axis kept clear for headline. */
/* Rotation is applied via gsap.set in initHeroParallax (data-rotate) so the
   x/y parallax tween doesn't overwrite it. */
.hero-mock--1  { top:  9%; left:  3%;  width: 240px; height: 170px; z-index: 2; }
.hero-mock--2  { top: 14%; right: 5%;  width: 280px; height: 200px; z-index: 3; }
.hero-mock--3  { top: 58%; left:  6%;  width: 220px; height: 160px; z-index: 3; opacity: 0.95; }
.hero-mock--4  { top: 63%; right: 7%;  width: 260px; height: 185px; z-index: 2; }
.hero-mock--5  { top:  4%; left: 30%;  width: 190px; height: 135px; z-index: 1; opacity: 0.75; }
.hero-mock--6  { top: 78%; left: 38%;  width: 200px; height: 140px; z-index: 1; opacity: 0.78; }
.hero-mock--7  { top: 36%; left: -2%;  width: 170px; height: 120px; z-index: 1; opacity: 0.7;  }
.hero-mock--8  { top: 40%; right:-2%;  width: 210px; height: 150px; z-index: 1; opacity: 0.78; }
.hero-mock--9  { top: 28%; left: 18%;  width: 160px; height: 115px; z-index: 4; opacity: 0.9;  }
.hero-mock--10 { top: 50%; right:18%;  width: 150px; height: 108px; z-index: 4; opacity: 0.85; }

@media (max-width: 1024px) {
  .hero-mock--5, .hero-mock--6, .hero-mock--9, .hero-mock--10 { display: none; }
}

@media (max-width: 767px) {
  .hero-mock { display: none; }
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--space-xl) + 80px); /* clear fixed nav */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__eyebrow {
  margin-bottom: var(--space-sm);
}

.hero__headline {
  font-family: var(--font-display);
  font-size: var(--size-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

/* Per-line clip mask for the GSAP reveal. Bottom padding gives descenders
   ('g', 'p') and the period room so they're not shaved off at rest. */
.hero__headline-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
}

.hero__headline-text {
  display: block;
}

.hero__subhead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--color-text-secondary);
  line-height: var(--leading-body);
  max-width: 480px;
  margin-bottom: var(--space-lg);
  margin-inline: auto;
}

.hero__cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ─── WHAT YOU GET ───────────────────────────────────────── */

.section-what {
  background: var(--color-bg);
  /* Trim trailing space so the "How It Works" header sits closer below. */
  padding-bottom: calc(var(--section-pad) * 0.45);
}

/* Matching trim on the leading edge of "How It Works". */
.section-how {
  padding-top: calc(var(--section-pad) * 0.45);
}

.section-what__header {
  margin-bottom: var(--space-xl);
}

.section-what__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

/* Card icon SVG placeholder lines — inline SVGs in Gate 1 */
.what-card__icon-wrap {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
}

@media (max-width: 1024px) {
  .section-what__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .section-what__grid {
    grid-template-columns: 1fr;
  }
}

/* ─── HOW IT WORKS ───────────────────────────────────────── */

.section-how {
  background: var(--color-surface);
}

.section-how__header {
  margin-bottom: var(--space-xl);
}

.section-how__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.how-step {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border); /* simple rule per step — replaces decorative number */
}

.how-step__index {
  font-family: var(--font-body);
  font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
  display: block;
}

.how-step__heading {
  font-family: var(--font-display);
  font-size: var(--size-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.how-step__body {
  font-size: var(--size-small);
  color: var(--color-text-secondary);
  line-height: var(--leading-body);
}

@media (max-width: 1024px) {
  .section-how__steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .section-how__steps {
    grid-template-columns: 1fr;
  }
}

/* ─── PRICE TEASER ───────────────────────────────────────── */

.section-price {
  /* data-dark applied in HTML */
}

.section-price__header {
  margin-bottom: var(--space-xl);
}

.section-price__grid {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--space-md);
  width: 100%;
}

/* Cards moved closer together by ~35% vs. the prior 42% basis —
   each card now ~47.7%, leaving a tighter ~4.6% channel between. */
.section-price__grid > .card {
  flex: 0 1 47.7%;
  max-width: 520px;
}

/* Extra interior breathing room — the two tracks should feel substantial. */
.section-price__grid .card__inner {
  padding-block: var(--space-lg);
}

/* Price track cards: drop the divider rule above the CTA — cleaner footer. */
.section-price__grid .card__footer {
  border-top: none;
}

.price-card__track {
  font-family: var(--font-body);
  font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
  display: block;
}

.price-card__total {
  font-family: var(--font-display);
  font-size: var(--size-h1);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-sm);
}

@media (max-width: 767px) {
  .section-price__grid {
    flex-direction: column;
  }
  .section-price__grid > .card {
    flex: 1 1 auto;
    max-width: none;
  }
}

/* ─── EMAIL CTA ──────────────────────────────────────────── */

.section-cta {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  /* data-dark applied in HTML */
}

.section-cta__inner {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
}

.section-cta__headline {
  font-family: var(--font-display);
  font-size: var(--size-h1);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-sm);
}

.section-cta__subhead {
  font-size: var(--size-body);
  color: var(--color-text-muted);
  line-height: var(--leading-body);
  margin-bottom: var(--space-lg);
}