/*
 * css/styles.css
 * ─────────────────────────────────────────────────────────────
 * Global styles and base resets.
 *
 * Rules:
 *   - Use CSS variables from theme.css — never hardcode values.
 *   - Poppins is the ONLY permitted font family.
 *   - This file handles project-wide structural styles only.
 *   - Component-specific styles live in /components/.
 * ─────────────────────────────────────────────────────────────
 */

/* ── Base reset ──────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scrollbar-gutter: stable;
}

html.is-menu-locked {
  overflow: hidden;
}

/* ── Typography — Poppins is the sole typeface ───────────────── */

body {
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:has(.site-header) {
  padding-top: var(--site-header-height, 60px);
}

/* ── Layout constraints ──────────────────────────────────────── */

:root {
  --layout-max: 1440px;
  --layout-content: 1280px;
  --layout-gutter: 120px;
  --font-family: 'Poppins', sans-serif;
  /* Wordmark logo height (width follows PNG ~3.57:1) */
  --site-logo-icon-size: 36px;
  /* WAI mark — smaller than Raaghu, sized for readability */
  --footer-partner-logo-height: 22px;

  /* Shared typography scale (all pages) */
  --fontsize-xxs: 10px;
  --fontsize-xs:  12px;
  --fontsize-sm:  14px;
  --fontsize-base: 16px;
  --fontsize-lg:  18px;
  --fontsize-xl:  20px;
  --fontsize-2xl: 24px;
  --fontsize-3xl: 30px;
  --fontsize-4xl: 36px;
  --fontsize-5xl: 48px;
  --fontsize-6xl: 60px;
  --fontsize-7xl: 72px;

  /* Semantic type roles — use these in page CSS (map only to --fontsize-*) */
  --fs-micro:    var(--fontsize-xxs);
  --fs-caption:  var(--fontsize-xs);
  --fs-sm:       var(--fontsize-sm);
  --fs-base:     var(--fontsize-base);
  --fs-lg:       var(--fontsize-lg);
  --fs-xl:       var(--fontsize-xl);
  --fs-2xl:      var(--fontsize-2xl);
  --fs-3xl:      var(--fontsize-3xl);
  --fs-4xl:      var(--fontsize-4xl);
  --fs-5xl:      var(--fontsize-5xl);
  --fs-hero-title:    clamp(var(--fontsize-4xl), 8vw, var(--fontsize-5xl));
  --fs-section-title: clamp(var(--fontsize-3xl), 5vw, var(--fontsize-4xl));
  --fs-subtitle:      clamp(var(--fontsize-xl), 2.8vw, var(--fontsize-2xl));
  --fs-card-title:    clamp(var(--fontsize-lg), 2vw, var(--fontsize-xl));
  --fs-detail-title:  clamp(var(--fontsize-base), 1.6vw, var(--fontsize-xl));
  --fs-stat-value:    clamp(var(--fontsize-2xl), 2.6vw, var(--fontsize-3xl));
  --fs-feature-title: clamp(var(--fontsize-lg), 1.8vw, var(--fontsize-2xl));
  --fs-prompt:        clamp(var(--fontsize-xs), 1.6vw, var(--fontsize-sm));
  --fs-mobile-hero:   clamp(var(--fontsize-2xl), 7vw, var(--fontsize-4xl));
  --fs-mobile-badge:  clamp(var(--fontsize-xxs), 2.2vw, var(--fontsize-xs));
}

/* Ultra-wide / 4K — let layout breathe instead of a fixed narrow column */
@media (min-width: 1600px) {
  :root {
    --layout-max: clamp(1440px, 88vw, 1680px);
    --layout-content: clamp(1280px, 82vw, 1520px);
    --layout-gutter: clamp(80px, 4.5vw, 140px);
    --site-logo-icon-size: 38px;
    --footer-partner-logo-height: 24px;
  }
}

@media (min-width: 1900px) {
  :root {
    --layout-max: clamp(1680px, 90vw, 2000px);
    --layout-content: clamp(1520px, 84vw, 1760px);
    --layout-gutter: clamp(100px, 4vw, 160px);
    --site-logo-icon-size: 40px;
    --footer-partner-logo-height: 25px;
  }
}

@media (min-width: 2200px) {
  :root {
    --layout-max: clamp(1900px, 88vw, 2200px);
    --layout-content: clamp(1680px, 82vw, 1920px);
    --layout-gutter: clamp(120px, 3.5vw, 180px);
    --site-logo-icon-size: 42px;
    --footer-partner-logo-height: 26px;
  }
}

@media (max-width: 1024px) {
  :root {
    --layout-gutter: 80px;
    --site-logo-icon-size: 40px;
    --footer-partner-logo-height: 24px;
  }
}

@media (max-width: 768px) {
  :root {
    --layout-gutter: 40px;
    --site-logo-icon-size: 38px;
    --footer-partner-logo-height: 23px;
  }
}

@media (max-width: 480px) {
  :root {
    --layout-gutter: 24px;
    --site-logo-icon-size: 36px;
    --footer-partner-logo-height: 20px;
  }
}

.container-outer {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.container-inner {
  width: 100%;
  max-width: var(--layout-content);
  margin-inline: auto;
}

/* ── Section spacing ─────────────────────────────────────────── */

.section-padding {
  padding-block: 120px;
}

@media (max-width: 1024px) {
  .section-padding {
    padding-block: 80px;
  }
}

@media (max-width: 768px) {
  .section-padding {
    padding-block: 60px;
  }
}

/* ── Site header & navigation ─────────────────────────────────── */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background-color: color-mix(in srgb, var(--bg-primary) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--border-primary) 85%, transparent) 18%,
    color-mix(in srgb, var(--border-primary) 85%, transparent) 82%,
    transparent 100%
  );
  pointer-events: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding: 13px var(--layout-gutter);
  min-height: 66px;
  position: relative;
  z-index: 201;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  color: var(--text-primary);
  text-decoration: none;
  flex-shrink: 0;
  line-height: 0;
}

.site-logo__icon {
  display: block;
  width: auto;
  height: var(--site-logo-icon-size);
  max-width: 100%;
  object-fit: contain;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 400;
  border-radius: var(--border-radius);
  transition: color 0.2s, background-color 0.2s;
}

.site-nav__contact {
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.site-nav__list > li:not(.nav-dropdown) > .site-nav__link:hover,
.site-nav__list > li:not(.nav-dropdown) > .site-nav__link:focus-visible {
  color: var(--text-primary);
}

.site-nav__link:focus-visible {
  outline: 2px solid var(--border-highlight);
  outline-offset: 2px;
  border-radius: var(--border-radius);
}

.site-nav__chevron {
  width: 12px;
  height: 12px;
  opacity: 0.7;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ── Nav dropdown ────────────────────────────────────────────── */

:root {
  --nav-dropdown-accent:        var(--brand-primary);
  --nav-dropdown-icon-bg:       color-mix(in srgb, var(--brand-primary) 12%, var(--bg-primary));
  --nav-dropdown-icon-color:    var(--brand-primary);
  --nav-dropdown-title-color:   var(--brand-primary);
  --nav-dropdown-width-cards:   304px;
  --nav-dropdown-padding-x:     14px;
  --nav-dropdown-padding-y:     12px;
  --nav-dropdown-menu-padding:  8px;
  --nav-dropdown-title-size:    var(--fs-sm);
  --nav-dropdown-desc-size:     var(--fs-caption);
  --nav-dropdown-icon-size:     32px;
  --nav-dropdown-radius:        var(--border-radius);
  --nav-dropdown-card-radius:   var(--border-radius);
  --nav-dropdown-gap:           10px;
  --nav-dropdown-card-gap:      12px;
  --shadow-dropdown:            0 4px 20px rgba(15, 23, 42, 0.08);
  --site-header-drawer-width:   clamp(280px, 50vw, 400px);
  --site-header-backdrop-blur:    8px;
  --site-header-backdrop-tint:    color-mix(in srgb, var(--text-primary) 38%, transparent);
  --site-header-drawer-hover-bg:  var(--bg-card);
  --nav-dropdown-card-hover-bg:   var(--bg-card-hover);
}

.nav-dropdown {
  position: relative;
}

@media (min-width: 768px) {
  .nav-dropdown:hover > .site-nav__link,
  .nav-dropdown:focus-within > .site-nav__link {
    color: var(--nav-dropdown-accent);
    background-color: transparent;
  }

  .nav-dropdown:hover .site-nav__chevron,
  .nav-dropdown:focus-within .site-nav__chevron {
    transform: rotate(180deg);
    opacity: 1;
  }

  .nav-dropdown:hover .nav-dropdown__menu,
  .nav-dropdown:focus-within .nav-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--nav-dropdown-gap));
  left: 0;
  min-width: 0;
  list-style: none;
  border: 1px solid var(--border-primary);
  border-radius: var(--nav-dropdown-radius);
  background-color: var(--bg-primary);
  box-shadow: var(--shadow-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.nav-dropdown__menu--products,
.nav-dropdown__menu--resources {
  width: var(--nav-dropdown-width-cards);
  max-width: var(--nav-dropdown-width-cards);
  padding: 0;
  overflow: hidden;
}

.nav-dropdown__menu--products .nav-dropdown__item--card + .nav-dropdown__item--card,
.nav-dropdown__menu--resources .nav-dropdown__item--card + .nav-dropdown__item--card {
  border-top: 1px solid var(--border-primary);
}

.nav-dropdown__card {
  display: flex;
  align-items: center;
  gap: var(--nav-dropdown-card-gap, 12px);
  padding: var(--nav-dropdown-padding-y) var(--nav-dropdown-padding-x);
  color: inherit;
  text-decoration: none;
  border-radius: 0;
  transition: background-color 0.2s, color 0.2s;
}

.nav-dropdown__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-dropdown-icon-size);
  height: var(--nav-dropdown-icon-size);
  flex-shrink: 0;
  border-radius: var(--border-radius);
  background-color: var(--nav-dropdown-icon-bg);
  color: var(--nav-dropdown-icon-color);
  padding: 0;
}

.nav-dropdown__card-icon svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nav-dropdown__card-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.nav-dropdown__card-body {
  flex: 1;
  min-width: 0;
}

.nav-dropdown__card-title {
  display: block;
  font-size: var(--nav-dropdown-title-size);
  font-weight: 600;
  line-height: 1.25;
  color: var(--nav-dropdown-title-color);
  transition: color 0.2s;
}

.nav-dropdown__card-desc {
  display: block;
  margin-top: 3px;
  font-size: var(--nav-dropdown-desc-size);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-muted);
}

.nav-dropdown__menu--resources .nav-dropdown__card-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-dropdown__card-arrow {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: var(--nav-dropdown-accent);
}

.nav-dropdown__card:hover,
.nav-dropdown__card:focus-visible,
.nav-dropdown__card[aria-current='page'] {
  background-color: var(--nav-dropdown-card-hover-bg);
}

.nav-dropdown__card:hover .nav-dropdown__card-title,
.nav-dropdown__card:focus-visible .nav-dropdown__card-title {
  color: var(--nav-dropdown-accent);
}

.nav-dropdown__card[aria-current='page'] .nav-dropdown__card-title {
  color: var(--nav-dropdown-accent);
  font-weight: 600;
}

.nav-dropdown__card:focus-visible {
  outline: 2px solid var(--border-highlight);
  outline-offset: -2px;
}

@media (min-width: 768px) {
  .nav-dropdown__menu--products,
  .nav-dropdown__menu--resources {
    padding: var(--nav-dropdown-menu-padding);
  }

  .nav-dropdown__menu--products .nav-dropdown__item--card + .nav-dropdown__item--card,
  .nav-dropdown__menu--resources .nav-dropdown__item--card + .nav-dropdown__item--card {
    border-top: none;
  }

  .nav-dropdown__menu--products .nav-dropdown__item--card + .nav-dropdown__item--card::before,
  .nav-dropdown__menu--resources .nav-dropdown__item--card + .nav-dropdown__item--card::before {
    content: '';
    display: block;
    height: 1px;
    margin: 4px var(--nav-dropdown-padding-x);
    background-color: var(--border-primary);
  }

  .nav-dropdown__menu--products .nav-dropdown__card,
  .nav-dropdown__menu--resources .nav-dropdown__card {
    border-radius: var(--nav-dropdown-card-radius);
  }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.site-header__actions .btn {
  padding: 7px 15px;
  font-size: var(--fs-sm);
}

.site-header__actions .btn--ghost {
  padding: 7px 13px;
}

.site-header__actions .btn--primary {
  padding: 7px 17px;
}

.site-header__drawer {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.site-header__toggle-wrap {
  display: none;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  position: relative;
}

.site-header__toggle {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-left: auto;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  transition: background-color 0.2s, border-color 0.2s;
}

.site-header__toggle:hover,
.site-header__toggle:focus-visible {
  background-color: var(--bg-card-hover);
  border-color: var(--border-highlight);
}

.site-header__toggle:has(.site-header__hamburglar.is-closed) {
  border-color: var(--border-highlight);
  background-color: var(--bg-card);
}

.site-header__toggle:has(.site-header__hamburglar.is-closed):hover,
.site-header__toggle:has(.site-header__hamburglar.is-closed):focus-visible {
  border-color: var(--border-highlight);
  background-color: var(--bg-card-hover);
}

.site-header__toggle:focus-visible {
  outline: none;
  border-color: var(--border-highlight);
  background-color: var(--bg-card-hover);
}

.site-header__toggle:has(.site-header__hamburglar.is-closed):focus-visible {
  background-color: var(--bg-card-hover);
}

/* Hamburger toggle — bun morph uses theme colors */
.site-header__hamburglar {
  --hamburglar-animation: 0.6s;
  position: relative;
  z-index: 1;
  display: block;
  width: 22px;
  height: 16px;
  -webkit-touch-callout: none;
  user-select: none;
  pointer-events: none;
}

.site-header__hamburglar .burger-icon {
  position: relative;
  width: 22px;
  height: 16px;
}

.site-header__hamburglar .burger-container {
  position: relative;
  width: 22px;
  height: 16px;
}

.site-header__hamburglar .burger-bun-top,
.site-header__hamburglar .burger-bun-bot,
.site-header__hamburglar .burger-filling {
  position: absolute;
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.site-header__hamburglar .burger-bun-top {
  top: 0;
  transform-origin: 22px 1px;
}

.site-header__hamburglar .burger-bun-bot {
  bottom: 0;
  transform-origin: 22px 1px;
}

.site-header__hamburglar .burger-filling {
  top: 7px;
}

.site-header__hamburglar.is-open .burger-bun-top {
  left: 0;
  top: 0;
  transform: rotate(0deg);
}

.site-header__hamburglar.is-open .burger-bun-bot {
  left: 0;
  bottom: 0;
  top: auto;
  transform: rotate(0deg);
}

.site-header__hamburglar.is-open .burger-filling {
  width: 22px;
  left: 0;
}

.site-header__hamburglar.is-closed .burger-bun-top {
  left: -3px;
  top: 1px;
  transform: rotate(-45deg);
}

.site-header__hamburglar.is-closed .burger-bun-bot {
  left: -3px;
  transform: rotate(45deg);
}

.site-header__hamburglar.is-closed .burger-filling {
  width: 0;
  left: 22px;
}

.site-header__hamburglar.is-hamburglar-animated.is-closed .burger-bun-top {
  animation: site-header-bun-top-out var(--hamburglar-animation) linear forwards;
}

.site-header__hamburglar.is-hamburglar-animated.is-closed .burger-bun-bot {
  animation: site-header-bun-bot-out var(--hamburglar-animation) linear forwards;
}

.site-header__hamburglar.is-hamburglar-animated.is-open .burger-bun-top {
  animation: site-header-bun-top-in var(--hamburglar-animation) linear forwards;
}

.site-header__hamburglar.is-hamburglar-animated.is-open .burger-bun-bot {
  animation: site-header-bun-bot-in var(--hamburglar-animation) linear forwards;
}

.site-header__hamburglar.is-hamburglar-animated.is-closed .burger-filling {
  animation: site-header-burger-fill-out var(--hamburglar-animation) linear forwards;
}

.site-header__hamburglar.is-hamburglar-animated.is-open .burger-filling {
  animation: site-header-burger-fill-in var(--hamburglar-animation) linear forwards;
}

@keyframes site-header-bun-top-out {
  0% { left: 0; top: 0; transform: rotate(0deg); }
  20% { left: 0; top: 0; transform: rotate(15deg); }
  80% { left: -3px; top: 0; transform: rotate(-60deg); }
  100% { left: -3px; top: 1px; transform: rotate(-45deg); }
}

@keyframes site-header-bun-bot-out {
  0% { left: 0; transform: rotate(0deg); }
  20% { left: 0; transform: rotate(-15deg); }
  80% { left: -3px; transform: rotate(60deg); }
  100% { left: -3px; transform: rotate(45deg); }
}

@keyframes site-header-bun-top-in {
  0% { left: -3px; bottom: 0; transform: rotate(-45deg); }
  20% { left: -3px; bottom: 0; transform: rotate(-60deg); }
  80% { left: 0; bottom: 0; transform: rotate(15deg); }
  100% { left: 0; bottom: 1px; transform: rotate(0deg); }
}

@keyframes site-header-bun-bot-in {
  0% { left: -3px; transform: rotate(45deg); }
  20% { left: -3px; bottom: 0; transform: rotate(60deg); }
  80% { left: 0; bottom: 0; transform: rotate(-15deg); }
  100% { left: 0; transform: rotate(0deg); }
}

@keyframes site-header-burger-fill-in {
  0% { width: 0; left: 22px; }
  40% { width: 0; left: 24px; }
  80% { width: 22px; left: -4px; }
  100% { width: 22px; left: 0; }
}

@keyframes site-header-burger-fill-out {
  0% { width: 22px; left: 0; }
  20% { width: 26px; left: -4px; }
  40% { width: 0; left: 24px; }
  100% { width: 0; left: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__hamburglar.is-open .burger-bun-top,
  .site-header__hamburglar.is-closed .burger-bun-top,
  .site-header__hamburglar.is-open .burger-bun-bot,
  .site-header__hamburglar.is-closed .burger-bun-bot,
  .site-header__hamburglar.is-open .burger-filling,
  .site-header__hamburglar.is-closed .burger-filling {
    animation: none !important;
  }

  .site-header__hamburglar.is-open .burger-bun-top {
    left: 0;
    top: 0;
    transform: rotate(0deg);
  }

  .site-header__hamburglar.is-open .burger-bun-bot {
    left: 0;
    transform: rotate(0deg);
  }

  .site-header__hamburglar.is-open .burger-filling {
    width: 22px;
    left: 0;
  }

  .site-header__hamburglar.is-closed .burger-bun-top {
    left: -3px;
    top: 1px;
    transform: rotate(-45deg);
  }

  .site-header__hamburglar.is-closed .burger-bun-bot {
    left: -3px;
    transform: rotate(45deg);
  }

  .site-header__hamburglar.is-closed .burger-filling {
    width: 0;
    left: 22px;
  }
}

.site-header__backdrop {
  display: none;
}

@media (min-width: 768px) {
  .site-header {
    overflow: visible;
  }

  .site-header__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'logo nav actions';
    align-items: center;
    column-gap: 24px;
    justify-content: unset;
  }

  .site-header__inner > .site-logo {
    grid-area: logo;
    position: static;
    justify-self: start;
    flex-shrink: 0;
    top: auto;
    left: auto;
    transform: none;
    z-index: 2;
  }

  .site-header__drawer {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    position: static;
    flex: unset;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 0;
    padding-inline: 4px;
    pointer-events: none;
  }

  .site-header__drawer .site-nav {
    grid-column: 2;
    justify-self: center;
    flex: unset;
    align-self: center;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    pointer-events: auto;
  }

  .site-header__drawer .site-header__actions {
    grid-column: 3;
    justify-self: end;
    position: static;
    flex-shrink: 0;
    min-width: max-content;
    padding-left: 12px;
    margin: 0;
    top: auto;
    right: auto;
    transform: none;
    white-space: nowrap;
    border-top: none;
    padding-top: 0;
    pointer-events: auto;
    z-index: 2;
  }

  .site-nav__list {
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
  }

  .site-nav__list > li {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .nav-dropdown {
    align-self: stretch;
  }

  .nav-dropdown > .site-nav__link {
    align-self: center;
  }

  .site-nav__link {
    white-space: nowrap;
  }

  .site-header__toggle-wrap,
  .site-header__toggle {
    display: none;
  }

  .site-header__backdrop {
    display: none;
  }
}

/* ── CTA banner (shared end-of-page card) ─────────────────────── */

.cta-banner {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding: 40px var(--layout-gutter) 80px;
}

.cta-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px 36px;
  width: 100%;
  max-width: var(--layout-content);
  margin-inline: auto;
  padding: 40px 48px;
  border: 1px solid var(--border-highlight);
  border-radius: var(--border-radius);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--brand-primary) 18%, var(--bg-secondary)),
    color-mix(in srgb, var(--fabric-blue) 12%, var(--bg-secondary))
  );
  box-shadow: var(--shadow-glow);
}

.cta-banner__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 88px;
  height: 88px;
}

.cta-banner__icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.cta-banner__content {
  flex: 1;
  min-width: 0;
  max-width: none;
}

.cta-banner__title {
  margin-bottom: 10px;
  font-size: var(--fs-subtitle);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

.cta-banner__text {
  max-width: 520px;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text-secondary);
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  flex-shrink: 0;
}

main:has(> .cta-banner:last-child) + .site-footer {
  margin-top: 0;
}

@media (max-width: 1024px) {
  .cta-banner {
    padding: 32px var(--layout-gutter) 64px;
  }

  .cta-banner__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    padding: 32px 28px;
  }

  .cta-banner__visual {
    align-self: center;
    width: 72px;
    height: 72px;
  }

  .cta-banner__icon {
    width: 68px;
    height: 68px;
  }

  .cta-banner__actions {
    justify-content: center;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }

  .cta-banner__content {
    width: 100%;
    text-align: center;
  }

  .cta-banner__text {
    margin-inline: auto;
  }

  .cta-banner__actions .btn {
    width: auto;
    flex: 0 1 auto;
  }
}

@media (max-width: 768px) {
  .cta-banner__inner {
    align-items: center;
    text-align: center;
    padding: 28px 20px;
  }

  .cta-banner__visual {
    align-self: center;
    overflow: visible;
  }

  .cta-banner__content {
    width: 100%;
    text-align: center;
  }

  .cta-banner__text {
    margin-inline: auto;
  }

  .cta-banner__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
  }

  .cta-banner__actions .btn {
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    justify-content: center;
    padding: 6px 10px;
    font-size: var(--fs-caption);
    gap: 6px;
  }

  .cta-banner__actions .btn__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
}

@media (max-width: 400px) {
  .cta-banner__inner {
    padding: 24px 16px;
  }

  .cta-banner__actions {
    gap: 6px;
  }

  .cta-banner__actions .btn {
    padding: 6px 8px;
    font-size: var(--fs-micro);
    gap: 4px;
  }

  .cta-banner__actions .btn__icon {
    width: 12px;
    height: 12px;
  }
}

/* ── Buttons ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 15px;
  font-family: var(--font-family);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, filter 0.2s;
}

.btn--ghost {
  color: var(--text-primary);
  background-color: transparent;
  border-color: var(--border-button-ghost);
  padding: 7px 13px;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--border-highlight);
  background-color: var(--bg-card-hover);
}

.btn--ghost:focus-visible {
  outline: 2px solid var(--border-highlight);
  outline-offset: 2px;
}

.btn--primary,
.landing-btn-primary {
  position: relative;
  isolation: isolate;
  padding: 7px 17px;
  color: var(--text-on-brand);
  font-weight: 600;
  border: none;
  outline: none;
  overflow: hidden;
  background-color: var(--brand-secondary);
  background-image: var(--gradient-button);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: 0 0 20px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

.btn--primary::after,
.landing-btn-primary::after {
  content: '';
  position: absolute;
  top: -50px;
  left: -75px;
  width: 50px;
  height: 155px;
  background: var(--text-on-brand);
  opacity: 0.2;
  transform: rotate(35deg);
  transition: left 550ms cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
  z-index: 0;
}

.btn--primary > *,
.landing-btn-primary > * {
  position: relative;
  z-index: 1;
}

.btn--primary .btn__label,
.landing-btn-primary .btn__label {
  display: inline-block;
  color: var(--text-on-brand);
}

.btn--primary:hover::after,
.btn--primary:focus-visible::after,
.landing-btn-primary:hover::after,
.landing-btn-primary:focus-visible::after {
  left: 120%;
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary::after,
  .landing-btn-primary::after {
    transition: none;
  }

  .btn--primary:hover::after,
  .btn--primary:focus-visible::after,
  .landing-btn-primary:hover::after,
  .landing-btn-primary:focus-visible::after {
    left: -75px;
  }
}

.btn--primary:hover,
.btn--primary:focus-visible,
.landing-btn-primary:hover,
.landing-btn-primary:focus-visible {
  filter: brightness(1.08);
  box-shadow: 0 0 24px color-mix(in srgb, var(--brand-primary) 28%, transparent);
}

.btn--primary:focus-visible {
  outline: 2px solid var(--border-highlight);
  outline-offset: 2px;
}

.btn--primary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-light) 50%, transparent);
  outline-offset: 2px;
}

.btn--outline {
  color: var(--text-primary);
  background-color: transparent;
  border-color: var(--border-primary);
  padding: 7px 13px;
  font-weight: 500;
}

.btn--outline:hover,
.btn--outline:focus-visible {
  border-color: var(--border-highlight);
  background-color: var(--bg-card-hover);
}

/* Hero / CTA secondary — same static hover as Raaghu AI landing-btn-ghost */
.btn--hero-demo {
  color: var(--text-primary);
  background-color: transparent;
  border-color: var(--border-button-ghost);
  padding: 7px 13px;
  font-weight: 500;
}

.btn--hero-demo:hover,
.btn--hero-demo:focus-visible {
  border-color: var(--border-highlight);
  background-color: var(--bg-card-hover);
}

.btn__icon {
  width: 16px;
  height: 16px;
}

/* ── Gradient text utility ───────────────────────────────────── */

.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline;
}

/* ── Card hover (shared — home, Raaghu AI, etc.) ─────────────── */

:root {
  --card-hover-border: color-mix(in srgb, var(--brand-light) 35%, transparent);
  --card-hover-bg: var(--bg-card);
  --card-hover-shadow:
    0 0 0 1px color-mix(in srgb, var(--brand-light) 26%, transparent),
    0 8px 22px color-mix(in srgb, var(--text-primary) 10%, transparent);
  --card-hover-lift: translateY(-2px);
}

.card-hover,
.product-card,
.industry-card,
.partnership__card,
.mc-feature-card,
.mc-showcase-panel,
.mc-impact-card,
.rvr-feature-card,
.spec-kit-features__card,
.spec-kit-panel,
.landing-page .landing-mini-card,
.landing-page .landing-feature-card,
.landing-page .landing-balance-card,
.landing-page .landing-capability-card,
.landing-page .landing-ecif-card,
.landing-page .landing-industry__card,
.landing-page .landing-fabric__detail-card {
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.card-hover:hover,
.card-hover:focus-visible,
.product-card:hover,
.product-card:focus-visible,
.industry-card:hover,
.industry-card:focus-visible,
.partnership__card:hover,
.partnership__card:focus-visible,
.mc-feature-card:hover,
.mc-feature-card:focus-visible,
.mc-showcase-panel:hover,
.mc-showcase-panel:focus-visible,
.mc-impact-card:hover,
.mc-impact-card:focus-visible,
.rvr-feature-card:hover,
.rvr-feature-card:focus-visible,
.spec-kit-features__card:hover,
.spec-kit-features__card:focus-visible,
.spec-kit-panel:hover,
.spec-kit-panel:focus-visible,
.landing-page .landing-mini-card:hover,
.landing-page .landing-feature-card:hover,
.landing-page .landing-balance-card:hover,
.landing-page .landing-capability-card:hover,
.landing-page .landing-ecif-card:hover,
.landing-page .landing-industry__card:hover,
.landing-page .landing-fabric__detail-card:hover {
  border-color: var(--card-hover-border);
  background-color: var(--card-hover-bg);
  box-shadow: var(--card-hover-shadow);
  transform: var(--card-hover-lift);
}

@media (prefers-reduced-motion: reduce) {
  .card-hover:hover,
  .card-hover:focus-visible,
  .product-card:hover,
  .product-card:focus-visible,
  .industry-card:hover,
  .industry-card:focus-visible,
  .partnership__card:hover,
  .partnership__card:focus-visible,
  .mc-feature-card:hover,
  .mc-feature-card:focus-visible,
  .mc-showcase-panel:hover,
  .mc-showcase-panel:focus-visible,
  .mc-impact-card:hover,
  .mc-impact-card:focus-visible,
  .rvr-feature-card:hover,
  .rvr-feature-card:focus-visible,
  .spec-kit-features__card:hover,
  .spec-kit-features__card:focus-visible,
  .spec-kit-panel:hover,
  .spec-kit-panel:focus-visible,
  .landing-page .landing-mini-card:hover,
  .landing-page .landing-feature-card:hover,
  .landing-page .landing-balance-card:hover,
  .landing-page .landing-capability-card:hover,
  .landing-page .landing-ecif-card:hover,
  .landing-page .landing-industry__card:hover,
  .landing-page .landing-fabric__detail-card:hover {
    transform: none;
  }
}

/* ── Card spotlight (cursor-tracked glow — shared) ───────────── */

:root {
  --card-spotlight-glow: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  --card-spotlight-size: 220px;
  --card-spotlight-opacity: 0.55;
}

.card-spotlight,
.landing-spotlight {
  position: relative;
  overflow: visible;
}

.card-spotlight::after,
.landing-spotlight::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  background: radial-gradient(
    var(--card-spotlight-size) circle at var(--mx, 50%) var(--my, 50%),
    var(--card-spotlight-glow),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.card-spotlight:hover::after,
.card-spotlight:focus-within::after,
.landing-spotlight:hover::after,
.landing-spotlight:focus-within::after {
  opacity: var(--card-spotlight-opacity);
}

.card-spotlight > *,
.landing-spotlight > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .card-spotlight::after,
  .landing-spotlight::after {
    display: none;
  }
}

/* ── Hero badge border beam (shared) ─────────────────────────── */

@property --badge-beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes badge-beam-spin {
  to {
    --badge-beam-angle: 360deg;
  }
}

.hero-badge-beam {
  --badge-beam-inner-bg: color-mix(in srgb, var(--brand-primary) 7%, transparent);
  --badge-beam-glow: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  --badge-beam-color-base: color-mix(in srgb, var(--brand-secondary) 46%, var(--brand-primary) 54%);
  --badge-beam-color-mid: color-mix(in srgb, var(--brand-primary) 58%, var(--brand-light) 42%);
  --badge-beam-color-ramp: color-mix(in srgb, var(--brand-light) 46%, var(--fabric-blue-light) 54%);
  --badge-beam-color-accent: color-mix(in srgb, var(--fabric-blue-light) 65%, var(--fabric-blue) 35%);
  --badge-beam-pill-color: color-mix(in srgb, #ffffff 68%, var(--brand-light) 32%);
  /* Whole pixels only — 1.1px anti-aliases unevenly at 100% zoom */
  --badge-beam-width: 1.3px;
  --badge-beam-spin-duration: 7s;
  --badge-beam-pill-ramp-start: 76%;
  --badge-beam-pill-white-start: 78.5%;
  --badge-beam-pill-white-end: 81%;
  --badge-beam-pill-ramp-end: 83.5%;

  position: relative;
  isolation: isolate;
  border: none;
  background: var(--badge-beam-inner-bg);
  box-shadow: 0 0 20px var(--badge-beam-glow);
  transform: translateZ(0);
}

.hero-badge-beam::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-sizing: border-box;
  padding: var(--badge-beam-width);
  background: conic-gradient(
    from var(--badge-beam-angle),
    var(--badge-beam-color-base) 0%,
    var(--badge-beam-color-base) 54%,
    var(--badge-beam-color-mid) 68%,
    var(--badge-beam-color-ramp) var(--badge-beam-pill-ramp-start),
    var(--badge-beam-pill-color) var(--badge-beam-pill-white-start),
    var(--badge-beam-pill-color) var(--badge-beam-pill-white-end),
    var(--badge-beam-color-ramp) var(--badge-beam-pill-ramp-end),
    var(--badge-beam-color-accent) 92%,
    var(--badge-beam-color-base) 100%
  );
  animation: badge-beam-spin var(--badge-beam-spin-duration) linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
  backface-visibility: hidden;
}

.hero-badge-beam > * {
  position: relative;
  z-index: 1;
}

.hero-badge-beam .hero__badge-copy,
.hero-badge-beam .mc-hero__badge-copy,
.hero-badge-beam .spec-kit-hero__badge-text,
.hero-badge-beam .rvr-hero__badge-copy {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 600;
}

.hero-badge-beam .hero__badge-icon-wrap,
.hero-badge-beam .mc-hero__badge-icon-wrap,
.hero-badge-beam .spec-kit-hero__badge-icon-wrap,
.hero-badge-beam .rvr-hero__badge-icon-wrap {
  color: var(--brand-primary);
  /* Let spark scale animation breathe — do not clip tips */
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .hero-badge-beam::before {
    animation: none;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding-inline: 12px;
    column-gap: 6px;
  }

  .site-header__inner > .site-logo {
    max-width: 92px;
  }

  .site-logo__icon {
    height: calc(var(--site-logo-icon-size) - 8px);
  }

  .site-header__drawer {
    padding-inline: 0;
  }

  .site-header__drawer .site-header__actions {
    padding-left: 4px;
    gap: 4px;
  }

  .site-nav__list {
    gap: 0;
  }

  .site-nav__link {
    gap: 3px;
    padding: 5px 5px;
    font-size: var(--fs-caption);
  }

  .site-nav__chevron {
    width: 10px;
    height: 10px;
  }

  .site-header__actions .btn {
    padding: 5px 8px;
    font-size: var(--fs-caption);
  }

  .site-header__actions .btn--ghost {
    padding: 5px 7px;
  }

  .site-header__actions .btn--primary {
    padding: 5px 9px;
  }

  .site-header__actions .btn--primary .btn__icon {
    display: none;
  }
}

@media (min-width: 901px) and (max-width: 1024px) {
  .site-header__inner {
    padding-inline: 20px;
    column-gap: 12px;
  }

  .site-header__drawer .site-header__actions {
    padding-left: 6px;
    gap: 6px;
  }

  .site-nav__list {
    gap: 0;
  }

  .site-nav__link {
    padding: 6px 7px;
  }

  .site-header__actions .btn {
    padding: 6px 10px;
  }

  .site-header__actions .btn--primary {
    padding-inline: 12px;
  }
}

@media (max-width: 767px) {
  .site-header {
    overflow: visible;
  }

  .site-header__inner > .site-logo {
    position: static;
    transform: none;
    left: auto;
    top: auto;
  }

  .site-header__inner {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--layout-gutter);
    gap: 12px;
    position: relative;
  }

  .site-logo {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
  }

  .site-header__toggle-wrap {
    display: block;
    flex: 0 0 40px;
    order: 2;
  }

  .site-header__toggle {
    display: inline-flex;
    margin-left: 0;
  }

  .site-header.is-menu-open .site-header__toggle {
    position: fixed;
    top: calc((var(--site-header-height, 66px) - 40px) / 2);
    right: 20px;
    z-index: 204;
    border-color: var(--border-highlight);
    background-color: var(--bg-card);
  }

  .site-header__drawer {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    z-index: 202;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: var(--site-header-drawer-width);
    max-width: 100vw;
    height: 100dvh;
    max-height: none;
    padding: 0 16px 20px;
    background-color: var(--bg-primary);
    border: none;
    border-left: 1px solid var(--border-primary);
    border-radius: 0;
    box-shadow: -8px 0 32px color-mix(in srgb, var(--text-primary) 8%, transparent);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.28s ease, visibility 0.28s;
  }

  .site-header__drawer::before {
    content: '';
    display: block;
    flex-shrink: 0;
    height: var(--site-header-height, 60px);
    margin-inline: -16px;
    border-bottom: 1px solid var(--border-primary);
  }

  .site-header.is-menu-open .site-header__drawer {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  .site-header__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 199;
    border: 0;
    padding: 0;
    margin: 0;
    background-color: var(--site-header-backdrop-tint);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.28s ease,
      visibility 0.28s ease,
      backdrop-filter 0.28s ease,
      -webkit-backdrop-filter 0.28s ease;
    cursor: pointer;
  }

  html.is-menu-locked .site-header__backdrop:not([hidden]) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    backdrop-filter: blur(var(--site-header-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--site-header-backdrop-blur));
  }

  .site-nav {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    padding-top: 8px;
    padding-bottom: 4px;
    min-height: 0;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .site-nav__list > li {
    width: 100%;
    border-bottom: 1px solid var(--border-primary);
    padding-inline: 4px;
  }

  .site-nav__list > li:last-child {
    border-bottom: none;
  }

  .site-header__drawer .site-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 12px 10px;
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--text-secondary);
    border-radius: var(--border-radius);
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  .site-header__drawer .site-nav__link:hover,
  .site-header__drawer .site-nav__link:focus-visible,
  .site-header__drawer .site-nav__link:active,
  .site-header__drawer .nav-dropdown.is-open > .site-nav__link {
    color: var(--nav-dropdown-accent);
    background-color: transparent;
    border-radius: var(--border-radius);
  }

  .site-header__drawer .site-nav__link:focus-visible {
    outline: 2px solid var(--border-highlight);
    outline-offset: 0;
  }

  .site-header__drawer .nav-dropdown .site-nav__chevron {
    transform: none;
    opacity: 0.7;
  }

  .site-header__drawer .nav-dropdown.is-open .site-nav__chevron {
    transform: rotate(180deg);
    opacity: 1;
  }

  .nav-dropdown:hover .nav-dropdown__menu,
  .nav-dropdown:focus-within .nav-dropdown__menu {
    opacity: 0;
    visibility: hidden;
    transform: none;
  }

  .site-header__drawer .nav-dropdown.is-open .nav-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-dropdown__menu {
    position: static;
    min-width: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: none;
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0.2s;
  }

  .site-header__drawer .nav-dropdown.is-open .nav-dropdown__menu--products,
  .site-header__drawer .nav-dropdown.is-open .nav-dropdown__menu--resources {
    max-height: 480px;
    padding: 0 0 4px;
  }

  .nav-dropdown__menu--products,
  .nav-dropdown__menu--resources {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
  }

  .nav-dropdown__menu--products .nav-dropdown__item--card + .nav-dropdown__item--card,
  .nav-dropdown__menu--resources .nav-dropdown__item--card + .nav-dropdown__item--card {
    border-top: none;
  }

  .nav-dropdown__menu--products .nav-dropdown__card-title,
  .nav-dropdown__menu--resources .nav-dropdown__card-title {
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-secondary);
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  .nav-dropdown__menu--products .nav-dropdown__card,
  .nav-dropdown__menu--resources .nav-dropdown__card {
    display: block;
    padding: 10px 8px 10px 16px;
    border-radius: var(--nav-dropdown-card-radius);
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .nav-dropdown__menu--products .nav-dropdown__card-icon,
  .nav-dropdown__menu--resources .nav-dropdown__card-icon,
  .nav-dropdown__menu--products .nav-dropdown__card-arrow,
  .nav-dropdown__menu--resources .nav-dropdown__card-arrow {
    display: none;
  }

  .nav-dropdown__menu--products .nav-dropdown__card-body,
  .nav-dropdown__menu--resources .nav-dropdown__card-body {
    display: block;
    min-width: 0;
  }

  .nav-dropdown__menu--products .nav-dropdown__card-desc,
  .nav-dropdown__menu--resources .nav-dropdown__card-desc {
    margin-top: 2px;
    font-size: var(--fs-caption);
    font-weight: 400;
    line-height: 1.35;
    color: var(--text-muted);
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  /* Drawer sub-option hover */
  .site-header__drawer .nav-dropdown__menu--products .nav-dropdown__card:hover,
  .site-header__drawer .nav-dropdown__menu--resources .nav-dropdown__card:hover,
  .site-header__drawer .nav-dropdown__menu--products .nav-dropdown__card:focus-visible,
  .site-header__drawer .nav-dropdown__menu--resources .nav-dropdown__card:focus-visible,
  .site-header__drawer .nav-dropdown__menu--products .nav-dropdown__card:active,
  .site-header__drawer .nav-dropdown__menu--resources .nav-dropdown__card:active,
  .nav-dropdown__menu--products .nav-dropdown__card[aria-current='page'],
  .nav-dropdown__menu--resources .nav-dropdown__card[aria-current='page'] {
    background-color: var(--nav-dropdown-card-hover-bg);
  }

  .site-header__drawer .nav-dropdown__menu--products .nav-dropdown__card:hover .nav-dropdown__card-title,
  .site-header__drawer .nav-dropdown__menu--resources .nav-dropdown__card:hover .nav-dropdown__card-title,
  .site-header__drawer .nav-dropdown__menu--products .nav-dropdown__card:focus-visible .nav-dropdown__card-title,
  .site-header__drawer .nav-dropdown__menu--resources .nav-dropdown__card:focus-visible .nav-dropdown__card-title,
  .site-header__drawer .nav-dropdown__menu--products .nav-dropdown__card:active .nav-dropdown__card-title,
  .site-header__drawer .nav-dropdown__menu--resources .nav-dropdown__card:active .nav-dropdown__card-title {
    color: var(--nav-dropdown-accent);
  }

  .nav-dropdown__menu--products .nav-dropdown__card[aria-current='page'] .nav-dropdown__card-title,
  .nav-dropdown__menu--resources .nav-dropdown__card[aria-current='page'] .nav-dropdown__card-title {
    color: var(--nav-dropdown-accent);
    font-weight: 600;
  }

  .site-header__drawer .site-header__actions {
    display: flex;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border-primary);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    position: static;
  }

  .site-header__drawer .site-header__actions .btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    padding: 9px 16px;
    font-size: var(--fs-sm);
  }
}


/* ── Shared scroll progress + reveal (platform / MetaClarity pattern) ── */

.site-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 300;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--gradient-primary);
  will-change: transform;
}

.site-reveal {
  opacity: 0;
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-reveal--up {
  transform: translateY(28px);
}

.site-reveal--left {
  transform: translateX(-36px);
}

.site-reveal--right {
  transform: translateX(36px);
}

.site-reveal--scale {
  transform: scale(0.94);
}

.site-reveal--fade {
  transform: none;
}

.site-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.site-reveal.is-visible.card-hover:hover,
.site-reveal.is-visible.card-hover:focus-visible {
  transform: var(--card-hover-lift);
}

.site-reveal-stagger-item {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-reveal-stagger-item.is-visible {
  opacity: 1;
  transform: none;
}

.site-reveal-stagger-item.is-visible.card-hover:hover,
.site-reveal-stagger-item.is-visible.card-hover:focus-visible {
  transform: var(--card-hover-lift);
}

@media (prefers-reduced-motion: reduce) {
  .site-reveal,
  .site-reveal-stagger-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}