/* Layout: navigation + section scaffolding */

/* ----- Navigation ----- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  min-height: var(--nav-height);
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition:
    background var(--dur-base) var(--ease-out-soft),
    border-color var(--dur-base) var(--ease-out-soft),
    backdrop-filter var(--dur-base) var(--ease-out-soft);
}

.nav.is-scrolled {
  background: rgba(10, 14, 23, 0.78);
  border-bottom-color: var(--border-subtle);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--nav-height);
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-inline: var(--space-5);
  padding-block: var(--space-2);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: var(--text-lg);
}

.nav__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 2px 12px rgba(107, 63, 160, 0.4));
}

.nav__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
}

.nav__link {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out-soft);
  position: relative;
}

.nav__link:hover {
  color: var(--text-primary);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out-soft);
}

.nav__link:hover::after { transform: scaleX(1); }

.nav__cta {
  display: inline-flex;
  align-items: center;
}

/* Intermediate widths (desktop but tight): keep brand on the left, link
   cluster in the middle, sign-in/sign-up on the right — but stack content
   *inside* the link cluster and the cta cluster instead of letting the nav
   wrap horizontally.

   - The link cluster splits in two: page-anchor links on row 1, site-page
     links on row 2. This is driven by `.nav__sep` turning into a 0px-tall
     full-width flex item, which forces a row break inside the wrapping
     `.nav__links` container without any HTML changes.
   - The Sign In / Sign Up buttons stack vertically and stretch to match
     the wider button's width. */
@media (max-width: 1200px) and (min-width: 761px) {
  .nav__sep {
    flex-basis: 100%;
    width: 0;
    height: 0;
    background: transparent;
    margin: 0;
  }
  .nav__links {
    justify-content: flex-start;
    row-gap: var(--space-3);
  }
  .nav__cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
}

@media (max-width: 760px) {
  .nav__links { display: none; }
}

/* ----- Sections ----- */

.section {
  position: relative;
  padding-block: clamp(var(--space-8), 12vw, var(--space-11));
  overflow: hidden;
}

/* Unified section surfaces — every dark/elevated section (including the hero)
   shares the same --section-base token defined in tokens.css. */
.section--dark    { background: var(--section-base); }
.section--elevated{ background: var(--section-base); }
.section--light   { background: var(--surface-light); color: var(--text-on-light); }
.section--hero    { background: var(--section-base); padding-top: calc(var(--nav-height) + var(--space-8)); padding-bottom: var(--space-9); min-height: 100vh; display: flex; align-items: center; }

/* The active canvas lattice translates rigidly so the logo lands centered on
   .hero__visual; the static CSS .lattice--muted background reads the same
   --lattice-origin-{x,y} offset published by lattice.js#reposition() so both
   lattice layers stay pixel-aligned with each other at every container width. */
.section--hero .lattice--muted {
  background-position: var(--lattice-origin-x, 0) var(--lattice-origin-y, 0);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 760px;
  margin-bottom: var(--space-8);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

.section__head--center .eyebrow::before { display: none; }
.section__head--center .eyebrow { justify-content: center; }

/* Section dividers — subtle angled cut echoing the hex lattice's 60° */
.angle-divider {
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  pointer-events: none;
}

.angle-divider--top    { top: -1px; }
.angle-divider--bottom { bottom: -1px; }

/* ----- Hero layout ----- */

.hero {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--space-8);
  align-items: center;
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-inline: var(--space-5);
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 640px;
}

.hero__headline {
  font-size: clamp(2.75rem, 6vw, var(--text-7xl));
  letter-spacing: -0.04em;
  line-height: 1;
}

.hero__headline .grad {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 160% 160%;
  animation: gradient-drift 12s ease-in-out infinite;
}

.hero__sub {
  font-size: clamp(var(--text-lg), 1.5vw, var(--text-xl));
  color: var(--text-secondary);
  max-width: 520px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.hero__meta span { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__meta span::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nvert-teal);
  box-shadow: 0 0 12px var(--nvert-teal);
}

.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .hero__visual { max-width: 420px; margin-inline: auto; }
}

/* ----- Grids ----- */

.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--problem { grid-template-columns: repeat(4, 1fr); }
.grid--diff    { grid-template-columns: repeat(4, 1fr); }
.grid--steps   { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid--metrics { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }

/* 5-card team grid: 3 top, 2 centered bottom */
.grid--team {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.grid--team > :nth-child(4) { grid-column: 1 / 2; }
.grid--team > :nth-child(5) { grid-column: 2 / 3; }

/* Center the last row of 2 cards */
@media (min-width: 1025px) {
  .grid--team {
    grid-template-columns: repeat(6, 1fr);
  }
  .grid--team > :nth-child(1) { grid-column: 1 / 3; }
  .grid--team > :nth-child(2) { grid-column: 3 / 5; }
  .grid--team > :nth-child(3) { grid-column: 5 / 7; }
  .grid--team > :nth-child(4) { grid-column: 2 / 4; }
  .grid--team > :nth-child(5) { grid-column: 4 / 6; }
}

@media (max-width: 1024px) {
  .grid--problem,
  .grid--diff    { grid-template-columns: repeat(2, 1fr); }
  .grid--team    { grid-template-columns: repeat(2, 1fr); }
  .grid--metrics { grid-template-columns: repeat(2, 1fr); }
  .grid--steps   { grid-template-columns: 1fr; }
  .grid--team > :nth-child(4),
  .grid--team > :nth-child(5) { grid-column: auto; }
}

@media (max-width: 560px) {
  .grid--problem,
  .grid--diff,
  .grid--team,
  .grid--metrics { grid-template-columns: 1fr; }
}

/* ----- CTA band ----- */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-7), 6vw, var(--space-9)) clamp(var(--space-5), 5vw, var(--space-8));
  background:
    radial-gradient(circle at 20% 30%, rgba(107, 63, 160, 0.35), transparent 55%),
    radial-gradient(circle at 85% 70%, rgba(176, 40, 120, 0.3), transparent 55%),
    linear-gradient(135deg, #0F1E38 0%, #0A0E17 100%);
  border: 1px solid var(--border-muted);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.cta-band__headline {
  font-size: clamp(2rem, 4vw, var(--text-5xl));
  letter-spacing: -0.03em;
  max-width: 720px;
}

.cta-band__sub {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 560px;
}

/* ----- Footer ----- */

.footer {
  padding-block: var(--space-7) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-black);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
}

.footer__logo { width: 28px; height: 28px; }

.footer__links {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.footer__link {
  font-size: var(--text-sm);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out-soft);
}

.footer__link:hover { color: var(--text-primary); }

.footer__legal {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ----- Mobile: nav + hero + footer ergonomics (≤ 760px) ----- */
@media (max-width: 760px) {
  /* Fixed nav needs its own safe-area handling because it lives outside .container */
  .nav__inner {
    padding-inline:
      max(var(--space-5), env(safe-area-inset-left))
      max(var(--space-5), env(safe-area-inset-right));
  }

  /* Footer mirror */
  .footer__inner {
    padding-inline:
      max(0px, env(safe-area-inset-left))
      max(0px, env(safe-area-inset-right));
    gap: var(--space-4);
  }

  .footer__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* On iOS Safari, min-height: 100vh resolves taller than the visible viewport
     while the URL bar is showing, pushing hero content below the fold. Drop it
     on mobile and let the existing top/bottom padding size the hero to content. */
  .section--hero { min-height: 0; }

  /* Hero typography breathes a little when headlines wrap to 2-3 lines on phone */
  .hero__headline { line-height: 1.08; }

  /* The default gradient (#0A5EB8 → #6B3FA0 → #B02878) sinks into the dark
     mobile hero background. Swap to the brighter brand variants already used
     in card-icon tints so the headline accent stays readable on phone. */
  .hero__headline .grad {
    background-image: linear-gradient(135deg, #5C9EFF 0%, #A77BDF 50%, #E0529E 100%);
  }

  .hero__meta {
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
  }

  .hero__actions {
    width: 100%;
  }

  .hero__actions .btn {
    flex: 1 1 auto;
  }
}