:root {
  /* Color Tokens - Foster Media Agency Dark Theme */
  --ink-navy: #000028;
  /* Ink — primary/darkest background: hero, footer, dark sections */
  --deck-navy: #000028;
  /* Primary — base section background */
  --panel-navy: #031782;
  /* elevated surfaces: cards, form fields, nav on scroll */

  /* Page Backdrop Gradient */
  --page-gradient: #000028;

  /* Signature accent */
  --amber: #FFC82F;
  /* Accent — CTAs, key numbers, active states */
  --amber-bright: #FFE066;
  /* hover state for accent elements */
  --soft-purple: #A982FF;
  /* Soft accent */

  /* Text */
  --readout-white: #FFFFFF;
  /* headings, primary text on dark */
  --static-gray: #FFFFFF;
  /* body copy, secondary text on dark */

  /* Hairlines */
  --hairline: rgba(169, 130, 255, 0.2);
  /* structural borders */
  --hairline-amber: rgba(255, 200, 47, 0.35);
  /* emphasis / hover borders */

  /* Hero Orbital Rings Colors - High Visibility */
  --orbital-ring-color-1: rgba(255, 200, 47, 0.35);
  --orbital-ring-color-2: rgba(169, 130, 255, 0.3);
  --orbital-ring-color-3: rgba(2, 63, 205, 0.4);

  /* Process Icon Variables - Dark Theme */
  --process-icon-bg-active: var(--amber);
  --process-icon-border-active: var(--amber);
  --process-icon-color-active: var(--ink-navy);
  --process-icon-bg-inactive: rgba(255, 200, 47, 0.1);
  --process-icon-border-inactive: rgba(255, 200, 47, 0.25);
  --process-icon-color-inactive: var(--amber);

  /* Typography — Manrope Strictly */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Manrope', monospace;

  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Premium About Section Variables - Dark Theme default */
  --about-brand: var(--amber);
  --about-brand-hover: var(--amber-bright);
  --about-light-brand: rgba(169, 130, 255, 0.18);
  --about-brand-text: var(--amber);
  --about-card-bg: rgba(3, 23, 130, 0.85);
  --about-backdrop-bg: rgba(255, 200, 47, 0.12);
  --about-card-border: rgba(169, 130, 255, 0.2);
  --about-text-primary: var(--readout-white);
  --about-text-secondary: var(--static-gray);
}

html[data-theme="light"] {
  --ink-navy: #F1EDF2;
  /* Surface — Light background */
  --deck-navy: #E7E1EB;
  /* Mid light section background */
  --panel-navy: #FBF9FC;
  /* Elevated surfaces, non-white per Rule 20 */

  /* Page Backdrop Gradient */
  --page-gradient: linear-gradient(180deg, #F1EDF2 0%, #E7E1EB 50%, #F1EDF2 100%);

  --amber: #040594;
  /* Primary for high contrast against surface */
  --amber-bright: #040594;
  /* Light theme hover state */
  --readout-white: #000000;
  /* Pure black text for headings per Rule 6 */
  --static-gray: #2A2A38;
  /* Secondary dark text for body copy */
  --hairline: rgba(4, 5, 148, 0.12);
  --hairline-amber: rgba(2, 63, 205, 0.25);

  /* Hero Orbital Rings Colors - Light Theme overrides */
  --orbital-ring-color-1: rgba(2, 63, 205, 0.25);
  --orbital-ring-color-2: rgba(4, 5, 148, 0.2);
  --orbital-ring-color-3: rgba(169, 130, 255, 0.25);

  /* Process Icon Variables - Light Theme */
  --process-icon-bg-active: var(--amber);
  --process-icon-border-active: var(--amber);
  --process-icon-color-active: #ffffff;
  --process-icon-bg-inactive: rgba(2, 63, 205, 0.08);
  --process-icon-border-inactive: rgba(2, 63, 205, 0.2);
  --process-icon-color-inactive: var(--amber);

  /* Premium About Section Variables - Light Theme */
  --about-brand: var(--amber);
  --about-brand-hover: var(--amber-bright);
  --about-light-brand: #E7E1EB;
  --about-brand-text: var(--amber);
  --about-card-bg: rgba(251, 249, 252, 0.9);
  --about-backdrop-bg: rgba(2, 63, 205, 0.08);
  --about-card-border: rgba(4, 5, 148, 0.15);
  --about-text-primary: #000000;
  --about-text-secondary: #2A2A38;
}

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

html {
  scroll-behavior: smooth;
  color: var(--readout-white);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ink-navy);
}

@media (max-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  overflow-x: clip;
  background: transparent;
  padding-top: 100px;
  position: relative;
  min-height: 100vh;
}

/* Hardware-accelerated fixed backdrop layer without triggering full-page repaint during scroll */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--page-gradient) no-repeat center center;
  background-size: cover;
  z-index: -999;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
}

section {
  background-color: transparent !important;
}

/* Typography Base */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--readout-white);
  line-height: 1.15;
}

h1 {
  font-size: 68px;
  line-height: 1.05;
  font-weight: 700;
}

h2 {
  font-size: 46px;
  line-height: 53px;
  font-weight: 700;
}

h3 {
  font-size: 24px;
  font-weight: 600;
}

p {
  color: var(--static-gray);
  margin-bottom: 1.5rem;
}

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

ul {
  list-style: none;
}

/* Eyebrows */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--amber);
  margin-bottom: 1rem;
  display: block;
}

/* Section Spacing - Unified & Balanced */
section {
  padding: 75px 0;
  position: relative;
}

@media (max-width: 768px) {
  section {
    padding: 50px 0;
  }
}

/* Grid & Textures */
.grid-texture {
  background-image:
    radial-gradient(circle at 50% 50%, transparent 20%, rgba(18, 10, 3, 0.45) 80%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
}

/* Base Layout Containers */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

@media (max-width: 768px) {
  .container {
    padding: 0 16px !important;
  }
}

/* Highlight styles */
.highlight-amber {
  color: var(--amber);
}

/* ==========================================================================
   --- 3D SKEUOMORPHIC LUXURY BUTTON SYSTEM (GLOBAL) ---
   ========================================================================== */

.btn {
  --border-radius: 28px;
  --padding: 4px;
  --transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --button-color: #140C06;

  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.8em 1.45em;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 23px;
  font-weight: 500;
  color: #FFFFFF !important;
  text-shadow: none !important;
  text-decoration: none;
  background-color: var(--button-color);
  position: relative;
  border-radius: var(--border-radius);
  border: solid 1px rgba(255, 255, 255, 0.16);
  cursor: pointer;
  z-index: 1;

  box-shadow:
    inset 0px 1px 1px rgba(255, 255, 255, 0.25),
    inset 0px 2px 2px rgba(255, 255, 255, 0.15),
    inset 0px 4px 4px rgba(255, 255, 255, 0.1),
    inset 0px 8px 8px rgba(255, 255, 255, 0.05),
    inset 0px 16px 16px rgba(255, 255, 255, 0.05),
    0px -1px 1px rgba(0, 0, 0, 0.02),
    0px -2px 2px rgba(0, 0, 0, 0.03),
    0px -4px 4px rgba(0, 0, 0, 0.05),
    0px -8px 8px rgba(0, 0, 0, 0.06),
    0px -16px 16px rgba(0, 0, 0, 0.08);

  transition: box-shadow var(--transition), border var(--transition), background-color var(--transition), transform var(--transition), color var(--transition);
}

/* Header, Hero, About & Why Choose Us Section Buttons Specific Sizing (Matched Padding) */
.main-header .btn,
.header-actions .btn,
.hero-actions .btn,
.hero-section .btn,
.premium-about-actions .btn,
.about-intro-section .btn,
.about-content .btn,
.premium-about .btn,
.premium-about-content .btn,
.why-cta-btn,
.why-bottom-row .btn,
.why-content .btn {
  font-size: 14.5px;
  line-height: 24px;
  font-weight: 500;
  padding: 0.8em 1.45em !important;
  text-shadow: none !important;
}

.main-header .btn svg,
.main-header .btn i,
.header-actions .btn svg,
.header-actions .btn i,
.hero-actions .btn svg,
.hero-actions .btn i,
.hero-section .btn svg,
.hero-section .btn i,
.premium-about-actions .btn svg,
.premium-about-actions .btn i,
.about-intro-section .btn svg,
.about-intro-section .btn i,
.about-content .btn svg,
.about-content .btn i,
.premium-about .btn svg,
.premium-about .btn i,
.premium-about-content .btn svg,
.premium-about-content .btn i,
.why-cta-btn svg,
.why-cta-btn i,
.why-bottom-row .btn svg,
.why-bottom-row .btn i,
.why-content .btn svg,
.why-content .btn i {
  width: 16px !important;
  height: 16px !important;
}

html[data-theme="light"] .btn,
html[data-theme="light"] .btn-filled {
  --button-color: #040594;
  background: #040594 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  text-shadow: none !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 14px rgba(2, 63, 205, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important;
}

/* Outer Depth 3D Rim */
.btn::before {
  content: "";
  position: absolute;
  top: calc(0px - var(--padding));
  left: calc(0px - var(--padding));
  width: calc(100% + var(--padding) * 2);
  height: calc(100% + var(--padding) * 2);
  border-radius: calc(var(--border-radius) + var(--padding));
  pointer-events: none;
  background: transparent !important;
  border: 2px solid rgba(255, 200, 47, 0.35);
  box-shadow: 0 4px 16px rgba(255, 200, 47, 0.2);
  z-index: -1;
  transition: box-shadow var(--transition), filter var(--transition), border-color var(--transition);
}

/* Outer 3D Rim in Light Mode */
html[data-theme="light"] .btn::before {
  background: transparent !important;
  border: 2px solid rgba(2, 63, 205, 0.22);
  box-shadow: 0 4px 14px rgba(2, 63, 205, 0.12);
  opacity: 1;
}

/* Inner Site Orange Highlight Sheen (Dark Mode) */
.btn::after {
  display: none !important;
}

/* Eliminate white washout in Light Mode */
html[data-theme="light"] .btn::after {
  display: none !important;
  opacity: 0 !important;
}

/* Right Arrow Micro-Interaction */
.btn svg,
.btn i,
.btn .btn-arrow,
.btn .btn-arrow-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  flex-shrink: 0;
  color: inherit;
  stroke: currentColor;
  fill: none;
  transition: transform var(--transition), filter var(--transition), color var(--transition);
}

.btn:hover svg,
.btn:hover i,
.btn:hover .btn-arrow,
.btn:hover .btn-arrow-icon {
  transform: translateX(4px);
  filter: drop-shadow(0 0 6px var(--amber));
}

html[data-theme="light"] .btn:hover svg,
html[data-theme="light"] .btn:hover i,
html[data-theme="light"] .btn:hover .btn-arrow,
html[data-theme="light"] .btn:hover .btn-arrow-icon {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}

/* Hover State */
.btn:hover {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

/* Light Theme Hover: Rich site amber-orange without white haze */
html[data-theme="light"] .btn:hover,
html[data-theme="light"] .btn-filled:hover {
  background: #012b94 !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 6px 18px rgba(1, 43, 148, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

.btn:hover::before {
  border-color: rgba(255, 200, 47, 0.45);
  box-shadow: 0 4px 12px rgba(255, 200, 47, 0.18);
}

html[data-theme="light"] .btn:hover::before {
  background: transparent !important;
  border-color: rgba(255, 200, 47, 0.45);
  box-shadow: 0 4px 12px rgba(255, 200, 47, 0.15);
}

.btn:hover::after {
  display: none !important;
}

/* Active / Click State */
.btn:active {
  transform: translateY(0) scale(0.98);
  border: solid 1px var(--amber);
  background-color: rgba(255, 200, 47, 0.18);
}

html[data-theme="light"] .btn:active,
html[data-theme="light"] .btn-filled:active {
  background: linear-gradient(180deg, var(--amber) 0%, #FFC82F 100%) !important;
  box-shadow: 0 2px 6px rgba(255, 200, 47, 0.3);
  color: #FFFFFF !important;
}

.btn:active::before {
  box-shadow: 0 2px 8px rgba(255, 200, 47, 0.25);
}

.btn:active::after {
  display: none !important;
}

/* Variants */
.btn-filled {
  --button-color: var(--amber);
  background: linear-gradient(135deg, #FFE066 0%, #FFC82F 50%, #FFC82F 100%) !important;
  color: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.25),
    0 2px 6px rgba(255, 200, 47, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    inset 0 -2px 3px rgba(0, 0, 0, 0.15) !important;
}

.btn-filled svg,
.btn-filled i {
  color: #000000 !important;
  stroke: #000000 !important;
}

.btn-filled:hover {
  background: linear-gradient(135deg, #FFC82F 0%, #FFC82F 50%, #FFC82F 100%) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  box-shadow:
    0 6px 18px rgba(255, 200, 47, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.75) !important;
  color: #000000 !important;
  transform: translateY(-2px);
}

.btn-filled:hover svg,
.btn-filled:hover i {
  color: #000000 !important;
  stroke: #000000 !important;
}

.btn-outline {
  --button-color: rgba(30, 20, 12, 0.4);
  background: rgba(255, 200, 47, 0.06) !important;
  border: 1.5px solid rgba(255, 200, 47, 0.45) !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.btn-outline svg,
.btn-outline i {
  color: var(--amber) !important;
  stroke: var(--amber) !important;
}

.btn-outline:hover {
  background: linear-gradient(135deg, #FFE066 0%, #FFC82F 50%, #FFC82F 100%) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 6px 20px rgba(255, 200, 47, 0.35);
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

.btn-outline:hover svg,
.btn-outline:hover i {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

html[data-theme="light"] .btn-outline {
  background: rgba(255, 200, 47, 0.06) !important;
  border: 1.5px solid rgba(255, 200, 47, 0.4) !important;
  color: #FFC82F !important;
  text-shadow: none !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 8px rgba(255, 200, 47, 0.08) !important;
}

html[data-theme="light"] .btn-outline svg,
html[data-theme="light"] .btn-outline i {
  color: #FFC82F !important;
  stroke: #FFC82F !important;
}

html[data-theme="light"] .btn-outline:hover,
html[data-theme="light"] .hero-actions .btn-outline:hover {
  background: linear-gradient(135deg, #FFE066 0%, #FFC82F 100%) !important;
  border-color: #FFC82F !important;
  color: #040594 !important;
  box-shadow: 0 6px 20px rgba(255, 200, 47, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.65) !important;
  transform: translateY(-2px);
}

html[data-theme="light"] .btn-outline:hover::before,
html[data-theme="light"] .hero-actions .btn-outline:hover::before {
  border-color: #FFC82F !important;
  box-shadow: 0 4px 14px rgba(255, 200, 47, 0.35) !important;
  background: transparent !important;
}

html[data-theme="light"] .btn-outline:hover svg,
html[data-theme="light"] .btn-outline:hover i {
  color: #040594 !important;
  stroke: #040594 !important;
}

/* Form Fields */
.form-group {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
}

.form-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--readout-white);
  margin-bottom: 8px;
}

.form-input,
.form-textarea {
  background-color: var(--panel-navy);
  border: 1px solid var(--hairline);
  color: var(--readout-white);
  padding: 14px 18px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 16px;
  transition: var(--transition-smooth);
  width: 100%;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 8px rgba(255, 200, 47, 0.15);
}

.form-caption {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--static-gray);
  margin-top: 6px;
}

/* Cards & Elevated Panels */
.panel-card {
  background-color: var(--panel-navy);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 40px;
  transition: var(--transition-smooth);
  position: relative;
}

.panel-card:hover {
  transform: translateY(-4px);
  border-color: var(--hairline-amber);
  box-shadow: 0 0 24px rgba(255, 200, 47, 0.15);
}



/* Keyframes for header load animations */
@keyframes headerFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

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

/* Navigation Header - Fixed Floating Box/Pill from Start */
.main-header {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  will-change: transform;
  z-index: 1000;
  max-width: 1200px;
  width: calc(100% - 48px);
  background: #000047;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(169, 130, 255, 0.35);
  border-radius: 999px;
  box-shadow:
    0 16px 45px rgba(0, 0, 0, 0.5),
    0 0 25px rgba(2, 63, 205, 0.2),
    inset 0 1px 2px rgba(255, 255, 255, 0.16),
    inset 0 -1px 2px rgba(169, 130, 255, 0.1);
}

.main-header.scrolled {
  background: #000047;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.65),
    0 0 30px rgba(2, 63, 205, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

html[data-theme="light"] .main-header {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(2, 63, 205, 0.2);
  box-shadow: 0 12px 36px rgba(14, 20, 36, 0.08),
    0 0 1px 1px rgba(255, 255, 255, 0.8) inset,
    0 0 20px rgba(2, 63, 205, 0.06);
}

html[data-theme="light"] .main-header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(2, 63, 205, 0.28);
  box-shadow: 0 16px 40px rgba(14, 20, 36, 0.12),
    0 0 1px 1px rgba(255, 255, 255, 0.9) inset,
    0 0 20px rgba(2, 63, 205, 0.08);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 68px;
  padding: 0 28px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--readout-white);
  opacity: 0;
  animation: headerFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.logo-tick {
  color: var(--amber);
  stroke-width: 2.5px;
  transition: var(--transition-smooth);
}

.logo:hover {
  color: var(--amber);
}

.logo:hover .logo-tick {
  transform: rotate(15deg) scale(1.15);
  filter: drop-shadow(0 0 8px var(--amber));
}

.nav-menu {
  display: flex;
  gap: 6px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  padding: 0;
  border-radius: 999px;
  box-shadow: none;
}

.nav-link {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--readout-white);
  position: relative;
  padding: 8px 16px;
  border-radius: 999px;
  /* Pill highlights */
  border: 1px solid transparent;
  transition: all 0.3s ease;
  opacity: 0;
  animation: headerFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.nav-link:hover,
.nav-link.active {
  color: var(--amber);
  background-color: rgba(255, 200, 47, 0.06);
  border-color: var(--hairline-amber);
}

/* Stagger entrance animations for menu links */
.nav-menu a:nth-child(1) {
  animation-delay: 0.1s;
}

.nav-menu a:nth-child(2) {
  animation-delay: 0.18s;
}

.nav-menu a:nth-child(3) {
  animation-delay: 0.26s;
}

.nav-menu a:nth-child(4) {
  animation-delay: 0.34s;
}

.nav-menu a:nth-child(5) {
  animation-delay: 0.42s;
}

.nav-menu a:nth-child(6) {
  animation-delay: 0.5s;
}

.main-header .btn-filled {
  padding: 0.8em 1.45em;
  font-size: 14px;
  font-weight: 500 !important;
  text-shadow: none !important;
  opacity: 0;
  animation: headerFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.65s;
}

.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--readout-white);
  margin-bottom: 5px;
  transition: var(--transition-smooth);
}

.hamburger span:last-child {
  margin-bottom: 0;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

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

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

@media (max-width: 1100px) {
  .nav-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576) !important;
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    border: 1px solid rgba(255, 200, 47, 0.3) !important;
    border-radius: 24px;
    flex-direction: column;
    align-items: stretch;
    padding: 16px 14px;
    gap: 8px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.75), 0 0 30px rgba(255, 200, 47, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
  }

  html[data-theme="light"] .nav-menu {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(254, 249, 243, 0.98) 100%) !important;
    border: 1.5px solid rgba(255, 200, 47, 0.25) !important;
    box-shadow: 0 24px 60px rgba(14, 20, 36, 0.12), 0 0 24px rgba(255, 200, 47, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.95) !important;
  }

  .nav-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-menu .nav-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 12px 18px;
    font-family: var(--font-display);
    font-size: 15.5px;
    font-weight: 600;
    border-radius: 14px;
    color: #F1F5F9;
    border: 1px solid transparent;
    opacity: 1;
    animation: none;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav-menu .nav-link::after {
    content: '→';
    font-size: 15px;
    font-weight: 700;
    color: var(--amber);
    opacity: 0;
    transform: translateX(-6px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav-menu .nav-link:hover,
  .nav-menu .nav-link.active {
    color: var(--amber) !important;
    background-color: rgba(255, 200, 47, 0.12) !important;
    border-color: rgba(255, 200, 47, 0.32) !important;
    transform: translateX(4px);
  }

  .nav-menu .nav-link:hover::after,
  .nav-menu .nav-link.active::after {
    opacity: 1;
    transform: translateX(0);
  }

  /* Featured Action Button for Last Nav Item (Contact Us) - Matches Desktop Luxury .btn-filled */
  .nav-menu .nav-link:last-child {
    margin-top: 8px;
    padding: 0.8em 1.45em;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 24px;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #FFE066 0%, #FFC82F 50%, #FFC82F 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    text-shadow: none !important;
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.3),
      0 2px 6px rgba(255, 200, 47, 0.25),
      inset 0 1px 1px rgba(255, 255, 255, 0.65),
      inset 0 -2px 3px rgba(0, 0, 0, 0.15) !important;
    transform: none !important;
  }

  .nav-menu .nav-link:last-child::after {
    content: '→';
    font-size: 15px;
    font-weight: 500;
    opacity: 1 !important;
    transform: none !important;
    color: #FFFFFF !important;
    margin-left: 4px;
  }

  .nav-menu .nav-link:last-child:hover {
    background: linear-gradient(135deg, #FFC82F 0%, #FFC82F 50%, #FFC82F 100%) !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
    box-shadow:
      0 6px 20px rgba(255, 200, 47, 0.4),
      0 2px 6px rgba(0, 0, 0, 0.2),
      inset 0 1px 1px rgba(255, 255, 255, 0.75) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
  }

  /* Light Theme Specific Nav Links */
  html[data-theme="light"] .nav-menu .nav-link {
    color: #1E293B;
  }

  html[data-theme="light"] .nav-menu .nav-link:hover,
  html[data-theme="light"] .nav-menu .nav-link.active {
    color: #FFC82F !important;
    background-color: rgba(255, 200, 47, 0.08) !important;
    border-color: rgba(255, 200, 47, 0.25) !important;
  }

  html[data-theme="light"] .nav-menu .nav-link::after {
    color: #FFC82F;
  }

  html[data-theme="light"] .nav-menu .nav-link:last-child {
    background: linear-gradient(135deg, #FFE066 0%, #FFC82F 50%, #FFC82F 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    text-shadow: none !important;
    font-weight: 500 !important;
    box-shadow:
      0 4px 14px rgba(255, 200, 47, 0.3),
      0 2px 6px rgba(14, 20, 36, 0.08),
      inset 0 1px 1px rgba(255, 255, 255, 0.65),
      inset 0 -2px 2px rgba(0, 0, 0, 0.15) !important;
  }

  html[data-theme="light"] .nav-menu .nav-link:last-child::after {
    color: #FFFFFF !important;
  }

  html[data-theme="light"] .nav-menu .nav-link:last-child:hover {
    background: linear-gradient(135deg, #FFC82F 0%, #FFC82F 50%, #FFC82F 100%) !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
    box-shadow:
      0 6px 20px rgba(255, 200, 47, 0.4),
      0 2px 6px rgba(14, 20, 36, 0.1),
      inset 0 1px 1px rgba(255, 255, 255, 0.75) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
  }

  .hamburger {
    display: block;
  }

  .header-actions {
    display: none;
  }
}


/* Footer Section */
.footer {
  background-color: #000047;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 38px 38px, 38px 38px;
  border-top: 1px solid rgba(255, 200, 47, 0.15);
  padding: 75px 0 40px 0;
  position: relative;
  overflow: hidden;
}

html[data-theme="light"] .footer {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(14, 20, 36, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 20, 36, 0.045) 1px, transparent 1px);
  background-size: 38px 38px, 38px 38px;
  border-top: 1px solid rgba(14, 20, 36, 0.08);
}

.footer .container {
  position: relative;
  z-index: 2;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.9fr 0.9fr;
  gap: 50px;
  margin-bottom: 60px;
}

.footer .logo {
  opacity: 1;
  color: #EDEFF5;
  text-decoration: none;
  animation: none;
}

html[data-theme="light"] .footer .logo {
  color: #0E1424;
}

.footer .logo:hover {
  color: var(--amber);
}

.brand-pitch-text {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #FFFFFF;
  max-width: 330px;
  text-align: justify;
  text-justify: inter-word;
  padding-right: 12px;
}

html[data-theme="light"] .brand-pitch-text {
  color: #475569;
}

.social-links {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.social-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 200, 47, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #EDEFF5;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

html[data-theme="light"] .social-icon {
  background: rgba(255, 200, 47, 0.08);
  border-color: rgba(255, 200, 47, 0.25);
  color: #0E1424;
}

.social-icon svg {
  width: 17px !important;
  height: 17px !important;
  transition: all 0.25s ease;
}

/* Hover: Fill with solid brand amber color */
.social-icon:hover {
  color: #FFFFFF !important;
  border-color: #FFC82F !important;
  background: linear-gradient(135deg, #FFC82F 0%, #FFC82F 100%) !important;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 6px 18px rgba(255, 200, 47, 0.45);
}

.social-icon:hover svg {
  stroke: #FFFFFF;
}

.footer-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 22px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

html[data-theme="light"] .footer-title {
  color: #0E1424;
}

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

.footer-link {
  font-size: 14.5px;
  color: #FFFFFF;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

html[data-theme="light"] .footer-link {
  color: #475569;
}

.footer-link:hover,
html[data-theme="light"] .footer-link:hover {
  color: var(--amber) !important;
  transform: translateX(4px);
}

.footer-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  color: #FFFFFF;
  line-height: 1.4;
}

html[data-theme="light"] .info-item {
  color: #475569;
}

.info-item a,
.footer-contact-link {
  color: #FFFFFF;
  text-decoration: none;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

html[data-theme="light"] .info-item a,
html[data-theme="light"] .footer-contact-link {
  color: #475569;
}

.info-item a:hover,
.footer-contact-link:hover,
html[data-theme="light"] .info-item a:hover,
html[data-theme="light"] .footer-contact-link:hover {
  color: var(--amber) !important;
  transform: translateX(4px);
}

.info-item:not(:has(a)) {
  cursor: default;
}

.info-item svg {
  color: var(--amber);
  flex-shrink: 0;
  margin-top: 2px;
  width: 17px;
  height: 17px;
}

/* Light theme contact item icon coloring is managed with circular badge styling */

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13.5px;
  color: #FFFFFF;
  text-align: center;
}

html[data-theme="light"] .footer-bottom {
  border-top-color: rgba(14, 20, 36, 0.08);
  color: #64748B;
}

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

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

  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}

/* Floating Actions - Sticky on All Pages (WhatsApp Only) */
.floating-actions {
  position: fixed;
  bottom: 24px;
  right: 24px;
  left: auto;
  display: flex;
  align-items: center;
  z-index: 999;
  pointer-events: none;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease;
}

.float-btn,
.float-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-width: 52px;
  max-width: 52px;
  padding: 0;
  border-radius: 50%;
  text-decoration: none;
  pointer-events: auto;
  background-color: #25D366;
  color: #FFFFFF;
  border: none;
  outline: none;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.float-btn svg,
.float-whatsapp svg {
  width: 28px;
  height: 28px;
  fill: #FFFFFF;
  display: block;
  margin: 0 auto;
}

.float-whatsapp:hover {
  background-color: #20ba5a;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45), 0 3px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .floating-actions {
    bottom: 18px;
    right: 18px;
    left: auto;
  }

  .float-btn,
  .float-whatsapp {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }

  .float-btn svg,
  .float-whatsapp svg {
    width: 24px !important;
    height: 24px !important;
  }

  .float-whatsapp:hover,
  .float-whatsapp:active {
    transform: scale(0.96) !important;
  }

  .footer-brand p,
  .brand-pitch-text {
    max-width: 100% !important;
  }
}

/* Global Rule 15: Clean SVG icon wrappers with border:0 and outline:none */
.stat-icon-wrapper,
.bento-icon-wrapper,
.feature-icon-box,
.ref-card-icon-box,
.pillar-icon-box,
.why-icon-box,
.icon-wrapper {
  border: 0 !important;
  outline: none !important;
}

/* Global Rule 16 & 17: Plain text address has no link styling or pointer cursor */
.ref-info-card-static,
.info-item span:not(:has(a)) {
  cursor: default !important;
  text-decoration: none !important;
}

/* PAGE SPECIFIC COMPONENT STYLING */

/* --- HOME PAGE --- */

/* Hero Section */
.hero-section {
  position: relative;
  overflow: visible;
  background-color: var(--ink-navy);
  padding: 60px 0 90px 0;
  display: flex;
  align-items: center;
}

.hero-grid-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;

  /* Base grid lines */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;

  /* Smooth vertical & radial fade mask - dissolves seamlessly into header & bottom section */
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 35%, transparent 95%),
    linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 35%, transparent 95%),
    linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;

  transform: none !important;
  opacity: 0.5;
}

/* Subtle amber & violet ambient gradient glow for rich dark depth */
.hero-grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255, 200, 47, 0.1) 0%, transparent 65%),
    radial-gradient(circle at 80% 50%, rgba(99, 102, 241, 0.07) 0%, transparent 60%);
  pointer-events: none;
}

/* Bright, rich 3D spotlight overlay immediately under the mouse cursor */
.hero-grid-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;

  /* Radial mask centered on mouse custom property */
  mask-image: radial-gradient(circle 280px at var(--mouse-x, -1000px) var(--mouse-y, -1000px), black 25%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle 280px at var(--mouse-x, -1000px) var(--mouse-y, -1000px), black 25%, transparent 100%);

  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero-section:hover .hero-grid-bg::after {
  opacity: 1.0;
}

/* Light Theme overrides */
html[data-theme="light"] .hero-grid-bg {
  background-image:
    linear-gradient(rgba(14, 20, 36, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 20, 36, 0.07) 1px, transparent 1px);
}

html[data-theme="light"] .hero-grid-bg::before {
  background: radial-gradient(circle at 50% 40%, rgba(255, 200, 47, 0.08) 0%, transparent 65%);
}

html[data-theme="light"] .hero-grid-bg::after {
  background-image:
    linear-gradient(rgba(14, 20, 36, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 20, 36, 0.3) 1px, transparent 1px);
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -10%;
  width: 50vw;
  height: 50vw;
  max-width: 600px;
  max-height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 47, 0.08) 0%, transparent 70%);
  filter: blur(80px);
  z-index: 1;
  pointer-events: none;
  animation: ambientFloat1 18s ease-in-out infinite alternate;
}

.hero-section::after {
  content: '';
  position: absolute;
  bottom: -10%;
  left: -10%;
  width: 45vw;
  height: 45vw;
  max-width: 500px;
  max-height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 79, 255, 0.06) 0%, transparent 70%);
  filter: blur(80px);
  z-index: 1;
  pointer-events: none;
  animation: ambientFloat2 15s ease-in-out infinite alternate;
}

@keyframes ambientFloat1 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(-30px, 40px) scale(1.1);
  }
}

@keyframes ambientFloat2 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(40px, -30px) scale(1.05);
  }
}

.hero-section .container {
  position: relative;
  z-index: 2;
  /* Sits above spotlight bg for interactivity */
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
}

.hero-title {
  font-size: 68px;
  line-height: 1.05;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

/* Screen-reader only — hides visually but keeps it in DOM for SEO/a11y */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}



.hero-subhead {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 580px;
}

/* Hero Left-Side Features Row */
.hero-features-row {
  display: flex;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.hero-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.feature-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0436aa !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFC82F !important;
  flex-shrink: 0;
  border: 1px solid rgba(255, 200, 47, 0.35) !important;
  box-shadow: 0 4px 14px rgba(4, 54, 170, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  transition: var(--transition-smooth);
}

.hero-feature-item:hover .feature-icon-circle {
  background: #032a85 !important;
  transform: scale(1.05);
  box-shadow: 0 0 16px rgba(4, 54, 170, 0.45) !important;
}

.feature-icon-circle svg,
.feature-icon-circle i {
  width: 20px;
  height: 20px;
}

.feature-text-group {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.feature-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--readout-white);
}

html[data-theme="light"] .feature-title {
  color: #0E1424;
}

.feature-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--static-gray);
}

html[data-theme="light"] .feature-subtitle {
  color: #5C6479;
}

/* Accent text color in title */
.text-accent {
  color: var(--amber);
  background: linear-gradient(135deg, var(--amber-bright), var(--amber));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.hero-actions {
  display: flex;
  gap: 16px;
}

/* --- Hero Orbital Animated Graphic --- */
.hero-orbital-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  margin-top: -30px;
  /* Pulls the entire orbital graphic up to reduce top space */
}

/* Orbital Rings */
.orbital-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px dashed var(--orbital-ring-color-2);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.orbital-ring-1 {
  width: 40%;
  height: 40%;
  border-style: solid;
  border-color: var(--orbital-ring-color-1);
  animation: orbitSpin 40s linear infinite;
}

.orbital-ring-2 {
  width: 66%;
  height: 66%;
  border-color: var(--orbital-ring-color-2);
  animation: orbitSpinReverse 55s linear infinite;
}

.orbital-ring-3 {
  width: 88%;
  height: 88%;
  border-color: var(--orbital-ring-color-3);
  border-width: 1.5px;
  animation: orbitSpin 70s linear infinite;
}

@keyframes orbitSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes orbitSpinReverse {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

/* Central Hub */
.orbital-center {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--panel-navy), var(--deck-navy));
  border: 2px solid var(--hairline-amber);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 40px rgba(255, 200, 47, 0.15),
    0 0 80px rgba(255, 200, 47, 0.05),
    inset 0 0 30px rgba(255, 200, 47, 0.05);
  z-index: 5;
  animation: centerPulse 4s ease-in-out infinite;
}

@keyframes centerPulse {

  0%,
  100% {
    box-shadow: 0 0 40px rgba(255, 200, 47, 0.15), 0 0 80px rgba(255, 200, 47, 0.05);
  }

  50% {
    box-shadow: 0 0 50px rgba(255, 200, 47, 0.25), 0 0 100px rgba(255, 200, 47, 0.1);
  }
}

.center-logo-svg {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 0 12px rgba(255, 200, 47, 0.4));
}

/* Floating Service Badges */
.orbital-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 200, 47, 0.22);
  border-radius: 14px;
  padding: 12px 16px;
  max-width: 175px;
  z-index: 6;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: badgeFloat 6s ease-in-out infinite;
}

.orbital-badge:hover {
  border-color: var(--amber);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 20px rgba(255, 200, 47, 0.15);
  transform: translateY(-4px) scale(1.04);
}

.badge-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 200, 47, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
  flex-shrink: 0;
}

.badge-icon svg,
.badge-icon i {
  width: 18px;
  height: 18px;
}

.badge-label {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--readout-white);
  line-height: 1.3;
  white-space: normal;
  line-height: 1.25;
  text-align: left;
}

/* Badge Positions */
.badge-targeting {
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0s;
}

.badge-creative {
  left: 1%;
  top: 45%;
  animation-delay: 1.5s;
}

.badge-performance {
  right: 1%;
  top: 45%;
  animation-delay: 3s;
}

.badge-revenue {
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 4.5s;
}

@keyframes badgeFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* Override float for centered badges */
.badge-targeting,
.badge-revenue {
  animation-name: badgeFloatCentered;
}

@keyframes badgeFloatCentered {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-8px);
  }
}

/* Floating Social Icons */
.orbital-social {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: socialBounce 5s ease-in-out infinite;
}

.orbital-social svg {
  width: 20px;
  height: 20px;
}

.orbital-social:hover {
  transform: scale(1.18);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
}

.social-fb {
  background: #1877F2;
  color: #fff;
  top: 18%;
  right: 8%;
  animation-delay: 0.6s;
}

.social-ig {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff;
  bottom: 18%;
  right: 8%;
  animation-delay: 1.8s;
}

.social-messenger {
  background: linear-gradient(135deg, #00B2FF, #006AFF);
  color: #fff;
  bottom: 26%;
  left: 8%;
  animation-delay: 3s;
}

@keyframes socialBounce {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-6px) scale(1.05);
  }
}

/* Floating Stat Pips */
.orbital-pip {
  position: absolute;
  background: rgba(26, 17, 10, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--hairline-amber);
  border-radius: 10px;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 6;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), 0 0 12px rgba(255, 200, 47, 0.08);
  animation: pipFloat 7s ease-in-out infinite;
}

.pip-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--amber-bright);
  line-height: 1;
}

.pip-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  color: var(--static-gray);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

.pip-1 {
  top: 22%;
  left: 8%;
  animation-delay: 2s;
}

.pip-2 {
  bottom: 14%;
  right: 16%;
  animation-delay: 4s;
}

@keyframes pipFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

/* Hero Orbital Responsive */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: center;
  }

  .hero-subhead {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-features-row {
    justify-content: center;
  }

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

  .hero-orbital-container {
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 38px;
  }

  /* Hide 3rd Hero Feature (Measurable Growth) only on mobile/phone screens */
  .hero-features-row .hero-feature-item:nth-child(3),
  .hero-features-row .hero-feature-item:last-child {
    display: none !important;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  /* Dynamic Fluid Width for Hero Orbital Graphic on All Mobile Screens */
  .hero-orbital-container {
    width: 100%;
    max-width: min(100%, 460px);
    margin: 0 auto;
    aspect-ratio: 1;
  }

  .orbital-badge {
    padding: clamp(6px, 1.8vw, 10px) clamp(8px, 2.4vw, 14px);
    border-radius: 12px;
  }

  .badge-icon {
    width: clamp(26px, 7vw, 34px);
    height: clamp(26px, 7vw, 34px);
    border-radius: 8px;
  }

  .badge-icon svg,
  .badge-icon i {
    width: clamp(13px, 3.5vw, 17px);
    height: clamp(13px, 3.5vw, 17px);
  }

  .badge-label {
    font-size: clamp(9.5px, 2.7vw, 12px);
    line-height: 1.25;
  }

  .orbital-social {
    width: clamp(32px, 8.5vw, 42px);
    height: clamp(32px, 8.5vw, 42px);
  }

  .orbital-social svg {
    width: clamp(15px, 4vw, 19px);
    height: clamp(15px, 4vw, 19px);
  }

  .orbital-center {
    width: clamp(68px, 18vw, 90px);
    height: clamp(68px, 18vw, 90px);
  }

  .center-logo-svg {
    width: clamp(34px, 9vw, 44px);
    height: clamp(34px, 9vw, 44px);
  }

  .orbital-pip {
    padding: clamp(5px, 1.5vw, 8px) clamp(8px, 2.5vw, 12px);
  }

  .pip-value {
    font-size: clamp(12px, 3.5vw, 15px);
  }
}

/* ─── About Intro Section ─── */
.about-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* LEFT: Stats Visual */
.about-visual {
  position: relative;
}

.about-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.about-stat-card {
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
  border: 1px solid rgba(255, 200, 47, 0.22);
  border-radius: 20px;
  padding: 28px 24px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 20px rgba(255, 200, 47, 0.06), inset 0 1px 2px rgba(255, 255, 255, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

html[data-theme="light"] .about-stat-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(14, 20, 36, 0.08) !important;
  box-shadow: 0 12px 32px rgba(14, 20, 36, 0.05) !important;
}

html[data-theme="light"] .about-stat-value {
  color: #0E1424 !important;
}

.about-stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 200, 47, 0.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.about-stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--hairline-amber);
  box-shadow: 0 12px 32px rgba(255, 200, 47, 0.08);
}

.about-stat-card:hover::before {
  opacity: 1;
}

.about-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 200, 47, 0.08);
  border: 1px solid rgba(255, 200, 47, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.about-stat-icon svg {
  width: 18px;
  height: 18px;
  color: var(--amber);
}

.about-stat-value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  color: var(--readout-white);
  line-height: 1;
  margin-bottom: 6px;
}

.about-stat-label {
  font-size: 13px;
  color: var(--static-gray);
  font-weight: 500;
  margin-bottom: 8px;
}

.about-stat-delta {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.about-stat-delta.up {
  color: #4ADE80;
}

/* Center Badge */
.about-center-badge {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.about-center-badge-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-bright) 100%);
  color: var(--ink-navy);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(255, 200, 47, 0.3);
}

.about-center-badge-inner svg {
  width: 16px;
  height: 16px;
}

/* RIGHT: About Text Content */
.about-content {
  max-width: 520px;
}


.about-collage {
  position: relative;
  display: flex;
  gap: 16px;
  width: 100%;
}

.growth-engine-card {
  width: 100%;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  background-color: var(--panel-navy);
  min-height: 360px;
}

.growth-engine-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 30px 64px rgba(0, 0, 0, 0.35);
}

.growth-engine-svg {
  display: block;
  width: 100%;
  height: auto;
}

.collage-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.collage-img-container {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background-color: var(--panel-navy);
  aspect-ratio: 0.9;
  position: relative;
}

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

.collage-col-offset {
  padding-top: 40px;
}

.badge-overlay-1 {
  position: absolute;
  bottom: 24px;
  left: -24px;
  background-color: var(--panel-navy);
  border: 1px solid var(--hairline-amber);
  border-radius: 8px;
  padding: 16px 24px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  z-index: 10;
  max-width: 180px;
}

.badge-text-mono {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--amber);
  display: block;
}

.badge-text-sub {
  font-size: 13px;
  color: var(--static-gray);
  margin-top: 4px;
  font-weight: 500;
}

.badge-overlay-2 {
  position: absolute;
  top: 16px;
  right: -16px;
  background-color: var(--amber);
  color: var(--ink-navy);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(255, 200, 47, 0.25);
  z-index: 10;
}

.about-content {
  max-width: 520px;
}

.about-content h2 {
  margin-bottom: 20px;
}

.about-eyebrow-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 200, 47, 0.06);
  border: 1px solid rgba(255, 200, 47, 0.15);
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.about-eyebrow-wrapper .eyebrow {
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--amber);
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.about-eyebrow-wrapper .badge-dot {
  width: 6px;
  height: 6px;
  background-color: var(--amber);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px var(--amber);
}

/* About Features List */
.about-features-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 32px 0 40px;
}

.about-feature-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.about-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 200, 47, 0.08);
  border: 1px solid rgba(255, 200, 47, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.about-feature-icon svg {
  width: 18px;
  height: 18px;
  color: var(--amber);
}

.about-feature-row strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--readout-white);
  margin-bottom: 4px;
}

.about-feature-row p {
  font-size: 13.5px;
  color: var(--static-gray);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 992px) {
  .about-intro-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-visual {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }

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

/* Pricing Section */
.pricing-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 60px auto;
}

.pricing-header h2 {
  margin-bottom: 16px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  gap: 32px;
  align-items: stretch;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle 280px at var(--px, 50%) var(--py, 0px), rgba(255, 200, 47, 0.15), transparent 75%),
    linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
  border: 1px solid rgba(255, 200, 47, 0.24);
  border-radius: 28px;
  padding: 36px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;

  /* Frosted Glass with Warm Amber Sheen */
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45), 0 0 24px rgba(255, 200, 47, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.15);
}

html[data-theme="light"] .pricing-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.85) 100%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1.5px solid rgba(255, 200, 47, 0.3) !important;
  box-shadow: 0 16px 40px rgba(255, 200, 47, 0.08), 0 0 1px 1px rgba(255, 255, 255, 0.95) inset, 0 0 20px rgba(255, 200, 47, 0.05) !important;
}

.pricing-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 200, 47, 0.35);
  box-shadow: 0 20px 48px rgba(255, 200, 47, 0.16), 0 0 24px rgba(255, 200, 47, 0.02);
}

html[data-theme="light"] .pricing-card:hover {
  border-color: rgba(255, 200, 47, 0.6) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.92) 100%) !important;
  box-shadow: 0 20px 48px rgba(255, 200, 47, 0.14), 0 0 25px rgba(255, 200, 47, 0.12) !important;
}

/* Standout Professional Look for the Popular Card */
.pricing-card.premium-plan {
  border: 2px solid transparent;
  background: radial-gradient(circle 240px at var(--px, 0px) var(--py, 0px), rgba(255, 200, 47, 0.15), transparent 80%), var(--panel-navy);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(var(--panel-navy), var(--panel-navy)), linear-gradient(135deg, var(--amber) 0%, var(--amber-bright) 100%);
  box-shadow: 0 24px 56px rgba(255, 200, 47, 0.18), 0 0 24px rgba(255, 200, 47, 0.04);
  transform: scale(1.05);
  z-index: 3;
}

html[data-theme="light"] .pricing-card.premium-plan {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.95)) padding-box, linear-gradient(135deg, var(--amber) 0%, var(--amber-bright) 100%) border-box !important;
  border: 2px solid transparent !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 24px 56px rgba(255, 200, 47, 0.16), 0 0 1px 1px rgba(255, 255, 255, 0.95) inset, 0 0 25px rgba(255, 200, 47, 0.08) !important;
}

.pricing-card.premium-plan:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 28px 64px rgba(255, 200, 47, 0.32), 0 0 32px rgba(255, 200, 47, 0.06);
}

html[data-theme="light"] .pricing-card.premium-plan:hover {
  box-shadow: 0 28px 64px rgba(255, 200, 47, 0.22), 0 0 32px rgba(255, 200, 47, 0.1) !important;
}

/* Static Glow Backdrops behind Icon */
.pricing-card-glow {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 47, 0.1) 0%, transparent 70%);
  filter: blur(35px);
  top: -20px;
  right: -20px;
  z-index: 0;
  pointer-events: none;
  transition: transform 0.6s ease-out;
}

.premium-plan .pricing-card-glow {
  background: radial-gradient(circle, rgba(255, 200, 47, 0.22) 0%, transparent 70%);
  filter: blur(30px);
}

.plan-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.plan-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 200, 47, 0.06);
  border: 1px solid rgba(255, 200, 47, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease, border-color 0.3s ease;
  position: relative;
  z-index: 2;
}

.pricing-card.premium-plan .plan-icon-wrapper {
  background: rgba(255, 200, 47, 0.15);
  border-color: rgba(255, 200, 47, 0.35);
  box-shadow: 0 0 12px rgba(255, 200, 47, 0.15);
}

.pricing-card:hover .plan-icon-wrapper {
  transform: rotate(12deg) scale(1.08);
  background-color: var(--amber);
  border-color: var(--amber);
}

.plan-icon-wrapper svg {
  color: var(--amber);
  width: 24px;
  height: 24px;
  transition: color 0.3s ease;
}

.pricing-card:hover .plan-icon-wrapper svg {
  color: #120A03 !important;
}

/* Highly Prominent Badge for Popular Plan */
.pricing-badge {
  background: rgba(255, 200, 47, 0.15);
  color: var(--amber);
  border: 1px solid rgba(255, 200, 47, 0.3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(255, 200, 47, 0.1);
  display: inline-block;
}

.plan-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--readout-white);
  position: relative;
  z-index: 2;
}

.plan-desc {
  font-size: 13.5px;
  color: var(--static-gray);
  margin-bottom: 24px;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}

.plan-price-box {
  margin-bottom: 24px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.plan-price {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #FFFFFF 0%, #D1D5DB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.premium-plan .plan-price {
  background: linear-gradient(135deg, #FFFFFF 0%, var(--amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.plan-period {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--static-gray);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Clean, Spacious Content Block (Removed Nested Box-in-a-Box border/bg) */
.plan-inner-card {
  background-color: transparent;
  border: none;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  padding: 24px 0 0 0;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  box-shadow: none;
  position: relative;
  z-index: 2;
}

.premium-plan .plan-inner-card {
  border-top-color: var(--hairline-amber);
}

.plan-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.plan-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  color: var(--readout-white);
  line-height: 1.45;
  font-weight: 500;
  transition: var(--transition-smooth);
}

.plan-feature-item:hover {
  transform: translateX(2px);
}

/* Cohesive circular checklist badges matching About Section */
.plan-feature-item svg {
  color: #FFC82F;
  background: #0436aa;
  border: 1px solid rgba(255, 200, 47, 0.35);
  padding: 4px;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  flex-shrink: 0;
  transition: var(--transition-smooth);
}

.plan-feature-item:hover svg,
.plan-feature-item:hover .feature-icon-clock {
  background: #032a85;
  color: #FFC82F;
  transform: scale(1.1);
}

.plan-feature-item .feature-icon-clock {
  color: #FFC82F;
  background: #0436aa;
  border: 1px solid rgba(255, 200, 47, 0.35);
  padding: 4px;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  flex-shrink: 0;
}

.pricing-card .btn {
  width: 100%;
  margin-top: auto;
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

/* Card 1 & 3: Secondary Glass / Outline Tier */
.pricing-card .btn-outline {
  --button-color: rgba(14, 20, 36, 0.8);
  border: 1.5px solid rgba(255, 200, 47, 0.4);
  color: #FFFFFF !important;
}

.pricing-card .btn-outline:hover {
  border-color: var(--amber);
  color: #FFFFFF !important;
}

html[data-theme="light"] .pricing-card .btn-outline {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%) !important;
  border: 1.5px solid #FFC82F !important;
  color: #FFC82F !important;
  text-shadow: none !important;
  box-shadow: 0 3px 10px rgba(255, 200, 47, 0.15), inset 0 1px 1px #FFFFFF !important;
}

html[data-theme="light"] .pricing-card .btn-outline svg,
html[data-theme="light"] .pricing-card .btn-outline i {
  color: #FFC82F !important;
  stroke: #FFC82F !important;
}

html[data-theme="light"] .pricing-card .btn-outline:hover {
  background: linear-gradient(135deg, #FFE066 0%, #FFC82F 50%, #FFC82F 100%) !important;
  border-color: #FFC82F !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 24px rgba(255, 200, 47, 0.45) !important;
}

html[data-theme="light"] .pricing-card .btn-outline:hover svg,
html[data-theme="light"] .pricing-card .btn-outline:hover i {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* Card 2: Featured Popular Hero Button */
.pricing-card.premium-plan .btn-filled {
  --highlight-color-hue: 35deg;
}

html[data-theme="light"] .pricing-card.premium-plan .btn-filled {
  background: linear-gradient(135deg, #FFE066 0%, #FFC82F 50%, #FFC82F 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: #FFFFFF !important;
  text-shadow: none !important;
  font-weight: 500 !important;
  box-shadow:
    0 6px 20px rgba(255, 200, 47, 0.45),
    inset 0px 1px 1px rgba(255, 255, 255, 0.7),
    inset 0px -2px 3px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="light"] .pricing-card.premium-plan .btn-filled:hover {
  background: linear-gradient(135deg, #FFC82F 0%, #FFC82F 50%, #FFC82F 100%) !important;
  box-shadow:
    0 10px 28px rgba(255, 200, 47, 0.55),
    inset 0px 1px 1px rgba(255, 255, 255, 0.85) !important;
  color: #FFFFFF !important;
}

/* Light Theme overrides for pricing card text colors */
html[data-theme="light"] .plan-title {
  color: #0E1424 !important;
}

html[data-theme="light"] .plan-desc {
  color: #5C6479 !important;
}

html[data-theme="light"] .plan-price {
  background: linear-gradient(135deg, #0E1424 0%, #2A354F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .premium-plan .plan-price {
  background: linear-gradient(135deg, #0E1424 0%, var(--amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .plan-feature-item {
  color: #0E1424 !important;
}

html[data-theme="light"] .plan-feature-item svg,
html[data-theme="light"] .plan-feature-item .feature-icon-clock {
  background: #0436aa !important;
  border: 1px solid rgba(255, 200, 47, 0.35) !important;
  border-radius: 50% !important;
  color: #FFC82F !important;
}

html[data-theme="light"] .plan-inner-card {
  border-top-color: rgba(14, 20, 36, 0.1) !important;
}

html[data-theme="light"] .plan-icon-wrapper {
  background: rgba(255, 200, 47, 0.15) !important;
  border-color: rgba(255, 200, 47, 0.25) !important;
}

html[data-theme="light"] .pricing-card:hover .plan-icon-wrapper {
  background: linear-gradient(135deg, var(--amber-bright) 0%, var(--amber) 100%) !important;
  border-color: var(--amber) !important;
  box-shadow: 0 4px 14px rgba(255, 200, 47, 0.35) !important;
}

html[data-theme="light"] .pricing-card:hover .plan-icon-wrapper svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

@media (max-width: 1024px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 500px;
    margin: 0 auto;
  }

  .pricing-card.premium-plan {
    transform: none;
  }

  .pricing-card.premium-plan:hover {
    transform: translateY(-8px);
  }
}

/* Process Section */
.process-header {
  text-align: center;
  max-width: 1060px;
  margin: 0 auto 60px auto;
}

.process-header h2 {
  max-width: 800px;
  margin: 0 auto 16px auto;
  font-size: 46px;
  line-height: 53px;
  text-wrap: balance;
}

.process-header p {
  max-width: 1020px;
  margin: 0 auto;
  text-wrap: balance;
}

.process-grid.accordion-gallery {
  display: flex;
  flex-direction: row;
  gap: 24px;
  width: 100%;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  align-items: stretch;
}

.ag-panel {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 460px;
  overflow: hidden;
  border-radius: 24px;
  cursor: pointer;
  display: block;
  text-decoration: none;
  outline: none;
  transform-origin: center center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  will-change: flex-grow, transform;
}

.ag-panel__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
}

.ag-panel__media {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.ag-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.ag-panel__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0.45) 70%, rgba(0, 0, 0, 0.1) 100%);
}

.ag-panel__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.process-text-block {
  position: absolute;
  bottom: 20px;
  left: 24px;
  right: 24px;
  width: auto;
  max-width: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: auto;
  opacity: 1;
  z-index: 3;
}

.process-icon-wrapper {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--process-icon-bg-inactive);
  border: 1px solid var(--process-icon-border-inactive);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: auto;
}

.process-icon-wrapper svg {
  width: 22px;
  height: 22px;
  color: var(--process-icon-color-inactive);
  transition: color 0.3s ease;
}

.process-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFE066 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  padding: 4px 12px;
  border-radius: 30px;
  margin-bottom: 6px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.process-title {
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
}

.process-desc {
  position: relative;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 400;
  line-height: 1.5;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
  margin-top: 6px;
}

/* Light Theme overrides for Accordion */
html[data-theme="light"] .ag-panel {
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 200, 47, 0.08);
  box-shadow: 0 8px 32px rgba(255, 200, 47, 0.03);
}

/* Floating Elements for Process Section */
.process-float-element {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline-amber);
  padding: 10px 16px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: 0.9;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.process-float-left {
  top: 40px;
  left: 6%;
  animation: processFloatLeft 5s ease-in-out infinite alternate;
}

.process-float-right {
  top: 60px;
  right: 6%;
  animation: processFloatRight 6s ease-in-out infinite alternate;
}

.process-float-element svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2px;
}

html[data-theme="light"] .process-float-element {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 200, 47, 0.25);
  box-shadow: 0 8px 32px rgba(255, 200, 47, 0.05);
  color: var(--amber);
  opacity: 0.75;
}

@keyframes processFloatLeft {
  0% {
    transform: translateY(0) rotate(-2deg);
  }

  100% {
    transform: translateY(-12px) rotate(2deg);
  }
}

@keyframes processFloatRight {
  0% {
    transform: translateY(0) rotate(2deg);
  }

  100% {
    transform: translateY(-15px) rotate(-2deg);
  }
}

/* Hide floating elements on mobile viewports */
@media (max-width: 992px) {
  .process-float-element {
    display: none;
  }
}

@media (max-width: 992px) {
  .process-grid.accordion-gallery {
    flex-direction: column;
    perspective: none;
    height: auto !important;
    gap: 24px;
  }

  .ag-panel {
    height: auto !important;
    min-height: auto;
    padding: 32px;
    transform: none !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .ag-panel__content {
    position: static;
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .process-icon-wrapper {
    position: static;
    margin-bottom: 0;
  }

  .process-text-block {
    position: static;
    width: 100% !important;
    max-width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 16px;
    height: auto !important;
  }

  .process-title {
    white-space: normal !important;
    /* Allow wrapping on mobile */
  }

  .process-desc {
    position: static !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    opacity: 1 !important;
    height: auto !important;
    margin-top: 12px !important;
    overflow: visible !important;
  }
}

/* Why Choose Us Section */
#why-choose-us {
  padding: 80px 0 100px 0;
}

.why-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.why-content {
  flex: 0 1 500px;
  max-width: 500px;
}

.why-desc {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--static-gray);
  margin-bottom: 32px;
}

.why-checklist {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 36px;
}

.why-check-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.why-check-icon {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(255, 200, 47, 0.12);
  border: 1px solid var(--hairline-amber);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.why-check-icon svg {
  width: 12px;
  height: 12px;
  color: var(--amber);
  stroke-width: 2.5px;
}

html[data-theme="light"] .why-check-icon {
  background: rgba(255, 200, 47, 0.12) !important;
  border: 1px solid rgba(255, 200, 47, 0.3) !important;
}

.why-check-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--readout-white);
}

.why-features-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 36px;
  backdrop-filter: blur(10px);
}

html[data-theme="light"] .why-features-card {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(14, 20, 36, 0.06);
}

.why-feature-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.why-feature-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

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

.why-feature-icon-box.orange-tint {
  background: rgba(255, 200, 47, 0.1);
  color: var(--amber);
  border: 1px solid rgba(255, 200, 47, 0.15);
}

.why-feature-icon-box.red-tint {
  background: rgba(255, 75, 75, 0.08);
  color: #ff5252;
  border: 1px solid rgba(255, 75, 75, 0.15);
}

.why-feature-icon-box.green-tint {
  background: rgba(43, 203, 119, 0.08);
  color: #2bcb77;
  border: 1px solid rgba(43, 203, 119, 0.15);
}

.why-feature-col h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--readout-white);
  line-height: 1.3;
  white-space: nowrap;
}

html[data-theme="light"] .why-feature-col h4 {
  color: #0E1424 !important;
}

.why-feature-col p {
  font-size: 14px;
  color: var(--static-gray);
  line-height: 1.5;
}

html[data-theme="light"] .why-feature-col p {
  color: #5C6479 !important;
}

html[data-theme="light"] .why-check-text {
  color: #0E1424 !important;
}

.why-bottom-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.btn-whatsapp,
.why-whatsapp-btn {
  --button-color: #040594;
  background: #040594 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  text-shadow: none !important;
  font-weight: 500 !important;
  box-shadow:
    0 4px 14px rgba(2, 63, 205, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.btn-whatsapp::before,
.why-whatsapp-btn::before {
  border-color: rgba(2, 63, 205, 0.22) !important;
  box-shadow: 0 4px 14px rgba(2, 63, 205, 0.12) !important;
}

.btn-whatsapp:hover,
.why-whatsapp-btn:hover {
  background: #03046e !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  box-shadow:
    0 6px 18px rgba(3, 4, 110, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.btn-whatsapp:hover::before,
.why-whatsapp-btn:hover::before {
  border-color: rgba(2, 63, 205, 0.4) !important;
  box-shadow: 0 4px 18px rgba(2, 63, 205, 0.25) !important;
}

html[data-theme="light"] .btn-whatsapp,
html[data-theme="light"] .why-whatsapp-btn {
  --button-color: #040594;
  background: #040594 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow:
    0 4px 14px rgba(2, 63, 205, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="light"] .btn-whatsapp::before,
html[data-theme="light"] .why-whatsapp-btn::before {
  border-color: rgba(2, 63, 205, 0.22) !important;
  box-shadow: 0 4px 14px rgba(2, 63, 205, 0.12) !important;
}

html[data-theme="light"] .btn-whatsapp:hover,
html[data-theme="light"] .why-whatsapp-btn:hover {
  background: #03046e !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  box-shadow:
    0 6px 18px rgba(3, 4, 110, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

html[data-theme="light"] .btn-whatsapp:hover::before,
html[data-theme="light"] .why-whatsapp-btn:hover::before {
  border-color: rgba(2, 63, 205, 0.4) !important;
  box-shadow: 0 4px 18px rgba(2, 63, 205, 0.25) !important;
}

.why-social-proof {
  display: flex;
  align-items: center;
  gap: 16px;
}

.why-avatars {
  display: flex;
  align-items: center;
}

.why-avatars img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--ink-navy);
  margin-left: -12px;
}

html[data-theme="light"] .why-avatars img {
  border-color: #ffffff;
}

.why-avatars img:first-child {
  margin-left: 0;
}

.why-trust-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.trust-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--static-gray);
  margin-bottom: 4px;
}

.trust-stars {
  display: flex;
  gap: 2px;
}

.trust-stars svg {
  width: 11px;
  height: 11px;
  fill: #FFE066;
  color: #FFE066;
}

/* Right Column Visual Mockup */
.why-visual-container {
  position: relative;
  flex: 0 1 650px;
  width: 100%;
  max-width: 650px;
  aspect-ratio: 700 / 620;
  height: auto;
  container-type: inline-size;
  margin-left: auto;
  margin-right: 0;
}

.why-connecting-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.why-path-pulse {
  stroke-dasharray: 40 180;
  animation: whyPathPulseAnim 4s linear infinite;
}

.why-path-pulse--slow {
  stroke-dasharray: 50 300;
  animation: whyPathPulseAnim 7s linear infinite 1s;
}

.why-path-pulse--mid {
  stroke-dasharray: 40 180;
  animation: whyPathPulseAnim 5s linear infinite 2.5s;
}

@keyframes whyPathPulseAnim {
  0% {
    stroke-dashoffset: 280;
  }

  100% {
    stroke-dashoffset: -280;
  }
}

.why-dashboard-card {
  position: absolute;
  top: 19.35%;
  /* 120px / 620px */
  left: 18.57%;
  /* 130px / 700px */
  width: 62.85%;
  /* 440px / 700px */
  height: 54.83%;
  /* 340px / 620px */
  background: var(--panel-navy);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
  display: flex;
  z-index: 2;
  overflow: hidden;
  backdrop-filter: blur(15px);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

html[data-theme="light"] .why-dashboard-card {
  background: #ffffff;
  box-shadow: 0 25px 60px rgba(14, 20, 36, 0.08);
}

.why-dashboard-card:hover {
  transform: translateY(-6px) scale(1.01) rotateX(1deg);
}

.why-dash-sidebar {
  width: 11.36%;
  /* 50px / 440px */
  background: #090d16;
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3cqw 0;
  gap: 2.2cqw;
  flex-shrink: 0;
}

html[data-theme="light"] .why-dash-sidebar {
  background: #f4f6fc;
}

.why-dash-side-icon {
  width: 4.5cqw;
  height: 4.5cqw;
  min-width: 20px;
  min-height: 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--static-gray);
  cursor: default;
  transition: all 0.2s ease;
}

.why-dash-side-icon svg {
  width: 2.2cqw;
  height: 2.2cqw;
  min-width: 10px;
  min-height: 10px;
}

.why-dash-side-icon.active {
  background: rgba(255, 200, 47, 0.1);
  color: var(--amber);
}

.why-dash-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 3.4cqw;
}

.why-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.why-dash-header h4 {
  font-size: 2cqw;
  font-weight: 700;
  color: var(--readout-white);
}

.why-dash-dropdown {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 0.8cqw 1.6cqw;
  display: flex;
  align-items: center;
  gap: 1cqw;
  font-size: 1.5cqw;
  color: var(--static-gray);
  cursor: pointer;
}

html[data-theme="light"] .why-dash-dropdown {
  background: #f4f6fc;
}

.why-dash-dropdown svg {
  width: 12px;
  height: 12px;
}

.why-dash-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4cqw;
  margin-bottom: 3.4cqw;
}

.why-dash-metric {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 1.7cqw 1.4cqw;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

html[data-theme="light"] .why-dash-metric {
  background: #fdfdfd;
}

.why-metric-label {
  font-size: 1.4cqw;
  color: var(--static-gray);
  margin-bottom: 0.8cqw;
}

.why-metric-val {
  font-size: 2.1cqw;
  font-weight: 700;
  color: var(--readout-white);
  margin-bottom: 0.5cqw;
}

.why-metric-diff {
  font-size: 1.2cqw;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3cqw;
}

.why-metric-diff.up {
  color: #2bcb77;
}

.why-metric-diff.down {
  color: #ff4b4b;
}

.why-metric-diff svg {
  width: 1.1cqw;
  height: 1.1cqw;
}

.why-dash-metric.active {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
}

.why-dash-metric.active .why-metric-label {
  color: rgba(255, 255, 255, 0.8) !important;
}

.why-dash-metric.active .why-metric-val {
  color: #ffffff !important;
}

.why-dash-metric.active .why-metric-diff.up {
  color: #ffffff !important;
}

.why-dash-metric.active .why-metric-diff.down {
  color: rgba(255, 255, 255, 0.95) !important;
}

.why-dash-chart {
  flex: 1;
  position: relative;
  display: flex;
  align-items: flex-end;
}

.why-dash-chart svg {
  width: 100%;
  height: 100%;
}

.chart-axis-label {
  font-size: 8px;
  fill: var(--static-gray);
  font-weight: 500;
}

/* Badges styling */
.why-badge-stat {
  position: absolute;
  /* Crucial: make badges absolute */
  background: var(--panel-navy);
  border: 1px solid var(--hairline);
  padding: 8px 12px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  z-index: 3;
  width: auto;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

html[data-theme="light"] .why-badge-stat {
  background: #ffffff;
  border: 1px solid rgba(14, 20, 36, 0.08);
  box-shadow: 0 10px 30px rgba(14, 20, 36, 0.05);
}



.why-badge-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(255, 200, 47, 0.2);
}

.badge-icon-box {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.badge-icon-box.orange-bg {
  background: var(--amber);
  color: var(--ink-navy);
}

html[data-theme="light"] .badge-icon-box.orange-bg {
  color: #ffffff;
}

.badge-icon-box svg {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}

.badge-stat-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.badge-stat-num {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--readout-white);
  line-height: 1.1;
}

html[data-theme="light"] .badge-stat-num {
  color: #0E1424;
}

.badge-stat-lbl {
  font-size: 11px;
  color: var(--static-gray);
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.2;
}

html[data-theme="light"] .badge-stat-lbl {
  color: #5C6479;
}

/* Absolute positions for floating badges relative to container */
.why-badge--top {
  top: 4.83%;
  left: 37.14%;
}

.why-badge--bottom-left {
  top: 77.42%;
  left: 4%;
}

.why-badge--bottom-center {
  top: 85.48%;
  left: 38%;
}

.why-badge--bottom-right {
  top: 77.42%;
  left: 72%;
}

@media (max-width: 992px) {
  .why-grid {
    flex-direction: column;
    gap: 40px;
  }

  .why-content {
    max-width: 100%;
    flex: 1 1 auto;
  }

  .why-features-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .why-bottom-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    margin-top: 14px;
  }

  .why-bottom-row .btn {
    flex: 1 1 0;
    width: auto;
    padding: 11px 10px;
    font-size: 13px;
    white-space: nowrap;
    justify-content: center;
    text-align: center;
  }

  .why-connecting-svg {
    display: none;
  }

  /* Responsive 2-Column Mobile Visual Grid */
  .why-visual-container {
    height: auto;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }

  /* Dashboard Card spans full width on top */
  .why-dashboard-card {
    grid-column: 1 / -1;
    position: static;
    width: 100%;
    height: auto;
    min-height: 280px;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
  }

  .why-dash-sidebar {
    width: 44px;
    padding: 16px 0;
    gap: 10px;
  }

  .why-dash-side-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 6px;
  }

  .why-dash-side-icon svg,
  .why-dash-side-icon i {
    width: 14px;
    height: 14px;
  }

  .why-dash-main {
    padding: 18px 16px;
  }

  .why-dash-header {
    margin-bottom: 14px;
  }

  .why-dash-header h4 {
    font-size: 15px;
  }

  .why-dash-dropdown {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
  }

  .why-dash-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 14px;
  }

  .why-dash-metric {
    padding: 8px 6px;
    border-radius: 8px;
    text-align: center;
    align-items: center;
  }

  .why-metric-label {
    font-size: 10px;
    margin-bottom: 2px;
  }

  .why-metric-val {
    font-size: 14px;
    margin-bottom: 2px;
  }

  .why-metric-diff {
    font-size: 9px;
  }

  .why-dash-chart {
    height: 90px;
    min-height: 80px;
  }

  /* Sleek 2x2 Badges Grid on Mobile */
  .why-badge-stat {
    grid-column: span 1;
    position: static;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 14px 14px;
    border-radius: 14px;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .badge-icon-box {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  .badge-icon-box svg,
  .badge-icon-box i {
    width: 18px;
    height: 18px;
  }

  .badge-stat-num {
    font-size: 19px !important;
    font-weight: 800;
    line-height: 1.15;
  }

  .badge-stat-lbl {
    font-size: 12.5px !important;
    font-weight: 600;
    white-space: normal;
    line-height: 1.25;
  }
}

@media (max-width: 480px) {
  .why-dash-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .why-dash-metric {
    padding: 8px 10px;
    text-align: left;
    align-items: flex-start;
  }

  .why-metric-label {
    font-size: 11px;
  }

  .why-metric-val {
    font-size: 15px;
  }

  .why-badge-stat {
    padding: 14px 12px;
    gap: 10px;
  }

  .badge-icon-box {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .badge-stat-num {
    font-size: 18px !important;
    font-weight: 800;
  }

  .badge-stat-lbl {
    font-size: 12px !important;
    font-weight: 600;
    white-space: normal;
  }
}

/* Stats Section */
#stats {
  padding: 40px 0 90px 0;
  position: relative;
  overflow: hidden;
}

.stats-header {
  text-align: center;
  max-width: 960px;
  margin: 0 auto 50px auto;
}

.stats-header h2 {
  font-size: 46px;
  line-height: 53px;
  font-weight: 800;
  color: var(--readout-white);
  margin-bottom: 16px;
}

.stats-header p {
  max-width: 740px;
  margin: 0 auto;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--static-gray);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

/* Premium Stat Cards */
.stat-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
  border: 1px solid rgba(255, 200, 47, 0.35);
  border-radius: 20px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 20px rgba(255, 200, 47, 0.06), inset 0 1px 2px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
}

html[data-theme="light"] .stat-card {
  background: linear-gradient(145deg, #ffffff 0%, rgba(255, 200, 47, 0.08) 100%);
  border-color: rgba(255, 200, 47, 0.4);
  box-shadow: 0 14px 40px rgba(14, 20, 36, 0.05);
}

.stat-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 200, 47, 0.5);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25), 0 0 25px rgba(255, 200, 47, 0.12);
}

html[data-theme="light"] .stat-card:hover {
  box-shadow: 0 20px 48px rgba(14, 20, 36, 0.08), 0 0 25px rgba(255, 200, 47, 0.15);
  border-color: rgba(255, 200, 47, 0.6);
}

/* Card Top Bar */
.stat-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.stat-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--amber) !important;
  border: 0 !important;
  outline: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #040594 !important;
  box-shadow: 0 4px 14px rgba(255, 200, 47, 0.3);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.stat-icon-wrapper svg,
.stat-icon-wrapper i {
  width: 22px;
  height: 22px;
  color: #040594 !important;
  stroke: #040594 !important;
}

.stat-card:hover .stat-icon-wrapper {
  transform: scale(1.08) rotate(3deg);
  background: var(--amber-bright, #FFE066) !important;
  border: 0 !important;
  outline: none !important;
  color: #040594 !important;
  box-shadow: 0 6px 18px rgba(255, 200, 47, 0.45);
}

.stat-card:hover .stat-icon-wrapper svg,
.stat-card:hover .stat-icon-wrapper i {
  color: #040594 !important;
  stroke: #040594 !important;
}

html[data-theme="light"] .stat-icon-wrapper {
  background: #040594 !important;
  border: 0 !important;
  outline: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(2, 63, 205, 0.25);
}

html[data-theme="light"] .stat-icon-wrapper svg,
html[data-theme="light"] .stat-icon-wrapper i {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

html[data-theme="light"] .stat-card:hover .stat-icon-wrapper {
  background: #040594 !important;
  border: 0 !important;
  outline: none !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(4, 5, 148, 0.35);
}

html[data-theme="light"] .stat-card:hover .stat-icon-wrapper svg,
html[data-theme="light"] .stat-card:hover .stat-icon-wrapper svg *,
html[data-theme="light"] .stat-card:hover .stat-icon-wrapper i {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.stat-badge-pill {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--static-gray);
  border: 1px solid var(--hairline);
}

html[data-theme="light"] .stat-badge-pill {
  background: #f4f6fc;
  color: #5a667f;
}

.stat-badge-pill.pill--highlight {
  background: rgba(43, 203, 119, 0.12);
  color: #2bcb77;
  border-color: rgba(43, 203, 119, 0.3);
}

/* Stat Numbers & Text */
.stat-value {
  font-family: var(--font-heading);
  font-size: 46px;
  font-weight: 800;
  color: var(--readout-white);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.stat-unit {
  color: var(--amber);
  font-size: 36px;
  margin-left: 2px;
}

.stat-value.text-gradient-amber {
  background: linear-gradient(135deg, var(--readout-white) 30%, var(--amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--readout-white);
  margin-bottom: 8px;
}

.stat-description {
  font-size: 13px;
  line-height: 1.55;
  color: var(--static-gray);
  margin-bottom: 20px;
  flex: 1;
}

/* Card Footer Tag */
.stat-footer-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--static-gray);
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.stat-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
}

.stat-pulse-dot.active {
  background: #2bcb77;
  box-shadow: 0 0 8px #2bcb77;
}

.stat-stars {
  color: #FFE066;
  letter-spacing: 2px;
  font-size: 11px;
}

.stat-spark-icon {
  font-size: 13px;
}

.stat-footer-tag.tag--highlight {
  color: var(--amber);
}

/* Featured Stat Card (Hero Spotlight) */
.stat-card--featured {
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
  border-color: rgba(255, 200, 47, 0.35);
}

html[data-theme="light"] .stat-card--featured {
  background: linear-gradient(145deg, #ffffff 0%, rgba(255, 200, 47, 0.08) 100%);
  border-color: rgba(255, 200, 47, 0.4);
}

.stat-featured-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 47, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

/* Bottom Trust & Attribution Bar */
.stats-trust-bar {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  padding: 16px 28px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
}

.stats-trust-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 200, 47, 0.04) 50%, rgba(255, 255, 255, 0.02) 100%);
  pointer-events: none;
  z-index: 0;
}

html[data-theme="light"] .stats-trust-bar {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 32px rgba(14, 20, 36, 0.06), 0 2px 8px rgba(14, 20, 36, 0.03), inset 0 1px 1px rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

html[data-theme="light"] .stats-trust-bar::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 200, 47, 0.08) 50%, rgba(255, 255, 255, 0.35) 100%);
}

.trust-bar-item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--readout-white);
  white-space: nowrap;
}

.trust-bar-item:nth-child(1) {
  justify-self: start;
  padding-left: 20px;
}

.trust-bar-item:nth-child(3) {
  justify-self: center;
}

.trust-bar-item:nth-child(5) {
  justify-self: end;
  padding-right: 20px;
}

.trust-bar-item svg {
  width: 16px;
  height: 16px;
  color: var(--amber);
  flex-shrink: 0;
}

.trust-bar-divider {
  position: relative;
  z-index: 1;
  width: 1px;
  height: 18px;
  background: var(--hairline);
}

/* Responsive Media Queries */
@media (max-width: 1100px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .stats-header h2 {
    font-size: 28px;
  }

  .stats-trust-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 20px;
    padding: 22px 18px;
    text-align: center;
  }

  .trust-bar-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 0 !important;
  }

  .trust-bar-item:nth-child(1),
  .trust-bar-item:nth-child(3),
  .trust-bar-item:nth-child(5) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-self: center !important;
  }

  .trust-bar-divider {
    display: none;
  }
}

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

/* Portfolio Section */
.portfolio-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 60px auto;
}

.portfolio-header h2 {
  font-size: 46px;
  line-height: 53px;
  font-weight: 800;
  color: var(--readout-white);
  margin-bottom: 16px;
}

.portfolio-header p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--static-gray);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Portfolio Case Card */
.portfolio-case-card {
  background-color: var(--panel-navy);
  border: 1.5px solid rgba(255, 200, 47, 0.35);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: none !important;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
}

/* ========================================== */
/* ─── Case Study Interactive Popup Modal ─── */
/* ========================================== */
.case-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.case-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 15, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.case-modal-dialog {
  position: relative;
  width: 90%;
  max-width: 920px;
  max-height: 88vh;
  overflow: hidden;
  background: var(--panel-navy);
  border: 1px solid rgba(255, 200, 47, 0.35);
  border-radius: 20px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7), 0 0 35px rgba(255, 200, 47, 0.15);
  transform: scale(0.95) translateY(15px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

html[data-theme="light"] .case-modal-dialog {
  background: #ffffff;
  border-color: rgba(255, 200, 47, 0.4);
  box-shadow: 0 25px 80px rgba(14, 20, 36, 0.2), 0 0 30px rgba(255, 200, 47, 0.15);
}

.case-modal.active .case-modal-dialog {
  transform: scale(1) translateY(0);
}

.case-modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #012985;
  border: 1px solid rgba(255, 200, 47, 0.4);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .case-modal-close-btn {
  background: #0E1424;
  border-color: rgba(14, 20, 36, 0.2);
  color: #ffffff;
}

.case-modal-close-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.5;
  display: block;
}

.case-modal-close-btn:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: #ffffff;
  transform: rotate(90deg) scale(1.08);
  box-shadow: 0 6px 20px rgba(255, 200, 47, 0.4);
}

.case-modal-body {
  padding: 24px;
}

/* Two Column Compact Layout */
.case-modal-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
  align-items: stretch;
}

/* Left Column: Dashboard Preview */
.modal-left-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.modal-browser-frame {
  border-radius: 12px;
  border: 1px solid var(--hairline);
  overflow: hidden;
  background: #100A05;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

.modal-browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #1A1008;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-traffic-dots {
  display: flex;
  gap: 6px;
}

.modal-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.modal-dot.red {
  background: #ff5f56;
}

.modal-dot.yellow {
  background: #FFC82F;
}

.modal-dot.green {
  background: #27c93f;
}

.modal-url-pill {
  background: rgba(255, 255, 255, 0.16);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 280px;
}

.modal-url-icon {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  stroke-width: 2.5;
  color: rgba(255, 255, 255, 0.75);
  flex-shrink: 0;
  display: block;
}

.modal-url-text {
  font-family: 'Poppins', var(--font-body), sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
  line-height: 1.4;
  padding-bottom: 1.5px;
}

.modal-img-container {
  width: 100%;
  flex: 1;
  min-height: 290px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.modal-dashboard-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Right Column: Case Details & Metrics */
.modal-right-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding-right: 28px;
}

.modal-header-block {
  margin-bottom: 2px;
}

.modal-badge-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.modal-metric-badge {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--amber);
  background: rgba(255, 200, 47, 0.12);
  border: 1px solid rgba(255, 200, 47, 0.3);
  padding: 2px 10px;
  border-radius: 20px;
}

.modal-tag-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--static-gray);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline);
  padding: 2px 8px;
  border-radius: 20px;
}

html[data-theme="light"] .modal-tag-badge {
  background: #f4f6fc;
}

.modal-case-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--readout-white);
  line-height: 1.3;
}

/* Modal KPIs Grid */
.modal-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.modal-kpi-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

html[data-theme="light"] .modal-kpi-card {
  background: #f8fafc;
  border-color: rgba(14, 20, 36, 0.08);
}

.modal-kpi-card.highlight {
  background: rgba(255, 200, 47, 0.08);
  border-color: rgba(255, 200, 47, 0.35);
}

.modal-kpi-lbl {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--static-gray);
  font-weight: 600;
}

.modal-kpi-val {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--readout-white);
}

.modal-kpi-card.highlight .modal-kpi-val {
  color: var(--amber);
}

/* Strategy Box */
.modal-strategy-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 12px;
}

html[data-theme="light"] .modal-strategy-box {
  background: #fbfcfe;
  border-color: rgba(14, 20, 36, 0.08);
}

.modal-strategy-text {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--static-gray);
  margin-bottom: 6px;
}

.modal-strategy-text strong {
  color: var(--readout-white);
}

.modal-highlights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-highlights-list li {
  font-size: 11px;
  line-height: 1.35;
  color: var(--readout-white);
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-highlights-list li::before {
  content: "✓";
  color: #2bcb77;
  font-weight: 800;
  font-size: 12px;
}

/* Modal Action CTA */
.modal-action-row {
  margin-top: 10px;
}

.modal-cta-btn {
  width: 100%;
  padding: 0.8em 1.45em;
  font-size: 14.5px;
  font-weight: 500;
  text-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Responsive Media Queries */
@media (max-width: 900px) {
  .case-modal-dialog {
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px;
  }

  .case-modal-body {
    padding: 16px;
  }

  .case-modal-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .modal-right-col {
    padding-right: 0;
    gap: 16px;
  }

  .modal-img-container {
    min-height: 180px;
    height: auto;
  }

  .modal-url-pill {
    max-width: 150px;
  }

  .modal-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .modal-kpi-card {
    padding: 8px 6px;
  }

  .modal-kpi-val {
    font-size: 13px;
  }

  .modal-kpi-lbl {
    font-size: 8.5px;
  }

  .modal-case-title {
    font-size: 16px;
    line-height: 1.3;
  }

  .modal-strategy-box {
    padding: 8px 10px;
  }

  .modal-strategy-text {
    font-size: 11px;
  }

  .modal-highlights-list li {
    font-size: 10.5px;
  }

  .modal-cta-btn {
    padding: 10px 20px;
    font-size: 13.5px;
  }

  .case-modal-close-btn {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
  }
}

html[data-theme="light"] .portfolio-case-card {
  background: #ffffff;
  border: 1.5px solid rgba(255, 200, 47, 0.28);
  box-shadow: none !important;
}

.portfolio-case-card:hover {
  transform: translateY(-6px);
  border-color: #FFC82F;
  box-shadow: none !important;
}

html[data-theme="light"] .portfolio-case-card:hover {
  border-color: #FFC82F;
  box-shadow: none !important;
}

/* Case Image & Frame */
.case-image-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #100A05;
  border-bottom: 1.5px solid rgba(255, 200, 47, 0.2);
}

html[data-theme="light"] .case-image-wrapper {
  background: #f4f6fc;
  border-bottom: 1.5px solid rgba(255, 200, 47, 0.18);
}

.case-dashboard-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.portfolio-case-card:hover .case-dashboard-img {
  transform: scale(1.05);
}

.case-image-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

.case-zoom-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 10, 5, 0.85);
  border: 1px solid rgba(255, 200, 47, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}

.case-zoom-badge svg {
  width: 12px;
  height: 12px;
  color: var(--amber);
}

/* Case Card Body - Unique Distinctive Section */
.case-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: transparent;
}

html[data-theme="light"] .case-card-body {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF9 100%);
}

.case-header-pill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.case-metric-pill {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 800;
  color: #FFC82F;
  background: rgba(255, 200, 47, 0.14);
  border: 1.5px solid rgba(255, 200, 47, 0.45);
  border-radius: 999px;
  padding: 4px 12px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

html[data-theme="light"] .case-metric-pill {
  color: #FFC82F;
  background: rgba(255, 200, 47, 0.15);
  border-color: rgba(255, 200, 47, 0.45);
}

.case-tag-pill {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--static-gray);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 4px 12px;
  line-height: 1.2;
}

html[data-theme="light"] .case-tag-pill {
  background: #F1F5F9;
  border-color: rgba(14, 20, 36, 0.1);
  color: #475569;
}

.case-title {
  font-size: 17.5px;
  font-weight: 800;
  color: var(--readout-white);
  line-height: 1.35;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

html[data-theme="light"] .case-title {
  color: #0E1424;
}

.case-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--static-gray);
  margin-bottom: 22px;
  flex: 1;
}

html[data-theme="light"] .case-desc {
  color: #5C6479;
}

/* Case Live Metrics Footer - Distinct Stat Shelf */
.case-metrics-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  background: rgba(255, 200, 47, 0.06);
  border: 1px solid rgba(255, 200, 47, 0.22);
  margin-top: auto;
}

html[data-theme="light"] .case-metrics-bar {
  background: #FBF9FC;
  border: 1px solid rgba(255, 200, 47, 0.22);
}

.case-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.case-stat .stat-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--static-gray);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-theme="light"] .case-stat .stat-lbl {
  color: #64748B;
}

.case-stat .stat-val {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--readout-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-theme="light"] .case-stat .stat-val {
  color: #0E1424;
}

.case-stat .stat-val.highlight {
  color: #FFC82F !important;
  font-weight: 800;
}

html[data-theme="light"] .case-stat .stat-val.highlight {
  color: #FFC82F !important;
}

/* Responsive Media Queries */
@media (max-width: 1100px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .portfolio-header h2 {
    font-size: 28px;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ========================================== */
/* ─── Vengeance UI Accordion FAQ Section ─── */
/* ========================================== */
.faq-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px auto;
}

.faq-header h2 {
  font-size: 46px;
  line-height: 53px;
  font-weight: 800;
  color: var(--readout-white);
  margin-bottom: 16px;
}

.faq-header p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--static-gray);
}

.faq-accordion-list {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.faq-accordion-item {
  width: 100%;
  position: relative;
  transition: all 0.3s ease-in;
  border-bottom: 2px solid rgba(255, 200, 47, 0.25);
}

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

html[data-theme="light"] .faq-accordion-item {
  border-bottom-color: rgba(255, 200, 47, 0.25);
}

.faq-accordion-item.active {
  border-bottom-color: rgba(255, 200, 47, 0.8);
}

html[data-theme="light"] .faq-accordion-item.active {
  border-bottom-color: rgba(255, 200, 47, 0.8);
}

/* Accordion Trigger Button */
.faq-accordion-trigger {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 64px;
  padding: 18px 24px 18px 56px;
  position: relative;
  margin: 0;
  cursor: pointer;
  border: none;
  background: transparent;
  text-align: left;
  outline: none;
  font-family: var(--font-heading);
  font-size: 17.5px;
  line-height: 1.4;
  border-left: 8px solid rgba(255, 255, 255, 0.15);
  color: var(--static-gray);
  transition: all 0.2s ease;
}

html[data-theme="light"] .faq-accordion-trigger {
  border-left-color: #d1d5db;
  color: #5a667f;
}

.faq-accordion-trigger:hover {
  border-left-color: var(--amber);
  color: var(--readout-white);
  background: rgba(255, 255, 255, 0.02);
}

html[data-theme="light"] .faq-accordion-trigger:hover {
  background: rgba(14, 20, 36, 0.02);
  color: #0E1424;
}

/* Active Trigger */
.faq-accordion-item.active .faq-accordion-trigger {
  border-left-color: var(--amber);
  background: rgba(255, 200, 47, 0.06);
  color: var(--readout-white);
  font-weight: 700;
}

html[data-theme="light"] .faq-accordion-item.active .faq-accordion-trigger {
  border-left-color: var(--amber);
  background: #FFFFFF;
  color: #0E1424;
}

/* Left Plus / Minus Sign */
.faq-accordion-sign {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 400;
  color: var(--static-gray);
  line-height: 1;
  transition: all 0.2s ease;
  pointer-events: none;
}

.faq-accordion-item.active .faq-accordion-sign {
  font-size: 34px;
  font-weight: 700;
  color: var(--amber);
}

.faq-accordion-question {
  padding-right: 32px;
}

/* Right Chevron Icon */
.faq-accordion-chevron {
  position: absolute;
  right: 22px;
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2.5px solid var(--static-gray);
  border-right: 2.5px solid var(--static-gray);
  transform: rotate(133deg);
  transition: transform 0.25s ease-in-out, border-color 0.2s ease;
  pointer-events: none;
}

html[data-theme="light"] .faq-accordion-chevron {
  border-top-color: #94a3b8;
  border-right-color: #94a3b8;
}

.faq-accordion-item.active .faq-accordion-chevron {
  transform: rotate(-44deg);
  border-top-color: var(--amber);
  border-right-color: var(--amber);
}

/* CSS Grid Drawer Animation (Smooth 0fr -> 1fr) */
.faq-accordion-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, background-color 0.2s ease;
  width: 100%;
  border-left: 8px solid rgba(255, 255, 255, 0.15);
  background: transparent;
}

html[data-theme="light"] .faq-accordion-drawer {
  border-left-color: #d1d5db;
}

.faq-accordion-item.active .faq-accordion-drawer {
  grid-template-rows: 1fr;
  border-left-color: var(--amber);
  background: rgba(255, 200, 47, 0.06);
}

html[data-theme="light"] .faq-accordion-item.active .faq-accordion-drawer {
  border-left-color: var(--amber);
  background: #FFFFFF;
}

.faq-accordion-inner {
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateY(-4px);
}

.faq-accordion-item.active .faq-accordion-inner {
  opacity: 1;
  transform: translateY(0);
}

.faq-accordion-answer {
  padding: 4px 24px 24px 56px;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--static-gray);
}

html[data-theme="light"] .faq-accordion-answer {
  color: #4b5563;
}

@media (max-width: 768px) {
  .faq-header h2 {
    font-size: 28px;
  }

  .faq-accordion-trigger {
    padding-left: 48px;
    font-size: 16px;
    border-left-width: 6px;
  }

  .faq-accordion-drawer {
    border-left-width: 6px;
  }

  .faq-accordion-answer {
    padding-left: 48px;
    font-size: 14.5px;
  }

  .faq-accordion-sign {
    left: 14px;
    font-size: 22px;
  }

  .faq-accordion-item.active .faq-accordion-sign {
    font-size: 28px;
  }
}

/* ========================================== */
/* ── Full-Width Continuous Marquee Ticker ── */
/* ========================================== */
.testimonials-marquee-section {
  padding: 75px 0;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.testimonials-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 200, 47, 0.08);
  border: 1px solid rgba(255, 200, 47, 0.25);
  border-radius: 30px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--amber);
  margin-bottom: 16px;
}

.trust-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2bcb77;
  box-shadow: 0 0 8px #2bcb77;
}

.testimonials-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px auto;
}

.testimonials-header h2 {
  font-size: 46px;
  line-height: 53px;
  font-weight: 800;
  color: var(--readout-white);
  margin-bottom: 16px;
}

.testimonials-header p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--static-gray);
}

/* Full Width Infinite Marquee Container */
.testimonials-marquee-wrapper {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  padding: 24px 0;
  /* Equalized top and bottom spacing of the marquee container */
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.testimonials-marquee-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: marqueeScrollLeft 38s linear infinite;
  will-change: transform;
}

.testimonials-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marqueeScrollLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50% - 12px));
  }
}

.testimonial-marquee-card {
  position: relative;
  overflow: hidden;
  width: 380px;
  flex-shrink: 0;
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
  border: 1px solid rgba(255, 200, 47, 0.22);
  border-radius: 20px;
  padding: 32px 26px;
  /* Exactly equal padding inside the card */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 20px rgba(255, 200, 47, 0.06), inset 0 1px 2px rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

.testimonial-marquee-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 200, 47, 0.06) 50%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

html[data-theme="light"] .testimonial-marquee-card {
  background: rgba(255, 255, 255, 0.65);
  /* Glassy translucent white background */
  border-color: rgba(255, 255, 255, 0.7);
  /* Translucent white border */
  box-shadow: none !important;
}

html[data-theme="light"] .testimonial-marquee-card::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 200, 47, 0.08) 50%, rgba(255, 255, 255, 0.3) 100%);
}

.testimonial-marquee-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(255, 200, 47, 0.55);
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.14) 0%, #0436aa, #022576);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45), 0 0 28px rgba(255, 200, 47, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

html[data-theme="light"] .testimonial-marquee-card:hover {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: none !important;
}

.t-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.t-stars-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.t-stars-group .stars-row {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--amber);
  margin-bottom: 0;
}

.t-stars-group .stars-row svg {
  width: 15px;
  height: 15px;
  display: block;
}

.t-verified-tag {
  display: none;
  /* Removed verified client text */
}

.t-metric-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  color: var(--amber);
  background: rgba(255, 200, 47, 0.12);
  border: 1px solid rgba(255, 200, 47, 0.3);
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.testimonial-quote {
  position: relative;
  z-index: 1;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--readout-white);
  font-style: italic;
  margin-bottom: 22px;
  flex-grow: 1;
}

html[data-theme="light"] .testimonial-quote {
  color: #1e293b;
}

.t-card-author {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.t-author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--amber);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.t-author-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.t-author-meta strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--readout-white);
  line-height: 1.2;
}

html[data-theme="light"] .t-author-meta strong {
  color: #0E1424;
}

.t-author-meta span {
  font-size: 12px;
  color: var(--static-gray);
  line-height: 1.2;
}

@media (max-width: 768px) {
  .testimonials-marquee-section {
    padding: 50px 0;
  }

  .testimonial-marquee-card {
    width: 320px;
    padding: 24px 20px;
  }

  .testimonials-header h2 {
    font-size: 28px;
  }
}

/* ========================================== */
/* ─── Reference-Inspired CTA Section (v2) ── */
/* ========================================== */
.cta-v2-section {
  padding: 75px 0;
  background-color: var(--ink-navy);
  position: relative;
}

.cta-v2-card {
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1.5px solid rgba(255, 200, 47, 0.35);
  border-radius: 28px;
  padding: 44px 40px;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.65),
    0 0 55px rgba(255, 200, 47, 0.16),
    inset 0 1px 2px rgba(255, 255, 255, 0.15);
  display: grid;
  grid-template-columns: 1.05fr 1.15fr;
  gap: 36px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

html[data-theme="light"] .cta-v2-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.84) 0%, rgba(248, 250, 252, 0.68) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1.5px solid rgba(255, 200, 47, 0.38);
  box-shadow:
    0 30px 80px rgba(14, 20, 36, 0.12),
    0 0 50px rgba(255, 200, 47, 0.15),
    inset 0 1px 2px rgba(255, 255, 255, 0.95),
    inset 0 -1px 2px rgba(255, 200, 47, 0.1);
}

/* Glossy Background Glows & Particles */
.cta-particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.cta-v2-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(75px);
  z-index: 0;
}

.cta-v2-glow-amber {
  top: -60px;
  left: -40px;
  width: 280px;
  height: 280px;
  background: #FFC82F;
  opacity: 0.22;
}

.cta-v2-glow-emerald {
  bottom: -60px;
  right: -40px;
  width: 300px;
  height: 300px;
  background: #FFE066;
  opacity: 0.15;
}

html[data-theme="light"] .cta-v2-glow-amber {
  opacity: 0.28;
}

html[data-theme="light"] .cta-v2-glow-emerald {
  opacity: 0.18;
}

.cta-glass-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(255, 200, 47, 0.8), rgba(255, 255, 255, 0.9), rgba(4, 5, 148, 0.8), transparent);
  z-index: 3;
  pointer-events: none;
}

/* Left Visual Column */
.cta-v2-visual-col {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.cta-v2-visual-wrap {
  position: relative;
  width: 100%;
  max-width: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}

.cta-target-graphic {
  position: absolute;
  top: -20px;
  right: 10px;
  width: 90px;
  height: 90px;
  z-index: 1;
  opacity: 0.9;
  filter: drop-shadow(0 0 14px rgba(255, 200, 47, 0.3));
}

.cta-target-svg {
  width: 100%;
  height: 100%;
}

.cta-laptop-holder {
  width: 100%;
  position: relative;
  z-index: 2;
}

.cta-laptop-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.55));
}


/* Floating Badges */
.cta-floating-badge {
  position: absolute;
  z-index: 4;
  background: rgba(22, 14, 8, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  max-width: 220px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

html[data-theme="light"] .cta-floating-badge {
  background: #ffffff;
  border-color: rgba(14, 20, 36, 0.12);
  box-shadow: 0 12px 30px rgba(14, 20, 36, 0.15);
}

.cta-floating-badge:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: rgba(255, 200, 47, 0.55);
}

.float-top-left {
  top: -10px;
  left: -20px;
}

.float-bottom-left {
  bottom: -10px;
  left: -20px;
}

.float-mid-right {
  bottom: 30px;
  right: -25px;
}

.cta-badge-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2A1B10;
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

html[data-theme="light"] .cta-badge-icon {
  background: rgba(255, 200, 47, 0.15);
  color: var(--amber);
}

.cta-badge-icon svg {
  width: 16px;
  height: 16px;
}

.cta-badge-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cta-badge-text strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--readout-white);
  line-height: 1.2;
}

html[data-theme="light"] .cta-badge-text strong {
  color: #0E1424;
}

.cta-badge-text span {
  font-size: 10px;
  color: var(--static-gray);
  line-height: 1.25;
}

/* Right Content Column */
.cta-v2-content-col {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.cta-grow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 200, 47, 0.1);
  border: 1px solid rgba(255, 200, 47, 0.3);
  padding: 5px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  color: var(--amber);
  margin-bottom: 16px;
  width: fit-content;
}

.cta-plane-svg {
  width: 13px;
  height: 13px;
  stroke: var(--amber);
}

.cta-v2-heading {
  font-size: 38px;
  font-weight: 800;
  color: var(--readout-white);
  line-height: 1.2;
  margin-bottom: 14px;
}

html[data-theme="light"] .cta-v2-heading {
  color: #0E1424;
}

.cta-amber-highlight {
  color: var(--amber);
}

.cta-v2-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--static-gray);
  margin-bottom: 24px;
}

/* 2 Pillars */
.cta-v2-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

.cta-v2-pillar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cta-pillar-round-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2A1B10;
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 200, 47, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

html[data-theme="light"] .cta-pillar-round-icon {
  background: rgba(255, 200, 47, 0.15);
  border-color: rgba(255, 200, 47, 0.4);
  box-shadow: 0 2px 8px rgba(255, 200, 47, 0.1);
}

.cta-pillar-round-icon svg {
  width: 20px;
  height: 20px;
}

.cta-pillar-details h4 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--readout-white);
  margin-bottom: 4px;
  line-height: 1.3;
  white-space: nowrap;
}

html[data-theme="light"] .cta-pillar-details h4 {
  color: #0E1424;
}

.cta-pillar-details p {
  font-size: 13.5px;
  color: var(--static-gray);
  line-height: 1.4;
  margin: 0;
  white-space: nowrap;
}

/* Dual Bottom Dock */
/* CTA Button Row (2 Standalone Buttons in a Row) */
.cta-v2-btn-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.cta-v2-primary-btn {
  padding: 0.8em 1.5em;
  font-size: 14px;
  line-height: 23px;
  font-weight: 500;
  text-shadow: none !important;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-bright) 100%);
  color: var(--ink-navy);
  box-shadow: 0 8px 25px rgba(255, 200, 47, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-v2-primary-btn svg,
.cta-v2-primary-btn i {
  width: 14px;
  height: 14px;
}

.cta-v2-primary-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(255, 200, 47, 0.5);
  background: linear-gradient(135deg, var(--amber-bright) 0%, var(--amber) 100%);
}

.cta-v2-secondary-btn {
  padding: 0.8em 1.45em;
  font-size: 14px;
  line-height: 23px;
  font-weight: 500;
  text-shadow: none !important;
  border-radius: 999px;
  background: rgba(255, 200, 47, 0.08);
  border: 1.5px solid rgba(255, 200, 47, 0.35);
  color: var(--readout-white);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-v2-secondary-btn svg,
.cta-v2-secondary-btn i {
  width: 14px;
  height: 14px;
}

html[data-theme="light"] .cta-v2-secondary-btn {
  background: rgba(255, 200, 47, 0.15);
  border: 1.5px solid rgba(255, 200, 47, 0.6);
  color: #040594;
  box-shadow: 0 2px 8px rgba(255, 200, 47, 0.15);
}

.cta-v2-secondary-btn svg {
  color: #040594;
}

html[data-theme="light"] .cta-v2-secondary-btn:hover {
  background: linear-gradient(135deg, #FFE066 0%, #FFC82F 100%);
  border-color: #FFC82F;
  transform: translateY(-2px);
  color: #040594;
  box-shadow: 0 6px 20px rgba(255, 200, 47, 0.35);
}

@media (max-width: 640px) {
  .cta-v2-btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-v2-primary-btn,
  .cta-v2-secondary-btn {
    justify-content: center;
    width: 100%;
  }
}

/* Trust Footer */
.cta-v2-trust-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--static-gray);
}

/* Responsive */
@media (max-width: 1100px) {
  .cta-v2-card {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 30px;
  }

  .float-top-left {
    left: 0;
  }

  .float-bottom-left {
    left: 0;
  }

  .float-mid-right {
    right: 0;
  }
}

@media (max-width: 768px) {
  .cta-v2-section {
    padding: 40px 0;
  }

  .cta-v2-card {
    display: flex;
    flex-direction: column;
    padding: 30px 20px 24px;
    border-radius: 24px;
    gap: 28px;
    overflow: hidden;
  }

  /* Visual Column: Sleek Laptop with proportional floating badge pills */
  .cta-v2-visual-col {
    width: 100%;
  }

  .cta-v2-visual-wrap {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 16px 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cta-laptop-holder {
    width: 100%;
    position: relative;
    z-index: 2;
  }

  .cta-laptop-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.45));
  }

  .cta-target-graphic {
    width: 58px;
    height: 58px;
    top: 2px;
    right: 4px;
    opacity: 0.75;
    z-index: 1;
  }

  /* Proportional, sleek Floating Badges on Mobile */
  .cta-floating-badge {
    position: absolute;
    z-index: 4;
    padding: 7px 10px;
    border-radius: 12px;
    gap: 8px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    max-width: 175px;
    width: auto;
  }

  .float-top-left {
    top: 8px;
    left: 8px;
    bottom: auto;
    right: auto;
  }

  /* Hide Better Results badge on mobile view only */
  .float-mid-right {
    display: none !important;
  }

  .float-bottom-left {
    bottom: 8px;
    left: 8px;
    top: auto;
    right: auto;
    max-width: 170px;
  }

  .cta-badge-icon {
    width: 24px;
    height: 24px;
  }

  .cta-badge-icon svg,
  .cta-badge-icon i {
    width: 13px;
    height: 13px;
  }

  .cta-badge-text strong {
    font-size: 10.5px;
    line-height: 1.15;
  }

  .cta-badge-text span {
    font-size: 8px;
    line-height: 1.15;
  }

  /* Content Column on Mobile */
  .cta-v2-content-col {
    width: 100%;
    text-align: left;
  }

  .cta-grow-pill {
    font-size: 11px;
    padding: 4px 12px;
    margin-bottom: 12px;
  }

  .cta-v2-heading {
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: 12px;
  }

  .cta-v2-desc {
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 18px;
  }

  .cta-v2-pillars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
  }

  .cta-pillar-round-icon {
    width: 38px;
    height: 38px;
  }

  .cta-pillar-details h4 {
    font-size: 15px;
    margin-bottom: 3px;
    white-space: normal;
  }

  .cta-pillar-details p {
    font-size: 13px;
    line-height: 1.45;
    white-space: normal;
  }

  .cta-v2-btn-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
    width: 100%;
  }

  .cta-v2-primary-btn,
  .cta-v2-secondary-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 14px;
  }

  .cta-v2-trust-footer {
    font-size: clamp(10px, 2.8vw, 12px);
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    white-space: normal;
    gap: 6px 8px;
  }
}

@media (max-width: 480px) {
  .cta-v2-pillars {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cta-floating-badge {
    padding: 5px 8px;
    border-radius: 10px;
    gap: 6px;
  }

  .cta-badge-icon {
    width: 20px;
    height: 20px;
  }

  .cta-badge-icon svg,
  .cta-badge-icon i {
    width: 11px;
    height: 11px;
  }

  .cta-badge-text strong {
    font-size: 9.5px;
  }

  .cta-badge-text span {
    font-size: 7.5px;
  }

  .float-top-left {
    top: 6px;
    left: 6px;
    max-width: 145px;
  }

  .float-bottom-left {
    bottom: 6px;
    left: 6px;
    max-width: 145px;
  }
}

/* --- ABOUT US PAGE --- */

.inner-hero {
  background-color: var(--ink-navy);
  padding: 120px 0 80px 0;
  text-align: left;
  /* Left align content relative to container */
  border-bottom: 1px solid var(--hairline);
}

.inner-hero h1 {
  font-size: 68px;
  line-height: 1.05;
  font-weight: 700;
  margin: 16px 0 24px 0;
  letter-spacing: -0.02em;
}

.inner-hero p {
  font-size: 18px;
  max-width: 700px;
  margin: 0 0 30px 0;
  /* Left align paragraph margins */
}

@media (max-width: 768px) {
  .inner-hero h1 {
    font-size: 38px;
    line-height: 1.15;
  }
}

/* Team Grid */
.team-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 60px auto;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.team-card {
  background-color: var(--panel-navy);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.team-card:hover {
  transform: translateY(-4px);
  border-color: var(--hairline-amber);
  box-shadow: 0 8px 30px rgba(255, 200, 47, 0.1);
}

.team-avatar-box {
  width: 100%;
  aspect-ratio: 1;
  background-color: var(--deck-navy);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.team-avatar-box svg {
  color: var(--static-gray);
  width: 40px;
  height: 40px;
  opacity: 0.3;
}

.team-avatar-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-info {
  padding: 24px;
  text-align: center;
}

.team-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--readout-white);
  margin-bottom: 4px;
}

.team-role {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

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

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

/* --- BLOG PAGE --- */

/* ==========================================================================
   --- MODERN BLOG & INSIGHTS SYSTEM ---
   ========================================================================== */

.blog-page-wrapper {
  background: transparent;
  min-height: 100vh;
}

/* 1. Blog Hero */
.blog-hero {
  padding: 85px 0 35px;
  text-align: center;
  background: transparent;
}

.blog-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blog-hero-title {
  font-family: var(--font-display);
  font-size: 68px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--readout-white);
  margin-bottom: 18px;
  max-width: 1080px;
}

.blog-hero-subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--static-gray);
  max-width: 720px;
  margin: 0 auto 32px;
}

/* Category Filter Pills */
.blog-filter-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.blog-filter-pill {
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(29, 39, 64, 0.6);
  border: 1px solid var(--hairline);
  color: var(--static-gray);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  outline: none;
}

html[data-theme="light"] .blog-filter-pill {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(14, 20, 36, 0.1);
  color: #5C6479;
}

.blog-filter-pill:hover,
.blog-filter-pill.active {
  background: var(--amber);
  color: var(--ink-navy);
  border-color: var(--amber);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 200, 47, 0.3);
}

/* 2. Spotlight Featured Article */
.blog-featured-section {
  padding: 15px 0 50px;
  background: transparent;
}

.blog-featured-card {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 36px;
  background: rgba(29, 39, 64, 0.65);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: 36px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  transition: var(--transition-smooth);
}

html[data-theme="light"] .blog-featured-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(14, 20, 36, 0.1);
  box-shadow: 0 20px 50px rgba(14, 20, 36, 0.06);
}

.blog-featured-card:hover {
  border-color: var(--hairline-amber);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35), 0 0 30px rgba(255, 200, 47, 0.1);
}

.featured-visual-box {
  background: rgba(14, 20, 36, 0.8);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  min-height: 260px;
}

html[data-theme="light"] .featured-visual-box {
  background: #F8FAFC;
  border-color: rgba(14, 20, 36, 0.08);
}

.featured-graph-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 200, 47, 0.12);
  border: 1px solid var(--hairline-amber);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  width: fit-content;
}

.featured-svg-chart {
  width: 100%;
  height: 180px;
  margin-top: auto;
}

.featured-content-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.featured-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--static-gray);
}

.blog-category-tag {
  color: var(--amber);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 200, 47, 0.1);
  border: 1px solid var(--hairline-amber);
  padding: 4px 10px;
  border-radius: 6px;
}

.read-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.meta-dot {
  opacity: 0.5;
}

.featured-post-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--readout-white);
  margin-bottom: 12px;
}

.featured-post-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.featured-post-title a:hover {
  color: var(--amber);
}

.featured-post-excerpt {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--static-gray);
  line-height: 1.65;
  margin-bottom: 24px;
}

.featured-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink-navy);
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.author-info strong {
  display: block;
  font-size: 13px;
  color: var(--readout-white);
}

.author-info span {
  font-size: 11.5px;
  color: var(--static-gray);
}

.featured-read-btn {
  padding: 10px 20px;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 3. 6 Articles Grid Section */
.blog-grid-section {
  padding: 20px 0 90px;
  background: transparent;
}

.blog-section-header {
  margin-bottom: 36px;
}

.blog-section-header h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--readout-white);
  margin-top: 4px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.blog-modern-card {
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
  border: 1px solid rgba(255, 200, 47, 0.22);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 20px rgba(255, 200, 47, 0.06), inset 0 1px 2px rgba(255, 255, 255, 0.12);
  transition: var(--transition-smooth);
}

html[data-theme="light"] .blog-modern-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(14, 20, 36, 0.1);
  box-shadow: 0 10px 30px rgba(14, 20, 36, 0.04);
}

.blog-modern-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 200, 47, 0.55);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 200, 47, 0.18), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

html[data-theme="light"] .blog-modern-card:hover {
  border-color: var(--amber);
  box-shadow: 0 18px 40px rgba(14, 20, 36, 0.1), 0 0 25px rgba(255, 200, 47, 0.12);
}

.blog-card-visual {
  height: 200px;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--deck-navy);
  border-bottom: 1px solid var(--hairline);
}

.blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-modern-card:hover .blog-card-img {
  transform: scale(1.08);
}

.card-read-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(14, 20, 36, 0.85);
  color: var(--readout-white);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
}

html[data-theme="light"] .card-read-badge {
  background: rgba(255, 255, 255, 0.9);
  color: #0E1424;
  border-color: rgba(14, 20, 36, 0.1);
}

.blog-card-body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.post-date {
  font-size: 12px;
  color: var(--static-gray);
}

.blog-card-title {
  font-family: var(--font-display);
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--readout-white);
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-card-title a:hover {
  color: var(--amber);
}

.blog-card-excerpt {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--static-gray);
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
  margin-top: auto;
}

.author-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--static-gray);
}

.blog-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--amber);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.blog-link-btn:hover {
  color: var(--amber-bright);
  transform: translateX(3px);
}

/* 4. Responsive Rules for Blog */
@media (max-width: 992px) {
  .blog-featured-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 26px;
  }

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

@media (max-width: 640px) {
  .blog-hero {
    padding: 60px 0 25px;
  }

  .blog-hero-title {
    font-size: 38px;
    line-height: 1.15;
  }

  .blog-hero-subtitle {
    font-size: 14px;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
  }

  .featured-footer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .featured-read-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   --- SINGLE BLOG POST PAGE SYSTEM ---
   ========================================================================== */

.single-post-wrapper {
  background: transparent;
  min-height: 100vh;
}

/* 1. Post Hero */
.post-hero-section {
  padding: 55px 0 18px;
  background: transparent;
  text-align: center;
}

.post-breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--static-gray);
  margin-bottom: 20px;
}

.post-breadcrumbs a {
  color: var(--static-gray);
  text-decoration: none;
  transition: color 0.2s ease;
}

.post-breadcrumbs a:hover {
  color: var(--amber);
}

.crumb-sep {
  opacity: 0.4;
}

.crumb-current {
  color: var(--amber);
  font-weight: 600;
}

.post-hero-header {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.post-tags-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--static-gray);
  margin-bottom: 14px;
}

.post-tags-row span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.post-main-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--readout-white);
  margin-bottom: 14px;
  text-align: center;
}

.post-hero-lead {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--static-gray);
  margin-bottom: 22px;
  max-width: 780px;
  text-align: center;
}

.post-author-share-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 14px 0;
  gap: 20px;
  width: 100%;
  max-width: 860px;
}

.post-author-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar-initials {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink-navy);
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color:white;
}

.author-meta-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.author-full-name {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--readout-white);
}

.author-title-role {
  font-size: 11.5px;
  color: var(--static-gray);
}

.post-share-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--static-gray);
  margin-right: 4px;
}

.share-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(30, 20, 12, 0.7);
  border: 1px solid var(--hairline);
  color: var(--readout-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-smooth);
}

html[data-theme="light"] .share-icon-btn {
  background: #FFFFFF;
  border-color: rgba(14, 20, 36, 0.12);
  color: #0E1424;
}

.share-icon-btn:hover {
  background: var(--amber);
  color: var(--ink-navy);
  border-color: var(--amber);
  transform: translateY(-2px);
}

/* 2. Compact Balanced Featured Cover Image */
.post-featured-media-section {
  padding: 0 0 35px;
}

.post-featured-image-container {
  max-width: 860px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--deck-navy);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.post-featured-cover-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 380px;
  object-fit: cover;
  display: block;
}

.post-img-caption {
  padding: 10px 18px;
  font-size: 12px;
  color: var(--static-gray);
  background: rgba(16, 10, 5, 0.8);
  border-top: 1px solid var(--hairline);
  backdrop-filter: blur(10px);
}

html[data-theme="light"] .post-img-caption {
  background: rgba(255, 255, 255, 0.9);
  color: #5C6479;
}

/* 3. Centered Single Article Layout */
.post-content-section {
  padding: 10px 0 80px;
}

.post-single-container {
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}

.post-main-article {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
}

.article-block h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 27px);
  font-weight: 800;
  color: var(--readout-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.article-block p {
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--static-gray);
  line-height: 1.8;
  margin-bottom: 16px;
}

.article-block p strong {
  color: var(--readout-white);
}

/* Metrics Callout */
.post-metrics-callout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}

.metric-callout-card {
  background: rgba(26, 17, 10, 0.8);
  border: 1px solid var(--hairline-amber);
  border-radius: 14px;
  padding: 20px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

html[data-theme="light"] .metric-callout-card {
  background: #F8FAFC;
}

.callout-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--static-gray);
  text-transform: uppercase;
}

.callout-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--amber);
}

.callout-sub {
  font-size: 12px;
  color: var(--static-gray);
}

/* Styled Lists */
.styled-article-list,
.styled-ordered-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 20px;
  margin: 18px 0;
  color: var(--static-gray);
  font-size: 15px;
  line-height: 1.7;
}

.styled-article-list li strong,
.styled-ordered-list li strong {
  color: var(--readout-white);
}

/* Pullquote */
.post-pullquote {
  border-left: 4px solid var(--amber);
  background: rgba(255, 200, 47, 0.06);
  padding: 24px 28px;
  border-radius: 0 16px 16px 0;
  margin: 20px 0;
}

.post-pullquote p {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.6;
  color: var(--readout-white);
  margin-bottom: 10px;
}

.post-pullquote cite {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--amber);
  font-style: normal;
  display: block;
}

/* Info Box */
.post-info-box {
  background: rgba(30, 20, 12, 0.75);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 22px 24px;
  margin: 20px 0;
}

html[data-theme="light"] .post-info-box {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(14, 20, 36, 0.1);
}

.post-info-box h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--amber);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.post-info-box p {
  margin-bottom: 0;
  font-size: 14.5px;
}

/* Checklist */
.post-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(26, 17, 10, 0.75);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-size: 14px;
  color: var(--readout-white);
}

html[data-theme="light"] .check-item {
  background: #F8FAFC;
  color: #0E1424;
}

.check-item svg {
  color: var(--amber);
  flex-shrink: 0;
}

/* Author Bio Card */
.post-author-bio-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: rgba(30, 20, 12, 0.75);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 28px;
  margin-top: 20px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html[data-theme="light"] .post-author-bio-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(14, 20, 36, 0.1);
}

.bio-avatar-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink-navy);
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bio-text h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--readout-white);
  margin-bottom: 6px;
}

.bio-text p {
  font-size: 13.5px;
  color: var(--static-gray);
  line-height: 1.6;
  margin-bottom: 12px;
}

.bio-socials {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bio-socials a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--amber);
  text-decoration: none;
  font-weight: 600;
}

.bio-socials a:hover {
  text-decoration: underline;
}

/* 4. Related Posts Section */
.related-posts-section {
  padding: 50px 0 90px;
  border-top: 1px solid var(--hairline);
  background: transparent;
}

.related-header {
  margin-bottom: 36px;
}

.related-header h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--readout-white);
  margin-top: 4px;
}

/* 5. Responsive Rules for Single Post */
@media (max-width: 992px) {
  .post-layout-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .post-sidebar {
    position: static;
  }

  .post-metrics-callout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .post-hero-section {
    padding: 45px 0 20px;
  }

  .post-main-title {
    font-size: 26px;
  }

  .post-author-share-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .post-author-bio-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
}

/* ==========================================================================
   --- CONTACT US PAGE (MATCHING REFERENCE DESIGN) ---
   ========================================================================== */

.contact-page-wrapper {
  background: transparent;
  min-height: 100vh;
}

/* 1. Centered Hero Section */
.contact-ref-hero {
  padding: 85px 0 35px;
  text-align: center;
  background: transparent;
  position: relative;
}

.contact-ref-hero-inner {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.contact-ref-title {
  font-family: var(--font-display);
  font-size: 68px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--readout-white);
  margin-bottom: 16px;
}

.gradient-extraordinary {
  font-weight: 800;
  color: var(--amber);
  display: inline-block;
}

.contact-ref-subtitle {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--static-gray);
  max-width: 580px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
}

.sparkle-icon {
  display: none !important;
}

/* 2. Main 2-Column Section */
.contact-ref-main-section {
  padding: 20px 0 90px;
  background: transparent;
  position: relative;
}

.contact-ref-main-section .container {
  max-width: 1200px;
  padding: 0;
}

.contact-ref-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 28px;
  align-items: start;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Left Column: Form Panel */
.contact-form-panel {
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
  border: 1px solid rgba(255, 200, 47, 0.25);
  border-radius: 20px;
  padding: 38px 36px;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 200, 47, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.15);
  transition: var(--transition-smooth);
}

html[data-theme="light"] .contact-form-panel {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(14, 20, 36, 0.1);
  box-shadow: 0 20px 50px rgba(14, 20, 36, 0.06);
}

.contact-form-panel:hover {
  border-color: rgba(255, 200, 47, 0.45);
}

.panel-header {
  margin-bottom: 24px;
}

.panel-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--readout-white);
  margin-bottom: 6px;
}

.panel-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--static-gray);
  margin: 0;
}

/* Modern Form Controls */
.ref-contact-form {
  display: flex;
  flex-direction: column;
}

.ref-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ref-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.ref-label {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--readout-white);
}

.ref-input,
.ref-textarea {
  width: 100%;
  background: #012985;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--readout-white);
  font-size: 14px;
  font-family: var(--font-body);
  transition: var(--transition-smooth);
  outline: none;
}

html[data-theme="light"] .ref-input,
html[data-theme="light"] .ref-textarea {
  background: #FFFFFF;
  border: 1.5px solid rgba(14, 20, 36, 0.12);
  color: #0E1424;
}

.ref-input::placeholder,
.ref-textarea::placeholder {
  color: var(--static-gray);
  opacity: 0.7;
}

.ref-input:focus,
.ref-textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--hairline-amber);
  background: #012985;
}

html[data-theme="light"] .ref-input:focus,
html[data-theme="light"] .ref-textarea:focus {
  background: #FFFFFF;
  border-color: #FFC82F;
  box-shadow: 0 0 0 3px rgba(255, 200, 47, 0.15);
}

.ref-textarea {
  resize: vertical;
  min-height: 110px;
}

/* Submit Button */
.ref-submit-btn {
  --border-radius: 28px;
  --padding: 4px;
  --transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --button-color: var(--amber);

  width: 100%;
  padding: 0.8em 1.45em;
  border-radius: var(--border-radius);
  background: linear-gradient(135deg, #FFE066 0%, #FFC82F 50%, #FFC82F 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #FFFFFF !important;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 23px;
  font-weight: 500 !important;
  text-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  margin-top: 8px;
  position: relative;
  z-index: 1;

  box-shadow:
    0 4px 18px rgba(255, 200, 47, 0.45),
    0 0 12px rgba(255, 200, 47, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.75),
    inset 0 -2px 3px rgba(0, 0, 0, 0.2);

  transition: box-shadow var(--transition), border var(--transition), background var(--transition), transform var(--transition), color var(--transition);
}

html[data-theme="light"] .ref-submit-btn {
  --button-color: #040594;
  background: #040594 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.45);
  text-shadow: none !important;
  font-weight: 500 !important;
  box-shadow:
    inset 0px 1px 1px rgba(255, 255, 255, 0.7),
    inset 0px -2px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(4, 5, 148, 0.25);
}

.ref-submit-btn::before {
  content: "";
  position: absolute;
  top: calc(0px - var(--padding));
  left: calc(0px - var(--padding));
  width: calc(100% + var(--padding) * 2);
  height: calc(100% + var(--padding) * 2);
  border-radius: calc(var(--border-radius) + var(--padding));
  pointer-events: none;
  background: transparent !important;
  border: 2px solid rgba(2, 63, 205, 0.25);
  box-shadow: 0 4px 16px rgba(2, 63, 205, 0.15);
  z-index: -1;
  transition: box-shadow var(--transition), filter var(--transition), border-color var(--transition);
}

html[data-theme="light"] .ref-submit-btn::before {
  background: transparent !important;
  border: 2px solid rgba(2, 63, 205, 0.25);
  box-shadow: 0 4px 14px rgba(2, 63, 205, 0.15);
  opacity: 1;
}

.ref-submit-btn::after,
html[data-theme="light"] .ref-submit-btn::after {
  display: none !important;
  opacity: 0 !important;
  background-image: none !important;
}

.ref-submit-btn:hover,
html[data-theme="light"] .ref-submit-btn:hover {
  color: #FFFFFF !important;
  background: #040594 !important;
  background-image: none !important;
  border: solid 1px rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0px 1px 1px rgba(255, 255, 255, 0.85),
    inset 0px -2px 3px rgba(0, 0, 0, 0.2),
    0 6px 16px rgba(4, 5, 148, 0.35);
  transform: translateY(-2px);
}

.ref-submit-btn:hover::before,
html[data-theme="light"] .ref-submit-btn:hover::before {
  background: transparent !important;
  border-color: rgba(2, 63, 205, 0.35);
  box-shadow: 0 4px 12px rgba(2, 63, 205, 0.2);
}

.ref-submit-btn:hover::after,
html[data-theme="light"] .ref-submit-btn:hover::after {
  display: none !important;
  opacity: 0 !important;
  background-image: none !important;
}

.ref-submit-btn:active {
  transform: translateY(0) scale(0.98);
  border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%);
  background-color: hsla(var(--highlight-color-hue), 50%, 18%, 0.7);
}

html[data-theme="light"] .ref-submit-btn:active {
  background: linear-gradient(180deg, #FFC82F 0%, #FFC82F 100%) !important;
  box-shadow: 0 2px 6px rgba(255, 200, 47, 0.3);
  color: #FFFFFF !important;
}

.plane-send-icon {
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.ref-submit-btn:hover .plane-send-icon {
  transform: rotate(45deg) translate(3px, -3px);
  filter: drop-shadow(0 0 6px hsl(var(--highlight-color-hue), 100%, 70%));
}

/* Right Column: 4 Info Cards (Full Clickable Links) */
.contact-cards-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ref-info-card {
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
  border: 1px solid rgba(255, 200, 47, 0.22);
  border-radius: 18px;
  padding: 22px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35), 0 0 18px rgba(255, 200, 47, 0.05), inset 0 1px 2px rgba(255, 255, 255, 0.12);
  transition: var(--transition-smooth);
}

html[data-theme="light"] .ref-info-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(14, 20, 36, 0.1);
  box-shadow: 0 8px 24px rgba(14, 20, 36, 0.04);
}

.ref-info-card:hover {
  border-color: rgba(255, 200, 47, 0.55);
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 0 28px rgba(255, 200, 47, 0.18), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

html[data-theme="light"] .ref-info-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(14, 20, 36, 0.1);
  box-shadow: 0 8px 24px rgba(14, 20, 36, 0.04);
}

.ref-info-card:hover {
  border-color: var(--amber);
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.35), 0 0 25px rgba(255, 200, 47, 0.15);
}

html[data-theme="light"] .ref-info-card:hover {
  border-color: var(--amber);
  box-shadow: 0 16px 35px rgba(14, 20, 36, 0.12), 0 0 25px rgba(255, 200, 47, 0.15);
}

.ref-info-card:hover .ref-card-icon-box {
  background: var(--amber);
  color: var(--ink-navy);
  border-color: var(--amber);
  transform: scale(1.06);
}

.ref-info-card:hover .ref-card-link {
  color: var(--amber-bright);
  text-decoration: underline;
}

/* Static Card (Office Address - No Hover / No Click) */
.ref-info-card.ref-info-card-static {
  cursor: default !important;
  user-select: text;
}

.ref-info-card.ref-info-card-static:hover {
  transform: none !important;
  border-color: rgba(255, 200, 47, 0.22) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35), 0 0 18px rgba(255, 200, 47, 0.05), inset 0 1px 2px rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="light"] .ref-info-card.ref-info-card-static:hover {
  border-color: rgba(14, 20, 36, 0.1) !important;
  box-shadow: 0 8px 24px rgba(14, 20, 36, 0.04) !important;
}

.ref-info-card.ref-info-card-static:hover .ref-card-icon-box {
  transform: none !important;
}

html[data-theme="light"] .ref-info-card.ref-info-card-static:hover .ref-card-icon-box {
  background: rgba(4, 5, 148, 0.08) !important;
  color: #040594 !important;
  border-color: rgba(4, 5, 148, 0.15) !important;
}

html[data-theme="dark"] .ref-info-card.ref-info-card-static:hover .ref-card-icon-box,
[data-theme="dark"] .ref-info-card.ref-info-card-static:hover .ref-card-icon-box,
html:not([data-theme="light"]) .ref-info-card.ref-info-card-static:hover .ref-card-icon-box {
  background: rgba(255, 200, 47, 0.12) !important;
  border: 1px solid rgba(255, 200, 47, 0.25) !important;
  color: #FFC82F !important;
}

.ref-card-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(4, 5, 148, 0.08);
  border: 1px solid rgba(4, 5, 148, 0.15);
  color: #040594;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: var(--transition-smooth);
}

.ref-card-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ref-card-title {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--readout-white);
  margin-bottom: 2px;
}

.ref-card-desc {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--static-gray);
  line-height: 1.4;
  margin-bottom: 4px;
}

.ref-card-link {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--amber);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ref-card-link:hover {
  text-decoration: underline;
  color: var(--amber-bright);
}

/* ============================================================
   RESPONSIVE (MOBILE & TABLET OPTIMIZATIONS)
   ============================================================ */
@media (max-width: 992px) {
  .contact-ref-hero {
    padding: 60px 0 25px;
  }

  .contact-ref-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto;
  }

  .contact-cards-column {
    order: 1;
    width: 100%;
    gap: 12px;
  }

  .contact-form-panel {
    order: 2;
    padding: 28px 20px;
    width: 100%;
    box-sizing: border-box;
  }

  .ref-info-card {
    padding: 18px 16px;
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 640px) {
  .contact-ref-hero {
    padding: 40px 0 20px;
  }

  .contact-ref-title {
    font-size: 38px;
    line-height: 1.15;
  }

  .contact-ref-subtitle {
    font-size: 13px;
    flex-direction: column;
    gap: 4px;
  }

  .sparkle-icon {
    display: none !important;
  }

  .contact-ref-main-section {
    padding: 10px 0 50px;
  }

  .contact-form-panel {
    padding: 22px 14px;
    border-radius: 16px;
    width: 100%;
    box-sizing: border-box;
  }

  .ref-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ref-info-card {
    padding: 15px 14px;
    border-radius: 14px;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ACCESSIBILITY & PREFERS REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }

  .ascent-path,
  .baseline-path,
  .sparkline-ascent {
    stroke-dashoffset: 0 !important;
  }

  .floating-readout-tag {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Keyboard Outline Focus */
*:focus-visible {
  outline: 2px solid var(--amber) !important;
  outline-offset: 4px;
}

/* Theme Toggle Button & Layout */
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.theme-toggle-btn {
  background: none;
  border: 1px solid var(--hairline);
  color: var(--readout-white);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  transition: var(--transition-smooth);
}

.theme-toggle-btn:hover {
  background-color: rgba(255, 200, 47, 0.08);
  border-color: var(--hairline-amber);
  color: var(--amber);
}

/* Light / Dark Icon Visibility */
html[data-theme="light"] .theme-icon-sun {
  display: block;
}

html[data-theme="light"] .theme-icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-icon-sun {
  display: none;
}

html[data-theme="dark"] .theme-icon-moon {
  display: block;
}

/* Light Mode Specific Overrides */
html[data-theme="light"] .main-header {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.9) 100%);
  border: 1px solid rgba(2, 63, 205, 0.18);
  box-shadow: 0 12px 36px rgba(14, 20, 36, 0.06),
    0 0 1px 1px rgba(255, 255, 255, 0.9) inset,
    0 0 20px rgba(2, 63, 205, 0.04);
}

html[data-theme="light"] .main-header.scrolled {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.94) 100%);
  border-color: rgba(2, 63, 205, 0.28);
  box-shadow: 0 16px 40px rgba(14, 20, 36, 0.1),
    0 0 1px 1px rgba(255, 255, 255, 0.9) inset,
    0 0 20px rgba(2, 63, 205, 0.06);
}

html[data-theme="light"] .nav-menu {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="light"] .main-header.scrolled .nav-menu {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}


html[data-theme="light"] .grid-texture {
  background-image:
    linear-gradient(rgba(14, 20, 36, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 20, 36, 0.02) 1px, transparent 1px);
}

html[data-theme="light"] .lift-grid-lines {
  stroke: rgba(14, 20, 36, 0.04);
}

html[data-theme="light"] .hero-svg-bg {
  background-color: rgba(255, 255, 255, 0.6);
  border-color: rgba(14, 20, 36, 0.06);
}

html[data-theme="light"] .floating-readout-tag {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: var(--hairline-amber);
  box-shadow: 0 8px 32px rgba(14, 20, 36, 0.1), 0 0 16px rgba(255, 200, 47, 0.05);
}

html[data-theme="light"] .floating-readout-tag .readout-text {
  color: var(--amber);
}

html[data-theme="light"] .about-collage svg,
html[data-theme="light"] .booking-widget-placeholder {
  background-color: var(--panel-navy) !important;
}

html[data-theme="light"] .collage-img-container {
  border-color: rgba(14, 20, 36, 0.06);
}

html[data-theme="light"] .faq-item.active .faq-trigger {
  color: var(--amber);
}

/* Light theme overrides for orbital components */
html[data-theme="light"] .orbital-badge {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 32px rgba(14, 20, 36, 0.08);
}

html[data-theme="light"] .orbital-pip {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 24px rgba(14, 20, 36, 0.08), 0 0 12px rgba(255, 200, 47, 0.05);
}

/* Hero Bottom Banner Card */
/* Hero Bottom Banner Card */
.hero-bottom-banner {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: auto;
  min-width: 270px;
  max-width: 320px;
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 200, 47, 0.25);
  border-radius: 16px;
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 200, 47, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  box-sizing: border-box;
}

.hero-bottom-banner.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hero-bottom-banner:hover {
  border-color: var(--amber);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 200, 47, 0.15);
  transform: translateX(-50%) translateY(-3px);
}

.banner-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  flex: 1;
}

.banner-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--amber-bright);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #10B981;
  box-shadow: 0 0 8px #10B981;
  display: inline-block;
  animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
  0% {
    transform: scale(0.9);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.25);
    opacity: 1;
    box-shadow: 0 0 12px #10B981;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.6;
  }
}

.banner-title,
h2.banner-title {
  font-family: var(--font-display);
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--readout-white);
  line-height: 1.3 !important;
  margin: 0 !important;
}

.banner-right {
  display: flex;
  align-items: flex-end;
  height: 40px;
  margin-left: 16px;
  flex-shrink: 0;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 100%;
}

.bar {
  width: 8px;
  background: linear-gradient(to top, var(--amber), var(--amber-bright));
  border-radius: 3px 3px 0 0;
  transform-origin: bottom;
  transform: scaleY(0);
  opacity: 0.1;
  transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease;
}

.hero-bottom-banner.active .bar {
  transform: scaleY(1);
  opacity: 1;
}

.hero-bottom-banner.active .bar-1 {
  height: 16px;
  transition-delay: 0s;
}

.hero-bottom-banner.active .bar-2 {
  height: 24px;
  transition-delay: 0.14s;
}

.hero-bottom-banner.active .bar-3 {
  height: 32px;
  transition-delay: 0.28s;
}

.hero-bottom-banner.active .bar-4 {
  height: 40px;
  transition-delay: 0.42s;
}

/* Light Theme overrides for banner */
html[data-theme="light"] .hero-bottom-banner {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 48px rgba(14, 20, 36, 0.1), 0 0 20px rgba(255, 200, 47, 0.05);
}

html[data-theme="light"] .banner-title,
html[data-theme="light"] h2.banner-title {
  color: #0E1424 !important;
}

/* Responsive Overrides */
@media (max-width: 768px) {
  .hero-bottom-banner {
    padding: 10px 14px;
    max-width: 290px;
    bottom: -30px;
  }

  .banner-title,
  h2.banner-title {
    font-size: 12.5px !important;
  }

  .banner-right {
    height: 34px;
    margin-left: 12px;
  }

  .bar {
    width: 6px;
  }

  .hero-bottom-banner.active .bar-1 {
    height: 12px;
  }

  .hero-bottom-banner.active .bar-2 {
    height: 18px;
  }

  .hero-bottom-banner.active .bar-3 {
    height: 26px;
  }

  .hero-bottom-banner.active .bar-4 {
    height: 34px;
  }
}

/* ========================================== */
/* ─── Premium Redesigned About Section ──── */
/* ========================================== */
.premium-about {
  padding: 60px 0;
  position: relative;
  overflow: hidden;
  background-color: var(--deck-navy);
}

.premium-about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 80px;
  align-items: center;
}

@media (max-width: 992px) {
  .premium-about-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}

/* Left Column Styling */
.premium-about-content {
  max-width: 600px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Force left-alignment for eyebrow and flow graphics */
}

.premium-about-content>* {
  width: 100%;
}

.premium-about-content>.about-floating-flow,
.premium-about-content>.premium-about-eyebrow,
.premium-about-content>.premium-about-divider {
  width: auto;
}

/* Micro Floating Wavy Flow Element */
.about-floating-flow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 80px;
  margin-bottom: 20px;
  /* Space above eyebrow badge */
  position: relative;
  z-index: 2;
  animation: flowFloatY 4.8s ease-in-out infinite alternate;
}

.about-floating-flow svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Orbit rotations for node outlines */
.about-floating-flow .orbit-glow {
  transform-origin: 20px 45px;
  animation: flowOrbitRotate 12s linear infinite;
}

.about-floating-flow .orbit-glow-fast {
  transform-origin: 100px 45px;
  animation: flowOrbitRotate 8s linear infinite reverse;
}

@keyframes flowOrbitRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes flowFloatY {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-8px);
  }
}

.premium-about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--about-brand);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.premium-about-eyebrow::before {
  display: none !important;
  content: none !important;
}

.premium-about-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--about-text-primary);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

/* About Page Hero Main Heading (Full H1 size) */
h1.premium-about-title {
  font-size: 68px;
  line-height: 1.05;
}

/* Home Page About Section Heading (H2 size) */
h2.premium-about-title {
  font-size: 46px;
  line-height: 53px;
}

.premium-about-title .highlight-green {
  color: var(--about-brand);
}

.premium-about-divider {
  width: 50px;
  height: 3px;
  background-color: var(--about-brand);
  margin-bottom: 16px;
}

.premium-about-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--about-text-secondary);
  margin-bottom: 20px;
}

.premium-about-callout {
  font-size: 15px;
  font-weight: 700;
  color: var(--about-brand-text);
  margin-bottom: 32px;
  line-height: 1.6;
}

/* 2-Column Checklist */
.premium-about-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  margin-bottom: 44px;
}

.premium-about-check-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.premium-about-check-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #0436aa !important;
  border: 1px solid rgba(255, 200, 47, 0.35);
  box-shadow: 0 4px 14px rgba(4, 54, 170, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  color: #FFC82F;
  flex-shrink: 0;
  transition: var(--transition-smooth);
}

.premium-about-check-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2px;
  color: #FFC82F !important;
  stroke: #FFC82F !important;
}

html[data-theme="light"] .premium-about-check-icon {
  background: #0436aa !important;
  border: 1px solid rgba(255, 200, 47, 0.35) !important;
  box-shadow: 0 4px 14px rgba(4, 54, 170, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  color: #FFC82F !important;
  stroke: #FFC82F !important;
}

.premium-about-check-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--about-text-primary);
  white-space: nowrap;
}

/* Actions Row */
.premium-about-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 36px;
}

.premium-about-actions .btn {
  order: 1;
}

.btn-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--about-brand);
  color: #FFFFFF !important;
  font-weight: 600;
  padding: 15px 32px;
  border-radius: 999px;
  transition: var(--transition-smooth);
}

.btn-brand:hover {
  background-color: var(--about-brand-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 200, 47, 0.3);
}

.premium-about-social {
  order: 2;
  display: flex;
  align-items: center;
  gap: 16px;
}

.premium-about-avatars {
  display: flex;
  align-items: center;
}

.premium-about-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--about-card-bg);
  object-fit: cover;
  margin-left: -14px;
}

.premium-about-avatar:first-child {
  margin-left: 0;
}

.premium-about-social-info {
  display: flex;
  flex-direction: column;
}

.premium-about-social-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--about-text-primary);
  line-height: 1.2;
}

.premium-about-stars {
  display: flex;
  gap: 2px;
  margin-top: 4px;
}

.premium-about-stars svg {
  width: 14px;
  height: 14px;
  fill: #FFC82F !important;
  color: #FFC82F !important;
  stroke: #FFC82F !important;
}

.premium-about-stars svg polygon,
.premium-about-stars svg path {
  fill: #FFC82F !important;
  color: #FFC82F !important;
}

/* Right Column Collage Layout */
.premium-about-visual-container {
  position: relative;
  width: 100%;
  max-width: 520px;
  /* Reduced from 600px to fit column and match header grid boundary */
  height: 500px;
  /* Reduced from 560px to maintain proportions */
  /* Increased from 520px to prevent spacing issues */
  margin: 0 15px 0 auto;
  /* Shifted left by 15px to align overflowing right card with container edge */
}

/* Backdrop diagonal green shape */
.premium-about-backdrop {
  position: absolute;
  top: 10%;
  left: 12%;
  width: 76%;
  height: 80%;
  background-color: var(--about-backdrop-bg);
  border-radius: 32px;
  transform: skewX(-12deg);
  z-index: 1;
}

/* Grid Dots Background */
.premium-about-dots {
  position: absolute;
  width: 130px;
  height: 130px;
  background-image: radial-gradient(var(--about-brand) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 0.12;
  z-index: 1;
}

.dots-top-left {
  top: 10px;
  left: -20px;
}

.dots-bottom-right {
  bottom: 10px;
  right: -20px;
}

/* Glowing background auraballs */
.premium-about-aura {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
  transition: transform 0.6s ease-out;
}

.premium-about-aura-1 {
  background: radial-gradient(circle, var(--about-brand) 0%, transparent 70%);
  top: 10%;
  left: 15%;
  animation: auraFloat1 15s ease-in-out infinite alternate;
}

.premium-about-aura-2 {
  background: radial-gradient(circle, #FFC82F 0%, transparent 70%);
  bottom: 10%;
  right: 15%;
  animation: auraFloat2 18s ease-in-out infinite alternate;
}

@keyframes auraFloat1 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(50px, -40px) scale(1.25);
  }
}

@keyframes auraFloat2 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(-40px, 50px) scale(1.15);
  }
}

/* Collage Card Wrappers - Coordinates, Positioning & Dynamic Parallax */
.collage-card-wrapper {
  position: absolute;
  z-index: 2;
  /* Multiplies the JS-defined mouse movement ratio by the card's parallax factor */
  transform: translate(calc(var(--base-tx, 0px) + var(--mx, 0) * var(--pf-x, 15px)),
      calc(var(--base-ty, 0px) + var(--my, 0) * var(--pf-y, 15px)));
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wrapper-experience {
  top: -15px;
  left: 50%;
  --base-tx: -50%;
  --base-ty: 0px;
  --pf-x: -12px;
  --pf-y: -12px;
}

.wrapper-campaigns {
  top: 125px;
  /* Tuned for 500px height and 15px offset */
  left: -15px;
  /* Pushed left by 15px to keep card inside boundary */
  --base-tx: 0px;
  --base-ty: 0px;
  --pf-x: 18px;
  --pf-y: 18px;
}

.wrapper-impressions {
  top: 205px;
  /* Tuned for 500px height and 15px offset */
  right: -15px;
  /* Pushed right by 15px to align with container edge */
  --base-tx: 0px;
  --base-ty: 0px;
  --pf-x: -18px;
  --pf-y: -18px;
}

.wrapper-roi {
  bottom: 15px;
  left: 50%;
  --base-tx: -50%;
  --base-ty: 0px;
  --pf-x: 12px;
  --pf-y: 12px;
}

.wrapper-growth {
  top: 50%;
  left: 50%;
  --base-tx: -50%;
  --base-ty: -50%;
  --pf-x: 0px;
  --pf-y: 0px;
  z-index: 3;
}

/* Collage Cards inner content - Styles & Floating animations */
.premium-collage-card {
  background-color: var(--about-card-bg);
  border: 1px solid var(--about-card-border);
  border-radius: 20px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), 0 14px 36px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

html[data-theme="light"] .premium-collage-card {
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.95), 0 14px 34px rgba(14, 20, 36, 0.05);
}

/* Floating Animations */
.wrapper-experience .premium-collage-card {
  animation: cardFloatY 5.2s ease-in-out infinite alternate;
}

.wrapper-campaigns .premium-collage-card {
  animation: cardFloatY 6.2s ease-in-out infinite alternate 0.8s;
}

.wrapper-impressions .premium-collage-card {
  animation: cardFloatY 5.6s ease-in-out infinite alternate 0.4s;
}

.wrapper-roi .premium-collage-card {
  animation: cardFloatY 6.6s ease-in-out infinite alternate 1.2s;
}

.wrapper-growth .premium-collage-card {
  background-color: var(--about-brand);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(255, 200, 47, 0.15);
  animation: cardFloatSkew 5.8s ease-in-out infinite alternate 0.6s;
}

html[data-theme="light"] .wrapper-growth .premium-collage-card {
  border-color: var(--about-brand);
  box-shadow: 0 16px 40px rgba(255, 200, 47, 0.35);
}

@keyframes cardFloatY {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-8px);
  }
}

@keyframes cardFloatSkew {
  0% {
    transform: skewX(-12deg) translateY(0);
  }

  100% {
    transform: skewX(-12deg) translateY(-8px);
  }
}

/* Hover scales card and pauses float */
.collage-card-wrapper:hover {
  z-index: 4;
}

.collage-card-wrapper:hover .premium-collage-card {
  animation-play-state: paused;
  transform: translateY(-4px) scale(1.03);
  border-color: var(--about-brand);
  /* glowing brand orange border */
  box-shadow: 0 20px 48px rgba(255, 200, 47, 0.18), 0 0 0 1px rgba(255, 200, 47, 0.05);
}

.wrapper-growth:hover .premium-collage-card {
  animation-play-state: paused;
  transform: skewX(-12deg) translateY(-4px) scale(1.03);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(255, 200, 47, 0.25);
}

html[data-theme="light"] .wrapper-growth:hover .premium-collage-card {
  box-shadow: 0 20px 48px rgba(255, 200, 47, 0.4), 0 0 0 1px rgba(255, 200, 47, 0.1);
}

/* Specific card dimensions & padding */
.card-experience {
  width: 160px;
  /* Reduced from 170px to increase spacing */
  padding: 20px 16px;
  text-align: center;
}

.card-campaigns {
  width: 150px;
  /* Reduced from 155px to increase spacing */
  padding: 20px 16px;
  text-align: center;
}

.card-impressions {
  width: 160px;
  /* Reduced from 170px to increase spacing */
  padding: 20px 16px;
  text-align: center;
}

.card-roi {
  width: 230px;
  /* Reduced from 240px to align with container width */
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.card-growth {
  width: 180px;
  /* Reduced from 195px to optimize spacing proportions */
  padding: 22px 16px;
  text-align: center;
  transform: skewX(-12deg) translateY(0);
  /* Fix load glitch: starts skewed immediately */
}

/* Reverse skew for card growth content to keep text normal */
.card-growth-inner {
  transform: skewX(12deg);
}

/* Card Elements */
.card-icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: var(--about-light-brand);
  color: var(--about-brand);
  margin-bottom: 14px;
}

.card-growth .card-icon-container {
  background-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

.card-icon-container svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.2px;
}

.card-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--about-text-primary);
  line-height: 1.15;
  margin-bottom: 4px;
}

.card-growth .card-value {
  color: #FFFFFF;
}

.card-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--about-text-secondary);
  line-height: 1.35;
  margin-bottom: 8px;
}

.card-growth .card-label {
  color: rgba(255, 255, 255, 0.85);
}

.card-underline {
  width: 20px;
  height: 2px;
  background-color: var(--about-brand);
  margin: 8px auto 0 auto;
  /* Added 8px top margin to resolve tight spacing */
}

.card-growth .card-underline {
  background-color: rgba(255, 255, 255, 0.5);
}

/* Horizontal card adjustments */
.card-roi .card-icon-container {
  margin-bottom: 0;
  flex-shrink: 0;
}

.card-roi-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card-roi-content .card-value {
  margin-bottom: 0px;
}

.card-roi-content .card-label {
  margin-bottom: 4px;
  text-align: left;
}

.card-roi-content .card-underline {
  margin: 8px 0 0 0;
  /* Added 8px top margin to resolve tight spacing */
}

/* Responsive media queries */
@media (max-width: 992px) {
  .premium-about {
    padding: 50px 0;
    /* Reduced top/bottom padding */
  }
}

@media (max-width: 768px) {
  .premium-about {
    padding: 40px 0;
  }

  h1.premium-about-title {
    font-size: 38px;
    line-height: 1.15;
  }

  h2.premium-about-title {
    font-size: 28px;
    line-height: 1.25;
  }

  .premium-about-checklist {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Dynamic Fluid Width & Height for About Visual System on All Mobile Screens */
  .premium-about-visual-container {
    width: 100%;
    max-width: min(100%, 460px);
    height: clamp(390px, 95vw, 470px);
    margin: 0 auto;
  }

  .premium-about-backdrop {
    width: 84%;
    height: 82%;
    left: 8%;
    top: 9%;
  }

  .wrapper-experience {
    width: clamp(120px, 32vw, 150px);
    top: 10px;
    left: 52%;
  }

  .wrapper-campaigns {
    width: clamp(110px, 29vw, 140px);
    top: clamp(95px, 24vw, 120px);
    left: 2%;
  }

  .wrapper-impressions {
    width: clamp(110px, 29vw, 140px);
    top: clamp(145px, 34vw, 180px);
    right: 2%;
  }

  .wrapper-roi {
    width: clamp(180px, 48vw, 225px);
    bottom: clamp(15px, 3.5vw, 25px);
    left: 50%;
  }

  .wrapper-growth {
    width: clamp(140px, 36vw, 175px);
  }

  .card-experience {
    width: 100%;
    padding: clamp(12px, 3vw, 16px) clamp(8px, 2vw, 12px);
  }

  .card-campaigns {
    width: 100%;
    padding: clamp(12px, 3vw, 16px) clamp(8px, 2vw, 12px);
  }

  .card-impressions {
    width: 100%;
    padding: clamp(12px, 3vw, 16px) clamp(8px, 2vw, 12px);
  }

  .card-roi {
    width: 100%;
    padding: clamp(10px, 2.5vw, 14px) clamp(10px, 2.5vw, 16px);
  }

  .card-growth {
    width: 100%;
    padding: clamp(14px, 3.5vw, 20px) clamp(8px, 2vw, 12px);
  }

  .card-value {
    font-size: clamp(18px, 4.5vw, 24px);
  }

  .card-label {
    font-size: clamp(9px, 2.4vw, 11px);
  }

  .card-icon-container {
    width: clamp(32px, 8vw, 40px);
    height: clamp(32px, 8vw, 40px);
    margin-bottom: 8px;
  }

  .card-icon-container svg {
    width: clamp(15px, 3.8vw, 19px);
    height: clamp(15px, 3.8vw, 19px);
  }

  .card-roi .card-icon-container {
    margin-bottom: 0;
  }

  .premium-about-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .premium-about-social {
    order: 1;
  }

  .premium-about-actions .btn {
    order: 2;
  }
}

/* ========================================== */
/* ─── About Page: Pillars of Engineering ─── */
/* ========================================== */
.about-pillars-section {
  padding: 85px 0;
  background-color: var(--deck-navy);
  position: relative;
}

.about-pillars-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 55px auto;
}

.about-pillars-header h2 {
  font-size: 46px;
  line-height: 53px;
  margin: 14px 0 16px 0;
}

.about-pillars-header p {
  font-size: 16px;
  color: var(--static-gray);
  line-height: 1.6;
}

.about-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.about-pillar-card {
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 200, 47, 0.18);
  border-radius: 20px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 12px 30px rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] .about-pillar-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.95), 0 12px 32px rgba(14, 20, 36, 0.04);
}

.about-pillar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.about-pillar-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 200, 47, 0.4);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3), 0 0 25px rgba(255, 200, 47, 0.12);
}

html[data-theme="light"] .about-pillar-card:hover {
  border-color: rgba(255, 200, 47, 0.4);
  box-shadow: 0 20px 45px rgba(14, 20, 36, 0.1), 0 0 25px rgba(255, 200, 47, 0.1);
}

.about-pillar-card:hover::before {
  opacity: 1;
}

.about-pillar-featured {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 36px;
  align-items: center;
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
  border-color: rgba(255, 200, 47, 0.3);
  padding: 30px 22px;
}

html[data-theme="light"] .about-pillar-featured {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 200, 47, 0.06) 100%);
  border-color: rgba(255, 200, 47, 0.3);
}

.pillar-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.pillar-icon-box {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(255, 200, 47, 0.12);
  border: 1px solid rgba(255, 200, 47, 0.25);
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

html[data-theme="light"] .pillar-icon-box {
  background: rgba(255, 200, 47, 0.15);
  border: 1px solid rgba(255, 200, 47, 0.28);
  color: #FFC82F;
}

.pillar-number {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.1em;
  background: rgba(255, 200, 47, 0.08);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 200, 47, 0.2);
}

html[data-theme="light"] .pillar-number {
  background: rgba(255, 200, 47, 0.15);
  border: 1px solid rgba(255, 200, 47, 0.3);
  color: #FFC82F;
}

.about-pillar-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--readout-white);
  margin-bottom: 12px;
  line-height: 1.3;
}

html[data-theme="light"] .about-pillar-card h3 {
  color: #0E1424;
}

.about-pillar-card p {
  font-size: 14.5px;
  color: var(--static-gray);
  line-height: 1.6;
  margin-bottom: 24px;
}

.pillar-badge-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.pillar-pill {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--readout-white);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 5px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pillar-pill.accent {
  background: rgba(255, 200, 47, 0.14);
  border-color: rgba(255, 200, 47, 0.35);
  color: var(--amber);
}

html[data-theme="light"] .pillar-pill {
  color: #2D3748;
  background: #EDF2F7;
  border: 1px solid rgba(14, 20, 36, 0.12);
}

html[data-theme="light"] .pillar-pill.accent {
  background: rgba(255, 200, 47, 0.15) !important;
  border: 1px solid rgba(255, 200, 47, 0.35) !important;
  color: #FFC82F !important;
}

html[data-theme="light"] .pillar-pill i,
html[data-theme="light"] .pillar-pill svg {
  color: #4A5568;
}

html[data-theme="light"] .pillar-pill.accent i,
html[data-theme="light"] .pillar-pill.accent svg {
  color: #FFC82F !important;
}

.pillar-featured-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 200, 47, 0.18);
  border-radius: 16px;
  padding: 24px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] .pillar-featured-stats {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

.featured-stat-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.featured-stat-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--amber);
  line-height: 1.1;
}

.featured-stat-label {
  font-size: 12px;
  color: var(--static-gray);
  line-height: 1.3;
}

@media (max-width: 992px) {
  .about-pillars-grid {
    grid-template-columns: 1fr;
  }

  .about-pillar-featured {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }
}

/* About Page: History/Mission/Values & Team Cards Glassmorphism */
.process-card,
.team-card {
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 200, 47, 0.16);
  border-radius: 16px;
  padding: 30px 24px;
  transition: all 0.3s ease;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 10px 25px rgba(0, 0, 0, 0.25);
}

html[data-theme="light"] .process-card,
html[data-theme="light"] .team-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.95), 0 10px 25px rgba(14, 20, 36, 0.04);
}

.process-card:hover,
.team-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 200, 47, 0.4);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 200, 47, 0.1);
}

html[data-theme="light"] .process-card:hover,
html[data-theme="light"] .team-card:hover {
  border-color: rgba(255, 200, 47, 0.4);
  box-shadow: 0 16px 36px rgba(14, 20, 36, 0.08), 0 0 20px rgba(255, 200, 47, 0.08);
}

/* ========================================== */
/* ─── Bento Focus: Mission / Vision / Values ─ */
/* ========================================== */
.bento-focus-section {
  padding: 90px 0;
  background-color: var(--ink-navy);
  position: relative;
}

.bento-focus-header {
  margin-bottom: 48px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.bento-focus-section.in-view .bento-focus-header {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1), transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.1s;
}

.bento-focus-header h2 {
  font-size: 46px;
  font-weight: 700;
  line-height: 53px;
  letter-spacing: -0.02em;
  color: var(--readout-white);
  margin-top: 12px;
}

html[data-theme="light"] .bento-focus-header h2 {
  color: #0E1424;
}

/* 3-Column Bento Grid */
.bento-focus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 20px;
  align-items: stretch;
}

.bento-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Common Bento Box Styling & Re-triggerable Entrance */
.bento-box {
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
  border: 1px solid rgba(255, 200, 47, 0.18);
  border-radius: 20px;
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] .bento-box {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.95), 0 12px 32px rgba(14, 20, 36, 0.04) !important;
}

html[data-theme="light"] .bento-box-status {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.95), 0 12px 32px rgba(14, 20, 36, 0.04) !important;
}

/* Staggered slow sequence when in-view (re-triggers on every scroll arrival) */
/* 1. Top bar: Avatars (shows first) */
.bento-focus-section.in-view .bento-box-avatars {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.3s;
}

/* 2. Top box: Vision revenue box */
.bento-focus-section.in-view .bento-box-rev {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.55s;
}

/* 3. Bottom card: Mission ROI box */
.bento-focus-section.in-view .bento-box-roi {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.8s;
}

/* 4. Bottom bar: Available for services status pill */
.bento-focus-section.in-view .bento-box-status {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 1.05s;
}

/* 5. Tall hero card: Values & 4.8/5 satisfaction */
.bento-focus-section.in-view .bento-box-tall {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1), transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 1.3s;
}

.bento-box:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 200, 47, 0.4);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25), 0 0 20px rgba(255, 200, 47, 0.08);
}

html[data-theme="light"] .bento-box:hover {
  border-color: rgba(255, 200, 47, 0.35);
  box-shadow: 0 16px 36px rgba(14, 20, 36, 0.08), 0 0 20px rgba(255, 200, 47, 0.06);
}

/* Box 1: Avatars Pill */
.bento-box-avatars {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
}

.bento-avatars-wrap {
  display: flex;
  align-items: center;
}

.bento-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #1F140C;
  object-fit: cover;
  margin-left: -10px;
}

html[data-theme="light"] .bento-avatar-img {
  border-color: #FFFFFF;
}

.bento-avatar-img:first-child {
  margin-left: 0;
}

.bento-partners-tag {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--readout-white);
  letter-spacing: 0.02em;
}

html[data-theme="light"] .bento-partners-tag {
  color: #0E1424;
}

/* Box 2 & 3: Mission (ROI) & Vision (Revenue) */
.bento-box-roi,
.bento-box-rev {
  flex: 1;
  min-height: 220px;
}

.bento-label-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  display: block;
}

.bento-box-text {
  font-size: 15px;
  color: var(--readout-white);
  line-height: 1.5;
  font-weight: 500;
}

html[data-theme="light"] .bento-box-text {
  color: #0E1424;
}

.bento-number-wrap {
  margin-top: 28px;
}

.bento-giant-number {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 700;
  color: var(--readout-white);
  line-height: 1;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

html[data-theme="light"] .bento-giant-number {
  color: #0E1424;
}

.bento-num-accent {
  font-size: 32px;
  color: var(--amber);
  font-weight: 600;
}

.bento-sublabel {
  font-size: 13px;
  color: var(--static-gray);
  margin-top: 8px;
  display: block;
  line-height: 1.4;
}

html[data-theme="light"] .bento-sublabel {
  color: #5C6479;
}

/* Box 4: Status Pill */
.bento-box-status {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
}

.bento-live-pulse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 12px #22C55E;
  animation: liveBeacon 2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes liveBeacon {

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

  50% {
    transform: scale(1.25);
    opacity: 0.7;
  }
}

.bento-status-label {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--readout-white);
}

html[data-theme="light"] .bento-status-label {
  color: #0E1424;
}

/* Box 5: Tall Hero Box (Values + Satisfaction) */
.bento-box-tall {
  height: 100%;
  min-height: 380px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bento-tall-lead {
  font-size: 16px;
  color: var(--readout-white);
  line-height: 1.6;
  font-weight: 500;
  position: relative;
  z-index: 2;
  max-width: 90%;
}

html[data-theme="light"] .bento-tall-lead {
  color: #0E1424;
}

/* Embossed Watermark Arrow */
.bento-watermark-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 140px;
  height: 140px;
  color: var(--readout-white);
  opacity: 0.04;
  pointer-events: none;
  z-index: 1;
}

html[data-theme="light"] .bento-watermark-arrow {
  color: #0E1424;
  opacity: 0.05;
}

.bento-watermark-arrow svg {
  width: 100%;
  height: 100%;
}

/* Bottom Stats in Box 5 */
.bento-tall-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  position: relative;
  z-index: 2;
}

.bento-score-val {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--readout-white);
  line-height: 1;
  letter-spacing: -0.02em;
}

html[data-theme="light"] .bento-score-val {
  color: #0E1424;
}

.bento-score-denom {
  font-size: 24px;
  font-weight: 500;
  color: var(--static-gray);
  margin-left: 2px;
}

.bento-score-desc {
  font-size: 13px;
  color: var(--static-gray);
  margin-top: 6px;
  display: block;
}

html[data-theme="light"] .bento-score-desc {
  color: #5C6479;
}

.bento-stars-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.bento-stars-row {
  display: flex;
  gap: 4px;
  color: #818CF8;
}

.bento-stars-row svg {
  width: 16px;
  height: 16px;
  fill: #818CF8;
}

.bento-trusted-by {
  font-size: 12px;
  color: var(--static-gray);
  text-align: right;
  line-height: 1.3;
}

html[data-theme="light"] .bento-trusted-by {
  color: #5C6479;
}

@media (max-width: 992px) {
  .bento-focus-grid {
    grid-template-columns: 1fr;
  }

  .bento-focus-header h2 {
    font-size: 34px;
  }
}

/* ========================================== */
/* ─── Growth Analytics & Comparison Graph ── */
/* ========================================== */
.about-growth-section {
  padding: 95px 0;
  background-color: var(--deck-navy);
  position: relative;
  overflow: hidden;
}

.about-growth-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
}

/* Left Column: Copy & Value Checklist */
.about-growth-content h2 {
  font-size: 46px;
  line-height: 53px;
  margin: 14px 0 20px 0;
  font-weight: 700;
}

.about-growth-content>p {
  font-size: 15.5px;
  color: var(--static-gray);
  line-height: 1.65;
  margin-bottom: 32px;
}

html[data-theme="light"] .about-growth-content>p {
  color: #4B5563;
}

.growth-check-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.growth-check-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.growth-check-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 200, 47, 0.12);
  border: 1px solid rgba(255, 200, 47, 0.3);
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.growth-check-icon svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5px;
}

.growth-check-item strong {
  font-size: 15px;
  color: var(--readout-white);
  display: block;
  margin-bottom: 3px;
}

html[data-theme="light"] .growth-check-item strong {
  color: #0E1424;
}

.growth-check-item p {
  font-size: 13.5px;
  color: var(--static-gray);
  line-height: 1.5;
  margin: 0;
}

html[data-theme="light"] .growth-check-item p {
  color: #5C6479;
}

/* Right Column: Exact Reference Analytics Graph Card */
.analytics-graph-card {
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
  border: 1px solid rgba(255, 200, 47, 0.2);
  border-radius: 24px;
  padding: 36px 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease;
}

html[data-theme="light"] .analytics-graph-card {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.95), 0 25px 60px rgba(14, 20, 36, 0.04) !important;
}

.graph-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.graph-card-title {
  font-size: 19px;
  font-weight: 600;
  color: var(--readout-white);
  margin: 0;
  letter-spacing: -0.01em;
}

html[data-theme="light"] .graph-card-title {
  color: #0E1424;
}

.graph-pill-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.graph-pill-tab {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

html[data-theme="light"] .graph-pill-tab {
  background: rgba(14, 20, 36, 0.04);
  border-color: rgba(14, 20, 36, 0.08);
  color: #5C6479;
}

.graph-pill-tab:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
}

html[data-theme="light"] .graph-pill-tab:hover {
  color: #0E1424;
  border-color: rgba(14, 20, 36, 0.2);
}

.graph-pill-tab.active {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #0B0F19;
  font-weight: 600;
}

html[data-theme="light"] .graph-pill-tab.active {
  background: #0E1424;
  border-color: #0E1424;
  color: #FFFFFF;
}

/* SVG Chart Typography & Styling */
.graph-svg-container {
  width: 100%;
  position: relative;
}

.graph-axis-text {
  font-family: var(--font-mono);
  font-size: 12.5px;
  fill: rgba(255, 255, 255, 0.4);
  font-weight: 500;
}

html[data-theme="light"] .graph-axis-text {
  fill: #707A94;
}

.graph-axis-active {
  fill: #FFC82F;
  font-weight: 700;
}

html[data-theme="light"] .graph-axis-active {
  fill: #FFC82F;
}

.graph-grid-line,
.graph-vgrid-line {
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1px;
}

html[data-theme="light"] .graph-grid-line,
html[data-theme="light"] .graph-vgrid-line {
  stroke: rgba(14, 20, 36, 0.06);
}

.graph-baseline {
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1.5px;
}

html[data-theme="light"] .graph-baseline {
  stroke: rgba(14, 20, 36, 0.18);
}

.graph-tick {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.5px;
}

html[data-theme="light"] .graph-tick {
  stroke: rgba(14, 20, 36, 0.3);
}

.graph-beacon-ring,
.graph-beacon-dot {
  transition: fill 0.3s ease, stroke 0.3s ease;
}

.graph-peak-number {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  fill: #FFFFFF;
  text-anchor: middle;
  letter-spacing: -0.02em;
  transition: fill 0.3s ease;
}

html[data-theme="light"] .graph-peak-number {
  fill: #0E1424;
}

/* Light Mode Graph Appearance Overrides */
html[data-theme="light"] .graph-line-path {
  stroke: url(#curveLineGradientLight);
}

html[data-theme="light"] .graph-area-path {
  fill: url(#curveAreaGradientLight);
}

html[data-theme="light"] .graph-area-shadow-path {
  display: none !important;
}

html[data-theme="light"] .graph-beacon-ring {
  fill: #FFFFFF !important;
  stroke: #FFC82F !important;
}

html[data-theme="light"] .graph-beacon-dot {
  fill: #FFC82F !important;
}

.graph-card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.graph-card-footer span {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

html[data-theme="light"] .graph-card-footer span {
  color: #707A94;
}

@media (max-width: 992px) {
  .about-growth-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .analytics-graph-card {
    padding: 26px 20px 22px;
    border-radius: 20px;
  }

  .graph-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
  }

  .graph-card-title {
    font-size: 17.5px;
  }

  .graph-pill-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .graph-pill-tab {
    padding: 5px 11px;
    font-size: 11.5px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .graph-card-footer {
    justify-content: flex-start;
    margin-top: 14px;
  }

  .graph-card-footer span {
    font-size: 11.5px;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .analytics-graph-card {
    padding: 20px 14px 16px;
  }

  .graph-card-title {
    font-size: 15.5px;
  }

  .graph-pill-tabs {
    gap: 4px;
  }

  .graph-pill-tab {
    padding: 4px 8px;
    font-size: 10px;
    white-space: nowrap;
  }

  .graph-card-footer span {
    font-size: 9.8px;
    white-space: nowrap;
  }
}

/* ==========================================================================
   Interactive Falling Text Physics Lab Section
   ========================================================================== */
.falling-text-section {
  padding: 100px 0;
  position: relative;
  background-color: var(--ink-navy);
  border-top: 1px solid var(--hairline);
  overflow: hidden;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
}

html[data-theme="light"] .falling-text-section {
  background-color: #F8FAFC;
  border-color: rgba(14, 20, 36, 0.08);
  background-image:
    linear-gradient(rgba(14, 20, 36, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 20, 36, 0.035) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
}

.falling-section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}

.falling-badge-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}

.interactive-hint-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--amber);
  background: rgba(255, 200, 47, 0.1);
  border: 1px solid rgba(255, 200, 47, 0.25);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  animation: subtleGlowPulse 2.5s infinite alternate ease-in-out;
}

html[data-theme="light"] .interactive-hint-pill {
  color: #FFC82F;
  background: rgba(255, 200, 47, 0.15);
  border-color: rgba(255, 200, 47, 0.3);
}

@keyframes subtleGlowPulse {
  0% {
    box-shadow: 0 0 0 rgba(255, 200, 47, 0);
  }

  100% {
    box-shadow: 0 0 14px rgba(255, 200, 47, 0.3);
  }
}

.falling-section-header h2 {
  font-size: 46px;
  line-height: 53px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  color: var(--readout-white);
}

html[data-theme="light"] .falling-section-header h2 {
  color: #0E1424;
}

.falling-section-header p {
  font-size: 1.05rem;
  color: var(--static-gray);
  line-height: 1.6;
}

/* Physics Sandbox Glassmorphism Card with Ambient Grid Overlays */
.falling-physics-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576);
  background-image:
    radial-gradient(circle at 85% 15%, rgba(255, 200, 47, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(255, 200, 47, 0.05) 0%, transparent 45%),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
  border: 1px solid rgba(255, 200, 47, 0.2);
  border-radius: 28px;
  padding: 24px 0 0 0;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  overflow: hidden;
}

.falling-physics-card::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255, 200, 47, 0.14) 0%, rgba(255, 200, 47, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.falling-physics-card::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.09) 0%, rgba(99, 102, 241, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

html[data-theme="light"] .falling-physics-card {
  background-color: rgba(255, 255, 255, 0.72);
  background-image:
    radial-gradient(circle at 85% 15%, rgba(255, 200, 47, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(255, 200, 47, 0.06) 0%, transparent 45%),
    linear-gradient(rgba(14, 20, 36, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 20, 36, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 200, 47, 0.22) !important;
  box-shadow: 0 20px 50px rgba(14, 20, 36, 0.05), inset 0 1px 2px rgba(255, 255, 255, 0.95);
}

html[data-theme="light"] .falling-physics-card::before {
  background: radial-gradient(circle, rgba(255, 200, 47, 0.12) 0%, rgba(255, 200, 47, 0) 70%);
}

html[data-theme="light"] .falling-physics-card::after {
  background: radial-gradient(circle, rgba(255, 200, 47, 0.06) 0%, rgba(255, 200, 47, 0) 70%);
}

/* Card Control Bar */
.falling-card-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px 16px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0;
}

html[data-theme="light"] .falling-card-controls {
  border-bottom-color: rgba(255, 200, 47, 0.15);
}

.physics-live-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

html[data-theme="light"] .physics-live-status {
  color: #5C6479;
}

.pulse-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
  animation: liveStatusBlink 1.8s infinite ease-in-out;
}

@keyframes liveStatusBlink {

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

  50% {
    opacity: 0.4;
    transform: scale(0.85);
  }
}

.btn-reset-physics {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-reset-physics:hover {
  background: rgba(255, 200, 47, 0.15);
  border-color: rgba(255, 200, 47, 0.4);
  color: var(--amber);
  transform: translateY(-1px);
}

html[data-theme="light"] .btn-reset-physics {
  color: #2D3748;
  background: #EDF2F7;
  border-color: rgba(14, 20, 36, 0.12);
}

html[data-theme="light"] .btn-reset-physics:hover {
  background: rgba(255, 200, 47, 0.15);
  border-color: rgba(255, 200, 47, 0.35);
  color: #FFC82F;
}

/* Falling Text Stage */
.falling-text-container {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 270px;
  cursor: grab;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
}

.falling-text-container:active {
  cursor: grabbing;
}

.falling-hover-prompt {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--amber);
  background: rgba(255, 200, 47, 0.12);
  border: 1px solid rgba(255, 200, 47, 0.3);
  padding: 6px 16px;
  border-radius: 999px;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

html[data-theme="light"] .falling-hover-prompt {
  color: #FFC82F;
  background: rgba(255, 200, 47, 0.15);
  border-color: rgba(255, 200, 47, 0.35);
}

.falling-hover-prompt.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
}

.falling-text-target {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 14px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 24px 20px 10px;
  line-height: 1.6;
}

/* Capsule Word Pills */
.falling-text-container .word {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: #F1F5F9;
  background: rgba(32, 20, 12, 0.95);
  border: 1px solid rgba(255, 200, 47, 0.22);
  border-radius: 999px;
  box-shadow: none;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  will-change: transform, left, top;
}

/* Highlighted Capsule Pill (No Glow / No Shadow) */
.falling-text-container .word.highlighted {
  color: #FFC82F;
  background: rgba(255, 200, 47, 0.16);
  border: 1px solid rgba(255, 200, 47, 0.45);
  font-weight: 700;
  box-shadow: none;
}

/* Light Theme Capsules (No Glow / No Shadow) */
html[data-theme="light"] .falling-text-container .word {
  color: #1E293B;
  background: #FFFFFF;
  border: 1px solid rgba(14, 20, 36, 0.14);
  box-shadow: none;
}

html[data-theme="light"] .falling-text-container .word.highlighted {
  color: #FFC82F;
  background: rgba(255, 200, 47, 0.15);
  border: 1px solid rgba(255, 200, 47, 0.4);
  box-shadow: none;
}

.falling-text-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

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

  .falling-section-header h2 {
    font-size: 2rem;
  }

  .falling-physics-card {
    padding: 18px 16px 20px;
    border-radius: 22px;
  }

  .falling-card-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 12px 14px !important;
    margin-bottom: 12px;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }

  .physics-live-status {
    font-size: 11px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .status-hint-txt {
    display: none !important;
  }

  .btn-reset-physics {
    font-size: 11px;
    padding: 5px 12px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Hide floating prompt on mobile to avoid overlapping the words */
  .falling-hover-prompt {
    display: none !important;
  }

  .falling-text-container {
    height: 360px;
    min-height: 340px;
  }

  .falling-text-target {
    padding: 8px 4px 20px;
    gap: 8px 8px;
    justify-content: center;
  }

  .falling-text-container .word {
    font-size: 0.84rem;
    padding: 6px 13px;
    line-height: 1.2;
  }
}

@media (max-width: 480px) {
  .falling-text-container {
    height: 330px;
  }

  .falling-text-target {
    padding: 6px 2px 16px;
    gap: 6px 6px;
  }

  .falling-text-container .word {
    font-size: 0.78rem;
    padding: 5px 11px;
  }

  .physics-live-status {
    font-size: 10.5px;
  }

  .btn-reset-physics {
    font-size: 10.5px;
    padding: 4px 10px !important;
  }
}

/* ============================================================
   MOBILE OVERFLOW FIX — Only affects viewport ≤ 768px
   Desktop layout is completely untouched.
   ============================================================ */
@media (max-width: 768px) {

  /* Root level: prevent any child from causing horizontal scroll without breaking sticky */
  html {
    overflow-x: clip;
  }

  body {
    overflow-x: clip;
    max-width: 100vw;
    padding-top: 0 !important;
  }

  /* Physics falling-text box: clip canvas to container width */
  .falling-physics-card {
    overflow: hidden;
    max-width: 100%;
  }

  .falling-text-container {
    overflow: hidden;
    max-width: 100%;
    width: 100%;
  }

  .falling-text-target {
    overflow: visible !important;
    max-width: 100%;
  }

  .falling-text-canvas,
  #falling-canvas-container {
    overflow: hidden;
    max-width: 100%;
  }

  /* CTA overflow — about page only (home page CTA is unrestricted on mobile) */
  .about-cta {
    overflow: hidden;
  }

  .cta-v2-card {
    overflow: hidden;
    max-width: 100%;
  }

  /* CTA floating badges: keep them within the card */
  .cta-floating-badge {
    max-width: calc(100% - 32px);
  }

  /* Unified Equal Top/Bottom Section Spacing on Mobile */
  section {
    max-width: 100vw;
    overflow-x: clip;
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }

  /* Hero Sections Mobile Top Spacing (120px Across All Pages) */
  .hero-section,
  .premium-about,
  .blog-hero,
  .contact-ref-hero,
  .post-single-hero,
  .post-hero-section {
    padding-top: 120px !important;
  }

  /* Equalized H1 Headings Across All Pages on Mobile */
  h1,
  .hero-title,
  .hero-text h1,
  h1.premium-about-title,
  .about-hero-title,
  .blog-hero-title,
  .contact-ref-title,
  .post-single-title {
    font-size: 40px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
  }

  /* Equalized H2 Headings Across All Pages & Sections on Mobile (30px) */
  h2,
  h2.premium-about-title,
  .section-heading h2,
  .section-header h2,
  .why-title,
  .bento-focus-header h2,
  .agency-manifesto-title,
  .process-header h2,
  .process-step-title,
  .testimonial-header h2,
  .portfolio-header h2,
  .pricing-header h2,
  .faq-header h2,
  .cta-v2-heading,
  .panel-title,
  .growth-header h2,
  .bento-grid-header h2 {
    font-size: 30px !important;
    line-height: 1.26 !important;
    letter-spacing: -0.015em !important;
  }

  /* Remove <br> in Mobile View Only */
  h2.premium-about-title br,
  .premium-about-title br {
    display: none !important;
  }

  /* Unified Mobile Spacing: Eyebrows/Badges to Heading */
  .eyebrow,
  .premium-about-eyebrow,
  .section-tag,
  .bento-tag,
  .process-eyebrow,
  .about-eyebrow,
  .card-label,
  .blog-filter-tag {
    margin-bottom: 8px !important;
  }

  /* Unified Mobile Spacing: Headings */
  h1,
  h2,
  .hero-title,
  .premium-about-title,
  .section-heading h2,
  .section-header h2,
  .why-title,
  .blog-hero-title,
  .contact-ref-title,
  .post-single-title,
  .bento-focus-header h2,
  .agency-manifesto-title,
  .process-header h2,
  .testimonial-header h2,
  .portfolio-header h2,
  .pricing-header h2,
  .faq-header h2,
  .cta-v2-heading,
  .panel-title {
    margin-bottom: 12px !important;
  }

  /* Unified Mobile Spacing: Dividers */
  .premium-about-divider,
  .section-divider {
    margin-bottom: 10px !important;
  }

  /* Unified Mobile Spacing: Subheadings & Body Copy */
  .hero-subhead {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 18px !important;
  }

  .premium-about-desc,
  .section-subtitle,
  .section-sub,
  .why-subtitle,
  .blog-hero-subtitle,
  .contact-ref-subtitle,
  .post-single-desc {
    margin-bottom: 18px !important;
  }

  /* Global Mobile 16px Left/Right Padding across all pages */
  .container,
  .hero-container,
  .footer-container,
  .post-single-container,
  .blog-container,
  .about-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  /* Mobile Floating Header (Centered & Fully Visible) */
  .main-header {
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 1000 !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 0 !important;
  }

  .header-container {
    height: 56px !important;
    padding: 0 16px !important;
  }

  .logo {
    font-size: 18px !important;
    opacity: 1 !important;
  }

  /* Mobile Hero Feature Badges Alignment */
  .hero-features-row {
    gap: 12px !important;
  }

  /* Mobile Pricing Card Inner Padding (36px 20px) */
  .pricing-card,
  .pricing-card.premium-plan {
    padding: 36px 20px !important;
  }

  /* Mobile CTA Trust Footer (Wraps cleanly without horizontal overflow) */
  .cta-v2-trust-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(10.5px, 2.9vw, 12px) !important;
    line-height: 1.45 !important;
    gap: 6px 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 0 4px !important;
  }

  .cta-v2-trust-footer svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
  }

  .cta-v2-trust-footer span {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    font-size: inherit !important;
    line-height: inherit !important;
    text-align: center !important;
  }

  /* Mobile About Pillars Card Padding */
  .about-pillar-card,
  .about-pillar-featured {
    padding: 24px 20px !important;
  }

  /* Hide Sparkle Star Icon on Mobile */
  .sparkle-icon {
    display: none !important;
  }

  /* Mobile Contact Page: Info Cards on Top, Form on Bottom, Compact Gap */
  .contact-ref-hero {
    padding-top: 120px !important;
    padding-bottom: 10px !important;
  }

  .contact-ref-subtitle {
    margin-bottom: 6px !important;
  }

  .contact-ref-main-section {
    padding-top: 8px !important;
    padding-bottom: 50px !important;
  }

  .contact-cards-column {
    order: 1 !important;
  }

  .contact-form-panel {
    order: 2 !important;
  }

  /* Mobile Responsive Single-Row Flexbox for Action Buttons */
  .why-bottom-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  .why-bottom-row .btn,
  .why-cta-btn,
  .why-whatsapp-btn {
    flex: 1 1 0 !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    padding: 11px 8px !important;
    font-size: clamp(11.5px, 3.2vw, 13px) !important;
    white-space: nowrap !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .why-bottom-row .btn svg,
  .why-bottom-row .btn i {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
  }

  /* Mobile About Section Action Row: Reviews Top, Button Bottom */
  .premium-about-social {
    order: 1 !important;
  }

  .premium-about-actions .btn {
    order: 2 !important;
  }
}