/* ==============================================================================
   Beehive Strategy — CSS Framework
   B2B Enterprise AI / Consulting — MCP-Powered Conversational BI Platform

   Design Direction: Refined dark luxury with sharp teal/emerald accents.
   Stripe meets Anthropic — clean geometry, generous spacing, subtle depth
   through layered transparency, and intentional micro-animations.

   Contents:
     1.  CSS Custom Properties (Design Tokens)
     2.  Reset & Base
     3.  Typography
     4.  Layout
     5.  Header
     6.  Mobile Menu
     7.  Scroll Progress
     8.  Hero Section
     9.  Social Proof Bar
    10.  Section Headers
    11.  Flow Diagram / How It Works
    12.  Case Showcase / Work Grid
    13.  Testimonial Card
    14.  Comparison Section
    15.  Industry Cards Grid
    16.  CTA Section
    17.  FAQ Section
    18.  Footer
    19.  Back to Top Button
    20.  Buttons System
    21.  Cards System
    22.  Badges / Tags
    23.  Responsive Breakpoints
    24.  Animations & Keyframes
    25.  Background Effects
    26.  Utility Classes
   ============================================================================== */


/* ==============================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================================== */

:root {
  /* --- Color Palette --- */

  /* Base / Background */
  --color-bg-base: #07080a;
  --color-bg-alt: #0d0f11;
  --color-bg-card: rgba(255, 255, 255, 0.03);
  --color-bg-card-hover: rgba(255, 255, 255, 0.06);
  --color-border: rgba(255, 255, 255, 0.07);
  --color-border-hover: rgba(255, 255, 255, 0.12);

  /* Primary — Teal / Emerald */
  --color-primary: #00e5a0;
  --color-primary-dark: #00c488;
  --color-primary-light: #33ffbe;
  --color-primary-rgb: 0, 229, 160;
  --color-primary-glow: rgba(0, 229, 160, 0.25);
  --color-primary-subtle: rgba(0, 229, 160, 0.08);

  /* Accent — Warm Gold */
  --color-accent: #f5c842;
  --color-accent-dark: #d4a843;
  --color-accent-rgb: 245, 200, 66;
  --color-accent-glow: rgba(245, 200, 66, 0.2);
  --color-accent-subtle: rgba(245, 200, 66, 0.08);

  /* Danger / Error (for comparison bars) */
  --color-danger: #ff5a5a;
  --color-danger-subtle: rgba(255, 90, 90, 0.12);

  /* Text */
  --color-text-primary: #edf0ef;
  --color-text-secondary: rgba(237, 240, 239, 0.6);
  --color-text-muted: rgba(237, 240, 239, 0.35);
  --color-text-inverse: #07080a;

  /* --- Fonts --- */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;

  /* --- Spacing Scale --- */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 5rem;      /* 80px */
  --space-5xl: 6rem;      /* 96px */
  --space-6xl: 7rem;      /* 112px */
  --space-7xl: 8rem;      /* 128px */

  /* --- Border Radius --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;

  /* --- Easing --- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow-primary: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
  --shadow-glow-primary-lg: 0 0 40px rgba(var(--color-primary-rgb), 0.4);
  --shadow-glow-accent: 0 0 20px rgba(var(--color-accent-rgb), 0.25);
  --shadow-elevation: 0 4px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);

  /* --- Layout --- */
  --max-width-content: 1200px;
  --max-width-header: 1400px;

  /* --- Header --- */
  --header-height: 80px;
  --header-height-scrolled: 64px;
  --header-bg: rgba(7, 8, 10, 0.7);
  --header-bg-scrolled: rgba(7, 8, 10, 0.92);

  /* --- Z-Index Scale --- */
  --z-base: 1;
  --z-above: 10;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-mobile-menu: 900;
  --z-header: 1000;
  --z-scroll-progress: 1001;
  --z-back-to-top: 800;
}


/* ==============================================================================
   2. RESET & BASE
   ============================================================================== */

/*
 * Modern CSS reset based on Andy Bell's modern-reset
 * and Josh Comeau's custom CSS reset.
 */

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

/* Remove default list styles on ul, ol */
ul,
ol {
  list-style: none;
}

/* Core HTML reset */
html {
  scroll-behavior: smooth; /* Defer to Lenis JS — this acts as fallback */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  hanging-punctuation: first last;
  tab-size: 2;
  font-feature-settings: "liga" 1, "kern" 1;
}

/* Body defaults */
body {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1rem); /* ~15-16px */
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Remove default heading font sizes */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Reset anchors */
a {
  color: inherit;
  text-decoration: none;
}

/* Images */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form elements inherit font */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Remove animations for people who prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Selection Styling --- */
::selection {
  background-color: rgba(var(--color-primary-rgb), 0.3);
  color: var(--color-text-primary);
}

::-moz-selection {
  background-color: rgba(var(--color-primary-rgb), 0.3);
  color: var(--color-text-primary);
}

/* --- Custom Scrollbar (Webkit) --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-alt);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) var(--color-bg-alt);
}

/* --- Focus Styles (Accessibility) --- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}


/* ==============================================================================
   3. TYPOGRAPHY
   ============================================================================== */

/*
 * Fluid type scale using clamp().
 * Scale ratio: ~1.25 (major third)
 * Base: 1rem (16px)
 */

/* --- Fluid Heading Sizes --- */
h1,
.h1 {
  font-size: clamp(2.5rem, 4vw + 1rem, 4.5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

h2,
.h2 {
  font-size: clamp(1.75rem, 2.5vw + 0.5rem, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

h3,
.h3 {
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h4,
.h4 {
  font-size: clamp(1.125rem, 1vw + 0.5rem, 1.375rem);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

/* --- Body Text --- */
p {
  text-wrap: pretty;
  max-inline-size: 72ch;
  overflow-wrap: break-word;
}

.body-lg {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.7;
}

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 600px;
}

/* --- Small Text --- */
small,
.small,
.text-sm {
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
}

.text-xs {
  font-size: 0.75rem; /* 12px */
  line-height: 1.4;
}

/* --- Mono Text --- */
code,
.mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

code {
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  font-size: 0.85em;
}

pre code {
  display: block;
  padding: var(--space-lg);
  overflow-x: auto;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  line-height: 1.6;
}

/* --- Text Gradient Classes --- */

/* Primary teal gradient text */
.text-gradient-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Gold accent gradient text */
.text-gradient-gold {
  background: linear-gradient(135deg, var(--color-accent) 0%, #ffe08a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Combined primary-to-light gradient */
.text-gradient-primary-light {
  background: linear-gradient(135deg, var(--color-primary) 0%, rgba(51, 255, 190, 0.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Overline / Label Style --- */
.overline,
.label {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem; /* 13px */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: 1;
}

/* --- Font Weight Utilities --- */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* --- Text Color Utilities --- */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-primary); }
.text-gold { color: var(--color-accent); }
.text-danger { color: var(--color-danger); }

/* --- Text Alignment --- */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* --- Text Decoration --- */
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }

/* --- Truncation --- */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ==============================================================================
   4. LAYOUT
   ============================================================================== */

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--max-width-content);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.container--wide {
  max-width: var(--max-width-header);
}

/* --- Section Padding (clamp-based, fluid) --- */
.section {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.section--lg {
  padding-block: clamp(5rem, 10vw, 9rem);
}

.section--sm {
  padding-block: clamp(3rem, 6vw, 5rem);
}

/* --- Grid Utilities --- */
.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid--2-col {
  grid-template-columns: 1fr;
}

.grid--3-col {
  grid-template-columns: 1fr;
}

.grid--4-col {
  grid-template-columns: 1fr;
}

/* --- Flex Utilities --- */
.flex {
  display: flex;
}

.flex--center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex--between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex--col {
  display: flex;
  flex-direction: column;
}

.flex--wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex--gap-sm { gap: var(--space-sm); }
.flex--gap-md { gap: var(--space-md); }
.flex--gap-lg { gap: var(--space-lg); }
.flex--gap-xl { gap: var(--space-xl); }
.flex--gap-2xl { gap: var(--space-2xl); }

/* Alignment utilities for flex/grid children */
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }

.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* --- Width Utilities --- */
.w-full { width: 100%; }
.max-w-none { max-width: none; }
.max-w-sm { max-width: 400px; }
.max-w-md { max-width: 600px; }
.max-w-lg { max-width: 800px; }
.max-w-xl { max-width: 1000px; }
.max-w-content { max-width: var(--max-width-content); }

/* --- Auto Margins --- */
.mx-auto { margin-inline: auto; }
.my-auto { margin-block: auto; }


/* ==============================================================================
   5. HEADER
   ============================================================================== */

/*
 * Fixed header with glass morphism effect.
 * Transitions to a compact, more opaque state on scroll (.header-scrolled).
 */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background: var(--header-bg);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-lg);
  transition:
    padding-block var(--transition-normal) var(--ease-out-expo),
    background var(--transition-normal) var(--ease-out-expo),
    backdrop-filter var(--transition-normal) var(--ease-out-expo),
    border-color var(--transition-normal) var(--ease-out-expo);
}

.header--scrolled {
  padding-block: var(--space-md);
  background: var(--header-bg-scrolled);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border-bottom-color: var(--color-border-hover);
}

/* Header inner container */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width-header);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

/* --- Logo --- */
.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo img {
  height: 32px;
  width: auto;
  transition: height var(--transition-normal) var(--ease-out-expo);
}

.header--scrolled .header__logo img {
  height: 28px;
}

/* --- Desktop Navigation --- */
.header__nav {
  display: none; /* Shown on lg+ */
  align-items: center;
  gap: var(--space-xl);
}

.header__nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* Nav link style */
.header__nav-link {
  font-size: 0.9375rem; /* 15px */
  font-weight: 500;
  color: var(--color-text-secondary);
  transition:
    color var(--transition-fast) var(--ease-out-expo),
    opacity var(--transition-fast) var(--ease-out-expo);
  position: relative;
}

.header__nav-link:hover {
  color: var(--color-primary);
}

/* Active nav link indicator */
.header__nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-normal) var(--ease-out-expo);
}

.header__nav-link:hover::after,
.header__nav-link[aria-current="page"]::after {
  width: 100%;
}

.header__nav-link[aria-current="page"] {
  color: var(--color-text-primary);
}

/* --- Lang Switcher --- */
.header__lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    color var(--transition-fast) var(--ease-out-expo),
    border-color var(--transition-fast) var(--ease-out-expo),
    background var(--transition-fast) var(--ease-out-expo);
}

.header__lang-switch:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-hover);
  background: var(--color-bg-card);
}

/* --- CTA Button in Header --- */
.header__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-inverse);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background var(--transition-fast) var(--ease-out-expo),
    box-shadow var(--transition-fast) var(--ease-out-expo),
    transform var(--transition-fast) var(--ease-out-expo);
}

.header__cta:hover {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-glow-primary);
  transform: translateY(-1px);
}

.header__cta:active {
  transform: translateY(0);
}

/* --- Hamburger Button (Mobile) --- */
.header__hamburger {
  display: flex; /* Shown on mobile, hidden on lg+ */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  gap: 6px;
  z-index: calc(var(--z-mobile-menu) + 1);
}

.header__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: var(--radius-full);
  transition:
    transform var(--transition-normal) var(--ease-out-expo),
    opacity var(--transition-fast) var(--ease-out-expo),
    width var(--transition-normal) var(--ease-out-expo);
  transform-origin: center;
}

/* Hamburger to X animation */
.header__hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.header__hamburger.active span:nth-child(2) {
  opacity: 0;
  width: 0;
}

.header__hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* ==============================================================================
   6. MOBILE MENU
   ============================================================================== */

/*
 * Full-screen overlay menu.
 * Slides in from the right with backdrop blur.
 * Uses CSS transform + opacity for the transition.
 */

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile */
  z-index: var(--z-mobile-menu);
  background: rgba(7, 8, 10, 0.95);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3xl) var(--space-xl);
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--transition-slow) var(--ease-out-expo),
    opacity var(--transition-normal) var(--ease-out-expo),
    visibility var(--transition-normal);
}

.mobile-menu.open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

/* Mobile nav links */
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.mobile-menu__link {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 600;
  color: var(--color-text-secondary);
  line-height: 1.2;
  transition:
    color var(--transition-fast) var(--ease-out-expo),
    transform var(--transition-fast) var(--ease-out-expo);
  display: inline-block;
}

.mobile-menu__link:hover {
  color: var(--color-primary);
  transform: translateX(8px);
}

.mobile-menu__link[aria-current="page"] {
  color: var(--color-text-primary);
}

/* Mobile lang switcher */
.mobile-menu__lang {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.mobile-menu__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    color var(--transition-fast) var(--ease-out-expo),
    border-color var(--transition-fast) var(--ease-out-expo),
    background var(--transition-fast) var(--ease-out-expo);
}

.mobile-menu__lang-btn:hover,
.mobile-menu__lang-btn.active {
  color: var(--color-text-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

/* Mobile CTA */
.mobile-menu__cta {
  margin-top: var(--space-xl);
}

.mobile-menu__cta .btn {
  width: 100%;
  justify-content: center;
}


/* ==============================================================================
   7. SCROLL PROGRESS BAR
   ============================================================================== */

/*
 * Fixed at top of viewport, full-width, thin gradient bar.
 * ScaleX controlled via CSS custom property or JS.
 */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: var(--z-scroll-progress);
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-accent) 100%
  );
  transform-origin: left;
  transform: scaleX(0);
  pointer-events: none;
  transition: transform 50ms linear;
}


/* ==============================================================================
   8. HERO SECTION
   ============================================================================== */

/*
 * Full-viewport hero with badge, heading, lead, CTA buttons,
 * stats row, and a floating chat mockup card.
 * Background features subtle radial gradient orbs and noise overlay.
 */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: calc(var(--header-height) + var(--space-3xl)) var(--space-lg) var(--space-3xl);
  overflow: hidden;
  text-align: center;
}

/* --- Hero Background Effects --- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Radial gradient orbs */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
}

.hero__orb--teal {
  width: 600px;
  height: 600px;
  background: var(--color-primary);
  top: 10%;
  left: -10%;
  animation: pulse-glow 8s ease-in-out infinite;
}

.hero__orb--gold {
  width: 400px;
  height: 400px;
  background: var(--color-accent);
  bottom: 15%;
  right: -5%;
  animation: pulse-glow 10s ease-in-out infinite 3s;
  opacity: 0.08;
}

/* Noise texture overlay via SVG data URI */
.hero__noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* --- Hero Content --- */
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

/* Badge / Pill */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-lg);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
  transition:
    border-color var(--transition-fast) var(--ease-out-expo),
    background var(--transition-fast) var(--ease-out-expo);
}

.hero__badge:hover {
  border-color: var(--color-border-hover);
  background: var(--color-bg-card-hover);
}

/* Badge dot */
.hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: pulse-glow 3s ease-in-out infinite;
  box-shadow: 0 0 6px var(--color-primary-glow);
}

/* H1 in hero */
.hero__title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-wrap: balance;
}

/* Lead paragraph */
.hero__lead {
  font-size: clamp(1.0625rem, 1vw + 0.5rem, 1.25rem);
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 600px;
}

/* --- CTA Buttons Row --- */
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

/* --- Stats Row --- */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.hero__stat-number {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.hero__stat-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
  font-weight: 500;
}

/* Dividers between stats */
.hero__stat + .hero__stat::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-xl) - 1px);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 32px;
  background: var(--color-border);
}

/* --- Floating Chat Mockup Card --- */
.hero__chat-card {
  position: absolute;
  bottom: 10%;
  right: 8%;
  width: clamp(260px, 22vw, 340px);
  background: rgba(13, 15, 17, 0.8);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  z-index: 1;
  animation: float 6s ease-in-out infinite;
  box-shadow: var(--shadow-lg), var(--shadow-glow-primary);
}

.hero__chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-md);
}

.hero__chat-dots {
  display: flex;
  gap: 5px;
}

.hero__chat-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

.hero__chat-dots span:first-child { background: #ff5f57; }
.hero__chat-dots span:nth-child(2) { background: #febc2e; }
.hero__chat-dots span:last-child { background: #28c840; }

.hero__chat-title {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.hero__chat-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.hero__chat-bubble {
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  max-width: 85%;
}

.hero__chat-bubble--user {
  align-self: flex-end;
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border: 1px solid rgba(var(--color-primary-rgb), 0.15);
}

.hero__chat-bubble--ai {
  align-self: flex-start;
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* Typing dots animation */
.hero__chat-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-sm) var(--space-md);
  align-self: flex-start;
}

.hero__chat-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-muted);
  animation: typing 1.4s ease-in-out infinite;
}

.hero__chat-typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.hero__chat-typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}


/* ==============================================================================
   9. SOCIAL PROOF BAR
   ============================================================================== */

/*
 * Horizontal flex row of centered statistics.
 * Subtle top/bottom borders. Muted numbers, teal on hover.
 */

.social-proof {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2xl);
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.social-proof__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
}

.social-proof__number {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--color-text-secondary);
  letter-spacing: -0.02em;
  transition: color var(--transition-fast) var(--ease-out-expo);
}

.social-proof__item:hover .social-proof__number {
  color: var(--color-primary);
}

.social-proof__label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Separator between social proof items */
.social-proof__separator {
  width: 1px;
  height: 40px;
  background: var(--color-border);
  flex-shrink: 0;
}


/* ==============================================================================
   10. SECTION HEADERS
   ============================================================================== */

/*
 * Centered section header with overline label, h2, and subtitle paragraph.
 */

.section-header {
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.section-header__label {
  /* Inherits from .overline / .label */
}

.section-header__title {
  font-size: clamp(1.75rem, 3vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.section-header__subtitle {
  font-size: clamp(1rem, 0.5vw + 0.75rem, 1.125rem);
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 600px;
}


/* ==============================================================================
   11. FLOW DIAGRAM / HOW IT WORKS
   ============================================================================== */

/*
 * Horizontal step-by-step flow with glass card nodes and arrow connectors.
 * Stacks vertically on mobile.
 */

.flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  position: relative;
}

.flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  flex: 0 1 auto;
  max-width: 220px;
  padding: var(--space-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition:
    background var(--transition-fast) var(--ease-out-expo),
    border-color var(--transition-fast) var(--ease-out-expo),
    transform var(--transition-fast) var(--ease-out-expo),
    box-shadow var(--transition-fast) var(--ease-out-expo);
}

.flow__step:hover {
  background: var(--color-bg-card-hover);
  border-color: var(--color-border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevation);
}

/* Step icon circle */
.flow__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-subtle);
  border: 1px solid rgba(var(--color-primary-rgb), 0.15);
  color: var(--color-primary);
  flex-shrink: 0;
}

.flow__icon svg {
  width: 24px;
  height: 24px;
}

.flow__step-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.flow__step-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.flow__step-desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Arrow between steps */
.flow__arrow {
  display: flex;
  align-items: center;
  padding: 0 var(--space-md);
  color: var(--color-text-muted);
  flex-shrink: 0;
  margin-top: var(--space-xl);
}

.flow__arrow svg {
  width: 24px;
  height: 24px;
}


/* ==============================================================================
   12. CASE SHOWCASE / WORK GRID
   ============================================================================== */

/*
 * Featured card (spans 2 cols on desktop) with a visual area and body content.
 * Visual area shows animated SVG chart/bar mockups.
 */

.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.work-card {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition:
    background var(--transition-normal) var(--ease-out-expo),
    border-color var(--transition-normal) var(--ease-out-expo),
    transform var(--transition-normal) var(--ease-out-expo),
    box-shadow var(--transition-normal) var(--ease-out-expo);
}

.work-card:hover {
  background: var(--color-bg-card-hover);
  border-color: rgba(var(--color-primary-rgb), 0.15);
  transform: translateY(-4px) scale(1.005);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(var(--color-primary-rgb), 0.06);
}

/* Featured card spans 2 cols on desktop */
.work-card--featured {
  /* Applied via responsive class */
}

/* Visual area */
.work-card__visual {
  position: relative;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  min-height: 240px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-card__visual svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* Animated bar mockup */
.work-card__bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: var(--space-xl);
  height: 100%;
  position: relative;
  z-index: 1;
}

.work-card__bar {
  flex: 1;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  animation: bar-grow 1.5s var(--ease-out-expo) forwards;
  transform-origin: bottom;
}

.work-card__bar--teal {
  background: linear-gradient(to top, rgba(var(--color-primary-rgb), 0.3), rgba(var(--color-primary-rgb), 0.6));
}

.work-card__bar--gold {
  background: linear-gradient(to top, rgba(var(--color-accent-rgb), 0.2), rgba(var(--color-accent-rgb), 0.4));
}

/* Body content */
.work-card__body {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Client label (overline) */
.work-card__client {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.work-card__title {
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.work-card__description {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Metrics row */
.work-card__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.work-card__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.work-card__metric-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.work-card__metric-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Link with arrow */
.work-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: var(--space-sm);
  transition:
    gap var(--transition-fast) var(--ease-out-expo),
    color var(--transition-fast) var(--ease-out-expo);
}

.work-card__link:hover {
  gap: var(--space-sm);
  color: var(--color-primary-light);
}

.work-card__link svg,
.work-card__link .arrow-icon {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast) var(--ease-out-expo);
}

.work-card__link:hover svg,
.work-card__link:hover .arrow-icon {
  transform: translateX(4px);
}


/* ==============================================================================
   13. TESTIMONIAL CARD
   ============================================================================== */

/*
 * Glass card with decorative large quote mark, italic quote text,
 * and author info (avatar circle + name + role).
 */

.testimonial {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  position: relative;
  overflow: hidden;
  transition:
    background var(--transition-normal) var(--ease-out-expo),
    border-color var(--transition-normal) var(--ease-out-expo),
    transform var(--transition-normal) var(--ease-out-expo);
}

.testimonial:hover {
  background: var(--color-bg-card-hover);
  border-color: var(--color-border-hover);
  transform: translateY(-2px);
}

/* Decorative large quote mark */
.testimonial__quote-mark {
  position: absolute;
  top: var(--space-lg);
  left: var(--space-lg);
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.1;
  font-family: Georgia, serif;
  pointer-events: none;
  user-select: none;
}

.testimonial__quote {
  font-size: clamp(1rem, 1vw + 0.75rem, 1.125rem);
  line-height: 1.7;
  color: var(--color-text-secondary);
  font-style: italic;
  position: relative;
  z-index: 1;
  margin-bottom: var(--space-xl);
}

/* Author row */
.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-bg-alt);
}

.testimonial__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.testimonial__role {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 1px;
}


/* ==============================================================================
   14. COMPARISON SECTION
   ============================================================================== */

/*
 * Two-column layout: left has heading, description, and feature badges.
 * Right has a comparison table with rows, label, traditional bar (muted red),
 * and Beehive bar (teal). Bars animate width on interaction.
 */

.comparison {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
}

/* Left column */
.comparison__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.comparison__title {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.comparison__description {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* Feature badges (check icon + text) */
.comparison__badges {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.comparison__badge {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.comparison__badge-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}

.comparison__badge-icon svg {
  width: 12px;
  height: 12px;
}

/* Right column — comparison table */
.comparison__table {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* Table header */
.comparison__table-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: var(--space-md) var(--space-lg);
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.comparison__table-header span:nth-child(2) {
  color: var(--color-danger);
  text-align: right;
}

.comparison__table-header span:nth-child(3) {
  color: var(--color-primary);
  text-align: right;
}

/* Table row */
.comparison__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  transition:
    background var(--transition-fast) var(--ease-out-expo);
}

.comparison__row:last-child {
  border-bottom: none;
}

.comparison__row:hover {
  background: var(--color-bg-card-hover);
}

.comparison__row-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

/* Comparison bars */
.comparison__bar-track {
  display: flex;
  justify-content: flex-end;
}

.comparison__bar {
  height: 8px;
  border-radius: var(--radius-full);
  transition:
    width var(--transition-slow) var(--ease-out-expo);
  max-width: 100%;
}

.comparison__bar--traditional {
  background: var(--color-danger-subtle);
  width: 85%;
}

.comparison__bar--beehive {
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-primary-light) 100%
  );
  width: 40%; /* Animate to full width on scroll/hover */
  box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.3);
}

/* Animate bars on hover of the row or on scroll-triggered class */
.comparison__row.is-visible .comparison__bar--beehive,
.comparison__row:hover .comparison__bar--beehive {
  width: 100%;
}

.comparison__row.is-visible .comparison__bar--traditional,
.comparison__row:hover .comparison__bar--traditional {
  width: 60%;
}


/* ==============================================================================
   15. INDUSTRY CARDS GRID
   ============================================================================== */

/*
 * 3-col grid on desktop, 1 on mobile.
 * Cards with icon in colored circle, h3, description, and arrow link.
 * Glass card style with hover lift.
 */

.industry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.industry-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition:
    background var(--transition-normal) var(--ease-out-expo),
    border-color var(--transition-normal) var(--ease-out-expo),
    transform var(--transition-normal) var(--ease-out-expo),
    box-shadow var(--transition-normal) var(--ease-out-expo);
}

.industry-card:hover {
  background: var(--color-bg-card-hover);
  border-color: rgba(var(--color-primary-rgb), 0.15);
  transform: translateY(-6px);
  box-shadow: var(--shadow-elevation);
}

/* Icon in colored circle */
.industry-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-primary-subtle);
  border: 1px solid rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
  transition:
    background var(--transition-fast) var(--ease-out-expo),
    border-color var(--transition-fast) var(--ease-out-expo);
}

.industry-card:hover .industry-card__icon {
  background: rgba(var(--color-primary-rgb), 0.12);
  border-color: rgba(var(--color-primary-rgb), 0.2);
}

.industry-card__icon svg {
  width: 22px;
  height: 22px;
}

.industry-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.industry-card__description {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  flex-grow: 1;
}

/* Arrow link */
.industry-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  transition:
    gap var(--transition-fast) var(--ease-out-expo),
    color var(--transition-fast) var(--ease-out-expo);
}

.industry-card__link:hover {
  gap: var(--space-sm);
  color: var(--color-primary-light);
}

.industry-card__link svg,
.industry-card__link .arrow-icon {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast) var(--ease-out-expo);
}

.industry-card__link:hover svg,
.industry-card__link:hover .arrow-icon {
  transform: translateX(4px);
}


/* ==============================================================================
   16. CTA SECTION
   ============================================================================== */

/*
 * Large centered text with aurora/gradient animated background.
 * Two CTA buttons.
 */

.cta-section {
  position: relative;
  text-align: center;
  padding: clamp(5rem, 10vw, 8rem) var(--space-lg);
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Aurora animated gradient background */
.cta-section__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--color-primary-rgb), 0.05) 0%,
    rgba(7, 8, 10, 0) 25%,
    rgba(var(--color-accent-rgb), 0.03) 50%,
    rgba(7, 8, 10, 0) 75%,
    rgba(var(--color-primary-rgb), 0.05) 100%
  );
  background-size: 300% 300%;
  animation: gradient-shift 15s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.cta-section__content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

.cta-section__title {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.cta-section__description {
  font-size: clamp(1rem, 0.5vw + 0.75rem, 1.125rem);
  color: var(--color-text-secondary);
  line-height: 1.7;
  max-width: 550px;
}

.cta-section__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}


/* ==============================================================================
   17. FAQ SECTION
   ============================================================================== */

/*
 * Accordion using native <details>/<summary>.
 * Clean borders, smooth max-height animation, plus/minus icon.
 */

.faq-list {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none; /* Remove default marker */
  transition:
    color var(--transition-fast) var(--ease-out-expo),
    background var(--transition-fast) var(--ease-out-expo);
  user-select: none;
}

/* Remove marker in WebKit */
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--color-primary);
  background: var(--color-bg-card);
}

/* Plus / Minus icon */
.faq-item__icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background var(--transition-fast) var(--ease-out-expo),
    border-color var(--transition-fast) var(--ease-out-expo),
    transform var(--transition-normal) var(--ease-out-expo);
  position: relative;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  background: var(--color-text-secondary);
  border-radius: var(--radius-full);
  transition:
    transform var(--transition-normal) var(--ease-out-expo),
    opacity var(--transition-fast) var(--ease-out-expo);
}

/* Horizontal bar (plus) */
.faq-item__icon::before {
  width: 12px;
  height: 2px;
}

/* Vertical bar (plus) */
.faq-item__icon::after {
  width: 2px;
  height: 12px;
}

/* Rotate vertical bar to minus when open */
.faq-item[open] .faq-item__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.faq-item[open] .faq-item__icon {
  background: var(--color-primary-subtle);
  border-color: rgba(var(--color-primary-rgb), 0.2);
}

.faq-item[open] .faq-item__icon::before {
  background: var(--color-primary);
}

/* Answer content with smooth animation */
.faq-item__answer {
  padding: 0 var(--space-xl) var(--space-lg);
}

.faq-item__answer p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* Animate the answer appearing */
.faq-item__answer {
  animation: faq-expand var(--transition-normal) var(--ease-out-expo);
}

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


/* ==============================================================================
   18. FOOTER
   ============================================================================== */

/*
 * Multi-column grid footer.
 * Brand column (logo, description, social icons).
 * Product, Industry, Company link columns.
 * Bottom bar (copyright, legal, built-with note).
 */

.footer {
  padding-top: clamp(4rem, 8vw, 6rem);
  padding-bottom: var(--space-xl);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.footer__inner {
  max-width: var(--max-width-content);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

/* Footer grid */
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  border-bottom: 1px solid var(--color-border);
}

/* Brand column */
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.footer__logo {
  display: flex;
  align-items: center;
}

.footer__logo img {
  height: 32px;
  width: auto;
}

.footer__brand-description {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 320px;
}

/* Social icons row */
.footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.footer__social-link {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  transition:
    background var(--transition-fast) var(--ease-out-expo),
    border-color var(--transition-fast) var(--ease-out-expo),
    color var(--transition-fast) var(--ease-out-expo),
    transform var(--transition-fast) var(--ease-out-expo);
}

.footer__social-link:hover {
  background: var(--color-bg-card-hover);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}

.footer__social-link svg {
  width: 18px;
  height: 18px;
}

/* Link columns */
.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer__links-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-primary);
}

.footer__links-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer__link {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  transition:
    color var(--transition-fast) var(--ease-out-expo),
    transform var(--transition-fast) var(--ease-out-expo);
  display: inline-block;
}

.footer__link:hover {
  color: var(--color-primary);
  transform: translateX(4px);
}

/* Bottom bar */
.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-xl);
  text-align: center;
}

.footer__bottom p {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.footer__bottom-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.footer__bottom-link {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  transition: color var(--transition-fast) var(--ease-out-expo);
}

.footer__bottom-link:hover {
  color: var(--color-text-secondary);
}

.footer__built-with {
  margin-top: var(--space-sm);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  opacity: 0.7;
}


/* ==============================================================================
   19. BACK TO TOP BUTTON
   ============================================================================== */

/*
 * Fixed bottom-right circle button with arrow up icon.
 * Glass background, hidden by default, visible after scroll.
 */

.back-to-top {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(13, 15, 17, 0.7);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  cursor: pointer;
  z-index: var(--z-back-to-top);
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--transition-normal) var(--ease-out-expo),
    transform var(--transition-normal) var(--ease-out-expo),
    visibility var(--transition-normal),
    background var(--transition-fast) var(--ease-out-expo),
    border-color var(--transition-fast) var(--ease-out-expo),
    color var(--transition-fast) var(--ease-out-expo),
    box-shadow var(--transition-fast) var(--ease-out-expo);
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--color-bg-card-hover);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-glow-primary);
}

.back-to-top:active {
  transform: translateY(0) scale(1);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}


/* ==============================================================================
   20. BUTTONS SYSTEM
   ============================================================================== */

/*
 * Comprehensive button system with multiple variants.
 * Base class + modifiers.
 */

/* --- Base Button --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  padding: var(--space-sm) var(--space-xl);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition:
    background var(--transition-fast) var(--ease-out-expo),
    color var(--transition-fast) var(--ease-out-expo),
    border-color var(--transition-fast) var(--ease-out-expo),
    box-shadow var(--transition-fast) var(--ease-out-expo),
    transform var(--transition-fast) var(--ease-out-expo);
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Primary Button --- */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.25);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-glow-primary);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* --- Secondary Button (Outlined) --- */
.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid rgba(var(--color-primary-rgb), 0.3);
}

.btn-secondary:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0) scale(0.98);
  background: rgba(var(--color-primary-rgb), 0.12);
}

/* --- Large Button --- */
.btn-lg {
  font-size: 1.0625rem;
  padding: var(--space-md) var(--space-2xl);
  border-radius: var(--radius-lg);
}

/* --- Small Button --- */
.btn-sm {
  font-size: 0.8125rem;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
}

/* --- Ghost Button (No border, subtle) --- */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
  padding: var(--space-xs) var(--space-sm);
}

.btn-ghost:hover {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}

/* --- Shimmer Button (Gradient animation on hover) --- */
.btn-shimmer {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
}

.btn-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: none;
}

.btn-shimmer:hover::before {
  animation: shimmer 0.8s var(--ease-out-expo);
}

.btn-shimmer:hover {
  box-shadow: var(--shadow-glow-primary);
  transform: translateY(-2px);
}

/* --- White Button variant --- */
.btn-white {
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  border: none;
}

.btn-white:hover {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

/* --- Button with icon only --- */
.btn-icon {
  padding: var(--space-sm);
  aspect-ratio: 1;
  border-radius: var(--radius-md);
}

.btn-icon svg {
  width: 20px;
  height: 20px;
}

/* --- Button full width --- */
.btn-full {
  width: 100%;
}


/* ==============================================================================
   21. CARDS SYSTEM
   ============================================================================== */

/*
 * Glass morphism cards with interactive variant.
 * Consistent glass background, border, rounded corners.
 */

/* --- Base Card --- */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  transition:
    background var(--transition-normal) var(--ease-out-expo),
    border-color var(--transition-normal) var(--ease-out-expo),
    box-shadow var(--transition-normal) var(--ease-out-expo);
}

.card:hover {
  background: var(--color-bg-card-hover);
}

/* --- Interactive Card (hover lift + shadow) --- */
.card-interactive {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  transition:
    background var(--transition-normal) var(--ease-out-expo),
    border-color var(--transition-normal) var(--ease-out-expo),
    transform var(--transition-normal) var(--ease-out-expo),
    box-shadow var(--transition-normal) var(--ease-out-expo);
}

.card-interactive:hover {
  background: var(--color-bg-card-hover);
  border-color: var(--color-border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevation);
}

/* --- Card without padding (for wrapping custom content) --- */
.card--no-padding {
  padding: 0;
}

/* --- Card variants --- */
.card--flat {
  border: none;
  background: rgba(255, 255, 255, 0.01);
}

.card--bordered {
  background: transparent;
  border: 1px solid var(--color-border);
}

.card--glow:hover {
  border-color: rgba(var(--color-primary-rgb), 0.2);
  box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.08);
}


/* ==============================================================================
   22. BADGES / TAGS
   ============================================================================== */

/*
 * Overline labels, pill tags, and status badges with dot indicators.
 */

/* --- Label / Overline --- */
.label {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: 1;
  gap: var(--space-xs);
}

.label--gold {
  color: var(--color-accent);
}

.label--muted {
  color: var(--color-text-muted);
}

/* --- Tag (Pill) --- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border: 1px solid rgba(var(--color-primary-rgb), 0.12);
}

.tag--gold {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border-color: rgba(var(--color-accent-rgb), 0.12);
}

.tag--muted {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.tag--solid {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

/* --- Badge (Status indicator with dot) --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.badge--success .badge__dot {
  background: var(--color-primary);
  box-shadow: 0 0 4px var(--color-primary-glow);
}

.badge--success {
  color: var(--color-primary);
}

.badge--warning .badge__dot {
  background: var(--color-accent);
  box-shadow: 0 0 4px var(--color-accent-glow);
}

.badge--warning {
  color: var(--color-accent);
}

.badge--error .badge__dot {
  background: var(--color-danger);
  box-shadow: 0 0 4px rgba(255, 90, 90, 0.4);
}

.badge--error {
  color: var(--color-danger);
}

.badge--neutral .badge__dot {
  background: var(--color-text-muted);
}


/* ==============================================================================
   23. RESPONSIVE BREAKPOINTS
   ============================================================================== */

/*
 * Mobile-first approach.
 * Breakpoints:
 *   sm  = 640px
 *   md  = 768px
 *   lg  = 1024px
 *   xl  = 1200px
 *   2xl = 1440px
 */

/* --- sm (640px) --- */
@media (min-width: 640px) {
  /* Grid utilities */
  .grid--2-col {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__stats {
    gap: var(--space-2xl);
  }

  .hero__chat-card {
    bottom: 12%;
    right: 6%;
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* --- md (768px) --- */
@media (min-width: 768px) {
  /* Section padding adjustments */
  .section {
    padding-block: clamp(4.5rem, 8vw, 7.5rem);
  }

  /* Grid 3-col */
  .grid--3-col {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Flow diagram horizontal */
  .flow {
    gap: 0;
  }

  .flow__arrow {
    display: flex;
  }

  /* Work grid 2 cols */
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .work-card--featured {
    grid-column: span 2;
  }

  .work-card--featured .work-card__visual {
    min-height: 320px;
  }

  .work-card--featured .work-card__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* Industry grid */
  .industry-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Comparison section 2-col */
  .comparison {
    grid-template-columns: 1fr 1.2fr;
    align-items: start;
  }

  /* Footer grid */
  .footer__grid {
    grid-template-columns: 1.5fr repeat(3, 1fr);
  }

  /* FAQ items side by side on larger screens if needed */
  .faq-list {
    max-width: 780px;
  }
}

/* --- lg (1024px) --- */
@media (min-width: 1024px) {
  /* Container adjustments */
  .container {
    padding-inline: var(--space-xl);
  }

  /* Show desktop nav, hide hamburger */
  .header__nav {
    display: flex;
  }

  .header__hamburger {
    display: none;
  }

  /* Hide mobile menu */
  .mobile-menu {
    display: none;
  }

  /* Grid 4-col */
  .grid--4-col {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Industry grid 3 cols */
  .industry-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Hero chat card position */
  .hero__chat-card {
    bottom: 15%;
    right: 10%;
  }

  /* Comparison table header alignment */
  .comparison__table-header {
    padding: var(--space-md) var(--space-xl);
  }

  .comparison__row {
    padding: var(--space-md) var(--space-xl);
  }
}

/* --- xl (1200px) --- */
@media (min-width: 1200px) {
  /* Container */
  .container {
    padding-inline: var(--space-2xl);
  }

  .header__inner {
    padding-inline: var(--space-2xl);
  }

  /* Hero */
  .hero {
    padding: calc(var(--header-height) + var(--space-4xl)) var(--space-2xl) var(--space-4xl);
  }

  .hero__content {
    max-width: 860px;
  }

  /* Hero chat card */
  .hero__chat-card {
    bottom: 18%;
    right: 12%;
    width: 340px;
  }
}

/* --- 2xl (1440px) --- */
@media (min-width: 1440px) {
  .container {
    padding-inline: var(--space-3xl);
  }

  .hero__chat-card {
    right: 14%;
  }
}

/* --- Mobile-specific overrides (below lg) --- */
@media (max-width: 1023px) {
  /* Header hamburger visible */
  .header__hamburger {
    display: flex;
  }

  .header__nav {
    display: none;
  }

  /* Hero stats stacking */
  .hero__stat + .hero__stat::before {
    display: none;
  }

  /* Flow diagram vertical stacking */
  .flow {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .flow__step {
    max-width: 100%;
    width: 100%;
  }

  .flow__arrow {
    transform: rotate(90deg);
    margin: 0;
    padding: var(--space-md) 0;
  }

  /* Work card single column, visual area stacks */
  .work-grid {
    grid-template-columns: 1fr;
  }

  .work-card--featured {
    grid-column: span 1;
  }

  .work-card--featured .work-card__inner {
    grid-template-columns: 1fr;
  }

  /* Comparison stacks vertically */
  .comparison {
    grid-template-columns: 1fr;
  }

  /* Footer grid single column */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  /* Footer bottom stacking */
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
  }

  /* Footer social icons centered */
  .footer__brand {
    align-items: center;
    text-align: center;
  }

  .footer__brand-description {
    max-width: 100%;
  }

  .footer__social {
    justify-content: center;
  }

  .footer__links {
    align-items: center;
  }

  /* CTA section button stacking */
  .cta-section__buttons {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
  }

  .cta-section__buttons .btn {
    width: 100%;
    justify-content: center;
  }

  /* Back to top positioning */
  .back-to-top {
    bottom: var(--space-lg);
    right: var(--space-lg);
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 639px) {
  /* Work grid single col */
  .work-grid {
    grid-template-columns: 1fr;
  }

  /* Industry grid single col */
  .industry-grid {
    grid-template-columns: 1fr;
  }

  /* Social proof stacking */
  .social-proof {
    gap: var(--space-xl);
    padding-block: var(--space-xl);
  }

  /* Social proof separators hidden on mobile */
  .social-proof__separator {
    display: none;
  }

  /* Hero stats vertical */
  .hero__stats {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .hero__stat + .hero__stat::before {
    display: none;
  }

  /* Hero chat card hidden on very small screens */
  .hero__chat-card {
    display: none;
  }

  /* Testimonial full width */
  .testimonial {
    padding: var(--space-lg);
  }

  .testimonial__quote-mark {
    font-size: 3rem;
  }

  /* Comparison bars responsive */
  .comparison__table-header {
    grid-template-columns: 1fr 1fr 1fr;
    font-size: 0.6875rem;
  }

  .comparison__row {
    grid-template-columns: 1fr 1fr 1fr;
    padding: var(--space-sm) var(--space-md);
  }

  .comparison__row-label {
    font-size: 0.8125rem;
  }

  /* FAQ items compact */
  .faq-item summary {
    padding: var(--space-md) var(--space-lg);
    font-size: 0.9375rem;
  }

  .faq-item__answer {
    padding: 0 var(--space-lg) var(--space-lg);
  }
}


/* ==============================================================================
   24. ANIMATIONS & KEYFRAMES
   ============================================================================== */

/*
 * Reveal animations, keyframes, staggered delays,
 * and prefers-reduced-motion support.
 */

/* --- Reveal on Scroll (class toggle) --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--transition-slow) var(--ease-out-expo),
    transform var(--transition-slow) var(--ease-out-expo);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Scale In --- */
.scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity var(--transition-slow) var(--ease-out-expo),
    transform var(--transition-slow) var(--ease-out-expo);
}

.scale-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* --- Staggered Reveal Delays --- */
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
.reveal-delay-5 { transition-delay: 500ms; }
.reveal-delay-6 { transition-delay: 600ms; }

/* --- Hero Children Stagger --- */
.hero-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--transition-slow) var(--ease-out-expo),
    transform var(--transition-slow) var(--ease-out-expo);
}

.hero-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.hero-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; }
.hero-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; }
.hero-stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; }
.hero-stagger.is-visible > *:nth-child(5) { transition-delay: 400ms; }
.hero-stagger.is-visible > *:nth-child(6) { transition-delay: 500ms; }
.hero-stagger.is-visible > *:nth-child(7) { transition-delay: 600ms; }
.hero-stagger.is-visible > *:nth-child(8) { transition-delay: 700ms; }

.hero-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* --- Keyframes --- */

/* Subtle floating up/down motion */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Teal glow pulsing */
@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.15;
    filter: blur(100px);
  }
  50% {
    opacity: 0.25;
    filter: blur(120px);
  }
}

/* Shimmer — moving highlight for buttons */
@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Gradient shift — for aurora/CTA backgrounds */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Typing dots — for chat mockup */
@keyframes typing {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* Spin — for loading states */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Bar grow — for comparison bars */
@keyframes bar-grow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

/* Fade in from bottom */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Scale pulse */
@keyframes scale-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Slide in from right (for mobile menu items) */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Loading spinner utility */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* --- Prefers Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .scale-in,
  .hero-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-stagger.is-visible > * {
    opacity: 1;
    transform: none;
  }

  .hero__chat-card {
    animation: none;
  }

  .hero__orb {
    animation: none;
  }

  .hero__badge-dot {
    animation: none;
  }

  .cta-section__bg {
    animation: none;
  }

  .scroll-progress {
    transition: none;
  }

  .work-card__bar {
    animation: none;
    transform: none;
  }

  .comparison__bar--beehive,
  .comparison__bar--traditional {
    transition: none;
  }

  .spinner {
    animation-duration: 2s;
  }
}


/* ==============================================================================
   25. BACKGROUND EFFECTS (CSS ONLY)
   ============================================================================== */

/*
 * Reusable background effect utilities.
 * Applied as classes to container elements.
 */

/* --- Subtle Radial Gradient Mesh --- */
.bg-mesh {
  position: relative;
}

.bg-mesh::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 600px 400px at 20% 30%,
      rgba(var(--color-primary-rgb), 0.06) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 500px 300px at 80% 70%,
      rgba(var(--color-accent-rgb), 0.04) 0%,
      transparent 70%
    );
  pointer-events: none;
  z-index: 0;
}

/* --- Faint Dot Grid Pattern --- */
.bg-grid {
  position: relative;
}

.bg-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle 1px at center,
    rgba(255, 255, 255, 0.07) 0%,
    transparent 100%
  );
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* --- Subtle Noise via SVG Data URI --- */
.bg-noise {
  position: relative;
}

.bg-noise::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  opacity: 0.6;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

/* --- Pulsing Glow Blob --- */
.bg-glow-pulse {
  position: relative;
  overflow: hidden;
}

.bg-glow-pulse::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.06;
  filter: blur(100px);
  animation: pulse-glow 8s ease-in-out infinite;
  top: -20%;
  left: -10%;
  pointer-events: none;
  z-index: 0;
}

.bg-glow-pulse::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.04;
  filter: blur(80px);
  animation: pulse-glow 10s ease-in-out infinite 4s;
  bottom: -15%;
  right: -8%;
  pointer-events: none;
  z-index: 0;
}

/* --- Animated Aurora Gradient Background --- */
.bg-aurora {
  position: relative;
  overflow: hidden;
}

.bg-aurora::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--color-primary-rgb), 0.08) 0%,
    transparent 25%,
    rgba(var(--color-accent-rgb), 0.05) 50%,
    transparent 75%,
    rgba(var(--color-primary-rgb), 0.08) 100%
  );
  background-size: 300% 300%;
  animation: gradient-shift 15s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* --- Subtle Diagonal Lines Pattern --- */
.bg-diagonal {
  position: relative;
}

.bg-diagonal::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0px,
    transparent 24px,
    rgba(255, 255, 255, 0.02) 24px,
    rgba(255, 255, 255, 0.02) 25px
  );
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}

/* --- Ensure content sits above background effects --- */
.bg-mesh > *,
.bg-grid > *,
.bg-noise > *,
.bg-glow-pulse > *,
.bg-aurora > *,
.bg-diagonal > * {
  position: relative;
  z-index: 1;
}


/* ==============================================================================
   26. UTILITY CLASSES
   ============================================================================== */

/*
 * Quick-access utility classes for common patterns.
 */

/* --- Display --- */
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.inline { display: inline; }
.hidden { display: none; }

/* --- Position --- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; top: 0; }

/* --- Inset --- */
.inset-0 { inset: 0; }

/* --- Overflow --- */
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* --- Screen Reader Only (Accessible hiding) --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --- Opacity --- */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* --- Cursor --- */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* --- Pointer Events --- */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* --- User Select --- */
.select-none { user-select: none; }
.select-auto { user-select: auto; }

/* --- Gap Utilities (for flex/grid) --- */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }

/* --- Padding Utilities --- */
.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.p-3xl { padding: var(--space-3xl); }

.px-sm { padding-inline: var(--space-sm); }
.px-md { padding-inline: var(--space-md); }
.px-lg { padding-inline: var(--space-lg); }
.px-xl { padding-inline: var(--space-xl); }

.py-sm { padding-block: var(--space-sm); }
.py-md { padding-block: var(--space-md); }
.py-lg { padding-block: var(--space-lg); }
.py-xl { padding-block: var(--space-xl); }
.py-2xl { padding-block: var(--space-2xl); }
.py-3xl { padding-block: var(--space-3xl); }

/* --- Margin Utilities --- */
.m-0 { margin: 0; }
.m-auto { margin: auto; }

.mx-auto { margin-inline: auto; }
.mx-sm { margin-inline: var(--space-sm); }
.mx-md { margin-inline: var(--space-md); }
.mx-lg { margin-inline: var(--space-lg); }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

/* --- Border Radius --- */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* --- Border --- */
.border { border: 1px solid var(--color-border); }
.border-top { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }
.border-none { border: none; }

/* --- Shadow --- */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-elevation { box-shadow: var(--shadow-elevation); }
.shadow-glow-primary { box-shadow: var(--shadow-glow-primary); }
.shadow-none { box-shadow: none; }

/* --- Z-Index --- */
.z-base { z-index: var(--z-base); }
.z-above { z-index: var(--z-above); }
.z-sticky { z-index: var(--z-sticky); }
.z-overlay { z-index: var(--z-overlay); }

/* --- Isolation --- */
.isolate { isolation: isolate; }

/* --- Order for flex/grid children --- */
.order-first { order: -1; }
.order-last { order: 9999; }

/* --- Grow / Shrink --- */
.grow { flex-grow: 1; }
.grow-0 { flex-grow: 0; }
.shrink-0 { flex-shrink: 0; }
.shrink { flex-shrink: 1; }

/* --- Aspect Ratio --- */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }

/* --- Object Fit --- */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-center { object-position: center; }

/* --- Ring (outline-style) --- */
.ring-primary {
  box-shadow: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-primary);
}

/* --- Transition Utilities --- */
.transition-none { transition: none; }
.transition-fast { transition: all var(--transition-fast) var(--ease-out-expo); }
.transition-normal { transition: all var(--transition-normal) var(--ease-out-expo); }
.transition-slow { transition: all var(--transition-slow) var(--ease-out-expo); }

/* --- Transform Utilities --- */
.transform { transform: none; }
.translate-y-0 { transform: translateY(0); }
.scale-100 { transform: scale(1); }
.scale-95 { transform: scale(0.95); }

/* --- Hover Transforms --- */
.hover\:translate-y-0:hover { transform: translateY(0); }
.hover\:translate-y-1:hover { transform: translateY(4px); }
.hover\:translate-y-neg-1:hover { transform: translateY(-4px); }
.hover\:scale-105:hover { transform: scale(1.05); }

/* --- Interactivity --- */
.interactive {
  transition:
    background var(--transition-fast) var(--ease-out-expo),
    border-color var(--transition-fast) var(--ease-out-expo),
    box-shadow var(--transition-fast) var(--ease-out-expo),
    transform var(--transition-fast) var(--ease-out-expo);
}

/* --- Glass Effect Utility --- */
.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.glass--light {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Gradient Text Utility --- */
.gradient-text {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- List Styled (for actual content lists) --- */
.list-styled {
  list-style: disc;
  padding-left: var(--space-lg);
}

.list-styled li {
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.list-styled li::marker {
  color: var(--color-primary);
}

/* --- Divider --- */
.divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
  border: none;
}

/* --- Scroll Margin (for anchor link offset with fixed header) --- */
.scroll-mt-header {
  scroll-margin-top: calc(var(--header-height) + var(--space-xl));
}


/* ==============================================================================
   END OF FILE
   ============================================================================== */