/* =============================================================================
   LAYOUT — page regions: header, hero, section grids, footer.
   ========================================================================== */

/* ----------------------------------------------------------------- Header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: 0 2px 12px rgba(11, 15, 43, .04);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-5) var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-ink);
}
.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--font-weight-heading);
}

.main-nav { display: flex; align-items: center; gap: 36px; }
.main-nav a {
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-semi);
  color: var(--color-ink);
}
.main-nav a:hover { color: var(--color-primary); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }

.nav-toggle { display: none; padding: 8px; background: none; border: none; }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 24px; height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
  content: '';
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after  { position: absolute; top: 7px; }

@media (max-width: 980px) {
  /* Pin the header to an exact height so the fullscreen nav below can offset
     itself by --header-height and line up precisely. */
  .header-inner { min-height: var(--header-height); padding-block: 0; }

  .main-nav {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6) var(--gutter);
    background: var(--color-bg);
    transform: translateX(100%);
    /* visibility keeps the closed menu out of the tab order and off screen
       readers; it's delayed so the slide-out animation still plays */
    visibility: hidden;
    transition: transform .25s var(--ease), visibility 0s linear .25s;
    overflow-y: auto;
  }
  .main-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .25s var(--ease), visibility 0s;
  }
  .main-nav a { font-size: 1.2rem; }
  .nav-toggle { display: block; }
  .header-actions .btn-outline { display: none; }
  .header-actions .btn { padding: 10px 18px; font-size: var(--fs-xs); }
}


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

.hero { position: relative; padding: 80px 0 60px; overflow: hidden; }
.hero-blob {
  position: absolute;
  top: -160px; right: -160px;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--color-primary-light), var(--color-primary) 70%);
  opacity: .15;
  filter: blur(10px);
  pointer-events: none;
}
.hero-inner { position: relative; max-width: 820px; margin-inline: auto; text-align: center; }
.hero .lede {
  max-width: 620px;
  margin: 0 auto var(--space-7);
  font-size: var(--fs-lede);
}
.hero .btn-row { margin-bottom: var(--space-5); }
.hero-microcopy {
  font-size: var(--fs-2xs);
  color: var(--color-body);
  margin-bottom: var(--space-8);
}

.hero-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  max-width: 900px;
  margin-inline: auto;
  text-align: left;
}
.hero-badge h4 { margin-bottom: 4px; font-size: var(--fs-base); }
.hero-badge p { font-size: var(--fs-xs); }

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


/* ------------------------------------------------------------ Logo strip -- */

.logo-strip { padding-block: var(--space-7); }
.logo-strip .label {
  margin-bottom: var(--space-5);
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
}
.logo-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 44px;
  opacity: .55;
}
.logo-row span {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: var(--font-weight-heading);
  color: var(--color-ink);
}


/* ------------------------------------------------------------ Grid blocks -- */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }

@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Flip-card grid keeps 2-up a little longer, then stacks */
@media (max-width: 980px) { .flip-card { height: 250px; } }
@media (max-width: 620px) { .flip-card { height: 210px; } }

/* Pricing needs its own breakpoints — 3 columns straight to 1 */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  align-items: stretch;
}
@media (max-width: 980px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .price-card.featured { transform: none; order: -1; }
}

.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
@media (max-width: 980px) {
  .testi-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}


/* --------------------------------------------------------- Feature rows -- */

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-9);
}
.feature-row:last-child { margin-bottom: 0; }
.feature-row.reverse .feature-copy { order: 2; }

.feature-copy .eyebrow { margin-bottom: var(--space-4); }
.feature-copy h3 { margin-bottom: var(--space-4); }
.feature-copy .check-list { margin-top: var(--space-5); }

@media (max-width: 860px) {
  .feature-row { grid-template-columns: 1fr; gap: var(--space-6); margin-bottom: var(--space-8); }
  .feature-row .feature-copy,
  .feature-row.reverse .feature-copy { order: 2; }
  .feature-row .mockup { order: 1; }
}


/* ---------------------------------------------------------------- Process -- */

.process-item { position: relative; }
.process-item .step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
}
.process-item h4 { margin-bottom: var(--space-2); }
.process-item p { font-size: var(--fs-xs); }


/* --------------------------------------------------------------- Final CTA -- */

.final-cta {
  position: relative;
  overflow: hidden;
  margin-inline: var(--gutter);
  padding: 80px var(--space-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--white);
  text-align: center;
}
.final-cta h2 { color: var(--white); }
.final-cta > .container > p,
.final-cta > p {
  max-width: 520px;
  margin: 0 auto var(--space-6);
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, .85);
}
.final-cta .btn-accent { box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }

.cta-form-wrap {
  max-width: 620px;
  margin: var(--space-6) auto 0;
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.cta-form-wrap .form-note {
  margin-top: var(--space-4);
  font-size: var(--fs-2xs);
  color: var(--color-body);
  text-align: center;
}

/* On a narrow screen the banner padding and the card padding stack up and
   crush the fields — pull both back. */
@media (max-width: 620px) {
  .final-cta { margin-inline: var(--space-3); padding: 56px var(--space-4); }
  .cta-form-wrap { padding: var(--space-4); }
}


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

.site-footer {
  padding: var(--space-8) 0 var(--space-5);
  background: var(--color-surface-dark);
  color: rgba(255, 255, 255, .7);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}
.footer-grid h4 {
  margin-bottom: var(--space-4);
  color: var(--white);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.footer-grid li { margin-bottom: 10px; font-size: var(--fs-sm); }
.footer-grid a:hover { color: var(--white); }
.footer-brand .brand { margin-bottom: var(--space-3); color: var(--white); }
.footer-brand p { max-width: 280px; font-size: var(--fs-xs); color: rgba(255, 255, 255, .55); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 255, .45);
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}