/* Implement AI Brand v2 — shared design system
   Adopts the brand-spec token names (--iai-*) as the single source of truth.
   Aliases legacy tokens (--royal-violet, --midnight-indigo, etc.) so existing
   pages continue to work during migration.
   Includes legacy-class auto-upgrades so older pages inherit the v2 look.
*/

/* ─── Legacy-class auto-upgrades (cascade everywhere) ────────── */

/* Body bg: ensure white default site-wide (brand spec: cream is for cards/section breaks, NOT body).
   !important needed because per-page inline styles still set --soft-ivory. */
html, body { background-color: #FFFFFF !important; }

/* Hero standardisation: butt up to nav, consistent padding, white bg so the
   grid atmosphere reads. Per-page inline rules used to set 140px top padding
   or cream backgrounds that bled through the frosted nav. */
body .hero,
body .hero-iai {
  padding-top: 56px !important;
  padding-bottom: 64px !important;
  margin-top: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}
@media (max-width: 700px) {
  body .hero,
  body .hero-iai {
    padding-top: 40px !important;
    padding-bottom: 48px !important;
  }
}

/* Legacy .hero-badge → eyebrow pill */
body .hero-badge,
body span.hero-badge,
body .hero .hero-badge,
body div.hero-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: var(--iai-purple-4) !important;
  color: var(--iai-navy) !important;
  padding: 8px 18px !important;
  border-radius: 9999px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 28px !important;
  border: 0 !important;
}
body .hero-badge .dot,
body div.hero-badge .dot {
  width: 8px; height: 8px; border-radius: 9999px;
  background: var(--iai-teal);
  box-shadow: 0 0 0 4px rgba(25, 211, 197, 0.18);
  flex-shrink: 0;
}

/* Legacy .hero typography upgrades */
body .hero h1,
body .hero-iai h1,
body .hero h1 span {
  font-family: var(--font-primary);
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--iai-off-black);
  text-transform: none !important;
}
body .hero h1 span {
  color: var(--iai-purple) !important;
}
body .hero .hero-subtitle,
body .hero p.hero-subtitle {
  font-size: clamp(17px, 1.4vw, 19px) !important;
  color: var(--iai-dark-grey) !important;
  line-height: 1.55 !important;
}
body .hero .hero-subtitle .highlight,
body .hero .hero-subtitle strong.highlight {
  color: var(--iai-off-black) !important;
  background: none !important;
  font-weight: 700 !important;
  padding: 0 !important;
}

/* Legacy .nav-cta → brand pill */
body .nav-cta {
  background: var(--iai-purple) !important;
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  border: 0 !important;
  text-decoration: none !important;
}
body .nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(107, 48, 255, 0.55);
  color: #fff !important;
}

/* Card patterns: any .card / .pain-card / .feature-card / .data-source / .stat-card / .ribbon / .insight-stat */
body .pain-card,
body .feature-card,
body .data-source,
body .insight-stat,
body .step-card,
body .start-card {
  background: #fff;
  border: 1px solid var(--iai-purple-4);
  border-radius: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
body .pain-card:hover,
body .feature-card:hover,
body .data-source:hover,
body .insight-stat:hover,
body .step-card:hover,
body .start-card:hover {
  transform: translateY(-3px);
  border-color: var(--iai-purple-2);
  box-shadow: 0 24px 60px -30px rgba(42, 32, 146, 0.25);
}

/* Legacy .section-label / journey-section .section-label retains brand color */
body .section-label {
  color: var(--iai-purple);
}

/* Smooth out per-page hero padding */
body .hero {
  position: relative;
}

/* Hero grid background (apply to first hero on each page if .hero-grid-bg is added) */
body .hero .hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--iai-purple-3) 1px, transparent 1px),
    linear-gradient(90deg, var(--iai-purple-3) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, black 30%, transparent 80%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
body .hero > * { position: relative; z-index: 1; }

:root {
  /* Brand tokens (canonical names from brand spec v26.5) */
  --iai-purple: #6B30FF;
  --iai-navy: #2A2092;
  --iai-lavender: #D0BFFA;
  --iai-off-black: #1E1E1E;
  --iai-cream: #F8F2ED;
  --iai-orange: #FF6629;
  --iai-yellow: #FFCD18;
  --iai-teal: #19D3C5;
  --iai-pink: #FA3387;
  --iai-blue-1: #371EE4;
  --iai-blue-2: #4F4AFF;
  --iai-blue-3: #8A9BFF;
  --iai-purple-1: #9680FF;
  --iai-purple-2: #B6A6FF;
  --iai-purple-3: #D6D2FF;
  --iai-purple-4: #EDE9F6;
  --iai-dark-grey: #474747;
  --iai-mid-grey: #717171;
  --iai-gray-4: #E5E7EB;

  /* Legacy aliases (do not use in new code) */
  --royal-violet: var(--iai-purple);
  --midnight-indigo: var(--iai-navy);
  --deep-charcoal: var(--iai-off-black);
  --soft-ivory: var(--iai-cream);
  --lavender-mist: var(--iai-lavender);
  --solar-orange: var(--iai-orange);
  --solar-yellow: var(--iai-yellow);
  --golden-yellow: var(--iai-yellow);
  --aqua-teal: var(--iai-teal);
  --aqua-green: var(--iai-teal);
  --red: var(--iai-pink);
  --blue-shade-1: var(--iai-blue-1);
  --blue-shade-2: var(--iai-blue-2);
  --blue-shade-3: var(--iai-blue-3);
  --purple-shade-1: var(--iai-purple-1);
  --purple-shade-2: var(--iai-purple-2);
  --purple-shade-3: var(--iai-purple-3);
  --purple-shade-4: var(--iai-purple-4);
  --gray-1: var(--iai-off-black);
  --gray-2: var(--iai-mid-grey);
  --gray-3: var(--iai-gray-4);
  --gray-4: var(--iai-gray-4);

  /* Type system */
  --font-primary: 'Gotham', 'Montserrat', 'Futura', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─── Frosted-glass sticky nav ─────────────────────────────── */
nav.nav,
header.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--iai-purple-4);
}

/* ─── Section variants ─────────────────────────────────────── */
.section-cream { background: var(--iai-purple-4); }
.section-navy { background: var(--iai-navy); color: #fff; }
.section-navy h1, .section-navy h2, .section-navy h3 { color: #fff; }
.section-navy .lead { color: var(--iai-lavender); }

/* ─── Section label (uppercase tracker eyebrow) ────────────── */
.section-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--iai-purple);
  margin-bottom: 18px;
}
.section-navy .section-label { color: var(--iai-lavender); }

/* ─── Eyebrow pill with status dot ─────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--iai-purple-4);
  color: var(--iai-navy);
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 28px;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 9999px;
  background: var(--iai-teal);
  box-shadow: 0 0 0 4px rgba(25, 211, 197, 0.18);
}
.section-navy .eyebrow {
  background: rgba(255, 255, 255, 0.06);
  color: var(--iai-lavender);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ─── Hero atmosphere: masked grid background ──────────────── */
.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--iai-purple-3) 1px, transparent 1px),
    linear-gradient(90deg, var(--iai-purple-3) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, black 30%, transparent 80%);
  opacity: 0.55;
  pointer-events: none;
}

/* ─── Buttons ──────────────────────────────────────────────── */
/* Legacy .btn-primary / .btn-secondary auto-upgrade to brand-v2 styling */
a.btn-primary,
button.btn-primary,
.btn-brand-primary,
.btn-iai-primary {
  background: var(--iai-purple);
  color: #fff;
  padding: 16px 30px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-primary);
}
a.btn-primary:hover,
button.btn-primary:hover,
.btn-brand-primary:hover,
.btn-iai-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -10px rgba(107, 48, 255, 0.55);
  color: #fff;
}

a.btn-secondary,
button.btn-secondary,
.btn-brand-secondary,
.btn-iai-secondary {
  background: #fff;
  color: var(--iai-navy);
  padding: 16px 30px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--iai-purple-3);
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-primary);
}
a.btn-secondary:hover,
button.btn-secondary:hover,
.btn-brand-secondary:hover,
.btn-iai-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--iai-purple);
  color: var(--iai-purple);
}

.btn-on-purple {
  background: #fff;
  color: var(--iai-purple);
  padding: 18px 36px;
  border-radius: 9999px;
  font-weight: 800;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}
.btn-on-purple:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.3);
  color: var(--iai-purple);
}

.btn-brand-primary [data-lucide],
.btn-brand-secondary [data-lucide],
.btn-on-purple [data-lucide],
.btn-iai-primary [data-lucide],
.btn-iai-secondary [data-lucide] {
  width: 18px;
  height: 18px;
}

/* ─── Card recipe ──────────────────────────────────────────── */
.card-iai {
  background: #fff;
  border: 1px solid var(--iai-purple-4);
  border-radius: 20px;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card-iai:hover {
  transform: translateY(-3px);
  border-color: var(--iai-purple-2);
  box-shadow: 0 24px 60px -30px rgba(42, 32, 146, 0.25);
}
.card-iai .layer-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--iai-purple);
  margin-bottom: 12px;
}

/* ─── Badge pill (small status badge with icon) ────────────── */
.badge-pill {
  background: var(--iai-purple-4);
  color: var(--iai-navy);
  padding: 10px 20px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.badge-pill [data-lucide] { width: 14px; height: 14px; color: var(--iai-purple); }

/* ─── Big numerals for process steps ───────────────────────── */
.step-num {
  font-family: var(--font-primary);
  font-size: 44px;
  font-weight: 900;
  color: var(--iai-purple-2);
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -0.04em;
}

/* ─── Trust strip — single line, greyscale, hover restore ──── */
/* Higher specificity (body + class) wins over per-page rules. */
body .trust-logos,
body .client-logos,
body .trust-bar .client-logos {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 48px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 24px;
}
body .trust-logos::-webkit-scrollbar,
body .client-logos::-webkit-scrollbar { display: none; }
body .trust-logos img,
body .client-logos img,
.client-logo img {
  height: clamp(20px, 2.4vw, 36px);
  width: auto;
  flex-shrink: 0;
  opacity: 0.65;
  filter: grayscale(1);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
body .trust-logos img:hover,
body .client-logos img:hover,
.client-logo img:hover { opacity: 1; filter: none; }

/* ─── Final CTA section (flat brand purple with grid overlay) ─ */
.finalcta {
  background: var(--iai-purple);
  color: #fff;
  padding: 96px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.finalcta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  pointer-events: none;
}
.finalcta-inner { position: relative; }
.finalcta h2 { color: #fff; margin: 0 auto 18px; }
.finalcta p {
  color: var(--iai-lavender);
  font-size: 17px;
  max-width: 680px;
  margin: 0 auto 32px;
}
.finalcta-foot {
  margin-top: 40px;
  color: var(--iai-lavender);
  font-size: 14px;
}

/* ─── Leadership cards ─────────────────────────────────────── */
.leaders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 760px;
  margin: 56px auto 0;
}
@media (max-width: 700px) { .leaders { grid-template-columns: 1fr; } }
.leader-card {
  background: #fff;
  border: 1px solid var(--iai-purple-4);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.leader-photo {
  width: 72px; height: 72px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--iai-purple-4);
}
.leader-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--iai-navy);
  margin-bottom: 4px;
}
.leader-role {
  font-size: 13px;
  color: var(--iai-dark-grey);
  line-height: 1.4;
}
.section-navy .leader-name { color: #fff; }
.section-navy .leader-role { color: var(--iai-lavender); }
.finalcta .leader-card { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }
.finalcta .leader-name { color: #fff; }
.finalcta .leader-role { color: var(--iai-lavender); }

/* ─── Common-list (purple-shade-4 mini cards) ──────────────── */
.common-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 18px 0 28px;
  padding: 0;
}
.common-list li {
  background: var(--iai-purple-4);
  border-radius: 20px;
  padding: 16px 20px;
  font-size: 15px;
  color: var(--iai-off-black);
  line-height: 1.5;
}
.common-list li strong {
  color: var(--iai-navy);
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
}
.common-list li a { color: var(--iai-purple); font-weight: 600; }
.common-list li a:hover { text-decoration: underline; }

/* ─── Inline text link with arrow ──────────────────────────── */
.text-link {
  color: var(--iai-purple);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.text-link:hover { text-decoration: underline; }
.text-link [data-lucide] { width: 16px; height: 16px; }

/* ─── Brand-correct footer (deep navy, white logo, lavender text) ─ */
footer.footer,
footer.site-foot {
  background: var(--iai-navy);
  color: #fff;
  padding: 64px 24px 32px;
  font-family: var(--font-primary);
}
footer.footer .footer-container,
footer.site-foot .footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
footer.footer .footer-brand img,
footer.site-foot .footer-brand img {
  height: 32px;
  width: auto;
  margin-bottom: 16px;
  display: block;
}
footer.footer .footer-brand p,
footer.site-foot .footer-brand p {
  color: var(--iai-lavender);
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
  margin: 0;
}
footer.footer .footer-col h3,
footer.site-foot .footer-col h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  margin: 0 0 16px;
}
footer.footer .footer-col a,
footer.site-foot .footer-col a {
  display: block;
  color: var(--iai-lavender);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.2s ease;
}
footer.footer .footer-col a:hover,
footer.site-foot .footer-col a:hover {
  color: #fff;
}
footer.footer .footer-bottom,
footer.site-foot .footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--iai-lavender);
  font-size: 13px;
}
footer.footer .footer-bottom a,
footer.site-foot .footer-bottom a {
  color: var(--iai-lavender);
  text-decoration: none;
  margin-left: 24px;
  transition: color 0.2s ease;
}
footer.footer .footer-bottom a:hover,
footer.site-foot .footer-bottom a:hover {
  color: #fff;
}
/* Legacy single-line footer fallback (when only logo + copyright present) */
footer.footer .footer-logo,
footer.site-foot .footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
footer.footer .footer-logo img,
footer.site-foot .footer-logo img {
  height: 32px;
  width: auto;
}
footer.footer > p,
footer.site-foot > p {
  color: var(--iai-lavender);
  font-size: 14px;
  margin: 0;
}
@media (max-width: 900px) {
  footer.footer .footer-container,
  footer.site-foot .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}
@media (max-width: 600px) {
  footer.footer .footer-container,
  footer.site-foot .footer-container {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  footer.footer .footer-bottom,
  footer.site-foot .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  footer.footer .footer-bottom a:first-child,
  footer.site-foot .footer-bottom a:first-child { margin-left: 0; }
}

/* ─── Fluid typography helpers (opt-in via .h-fluid) ───────── */
.h1-fluid {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.h2-fluid {
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.h3-fluid {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
.lead-fluid {
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--iai-dark-grey);
  max-width: 760px;
  line-height: 1.55;
}

/* ─── Container helpers ────────────────────────────────────── */
.container-iai {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.container-iai-narrow {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}