/* ============================================
   AI PROFILE - MAIN STYLESHEET
   Sand/Gold/Brown Corporate Theme
   ============================================ */

/* ============================================
   CSS VARIABLES & THEME
   ============================================ */
:root {
  /* Primary Colors - Manager Palette */
  --primary-900: #062a1c;
  --primary-800: #0a3d28;
  --primary-700: #0f5a3c;
  /* Deep Green core */
  --primary-600: #197a53;
  --primary-500: #269c6d;

  /* Crisp Neutrals (Light UI) */
  --sand-100: #ffffff;
  --sand-200: #f8fafc;
  /* Background */
  --sand-300: #f1f5f9;
  /* Section Alt */
  --sand-400: #e2e8f0;
  --sand-500: #cbd5e1;
  --sand-600: #94a3b8;

  /* Corporate Gold Accents */
  --gold-400: #dcb865;
  --gold-500: #c6a24a;
  /* Strategic Gold core */
  --gold-600: #a8883b;
  --gold-700: #856a2c;

  /* Core Tones (Dark UI) */
  --white: #ffffff;
  --cream: #f8fafc;
  --text-dark: #0f172a;
  /* Slate 900 */
  --text-muted: #334155;
  /* Slate 700 */
  --text-light: #64748b;

  /* Functional */
  --success: #5d7a5d;
  --error: #9b5d5d;

  /* Typography - Plus Jakarta Sans for display, Inter for body */
  --font-display:
    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Layout */
  --max-width: 1200px;
  --header-height: 80px;

  /* Effects */
  --shadow-sm:
    0 1px 2px rgba(10, 23, 17, 0.04), 0 1px 4px rgba(10, 23, 17, 0.06);
  --shadow-md:
    0 2px 8px rgba(10, 23, 17, 0.06), 0 4px 16px rgba(10, 23, 17, 0.06);
  --shadow-lg:
    0 4px 12px rgba(10, 23, 17, 0.05), 0 12px 32px rgba(10, 23, 17, 0.08);
  --shadow-xl:
    0 8px 24px rgba(10, 23, 17, 0.08), 0 24px 56px rgba(10, 23, 17, 0.1);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --transition-fast: 150ms ease;
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   RESET & BASE
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dark);
  background-color: var(--sand-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--primary-800);
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
}

h3 {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
}

h4 {
  font-size: 1.125rem;
  font-weight: 600;
}

p {
  margin-bottom: var(--space-md);
}

.text-gold {
  color: var(--gold-600);
}

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

.text-center {
  text-align: center;
}

.lead {
  font-size: 1.25rem;
  color: var(--text-muted);
  line-height: 1.8;
}

/* ============================================
   LAYOUT
   ============================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.section {
  padding: var(--space-3xl) 0;
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-2xl);
}

.section-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-600);
  background: rgba(184, 134, 11, 0.08);
  padding: 0.375rem 1rem;
  border-radius: 100px;
  margin-bottom: var(--space-md);
}

.section-header h2 {
  margin-bottom: var(--space-sm);
}

.section-header p {
  color: var(--text-muted);
  font-size: 1.125rem;
}

.grid {
  display: grid;
  gap: var(--space-lg);
}

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

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

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .section {
    padding: var(--space-2xl) 0;
  }
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  cursor: pointer;
  border: 2px solid transparent;
}

.btn-primary {
  background: var(--gold-500);
  /* Bright Saudi Gold */
  color: var(--white);
}

.btn-primary:hover {
  background: var(--gold-600);
  /* Bronze for hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(217, 146, 1, 0.3);
  /* Gold shadow */
}

.btn-secondary {
  background: transparent;
  color: var(--primary-800);
  border-color: var(--sand-400);
}

.btn-secondary:hover {
  background: var(--sand-200);
  border-color: var(--sand-500);
}

.btn-outline-light {
  background: transparent;
  color: var(--sand-300);
  border-color: var(--sand-400);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-color: var(--sand-300);
}

.btn-lg {
  padding: 0.875rem 2rem;
  font-size: 1rem;
}

.btn-sm {
  padding: 0.4rem 1rem;
  font-size: 0.8125rem;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  /* White Navbar */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sand-300);
  /* Light Border */
  transition: all var(--transition-base);
}

.header.scrolled {
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
  /* Slate 900 subtle shadow */
}

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

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.logo-img {
  height: 70px;
  width: auto;
  display: block;
  object-fit: contain;
}

.logo-text-wrap {
  display: grid;
  grid-template-columns: 1fr;
  width: max-content;
  line-height: 1.2;
}

.logo-text {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--primary-700);
  /* Deep Green */
  letter-spacing: -0.02em;
}

.logo-tagline {
  grid-column: 1;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dark);
  /* Slate 900 */
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: var(--gold-500);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.25rem;
}

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

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

.nav-link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-dark);
  /* Slate 900 */
  padding: var(--space-sm) 0;
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold-500);
  transition: width var(--transition-base);
}

.nav-link:hover,
.nav-link.active {
  color: var(--gold-500);
  /* Strategic Gold active state */
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Navigation Dropdown */
.nav-dropdown {
  position: relative;
}

.dropdown-chevron {
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
  transition: transform var(--transition-base);
}

.nav-dropdown:hover .dropdown-chevron {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--sand-200);
  border-top: 2px solid var(--gold-500);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 12px 32px rgba(44, 36, 22, 0.08);
  padding: var(--space-sm) 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
  z-index: 1000;
  margin-top: 0;
  list-style: none;
}

.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.dropdown-link {
  display: block;
  padding: 10px var(--space-xl) 10px var(--space-lg);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: all var(--transition-base);
  white-space: nowrap;
  border-left: 2px solid transparent;
}

.dropdown-link:hover {
  color: var(--primary-800);
  background: var(--sand-50, #faf8f4);
  border-left-color: var(--gold-500);
}

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

/* Language Switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  background: var(--sand-200);
  /* Light background */
  border-radius: var(--radius-md);
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  /* Slate */
  transition: all var(--transition-fast);
}

.lang-btn.active {
  background: var(--white);
  color: var(--primary-700);
  /* Deep Green active */
  box-shadow: var(--shadow-sm);
}

.lang-btn:hover:not(.active) {
  color: var(--primary-700);
}

.lang-flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
}

/* Mobile Menu */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-sm);
  flex-shrink: 0;
}

.mobile-menu-toggle span {
  width: 24px;
  height: 2px;
  background: var(--text-dark);
  /* Dark Slate hamburger icon */
  transition: all var(--transition-base);
}

/* Mobile menu toggle animation */
.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Language Switcher - shown inside mobile menu */
.mobile-lang-switcher {
  display: none;
}

@media (max-width: 968px) {
  .header-inner {
    padding: 0;
  }

  .logo {
    flex-shrink: 0;
    max-width: 160px;
  }

  .logo-text {
    font-size: 1.1rem;
  }

  .logo-tagline {
    font-size: 0.6rem;
  }

  .nav {
    gap: var(--space-sm);
  }

  .nav-links {
    display: none;
  }

  .nav-actions {
    gap: var(--space-sm);
  }

  /* Hide language switcher in header on mobile */
  .nav-actions .lang-switcher {
    display: none;
  }

  /* Make Request Demo button smaller on mobile */
  .nav-actions .btn-sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .nav-links.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--sand-100);
    padding: var(--space-xl);
    border-bottom: 1px solid var(--sand-300);
    box-shadow: var(--shadow-lg);
    gap: var(--space-md);
    z-index: 999;
  }

  .nav-links.active .nav-link {
    font-size: 1.1rem;
    padding: var(--space-sm) 0;
  }

  /* Show language switcher inside mobile menu */
  .nav-links.active .mobile-lang-switcher {
    display: flex;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--sand-300);
  }
}

@media (max-width: 480px) {
  .logo {
    max-width: 130px;
  }

  .logo-img {
    height: 36px;
  }

  .logo-text {
    font-size: 1rem;
  }

  .logo-tagline {
    font-size: 0.55rem;
  }

  .nav-actions .btn-sm {
    padding: 0.35rem 0.6rem;
    font-size: 0.7rem;
  }
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  padding-top: calc(var(--header-height) + var(--space-4xl));
  padding-bottom: calc(var(--space-4xl) + 60px);
  background-color: var(--sand-100);
  background-image: linear-gradient(135deg,
      var(--white) 0%,
      rgba(15, 90, 60, 0.03) 100%);
  position: relative;
  overflow: hidden;
  color: var(--text-dark);
}

.hero::before {
  display: none;
  /* Removed heavy radial gradient */
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: center;
  position: relative;
}

.hero-content {
  max-width: 600px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: rgba(15, 90, 60, 0.05);
  /* Soft green tint */
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-800);
  margin-bottom: var(--space-lg);
  border: 1px solid rgba(15, 90, 60, 0.1);
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  background: var(--gold-500);
  border-radius: 50%;
}

.hero h1 {
  margin-bottom: var(--space-md);
  /* Tighter margin */
  color: var(--primary-900);
  line-height: 1.1;
  /* Tighter leading for corporate block impact */
  letter-spacing: -0.04em;
  /* Tighter tracking */
}

.hero h1 span {
  display: inline-block;
  color: var(--gold-500);
  /* Use the classic gold for best contrast/professionalism */
  text-shadow: none;
  line-height: 1.1;
  white-space: nowrap;
  /* Force "Decision-Grade Clarity" to stay on one line with "to" if they are wrapped together, or to not break internally */
}

/* Elegant serif connector for the word "to" */
.hero h1 .to-connector {
  display: inline-block;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 0.75em;
  font-weight: 400;
  font-style: italic;
  color: var(--sand-500);
  /* Muted gold/sand color */
  margin: 0 0.15em;
  vertical-align: baseline;
  /* Align naturally with text */
  position: relative;
  top: -0.05em;
  /* Minor optic adjustment */
  white-space: nowrap;
}

.hero-description {
  font-size: 1.25rem;
  color: var(--text-muted);
  /* Dark gray text */
  margin-bottom: var(--space-xl);
  line-height: 1.8;
}

.hero-cta {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.hero-visual {
  position: relative;
}

.hero-image-wrapper {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  contain: layout;
}

.hero-image {
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 5;
  object-fit: cover;
  display: block;
}

.demo-showcase {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.hero-float-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  box-shadow: 0 4px 20px rgba(44, 36, 22, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.8);
  will-change: transform;
  contain: layout;
}

.hero-float-card.card-1 {
  top: 15px;
  right: 15px;
}

.hero-float-card.card-2 {
  bottom: 60px;
  right: 15px;
}

.hero-float-card.card-3 {
  bottom: 15px;
  left: 15px;
}

.stat-card {
  text-align: center;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.stat-card-value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold-600);
  line-height: 1;
}

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

/* ============================================
   HERO COMPOSE — INFOGRAPHIC VISUAL
   ============================================ */
.hero-compose {
  position: relative;
  width: 110%;
  /* Extend slightly right */
  left: -5%;
  /* Center it back */
  min-height: 540px;
  background: rgba(255, 255, 255, 0.6);
  /* Semi-transparent white core */
  backdrop-filter: blur(12px);
  /* Soft, sophisticated blur */
  -webkit-backdrop-filter: blur(12px);
  border-radius: 32px;
  /* Large, soft corners */
  border: 1px solid rgba(255, 255, 255, 1);
  /* Crisp white edge */
  box-shadow: 0 20px 60px rgba(15, 90, 60, 0.08);
  /* Gentle, diffuse lift matching the brand */
  padding: var(--space-xl);
}

/* Connecting lines */
.compose-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* --- Floating avatar bubbles --- */
.compose-bubble {
  position: absolute;
  z-index: 3;
}

.compose-bubble img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2.5px solid var(--gold-500, #b98a2a);
  object-fit: cover;
}

.compose-bubble .bubble-icon {
  position: absolute;
  bottom: -2px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
}

.bubble-icon-phone {
  background: #2c7a2c;
}

.bubble-icon-mail {
  background: var(--gold-600, #8a6914);
}

.bubble-icon-star {
  background: var(--gold-500, #b98a2a);
}

.bubble-1 {
  top: 30px;
  left: 60px;
}

.bubble-2 {
  top: 20px;
  right: 80px;
}

.bubble-3 {
  bottom: 140px;
  left: 20px;
}

.bubble-4 {
  bottom: 130px;
  right: 30px;
}

/* --- AI Badge --- */
.compose-ai-badge {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: white;
  border: 1px solid var(--sand-300, #d4c9b8);
  border-radius: 100px;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary-800, #2c2318);
  box-shadow: 0 2px 12px rgba(44, 36, 22, 0.08);
  white-space: nowrap;
}

.ai-badge-icon {
  color: var(--gold-500, #b98a2a);
  font-size: 1rem;
}

/* --- Central Avatar --- */
.compose-avatar {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 140px;
  /* Larger container for the glass background */
  height: 140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  /* Glass base */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  /* Soft edge */
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.15),
    inset 0 0 20px rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.compose-avatar img {
  width: 110px;
  /* Actual avatar size inside the glass */
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold-500);
  /* Inner gold ring */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.compose-name {
  position: absolute;
  top: 235px;
  /* Shifted down to clear the 140px glass frame */
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  text-align: center;
  white-space: nowrap;
}

.compose-name strong {
  display: block;
  font-size: 1.0625rem;
  color: var(--primary-800, #2c2318);
  margin-bottom: 4px;
}

.compose-role-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 12px;
  background: var(--gold-500);
  /* Bright Gold */
  color: white;
  border-radius: 100px;
}

/* --- Floating UI Cards --- */
.compose-card {
  position: absolute;
  z-index: 2;
  background: white;
  border: 1px solid var(--sand-200, #e8dfd2);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 4px 20px rgba(44, 36, 22, 0.08);
  width: 210px;
}

.compose-card h5 {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--primary-800, #2c2318);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--sand-200, #e8dfd2);
}

/* --- Bottom Cards --- */
.compose-cards {
  position: absolute;
  bottom: 30px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  z-index: 5;
}

.compose-score-box {
  position: absolute;
  top: 90px;
  right: -20px;
  background: var(--primary-800);
  /* Deep Green */
  color: white;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(26, 63, 34, 0.2);
  text-align: center;
  z-index: 6;
}

.compose-score-box span {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.9;
  margin-bottom: 2px;
}

.compose-score-box strong {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--gold-500);
  /* Bright Gold Text inside Deep Green Box */
  line-height: 1;
}

.card-left {
  top: 260px;
  left: 12px;
}

.card-right {
  top: 240px;
  right: 12px;
  text-align: center;
}

/* Assessment rows */
.compose-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.row-label {
  font-size: 0.6875rem;
  color: var(--text-muted, #7a7068);
  width: 64px;
  flex-shrink: 0;
}

.row-bar {
  flex: 1;
  height: 5px;
  background: var(--sand-100, #f5f0e8);
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  background: var(--gold-500);
  /* Now points to the bright gold: #D99201 */
  border-radius: 3px;
}

.row-val {
  font-size: 0.6875rem;
  font-weight: 700;
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

.row-val.gold {
  color: var(--gold-600);
  /* Bronze */
}

/* Match circle */
.compose-match-circle {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 6px;
}

.compose-match-circle svg {
  width: 100%;
  height: 100%;
}

.match-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary-500);
  /* Olive Green for the circle text */
}

.match-val small {
  font-size: 0.75rem;
  font-weight: 600;
}

.compose-match-label {
  font-size: 0.6875rem;
  color: var(--text-muted, #7a7068);
  margin-bottom: 8px;
}

.compose-match-tags {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.match-tag {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
}

.tag-green {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.tag-gold {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* --- Sentiment Badge --- */
.compose-sentiment {
  position: absolute;
  top: 100px;
  right: 24px;
  z-index: 5;
  background: var(--primary-800, #2c2318);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(44, 36, 22, 0.15);
}

.sentiment-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.sentiment-val {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gold-400, #d4a843);
}

.sentiment-val small {
  font-size: 0.875rem;
}

/* --- Bottom Stats Row --- */
.compose-stats {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 24px;
  background: white;
  border: 1px solid var(--sand-200, #e8dfd2);
  border-radius: 14px;
  padding: 14px 28px;
  box-shadow: 0 2px 12px rgba(44, 36, 22, 0.06);
}

.compose-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
}

.compose-stat svg {
  width: 48px;
  height: 48px;
}

.stat-num {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--primary-800, #2c2318);
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
}

.stat-lbl {
  font-size: 0.5625rem;
  color: var(--text-muted, #7a7068);
  text-align: center;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

@media (max-width: 968px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-cta {
    justify-content: center;
  }

  .hero-visual {
    display: none;
  }
}

/* ============================================
   CHALLENGE SECTION
   ============================================ */
.challenge-section {
  background: rgba(15, 90, 60, 0.04);
  /* Very soft corporate green tint */
}

.challenge-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.challenge-list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-2xl) var(--space-xl);
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0, 0, 0, 0.04);
  /* Extremely soft border */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  /* Soft corporate lift */
  transition: all var(--transition-base);
}

.challenge-list-item:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
  /* Deeper shadow on hover */
  transform: translateY(-4px);
  border-color: rgba(0, 0, 0, 0.08);
}

.challenge-list-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-500);
  /* Standalone delicate gold icon */
  transform: translateY(4px);
  /* Align optically with title text */
}

.challenge-list-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
  /* Keeping stroke elegant and thin */
}

.challenge-list-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.challenge-list-content strong {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary-800);
}

.challenge-list-content span {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.6;
}

@media (max-width: 576px) {
  .challenge-list {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   FEATURES SECTION
   ============================================ */
.features {
  background: var(--white);
}

.feature-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  transition: all var(--transition-base);
  border: 1.5px solid #d4c9b8;
  box-shadow: 0 2px 12px rgba(44, 36, 22, 0.07);
  display: flex;
  flex-direction: column;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(44, 36, 22, 0.11);
  border-color: var(--gold-400, #c9a84c);
}

.feature-icon {
  width: 52px;
  height: 52px;
  background: color-mix(in srgb, var(--gold-500) 10%, white);
  border: 1px solid color-mix(in srgb, var(--gold-500) 20%, white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
  color: var(--gold-600);
}

.feature-icon svg {
  width: 24px;
  height: 24px;
}

.feature-card h4 {
  margin-bottom: var(--space-sm);
  color: var(--primary-800);
  font-size: 1.125rem;
  font-weight: 600;
}

.feature-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: var(--space-md);
  flex: 1;
}

.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gold-600);
  text-decoration: none;
  transition: all var(--transition-base);
  margin-top: auto;
}

.feature-link:hover {
  color: var(--gold-700, #92700c);
  gap: 0.5rem;
}

/* ============================================
   PIPELINE SECTION
   ============================================ */
.pipeline {
  background: var(--sand-100);
}

.pipeline-visual {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  margin-bottom: var(--space-2xl);
  justify-content: center;
}

.pipeline-phase {
  flex: 1 1 140px;
  min-width: 140px;
  max-width: 180px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  position: relative;
  transition: all var(--transition-base);
  border: 2px solid var(--sand-300);
}

.pipeline-phase:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-500);
}

.pipeline-phase::after {
  content: "→";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sand-500);
  font-size: 1rem;
  z-index: 1;
}

.pipeline-phase:last-child::after {
  display: none;
}

@media (max-width: 968px) {
  .pipeline-visual {
    gap: var(--space-sm);
  }

  .pipeline-phase {
    flex: 1 1 calc(33.333% - var(--space-md));
    min-width: 120px;
    max-width: none;
    padding: var(--space-md);
  }

  .pipeline-phase::after {
    display: none;
  }
}

@media (max-width: 576px) {
  .pipeline-phase {
    flex: 1 1 calc(50% - var(--space-sm));
    min-width: 100px;
  }
}

.phase-number {
  width: 40px;
  height: 40px;
  background: var(--sand-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--white);
}

.pipeline-phase:nth-child(odd) .phase-number {
  background: var(--primary-700);
}

.pipeline-phase h4 {
  font-size: 1rem;
  margin-bottom: var(--space-xs);
}

.pipeline-phase p {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pipeline-governance {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.pipeline-governance-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  border: 1px solid var(--sand-300);
  border-radius: 100px;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary-700);
  transition: all var(--transition-base);
}

.pipeline-governance-badge:hover {
  border-color: var(--gold-500);
  box-shadow: var(--shadow-sm);
}

.pipeline-governance-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--gold-500);
  border-radius: 50%;
  flex-shrink: 0;
}

.pipeline-showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-3xl);
  align-items: center;
  margin-top: var(--space-3xl);
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-lg);
}

.pipeline-showcase-content h3 {
  margin-bottom: var(--space-md);
}

.pipeline-showcase-content .lead {
  margin-bottom: var(--space-xl);
}

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

.pipeline-features li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 1rem;
  color: var(--text-muted);
}

.pipeline-features li::before {
  content: "✓";
  color: var(--gold-600);
  font-weight: 700;
  flex-shrink: 0;
}

.pipeline-showcase-visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.pipeline-showcase-img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 968px) {
  .pipeline-showcase-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .pipeline-features {
    align-items: center;
  }
}

/* ============================================
   AI + HUMAN COLLABORATION
   ============================================ */
.collab-section {
  background: var(--sand-100);
}

.collab-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  max-width: 900px;
  margin: 0 auto;
  align-items: start;
}

/* Accordion card */
.collab-accordion {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 4px solid var(--sand-300);
  box-shadow: 0 4px 16px rgba(44, 36, 22, 0.08);
  transition: all var(--transition-base);
  overflow: hidden;
}

.collab-accordion:hover {
  border-color: var(--sand-300);
  box-shadow: var(--shadow-sm);
}

.collab-accordion[open] {
  border-color: var(--sand-300);
  box-shadow: var(--shadow-md);
}

.collab-accordion-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.collab-accordion-header::-webkit-details-marker {
  display: none;
}

.collab-accordion-header::marker {
  display: none;
  content: "";
}

.collab-card-icon {
  width: 40px;
  height: 40px;
  background: var(--sand-200);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-600);
  flex-shrink: 0;
}

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

.collab-accordion-header h4 {
  font-size: 1rem;
  margin: 0;
  color: var(--primary-800);
  flex: 1;
}

.collab-chevron {
  flex-shrink: 0;
  color: var(--text-light);
  transition: transform var(--transition-base);
}

.collab-accordion[open] .collab-chevron {
  transform: rotate(180deg);
  color: var(--gold-600);
}

.collab-accordion-body {
  padding: 0 var(--space-xl) var(--space-xl);
  border-top: 1px solid var(--sand-200);
  margin: 0 var(--space-md);
  padding-top: var(--space-lg);
  min-height: 220px;
}

.collab-role-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-sm);
}

.collab-role-label {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-700, #92700c);
  background: rgba(184, 134, 11, 0.08);
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  margin-bottom: 2px;
}

.collab-role-label.human {
  color: var(--primary-700);
  background: rgba(44, 36, 22, 0.06);
}

.collab-role-text {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.collab-why {
  font-size: 0.8125rem;
  color: var(--gold-700);
  font-weight: 500;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--sand-200);
  margin-top: auto;
}

@media (max-width: 576px) {
  .collab-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   VOICE INTERVIEW SECTION
   ============================================ */
.voice-section {
  background: var(--white);
}

.voice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.voice-content h2 {
  margin-bottom: var(--space-sm);
}

.voice-content .lead {
  margin-bottom: var(--space-lg);
}

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

.voice-feature {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding: var(--space-sm) 0;
}

.voice-feature-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--sand-200);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-600);
}

.voice-feature-icon svg {
  width: 18px;
  height: 18px;
}

.voice-feature h4 {
  font-size: 0.9375rem;
  margin-bottom: 0.125rem;
  color: var(--primary-800);
}

.voice-feature p {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0;
  line-height: 1.5;
}

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

.btn-play-demo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.25rem 0.5rem 0.5rem;
  border: none;
  border-radius: 100px;
  background: transparent;
  color: var(--primary-900);
  /* Dark corporate green text */
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
  transition: all var(--transition-base);
  cursor: pointer;
}

.btn-play-demo:hover {
  background: rgba(15, 90, 60, 0.04);
  /* Very subtle hover tint */
  transform: translateY(-2px);
  box-shadow: none;
}

.btn-play-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold-500);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex-shrink: 0;
}

.btn-play-icon svg {
  margin-left: 2px;
}

.voice-visual {
  position: relative;
}

.demo-frame {
  background: linear-gradient(145deg, var(--sand-200) 0%, var(--sand-300) 100%);
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

.voice-demo-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

.voice-demo {
  background: var(--sand-100);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
}

/* ==========================================
   ABOUT PAGE — STORY SECTION (Enterprise)
   ========================================== */

/* Section Header with Gold Accent */
.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section-header::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--gold-500);
  margin: 0 auto var(--space-lg);
  border-radius: 2px;
}

.section-header h2 {
  font-size: 2.25rem;
  color: var(--primary-800);
  margin-bottom: var(--space-sm);
}

.section-header p {
  color: var(--text-muted);
  font-size: 1.0625rem;
  max-width: 520px;
  margin: 0 auto;
}

/* Story Card: Logo + Blockquote + Text */
.story-card {
  background: var(--white);
  border: 1px solid var(--sand-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 340px 1fr;
  box-shadow: 0 4px 20px rgba(44, 36, 22, 0.06);
  margin-bottom: var(--space-3xl);
}

.story-card-visual {
  background: var(--sand-100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl);
}

.story-card-logo {
  width: 260px;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(44, 36, 22, 0.1));
}

.story-card-body {
  padding: var(--space-3xl) var(--space-4xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-quote {
  font-size: 1.1875rem;
  font-style: italic;
  line-height: 1.8;
  color: var(--text-body);
  border-left: 3px solid var(--gold-500);
  padding-left: var(--space-xl);
  margin: 0 0 var(--space-2xl) 0;
}

.story-body {
  color: var(--text-light, #9a9082);
  font-size: 0.9375rem;
  line-height: 1.8;
  margin: 0;
}

/* Stats Row */
.story-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--sand-200);
  border-bottom: 1px solid var(--sand-200);
  padding: var(--space-2xl) 0;
}

.story-stat {
  text-align: center;
  padding: var(--space-md) var(--space-lg);
  border-right: 1px solid var(--sand-200);
}

.story-stat:last-child {
  border-right: none;
}

.story-stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gold-600);
  line-height: 1.1;
  margin-bottom: var(--space-xs);
}

.story-stat-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* Mission Banner */
.mission-banner {
  background: var(--primary-800);
  padding: var(--space-3xl) 0;
}

.mission-banner-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  max-width: 800px;
  margin: 0 auto;
}

.mission-banner-icon {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-500);
}

.mission-banner-content h3 {
  color: var(--white);
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
}

.mission-banner-content p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin: 0;
}

/* ==========================================
   EXPERTISE LIST (Card-free)
   ========================================== */
.expertise-list {
  max-width: 800px;
  margin: 0 auto;
}

.expertise-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--sand-200);
}

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

.expertise-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-600);
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--sand-200);
}

.expertise-content h4 {
  color: var(--primary-800);
  font-size: 1.125rem;
  margin-bottom: var(--space-xs);
}

.expertise-content p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0;
}

/* ==========================================
   VALUES GRID (Card-free, accent borders)
   ========================================== */
.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl) var(--space-4xl);
  max-width: 800px;
  margin: 0 auto;
}

.value-item {
  text-align: center;
  border-top: 2px solid var(--gold-500);
  padding-top: var(--space-lg);
}

.value-icon {
  color: var(--gold-600);
  margin-bottom: var(--space-sm);
}

.value-item h4 {
  color: var(--primary-800);
  font-size: 1.0625rem;
  margin-bottom: var(--space-xs);
}

.value-item p {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 0;
}

/* ==========================================
   CTA SECTION
   ========================================== */
.cta-section {
  background: var(--primary-800, #2c2318);
  border-top: none;
  border-bottom: none;
  padding: var(--space-4xl) 0;
  text-align: center;
}

.cta-content h2 {
  font-size: 2rem;
  color: var(--white);
  margin-bottom: var(--space-sm);
}

.cta-content p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.0625rem;
  margin-bottom: var(--space-2xl);
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
}

/* Responsive */
@media (max-width: 968px) {
  .story-card {
    grid-template-columns: 1fr;
  }

  .story-card-visual {
    padding: var(--space-2xl);
  }

  .story-card-logo {
    width: 180px;
  }

  .story-card-body {
    padding: var(--space-2xl);
  }

  .story-columns {
    grid-template-columns: 1fr;
  }

  .story-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-stat {
    border-bottom: 1px solid var(--sand-200);
  }

  .story-stat:nth-child(2) {
    border-right: none;
  }

  .story-stat:nth-child(3),
  .story-stat:nth-child(4) {
    border-bottom: none;
  }

  .mission-banner-inner {
    flex-direction: column;
    text-align: center;
  }

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

.voice-avatar {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);
  border-radius: 50%;
  margin: 0 auto var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(184, 134, 11, 0.4);
  }

  50% {
    box-shadow: 0 0 0 20px rgba(184, 134, 11, 0);
  }
}

.voice-transcript {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: left;
  margin-top: var(--space-lg);
}

.transcript-line {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--sand-200);
}

.transcript-line:last-child {
  border-bottom: none;
}

.transcript-speaker {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.transcript-speaker.ai {
  color: var(--gold-600);
}

.transcript-speaker.candidate {
  color: var(--primary-700);
}

.transcript-text {
  font-size: 0.875rem;
  color: var(--text-dark);
}

@media (max-width: 968px) {
  .voice-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   STATS SECTION
   ============================================ */
.stats-section {
  background: var(--primary-800);
  padding: var(--space-3xl) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--gold-500);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.stat-label {
  font-size: 1rem;
  color: var(--sand-400);
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials {
  background: var(--sand-100);
}

.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--sand-200);
}

.testimonial-quote {
  font-size: 1.125rem;
  font-style: italic;
  color: var(--text-dark);
  margin-bottom: var(--space-xl);
  position: relative;
  padding-left: var(--space-xl);
}

.testimonial-quote::before {
  content: '"';
  position: absolute;
  left: 0;
  top: -10px;
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--gold-500);
  line-height: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.testimonial-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--sand-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--white);
}

.testimonial-info h5 {
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: 2px;
}

.testimonial-info p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
  background: var(--primary-800, #2c2318);
  border-top: none;
  border-bottom: none;
  padding: var(--space-4xl) 0;
  text-align: center;
  position: relative;
}

.cta-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--gold-500);
  border-radius: 100px;
}

.cta-content {
  max-width: 600px;
  margin: 0 auto;
}

.cta-content h2 {
  color: var(--white);
  margin-bottom: var(--space-sm);
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.cta-content p {
  color: var(--sand-300);
  font-size: 1.0625rem;
  margin-bottom: var(--space-xl);
  line-height: 1.7;
}

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

.cta-buttons .btn-outline-light {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

.cta-buttons .btn-outline-light:hover {
  background: var(--white);
  color: var(--primary-800);
  border-color: var(--gold-500);
  box-shadow: var(--shadow-sm);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--primary-900);
  padding: var(--space-4xl) 0 var(--space-xl);
  color: var(--sand-400);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}

.footer-brand {
  max-width: 300px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.footer-brand-img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

.footer-logo-icon {
  width: 40px;
  height: 40px;
  background: var(--gold-500);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-900);
}

.footer-logo-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.2;
}

.footer-logo-text {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--sand-100);
}

.footer-logo-tagline {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sand-100);
}

.footer-brand p {
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 0;
}

.footer-column h5 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  color: var(--sand-100);
  margin-bottom: var(--space-lg);
  display: inline-block;
  border-bottom: 2px solid var(--sand-100);
  padding-bottom: 4px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer-link {
  font-size: 0.9375rem;
  color: var(--sand-300);
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--gold-500);
}

.footer-bottom {
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-bottom p {
  margin-bottom: 0;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.footer-legal a {
  color: var(--sand-400);
  transition: color var(--transition-fast);
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--gold-500);
}

.footer-legal .separator {
  color: rgba(255, 255, 255, 0.2);
}

.footer-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}

.footer-settings svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform var(--transition-fast);
}

.footer-settings:hover svg {
  transform: rotate(45deg);
}

.footer-social {
  display: flex;
  gap: var(--space-md);
}

.social-link {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.social-link:hover {
  background: var(--gold-600);
}

@media (max-width: 968px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: span 2;
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-column: span 1;
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }
}

/* ============================================
   PAGE-SPECIFIC STYLES
   ============================================ */

/* About Page */
.about-hero {
  padding-top: calc(var(--header-height) + var(--space-4xl));
  padding-bottom: var(--space-3xl);
  background: linear-gradient(135deg,
      var(--primary-800) 0%,
      var(--primary-900) 100%);
  color: var(--white);
  text-align: center;
}

.about-hero h1 {
  color: var(--white);
  margin-bottom: var(--space-md);
}

.about-hero p {
  color: var(--sand-400);
  font-size: 1.25rem;
  max-width: 600px;
  margin: 0 auto;
}

.team-section {
  background: var(--white);
}

.team-card {
  background: var(--sand-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.team-image {
  height: 250px;
  background: var(--sand-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: var(--white);
}

.team-info {
  padding: var(--space-lg);
  text-align: center;
}

.team-info h4 {
  margin-bottom: var(--space-xs);
}

.team-info .role {
  color: var(--gold-600);
  font-weight: 500;
  font-size: 0.9375rem;
}

.team-info p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: var(--space-sm);
  margin-bottom: 0;
}

/* Solution Page */
.solution-hero {
  padding-top: calc(var(--header-height) + var(--space-4xl));
  padding-bottom: var(--space-4xl);
  background: linear-gradient(135deg,
      var(--primary-900, #1a1008) 0%,
      var(--primary-800, #2c2318) 50%,
      #3d2f1e 100%);
  position: relative;
  overflow: hidden;
}

.solution-hero::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse,
      rgba(193, 155, 89, 0.08) 0%,
      transparent 70%);
  pointer-events: none;
}

.solution-hero::after {
  content: "";
  position: absolute;
  bottom: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse,
      rgba(193, 155, 89, 0.06) 0%,
      transparent 70%);
  pointer-events: none;
}

.solution-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.solution-hero-content {
  text-align: left;
}

.solution-hero-content h1 {
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  line-height: 1.15;
  color: #fff;
  font-weight: 700;
}

.solution-hero-content .lead {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0;
  line-height: 1.7;
}

.solution-hero-visual {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.solution-hero-img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 968px) {
  .solution-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .solution-hero-content {
    text-align: center;
  }

  .solution-hero-visual {
    order: -1;
  }
}

.solution-detail {
  background: var(--white);
}

/* Pipeline Layout: sidebar + content */
.pipeline-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

/* Sticky Sidebar Navigation */
.pipeline-nav {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg) 0;
}

.pipeline-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all var(--transition-base);
  border-left: 2px solid transparent;
}

.pipeline-nav-link:hover {
  color: var(--primary-800);
  background: var(--sand-100);
}

.pipeline-nav-link.active {
  color: var(--primary-800);
  font-weight: 600;
  background: var(--sand-100);
  border-left-color: var(--gold-500);
}

.pipeline-nav-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sand-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.pipeline-nav-link.active .pipeline-nav-num {
  background: var(--gold-500);
  color: var(--white);
}

/* Phase Badge */
.phase-badge {
  display: inline-block;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-600);
  padding: var(--space-xs) var(--space-sm);
  background: rgba(181, 148, 72, 0.08);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}

/* Phase 0 SVG visual */
.solution-visual-icon {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-500);
}

/* Pipeline content area */
.pipeline-phases {
  min-width: 0;
}

@media (max-width: 968px) {
  .pipeline-layout {
    grid-template-columns: 1fr;
  }

  .pipeline-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: var(--space-xs);
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--sand-200);
    -webkit-overflow-scrolling: touch;
  }

  .pipeline-nav-link {
    white-space: nowrap;
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.8125rem;
  }

  .pipeline-nav-link.active {
    border-left-color: transparent;
    border-bottom-color: var(--gold-500);
  }
}

.solution-item {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-3xl);
  align-items: center;
  padding: var(--space-3xl) 0;
  border-bottom: 1px solid var(--sand-200);
}

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

.solution-item:nth-child(even) {
  direction: rtl;
}

.solution-item:nth-child(even)>* {
  direction: ltr;
}

.solution-content h3 {
  margin-bottom: var(--space-md);
}

.solution-content p {
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

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

.solution-list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.solution-list-item::before {
  content: "✓";
  color: var(--gold-600);
  font-weight: 700;
}

.solution-visual {
  background: var(--sand-100);
  border-radius: var(--radius-xl);
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}

.solution-visual.solution-visual-img {
  height: auto;
  min-height: 280px;
  padding: 0;
  overflow: hidden;
}

.solution-visual-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
  object-fit: cover;
}

/* Use Cases & Deployment (Solution Page) */
.section-alt {
  background: var(--sand-200);
}

.grid-regional {
  max-width: 900px;
  margin: 0 auto;
}

.grid-use-cases {
  max-width: 900px;
  margin: 0 auto;
}

.deployment-grid {
  max-width: 1000px;
  margin: 0 auto;
}

.deployment-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  border: 1px solid var(--sand-300);
  box-shadow: 0 2px 8px rgba(44, 36, 22, 0.08);
  transition: all var(--transition-base);
}

.deployment-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(44, 36, 22, 0.12);
  border-color: var(--gold-500);
}

.deployment-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-md);
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}

.deployment-icon svg {
  stroke: var(--white);
}

.deployment-card h4 {
  margin-bottom: var(--space-sm);
}

.deployment-card p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-bottom: 0;
}

@media (max-width: 968px) {

  .solution-item,
  .solution-item:nth-child(even) {
    grid-template-columns: 1fr;
    direction: ltr;
  }
}

/* Contact Page */
.contact-hero {
  padding-top: calc(var(--header-height) + var(--space-4xl));
  padding-bottom: var(--space-3xl);
  background: var(--sand-200);
  text-align: center;
}

.contact-section {
  background: var(--white);
}

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

.contact-info {
  background: var(--primary-800);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  color: var(--sand-300);
}

.contact-info h3 {
  color: var(--white);
  margin-bottom: var(--space-lg);
}

.contact-info p {
  margin-bottom: var(--space-xl);
}

.contact-item {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.contact-item-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-item h5 {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sand-400);
  margin-bottom: var(--space-xs);
}

.contact-item p {
  font-size: 1rem;
  color: var(--white);
  margin-bottom: 0;
}

.contact-form {
  background: var(--sand-100);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
}

.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary-800);
  margin-bottom: var(--space-sm);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: var(--space-md);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-dark);
  background: var(--white);
  border: 1px solid var(--sand-300);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--gold-600);
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.1);
}

.form-textarea {
  min-height: 150px;
  resize: vertical;
}

@media (max-width: 968px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  /* Fix contact form grid on mobile */
  .contact-form .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   UTILITIES
   ============================================ */
.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;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: var(--space-sm);
}

.mb-2 {
  margin-bottom: var(--space-md);
}

.mb-3 {
  margin-bottom: var(--space-lg);
}

.mb-4 {
  margin-bottom: var(--space-xl);
}

.mb-5 {
  margin-bottom: var(--space-2xl);
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: var(--space-sm);
}

.mt-2 {
  margin-top: var(--space-md);
}

.mt-3 {
  margin-top: var(--space-lg);
}

.mt-4 {
  margin-top: var(--space-xl);
}

.mt-5 {
  margin-top: var(--space-2xl);
}

/* ============================================
   ADDITIONAL MOBILE FIXES
   ============================================ */

/* Reduce padding on very small screens */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-md);
  }

  .section {
    padding: var(--space-xl) 0;
  }

  /* Hero section mobile fixes */
  .hero {
    padding-top: calc(var(--header-height) + var(--space-xl));
    padding-bottom: var(--space-xl);
  }

  .hero h1 {
    font-size: 1.75rem;
  }

  .hero-description {
    font-size: 1rem;
  }

  .hero-cta {
    flex-direction: column;
    align-items: center;
  }

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

  /* Buttons on mobile */
  .btn-lg {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }

  /* Pipeline governance text */
  .pipeline-governance {
    padding: var(--space-lg);
    font-size: 0.875rem;
    line-height: 1.8;
  }

  .pipeline-governance strong {
    display: block;
    margin-bottom: var(--space-xs);
  }

  /* Stats section */
  .stats-grid {
    gap: var(--space-lg);
  }

  .stat-value {
    font-size: 2rem;
  }

  /* CTA section */
  .cta-section {
    padding: var(--space-2xl) 0;
  }

  .cta-content h2 {
    font-size: 1.5rem;
  }

  .cta-content p {
    font-size: 1rem;
  }

  .cta-buttons {
    flex-direction: column;
  }

  .cta-buttons .btn {
    width: 100%;
  }

  /* About hero */
  .about-hero,
  .contact-hero {
    padding-top: calc(var(--header-height) + var(--space-xl));
    padding-bottom: var(--space-xl);
  }

  /* Solution hero */
  .solution-hero {
    padding-top: calc(var(--header-height) + var(--space-xl));
    padding-bottom: var(--space-xl);
  }

  .solution-hero h1 {
    font-size: 1.75rem;
  }

  /* Section headers */
  .section-header h2 {
    font-size: 1.5rem;
  }

  .section-header p {
    font-size: 1rem;
  }

  /* Feature cards */
  .feature-card {
    padding: var(--space-lg);
  }

  /* Footer */
  .footer {
    padding: var(--space-2xl) 0 var(--space-lg);
  }

  .footer-grid {
    gap: var(--space-xl);
  }
}

/* ============================================
   AI INTERVIEW DEMO MODAL
   ============================================ */
.demo-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(44, 36, 22, 0.6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.demo-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.demo-modal {
  background: var(--white);
  border-radius: var(--radius-xl);
  width: 600px;
  max-width: 92vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.demo-modal-overlay.active .demo-modal {
  transform: translateY(0);
}

/* ============================================
   LEGAL PAGES
   ============================================ */
.legal-hero {
  background-color: var(--primary-900);
  color: #fff;
  padding: 180px 0 60px;
  text-align: center;
}

.legal-hero h1 {
  font-size: clamp(2rem, 3vw, 2.8rem);
  margin-bottom: 12px;
  color: #fff;
  font-weight: 700;
}

.legal-hero .last-updated {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 40px;
}

.legal-hero .back-link {
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.legal-hero .back-link:hover {
  color: var(--gold-500);
}

.legal-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 20px 100px;
  background: var(--white);
}

.legal-content p,
.legal-content li {
  line-height: 1.8;
  color: var(--text-color);
  margin-bottom: 16px;
  font-size: 1rem;
}

.legal-content ul {
  padding-left: 20px;
  margin-bottom: 24px;
}

.legal-content h2 {
  font-size: 1.4rem;
  color: var(--primary-900);
  margin: 48px 0 24px;
  padding-left: 16px;
  border-left: 4px solid var(--primary-900);
  line-height: 1.3;
  font-weight: 700;
}

.demo-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  z-index: 1;
  transition: color var(--transition-base);
}

.demo-modal-close:hover {
  color: var(--primary-800);
}

.demo-modal-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--sand-200);
  position: relative;
}

.demo-modal-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex-shrink: 0;
}

.demo-modal-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-800);
  margin-bottom: 2px;
}

.demo-modal-status {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.demo-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.demo-waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding-right: var(--space-xl);
}

.demo-waveform span {
  width: 3px;
  height: 12px;
  background: var(--sand-300);
  border-radius: 2px;
  transition: background 0.3s;
}

.demo-waveform.playing span {
  background: var(--gold-500);
  animation: wave-bar 0.8s ease-in-out infinite;
}

.demo-waveform.playing span:nth-child(1) {
  animation-delay: 0s;
}

.demo-waveform.playing span:nth-child(2) {
  animation-delay: 0.15s;
}

.demo-waveform.playing span:nth-child(3) {
  animation-delay: 0.3s;
}

.demo-waveform.playing span:nth-child(4) {
  animation-delay: 0.45s;
}

.demo-waveform.playing span:nth-child(5) {
  animation-delay: 0.6s;
}

@keyframes wave-bar {

  0%,
  100% {
    height: 12px;
  }

  50% {
    height: 24px;
  }
}

.demo-modal-transcript {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: 320px;
  max-height: 50vh;
}

.demo-msg {
  max-width: 88%;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  animation: msg-in 0.3s ease;
}

@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.demo-msg-ai {
  background: var(--sand-100);
  border: 1px solid var(--sand-200);
  align-self: flex-start;
}

.demo-msg-candidate {
  background: var(--white);
  border: 1px solid var(--sand-200);
  align-self: flex-end;
}

.demo-msg-label {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.demo-msg-ai .demo-msg-label {
  color: var(--gold-600);
}

.demo-msg-candidate .demo-msg-label {
  color: var(--primary-700);
}

.demo-msg p {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0;
}

.demo-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-xl);
  border-top: 1px solid var(--sand-200);
  background: var(--sand-50, #fdfcfa);
}

.demo-modal-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.demo-modal-time {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary-800);
  font-variant-numeric: tabular-nums;
}

.btn-end-call {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1.25rem;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-end-call:hover {
  background: #b91c1c;
}

/* ============================================
   CONTACT PAGE — REDESIGN
   ============================================ */

/* --- Hero --- */
.contact-hero {
  background: var(--primary-800, #2c2318);
  padding: var(--space-4xl) 0 var(--space-3xl);
  text-align: center;
}

.contact-hero-inner {
  max-width: 640px;
  margin: 0 auto;
}

.contact-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--white);
  margin-bottom: var(--space-md);
  line-height: 1.15;
}

.contact-hero .lead {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.125rem;
  line-height: 1.7;
  margin-bottom: var(--space-xl);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.contact-hero .section-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-400, #d4a843);
  margin-bottom: var(--space-md);
}

/* --- Contact Meta Row --- */
.contact-meta-row {
  display: flex;
  justify-content: center;
  gap: var(--space-3xl);
  margin-bottom: var(--space-4xl);
  padding: var(--space-xl) var(--space-2xl);
  background: var(--white);
  border: 1px solid var(--sand-200);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}

.contact-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.contact-meta-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-600);
  background: color-mix(in srgb, var(--gold-500) 10%, white);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.contact-meta-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.contact-meta-value {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--primary-800);
  text-decoration: none;
}

.contact-meta-value:hover {
  color: var(--gold-600);
}

/* --- Offices Section --- */
.offices-section {
  margin-top: var(--space-2xl);
}

.offices-section .section-header p {
  max-width: 700px;
}

.offices-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.office-card {
  background: var(--white);
  border: 1.5px solid #d4c9b8;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.office-card:hover {
  border-color: var(--gold-500);
  box-shadow: 0 4px 20px rgba(44, 36, 22, 0.1);
  transform: translateY(-2px);
}

.office-card-flag {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
  line-height: 1;
}

.office-card h4 {
  font-size: 1.25rem;
  color: var(--primary-800);
  margin-bottom: 2px;
}

.office-country {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gold-600);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.office-address {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

.office-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  background: color-mix(in srgb, var(--gold-500) 12%, white);
  color: var(--gold-700, #7a5c0a);
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--gold-500) 30%, white);
  margin-top: auto;
  align-self: flex-start;
}

/* --- Map --- */
#offices-map {
  height: 460px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--sand-200);
}

/* Custom map pin */
.map-pin {
  width: 40px;
  height: 40px;
  background: var(--primary-800, #2c2318);
  border: 2.5px solid var(--gold-500, #b98a2a);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-pin span {
  transform: rotate(45deg);
  font-size: 1.1rem;
  line-height: 1;
}

/* Map popup */
.map-popup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 2px;
}

.map-popup strong {
  font-size: 1rem;
  color: var(--primary-800);
  font-weight: 700;
}

.map-popup span {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.map-popup em {
  font-size: 0.75rem;
  font-weight: 600;
  font-style: normal;
  color: var(--gold-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-meta-row {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .offices-grid {
    grid-template-columns: 1fr;
  }

  #offices-map {
    height: 300px;
  }
}

/* ============================================
   VOICE INTERVIEW — INFOGRAPHIC COMPOSE
   ============================================ */
.voice-compose {
  position: relative;
  width: 100%;
  min-height: 420px;
  background: linear-gradient(135deg,
      rgba(185, 138, 42, 0.04) 0%,
      rgba(44, 35, 24, 0.03) 100%);
  border-radius: 24px;
  border: 1px solid rgba(185, 138, 42, 0.12);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 24px;
}

/* Mic icon */
.vc-mic {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  background: var(--primary-800, #2c2318);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400, #d4a843);
  z-index: 3;
}

.vc-wave {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-500, #b98a2a);
  opacity: 0;
  animation: vc-pulse 2s ease-out infinite;
}

.vc-wave.wave-2 {
  animation-delay: 0.8s;
}

@keyframes vc-pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* Speaking badge */
.vc-speaking {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  background: white;
  border: 1px solid var(--sand-200, #e8dfd2);
  border-radius: 100px;
  padding: 5px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-800, #2c2318);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(44, 36, 22, 0.06);
}

.vc-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: vc-blink 1.2s ease-in-out infinite;
}

@keyframes vc-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

/* Cards shared */
.vc-card {
  position: absolute;
  background: white;
  border: 1px solid var(--sand-200, #e8dfd2);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 4px 20px rgba(44, 36, 22, 0.07);
  z-index: 2;
}

.vc-card h5 {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--primary-800, #2c2318);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--sand-200, #e8dfd2);
}

/* Transcript */
.vc-transcript {
  left: 12px;
  top: 130px;
  width: 250px;
}

.vc-line {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 0.6875rem;
  line-height: 1.4;
}

.vc-time {
  color: var(--text-muted, #7a7068);
  font-family: monospace;
  font-size: 0.625rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.vc-role {
  font-weight: 700;
  font-size: 0.625rem;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}

.vc-ai {
  background: color-mix(in srgb, var(--gold-500) 12%, white);
  color: var(--gold-700, #7a5c0a);
}

.vc-cand {
  background: #ecfdf5;
  color: #059669;
}

.vc-text {
  color: var(--primary-800, #2c2318);
}

/* Scoring */
.vc-scoring {
  right: 12px;
  top: 130px;
  width: 210px;
}

.vc-score-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 0.6875rem;
}

.vc-score-row>span:first-child {
  width: 80px;
  flex-shrink: 0;
  color: var(--text-muted, #7a7068);
}

.vc-bar {
  flex: 1;
  height: 5px;
  background: var(--sand-100, #f5f0e8);
  border-radius: 3px;
  overflow: hidden;
}

.vc-val {
  font-weight: 700;
  color: var(--gold-600, #8a6914);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* Duration badge */
.vc-duration {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  background: var(--primary-800, #2c2318);
  color: var(--gold-400, #d4a843);
  border-radius: 100px;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  font-family: monospace;
  box-shadow: 0 2px 12px rgba(44, 36, 22, 0.12);
}

/* ============================================
   PIPELINE — INFOGRAPHIC KANBAN COMPOSE
   ============================================ */
.pipe-compose {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg,
      rgba(185, 138, 42, 0.04) 0%,
      rgba(44, 35, 24, 0.03) 100%);
  border-radius: 24px;
  border: 1px solid rgba(185, 138, 42, 0.12);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pipe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: white;
  border-radius: 10px;
  border: 1px solid var(--sand-200, #e8dfd2);
}

.pipe-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--primary-800, #2c2318);
}

.pipe-count {
  font-size: 0.6875rem;
  color: var(--text-muted, #7a7068);
  font-weight: 600;
}

.pipe-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.pipe-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pipe-col-head {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 6px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pipe-col-head span {
  font-size: 0.5625rem;
  background: rgba(255, 255, 255, 0.5);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.col-shortlist {
  background: #fef3c7;
  color: #92400e;
}

.col-assess {
  background: #fde68a;
  color: #78350f;
}

.col-interview {
  background: color-mix(in srgb, var(--gold-500) 25%, white);
  color: var(--gold-700, #7a5c0a);
}

.col-offer {
  background: #ecfdf5;
  color: #065f46;
}

.pipe-cand {
  background: white;
  border: 1px solid var(--sand-200, #e8dfd2);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.pipe-name {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--primary-800, #2c2318);
}

.pipe-score {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--gold-600, #8a6914);
  background: #fffbeb;
  padding: 1px 6px;
  border-radius: 100px;
  border: 1px solid #fde68a;
}

.pipe-score.top {
  background: var(--gold-500, #b98a2a);
  color: white;
  border-color: var(--gold-500, #b98a2a);
}

.active-cand {
  border-color: var(--gold-500, #b98a2a);
  box-shadow: 0 0 0 1px var(--gold-500, #b98a2a);
}

.pipe-badge {
  font-size: 0.625rem;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid #a7f3d0;
}

.hired-cand {
  border-color: #a7f3d0;
  background: #f7fdf9;
}

.pipe-stats {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.pipe-stat-badge {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 4px 12px;
  background: white;
  border: 1px solid var(--sand-200, #e8dfd2);
  border-radius: 100px;
  color: var(--primary-800, #2c2318);
}

/* ============================================
   SOLUTION PAGE — CORPORATE DASHBOARD VISUAL
   ============================================ */
.corp-visual {
  position: relative;
  width: 100%;
  margin: 20px 0;
  display: flex;
  justify-content: center;
  perspective: 1000px;
}

.corp-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle,
      rgba(185, 138, 42, 0.15) 0%,
      rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  z-index: 0;
  filter: blur(40px);
}

.glow-1 {
  top: -50px;
  left: -50px;
}

.glow-2 {
  bottom: -50px;
  right: -50px;
  background: radial-gradient(circle,
      rgba(44, 35, 24, 0.1) 0%,
      rgba(255, 255, 255, 0) 70%);
}

.corp-glass-panel {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 480px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  box-shadow:
    0 20px 40px rgba(44, 36, 22, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.corp-panel-header {
  background: rgba(245, 240, 232, 0.5);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(232, 223, 210, 0.5);
}

.corp-dots {
  display: flex;
  gap: 6px;
  margin-right: 16px;
}

.corp-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e8dfd2;
}

.corp-dots span:nth-child(1) {
  background: #ef4444;
  opacity: 0.6;
}

.corp-dots span:nth-child(2) {
  background: #f59e0b;
  opacity: 0.6;
}

.corp-dots span:nth-child(3) {
  background: #22c55e;
  opacity: 0.6;
}

.corp-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted, #7a7068);
  letter-spacing: 0.02em;
}

.corp-panel-body {
  padding: 24px;
}

.corp-cand-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.corp-avatar-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sand-100, #f5f0e8);
  border: 2px solid white;
  box-shadow: 0 4px 12px rgba(44, 36, 22, 0.06);
}

.corp-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.corp-status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #10b981;
  border: 2px solid white;
  border-radius: 50%;
}

.corp-cand-details {
  flex: 1;
}

.corp-cand-details h4 {
  margin: 0 0 4px 0;
  font-size: 1.125rem;
  color: var(--primary-800, #2c2318);
  font-weight: 700;
}

.corp-cand-details p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted, #7a7068);
}

.corp-score-circle {
  position: relative;
  width: 64px;
  height: 64px;
}

.corp-score-circle svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.circle-bg {
  fill: none;
  stroke: var(--sand-200, #e8dfd2);
  stroke-width: 2.5;
}

.circle-fill {
  fill: none;
  stroke: var(--gold-500, #b98a2a);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.circle-text .val {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--primary-800, #2c2318);
}

.circle-text .val small {
  font-size: 0.625rem;
  font-weight: 600;
}

.circle-text .lbl {
  font-size: 0.5rem;
  text-transform: uppercase;
  color: var(--text-muted, #7a7068);
  margin-top: 2px;
  font-weight: 600;
}

.corp-metrics-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--sand-200, #e8dfd2);
}

.corp-metric-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.metric-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.mlbl {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-700, #3a2e20);
}

.mval {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold-600, #8a6914);
}

.metric-bar {
  width: 100%;
  height: 6px;
  background: var(--sand-200, #e8dfd2);
  border-radius: 100px;
  overflow: hidden;
}

.mfill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-500));
  border-radius: 100px;
}

.corp-float-badge {
  position: absolute;
  background: white;
  padding: 6px 14px 6px 10px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 8px 20px rgba(44, 36, 22, 0.08);
  border: 1px solid rgba(232, 223, 210, 0.6);
  z-index: 10;
}

.float-top-right {
  top: -16px;
  right: 24px;
}

.float-bottom-left {
  bottom: -16px;
  left: 24px;
}

.cb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  color: var(--gold-600, #8a6914);
  font-size: 0.8125rem;
  font-weight: 800;
}

.cb-text {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--primary-800, #2c2318);
}

/* Transparent Monitor styling for standalone 3D images */
.solution-visual.corp-transparent-monitor {
  background: transparent !important;
  overflow: visible !important;
  padding: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.solution-visual.corp-transparent-monitor img {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--sand-300) !important;
  box-shadow: 0 8px 32px rgba(44, 36, 22, 0.08) !important;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 0 auto;
  transition:
    transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.6s ease;
  display: block;
}

.solution-item .solution-visual.corp-transparent-monitor img:hover {
  transform: scale(1.02) translateY(-4px);
  box-shadow: 0 16px 48px rgba(44, 36, 22, 0.12) !important;
}

/* Base styles for standard grid layout without origins */
@media (min-width: 969px) {
  .solution-item.monitor-layout {
    grid-template-columns: 0.85fr 1.15fr;
    /* Text 85%, Image 115% */
    gap: 5rem;
    /* Large gap ensures no overlap even with scaling */
  }
}

/* ============================================
   NABIR GRID - ALIGNED 5-COLUMN
   ============================================ */
.nabir-grid {
  display: grid;
  /* Forces exactly 5 columns of equal width so they sit perfectly horizontally */
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

@media (max-width: 1024px) {
  .nabir-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .nabir-grid {
    grid-template-columns: 1fr;
  }
}

.nabir-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-md);
  border: 1px solid var(--sand-500);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all var(--transition-base);
  height: 100%;
  /* Ensures all cards stretch to the tallest card's height */
}

.nabir-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--gold-400);
}

.nabir-icon {
  width: 64px;
  height: 64px;
  background: color-mix(in srgb, var(--gold-500) 15%, white);
  color: var(--primary-700);
  border: 2px solid var(--gold-500);
  border-radius: 50%;
  /* Circle icon */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--space-lg);
  flex-shrink: 0;
}

.nabir-card h4 {
  margin-bottom: var(--space-sm);
  font-size: 1.125rem;
  color: var(--primary-800);
  /* Increase min-height to safely hold two lines of text across all screen sizes */
  min-height: 3.5rem;
  display: flex;
  /* Center single-line headings vertically so they look balanced against two-line headings */
  align-items: center;
  justify-content: center;
  width: 100%;
}

.nabir-card p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
  flex-grow: 1;
  /* Pushes the paragraph to fill the remaining space */
}

/* ============================================
   TITLE BADGE (N.A.B.I.R ACRONYM)
   ============================================ */
.title-badge {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 0.1em 0.3em;
  color: var(--gold-500);
  line-height: 1;
  font-weight: 700;
  margin: 0 0.25em;
  z-index: 1;
}

.title-badge::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -15%;
  width: 130%;
  /* Make the wrap wider to match reference */
  height: 140%;
  z-index: -1;
  /* Clean, sophisticated hand-drawn ellipse SVG matching user's reference drawing */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M10 15 C10 1 95 1 95 15 C95 29 5 29 15 15' fill='none' stroke='%23d4b66a' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.95;
  transform: rotate(-1deg);
  /* Very slight tilt for organic feel */
}

.section-header h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  /* Use a small gap */
}

/* ============================================
   NABIR CARD COMPONENT ALIGNMENT FIX
   ============================================ */
.nabir-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* This uniform height forces all paragraphs below it to start at the exact same vertical position */
  height: 180px;
  width: 100%;
  margin-bottom: var(--space-xs);
}

/* ============================================
   PIPELINE SECTION
   ============================================ */
.pipeline {
  background: rgba(15, 90, 60, 0.04);
  /* Soft corporate green tint to match Challenge section */
}

.pipeline-visual {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  margin-bottom: var(--space-2xl);
  justify-content: center;
}

.pipeline-phase {
  flex: 1 1 140px;
  min-width: 140px;
  max-width: 180px;
  background: var(--white);
  border-radius: var(--radius-xl);
  /* Soft rounded corners */
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  position: relative;
  transition: all var(--transition-base);
  border: 1px solid rgba(0, 0, 0, 0.03);
  /* Extremely soft border */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  /* Soft corporate lift */
}

.pipeline-phase:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
  border-color: rgba(0, 0, 0, 0.06);
}

.pipeline-phase::after {
  content: "→";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary-700);
  /* Clear, bold corporate green arrow */
  font-size: 1.5rem;
  font-weight: 700;
  z-index: 1;
}

.pipeline-phase:last-child::after {
  display: none;
}

@media (max-width: 968px) {
  .pipeline-visual {
    gap: var(--space-sm);
  }

  .pipeline-phase {
    flex: 1 1 calc(33.333% - var(--space-md));
    min-width: 120px;
    max-width: none;
    padding: var(--space-md);
  }

  .pipeline-phase::after {
    display: none;
  }
}

@media (max-width: 576px) {
  .pipeline-phase {
    flex: 1 1 calc(50% - var(--space-sm));
    min-width: 100px;
  }
}

.phase-number {
  width: 40px;
  height: 40px;
  background: var(--primary-700);
  /* Dark green for all icons to match corporate look */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
}

.pipeline-phase:nth-child(even) .phase-number {
  background: var(--gold-500);
  /* Gold for every second step to add premium rhythm */
}

.pipeline-phase h4 {
  font-size: 1rem;
  margin-bottom: var(--space-xs);
  color: var(--primary-800);
}

.pipeline-phase p {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pipeline-governance {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.pipeline-governance-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  border-radius: 100px;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary-700);
  transition: all var(--transition-base);
}

.pipeline-governance-badge:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.pipeline-governance-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--gold-500);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Hide the old grid visual entirely as requested by user */
.pipeline-showcase-grid {
  display: none !important;
}