/* Reltano Visual Polish v3 — targeted refinements only, no redesign. */

/* Make the page feel denser and more deliberate without changing architecture. */
.landing-section {
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}

/* The current hero is visually strong but oversized on common laptop screens. */
.hero-section {
  padding-top: clamp(3.7rem, 5vw, 5rem);
  padding-bottom: clamp(4rem, 5.5vw, 5.4rem);
}

.hero-grid-v2 {
  grid-template-columns: minmax(0, 1.02fr) minmax(390px, 0.9fr);
  gap: clamp(2.4rem, 4vw, 4.75rem);
}

.hero-copy-v2 {
  max-width: 800px;
}

.hero-copy-v2 h1 {
  max-width: 18ch;
  font-size: clamp(2.8rem, 4.2vw, 4.35rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.hero-section .hero-lead {
  max-width: 62ch;
  margin-top: 1.35rem;
}

.hero-section .hero-actions {
  margin-top: 1.65rem;
}

.hero-principles {
  margin-top: 1.8rem;
}

.hero-stage {
  min-height: 430px;
}


/* Visual QA 19.10: inner-page headings inherited dark ink on the dark hero.
   Keep the homepage's approved cyan accent untouched; fix only inner pages. */
.landing-main .hero-section.solution-hero h1 {
  color: #f5f9ff;
}

.landing-main .hero-section.solution-hero .back-link {
  color: #b2c9e4;
}

.landing-main .hero-section.solution-hero .back-link:hover,
.landing-main .hero-section.solution-hero .back-link:focus-visible {
  color: #ffffff;
}

/* Keep section headings premium, but avoid billboard-scale wrapping. */
.landing-main h2 {
  max-width: 22ch;
  font-size: clamp(2rem, 3.15vw, 3rem);
  line-height: 1.04;
}

.section-intro {
  max-width: 64ch;
}

/* Dark showcase links were too low-contrast against the graphite surface. */
.builds-section-v2 .text-link,
.builds-section-v2 .proof-grid a {
  color: #58d7ff;
}

.builds-section-v2 .text-link:hover,
.builds-section-v2 .proof-grid a:hover {
  color: #a6efff;
}

/* Dark-header brand mark should remain clearly readable at a glance. */
.site-header .brand-logo,
.footer-brand img {
  filter: drop-shadow(0 8px 20px rgb(20 104 255 / 24%));
}

@media (max-width: 1100px) {
  .hero-grid-v2 {
    gap: 2.5rem;
  }

  .hero-copy-v2 h1 {
    max-width: 17ch;
    font-size: clamp(2.7rem, 4.6vw, 3.9rem);
  }
}

@media (max-width: 980px) {
  .hero-grid-v2 {
    grid-template-columns: 1fr;
  }

  .hero-stage {
    max-width: 760px;
    min-height: 390px;
  }
}

@media (max-width: 720px) {
  .landing-section {
    padding: 2.7rem 0;
  }

  .hero-section {
    padding-top: 3.2rem;
    padding-bottom: 3.6rem;
  }

  .hero-copy-v2 h1 {
    max-width: 15ch;
    font-size: clamp(2.35rem, 10.5vw, 3.4rem);
    line-height: 1.02;
  }

  .hero-section .hero-lead {
    margin-top: 1.2rem;
  }

  .hero-stage {
    min-height: 320px;
  }

  .landing-main h2 {
    max-width: 20ch;
    font-size: clamp(1.9rem, 8vw, 2.65rem);
  }
}

@media (max-width: 430px) {
  .hero-copy-v2 h1 {
    max-width: 14.5ch;
    font-size: clamp(2.2rem, 10vw, 3rem);
  }

  .hero-stage {
    min-height: 295px;
  }
}