/* =============================================================================
   DANTE LABS — HOMEPAGE STYLES
   Page-specific styles for index.html
   Requires: base.css (loaded first)
   ============================================================================= */

/* .hero, .hero-video, .hero-trust-strip — moved to base.css */

/* ─── WHO WE HELP ────────────────────────────────────────────────────────────── */



/* ─── WHO WE HELP ────────────────────────────────────────────────────────────── */
.who-we-help {
  background: var(--color-bg);
}

.who-we-help-header {
  text-align: left;
  max-width: 680px;
  margin: 0 0 48px 0;
}

/* .cards-row — now in base.css */

/* ─── PROOF BAND ─────────────────────────────────────────────────────────────── */
.proof-band {
  background: var(--color-dark);
  color: #ffffff;
}

.proof-band-header {
  margin-bottom: 60px;
  max-width: 680px;
}

.proof-band-header .h2 {
  color: #ffffff;
  line-height: 1.25;
}

.proof-statement {
  font-size: var(--font-body-size);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  max-width: 760px;
  margin-bottom: 44px;
}

/* ─── DISTINCTION SECTION WRAPPER ────────────────────────────────────────────── */
.distinction {
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}

.distinction::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('media/biology_hero.png') center / cover no-repeat;
  opacity: 0.03;
  filter: grayscale(100%);
  pointer-events: none;
}

.distinction > .container {
  position: relative;
  z-index: 1;
}

.distinction-intro {
  max-width: 680px;
  margin-bottom: 56px;
}

.distinction-intro .h2 {
  margin-bottom: 28px;
}

/* .cta-block, .cta-block-grid, .cta-product-img, .btn-price-mobile,
   .cta-mobile-micro, .order-details — moved to base.css */

/* ─── CREDENTIAL BAR ─────────────────────────────────────────────────────────── */


.credential-bar {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 48px;
  flex-wrap: wrap;
}

.credential-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 12px;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

.credential-stat strong {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 300;
  color: var(--color-dark);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* ─── RESPONSIVE: 1024px ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .hero-text .h1 {
    max-width: 100%;
  }

  .hero-photo-zone {
    max-height: 380px;
    aspect-ratio: 16/9;
  }
}

/* ─── RESPONSIVE: 768px ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cards-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .cta-block-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cta-block-image {
    order: -1;
    padding: 0;
    justify-content: center;
  }

  .cta-product-img {
    width: 100%;
    max-width: 100%;
  }

  /* Hide desktop order-details; show price-in-button + micro-copy */
  .cta-block .order-details {
    display: none;
  }

  .btn-price-mobile {
    display: inline;
  }

  .cta-mobile-micro {
    display: block;
  }

  /* Full-width button — easier to tap */
  .cta-block-content .cta-group {
    align-items: stretch;
  }

  .cta-block-content .cta-group .btn-primary {
    width: 100%;
    justify-content: center;
  }

  .order-separator {
    display: none;
  }

  .hero-trust-strip .container {
    padding-left: 0;
    padding-right: 0;
  }

  /* Hero — fix mobile viewport height */
  .hero {
    height: 100svh;
    min-height: 520px;
  }

  /* Hero — reflow trust strip */
  .hero-trust-strip {
    position: absolute;
    bottom: 16px;
    left: var(--container-pad);
    right: var(--container-pad);
    margin-top: 0;
    border-radius: 8px;
    padding: 14px 0;
  }

  .hero-trust-strip .trust-strip-item {
    font-size: 11px;
  }

  .hero > .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 80px;
    padding-bottom: 100px;
  }

  /* Proof band spacing */
  .proof-band-header {
    margin-bottom: 40px;
    max-width: 100%;
  }

  .proof-band-header .h2 {
    text-wrap: balance;
  }

  .proof-statement {
    margin-bottom: 32px;
    text-wrap: pretty;
  }

  .proof-band .btn-text--white[id="proof-band-cta"] {
    margin-top: 36px !important;
  }

  .proof-statement {
    max-width: 100%;
  }

  /* Who We Help header */
  .who-we-help-header {
    margin-bottom: 36px;
  }

  /* Distinction intro */
  .distinction-intro {
    margin-bottom: 36px;
  }

  .distinction-intro .body-copy {
    text-wrap: pretty;
  }

  /* CTA product image — remove transforms on mobile */
  .cta-product-img {
    transform: none;
    filter: drop-shadow(0 20px 40px rgba(28, 33, 40, 0.15));
  }

  .cta-product-img:hover {
    transform: none;
    filter: drop-shadow(0 20px 40px rgba(28, 33, 40, 0.15));
  }

  /* CTA block — left-aligned on mobile */
  .cta-block-content {
    text-align: left;
  }

  .cta-block-content .h2 {
    text-wrap: balance;
  }

  .cta-block-content .body-copy {
    text-wrap: pretty;
  }

  .cta-block-content .order-details {
    align-items: flex-start;
  }

  .cta-block-image {
    justify-content: flex-start;
  }

  .who-we-help-header .h2,
  .distinction-intro .h2,
  .cta-block .h2 {
    text-wrap: balance;
  }

  .proof-closing,
  .card-body,
  .card-headline,
  .distinction-card p,
  .how-step-desc {
    text-wrap: pretty;
  }

  /* Hero body copy */
  .hero-text .body-copy {
    text-wrap: pretty;
    max-width: 100%;
  }
}

/* ─── RESPONSIVE: 480px ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* CTA block — full-width button on smallest screens */
  .cta-block-content .cta-group {
    align-items: stretch;
  }

  .cta-block-content .cta-group .btn-primary {
    width: 100%;
    justify-content: center;
  }

  /* Hero text spacing */
  .hero-text .cta-group {
    margin-top: 32px;
    gap: 20px;
  }

  .hero-text .h1 {
    margin-bottom: 20px;
  }

  .hero-text .body-copy {
    margin-top: 20px !important;
  }

  /* Hero H1 — balance wrapping at small sizes */
  .hero-text .h1 {
    text-wrap: balance;
    font-size: clamp(36px, 9vw, 44px);
  }

  /* CTA group — center align on small mobile */
  .hero-text .cta-group {
    align-items: stretch;
  }

  .hero-text .cta-group .btn-hero {
    justify-content: center;
  }

  /* Proof band h2 — optimize line lengths */
  .proof-band-header .h2 {
    font-size: clamp(24px, 6.5vw, 32px);
  }
}