/* ==========================================================================
   Wiztra Chat — Core stylesheet
   Design system + shared shell (navbar, footer, buttons, layout primitives)

   Converted from the React/Tailwind source. Colour source of truth is oklch,
   mirroring tailwind.config.ts. Nothing in this file is generated at runtime;
   no styling is applied from JavaScript.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Typography */
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-label: 'Inter', system-ui, -apple-system, sans-serif;

  /* ---- Primary ramp — Gold (hue 85) ----
     Declared as bare oklch *components* (L C H) rather than finished colours,
     so a rule can apply its own alpha with oklch(var(--primary-500c) / 0.12)
     and a theme can retint the whole site by overriding these eleven lines.
     css/theme-brand.css does exactly that. */
  --primary-50c:  0.98 0.02 85;
  --primary-100c: 0.96 0.05 85;
  --primary-200c: 0.93 0.10 85;
  --primary-300c: 0.88 0.15 85;
  --primary-400c: 0.82 0.18 85;
  --primary-500c: 0.75 0.17 85;
  --primary-600c: 0.68 0.15 85;
  --primary-700c: 0.60 0.13 85;
  --primary-800c: 0.50 0.09 85;
  --primary-900c: 0.40 0.05 85;
  --primary-950c: 0.30 0.03 85;

  /* Gradient endpoints. Flat in the gold theme; the brand theme makes these a
     true two-stop gradient. */
  --grad-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  --grad-primary-soft: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%);

  --primary-50:  oklch(var(--primary-50c));
  --primary-100: oklch(var(--primary-100c));
  --primary-200: oklch(var(--primary-200c));
  --primary-300: oklch(var(--primary-300c));
  --primary-400: oklch(var(--primary-400c));
  --primary-500: oklch(var(--primary-500c));
  --primary-600: oklch(var(--primary-600c));
  --primary-700: oklch(var(--primary-700c));
  --primary-800: oklch(var(--primary-800c));
  --primary-900: oklch(var(--primary-900c));
  --primary-950: oklch(var(--primary-950c));

  /* Accent — Amber (hue 55) */
  --accent-50:  oklch(0.97 0.02 55);
  --accent-100: oklch(0.93 0.05 55);
  --accent-200: oklch(0.87 0.09 55);
  --accent-300: oklch(0.78 0.14 55);
  --accent-400: oklch(0.66 0.19 55);
  --accent-500: oklch(0.58 0.20 55);
  --accent-600: oklch(0.50 0.18 55);
  --accent-700: oklch(0.42 0.15 55);
  --accent-800: oklch(0.34 0.11 55);
  --accent-900: oklch(0.26 0.07 55);
  --accent-950: oklch(0.18 0.04 55);

  /* Secondary (hue 80) */
  --secondary-50c: 0.98 0.003 80;
  --secondary-100c: 0.94 0.008 80;
  --secondary-200c: 0.89 0.02 80;
  --secondary-300c: 0.8 0.03 80;
  --secondary-400c: 0.68 0.05 80;
  --secondary-500c: 0.58 0.08 80;
  --secondary-600c: 0.49 0.07 80;
  --secondary-700c: 0.4 0.06 80;
  --secondary-800c: 0.32 0.04 80;
  --secondary-900c: 0.24 0.03 80;
  --secondary-950c: 0.16 0.02 80;

  --secondary-50: oklch(var(--secondary-50c));
  --secondary-100: oklch(var(--secondary-100c));
  --secondary-200: oklch(var(--secondary-200c));
  --secondary-300: oklch(var(--secondary-300c));
  --secondary-400: oklch(var(--secondary-400c));
  --secondary-500: oklch(var(--secondary-500c));
  --secondary-600: oklch(var(--secondary-600c));
  --secondary-700: oklch(var(--secondary-700c));
  --secondary-800: oklch(var(--secondary-800c));
  --secondary-900: oklch(var(--secondary-900c));
  --secondary-950: oklch(var(--secondary-950c));

  /* Background — warm off-white (hue 80) */
  --background-50c: 0.985 0.002 80;
  --background-100c: 0.96 0.004 80;
  --background-200c: 0.92 0.006 80;
  --background-300c: 0.87 0.008 80;
  --background-400c: 0.78 0.01 80;
  --background-500c: 0.68 0.012 80;
  --background-600c: 0.58 0.01 80;
  --background-700c: 0.48 0.008 80;
  --background-800c: 0.38 0.006 80;
  --background-900c: 0.28 0.005 80;
  --background-950c: 0.18 0.003 80;

  --background-50: oklch(var(--background-50c));
  --background-100: oklch(var(--background-100c));
  --background-200: oklch(var(--background-200c));
  --background-300: oklch(var(--background-300c));
  --background-400: oklch(var(--background-400c));
  --background-500: oklch(var(--background-500c));
  --background-600: oklch(var(--background-600c));
  --background-700: oklch(var(--background-700c));
  --background-800: oklch(var(--background-800c));
  --background-900: oklch(var(--background-900c));
  --background-950: oklch(var(--background-950c));

  /* Foreground / text (hue 80) */
  --foreground-50c: 0.98 0.002 80;
  --foreground-100c: 0.93 0.005 80;
  --foreground-200c: 0.86 0.01 80;
  --foreground-300c: 0.75 0.015 80;
  --foreground-400c: 0.62 0.02 80;
  --foreground-500c: 0.5 0.025 80;
  --foreground-600c: 0.4 0.02 80;
  --foreground-700c: 0.3 0.015 80;
  --foreground-800c: 0.22 0.01 80;
  --foreground-900c: 0.16 0.008 80;
  --foreground-950c: 0.1 0.005 80;

  --foreground-50: oklch(var(--foreground-50c));
  --foreground-100: oklch(var(--foreground-100c));
  --foreground-200: oklch(var(--foreground-200c));
  --foreground-300: oklch(var(--foreground-300c));
  --foreground-400: oklch(var(--foreground-400c));
  --foreground-500: oklch(var(--foreground-500c));
  --foreground-600: oklch(var(--foreground-600c));
  --foreground-700: oklch(var(--foreground-700c));
  --foreground-800: oklch(var(--foreground-800c));
  --foreground-900: oklch(var(--foreground-900c));
  --foreground-950: oklch(var(--foreground-950c));

  /* Semantic accent hues used by agent/solution cards */
  --amber-50:   #fffbeb;
  --amber-600:  #d97706;
  --rose-50:    #fff1f2;
  --rose-600:   #e11d48;
  --emerald-50: #ecfdf5;
  --emerald-500:#10b981;
  --emerald-600:#059669;
  --sky-50:     #f0f9ff;
  --sky-600:    #0284c7;
  --violet-50:  #f5f3ff;
  --violet-600: #7c3aed;
  --orange-50:  #fff7ed;
  --orange-600: #ea580c;

  /* Footer palette */
  --footer-top:    #0F1729;
  --footer-bottom: #0A0F1A;

  /* Layout */
  --shell-max: 1400px;
  --footer-max: 1320px;
  --nav-height: 72px;

  /* Elevation */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.05);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.15);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */

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

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--background-50);
  color: var(--foreground-800);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--foreground-950);
}

a { color: inherit; text-decoration: none; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input, textarea, select { font: inherit; color: inherit; }

ul, ol { list-style: none; }

:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(190 150 60 / 0.3);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: rgb(190 150 60 / 0.5); }

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Accessibility helpers */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Spam honeypot — must stay visually hidden but focusable-free */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: 24px;
}

@media (min-width: 768px)  { .shell { padding-inline: 40px; } }
@media (min-width: 1024px) { .shell { padding-inline: 64px; } }

/* Narrower content containers used by the inner pages. Promoted here from
   css/features.css so every page can rely on them. */
.container-1200 {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 768px)  { .container-1200 { padding-inline: 40px; } }
@media (min-width: 1024px) { .container-1200 { padding-inline: 64px; } }

.container-1000 {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 768px)  { .container-1000 { padding-inline: 40px; } }

.container-800 {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 768px)  { .container-800 { padding-inline: 40px; } }

.section { position: relative; }

.section-band {
  padding-block: 80px;
}
@media (min-width: 768px)  { .section-band { padding-block: 96px; } }
@media (min-width: 1024px) { .section-band { padding-block: 112px; } }

.section-head {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 56px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary-600);
  margin-bottom: 14px;
}

.section-title {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--foreground-950);
}
@media (min-width: 768px)  { .section-title { font-size: 44px; } }
@media (min-width: 1024px) { .section-title { font-size: 52px; } }

.section-sub {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--foreground-600);
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  white-space: nowrap;
  border-radius: 12px;
  transition: background-color .2s ease, border-color .2s ease,
              color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn-primary {
  padding: 10px 20px;
  font-size: 13px;
  background: var(--primary-500);
  color: #fff;
  box-shadow: 0 1px 3px oklch(var(--primary-500c) / 0.2);
}
.btn-primary:hover { background: var(--primary-600); }

.btn-outline {
  padding: 10px 20px;
  font-size: 13px;
  background: #fff;
  color: var(--foreground-800);
  border: 2px solid var(--foreground-300);
}
.btn-outline:hover {
  border-color: var(--primary-400);
  color: var(--primary-600);
}

.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-block { width: 100%; }

/* Gentle attention pulse on primary CTAs (was a JS-driven class in React) */
@keyframes btnPulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 1px 3px oklch(var(--primary-500c) / 0.2); }
  50%      { transform: translateY(-1px); box-shadow: 0 6px 16px oklch(var(--primary-500c) / 0.28); }
}
.btn-pulse { animation: btnPulse 3.2s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   4b. FORM STATUS + SHARED PILLS
   Promoted from css/home.css: needed by contact, pricing and ROI pages.
   js/forms.js sets textContent and a data-state attribute only.
   -------------------------------------------------------------------------- */

.form-status {
  font-size: 13px;
  margin-top: 8px;
  min-height: 1em;
  color: var(--foreground-500);
}
.form-status[data-state='error'] { color: var(--accent-600); }
.form-status[data-state='ok']    { color: var(--emerald-600); }

/* No align-self here on purpose. It used to be flex-start, which overrode the
   `align-items: center` of any centred section head and left the eyebrow pill
   stranded on the left while the heading and sub sat centred. Alignment is the
   container's business; the one place that needs the pill pinned left is the
   agents panel, and that is set there. */
.pill-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  margin-bottom: 20px;
}
.pill-light i { font-size: 12px; color: var(--primary-500); }
.pill-light span {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary-700);
}

.pill-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.2);
  background: rgb(255 255 255 / 0.1);
  margin-bottom: 8px;
}
.pill-dark i { font-size: 12px; color: rgb(255 255 255 / 0.8); }
.pill-dark span {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #fff;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-600);
  transition: color .2s ease, gap .2s ease;
}
.link-arrow:hover { color: var(--primary-700); gap: 12px; }

/* --------------------------------------------------------------------------
   5. ANIMATION UTILITIES
   -------------------------------------------------------------------------- */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideFromRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes floatDelayed1 {
  0%, 100% { transform: translateY(0) translateX(0); }
  33%      { transform: translateY(-10px) translateX(4px); }
  66%      { transform: translateY(-4px) translateX(-2px); }
}
@keyframes floatDelayed2 {
  0%, 100% { transform: translateY(0) translateX(0); }
  33%      { transform: translateY(-8px) translateX(-3px); }
  66%      { transform: translateY(-2px) translateX(5px); }
}
@keyframes floatDelayed3 {
  0%, 100% { transform: translateY(0) translateX(0); }
  33%      { transform: translateY(-12px) translateX(-4px); }
  66%      { transform: translateY(-6px) translateX(3px); }
}
@keyframes floatDelayed4 {
  0%, 100% { transform: translateY(0) translateX(0); }
  33%      { transform: translateY(-7px) translateX(5px); }
  66%      { transform: translateY(-3px) translateX(-4px); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

.animate-float-1 { animation: floatDelayed1 7s   ease-in-out infinite; }
.animate-float-2 { animation: floatDelayed2 6.5s ease-in-out infinite; }
.animate-float-3 { animation: floatDelayed3 7.5s ease-in-out infinite; }
.animate-float-4 { animation: floatDelayed4 6s   ease-in-out infinite; }

.animate-fade-in {
  animation: fadeIn .6s ease-out both;
}

/* Staggered entrance delays — replaces inline style={{animationDelay}} */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }

/* Scroll-reveal. JS only toggles .is-visible; all styling lives here. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.glow-gold {
  background: radial-gradient(ellipse at center, oklch(var(--primary-500c) / 0.15) 0%, transparent 70%);
}
.glow-gold-soft {
  background: radial-gradient(ellipse at center, oklch(var(--primary-500c) / 0.08) 0%, transparent 60%);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   6. NAVBAR
   -------------------------------------------------------------------------- */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid oklch(var(--background-200c) / 0.5);
  transition: background-color .3s ease, box-shadow .3s ease;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}

/* Brand */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Logo lockup. Intrinsic width/height are on the <img> to reserve space and
   avoid layout shift; the displayed size is set here. */
.nav-logo {
  height: 34px;
  width: auto;
  transition: opacity .2s ease;
}
.nav-brand:hover .nav-logo { opacity: .85; }
@media (max-width: 400px) { .nav-logo { height: 28px; } }
.nav-brand-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-50);
  color: var(--primary-500);
  font-size: 14px;
  transition: background-color .2s ease;
}
.nav-brand:hover .nav-brand-mark { background: var(--primary-100); }
.nav-brand-text {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--foreground-900);
}

/* Desktop links */
.nav-links {
  display: none;
  align-items: center;
  gap: 4px;
}
@media (min-width: 1024px) { .nav-links { display: flex; } }

.nav-link,
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--foreground-700);
  transition: background-color .2s ease, color .2s ease;
}
.nav-link:hover,
.nav-trigger:hover {
  color: var(--foreground-900);
  background: oklch(var(--background-100c) / 0.6);
}

.nav-trigger i {
  font-size: 15px;
  transition: transform .2s ease;
}

.nav-item { position: relative; }

/* Open state is driven by a single data attribute set in JS.
   All appearance rules stay here in CSS. */
.nav-item[data-open='true'] > .nav-trigger {
  color: var(--primary-600);
  background: oklch(var(--primary-50c) / 0.7);
}
.nav-item[data-open='true'] > .nav-trigger i { transform: rotate(180deg); }

.nav-actions {
  display: none;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
@media (min-width: 1024px) { .nav-actions { display: flex; } }

.nav-burger {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--foreground-700);
  transition: background-color .2s ease;
}
.nav-burger:hover { background: var(--background-100); }
@media (min-width: 1024px) { .nav-burger { display: none; } }

/* Scroll progress bar */
.nav-progress {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 2px;
  background: oklch(var(--background-200c) / 0.6);
}
.nav-progress[hidden] { display: none; }
.nav-progress-bar {
  height: 100%;
  /* JS publishes --progress as a value only; the rule that consumes it
     stays here. */
  width: var(--progress, 0%);
  background: oklch(var(--primary-400c) / 0.6);
  transition: width .15s ease-out;
}

/* Scroll lock while the mobile sheet is open */
.no-scroll { overflow: hidden; }

/* ---- Solutions mega menu ---- */
.mega-panel {
  position: fixed;
  top: var(--nav-height);
  left: 0; right: 0;
  z-index: 40;
}
.mega-panel[hidden] { display: none; }

.mega-panel-spacer { height: 16px; }

.mega-panel-body {
  background: var(--background-50);
  border-bottom: 1px solid oklch(var(--background-200c) / 0.4);
  box-shadow: var(--shadow-2xl);
  animation: fadeSlide .18s ease-out;
}

.mega-inner { padding-block: 40px; }

.mega-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) { .mega-grid { grid-template-columns: repeat(2, 1fr); } }

.mega-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  transition: background-color .2s ease;
}
.mega-card:hover { background: oklch(var(--background-100c) / 0.8); }

.mega-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  transition: transform .2s ease;
}
.mega-card:hover .mega-card-icon { transform: scale(1.1); }

.mega-card-copy { min-width: 0; }

.mega-card-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground-900);
  margin-bottom: 4px;
  transition: color .2s ease;
}
.mega-card:hover .mega-card-title { color: var(--primary-600); }

.mega-card-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--foreground-500);
}

.mega-foot {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid oklch(var(--background-200c) / 0.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.mega-foot p { font-size: 13px; color: var(--foreground-500); }

/* ---- Resources dropdown ---- */
.drop-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 40;
}
.drop-panel[hidden] { display: none; }

.drop-panel-spacer { height: 12px; }

.drop-panel-body {
  width: 300px;
  border-radius: 16px;
  border: 1px solid oklch(var(--background-200c) / 0.6);
  background: var(--background-50);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  padding: 8px;
  animation: fadeSlide .18s ease-out;
}

.drop-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  transition: background-color .2s ease;
}
.drop-item:hover { background: oklch(var(--background-100c) / 0.7); }

.drop-item-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--secondary-50);
  color: var(--secondary-600);
  font-size: 14px;
}
.drop-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground-800);
}
.drop-item-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--foreground-500);
  margin-top: 2px;
}

/* ---- Mobile slideover ---- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.mobile-menu[hidden] { display: none; }
@media (min-width: 1024px) { .mobile-menu { display: none; } }

.mobile-scrim {
  position: absolute;
  inset: 0;
  background: oklch(var(--foreground-950c) / 0.4);
  backdrop-filter: blur(4px);
}

.mobile-sheet {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 400px;
  background: var(--background-50);
  box-shadow: var(--shadow-2xl);
  display: flex;
  flex-direction: column;
  animation: slideFromRight .3s ease-out;
}

.mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 20px;
  height: var(--nav-height);
  border-bottom: 1px solid oklch(var(--background-200c) / 0.5);
  flex-shrink: 0;
}

.mobile-close {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--foreground-600);
  transition: background-color .2s ease;
}
.mobile-close:hover { background: var(--background-100); }

.mobile-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
}

.mobile-link {
  display: flex;
  align-items: center;
  padding-block: 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--foreground-800);
  transition: color .2s ease;
}
.mobile-link:hover { color: var(--primary-600); }

.mobile-acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: 14px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--foreground-800);
}
.mobile-acc-trigger i {
  font-size: 20px;
  color: var(--foreground-400);
  transition: transform .2s ease;
}
.mobile-acc[data-open='true'] .mobile-acc-trigger i { transform: rotate(180deg); }

.mobile-acc-panel {
  padding-left: 4px;
  padding-bottom: 8px;
  animation: fadeSlide .2s ease-out;
}
.mobile-acc-panel[hidden] { display: none; }

.mobile-sub {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  transition: background-color .2s ease;
}
.mobile-sub:hover { background: var(--background-100); }

.mobile-sub-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.mobile-sub-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground-800);
}
.mobile-sub-desc {
  font-size: 12px;
  color: var(--foreground-500);
  margin-top: 2px;
}

.mobile-foot {
  padding: 20px;
  border-top: 1px solid oklch(var(--background-200c) / 0.5);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

/* Icon colour themes shared by nav cards, agent cards and solution grids */
.theme-amber   { background: var(--amber-50);   color: var(--amber-600); }
.theme-rose    { background: var(--rose-50);    color: var(--rose-600); }
.theme-emerald { background: var(--emerald-50); color: var(--emerald-600); }
.theme-sky     { background: var(--sky-50);     color: var(--sky-600); }
.theme-violet  { background: var(--violet-50);  color: var(--violet-600); }
.theme-orange  { background: var(--orange-50);  color: var(--orange-600); }

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--footer-top) 0%, var(--footer-bottom) 100%);
  border-top: 1px solid rgb(255 255 255 / 0.04);
}

.footer-inner {
  max-width: var(--footer-max);
  margin-inline: auto;
  padding: 64px 24px;
}
@media (min-width: 768px)  { .footer-inner { padding-inline: 40px; } }
@media (min-width: 1024px) { .footer-inner { padding: 80px 64px; } }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) { .footer-grid { gap: 64px; } }

.footer-brand-col { grid-column: span 2; }
@media (min-width: 768px) { .footer-brand-col { grid-column: span 1; } }

.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

/* Wordmark recoloured white for the dark footer; the mark keeps brand orange. */
.footer-logo-img {
  height: 36px;
  width: auto;
}
.footer-logo-mark {
  width: 36px; height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(var(--primary-500c) / 0.2);
  color: oklch(0.7 0.15 290);
  font-size: 18px;
}
.footer-logo-text {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.footer-blurb {
  font-size: 12.5px;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.65);
  margin-bottom: 20px;
  max-width: 280px;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-social {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: rgb(255 255 255 / 0.04);
  border: 1px solid rgb(255 255 255 / 0.05);
  color: rgb(255 255 255 / 0.4);
  transition: background-color .2s ease, border-color .2s ease,
              color .2s ease, transform .2s ease;
}
/* Hover styling was applied from React state; it belongs here. */
.footer-social:hover {
  background: rgb(229 166 35 / 0.15);
  border-color: rgb(229 166 35 / 0.3);
  color: var(--primary-500);
  transform: scale(1.08);
}

.footer-col-title {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgb(255 255 255 / 0.55);
  margin-bottom: 16px;
}

.footer-links { display: flex; flex-direction: column; gap: 10px; }

.footer-link {
  font-size: 12.5px;
  color: rgb(255 255 255 / 0.65);
  transition: color .2s ease;
}
.footer-link:hover { color: var(--primary-500); }

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 32px;
  margin-top: 56px;
  border-top: 1px solid rgb(255 255 255 / 0.04);
}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; } }

.footer-bottom p {
  font-size: 11px;
  color: rgb(255 255 255 / 0.55);
}

/* --------------------------------------------------------------------------
   SHARED PAGE COMPONENTS
   Promoted out of css/features.css: the FAQ accordion and the gold CTA banner
   are reused by pricing, resources, contact and the four solution pages.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   8. FAQ (shared) (native <details>/<summary>, no JS required)
   -------------------------------------------------------------------------- */

.faq { padding-block: 80px; background: oklch(var(--background-100c) / 0.6); }
@media (min-width: 1024px) { .faq { padding-block: 112px; } }

.faq-head { text-align: center; margin-bottom: 48px; }
.faq-title { font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 16px; color: var(--foreground-950); }
@media (min-width: 768px) { .faq-title { font-size: 44px; } }
.faq-sub { font-size: 15px; color: var(--foreground-600); }
.faq-sub a { color: var(--primary-600); transition: color .2s ease; }
.faq-sub a:hover { color: var(--primary-700); }

.faq-item { padding-block: 20px; border-bottom: 1px solid oklch(var(--background-200c) / 0.7); }
.faq-item:first-of-type { border-top: 1px solid oklch(var(--background-200c) / 0.7); }

.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q-text { font-size: 16px; font-weight: 600; color: var(--foreground-900); }
.faq-q i { flex-shrink: 0; font-size: 20px; color: var(--foreground-400); transition: transform .2s ease; }
.faq-item[open] .faq-q i { transform: rotate(180deg); }

.faq-a { padding-top: 12px; padding-right: 40px; }
.faq-a p { font-size: 14px; line-height: 1.65; color: var(--foreground-600); }

/* --------------------------------------------------------------------------
   9. CTA BANNER (shared)
   -------------------------------------------------------------------------- */

.cta { padding-block: 80px; }
@media (min-width: 1024px) { .cta { padding-block: 112px; } }

.cta-card {
  border-radius: 24px;
  padding: 40px 24px;
  text-align: center;
  background: linear-gradient(145deg, var(--primary-500) 0%, var(--primary-600) 100%);
}
@media (min-width: 768px)  { .cta-card { padding: 64px 48px; } }
@media (min-width: 1024px) { .cta-card { padding: 80px; } }

.cta-title { font-size: 32px; line-height: 1.08; max-width: 720px; margin-inline: auto; margin-bottom: 16px; color: #fff; }
@media (min-width: 768px) { .cta-title { font-size: 44px; } }

.cta-sub { font-size: 16px; max-width: 520px; margin-inline: auto; margin-bottom: 32px; color: rgb(255 255 255 / 0.8); }
@media (min-width: 768px) { .cta-sub { font-size: 18px; } }

.cta-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
@media (min-width: 640px) { .cta-actions { flex-direction: row; } }

.cta-btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  color: var(--primary-600);
  background: #fff;
  transition: background-color .2s ease;
}
.cta-btn-light:hover { background: var(--background-50); }

.cta-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  color: #fff;
  border: 2px solid rgb(255 255 255 / 0.4);
  transition: border-color .2s ease;
}
.cta-btn-outline:hover { border-color: #fff; }