/*
  Layout layer — generic, brand-agnostic page-composition patterns shared by
  every landing page in this repo: site header/nav, hero, trust strip,
  media+bullets ("concept") grid, checklist, photo gallery mosaic, CTA banner,
  footer. Reuse verbatim on any future page; only the page's own style.css
  should hold content-specific layout (pricing tables, custom cards, etc.).
*/

body { overflow-x: hidden; }

/* ---------- Site header ---------- */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding-block: var(--space-4);
  transition: padding var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  padding-block: var(--space-3);
  background: rgb(18 13 22 / 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand-mark {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-weight: var(--fw-bold);
}

.brand-mark strong {
  font-size: var(--text-md);
  letter-spacing: 0.02em;
}

.brand-mark span {
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  color: var(--color-brand-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-left: 1px solid var(--color-border-strong);
  padding-left: var(--space-2);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.main-nav ul {
  display: flex;
  gap: var(--space-6);
}

.main-nav a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  transition: color var(--dur-fast);
}
.main-nav a:hover { color: var(--color-text-primary); }

.nav-toggle {
  display: none;
  position: relative;
  z-index: 95;
  flex-direction: column;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}
.nav-toggle span {
  width: 20px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: var(--radius-full);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--space-14);
  isolation: isolate;
  /* Forces the browser to clip this box's paint layer to its own bounds.
     Without it, fast/wheel scrolling can desync the hero's composited
     image layer from the rest of the page, letting it visually bleed
     into the section below for a frame or two before catching up. */
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--color-canvas) 4%, rgb(18 13 22 / 0.55) 42%, rgb(18 13 22 / 0.25) 65%),
    linear-gradient(100deg, rgb(18 13 22 / 0.92) 8%, rgb(18 13 22 / 0.35) 48%, transparent 78%);
}

.hero-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gradient-canvas);
  mix-blend-mode: screen;
  opacity: 0.8;
  pointer-events: none;
}

.hero-content {
  max-width: 40rem;
  padding-block: var(--space-12) var(--space-10);
}

.hero-content .eyebrow { margin-bottom: var(--space-5); }

.hero-content h1 { margin-bottom: var(--space-5); }

.hero-content .lede {
  max-width: 34rem;
  margin-bottom: var(--space-8);
  font-size: var(--text-base);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.hero-actions .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.hero-actions .btn-ghost svg { transition: transform var(--dur-base) var(--ease-out); }
.hero-actions .btn-ghost:hover svg { transform: translateY(3px); }

.hero-float-card {
  position: absolute;
  right: var(--container-pad);
  bottom: var(--space-10);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  border-radius: var(--radius-xl);
  background: rgb(30 22 36 / 0.7);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-lg);
}

.hero-float-card img {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.15);
}

/* Icon variant of the float card's leading visual, for when there's no
   partner logo to show — e.g. a rating star instead of a photo. */
.hero-float-icon {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-full);
  background: var(--color-brand-soft);
  color: var(--color-brand-light);
  display: grid;
  place-items: center;
}

.hero-float-card .value {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: 1.3;
}
.hero-float-card .label {
  display: block;
  font-size: var(--text-2xs);
  color: var(--color-text-secondary);
  max-width: 10rem;
  line-height: 1.35;
}

/* ---------- Trust strip ---------- */

.trust-strip {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-canvas-alt);
}

.trust-strip .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-6);
}

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

.trust-item .icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
  color: var(--color-brand-light);
  display: grid;
  place-items: center;
}

.trust-item strong {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
}
.trust-item small {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

/* ---------- Concept grid (media + bullets, either order) ---------- */

.concept-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-10);
  align-items: center;
}

.concept-media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
}
.concept-media img { width: 100%; height: 100%; object-fit: cover; }
.concept-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 55%, rgb(18 13 22 / 0.55));
  pointer-events: none;
}

.usp-list { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-7); }

.usp-item { display: flex; gap: var(--space-4); }

.usp-icon {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-brand-light);
  display: grid;
  place-items: center;
}

.usp-item h3 { margin-bottom: var(--space-1); }
.usp-item p { color: var(--color-text-secondary); font-size: var(--text-sm); max-width: 32rem; }

/* ---------- Checklist (bullet list with a check icon) ---------- */

.check-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-7); }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}
.check-list li svg {
  flex: none;
  margin-top: 4px;
  color: var(--color-brand-light);
  background: var(--color-brand-soft);
  border-radius: var(--radius-full);
  padding: 4px;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
}

/* ---------- Photo gallery mosaic ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: var(--space-4);
  height: 32rem;
}
.gallery-grid a { position: relative; border-radius: var(--radius-lg); overflow: hidden; display: block; }
.gallery-grid a:first-child { grid-row: 1 / 3; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.gallery-grid a:hover img { transform: scale(1.05); }
.gallery-cap {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--space-4);
  background: linear-gradient(0deg, rgb(0 0 0 / 0.65), transparent);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* ---------- FAQ ---------- */

.faq-list { max-width: 46rem; }

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

.cta-banner {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: var(--space-11) var(--space-8);
  text-align: center;
  background: var(--gradient-canvas), var(--color-surface);
  border: 1px solid var(--color-border);
}

.cta-banner .badge { margin-bottom: var(--space-5); }
.cta-banner h2 { max-width: 34rem; margin-inline: auto; margin-bottom: var(--space-4); }
.cta-banner .lede { max-width: 30rem; margin-inline: auto; margin-bottom: var(--space-8); }

.cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

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

.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-9) var(--space-7);
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.footer-col h4 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-3);
}

.footer-col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col a { font-size: var(--text-sm); color: var(--color-text-secondary); }
.footer-col a:hover { color: var(--color-text-primary); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .main-nav ul { display: none; }
  .nav-toggle { display: flex; }
  .concept-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .concept-media { order: -1; aspect-ratio: 16/10; }
  .trust-strip .container { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-5); }
  .gallery-grid { grid-template-columns: 1fr 1fr; height: 24rem; }
}

@media (max-width: 640px) {
  body.nav-lock { overflow: hidden; }

  /* backdrop-filter makes an element the containing block for its fixed-position
     descendants — that would trap .main-nav's full-screen "inset:0" against the
     header's own (short) box instead of the viewport. Drop it at this breakpoint,
     where the header is a plain solid bar anyway. */
  .site-header.is-scrolled { backdrop-filter: none; }

  .main-nav {
    position: fixed;
    inset: 0;
    top: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--color-canvas-alt);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .main-nav.is-open { opacity: 1; pointer-events: auto; }
  .main-nav ul { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
  .main-nav ul a { font-size: var(--text-lg); }
  .main-nav .btn { margin-top: var(--space-8); }

  .hero { flex-direction: column; align-items: stretch; padding-bottom: var(--space-8); }
  .hero-float-card { position: static; width: fit-content; margin-top: var(--space-6); margin-inline: var(--container-pad); }
  .hero-content { padding-bottom: 0; }

  .gallery-grid { grid-template-columns: 1fr; grid-template-rows: repeat(3, 12rem); height: auto; }
  .gallery-grid a:first-child { grid-row: auto; }
  .footer-grid { flex-direction: column; gap: var(--space-6); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}