/* =========================================================================
   KAYALVA STUDIO | COLUMN BLUEPRINT DESIGN MIGRATION
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* --- Column Blueprint CSS Variables & Design Tokens --- */
:root {
  /* Colors - High-End Corporate Dark Mode */
  --color-ink-blue: rgba(255, 255, 255, 0.95);
  --color-code-black: #000000;
  --color-ghost-white: #050505;
  --color-fog-gray: #0a0a0c;
  --color-steel-gray: rgba(255, 255, 255, 0.08);
  --color-charcoal-text: rgba(255, 255, 255, 0.85);
  --color-slate-text: rgba(255, 255, 255, 0.55);
  --color-graphite: #121215;
  --color-deep-plum: #a5b4fc;
  --color-action-orange: #ec652b;
  /* Solid black buttons and highlights */
  --color-soft-horizon-gradient: linear-gradient(125deg, #ec652b -3.16%, #818cf8 30%, #00d6ff 60%, #050505 100%);
  --color-faded-grid-blue: rgba(255, 255, 255, 0.15);
  /* Neutral faint blueprint grid lines */
  --color-success-moss: #44b48b;
  --color-radial-twilight-gradient: radial-gradient(circle, #771c86 0%, #0a0a0c 100%);
  --color-info-blue: #7ea7e9;
  --color-callout-cyan: #00d6ff;
  --color-notification-teal: #88deeb;

  /* Global Theme Color Mappings */
  --color-bg: var(--color-ghost-white);
  --color-surface: rgba(255, 255, 255, 0.02);
  --color-surface-light: var(--color-fog-gray);
  --color-primary: var(--color-ink-blue);
  --color-accent: var(--color-action-orange);
  --color-border: var(--color-steel-gray);
  --color-border-glow: rgba(0, 214, 255, 0.15);
  --color-glow: rgba(236, 101, 43, 0.1);

  /* Hero Section Color Mappings */
  --color-hero-bg: var(--color-ghost-white);
  --color-hero-text: var(--color-ink-blue);
  --color-hero-muted: var(--color-slate-text);
  --color-hero-border: var(--color-steel-gray);

  /* Dayos Color Tokens for compatibility */
  --color-canvas-ice: var(--color-steel-gray);
  --color-midnight-ink: var(--color-ink-blue);
  --color-paper-white: rgba(255, 255, 255, 0.02);
  --color-ash-gray: var(--color-slate-text);
  --color-faint-mist: var(--color-fog-gray);
  --color-deep-smoke: var(--color-deep-plum);
  --color-action-green: var(--color-callout-cyan);
  --color-alert-yellow: var(--color-notification-teal);

  /* OpenServ Theme Compat Mappings */
  --color-canvas-white: var(--color-ghost-white);
  --color-ink-black: var(--color-ink-blue);
  --color-deep-blue: var(--color-deep-plum);
  --color-electric-green: var(--color-success-moss);

  /* Svelte Theme Mappings */
  --color-carbon: var(--color-ink-blue);
  --color-graphite-svelte: var(--color-charcoal-text);
  --color-pewter: var(--color-slate-text);
  --color-svelte-orange: var(--color-action-orange);
  --color-snow: var(--color-ghost-white);

  /* Kayalva Custom Color Mappings for Column Blueprint Compatibility */
  --color-kayalva-teal: var(--color-callout-cyan);
  --color-kayalva-teal-dark: var(--color-ink-blue);
  --color-kayalva-gold: var(--color-action-orange);
  --color-kayalva-gold-light: var(--color-notification-teal);
  --color-kayalva-gold-light: var(--color-notification-teal);

  /* Typography Families */
  --font-display: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Typography Scale */
  --text-caption: 11px;
  --leading-caption: 1.5;
  --tracking-caption: 0em;
  --text-body-sm: 13px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.2px;
  --text-body: 14px;
  --leading-body: 1.5;
  --tracking-body: -0.28px;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.36px;
  --text-heading: 24px;
  --leading-heading: 1.33;
  --tracking-heading: -0.48px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -0.8px;
  --text-display-sm: 48px;
  --leading-display-sm: 1.0;
  --tracking-display-sm: -1.44px;
  --text-display: 60px;
  --leading-display: 1.0;
  --tracking-display: -0.03em;

  /* Spacing Scale (4px base) */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-144: 144px;
  --spacing-192: 192px;

  /* Spacing aliases */
  --spacing-4: 4px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-100: 100px;

  /* Border Radii Mappings (Column Standard: cards & buttons=8px, subtle elements=2px) */
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-pill: 8px;
  --radius-nav: 8px;

  /* Shadows (Clinical and Subdued) */
  --shadow-subtle: rgba(17, 26, 74, 0.05) 0px 1px 3px 0px, rgba(17, 26, 74, 0.03) 0px 1px 0px 0px;
  --shadow-subtle-2: rgba(87, 90, 100, 0.08) 0px 0px 0px 1px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset;
  --shadow-sm: rgba(0, 0, 0, 0.04) 0px 4px 8px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
  --shadow-xl: rgba(17, 26, 74, 0.02) 0px 40px 32px 0px, rgba(17, 26, 74, 0.03) 0px 22px 18px 0px;

  --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Base Reset & Core Technical Blueprint Grid Background --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  width: 100%;
  overflow-x: clip;
}

body {
  background-color: var(--color-bg);
  background-image:
    linear-gradient(rgba(0, 214, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 214, 255, 0.015) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: center;
  color: var(--color-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  width: 100%;
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
.logo {
  font-family: var(--font-display);
}

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

ul {
  list-style: none;
}

/* --- Utility Typography & Scripts --- */
.cursive-text {
  font-family: inherit;
  font-size: 1em;
  font-weight: inherit;
  text-transform: none;
  color: inherit;
  display: inline-block;
}

.serif-italic {
  font-family: inherit;
  font-style: italic;
}

.text-gradient {
  color: var(--color-midnight-ink);
}

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

.highlight-red {
  color: var(--color-midnight-ink);
  background-color: var(--color-alert-yellow);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.outline-text {
  font-family: var(--font-display);
  color: transparent;
  -webkit-text-stroke: 1px var(--color-midnight-ink);
}

/* --- Premium Glow Blobs (Dayos Forbids Glows) --- */
.glow-blob {
  display: none;
}

/* --- Paper Cards (Glass-card to Paper-card) --- */
.glass-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-canvas-ice);
  border-radius: var(--radius-md);
  padding: 40px;
  transition: var(--transition-smooth);
}

.glass-card:hover {
  border-color: var(--color-midnight-ink);
  background: var(--color-paper-white);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05), var(--shadow-sm);
}

/* --- Modern Buttons (Dayos: buttons=8px, no shadows) --- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  transition: var(--transition-smooth);
  cursor: pointer;
  gap: 8px;
}

.btn-primary {
  background-color: #ffffff;
  color: #050505;
  border: 1px solid #ffffff;
}

.btn-primary:hover {
  background-color: #e4e4e7;
  border-color: #e4e4e7;
  color: #050505;
  transform: translateY(-2px);
}

.btn-outline {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: var(--color-faint-mist);
  color: var(--color-ash-gray);
  border: 1px solid var(--color-canvas-ice);
}

.btn-secondary:hover {
  background-color: var(--color-canvas-ice);
  color: var(--color-midnight-ink);
  transform: translateY(-2px);
}

/* --- Hybrid Hero Navbar (Codex.io Dark Permanent Theme) --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 12px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  background: rgba(10, 10, 12, 0.0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.0);
  color: #fff;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translateY(-10px);
}

.navbar.visible {
  opacity: 1;
  transform: translateY(0);
}

.navbar.scrolled {
  background: rgba(10, 10, 12, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #fff;
  padding: 12px 48px;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.scroll-progress-line {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0%;
  height: 1.5px;
  background: linear-gradient(to right, var(--color-action-orange), var(--color-callout-cyan));
  transition: width 0.1s linear;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  text-transform: none;
}

.logo span {
  font-weight: 400;
  color: var(--color-ash-gray);
}

.navbar.scrolled .logo span {
  color: var(--color-midnight-ink);
}

.nav-center .nav-links {
  display: flex;
  gap: 16px;
  background: transparent;
  padding: 0;
  border: none;
  transition: var(--transition-smooth);
}

.navbar.scrolled .nav-links {
  background: transparent;
  border: none;
}

.nav-links li a {
  padding: 8px 16px;
  border-radius: 0px;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 450;
  color: var(--color-ash-gray);
  border-top: 2px solid transparent;
  transition: var(--transition-smooth);
}

.navbar.scrolled .nav-links li a {
  color: var(--color-ash-gray);
}

.nav-links li a:hover {
  color: var(--color-midnight-ink);
  border-top-color: var(--color-fog-gray);
}

.navbar.scrolled .nav-links li a:hover {
  color: var(--color-midnight-ink);
}

.nav-links li a.active {
  background-color: transparent;
  color: var(--color-midnight-ink);
  font-weight: 500;
  border-top: 2px solid var(--color-midnight-ink);
  border-radius: 0px;
}

.navbar.scrolled .nav-links li a.active {
  background-color: transparent;
  color: var(--color-midnight-ink);
  border-top: 2px solid var(--color-midnight-ink);
}

.menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-paper-white);
  color: var(--color-midnight-ink);
  border: 1px solid var(--color-fog-gray);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.navbar.scrolled .menu-btn {
  background: var(--color-paper-white);
  color: var(--color-midnight-ink);
  border: 1px solid var(--color-fog-gray);
}

.menu-btn:hover {
  background: var(--color-faint-mist);
  border-color: var(--color-midnight-ink);
  color: var(--color-midnight-ink);
}

.navbar.scrolled .menu-btn:hover {
  background: var(--color-faint-mist);
  border-color: var(--color-midnight-ink);
  color: var(--color-midnight-ink);
}

/* --- Mobile Menu Overlay --- */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-canvas-ice);
  backdrop-filter: blur(25px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 40px;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-smooth);
  overflow-y: auto;
}

.mobile-menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
  color: #fff;
}

.mobile-close-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: auto;
}

.mobile-nav-links li a {
  font-size: 2rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-accent);
}

.mobile-nav-links li a:hover,
.mobile-nav-links li a.active {
  color: var(--color-primary);
  padding-left: 8px;
}

.mobile-menu-footer {
  border-top: 1px solid var(--color-border);
  padding-top: 30px;
  color: #fff;
}

.mobile-menu-footer p {
  color: var(--color-accent);
  margin-bottom: 12px;
}

.mobile-menu-socials {
  display: flex;
  gap: 16px;
}

.mobile-menu-socials a {
  color: var(--color-accent);
}

.mobile-menu-socials a:hover {
  color: var(--color-primary);
}

/* --- Light/Minimalist Hero Section Redesign --- */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 130px 80px 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-hero-bg);
  background-image:
    linear-gradient(rgba(229, 255, 93, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229, 255, 93, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
  background-position: center;
  color: var(--color-hero-text);
  overflow: hidden;
}

.hero-left {
  max-width: 600px;
  z-index: 2;
  text-align: left;
}

.hero-right {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 90%;
  width: 50%;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.hero-model-img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--radius-lg) var(--radius-lg) 0px 0px;
}

/* --- Svelte Crisp Editorial Hero Section overrides --- */
.hero.svelte-hero-theme {
  background-color: var(--color-snow);
  background-image:
    radial-gradient(circle at 75% 35%, rgba(212, 48, 8, 0.05) 0%, transparent 60%),
    linear-gradient(rgba(20, 20, 20, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 20, 20, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
  background-position: center;
  color: var(--color-graphite-svelte);
  padding: 140px 80px 100px;
  min-height: 100vh;
  z-index: 1;
}

.eyebrow-badge.svelte-eyebrow {
  background: var(--color-ghost-white);
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 4px;
  /* Svelte 4px border-radius standard */
  font-family: var(--font-fira-sans);
  color: var(--color-pewter);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 6px 14px;
  margin-bottom: 24px;
}

.eyebrow-badge.svelte-eyebrow span {
  background: var(--color-svelte-orange) !important;
  /* Hot Orange Active bulb */
  width: 6px;
  height: 6px;
}

.svelte-headline {
  font-family: var(--font-dm-serif-display);
  font-size: 54px;
  /* Svelte 54px display headline per standard */
  line-height: 1.20;
  /* Svelte 1.20 standard */
  font-weight: 500;
  color: var(--color-carbon);
  letter-spacing: -0.01em;
  margin: 20px 0 24px;
  text-transform: none;
}

.svelte-subheadline {
  font-family: var(--font-eb-garamond);
  font-size: 22px;
  /* Svelte 22px large body block standard */
  line-height: 1.50;
  /* Svelte 1.50 standard */
  color: var(--color-graphite-svelte);
  max-width: 540px;
  margin-bottom: 36px;
  font-weight: 400;
}

.svelte-cta-group {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
}

.btn-svelte-primary {
  background: var(--color-svelte-orange) !important;
  color: var(--color-snow) !important;
  font-family: var(--font-fira-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: 4px !important;
  /* 4px radius standard */
  display: inline-flex;
  align-items: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--color-svelte-orange);
  box-shadow: rgba(212, 48, 8, 0.15) 0px 4px 12px 0px;
  cursor: pointer;
}

.btn-svelte-primary:hover {
  background: #b22604 !important;
  border-color: #b22604 !important;
  transform: translateY(-2px);
  box-shadow: rgba(212, 48, 8, 0.25) 0px 8px 20px 0px;
}

.btn-svelte-outline {
  background: transparent !important;
  color: var(--color-graphite-svelte) !important;
  font-family: var(--font-fira-sans);
  font-size: 14px;
  font-weight: 400;
  padding: 14px 28px;
  border-radius: 4px !important;
  /* 4px radius standard */
  display: inline-flex;
  align-items: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(20, 20, 20, 0.15);
  cursor: pointer;
}

.btn-svelte-outline:hover {
  background: var(--color-ghost-white) !important;
  border-color: var(--color-carbon) !important;
  transform: translateY(-2px);
}

.svelte-users-badge {
  margin-top: 40px;
  border-top: 1px solid rgba(20, 20, 20, 0.05);
  padding-top: 24px;
}

.svelte-users-badge .user-badge-text {
  font-family: var(--font-fira-sans);
  font-size: 12px;
  color: var(--color-pewter);
}

.svelte-users-badge .user-avatar-circle {
  border: 2px solid var(--color-snow) !important;
  background: var(--color-ghost-white) !important;
  color: var(--color-graphite-svelte) !important;
  font-family: var(--font-fira-sans);
  font-size: 9px;
  font-weight: 600;
}

/* Svelte Industrial Visual Engine container */
.hero-showcase-container.svelte-engine-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  perspective: 1200px;
  /* Enables gorgeous 3D perspective space */
}

/* Hot Kayalva Teal Glowing Accent Blobs */
.blob-orange {
  background: var(--color-kayalva-teal);
  left: 20%;
  top: 20%;
  opacity: 0.22;
  animation: driftBlobBlue 12s ease-in-out infinite alternate;
}

.blob-yellow {
  background: var(--color-kayalva-gold);
  /* Warm Accent Gold */
  right: 20%;
  bottom: 20%;
  opacity: 0.18;
  animation: driftBlobGreen 15s ease-in-out infinite alternate;
}

/* Conveyor belt tracks indicating processing and compilation flow */
.conveyor-tracks {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 40px 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

.conveyor-line {
  height: 1px;
  width: 200%;
  background: repeating-linear-gradient(90deg,
      rgba(212, 48, 8, 0.08) 0px,
      rgba(212, 48, 8, 0.08) 12px,
      transparent 12px,
      transparent 24px);
  animation: conveyorMove 12s linear infinite;
}

.conveyor-line.line-2 {
  background: repeating-linear-gradient(90deg,
      rgba(20, 20, 20, 0.04) 0px,
      rgba(20, 20, 20, 0.04) 16px,
      transparent 16px,
      transparent 32px);
  animation-direction: reverse;
  animation-duration: 16s;
}

.conveyor-line.line-3 {
  animation-duration: 20s;
}

@keyframes conveyorMove {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* 3D Svelte Core Logo Engine */
.svelte-engine-core {
  position: absolute;
  width: 140px;
  height: 140px;
  z-index: 2;
  transform-style: preserve-3d;
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: revealUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards, svelteEngineFloat 7s ease-in-out infinite 1.4s;
}

.svelte-engine-core:hover {
  animation-play-state: paused;
  transform: translate3d(0, -10px, 40px) rotateX(10deg) rotateY(-15deg) scale(1.08);
}

.svelte-logo-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 15px 35px rgba(19, 88, 107, 0.25));
  /* Removed infinite spin animation for custom asymmetric logo to maintain legibility */
}

.svelte-engine-core:hover .svelte-logo-svg {
  filter: drop-shadow(0 25px 45px rgba(19, 88, 107, 0.40));
}

.engine-halo {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(19, 88, 107, 0.25);
  pointer-events: none;
}

.halo-1 {
  width: 180px;
  height: 180px;
  animation: haloRotate1 30s linear infinite;
}

.halo-2 {
  width: 220px;
  height: 220px;
  animation: haloRotate2 40s linear infinite reverse;
  border-color: rgba(20, 20, 20, 0.05);
}

@keyframes svelteEngineFloat {

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

  50% {
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes svelteSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes haloRotate1 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes haloRotate2 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* /* Column Blueprint IDE Code Mockup Frame */
.ide-mockup-frame {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  /* Luminous white glassmorphism */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid var(--color-steel-gray);
  border-radius: var(--radius-md);
  /* 8px default radius */
  box-shadow: var(--shadow-sm), var(--shadow-subtle-3);
  width: 230px;
  padding: 0;
  overflow: hidden;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 10px;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ide-mockup-frame.code-left {
  left: -5%;
  top: 15%;
  animation: revealLeft 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards, ideFloatLeft 8s ease-in-out infinite 1.2s;
}

.ide-mockup-frame.code-right {
  right: -5%;
  bottom: 15%;
  animation: revealRight 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards, ideFloatRight 7s ease-in-out infinite 1.4s;
  width: 210px;
}

.ide-mockup-frame:hover {
  animation-play-state: paused;
  background: var(--color-ghost-white);
  border-color: var(--color-action-orange);
}

.ide-mockup-frame.code-left:hover {
  transform: translate3d(10px, -8px, 30px) rotateX(6deg) rotateY(-8deg) scale(1.03);
  box-shadow: var(--shadow-xl), 0 20px 40px rgba(17, 26, 74, 0.05);
}

.ide-mockup-frame.code-right:hover {
  transform: translate3d(-10px, 8px, 30px) rotateX(-6deg) rotateY(8deg) scale(1.03);
  box-shadow: var(--shadow-xl), 0 20px 40px rgba(17, 26, 74, 0.05);
}

.ide-header {
  height: 28px;
  background: var(--color-fog-gray);
  border-bottom: 1px solid var(--color-steel-gray);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
}

.ide-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.ide-dot.green {
  background: var(--color-success-moss);
}

.ide-dot.orange {
  background: var(--color-action-orange);
}

.ide-filename {
  color: var(--color-ink-blue);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
}

.ide-code {
  padding: 12px;
  color: var(--color-charcoal-text);
  line-height: 1.4;
  overflow-x: auto;
}

.ide-code pre {
  margin: 0;
}

/* Code syntax highlighting per Column standard */
.ide-code .keyword {
  color: var(--color-deep-plum);
  font-weight: 500;
}

.ide-code .tag {
  color: var(--color-callout-cyan);
}

.ide-code .storage {
  color: var(--color-deep-plum);
  font-weight: 500;
}

.ide-code .function {
  color: var(--color-callout-cyan);
}

.ide-code .number {
  color: var(--color-action-orange);
}

.ide-code .string {
  color: var(--color-callout-cyan);
}

.ide-code .attr {
  color: var(--color-ink-blue);
}

@keyframes ideFloatLeft {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0.5deg);
  }

  50% {
    transform: translate3d(5px, -8px, 0) rotate(-0.5deg);
  }
}

@keyframes ideFloatRight {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-0.5deg);
  }

  50% {
    transform: translate3d(-5px, 8px, 0) rotate(0.5deg);
  }
}

/* Floating Badges styling */
.floating-badge {
  position: absolute;
  background: var(--color-ghost-white);
  border: 1px solid var(--color-steel-gray);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  /* 8px corner radius */
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-subtle);
  z-index: 3;
  will-change: transform;
  opacity: 0;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.floating-badge:hover {
  transform: scale(1.05) translateY(-3px);
  box-shadow: var(--shadow-sm);
  z-index: 4;
}

.svelte-badge {
  background: var(--color-ghost-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-steel-gray);
  font-family: var(--font-body);
}

.svelte-badge h6 {
  color: var(--color-ink-blue) !important;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

.svelte-badge p {
  font-family: var(--font-body);
  color: var(--color-slate-text);
}

.badge-speed {
  left: 2%;
  bottom: 12%;
  animation: revealLeft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards, badgeFloat1 5s ease-in-out infinite 1s;
}

.badge-conversion {
  right: 2%;
  top: 15%;
  animation: revealRight 1s cubic-bezier(0.16, 1, 0.3, 1) forwards, badgeFloat2 5s ease-in-out infinite 1s;
}

.floating-badge .badge-icon {
  font-size: 16px;
}

.floating-badge h6 {
  font-size: 14px;
  line-height: 1;
}

.floating-badge p {
  font-size: 9px;
  margin-top: 2px;
}

/* Animations Keyframes */
@keyframes revealRight {
  from {
    opacity: 0;
    transform: translate3d(50px, 0, 0) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes revealLeft {
  from {
    opacity: 0;
    transform: translate3d(-40px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translate3d(0, 60px, 0) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes browserFloat {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: translate3d(0, -8px, 0) rotateX(0.5deg) rotateY(-0.5deg);
  }
}

@keyframes phoneFloat {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: translate3d(0, 8px, 0) rotateX(-0.5deg) rotateY(0.5deg);
  }
}

@keyframes badgeFloat1 {

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

  50% {
    transform: translate3d(0, -6px, 0);
  }
}

@keyframes badgeFloat2 {

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

  50% {
    transform: translate3d(0, 6px, 0);
  }
}

.hero .eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-ghost-white);
  border: 1px dashed var(--color-steel-gray);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-deep-plum);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 24px;
}

.hero .eyebrow-badge span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--color-action-orange);
  border-radius: 50%;
}

.headline-new {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 700;
  line-height: 0.90;
  letter-spacing: -2px;
  margin-bottom: 28px;
  text-transform: uppercase;
  color: var(--color-midnight-ink);
}

.subheadline-new {
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--color-ash-gray);
  max-width: 480px;
  margin-bottom: 40px;
  font-weight: 400;
  line-height: 1.30;
}

/* Floating Stats Overlay in Hero (Dayos Paper Card Style) */
.hero-stat-badge {
  position: absolute;
  left: 55%;
  top: 55%;
  background: var(--color-paper-white);
  border: 1px solid var(--color-canvas-ice);
  padding: 16px 24px;
  border-radius: var(--radius-md);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: var(--transition-smooth);
}

.hero-stat-badge:hover {
  border-color: var(--color-fog-gray);
  background: var(--color-faint-mist);
  transform: translateY(-4px);
}

.hero-stat-value {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-midnight-ink);
}

.hero-stat-label {
  font-size: 0.75rem;
  color: var(--color-ash-gray);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* User Bubble Stack in Hero */
.hero-users-badge {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-avatars {
  display: flex;
}

.user-avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-midnight-ink);
  background: var(--color-deep-smoke);
  margin-right: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-faint-mist);
}

.user-avatar-circle:last-child {
  margin-right: 0;
  background: var(--color-accent);
  color: var(--color-midnight-ink);
  border-color: var(--color-midnight-ink);
}

.user-badge-text {
  font-size: 0.8rem;
  color: var(--color-hero-muted);
  font-weight: 500;
}

/* --- Infinitely Sliding Luxury Marquee --- */
.marquee-wrapper {
  overflow: hidden;
  width: 100%;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 28px 0;
  position: relative;
  z-index: 10;
  display: flex;
}

.marquee {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
}

.marquee-content {
  display: flex;
  align-items: center;
  gap: 48px;
  padding-right: 48px;
  animation: scrollMarquee 20s linear infinite;
  white-space: nowrap;
}

.marquee-content span {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--color-midnight-ink);
  text-transform: uppercase;
  transition: var(--transition-smooth);
}

.marquee-content span:hover {
  color: var(--color-ash-gray);
}

.marquee-content .dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-border-glow);
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

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

  100% {
    transform: translateX(-100%);
  }
}

/* Geometric Sliced Divider */
.hero-transition-cut {
  position: relative;
  height: 100px;
  background: var(--color-hero-bg);
  clip-path: polygon(0 0, 100% 0, 100% 30%, 0 100%);
  margin-bottom: -100px;
  z-index: 5;
}

/* --- Editorial Section --- */
.editorial-statement {
  padding: 120px 48px;
  position: relative;
  text-align: center;
}

.editorial-container h2 {
  font-size: clamp(24px, 3.5vw, 44px);
  font-weight: 400;
  line-height: 1.3;
  max-width: 900px;
  margin: 0 auto;
  letter-spacing: -0.5px;
}

.editorial-container h2 span {
  font-weight: 800;
  color: var(--color-primary);
}

/* --- "About Us" New Cybernetic Layout --- */
.about-section {
  padding: 100px 80px;
  position: relative;
}

.about-container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

/* --- "About Us" New Cybernetic Layout --- */
.about-visual {
  position: relative;
  width: 100%;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-midnight-ink);
  overflow: visible;
  height: 480px;
  background: var(--color-paper-white);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.5s ease, transform 0.15s ease-out, background-color 0.5s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.about-visual:hover,
.about-visual:active {
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.12);
}

/* State Background overrides */
.about-visual.state-blueprint {
  background-color: #0f1c24;
}
.about-visual.state-stack {
  background-color: #09090b;
}

/* Compiling Grid Overlay */
.about-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(19, 88, 107, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 88, 107, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  border-radius: var(--radius-md);
  transition: opacity 0.5s ease;
}

.about-visual.state-blueprint .about-grid-overlay {
  opacity: 0.15;
  background-image:
    linear-gradient(rgba(197, 160, 89, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197, 160, 89, 0.15) 1px, transparent 1px);
}

.about-visual.state-stack .about-grid-overlay {
  opacity: 0.1;
  background-image:
    linear-gradient(rgba(19, 88, 107, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 88, 107, 0.15) 1px, transparent 1px);
}

/* Architectural Blueprint Overlay */
.about-blueprint-overlay {
  position: absolute;
  inset: 12px;
  border-radius: calc(var(--radius-md) - 12px);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(0.97);
  overflow: hidden;
}

.about-blueprint-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(197, 160, 89, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197, 160, 89, 0.08) 1px, transparent 1px);
  background-size: 15px 15px;
  opacity: 0.8;
}

.about-visual.state-blueprint .about-blueprint-overlay {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.blueprint-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

/* Ethereal Compiling Glow Blobs */
.about-glow-core {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  filter: blur(55px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.15;
  transition: opacity 0.5s ease, background 0.5s ease;
}

.about-glow-core.glow-teal {
  background: var(--color-kayalva-teal);
  left: -20px;
  top: -20px;
  animation: driftGlowAbout 10s ease-in-out infinite alternate;
}

.about-glow-core.glow-gold {
  background: var(--color-kayalva-gold);
  right: -20px;
  bottom: -20px;
  animation: driftGlowAbout 12s ease-in-out infinite alternate-reverse;
}

.about-visual.state-blueprint .about-glow-core.glow-teal {
  background: var(--color-kayalva-gold);
  opacity: 0.25;
}

.about-visual.state-stack .about-glow-core.glow-teal {
  background: var(--color-action-orange);
  opacity: 0.2;
}

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

  100% {
    transform: translate(25px, 20px) scale(1.25);
  }
}

/* Cybernetic Scanning Laser Line Overlay */
.about-laser-beam {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(to bottom, rgba(197, 158, 108, 0) 0%, rgba(197, 158, 108, 0.8) 50%, rgba(197, 158, 108, 0) 100%);
  box-shadow: 0 0 12px rgba(197, 158, 108, 0.4);
  animation: scanningLaser 4.5s linear infinite;
  pointer-events: none;
  z-index: 4;
}

@keyframes scanningLaser {
  0% {
    top: -10px;
  }

  100% {
    top: 100%;
  }
}

/* Image Wrapper - Visible (transparent layout overlay) */
.about-image-wrapper {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  z-index: 1;
}

.about-visual-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  mix-blend-mode: luminosity;
  animation: aboutKenBurns 20s infinite alternate ease-in-out;
}

@keyframes aboutKenBurns {
  0% {
    transform: scale(1.0) translate3d(0, 0, 0);
  }

  100% {
    transform: scale(1.15) translate3d(6px, -8px, 0);
  }
}

/* Interactive Layer 1: Live Compiler Code Box */
.about-compiler-panel {
  position: absolute;
  left: -32px;
  top: 60px;
  width: 255px;
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
  z-index: 5;
  overflow: hidden;
  font-family: var(--font-mono);
  transition: transform 0.4s ease, opacity 0.4s ease, width 0.4s ease, left 0.4s ease, top 0.4s ease;
  transform: translate3d(0, 0, 30px);
}

/* Compiler states */
.about-visual.state-philosophy .about-compiler-panel {
  opacity: 1;
  transform: translate3d(0, 0, 30px);
}

.about-visual.state-blueprint .about-compiler-panel {
  opacity: 0.9;
  left: 20px;
  top: 35px;
  width: 210px;
  transform: translate3d(0, 0, 20px) scale(0.95);
}

.about-visual.state-stack .about-compiler-panel {
  opacity: 1;
  left: 25px;
  top: 60px;
  width: 320px;
  transform: translate3d(0, 0, 35px);
}

.compiler-header {
  height: 32px;
  background: #18181b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
}

.compiler-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.compiler-dot.red {
  background: #ef4444;
}

.compiler-dot.yellow {
  background: #f59e0b;
}

.compiler-dot.green {
  background: #10b981;
}

.compiler-title {
  color: #71717a;
  font-size: 10px;
  margin-left: 6px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

.compiler-body {
  padding: 14px;
  min-height: 110px;
  color: #a1a1aa;
  font-size: 10px;
  line-height: 1.5;
  text-align: left;
}

.compiler-body pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Simulated Blinking Cursor */
.compiler-cursor {
  display: inline-block;
  width: 6px;
  height: 12px;
  background-color: var(--color-action-orange);
  vertical-align: middle;
  margin-left: 2px;
  animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {
  50% {
    opacity: 0;
  }
}

/* Interactive Layer 2: Lighthouse Gauge Badge */
.about-performance-gauge {
  position: absolute;
  right: -42px;
  bottom: 50px;
  width: 175px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1.5px solid var(--color-midnight-ink);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.4s ease, opacity 0.4s ease, right 0.4s ease, bottom 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  transform: translate3d(0, 0, 50px);
}

/* Gauge States */
.about-visual.state-philosophy .about-performance-gauge {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 20px, 10px) scale(0.85);
}

.about-visual.state-blueprint .about-performance-gauge {
  opacity: 1;
  pointer-events: auto;
  right: 20px;
  bottom: 50px;
  transform: translate3d(0, 0, 50px) scale(1.05);
  border-color: var(--color-kayalva-gold);
  box-shadow: 0 15px 40px rgba(197, 160, 89, 0.25);
}

.about-visual.state-stack .about-performance-gauge {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 20px, 10px) scale(0.85);
}

.gauge-card {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gauge-ring {
  width: 100%;
  height: 100%;
}

.gauge-ring-bg {
  fill: none;
  stroke: rgba(0, 0, 0, 0.06);
  stroke-width: 3.5;
}

.gauge-ring-fill {
  fill: none;
  stroke: var(--color-kayalva-teal);
  stroke-width: 3.5;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-dasharray: 0, 100;
  animation: fillGauge 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards 1s;
}

@keyframes fillGauge {
  to {
    stroke-dasharray: 100, 100;
  }
}

.gauge-value {
  position: absolute;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-midnight-ink);
}

.gauge-meta {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.gauge-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 750;
  color: var(--color-midnight-ink);
  line-height: 1.2;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gauge-meta h6 {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-kayalva-teal);
  font-weight: 700;
  margin: 0;
}

.gauge-meta p {
  font-size: 9px;
  color: var(--color-ash-gray);
  margin: 0;
  line-height: 1.2;
}

/* Interactive Layer 3: Floating Technology Chips */
.about-floating-chip {
  position: absolute;
  background: var(--color-paper-white);
  border: 1.5px solid var(--color-midnight-ink);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-midnight-ink);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.4s ease, opacity 0.4s ease, left 0.4s ease, top 0.4s ease, bottom 0.4s ease, right 0.4s ease;
  opacity: 0;
  pointer-events: none;
}

.chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-kayalva-teal);
  box-shadow: 0 0 6px var(--color-kayalva-teal);
}

.chip-dot-gold {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-kayalva-gold);
  box-shadow: 0 0 6px var(--color-kayalva-gold);
}

/* Chip default positions */
.about-floating-chip.html-chip {
  left: 20%;
  bottom: -15px;
  transform: translate3d(0, 0, 40px);
}

.about-floating-chip.seo-chip {
  right: 15%;
  top: -15px;
  transform: translate3d(0, 0, 35px);
}

.about-floating-chip.js-chip {
  left: 10%;
  top: 45%;
  transform: translate3d(0, 0, 30px);
}

.about-floating-chip.css-chip {
  right: 10%;
  bottom: 25%;
  transform: translate3d(0, 0, 32px);
}

.about-floating-chip.netlify-chip {
  left: 45%;
  bottom: 30%;
  transform: translate3d(0, 0, 25px);
}

/* Chip state configurations */
.about-visual.state-philosophy .html-chip {
  opacity: 1;
  pointer-events: auto;
}

.about-visual.state-philosophy .seo-chip {
  opacity: 1;
  pointer-events: auto;
}

.about-visual.state-stack .about-floating-chip {
  opacity: 1;
  pointer-events: auto;
  animation: floatConstellation 4s ease-in-out infinite alternate;
}

.about-visual.state-stack .html-chip { left: 45%; top: 12px; animation-delay: 0s; }
.about-visual.state-stack .seo-chip { right: 10px; top: 110px; animation-delay: 0.5s; }
.about-visual.state-stack .js-chip { left: 10px; bottom: 40px; animation-delay: 1.0s; }
.about-visual.state-stack .css-chip { right: 10px; bottom: 40px; animation-delay: 1.5s; }
.about-visual.state-stack .netlify-chip { left: 40%; top: 130px; animation-delay: 2.0s; }

@keyframes floatConstellation {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-6px) rotate(1.5deg); }
}

/* Dots and Mobile Swipe UI elements */
.about-visual-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.about-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
}

.about-dot:hover,
.about-dot.active {
  background: var(--color-action-orange);
  box-shadow: 0 0 6px var(--color-action-orange);
  transform: scale(1.25);
}

.about-swipe-cue {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: #ffffff;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (max-width: 800px) {
  .about-visual-dots {
    opacity: 1;
  }
  
  .about-swipe-cue {
    opacity: 0.85;
    animation: pulseSwipeCue 2s infinite alternate;
  }
}

@keyframes pulseSwipeCue {
  0% { opacity: 0.6; transform: scale(0.96); }
  100% { opacity: 0.95; transform: scale(1.0); }
}

/* Mobile & Tablet Responsiveness for About Visual Sandbox */
@media (max-width: 991px) {
  .about-visual {
    height: 420px;
    max-width: 520px;
    margin: 0 auto;
  }

  .about-compiler-panel {
    left: -15px;
    width: 220px;
  }

  .about-performance-gauge {
    right: -15px;
    width: 160px;
  }
}

@media (max-width: 576px) {
  .about-visual {
    height: 350px !important;
    max-width: 100%;
    overflow: hidden;
  }

  .about-image-wrapper {
    inset: 6px;
  }

  .about-compiler-panel {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    top: 15px !important;
    transition: all 0.4s ease;
  }
  
  .about-visual.state-philosophy .about-compiler-panel {
    height: 165px;
  }

  .about-visual.state-blueprint .about-compiler-panel {
    height: 135px;
  }

  .about-visual.state-stack .about-compiler-panel {
    height: 165px;
  }

  .about-performance-gauge {
    padding: 8px 12px;
    gap: 8px;
    width: auto !important;
    height: 75px !important;
    bottom: 40px !important;
    left: 10px !important;
    right: 10px !important;
    transform: none !important;
    justify-content: center;
  }

  .gauge-card {
    width: 42px;
    height: 42px;
  }

  .gauge-value {
    font-size: 1.1rem;
  }
  
  .gauge-meta h6 {
    font-size: 9px;
  }
  
  .gauge-meta p {
    font-size: 8px;
  }

  /* Floating chips positioning on small screens */
  .about-floating-chip {
    font-size: 8px !important;
    padding: 4px 8px !important;
    border-width: 1px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }

  .about-visual.state-philosophy .html-chip {
    bottom: 45px !important;
    left: 10px !important;
    top: auto !important;
  }

  .about-visual.state-philosophy .seo-chip {
    top: 10px !important;
    right: 10px !important;
  }

  .about-visual.state-stack .html-chip { left: 10px !important; top: auto !important; bottom: 45px !important; }
  .about-visual.state-stack .seo-chip { right: 10px !important; top: auto !important; bottom: 45px !important; }
  .about-visual.state-stack .js-chip { left: 10px !important; top: auto !important; bottom: 80px !important; }
  .about-visual.state-stack .css-chip { right: 10px !important; top: auto !important; bottom: 80px !important; }
  .about-visual.state-stack .netlify-chip { left: 50% !important; transform: translateX(-50%) !important; top: auto !important; bottom: 45px !important; }
}

.about-text h2 {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 24px;
}

.about-text p {
  color: var(--color-ash-gray);
  margin-bottom: 24px;
  font-size: 1.05rem;
  font-weight: 400;
}

.about-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
}

.about-pill-tag {
  background: var(--color-faint-mist);
  border: 1.5px solid var(--color-midnight-ink);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-midnight-ink);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: var(--transition-smooth);
}

.about-pill-tag:hover {
  background: var(--color-action-green);
  color: var(--color-paper-white);
  transform: translateY(-3px);
}

.about-actions-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.watch-video-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-midnight-ink);
}

.watch-video-link:hover {
  color: var(--color-ash-gray);
}

.play-button-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-midnight-ink);
  background: var(--color-faint-mist);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-midnight-ink);
  transition: var(--transition-smooth);
}

.watch-video-link:hover .play-button-icon {
  background: var(--color-action-green);
  transform: scale(1.1) rotate(360deg);
}

/* --- Redesigned Service Cards (Charcoal block with top icon) --- */
.services-section-new {
  padding: 100px 80px;
  position: relative;
}

.services-grid-new {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.service-box-new {
  background: var(--color-paper-white);
  border: 1px solid var(--color-canvas-ice);
  border-radius: var(--radius-md);
  padding: 48px 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: var(--transition-smooth);
  min-height: 380px;
}

.service-box-new:hover {
  border-color: var(--color-midnight-ink);
  background: var(--color-paper-white);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05), var(--shadow-sm);
}

.service-box-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-faint-mist);
  border: 1px solid var(--color-canvas-ice);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-midnight-ink);
  margin-bottom: 32px;
  transition: var(--transition-smooth);
}

.service-box-new:hover .service-box-icon {
  background: var(--color-midnight-ink);
  border-color: var(--color-midnight-ink);
  color: var(--color-paper-white);
}

.service-box-new h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
  color: var(--color-midnight-ink);
  text-transform: uppercase;
}

.service-box-new p {
  color: var(--color-ash-gray);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 32px;
  flex-grow: 1;
}

.service-box-link {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-midnight-ink);
  border-bottom: 1px solid var(--color-fog-gray);
  padding-bottom: 4px;
  transition: var(--transition-smooth);
}

.service-box-new:hover .service-box-link {
  color: var(--color-midnight-ink);
  border-bottom-color: var(--color-midnight-ink);
}

/* --- Limitless Panel Section --- */
.limitless-section {
  padding: 100px 80px;
  position: relative;
}

.limitless-container {
  max-width: 1200px;
  margin: 0 auto;
}

.limitless-container h2 {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 48px;
}

.limitless-panel {
  display: block;
  background: var(--color-paper-white);
  border: 1px solid var(--color-canvas-ice);
  border-radius: var(--radius-md);
  padding: 48px 60px;
  max-width: 800px;
  margin: 0 auto;
}

.limitless-panel-left {
  display: none;
}

.limitless-panel-img {
  display: none;
}

.limitless-panel-right h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.limitless-panel-right p {
  color: var(--color-ash-gray);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 24px;
}

.limitless-panel-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-ash-gray);
}

/* --- "Voices of the Future" Testimonials Redesign --- */
.voices-section {
  padding: 100px 80px;
  position: relative;
}

.voices-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}

.voices-left {
  max-width: 450px;
}

.voices-left h2 {
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 24px;
}

.voices-left p {
  color: var(--color-ash-gray);
  font-size: 1.05rem;
  margin-bottom: 32px;
}

.voices-right {
  position: relative;
}

/* Ambient wave path in background */
.voices-wave-path {
  position: absolute;
  left: -40px;
  top: 10%;
  height: 80%;
  width: 100px;
  pointer-events: none;
  z-index: 1;
}

/* Stacked horizontal bubbles */
.feedback-bubble-stack {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feedback-bubble {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--color-paper-white);
  border: 1px solid var(--color-canvas-ice);
  padding: 20px 24px;
  border-radius: var(--radius-md);
  transition: var(--transition-smooth);
}

.feedback-bubble:hover {
  background: var(--color-faint-mist);
  border-color: var(--color-fog-gray);
  transform: translateX(12px) translateY(-2px);
}

.feedback-bubble-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-canvas-ice);
  background: var(--color-faint-mist);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  color: var(--color-midnight-ink);
}

.feedback-bubble-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: 0.5;
}

.feedback-bubble-content {
  flex-grow: 1;
}

.feedback-bubble-content p {
  font-size: 0.95rem;
  color: var(--color-midnight-ink);
  margin-bottom: 6px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
}

.feedback-bubble-author {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-ash-gray);
}

/* --- "Dive into the Future" Landscape Banner --- */
.dive-banner-section {
  padding: 40px 80px 100px;
  position: relative;
}

.dive-banner {
  height: 440px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url('assets/banner_future_model.png');
  background-size: cover;
  background-position: center;
}

.dive-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 5, 5, 0.85) 0%, rgba(5, 5, 5, 0.4) 100%);
}

.dive-banner-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  padding: 24px;
}

.dive-banner-content h2 {
  font-size: clamp(32px, 4.5vw, 64px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 2px;
  margin-bottom: 24px;
  text-transform: uppercase;
}

/* Faint ring target hover pointer */
.banner-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.banner-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* --- Section Headers --- */
.section-header-centered {
  text-align: center;
  margin-bottom: 60px;
}

.section-header-centered h2 {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 16px;
}

.section-header-centered p {
  color: var(--color-ash-gray);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* --- Sector Pricing / Cards --- */
.pricing-section {
  padding: 100px 80px;
  position: relative;
  text-align: center;
}

.pricing-tabs-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.pricing-tabs {
  display: inline-flex;
  background: var(--color-faint-mist);
  border: 1px solid var(--color-canvas-ice);
  padding: 6px;
  border-radius: var(--radius-pill);
  margin: 0 auto 50px;
  gap: 4px;
}

.tab-btn {
  background: transparent;
  border: none;
  color: var(--color-ash-gray);
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.tab-btn:hover {
  color: var(--color-midnight-ink);
}

.tab-btn.active {
  background: var(--color-midnight-ink);
  color: var(--color-paper-white);
  border: 1px solid var(--color-midnight-ink);
}

.pricing-tab-content {
  display: none;
  animation: fadeIn 0.5s ease;
}

.pricing-tab-content.active {
  display: block;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}

.pricing-grid.four-cols {
  grid-template-columns: repeat(4, 1fr);
  max-width: 1400px;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  min-height: 520px;
}

.pricing-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.tier-label {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-midnight-ink);
  text-transform: uppercase;
}

.tier-tag {
  font-size: 0.75rem;
  color: var(--color-ash-gray);
  background: var(--color-faint-mist);
  border: 1px solid var(--color-canvas-ice);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.pricing-amount {
  display: flex;
  align-items: baseline;
  margin-bottom: 32px;
}

.pricing-amount .currency {
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--color-midnight-ink);
  margin-right: 4px;
}

.pricing-amount .price {
  font-size: 3.2rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--color-midnight-ink);
}

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
  flex-grow: 1;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--color-ash-gray);
}

.pricing-features li.excluded {
  opacity: 0.35;
}

.pricing-features li i[data-feather="check"] {
  width: 16px;
  height: 16px;
  color: var(--color-midnight-ink);
}

.pricing-features li i[data-feather="x"] {
  width: 16px;
  height: 16px;
  color: var(--color-fog-gray);
}

.pricing-btn {
  width: 100%;
}

/* Featured Spotlight Plan (Most Popular) */
.pricing-card.featured {
  background: #ffffff;
  color: #0a0a0c;
  border: 1px solid #ffffff;
  border-radius: var(--radius-md);
  padding: 40px;
  transition: var(--transition-smooth);
  position: relative;
}

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

.pricing-card.featured .featured-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-accent);
  white-space: nowrap;
}

.pricing-card.featured .tier-label,
.pricing-card.featured .pricing-amount .price,
.pricing-card.featured .pricing-amount .currency {
  color: #0a0a0c !important;
}

.pricing-card.featured .tier-tag {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.05);
  color: #0a0a0c;
}

.pricing-card.featured .pricing-features li {
  color: rgba(10, 10, 12, 0.75) !important;
}

.pricing-card.featured .pricing-features li i[data-feather="check"] {
  color: var(--color-accent);
}

.pricing-card.featured .pricing-btn {
  background-color: #0a0a0c;
  color: #ffffff;
  border: 1px solid #0a0a0c;
  font-weight: 700;
}

.pricing-card.featured .pricing-btn:hover {
  background-color: #27272a;
  border-color: #27272a;
  color: #ffffff;
}

/* Special Starter Plan (Micro Starter) - Premium Golden (Goded) Edition with Special Animations */
.starter-spec-wrapper {
  animation: floatGoldCard 6s ease-in-out infinite;
  width: 100%;
}

.starter-spec-wrapper:hover {
  animation-play-state: paused;
}

.pricing-card.starter-spec {
  background: radial-gradient(circle at 100% 100%, rgba(212, 175, 55, 0.15) 0%, #000000 65%), #000000;
  color: var(--color-paper-white);
  border: 2px solid #bf953f;
  /* Beautiful polished gold border */
  border-radius: var(--radius-md);
  padding: 48px;
  transition: var(--transition-smooth);
  position: relative;
  overflow: visible;
  /* CRITICAL: Allows badge to overlap without clipping! */
  box-shadow: 0 20px 50px rgba(191, 149, 63, 0.15), inset 0 0 25px rgba(252, 246, 186, 0.04);
}

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

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

/* Polished Shimmer Background Wrapper — Clips diagonal shimmer while letting badge float free */
.gold-shimmer-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Polished Diagonal Golden Metallic Shimmer Sweep */
.gold-shimmer-bg::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 30%;
  height: 200%;
  background: linear-gradient(to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(252, 246, 186, 0.18) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: rotate(30deg);
  transition: none;
  animation: goldSweep 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes goldSweep {
  0% {
    left: -60%;
  }

  30%,
  100% {
    left: 140%;
  }
}

.pricing-card.starter-spec:hover {
  /* Freeze floating when user hovers to interact */
  transform: translateY(-12px) scale(1.01);
  box-shadow: 0 35px 75px rgba(191, 149, 63, 0.32), inset 0 0 45px rgba(252, 246, 186, 0.12);
  border-color: #fcf6ba;
  /* Glow bright gold on hover */
}

/* Polished Golden Plaque Badge with Breathing Glow Pulse */
.pricing-card.starter-spec .starter-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);
  background-size: 200% auto;
  color: #000000;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 6px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid #bf953f;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(179, 135, 40, 0.4);
  z-index: 5;
  animation: goldGlowShine 3s linear infinite, badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {

  0%,
  100% {
    box-shadow: 0 4px 15px rgba(179, 135, 40, 0.4);
  }

  50% {
    box-shadow: 0 4px 25px rgba(252, 246, 186, 0.8), 0 0 10px rgba(191, 149, 63, 0.4);
  }
}

@keyframes goldGlowShine {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.pricing-card.starter-spec .tier-label {
  color: #fcf6ba !important;
  /* Gold text */
  font-weight: 700;
}

.pricing-card.starter-spec .pricing-amount .price,
.pricing-card.starter-spec .pricing-amount .currency {
  color: #e5c158 !important;
  /* Warm gold price */
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  text-shadow: 0 0 10px rgba(229, 193, 88, 0.2);
}

.pricing-card.starter-spec .tier-tag {
  border-color: #3a2e16;
  background: #251d0d;
  color: #fcf6ba;
}

.pricing-card.starter-spec .pricing-features li {
  color: #b3b3b3 !important;
}

.pricing-card.starter-spec .pricing-features li i[data-feather="check"] {
  color: #e5c158 !important;
  /* Golden checkmarks */
  filter: drop-shadow(0 0 3px rgba(229, 193, 88, 0.4));
}

/* Polished Golden Metallic Button */
.pricing-card.starter-spec .pricing-btn {
  background: linear-gradient(135deg, #bf953f 0%, #fcf6ba 50%, #b38728 100%);
  color: #000000 !important;
  border: none;
  font-weight: 800;
  box-shadow: 0 4px 20px rgba(179, 135, 40, 0.35);
  transition: var(--transition-smooth);
}

.pricing-card.starter-spec .pricing-btn:hover {
  background: linear-gradient(135deg, #aa771c 0%, #fbf5b7 50%, #bf953f 100%);
  box-shadow: 0 6px 25px rgba(179, 135, 40, 0.5);
  transform: translateY(-2px);
}

.catalogue-download {
  text-align: center;
  margin-top: 48px;
}

/* --- FAQ Accordion Section --- */
.faq-section {
  padding: 100px 80px;
  position: relative;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

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

.service-card {
  background: var(--color-paper-white);
  border: 1px solid var(--color-canvas-ice);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition-smooth);
}

.service-card:hover {
  border-color: var(--color-fog-gray);
  background: var(--color-faint-mist);
}

.service-card:hover .toggle-icon {
  border-color: var(--color-midnight-ink);
  color: var(--color-midnight-ink);
  transform: scale(1.05);
}

.service-card.active {
  border-color: var(--color-midnight-ink);
  background: var(--color-paper-white);
  box-shadow: none;
}

.service-header {
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.service-header h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-midnight-ink);
}

.toggle-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-faint-mist);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-canvas-ice);
  color: var(--color-midnight-ink);
  transition: var(--transition-smooth);
}

.service-card.active .toggle-icon {
  background: var(--color-midnight-ink);
  border-color: var(--color-midnight-ink);
  color: var(--color-paper-white);
}

.service-body {
  padding: 0 32px 32px;
  display: none;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

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

.service-body p {
  color: var(--color-ash-gray);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* --- Projects / Works Redesign --- */
.work-section {
  padding: 60px 80px 100px;
  position: relative;
}

.work-container {
  max-width: 1200px;
  margin: 0 auto;
}

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

.work-card {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.work-img-placeholder {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-canvas-ice);
  background: var(--color-canvas-ice);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-midnight-ink);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

/* Cybernetic Grid Overlay */
.work-img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center;
  opacity: 0.8;
  transition: var(--transition-smooth);
  pointer-events: none;
}

/* Translucent Details Badge */
.work-img-placeholder::after {
  content: 'LAUNCHED / BESPOKE';
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--color-midnight-ink);
  letter-spacing: 1px;
  background: var(--color-paper-white);
  border: 1px solid var(--color-canvas-ice);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  transition: var(--transition-smooth);
}

.work-card:hover .work-img-placeholder {
  border-color: var(--color-fog-gray);
  background: var(--color-faint-mist);
  color: var(--color-midnight-ink);
}

.work-card:hover .work-img-placeholder::before {
  opacity: 1;
  background-size: 15px 15px;
  /* Subtle compression animation on hover */
}

.work-card:hover .work-img-placeholder::after {
  color: var(--color-paper-white);
  border-color: var(--color-midnight-ink);
  background: var(--color-midnight-ink);
}

.work-info {
  padding: 24px 0 0;
}

.work-info h4 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
  color: var(--color-midnight-ink);
}

.work-info p {
  color: var(--color-ash-gray);
  font-size: 0.9rem;
}

/* --- Timeline Redesign (process.html) --- */
.process-detail-section {
  padding: 60px 80px 100px;
}

.process-detail-container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.process-detail-container::before {
  content: '';
  position: absolute;
  left: 60px;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: var(--color-border);
}

.process-detail-step {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 40px;
  margin-bottom: 60px;
  position: relative;
}

.process-detail-left {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}

.step-num-large {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-midnight-ink);
  background: var(--color-paper-white);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--color-fog-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.process-detail-right {
  background: var(--color-paper-white);
  border: 1px solid var(--color-canvas-ice);
  border-radius: var(--radius-md);
  padding: 40px;
  transition: var(--transition-smooth);
}

.process-detail-right:hover {
  border-color: var(--color-fog-gray);
  background: var(--color-faint-mist);
  transform: translateY(-4px);
}

.process-detail-icon {
  margin-bottom: 20px;
  color: var(--color-midnight-ink);
}

.process-detail-icon svg {
  width: 28px;
  height: 28px;
}

.process-detail-right h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.process-detail-right p {
  color: var(--color-ash-gray);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 24px;
}

.process-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.chip {
  background: var(--color-faint-mist);
  border: 1px solid var(--color-canvas-ice);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  color: var(--color-ash-gray);
}

.process-detail-highlight {
  display: flex;
  gap: 16px;
  background: var(--color-action-green);
  border-left: 4px solid var(--color-midnight-ink);
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--color-midnight-ink);
  align-items: center;
}

.process-detail-highlight svg {
  flex-shrink: 0;
  color: var(--color-midnight-ink);
}

/* Timeline Summary Grid (process.html) */
.timeline-summary {
  padding: 80px 80px;
  max-width: 1200px;
  margin: 0 auto;
}

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

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

.timeline-card i,
.timeline-card svg {
  width: 32px;
  height: 32px;
  margin-bottom: 20px;
  color: var(--color-midnight-ink);
}

.timeline-card h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.timeline-duration {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.timeline-card p {
  color: var(--color-ash-gray);
  font-size: 0.9rem;
}

/* --- CTA Banner --- */
.cta-banner {
  padding: 100px 48px;
  text-align: center;
  position: relative;
}

.cta-banner-container {
  max-width: 800px;
  margin: 0 auto;
}

.cta-banner h2 {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 20px;
}

.cta-banner p {
  color: var(--color-accent);
  font-size: 1.1rem;
  margin-bottom: 36px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-group {
  display: flex;
  gap: 16px;
  justify-content: center;
}

/* --- Premium Footer --- */
/* --- Premium Footer (Dayos Solid Visual Anchor) --- */
.footer {
  padding: 80px 80px 40px;
  border-top: 6px solid var(--color-midnight-ink);
  box-shadow: inset 0 3px 0 var(--color-action-green);
  position: relative;
  overflow: hidden;
  background: #080808;
  /* Premium matte black finish */
  color: var(--color-charcoal-text);
}

.footer .logo span {
  color: #ffffff;
}

.footer-inner-enhanced {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto 60px;
  position: relative;
  z-index: 2;
}

.footer-col h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
  color: var(--color-primary);
}

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

.footer-col ul a {
  font-size: 0.95rem;
  color: var(--color-slate-text);
  position: relative;
  display: inline-block;
  transition: var(--transition-smooth);
}

.footer-col ul a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-action-green);
  transition: var(--transition-smooth);
}

.footer-col ul a:hover {
  color: var(--color-primary);
  transform: translateX(4px);
}

.footer-col ul a:hover::after {
  width: 100%;
}

.footer-desc {
  color: var(--color-slate-text);
  font-size: 0.95rem;
  margin: 20px 0 24px;
  max-width: 320px;
}

.footer-socials {
  display: flex;
  gap: 16px;
}

.footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-slate-text);
  transition: var(--transition-smooth);
}

.footer-socials a:hover {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.1) translateY(-2px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.copyright {
  font-size: 0.85rem;
  color: var(--color-slate-text);
}

/* Hollow logo in footer */
.large-outline-logo {
  font-size: 15vw;
  font-weight: 900;
  font-family: var(--font-display);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
  text-transform: none;
  letter-spacing: -0.03em;
  line-height: 0.8;
  text-align: center;
  user-select: none;
  pointer-events: none;
  margin-top: 40px;
  z-index: 1;
  transition: var(--transition-smooth);
}

.footer:hover .large-outline-logo {
  -webkit-text-stroke: 1.5px var(--color-action-green);
  opacity: 0.15;
  transform: scale(1.02);
}

/* Minimalist Footer */
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* Mobile Call FAB */
.mobile-call-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #ffffff;
  color: #050505;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  z-index: 99;
  font-weight: 600;
  font-size: 0.85rem;
}

.mobile-call-fab:hover {
  transform: translateY(-2px);
  background: #f4f4f5;
  border-color: rgba(0, 0, 0, 0.15);
  color: #050505;
}

/* Floating WhatsApp Button */
.floating-whatsapp-btn {
  position: fixed;
  bottom: 90px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #25D366;
  /* WhatsApp Green */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3), 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 99;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.floating-whatsapp-btn:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45), 0 6px 14px rgba(0, 0, 0, 0.15);
  background-color: #20ba5a;
}

.floating-whatsapp-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* WhatsApp Tooltip */
.whatsapp-tooltip {
  position: absolute;
  right: 68px;
  background: #ffffff;
  color: #1c1c1e;
  padding: 8px 14px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.floating-whatsapp-btn:hover .whatsapp-tooltip {
  opacity: 1;
  transform: translateX(0);
}

/* Subtle outer glowing pulse */
.floating-whatsapp-btn::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: 0.8;
  animation: whatsappPulse 2.5s ease-out infinite;
}

@keyframes whatsappPulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

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

/* --- Reveal Animations --- */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up {
  transform: translateY(40px);
}

.reveal-left {
  transform: translateX(-40px);
}

.reveal-right {
  transform: translateX(40px);
}

.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0);
}

/* --- Secondary Page Heros (Light background hybrid) --- */
.page-section {
  padding: 160px 80px 80px;
  text-align: center;
  min-height: 45vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--color-hero-bg);
  color: var(--color-hero-text);
  border-bottom: 1px solid var(--color-hero-border);
}

.services-hero-container {
  max-width: 800px;
}

.services-hero-container h1 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
}

.services-hero-container p {
  font-size: 1.15rem;
  color: var(--color-hero-muted);
  font-weight: 400;
}

/* Sector Pricing Headers */
.pricing-sector {
  display: none;
  padding: 80px 80px;
  border-top: 1px solid var(--color-border);
}

.pricing-sector.active {
  display: block;
  animation: projectFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pricing-sector-alt {
  background: var(--color-faint-mist);
}

.pricing-sector-container {
  max-width: 1200px;
  margin: 0 auto;
}

.sector-label {
  margin-bottom: 48px;
}

.sector-num {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-midnight-ink);
  display: block;
  margin-bottom: 8px;
}

.sector-label h2 {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

.sector-label p {
  color: var(--color-ash-gray);
  font-size: 1.05rem;
  max-width: 500px;
}

/* =========================================================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================= */


@media (max-width: 1100px) {
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .hero {
    padding: 130px 40px 80px;
    flex-direction: column;
    text-align: center;
  }

  .hero-left {
    text-align: center;
    max-width: 100%;
    margin-bottom: 60px;
  }

  .subheadline-new {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-right {
    position: relative;
    width: 100%;
    height: 400px;
    justify-content: center;
  }

  .hero-showcase-container.svelte-engine-container {
    min-height: 400px;
  }

  .hero-stat-badge {
    right: 20px;
    bottom: 20px;
    left: auto;
    top: auto;
    padding: 10px 16px;
  }

  .hero-stat-value {
    font-size: 1.4rem;
  }

  .hero-stat-label {
    font-size: 0.65rem;
  }

  .hero-users-badge {
    justify-content: center;
  }

  .hero-logo-strip {
    padding: 24px 40px;
    gap: 32px;
    flex-wrap: wrap;
  }

  .bento-section,
  .pricing-section,
  .growth-section,
  .about-section,
  .reviews-section,
  .faq-section,
  .work-section,
  .process-detail-section,
  .timeline-summary,
  .footer,
  .services-section-new,
  .limitless-section,
  .voices-section,
  .dive-banner-section {
    padding: 60px 40px;
  }

  .services-grid-new,
  .limitless-panel {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .pricing-grid,
  .pricing-grid.four-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .pricing-card {
    min-height: auto;
  }

  .pricing-card.featured,
  .pricing-card.starter-spec {
    transform: none;
  }

  .pricing-card.featured:hover,
  .pricing-card.starter-spec:hover {
    transform: translateY(-4px);
  }

  .about-container,
  .voices-container {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .about-visual {
    height: 380px;
  }

  .timeline-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 800px) {
  .navbar {
    padding: 16px 24px;
  }

  .nav-center {
    display: none;
  }

  .hero {
    padding: 120px 24px 60px;
  }

  .hero-right {
    height: 320px !important;
  }

  .hero-showcase-container.svelte-engine-container {
    min-height: 320px;
  }

  .bento-section,
  .pricing-section,
  .growth-section,
  .about-section,
  .reviews-section,
  .faq-section,
  .work-section,
  .process-detail-section,
  .timeline-summary,
  .footer,
  .services-section-new,
  .limitless-section,
  .voices-section,
  .dive-banner-section {
    padding: 60px 24px;
  }

  .pricing-grid,
  .pricing-grid.four-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .pricing-card {
    padding: 20px !important;
    min-height: auto;
  }

  .pricing-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
  }

  .tier-label {
    font-size: 1.15rem;
  }

  .tier-tag {
    font-size: 0.7rem;
    padding: 2px 8px;
  }

  .pricing-amount {
    margin-bottom: 20px;
  }

  .pricing-amount .price {
    font-size: 2.2rem;
  }

  .pricing-amount .currency {
    font-size: 1.4rem;
  }

  .pricing-features {
    gap: 12px;
    margin-bottom: 24px;
  }

  .pricing-features li {
    font-size: 0.82rem;
    gap: 8px;
    line-height: 1.3;
  }

  .pricing-features li i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .headline-new {
    font-size: 2.5rem;
  }

  .diagonal-stack {
    width: 240px;
    height: 180px;
  }

  .diagonal-card {
    width: 220px;
    padding: 16px;
  }

  .diagonal-card-icon {
    margin-bottom: 12px;
  }

  .diagonal-card h4 {
    font-size: 1.8rem;
  }

  .diagonal-card-2 {
    left: 20px;
    top: 20px;
  }

  .diagonal-card-3 {
    left: 40px;
    top: 40px;
  }

  .growth-right {
    height: 320px;
  }

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

  .process-detail-step {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .process-detail-container::before {
    left: 24px;
  }

  .process-detail-left {
    justify-content: flex-start;
  }

  .step-num-large {
    width: 48px;
    height: 48px;
  }

  .process-detail-right {
    padding: 24px;
  }

  .feedback-bubble {
    flex-direction: column;
    text-align: center;
  }

  .feedback-bubble:hover {
    transform: none !important;
  }

  .feedback-bubble-avatar {
    margin-bottom: 8px;
  }

  .about-visual {
    height: 350px !important;
  }

  .about-actions-row {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
  }

  .about-actions-row .btn {
    width: 100%;
    justify-content: center;
  }

  .about-actions-row .watch-video-link {
    width: 100%;
    justify-content: center;
  }

  .dive-banner {
    height: 320px;
  }

  .dive-banner-content h2 {
    font-size: 2rem;
  }

  .footer-inner-enhanced {
    grid-template-columns: 1fr;
    gap: 32px;
  }

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

  .large-outline-logo {
    font-size: 18vw;
  }
}

/* --- Medium Phone/Tablet Viewport (max-width: 768px) --- */
@media (max-width: 768px) {

  .pricing-grid,
  .pricing-grid.four-cols {
    grid-template-columns: 1fr !important;
    gap: 24px;
    max-width: 480px;
    margin: 0 auto;
  }
}

/* --- Small Phone Viewport Fallback (max-width: 550px) --- */
@media (max-width: 550px) {

  .pricing-grid,
  .pricing-grid.four-cols {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pricing-card {
    padding: 32px 24px !important;
  }

  .pricing-card-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
  }

  .tier-label {
    font-size: 1.3rem;
  }

  .tier-tag {
    font-size: 0.75rem;
    padding: 4px 10px;
  }

  .pricing-amount {
    margin-bottom: 24px;
  }

  .pricing-amount .price {
    font-size: 2.8rem;
  }

  .pricing-amount .currency {
    font-size: 1.6rem;
  }

  .pricing-features {
    gap: 16px;
    margin-bottom: 32px;
  }

  .pricing-features li {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .pricing-features li i {
    width: 16px;
    height: 16px;
  }

  .bento-section,
  .pricing-section,
  .growth-section,
  .about-section,
  .reviews-section,
  .faq-section,
  .work-section,
  .process-detail-section,
  .timeline-summary,
  .footer,
  .services-section-new,
  .limitless-section,
  .voices-section,
  .dive-banner-section {
    padding: 40px 16px !important;
  }

  .service-box-new {
    padding: 32px 20px !important;
  }

  .limitless-panel {
    padding: 24px 16px !important;
  }

  .limitless-panel-meta {
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
  }

  .service-header {
    padding: 16px 20px !important;
  }

  .service-body {
    padding: 0 20px 20px !important;
  }
}

/* --- Global Currency Switcher Styling --- */
.currency-selector-wrapper {
  margin-right: 16px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.currency-select {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 36px 8px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  outline: none;
  transition: var(--transition-smooth);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 14px) center;
}

.currency-select:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
}

.currency-select:focus {
  border-color: rgba(255, 255, 255, 0.4);
}

.currency-select option {
  background: #0B0B0D;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 12px;
}

/* --- Ultra-Small Mobile Viewport (max-width: 480px) --- */
@media (max-width: 480px) {
  .menu-btn-text {
    display: none !important;
  }

  .menu-btn {
    padding: 8px 12px !important;
  }

  .currency-selector-wrapper {
    margin-right: 8px !important;
  }

  .currency-select {
    padding: 8px 28px 8px 12px !important;
    font-size: 0.8rem !important;
  }

  .logo {
    font-size: 1.15rem !important;
  }

  .hero .cta-group {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .hero .cta-group .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .hero-right {
    height: 260px !important;
  }

  .hero-showcase-container.svelte-engine-container {
    min-height: 260px;
  }
}

/* --- Svelte Crisp Editorial Client Reviews Section (Compact Grid) --- */
.svelte-reviews-section.compact {
  padding: 80px 40px;
  background-color: var(--color-snow);
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.reviews-compact-single-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.reviews-compact-single-container .compact-review-card {
  width: 100%;
  max-width: 480px;
  /* Centered compact layout */
}

.compact-review-card {
  background: var(--color-ghost-white);
  border: 1px solid rgba(20, 20, 20, 0.06);
  border-radius: 4px;
  /* Svelte's 4px standard */
  padding: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 5px 15px 0px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.compact-review-card:hover {
  transform: translateY(-4px);
  box-shadow: rgba(212, 48, 8, 0.06) 0px 10px 25px 0px, rgba(0, 0, 0, 0.05) 0px 5px 15px 0px;
  border-color: rgba(212, 48, 8, 0.15);
}

.compact-video-wrapper {
  position: relative;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: #000000;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.compact-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  outline: none;
  border: none;
}

.compact-video-placeholder {
  position: relative;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 16/9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background-size: cover;
  background-position: center;
  border: 1px dashed rgba(20, 20, 20, 0.15);
}

.placeholder-play-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px dashed rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.placeholder-tag {
  font-family: var(--font-fira-sans);
  font-size: 8px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.compact-review-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.compact-review-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-snow);
  color: var(--color-pewter);
  font-family: var(--font-fira-sans);
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  width: fit-content;
  border: 1px solid rgba(20, 20, 20, 0.05);
  letter-spacing: 0.04em;
}

.compact-client-name {
  font-family: var(--font-dm-serif-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-carbon);
  margin: 4px 0 0 0;
  line-height: 1.2;
}

.compact-client-title {
  font-family: var(--font-fira-sans);
  font-size: 10px;
  color: var(--color-pewter);
  margin: 0;
  line-height: 1.3;
}

.compact-quote {
  font-family: var(--font-eb-garamond);
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-graphite-svelte);
  font-style: italic;
  margin: 6px 0 0 0;
  border-top: 1px dashed rgba(20, 20, 20, 0.05);
  padding-top: 8px;
  flex: 1;
}

/* Responsiveness overrides for Compact Reviews section */
@media (max-width: 991px) {
  .svelte-reviews-section.compact {
    padding: 60px 24px;
  }
}

@media (max-width: 550px) {
  .svelte-reviews-section.compact {
    padding: 40px 16px !important;
  }
}

/* =========================================================================
   GOLDEN EYE-CATCHING EFFECT FOR SPECIAL MICRO STARTER PACKAGE
   ========================================================================= */
.pricing-card.starter-spec {
  position: relative;
  border: 2px solid #d4af37 !important;
  /* Premium polished gold border */
  box-shadow: 0 12px 35px rgba(212, 175, 55, 0.15), var(--shadow-sm) !important;
  transform: scale(1.02);
  z-index: 10;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.pricing-card.starter-spec:hover {
  transform: scale(1.04) translateY(-4px) !important;
  box-shadow: 0 20px 45px rgba(212, 175, 55, 0.28), var(--shadow-xl) !important;
  border-color: #f3e5ab !important;
}

/* Golden Shimmer Overlay Animation */
.pricing-card.starter-spec::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg,
      transparent 45%,
      rgba(212, 175, 55, 0.18) 50%,
      transparent 55%);
  background-size: 200% 200%;
  animation: goldShimmer 5s infinite linear;
  pointer-events: none;
  z-index: 1;
}

@keyframes goldShimmer {
  0% {
    transform: translate(-30%, -30%) rotate(45deg);
  }

  100% {
    transform: translate(30%, 30%) rotate(45deg);
  }
}

/* Gold Shimmer Background Elements */
.gold-shimmer-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 10%, rgba(212, 175, 55, 0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.pricing-card.starter-spec .starter-badge {
  background: linear-gradient(135deg, #d4af37, #f3e5ab) !important;
  color: #000000 !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 10px rgba(212, 175, 55, 0.2) !important;
  display: inline-block !important;
  margin-bottom: 16px !important;
  z-index: 2;
  position: relative;
}

.pricing-card.starter-spec .btn-primary {
  background: linear-gradient(135deg, #d4af37, #f3e5ab) !important;
  border: 1px solid #d4af37 !important;
  color: #000000 !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.25) !important;
  border-radius: 8px !important;
  transition: var(--transition-smooth) !important;
}

.pricing-card.starter-spec .btn-primary:hover {
  background: linear-gradient(135deg, #f3e5ab, #d4af37) !important;
  border-color: #f3e5ab !important;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.45) !important;
  transform: translateY(-2px) !important;
}

.pricing-card.starter-spec .pricing-amount .currency,
.pricing-card.starter-spec .pricing-amount .price {
  color: #d4af37 !important;
  font-weight: 700 !important;
}

.pricing-card.starter-spec .pricing-features li i[data-feather="check"] {
  stroke: #d4af37 !important;
}

/* =========================================================================
   PREMIUM DYNAMIC MOUSE HOVER GRADIENT TRAILER & GRID SPOTLIGHT
   ========================================================================= */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  z-index: 99998; /* High z-index but sits below standard tooltips/modals if needed */
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(19, 88, 107, 0.14) 0%,
    rgba(197, 160, 89, 0.04) 40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.5s ease, width 0.3s ease, height 0.3s ease;
  will-change: transform;
}

/* Make it slightly larger on hover over interactive items */
body.cursor-hovering-item .cursor-glow {
  width: 250px;
  height: 250px;
  background: radial-gradient(
    circle,
    rgba(19, 88, 107, 0.18) 0%,
    rgba(197, 160, 89, 0.06) 40%,
    transparent 70%
  );
}

body.cursor-active .cursor-glow {
  opacity: 1;
}

/* Global Background Grid Spotlight */
.grid-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(
    600px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    rgba(19, 88, 107, 0.05) 0%,
    rgba(197, 160, 89, 0.02) 40%,
    transparent 80%
  );
  pointer-events: none;
  z-index: 1; /* Sits directly above backgrounds */
  opacity: 0;
  transition: opacity 0.5s ease;
}

body.cursor-active .grid-spotlight {
  opacity: 1;
}

/* Disable Custom Cursor and Spotlight on Touch Viewports */
@media (hover: none), (max-width: 1024px) {
  .cursor-glow,
  .grid-spotlight {
    display: none !important;
  }
}

/* =========================================================================
   PROJECT SHOWCASE - PACKAGE-WISE LAYOUT & SUB-PACKAGE SHIELD CARDS
   ========================================================================= */

.project-category-tabs-container {
  max-width: 1200px;
  margin: 0 auto 48px;
  padding: 0 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-category-tabs {
  display: inline-flex;
  gap: 8px;
  background: var(--color-fog-gray);
  border: 1px solid var(--color-steel-gray);
  padding: 6px;
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
  justify-content: center;
}

.project-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-slate-text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-smooth);
}

.project-tab-btn:hover {
  color: var(--color-midnight-ink);
  background: rgba(0, 0, 0, 0.02);
}

.project-tab-btn.active {
  background: var(--color-paper-white);
  color: var(--color-midnight-ink);
  border-color: var(--color-steel-gray);
  box-shadow: var(--shadow-subtle);
}

.project-tab-btn .tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-slate-text);
  transition: var(--transition-smooth);
}

.project-tab-btn.active .tab-dot {
  background: var(--color-action-orange);
  box-shadow: 0 0 6px var(--color-action-orange);
}

/* Detailed Showcase Sections */
.project-sector-section {
  display: none; /* Controlled by JS filtering */
  padding: 40px 80px 100px;
}

.project-sector-section.active {
  display: block;
  animation: projectFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.project-grid-detailed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}

.project-grid-detailed.four-cols {
  grid-template-columns: repeat(4, 1fr);
}

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

.project-grid-detailed.one-col {
  grid-template-columns: 1fr;
  max-width: 500px;
  margin: 40px auto 0;
}

/* Custom spec template card */
.project-spec-card {
  background: var(--color-paper-white);
  border: 1px solid var(--color-steel-gray);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-subtle);
  position: relative;
  overflow: hidden;
}

.project-spec-card:hover {
  border-color: var(--color-midnight-ink);
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06), var(--shadow-sm);
}

.project-spec-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.project-spec-card .package-tier {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-midnight-ink);
  text-transform: uppercase;
}

.project-spec-card .package-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--color-fog-gray);
  color: var(--color-slate-text);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--color-steel-gray);
}

.project-spec-card .package-price,
.project-spec-card .pricing-amount {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--color-midnight-ink);
  display: flex;
  align-items: baseline;
}

.project-spec-card .package-price .price,
.project-spec-card .pricing-amount .price {
  font-size: 2.2rem;
  font-weight: 700;
}

.project-spec-card .package-price .currency,
.project-spec-card .pricing-amount .currency {
  font-size: 1.3rem;
  vertical-align: super;
  margin-right: 2px;
  font-weight: 300;
}

.project-spec-card .package-desc {
  font-size: 0.9rem;
  color: var(--color-slate-text);
  margin-bottom: 24px;
  line-height: 1.45;
}

/* Template Mockup Display inside Card */
.project-mockup-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 6px;
  border: 1px solid var(--color-steel-gray);
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--color-fog-gray);
}

.project-mockup-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-spec-card:hover .project-mockup-img {
  transform: scale(1.05);
}

.project-mockup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition-smooth);
}

.project-spec-card:hover .project-mockup-overlay {
  opacity: 1;
}

.project-mockup-btn {
  background: var(--color-paper-white);
  color: var(--color-midnight-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shadow-sm);
  transform: translateY(10px);
  transition: var(--transition-smooth);
}

.project-spec-card:hover .project-mockup-btn {
  transform: translateY(0);
}

.project-mockup-btn:hover {
  background: var(--color-midnight-ink);
  color: var(--color-paper-white);
}

/* Blueprint Specs Drawer (Technical metadata list) */
.project-specs-drawer {
  background: var(--color-fog-gray);
  border: 1px dashed var(--color-steel-gray);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-charcoal-text);
}

.project-specs-drawer-title {
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--color-slate-text);
  border-bottom: 1px dashed var(--color-steel-gray);
  padding-bottom: 4px;
}

.project-spec-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.project-spec-item:last-child {
  margin-bottom: 0;
}

.project-spec-label {
  color: var(--color-slate-text);
}

.project-spec-value {
  font-weight: 600;
}

.project-features-bullet-list {
  margin-bottom: 24px;
  font-size: 0.85rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.project-features-bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--color-slate-text);
}

.project-features-bullet-list li i {
  flex-shrink: 0;
  margin-top: 2px;
  stroke-width: 2.5px;
  width: 14px;
  height: 14px;
  color: var(--color-callout-cyan);
}

.project-actions-row {
  display: flex;
  gap: 12px;
  width: 100%;
}

.project-actions-row .btn {
  flex: 1;
  padding: 10px 16px;
  font-size: 0.85rem;
}

/* Responsive Columns Reflow */
@media (max-width: 1024px) {
  .project-grid-detailed {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .work-section {
    padding: 60px 40px 80px;
  }
  .project-sector-section {
    padding: 40px 40px 80px;
  }
  .project-grid-detailed {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .work-section {
    padding: 60px 20px 80px;
  }
  .project-sector-section {
    padding: 40px 20px 80px;
  }
}

/* WhatsApp Green Button Styling */
.btn-whatsapp {
  background-color: #25D366 !important;
  border-color: #25D366 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.btn-whatsapp:hover {
  background-color: #128C7E !important;
  border-color: #128C7E !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
}

/* Email Inquiry Button Styling */
.btn-email-inquiry {
  background-color: transparent !important;
  color: var(--color-midnight-ink) !important;
  border: 1px solid var(--color-steel-gray) !important;
}

.btn-email-inquiry:hover {
  background-color: var(--color-fog-gray) !important;
  border-color: var(--color-midnight-ink) !important;
  transform: translateY(-2px);
}

/* Sub-Package Tier Group Subheaders */
.project-tier-subheading {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-slate-text);
  letter-spacing: 1px;
  border-bottom: 1px dashed var(--color-steel-gray);
  padding-bottom: 8px;
  margin-top: 48px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.project-tier-subheading::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--color-action-orange);
  border-radius: 50%;
}

/* --- Interactive About Us Panel Styles --- */
.about-tab-panel {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.about-tab-panel.active {
  opacity: 1;
  transform: translateY(0);
}

.about-pills-interactive .interactive-chip {
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  background: var(--color-paper-white);
  border: 1px solid var(--color-steel-gray);
  border-radius: 4px;
  color: var(--color-slate-text);
  transition: all 0.3s ease;
}

.about-pills-interactive .interactive-chip:hover {
  background: var(--color-fog-gray);
  color: var(--color-midnight-ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
/* =========================================================================
   SCROLLYTELLING ANIMATION ENGINE & PRELOADER STYLES
   ========================================================================= */

/* Custom global vars for scrollytelling */
:root {
  --transition-duration: 0.8s;
  --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Preloader Screen */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #050505;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1s var(--transition-smooth), visibility 1s var(--transition-smooth);
}

#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.preloader-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loader-circle-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 1.5rem;
}

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

.loader-circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 4px;
}

.loader-circle-bar {
  fill: none;
  stroke: var(--color-action-orange);
  stroke-width: 4px;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s ease;
}

.loader-percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
}

.loader-status {
  font-size: 0.85rem;
  color: var(--color-slate-text);
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

/* Main Scroll Track */
.scroll-track {
  position: relative;
  width: 100%;
  height: 1000vh; /* 1000vh to give a beautiful, unhurried frame playback rate */
}

/* Sticky Container — 60/40 Split Layout */
.sticky-container {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 10;
  display: flex;
  flex-direction: row;
}

/* Canvas Wrapper — Full Cover */
.canvas-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

#product-canvas {
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: screen;
}

.ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 101, 43, 0.07) 0%, rgba(0, 214, 255, 0.03) 40%, rgba(0, 0, 0, 0) 70%);
  z-index: -1;
  pointer-events: none;
  filter: blur(40px);
  transition: background 0.8s ease;
}

/* Text Overlays Layer — Full Cover Overlay */
.text-overlays {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
}

.overlay-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 60px 10%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px) scale(0.98);
  transition: opacity var(--transition-duration) var(--transition-smooth),
              visibility var(--transition-duration) var(--transition-smooth),
              transform var(--transition-duration) var(--transition-smooth);
}

.overlay-section.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Text overlays layout alignment — aligned left/right/center over full cover canvas */
.left-align {
  max-width: 480px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(5, 5, 5, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 30px 35px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.right-align {
  max-width: 480px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(5, 5, 5, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 30px 35px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* Hero / intro overlays — left-aligned */
.hero-content {
  width: 100%;
  text-align: left;
  max-width: 480px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(5, 5, 5, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 30px 35px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.1rem;
  line-height: 1.05;
  margin-bottom: 0.5rem;
  background: linear-gradient(180deg, #ffffff 65%, rgba(0, 214, 255, 0.3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.95)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.9));
}

.hero-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.75rem);
  font-weight: 500;
  color: var(--color-callout-cyan);
  margin-bottom: 1.2rem;
  letter-spacing: -0.05rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9);
}

.hero-description {
  font-size: 0.95rem;
  color: var(--color-slate-text);
  max-width: 100%;
  line-height: 1.6;
  margin-bottom: 2rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9);
}

.hero-scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0.7;
  animation: bounce 2s infinite ease-in-out;
}

.scroll-icon {
  width: 24px;
  height: 40px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  position: relative;
}

.scroll-dot {
  width: 4px;
  height: 8px;
  background-color: var(--color-callout-cyan);
  border-radius: 2px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll-wheel 1.5s infinite ease-in-out;
}

.scroll-text {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: var(--color-slate-text);
  font-family: var(--font-mono);
}

/* Editorial Labels & Headlines */
.section-label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-callout-cyan);
  letter-spacing: 0.2rem;
  margin-bottom: 1rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1.2rem;
  letter-spacing: -0.05rem;
  background: linear-gradient(180deg, #ffffff 70%, rgba(236, 101, 43, 0.35) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.95)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.9));
}

.section-body {
  font-size: 0.92rem;
  color: var(--color-slate-text);
  line-height: 1.55;
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* Spec cards under scrollytelling */
.specs-grid {
  display: flex;
  gap: 24px;
  margin-top: 1rem;
  width: 100%;
}

.spec-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 18px 24px;
  backdrop-filter: blur(10px);
}

.spec-val {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.85rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.spec-lbl {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: var(--color-slate-text);
}

/* Key lists */
.key-points-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 0.5rem;
}

.key-point {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.point-icon {
  color: var(--color-callout-cyan);
  font-size: 1.15rem;
  line-height: 1.4;
  text-shadow: 0 0 8px rgba(0, 214, 255, 0.5);
}

.key-point p {
  font-size: 1.02rem;
  color: var(--color-slate-text);
  line-height: 1.5;
}

/* Badges */
.sound-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 214, 255, 0.04);
  border: 1px solid rgba(0, 214, 255, 0.15);
  padding: 10px 18px;
  border-radius: 30px;
  margin-top: 1rem;
}

.badge-icon {
  font-size: 1.1rem;
}

.badge-text {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02rem;
  color: var(--color-callout-cyan);
}

/* Final CTA overlay — centered on screen */
.cta-content {
  width: 100%;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(5, 5, 5, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 35px 40px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

#beat-noise {
  justify-content: flex-end;
}

#beat-cta {
  justify-content: center;
}

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.08rem;
  margin-bottom: 0.8rem;
  background: linear-gradient(135deg, #ffffff 30%, var(--color-action-orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.95)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.9));
}

.cta-subtitle {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-slate-text);
  margin-bottom: 2rem;
  max-width: 100%;
  font-weight: 400;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9);
}

.cta-button-group {
  display: flex;
  gap: 20px;
  margin-bottom: 2rem;
}

.btn-primary-gradient {
  color: #fff;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--color-action-orange), var(--color-callout-cyan));
  box-shadow: 0 4px 20px rgba(236, 101, 43, 0.25);
  transition: transform 0.3s var(--transition-smooth), box-shadow 0.3s ease;
  cursor: pointer;
}

.btn-primary-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 214, 255, 0.45);
}

.btn-secondary-outline {
  color: #fff;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--transition-smooth);
}

.btn-secondary-outline:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.4);
}

.cta-microcopy {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

/* Corner indicator */
.corner-indicator {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  background: rgba(10, 10, 12, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 6px 14px;
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.indicator-track {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-slate-text);
  letter-spacing: 0.08rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

#active-frame-num {
  color: var(--color-callout-cyan);
  font-weight: 700;
}

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

/* Keyframes Animations */
@keyframes scroll-wheel {
  0% { transform: translate(-50%, 0); opacity: 1; }
  50% { transform: translate(-50%, 8px); opacity: 0.3; }
  100% { transform: translate(-50%, 0); opacity: 1; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Adaptive overrides for other existing Kayalva sections */
.editorial-statement {
  background: var(--color-fog-gray);
  border-top: 1px solid var(--color-steel-gray);
  border-bottom: 1px solid var(--color-steel-gray);
}

.about-section {
  background: var(--color-ghost-white);
  border-bottom: 1px solid var(--color-steel-gray);
}

.services-section-new {
  background: var(--color-fog-gray);
}

.service-box-new {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.service-box-new:hover {
  border-color: var(--color-action-orange);
  background: rgba(255, 255, 255, 0.04);
}

.service-box-new h3 {
  color: #fff;
}

.service-box-new p {
  color: var(--color-slate-text);
}

.limitless-section {
  background: var(--color-ghost-white);
}

.limitless-panel {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.voices-section {
  background: var(--color-fog-gray);
}

.feedback-bubble {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--color-charcoal-text);
}

.feedback-bubble-author {
  color: var(--color-action-orange);
}

.faq-section {
  background: var(--color-ghost-white);
}

.service-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--color-charcoal-text);
}

.service-card.active {
  border-color: var(--color-action-orange);
}

.service-header h3 {
  color: #fff;
}

.svelte-reviews-section {
  background: var(--color-fog-gray);
}

.compact-review-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--color-charcoal-text);
}

.compact-client-name {
  color: #fff;
}

.compact-quote {
  color: var(--color-slate-text);
}

.footer {
  background: #050505;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.footer .logo {
  color: #ffffff !important;
}

.footer h4 {
  color: #fff;
}

.footer-desc {
  color: var(--color-slate-text);
}

.large-outline-logo {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.03);
}

/* Desktop sizing corrections for scrollytelling */
@media (max-width: 1024px) {
  .hero-title {
    font-size: 2.5rem;
  }
  .hero-subtitle {
    font-size: 1.5rem;
  }
  .section-title {
    font-size: 1.85rem;
  }
  .overlay-section {
    padding: 40px 8%;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 12px 16px;
  }
  .navbar.scrolled {
    padding: 12px 16px;
  }
  .nav-links {
    display: none;
  }
  /* Mobile scroll track: shorten track to reduce swiping fatigue */
  .scroll-track {
    height: 450vh;
  }
  /* Layer canvas and text overlays at 100% full cover on mobile as well */
  .sticky-container {
    flex-direction: row;
    position: sticky;
    top: 0;
    height: 100vh;
  }
  .canvas-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .text-overlays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .overlay-section {
    padding: 20px 16px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end !important;
    align-items: center;
    box-sizing: border-box;
  }
  .hero-content, .reveal-content, .noise-content, .sound-content, .cta-content {
    background: rgba(5, 5, 5, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    width: 100%;
    max-width: 450px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .left-align, .right-align {
    max-width: 100%;
    margin: 0;
    text-align: left;
    align-items: flex-start;
  }
  .hero-content {
    text-align: left;
    align-items: flex-start;
  }
  .hero-title {
    font-size: 2rem;
  }
  .hero-subtitle {
    font-size: 1.25rem;
  }
  .section-title {
    font-size: 1.5rem;
    text-align: left;
  }
  .key-point {
    text-align: left;
  }
  .cta-title {
    font-size: 2rem;
  }
  .cta-subtitle {
    font-size: 1rem;
  }
  .specs-grid {
    flex-direction: column;
    gap: 12px;
  }
  .cta-button-group {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
  }
  .btn-primary-gradient, .btn-secondary-outline {
    text-align: center;
    width: 100%;
    padding: 12px 20px;
  }
  .cta-content {
    text-align: left;
    align-items: flex-start;
  }
}

/* =========================================================================
   ADD-ON CARDS EYE-CATCHING INTERACTIVE SPOTLIGHT EFFECT
   ========================================================================= */
.addon-card {
  position: relative !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease, box-shadow 0.4s ease !important;
}

.addon-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(350px circle at var(--x, 0px) var(--y, 0px), rgba(0, 214, 255, 0.12), transparent 80%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.addon-card > * {
  position: relative;
  z-index: 1; /* Keep content above the radial gradient background */
}

.addon-card:hover::before {
  opacity: 1;
}

.addon-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(0, 214, 255, 0.5) !important;
  box-shadow: 0 12px 30px rgba(0, 214, 255, 0.15), 0 0 20px rgba(0, 214, 255, 0.05) !important;
}

.addon-card i {
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.4s ease !important;
}

.addon-card:hover i {
  transform: scale(1.25) !important;
  color: var(--color-callout-cyan) !important;
}


/* =========================================================================
   KAYALVA LAYOUT SYSTEM (Brand Colors)
   Adds bold section layouts, service grids, stats, testimonials,
   case studies, awards, blog, and contact sections.
   ========================================================================= */

/* --- Nexa Section Base --- */
.nexa-section {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.nexa-section--dark {
  background: #050505;
}
.nexa-section--light {
  background: #0a0a0e;
}
.nexa-section__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.nexa-section__header {
  text-align: center;
  margin-bottom: 64px;
}
.nexa-section__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ec652b;
  margin-bottom: 16px;
}
.nexa-section__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0;
}
.nexa-section__title em {
  font-style: italic;
  color: #c5a059;
}
.nexa-section__subtitle {
  font-size: 16px;
  color: rgba(255,255,255,0.5);
  margin-top: 16px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* --- Hero Text Overlay Restyle --- */
#beat-hero .hero-title {
  font-size: clamp(52px, 9vw, 110px);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.92;
  margin-bottom: 16px;
}
#beat-hero .hero-subtitle {
  font-size: clamp(14px, 1.8vw, 20px);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 500;
  color: #c5a059;
  margin-bottom: 12px;
}
#beat-hero .hero-description {
  font-size: clamp(14px, 1.5vw, 18px);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}
/* Restyle beat section titles bolder */
.overlay-section .section-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.overlay-section .section-label {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
}

/* --- Stats Counter Section --- */
.stats-counter-section {
  background: #050505;
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.stats-counter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
}
.stat-item {
  text-align: center;
  padding: 48px 24px;
  border-right: 1px solid rgba(255,255,255,0.06);
  position: relative;
}
.stat-item:last-child {
  border-right: none;
}
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 800;
  background: linear-gradient(135deg, #ec652b 0%, #c5a059 50%, #00d6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* --- Service Cards Grid --- */
.nexa-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.nexa-service-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 36px 32px 80px;
  position: relative;
  overflow: hidden;
  transition: all 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.nexa-service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ec652b, #13586b);
  opacity: 0.6;
  transition: opacity 0.35s ease;
}
.nexa-service-card:hover {
  border-color: rgba(236, 101, 43, 0.25);
  transform: translateY(-6px);
  box-shadow: 0 24px 80px rgba(236, 101, 43, 0.08);
}
.nexa-service-card:hover::before {
  opacity: 1;
}
.nexa-service-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #ec652b;
  margin-bottom: 14px;
  line-height: 1.3;
}
.nexa-service-card__desc {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  margin-bottom: 28px;
}
.nexa-service-card__bottom {
  position: absolute;
  bottom: 32px;
  left: 32px;
  right: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nexa-service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  padding: 8px 18px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  transition: all 0.3s ease;
}
.nexa-service-card__link:hover {
  background: #ec652b;
  border-color: #ec652b;
  color: #fff;
}
.nexa-service-card__arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s ease;
  color: rgba(255,255,255,0.35);
}
.nexa-service-card:hover .nexa-service-card__arrow {
  background: #ec652b;
  border-color: #ec652b;
  color: #fff;
}

/* --- Why Kayalva Differentiator Cards --- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.why-card {
  background: linear-gradient(160deg, rgba(19, 88, 107, 0.12) 0%, rgba(5, 5, 5, 0.6) 100%);
  border: 1px solid rgba(19, 88, 107, 0.18);
  border-radius: 18px;
  padding: 44px 32px;
  text-align: center;
  transition: all 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
}
.why-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(236, 101, 43, 0.06), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.why-card:hover {
  transform: translateY(-8px);
  border-color: rgba(236, 101, 43, 0.3);
  box-shadow: 0 28px 80px rgba(19, 88, 107, 0.12);
}
.why-card:hover::after {
  opacity: 1;
}
.why-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ec652b, #c5a059);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  color: #fff;
  position: relative;
  z-index: 1;
}
.why-card__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.why-card__desc {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

/* --- Case Studies Image Grid --- */
.case-studies-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.case-study-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
}
.case-study-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.case-study-card:hover img {
  transform: scale(1.1);
}
.case-study-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.case-study-card:hover .case-study-card__overlay {
  opacity: 1;
}
.case-study-card__category {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #ec652b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  font-weight: 600;
}
.case-study-card__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.case-study-card--large {
  grid-column: span 2;
  grid-row: span 2;
}
.case-study-card--large .case-study-card__name {
  font-size: 22px;
}

/* --- Awards / Partners Grid --- */
.awards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.award-card {
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 40px 24px;
  text-align: center;
  position: relative;
  transition: all 0.35s ease;
}
.award-card::before,
.award-card::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-style: solid;
  transition: border-color 0.35s ease, width 0.35s ease, height 0.35s ease;
}
.award-card::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
  border-color: #13586b;
  border-radius: 14px 0 0 0;
}
.award-card::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
  border-color: #13586b;
  border-radius: 0 0 14px 0;
}
.award-card:hover {
  border-color: rgba(19, 88, 107, 0.25);
  transform: translateY(-4px);
}
.award-card:hover::before,
.award-card:hover::after {
  border-color: #ec652b;
  width: 32px;
  height: 32px;
}
.award-card__icon {
  font-size: 36px;
  margin-bottom: 18px;
  display: block;
}
.award-card__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.award-card__year {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin-top: 6px;
}

/* --- Testimonials Card Style --- */
.nexa-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.nexa-testimonial-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 36px;
  transition: all 0.35s ease;
  display: flex;
  flex-direction: column;
}
.nexa-testimonial-card:hover {
  border-color: rgba(236, 101, 43, 0.2);
  transform: translateY(-4px);
  box-shadow: 0 16px 50px rgba(0,0,0,0.25);
}
.nexa-testimonial-card__logo {
  height: 28px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
}
.nexa-testimonial-card__logo span {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: #ec652b;
  letter-spacing: -0.02em;
}
.nexa-testimonial-card__text {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
  margin-bottom: 28px;
  flex: 1;
}
.nexa-testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.nexa-testimonial-card__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #13586b, #ec652b);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.nexa-testimonial-card__name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.nexa-testimonial-card__role {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}

/* --- Blog / Insights Grid --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blog-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.blog-card:hover {
  transform: translateY(-6px);
  border-color: rgba(236, 101, 43, 0.2);
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}
.blog-card__image-wrapper {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, rgba(19, 88, 107, 0.2), rgba(236, 101, 43, 0.1));
}
.blog-card__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-card:hover .blog-card__image-wrapper img {
  transform: scale(1.08);
}
.blog-card__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  opacity: 0.3;
}
.blog-card__body {
  padding: 28px;
}
.blog-card__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ec652b;
  background: rgba(236, 101, 43, 0.1);
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
}
.blog-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.35;
}
.blog-card__excerpt {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
}
.blog-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: #ec652b;
  text-decoration: none;
  transition: gap 0.3s ease;
}
.blog-card__read-more:hover {
  gap: 10px;
}

/* --- Contact CTA Section --- */
.contact-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.contact-cta__text h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.contact-cta__text > p {
  font-size: 16px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 36px;
}
.contact-details-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-detail {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
}
.contact-detail a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}
.contact-detail a:hover {
  color: #ec652b;
}
.contact-detail__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(236, 101, 43, 0.08);
  border: 1px solid rgba(236, 101, 43, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ec652b;
  flex-shrink: 0;
}
.contact-form-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 44px;
}
.contact-form-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 28px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group {
  margin-bottom: 18px;
}
.form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 13px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-family: var(--font-body);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  outline: none;
  box-sizing: border-box;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255,255,255,0.25);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: #ec652b;
  box-shadow: 0 0 0 3px rgba(236, 101, 43, 0.1);
}
.form-group textarea {
  resize: vertical;
  min-height: 110px;
}
.form-group select option {
  background: #0a0a0c;
  color: #fff;
}
.form-submit-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #ec652b 0%, #c5a059 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-display);
  cursor: pointer;
  transition: all 0.35s ease;
  margin-top: 8px;
  letter-spacing: 0.02em;
}
.form-submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(236, 101, 43, 0.3);
}

/* --- Enhanced Footer (Multi-Column) --- */
.footer-nexa {
  background: #050505;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 80px 0 0;
}
.footer-nexa__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.footer-nexa__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-nexa__brand {
  padding-right: 20px;
}
.footer-nexa__brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  text-decoration: none;
}
.footer-nexa__brand-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  text-transform: lowercase;
  letter-spacing: -0.02em;
}
.footer-nexa__brand-name span {
  font-weight: 300;
  color: #c5a059;
}
.footer-nexa__brand-tagline {
  font-size: 28px;
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 24px;
}
.footer-nexa__brand-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #ec652b;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.footer-nexa__brand-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(236, 101, 43, 0.3);
}
.footer-nexa__col h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  text-transform: capitalize;
}
.footer-nexa__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-nexa__col ul li {
  margin-bottom: 12px;
}
.footer-nexa__col ul li a {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-nexa__col ul li a:hover {
  color: #ec652b;
}
.footer-nexa__contact-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 20px;
}
.footer-nexa__contact-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #ec652b;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer-nexa__contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
}
.footer-nexa__contact-item a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-nexa__contact-item a:hover {
  color: #ec652b;
}
.footer-nexa__socials {
  margin-top: 20px;
}
.footer-nexa__socials-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.footer-nexa__social-icons {
  display: flex;
  gap: 10px;
}
.footer-nexa__social-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 14px;
}
.footer-nexa__social-icon:hover {
  background: #ec652b;
  border-color: #ec652b;
  color: #fff;
  transform: translateY(-2px);
}
.footer-nexa__bottom {
  padding: 24px 0;
  text-align: center;
}
.footer-nexa__bottom p {
  font-size: 13px;
  color: rgba(255,255,255,0.3);
}
.footer-nexa__watermark {
  font-family: var(--font-display);
  font-size: clamp(60px, 10vw, 140px);
  font-weight: 800;
  text-transform: lowercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.04);
  text-align: center;
  line-height: 1;
  padding: 40px 0 20px;
  user-select: none;
  overflow: hidden;
}

/* --- Section Reveal Animation --- */
.nexa-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.nexa-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --- Animated Counter --- */
@keyframes countPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* =========================================================================
   RESPONSIVE OVERRIDES
   ========================================================================= */
@media (max-width: 1024px) {
  .nexa-services-grid,
  .why-grid,
  .nexa-testimonials-grid,
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .case-studies-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .case-study-card--large {
    grid-column: span 1;
    grid-row: span 1;
  }
  .awards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-cta {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .stats-counter {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-item:nth-child(2) {
    border-right: none;
  }
  .stat-item:nth-child(1),
  .stat-item:nth-child(2) {
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .footer-nexa__top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-nexa__brand {
    grid-column: 1 / -1;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .nexa-section {
    padding: 70px 0;
  }
  .nexa-section__container {
    padding: 0 20px;
  }
  .nexa-section__header {
    margin-bottom: 40px;
  }
  .nexa-services-grid,
  .why-grid,
  .nexa-testimonials-grid,
  .blog-grid,
  .awards-grid {
    grid-template-columns: 1fr;
  }
  .case-studies-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .stats-counter {
    grid-template-columns: 1fr 1fr;
  }
  .stat-item {
    padding: 28px 16px;
  }
  .footer-nexa__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-nexa__brand-tagline {
    font-size: 22px;
  }
  .contact-form-card {
    padding: 28px;
  }
  #beat-hero .hero-title {
    font-size: clamp(40px, 12vw, 72px);
  }
}

@media (max-width: 480px) {
  .nexa-section {
    padding: 50px 0;
  }
  .case-studies-grid {
    grid-template-columns: 1fr;
  }
  .stats-counter {
    grid-template-columns: 1fr;
  }
  .stat-item {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 24px 16px;
  }
  .stat-item:last-child {
    border-bottom: none;
  }
  .contact-form-card {
    padding: 20px;
  }
}

/* =========================================================================
   ADDITIONAL FEATURES
   ========================================================================= */

/* --- Team & Code Strength Split Section --- */
.nexa-team-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}
.nexa-team-left h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 24px;
}
.nexa-team-left h2 em {
  font-style: italic;
  color: #c5a059;
}
.team-bullets {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 32px 0;
}
.team-bullet {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.team-bullet__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ec652b;
  font-weight: bold;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.team-bullet__text h4 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.team-bullet__text p {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}
.tab-buttons-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.nexa-tab-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
}
.nexa-tab-btn:hover, .nexa-tab-btn.active {
  background: #ec652b;
  border-color: #ec652b;
  color: #fff;
}
.nexa-team-right {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 5/4;
  border: 1px solid rgba(255,255,255,0.08);
}
.nexa-team-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nexa-team-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,5,5,0.4) 0%, transparent 100%);
  pointer-events: none;
}

/* --- RFP (Request For Proposal) Banner --- */
.nexa-rfp-section {
  padding: 80px 0;
  background: linear-gradient(135deg, rgba(19, 88, 107, 0.95) 0%, rgba(236, 101, 43, 0.95) 100%);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nexa-rfp-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.2;
}
.nexa-rfp-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.nexa-rfp-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.nexa-rfp-subtitle {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 36px;
  line-height: 1.6;
}
.nexa-rfp-btn {
  display: inline-block;
  background: #fff;
  color: #050505;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  padding: 16px 36px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  transition: all 0.35s ease;
  border: 1px solid transparent;
}
.nexa-rfp-btn:hover {
  transform: translateY(-3px);
  background: #050505;
  color: #fff;
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

/* --- Testimonials Slider Carousel UI --- */
.nexa-testimonial-slider {
  position: relative;
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
}
.testimonial-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  gap: 24px;
}
.testimonial-slide {
  flex: 0 0 calc(50% - 12px);
  box-sizing: border-box;
}
.testimonial-nav-arrows {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
}
.nav-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.02);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.nav-arrow-btn:hover {
  background: #ec652b;
  border-color: #ec652b;
}
.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.testimonial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}
.testimonial-dot.active {
  background: #ec652b;
  width: 24px;
  border-radius: 4px;
}

@media (max-width: 1024px) {
  .nexa-team-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 768px) {
  .testimonial-slide {
    flex: 0 0 100%;
  }
}

/* =========================================================================
   MEGA MENU & CHAT WIDGET FEATURES
   ========================================================================= */

/* --- Mega Menu & Dropdown --- */
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-item-dropdown {
  position: relative;
}
.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  font-size: 14px;
  transition: color 0.3s ease;
  cursor: pointer;
  padding: 10px 0;
}
.nav-dropdown-trigger:hover {
  color: #fff;
}
.nav-dropdown-trigger i {
  transition: transform 0.3s ease;
}
.nav-item-dropdown:hover .nav-dropdown-trigger i {
  transform: rotate(180deg);
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(10, 10, 14, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 32px;
  width: 760px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.3s ease;
  z-index: 1000;
}
.mega-menu--narrow {
  width: 440px;
}
.nav-item-dropdown:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.mega-menu-grid--2cols {
  grid-template-columns: repeat(2, 1fr);
}
.mega-menu-col h4 {
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  color: #ec652b;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
  font-weight: 700;
}
.mega-menu-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mega-menu-col ul li {
  margin-bottom: 10px;
}
.mega-menu-col ul li a {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.3s ease, padding-left 0.3s ease;
  display: block;
}
.mega-menu-col ul li a:hover {
  color: #fff;
  padding-left: 4px;
}

/* --- Nexa Interactive Chat Widget --- */
.nexa-chat-widget {
  position: fixed;
  bottom: 100px;
  right: 28px;
  z-index: 9999;
}
.nexa-chat-bubble {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.nexa-chat-bubble:hover {
  transform: scale(1.08);
  box-shadow: 0 15px 40px rgba(37, 211, 102, 0.4);
}
.nexa-chat-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #13586b, #ec652b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #fff;
  font-size: 18px;
  position: relative;
}
.online-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4ade80;
  border: 2px solid #25d366;
  position: absolute;
  bottom: 0;
  right: 0;
}
.nexa-chat-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.nexa-chat-window {
  position: absolute;
  bottom: 70px;
  right: 0;
  width: 350px;
  background: rgba(10, 10, 14, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
}
.nexa-chat-window.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nexa-chat-header {
  background: linear-gradient(135deg, #13586b 0%, #ec652b 100%);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  position: relative;
}
.nexa-chat-header-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  position: relative;
}
.nexa-chat-header-avatar .online-indicator {
  border-color: #13586b;
}
.nexa-chat-header-info h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 2px 0;
}
.nexa-chat-header-info p {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  margin: 0;
}
.nexa-chat-close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  position: absolute;
  top: 16px;
  right: 20px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.nexa-chat-close-btn:hover {
  opacity: 1;
}

.nexa-chat-body {
  padding: 20px;
  max-height: 250px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255,255,255,0.01);
}
.nexa-chat-message {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 80%;
  word-wrap: break-word;
}
.nexa-chat-message.incoming {
  background: rgba(255,255,255,0.05);
  color: #fff;
  border-bottom-left-radius: 2px;
  align-self: flex-start;
}
.nexa-chat-message.outgoing {
  background: #25d366;
  color: #fff;
  border-bottom-right-radius: 2px;
  align-self: flex-end;
}

.nexa-chat-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(10,10,14,0.98);
}
.nexa-chat-footer input {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 8px 14px;
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.3s ease;
}
.nexa-chat-footer input:focus {
  border-color: #25d366;
}
.nexa-chat-footer button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #25d366;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.nexa-chat-footer button:hover {
  transform: scale(1.05);
}

/* =========================================================================
   FUTURISTIC SCROLLEffect HUD & SCANNER OVERLAYS
   ========================================================================= */

/* Hero HUD Brackets */
.hero-content {
  position: relative;
}

.hero-hud-corners {
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  pointer-events: none;
}

.hud-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--color-callout-cyan);
  opacity: 0.85;
}

.hud-corner.tl {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.hud-corner.tr {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}

.hud-corner.bl {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}

.hud-corner.br {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

/* Cyber Scanning Line */
.laser-scanner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(236, 101, 43, 0) 0%, var(--color-action-orange) 50%, rgba(236, 101, 43, 0) 100%);
  opacity: 0.65;
  box-shadow: 0 0 10px var(--color-action-orange), 0 0 20px var(--color-action-orange);
  animation: scanLoop 4.5s infinite linear;
  pointer-events: none;
  z-index: 5;
}

@keyframes scanLoop {
  0% {
    top: 0%;
  }
  50% {
    top: 100%;
  }
  100% {
    top: 0%;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.35);
    opacity: 1;
    box-shadow: 0 0 8px var(--color-action-orange);
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}