/*
Theme Name: GlobalMente V2.0
Theme URI: https://globalmente.it
Author: GlobalMente
Author URI: https://globalmente.it
Description: A high-performance Industrial Cyber-Minimalist framework
 engineered for B2B Revenue Infrastructure and Digital Transformation ecosystems.
 Built for scalability and technical SEO dominance. Features AI chat integration
 powered by Gemini API with streaming responses and lead capture, multi-language
 support (IT/EN), business segmentation, GDPR-compliant data collection,
 certified partner carousel with 26 technology partners, interactive Strategy
 section with 10 interconnected pillars, bento-grid service modals, mobile
 performance optimisations (particle/Lottie disabled on mobile, deferred carousel,
 prefers-reduced-motion support), and admin leads dashboard.
 Designed for executive-level clarity and institutional-grade reliability.
 Typography: Monospaced fonts for data/technical elements paired with heavy
 Neo-Grotesque headers (Inter, Helvetica Now, Akzidenz-Grotesk).
 Palette: Deep blacks (#0A0A0A), surgical whites, and Cyber Blue (#33a9db)
 accent colours to mimic industrial interfaces.
 Motion: High-precision micro-interactions with zero "fluff" —
 transitions feel mechanical and intentional.
Version: 2.0 | Released: 3 May 2026
Version: 2.0
Domain Path: /languages
*/

html {
  overflow-x: hidden;
}

body {
  background-color: #000000;
  color: #fff;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  cursor: none;
}

.material-symbols-outlined {
  font-size: inherit;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  max-width: 1em;
  max-height: 1em;
  visibility: hidden;
}

.fonts-loaded .material-symbols-outlined {
  visibility: visible;
}

::selection {
  background-color: rgba(51, 169, 219, 0.3);
}

.crt-overlay {
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.glass-container {
  background: rgba(18, 28, 33, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(51, 169, 219, 0.3);
  box-shadow: 0 0 40px rgba(51, 169, 219, 0.1);
}

.glow-border {
  box-shadow: 0 0 15px rgba(51, 169, 219, 0.4);
  border-color: rgba(51, 169, 219, 0.8);
}

.cyber-cell {
  position: relative;
  border: 1px solid rgba(51, 169, 219, 0.25);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.1s ease;
  will-change: transform;
}

.cyber-cell:hover {
  border-color: rgba(51, 169, 219, 0.7);
  background: linear-gradient(135deg, rgba(51, 169, 219, 0.08), rgba(255, 255, 255, 0.06));
  transform: translateY(-0.35rem);
  box-shadow: 0 0 25px rgba(51, 169, 219, 0.25), 0 8px 30px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(51, 169, 219, 0.03);
}

.cyber-cell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(51, 169, 219, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}

.cyber-cell:hover::before {
  opacity: 1;
}

/* --- cyber-cell :active state for touch devices ---
   Mirrors :hover so segment-selection cards and service
   bento boxes give visible tap feedback on phones/tablets.
   bento-card .bento-icon gets the same icon tint that the
   Tailwind group-hover rule provides on pointer devices.
   NOTE: iOS Safari < 13 suppresses :active on non-anchor
   elements unless a touchstart listener exists in the page.
   A no-op document touchstart handler in js/main.js
   (DOMContentLoaded → "iOS WebKit :active guard") ensures
   these rules fire on older WebKit-based browsers.
   .is-pressed is a JS-driven fallback for pre-Chromium 80
   Android WebView where :active transitions are unreliable. */
.cyber-cell:active,
.cyber-cell.is-pressed {
  border-color: rgba(51, 169, 219, 0.7);
  background: linear-gradient(135deg, rgba(51, 169, 219, 0.08), rgba(255, 255, 255, 0.06));
  box-shadow: 0 0 25px rgba(51, 169, 219, 0.25), 0 8px 30px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(51, 169, 219, 0.03);
  transform: scale(0.97);
}
.cyber-cell:active::before,
.cyber-cell.is-pressed::before {
  opacity: 1;
}
.bento-card:active .bento-icon,
.bento-card.is-pressed .bento-icon {
  color: rgba(51, 169, 219, 0.4) !important;
}

.heritage-scroll {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.heritage-scroll::-webkit-scrollbar {
  display: none;
}

/* =====================================================
   SECTION: CERTIFIED PARTNERS – scrolling beam strip
   ===================================================== */

.gm-partner-stream {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: visible;
  display: flex;
  align-items: center;
}

.gm-partner-line {
  display: flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  will-change: transform;
  flex-shrink: 0;
  min-width: max-content;
}

.gm-partner-line.dragging,
.gm-partner-line:active {
  cursor: grabbing;
}

/* --- Wrapper: owns the flex slot --- */
.gm-partner-card-wrapper {
  position: relative;
  width: 180px;
  height: 110px;
  flex-shrink: 0;
}

/* --- Shared card layer base --- */
.gm-partner-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 110px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Normal card (logo + name): visible to the RIGHT of the beam --- */
.gm-card-normal {
  z-index: 2;
  background: rgba(255, 255, 255, 0.04);
  clip-path: inset(0 0 0 var(--gm-clip, 0%));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease;
}

.gm-card-normal::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
  pointer-events: none;
}

/* --- Code card (ASCII/code view): visible to the LEFT of the beam --- */
.gm-card-code {
  z-index: 1;
  background: rgba(0, 0, 0, 0.85);
  clip-path: inset(0 calc(100% - var(--gm-clip, 0%)) 0 0);
  border-color: rgba(51, 169, 219, 0.15);
}

/* Inner content of normal card */
.gm-partner-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 14px 16px;
  width: 100%;
}

.gm-partner-logo-area {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
}

.gm-partner-logo-img {
  max-width: 110px;
  max-height: 42px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.88);
}

.gm-partner-logo-placeholder {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(51, 169, 219, 0.08);
  border: 1px solid rgba(51, 169, 219, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: rgba(51, 169, 219, 0.65);
  letter-spacing: 0.05em;
}

.gm-partner-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.80);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 148px;
}

/* --- Sector profile tooltip overlay --- */
.gm-partner-sector {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 500;
  color: rgba(51, 169, 219, 0.9);
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.3;
  border-top: 1px solid rgba(51, 169, 219, 0.18);
  border-radius: 0 0 14px 14px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 3;
  white-space: normal;
  word-break: break-word;
}

.gm-partner-card-wrapper:hover .gm-partner-sector {
  opacity: 1;
  transform: translateY(0);
}

/* --- Code content (ASCII / code text layer) --- */
.gm-code-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 8px 7px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 9px;
  line-height: 1.45;
  color: rgba(51, 169, 219, 0.55);
  white-space: pre;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.85) 40%,
    rgba(0, 0, 0, 0.5) 70%,
    rgba(0, 0, 0, 0.15) 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.85) 40%,
    rgba(0, 0, 0, 0.5) 70%,
    rgba(0, 0, 0, 0.15) 90%,
    transparent 100%
  );
  animation: gm-code-glitch 0.12s infinite linear alternate-reverse;
}

@keyframes gm-code-glitch {
  0%   { opacity: 1; }
  14%  { opacity: 0.9; }
  15%  { opacity: 1; }
  48%  { opacity: 0.85; }
  50%  { opacity: 1; }
  98%  { opacity: 0.92; }
  100% { opacity: 1; }
}


@media (max-width: 768px) {
  .gm-partner-card-wrapper,
  .gm-partner-card {
    width: 148px;
    height: 94px;
  }
  .gm-partner-logo-placeholder {
    width: 38px;
    height: 38px;
    font-size: 10px;
  }
  .gm-partner-logo-img {
    max-width: 88px;
    max-height: 34px;
  }
  .gm-code-content {
    font-size: 8px;
  }
}

.bento-card .bento-icon {
  transition: all 0.5s ease;
}

.bento-card:hover .bento-icon {
  transform: scale(1.2) rotate(5deg);
}

#service-modal {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#modal-panel {
  transform: translateX(100%);
  transition: transform 0.5s ease-out;
}

#modal-body .modal-section-title {
  color: #33a8db;
  font-size: 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 0.75rem;
}

#modal-body .modal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

#modal-body .modal-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

#modal-body .modal-list li::before {
  content: "›";
  color: #33a8db;
  font-weight: bold;
  flex-shrink: 0;
}

#modal-body .modal-outcome {
  padding: 1rem;
  border: 1px solid rgba(51, 169, 219, 0.2);
  background: rgba(51, 169, 219, 0.05);
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.cyber-menu-item {
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
}

.cyber-menu-item:hover {
  color: #33a9db;
  background-color: rgba(51, 169, 219, 0.1);
  text-shadow: 0 0 8px rgba(51, 169, 219, 0.6);
}

.isometric-container {
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  transition: transform 0.1s ease-out;
  transform-style: preserve-3d;
}

#background-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
}

.kinetic-text {
  color: #fff;
  transition: color 0.7s ease-out;
}

.kinetic-text.active {
  color: #33a9db;
  letter-spacing: normal;
}

.chat-message-content {
  font-size: 0.9rem;
  line-height: 1.8;
  font-family: 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.01em;
}

.chat-message-content p {
  margin-bottom: 0.5rem;
}

.chat-message-content p:last-child {
  margin-bottom: 0;
}

.chat-message-content strong {
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 6px rgba(51, 169, 219, 0.15);
}

.chat-message-content em {
  color: rgba(51, 169, 219, 0.9);
  font-style: italic;
}

.chat-message-content h1,
.chat-message-content h2,
.chat-message-content h3 {
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  margin-top: 0.75rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid rgba(51, 169, 219, 0.15);
  padding-bottom: 0.25rem;
}

.chat-message-content h1 { font-size: 1.15rem; }
.chat-message-content h2 { font-size: 1.05rem; }
.chat-message-content h3 { font-size: 0.95rem; border-bottom: none; }

.chat-message-content ul,
.chat-message-content ol {
  margin-bottom: 0.5rem;
  margin-top: 0.2rem;
  padding-left: 1.25rem;
  list-style-position: outside;
}

.chat-message-content ul {
  list-style-type: none;
}

.chat-message-content ol {
  list-style-type: decimal;
}

.chat-message-content ul > li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.2rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

.chat-message-content ul > li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: #33a9db;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.8rem;
}

.chat-message-content ol > li {
  margin-bottom: 0.2rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

.chat-message-content ol > li::marker {
  color: #33a9db;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

.chat-message-content code {
  background-color: rgba(51, 169, 219, 0.08);
  border: 1px solid rgba(51, 169, 219, 0.15);
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: #33a9db;
}

.chat-message-content blockquote {
  border-left: 3px solid #33a9db;
  padding: 0.5rem 1rem;
  margin: 0.75rem 0;
  background-color: rgba(51, 169, 219, 0.05);
  border-radius: 0 0.25rem 0.25rem 0;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
}

.chat-message-content hr {
  border: none;
  border-top: 1px solid rgba(51, 169, 219, 0.2);
  margin: 1rem 0;
}

/* --- Intro Header Section (Scoped) --- */
#intro-header {
  align-items: center;
  display: flex;
  height: 60vh;
  min-height: 350px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

@media (min-width: 768px) {
  #intro-header {
    height: 80vh;
  }
}

#intro-header::before {
  animation: fade-slide-down 2s 500ms cubic-bezier(0, 0.5, 0, 1) forwards;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8)),
    url('https://images.unsplash.com/photo-1487525219605-eadb39ae229c?ixlib=rb-0.3.5&auto=format&fit=crop&w=1280&q=60') no-repeat bottom;
  background-size: cover;
  bottom: 0;
  content: "";
  left: -5%;
  opacity: 0;
  position: absolute;
  right: -5%;
  top: 0;
  z-index: -1;
}

#intro-header::after {
  animation: rotate-up 500ms 500ms cubic-bezier(0, 0.5, 0, 1) forwards;
  background: #000;
  content: "";
  height: 40rem;
  left: -5%;
  position: absolute;
  right: -5%;
  top: 90%;
  transform-origin: 0 0;
  z-index: 0;
}

#intro-header-content {
  margin-top: -10%;
  overflow: visible;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 10;
}

#intro-header h1 {
  color: #33a8db;
  margin: 0;
  opacity: 0;
  animation: fade-slide-down-rotate 2s 2s cubic-bezier(0, 0.5, 0, 1) forwards, glow-loop 3s infinite alternate;
  animation-delay: 800ms, 3s;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.5rem, 8vw + 1vmin, 8rem);
  font-weight: 700;
  margin-bottom: 2.5%;
  letter-spacing: -0.05em;
}

#intro-header h3 {
  color: #fff;
  margin: 0;
  opacity: 0;
  animation: fade-slide-up 3s 3s cubic-bezier(0, 0.5, 0, 1) forwards;
  animation-delay: 100ms;
  font-size: clamp(0.6rem, 1.25vw + 0.8vmin, 1.5rem);
  font-weight: 200;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  #intro-header h3 {
    letter-spacing: 0.5em;
  }
}

#intro-header h3 span,
.intelligence-hub-glow {
  color: #33a8db;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2em;
  letter-spacing: 0;
  opacity: 0.8;
  padding: 0 0.25em;
  text-transform: none;
  animation: glow-loop-sub 3s infinite alternate;
  animation-delay: 4s;
}

#intro-header h4 {
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 2rem;
  opacity: 0;
  animation: fade-slide-up 3s 3.5s cubic-bezier(0, 0.5, 0, 1) forwards;
}

/* Animations */
@keyframes fade-slide-down {
  0% {
    opacity: 0;
    transform: translateY(-4rem);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-slide-down-rotate {
  0% {
    opacity: 0;
    transform: translateY(-4rem);
  }

  100% {
    opacity: 1;
    transform: rotate(-4deg);
  }
}

@keyframes fade-slide-up {
  0% {
    opacity: 0;
    transform: translateY(4rem);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes rotate-up {
  100% {
    transform: rotateZ(-4deg);
  }
}

@keyframes glow-loop {
  from {
    text-shadow: 0 0 15px rgba(51, 169, 219, 0.3), 0 0 30px rgba(51, 169, 219, 0.1);
  }

  to {
    text-shadow: 0 0 40px rgba(51, 169, 219, 1), 0 0 80px rgba(51, 169, 219, 0.6), 0 0 120px rgba(51, 169, 219, 0.3);
  }
}

@keyframes glow-loop-sub {
  from {
    text-shadow: 0 0 8px rgba(51, 169, 219, 0.1);
    filter: brightness(1);
  }

  to {
    text-shadow: 0 0 20px rgba(51, 169, 219, 0.6), 0 0 40px rgba(51, 169, 219, 0.3);
    filter: brightness(1.2);
  }
}

/* Cursor Styles */
#cursor-dot,
#cursor-outline {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 9999;
  pointer-events: none;
}

#cursor-dot {
  width: 8px;
  height: 8px;
  background-color: white;
}

#cursor-outline {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(51, 169, 219, 0.5);
  transition: width 0.2s, height 0.2s, background-color 0.2s;
}

body.hovering #cursor-outline {
  width: 60px;
  height: 60px;
  background-color: rgba(51, 169, 219, 0.1);
  border-color: #33a9db;
}

/* Catchphrase Rotator */
.catchphrase-line {
  transition: opacity 0.6s ease, transform 0.6s ease;
  opacity: 0;
  transform: translateY(10px);
}

.catchphrase-line.visible {
  opacity: 1;
  transform: translateY(0);
}

.catchphrase-line.exit {
  opacity: 0;
  transform: translateY(-10px);
}

#catchphrase-sub .hub-glow {
  color: #33a9db;
  font-weight: 600;
  text-shadow: 0 0 12px rgba(51, 169, 219, 0.4);
}

/* Segment Cards */
.segment-card {
  min-height: 140px;
}

.segment-card.segment-selected {
  border-color: #33a9db;
  background: linear-gradient(135deg, rgba(51, 169, 219, 0.15), rgba(51, 169, 219, 0.05));
  box-shadow: 0 0 30px rgba(51, 169, 219, 0.3), inset 0 0 20px rgba(51, 169, 219, 0.05);
  transform: scale(1.03);
}

.segment-card.segment-dimmed {
  opacity: 0.25;
  pointer-events: none;
  transform: scale(0.97);
}

.lang-btn {
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
}

.lang-btn.lang-active {
  background-color: #33a9db;
  color: #000;
  font-weight: 700;
}

.lang-btn:active {
  background-color: rgba(51, 169, 219, 0.25);
  color: #fff;
  transform: scale(0.93);
}
.lang-btn.lang-active:active {
  background-color: #2290bb;
  color: #000;
  transform: scale(0.93);
}

.intelligence-phase-offset {
  top: 40px;
}

.lottie-fullsize {
  width: 100%;
  height: 100%;
}

.catchphrase-rotator-height {
  min-height: 130px;
}

.chat-greeting-delay {
  animation-delay: 0.2s;
}

.dot-grid-bg {
  background-image: radial-gradient(#33a9db 1px, transparent 1px);
  background-size: 40px 40px;
}

.lon-accent {
  color: #e8564a;
}

.iubenda-hidden-link {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.blueprint-panel-closed {
  transform: translateX(100%);
}

.gdpr-gate-highlight {
  animation: gdpr-soft-pulse 2.5s ease-in-out infinite;
}

@keyframes gdpr-soft-pulse {
  0%, 100% { border-color: rgba(51, 169, 219, 0.2); background-color: rgba(51, 169, 219, 0.03); }
  50% { border-color: rgba(51, 169, 219, 0.45); background-color: rgba(51, 169, 219, 0.08); }
}

.gdpr-gate-highlight.gdpr-checked {
  animation: none;
  border-color: rgba(34, 197, 94, 0.3);
  background-color: rgba(34, 197, 94, 0.05);
}

.gdpr-gate-flash {
  animation: gdpr-flash 0.6s ease-in-out 2;
}

@keyframes gdpr-flash {
  0%, 100% { border-color: rgba(51, 169, 219, 0.3); background-color: rgba(51, 169, 219, 0.05); }
  50% { border-color: rgba(51, 169, 219, 0.7); background-color: rgba(51, 169, 219, 0.15); box-shadow: 0 0 12px rgba(51, 169, 219, 0.2); }
}

#send-btn:active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.10);
  transform: scale(0.88);
}

#voice-btn:active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.12);
  transform: scale(0.88);
}

#voice-btn.voice-active {
  color: #ef4444;
  animation: voice-pulse 1s ease-in-out infinite;
}

#voice-btn.voice-active:active {
  background-color: rgba(239, 68, 68, 0.18);
  transform: scale(0.88);
}

@keyframes voice-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Strategy Section: Orbital Container */
.strategy-orbital {
  background: radial-gradient(ellipse at center, rgba(51, 169, 219, 0.04) 0%, transparent 70%);
  cursor: crosshair;
}

.strategy-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(8, 8, 12, 0.92);
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s;
  user-select: none;
  white-space: nowrap;
  padding: 11px 20px;
  text-align: center;
}

.strategy-chip:hover {
  color: #33a8db;
  border-color: rgba(51, 169, 219, 0.5);
  background: rgba(51, 169, 219, 0.08);
  box-shadow: 0 0 20px rgba(51, 169, 219, 0.25), 0 0 40px rgba(51, 169, 219, 0.08);
  z-index: 15;
}

.strategy-chip-active {
  color: #33a8db;
  border-color: rgba(51, 169, 219, 0.6);
  background: rgba(51, 169, 219, 0.12);
  box-shadow: 0 0 24px rgba(51, 169, 219, 0.3), 0 0 48px rgba(51, 169, 219, 0.1);
  z-index: 15;
}

@media (min-width: 768px) {
  .strategy-chips-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 440px;
  }

  .strategy-chip-abs {
    position: absolute;
    will-change: transform;
  }
}

@media (max-width: 767px) {
  .strategy-chips-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    width: 100%;
    box-sizing: border-box;
  }

  .strategy-chip {
    text-align: center;
    font-size: 11px;
    padding: 10px 12px;
    white-space: normal;
    word-break: break-word;
    width: 100%;
    box-sizing: border-box;
  }

  .strategy-orbital {
    cursor: default;
  }

  /* Prevent strategy section from causing horizontal scroll */
  section:has(.strategy-chips-container),
  div:has(> .strategy-chips-container) {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

.strategy-panel-open {
  animation: panelFadeIn 0.3s ease-out;
}

@keyframes panelFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ========================================
   Static Page Template (page.php)
   ======================================== */

.gm-page-body h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.gm-page-body h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.gm-page-body h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #33a9db;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.gm-page-body p {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  line-height: 1.85;
  margin-bottom: 1.25rem;
}

.gm-page-body a {
  color: #33a9db;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.gm-page-body a:hover {
  color: #fff;
}

.gm-page-body ul,
.gm-page-body ol {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  line-height: 1.85;
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.gm-page-body ul {
  list-style-type: disc;
}

.gm-page-body ol {
  list-style-type: decimal;
}

.gm-page-body li {
  margin-bottom: 0.5rem;
}

.gm-page-body li::marker {
  color: #33a9db;
}

.gm-page-body blockquote {
  border-left: 3px solid #33a9db;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: rgba(51,169,219,0.05);
  border-radius: 0 8px 8px 0;
  color: rgba(255,255,255,0.8);
  font-style: italic;
}

.gm-page-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  margin: 1.5rem 0;
}

.gm-page-body pre {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
}

.gm-page-body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  background: rgba(255,255,255,0.06);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  color: #33a9db;
}

.gm-page-body pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.gm-page-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}

.gm-page-body th {
  text-align: left;
  font-weight: 600;
  color: #33a9db;
  border-bottom: 2px solid rgba(51,169,219,0.3);
  padding: 0.75rem 1rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gm-page-body td {
  color: rgba(255,255,255,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0.75rem 1rem;
}

.gm-page-body tr:hover td {
  background: rgba(51,169,219,0.03);
}

.gm-page-body hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 2.5rem 0;
}

.gm-page-body strong {
  color: rgba(255,255,255,0.95);
  font-weight: 600;
}

.gm-page-body em {
  color: rgba(255,255,255,0.8);
}

.gm-page-body .wp-block-image {
  margin: 2rem 0;
}

.gm-page-body .wp-block-buttons {
  margin: 2rem 0;
}

.gm-page-body .wp-block-button__link {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: rgba(51,169,219,0.15);
  border: 1px solid rgba(51,169,219,0.4);
  color: #33a9db;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s;
}

.gm-page-body .wp-block-button__link:hover {
  background: rgba(51,169,219,0.25);
  border-color: rgba(51,169,219,0.7);
  color: #fff;
}

/* --- Hide background canvas on mobile (particle system not running) --- */
@media (max-width: 767px) {
  #background-canvas {
    display: none;
  }
}

/* --- Mobile: static AI icon replacing Lottie --- */
.gm-ai-mobile-icon {
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1.5px solid rgba(51, 169, 219, 0.35);
  background: radial-gradient(circle at 50% 50%, rgba(51, 169, 219, 0.08) 0%, transparent 70%);
  animation: gm-icon-pulse 3s ease-in-out infinite;
}

.gm-ai-mobile-icon .material-symbols-outlined {
  font-size: 36px;
  color: rgba(51, 169, 219, 0.75);
}

@keyframes gm-icon-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(51, 169, 219, 0.15); }
  50%       { box-shadow: 0 0 0 10px rgba(51, 169, 219, 0); }
}

/* ============================================================
   prefers-reduced-motion — disable all non-essential motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .gm-ai-mobile-icon {
    animation: none;
  }

  .gm-partner-sector {
    transition: none;
  }

  .catchphrase-line {
    transition: none;
  }

  lottie-player {
    display: none;
  }
}

/* =====================================================
   THEME TOGGLE — icon visibility per active theme
   ===================================================== */
.gm-theme-icon-light { display: none; }
.gm-theme-icon-dark  { display: inline-block; }
[data-theme="light"] .gm-theme-icon-light { display: inline-block; }
[data-theme="light"] .gm-theme-icon-dark  { display: none; }

/* =====================================================
   LIGHT THEME — dedicated palette (WCAG AA+)
   Brand primary #33a9db is preserved (works on both).
   Backgrounds, surfaces, text, borders, and effect
   intensity are tuned for light backgrounds.
   ===================================================== */
[data-theme="light"] {
  color-scheme: light;
}

/* --- Base body & root surfaces --- */
[data-theme="light"] body {
  background-color: #f5f7fa;
  color: #0d141a;
}
[data-theme="light"] .bg-background-dark,
[data-theme="light"] [class*="bg-background-dark"] {
  background-color: #f5f7fa !important;
}

/* --- Header / mobile menu --- */
[data-theme="light"] #main-header {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-bottom-color: rgba(13, 20, 26, 0.10) !important;
}
[data-theme="light"] #mobile-menu {
  background-color: rgba(245, 247, 250, 0.97) !important;
  border-bottom-color: rgba(13, 20, 26, 0.10) !important;
}

/* --- Tailwind utility overrides (most-used) --- */
[data-theme="light"] .text-white { color: #0d141a !important; }
[data-theme="light"] .text-white\/90 { color: rgba(13, 20, 26, 0.92) !important; }
[data-theme="light"] .text-white\/80 { color: rgba(13, 20, 26, 0.85) !important; }
[data-theme="light"] .text-white\/70 { color: rgba(13, 20, 26, 0.72) !important; }
[data-theme="light"] .text-white\/60 { color: rgba(13, 20, 26, 0.62) !important; }
[data-theme="light"] .text-white\/50 { color: rgba(13, 20, 26, 0.55) !important; }
[data-theme="light"] .text-white\/40 { color: rgba(13, 20, 26, 0.48) !important; }
[data-theme="light"] .text-white\/30 { color: rgba(13, 20, 26, 0.40) !important; }
[data-theme="light"] .text-white\/20 { color: rgba(13, 20, 26, 0.32) !important; }
[data-theme="light"] .text-white\/10 { color: rgba(13, 20, 26, 0.22) !important; }
[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-gray-400 { color: rgba(13, 20, 26, 0.65) !important; }

[data-theme="light"] .border-white\/10 { border-color: rgba(13, 20, 26, 0.18) !important; }
[data-theme="light"] .border-white\/20 { border-color: rgba(13, 20, 26, 0.24) !important; }
[data-theme="light"] .border-white\/5  { border-color: rgba(13, 20, 26, 0.15) !important; }

[data-theme="light"] .bg-white\/5  { background-color: rgba(13, 20, 26, 0.03) !important; }
[data-theme="light"] .bg-white\/10 { background-color: rgba(13, 20, 26, 0.06) !important; }
[data-theme="light"] .bg-black\/40 { background-color: rgba(255, 255, 255, 0.50) !important; }
[data-theme="light"] .bg-black\/50 { background-color: rgba(255, 255, 255, 0.60) !important; }
[data-theme="light"] .bg-black\/60 { background-color: rgba(255, 255, 255, 0.70) !important; }
[data-theme="light"] .bg-black\/70 { background-color: rgba(255, 255, 255, 0.80) !important; }
[data-theme="light"] .bg-black\/80 { background-color: rgba(255, 255, 255, 0.85) !important; }
[data-theme="light"] .bg-black\/90 { background-color: rgba(255, 255, 255, 0.92) !important; }
[data-theme="light"] .bg-black\/95 { background-color: rgba(255, 255, 255, 0.96) !important; }
[data-theme="light"] .bg-black     { background-color: #ffffff !important; }

/* The "Talk to Specialist" button: keep brand bg with white text on light */
[data-theme="light"] .bg-primary.text-black { color: #ffffff !important; }
[data-theme="light"] .hover\:text-primary:hover { color: #33a9db !important; }

/* --- Selection --- */
[data-theme="light"] ::selection {
  background-color: rgba(51, 169, 219, 0.25);
  color: #0d141a;
}

/* --- Glass / cyber surfaces --- */
[data-theme="light"] .glass-container {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(51, 169, 219, 0.25);
  box-shadow: 0 4px 30px rgba(13, 20, 26, 0.08);
}
[data-theme="light"] .cyber-cell {
  border: 1px solid rgba(13, 20, 26, 0.08);
  background: linear-gradient(135deg, rgba(13, 20, 26, 0.03), rgba(13, 20, 26, 0.01));
}
[data-theme="light"] .cyber-cell:hover {
  border-color: rgba(51, 169, 219, 0.55);
  background: linear-gradient(135deg, rgba(51, 169, 219, 0.06), rgba(13, 20, 26, 0.02));
  box-shadow: 0 6px 24px rgba(13, 20, 26, 0.10), 0 0 18px rgba(51, 169, 219, 0.15);
}
[data-theme="light"] .cyber-cell:active,
[data-theme="light"] .cyber-cell.is-pressed {
  border-color: rgba(51, 169, 219, 0.55);
  background: linear-gradient(135deg, rgba(51, 169, 219, 0.06), rgba(13, 20, 26, 0.02));
  box-shadow: 0 6px 24px rgba(13, 20, 26, 0.10), 0 0 18px rgba(51, 169, 219, 0.15);
  transform: scale(0.97);
}
[data-theme="light"] .bento-card:active .bento-icon,
[data-theme="light"] .bento-card.is-pressed .bento-icon {
  color: rgba(51, 169, 219, 0.4) !important;
}
[data-theme="light"] .glow-border {
  box-shadow: 0 0 12px rgba(51, 169, 219, 0.28);
  border-color: rgba(51, 169, 219, 0.6);
}

/* --- Custom cursor: dark in light mode --- */
[data-theme="light"] #cursor-dot { background-color: #0d141a !important; }
[data-theme="light"] #cursor-outline { border-color: rgba(13, 20, 26, 0.6) !important; }

/* --- Particles: tone down on bright bg --- */
[data-theme="light"] #particle-canvas,
[data-theme="light"] canvas[id*="particle"] { opacity: 0.45; }

/* --- CRT scanline overlay: invisible on light --- */
[data-theme="light"] .crt-overlay { display: none; }

/* --- Partner carousel cards --- */
[data-theme="light"] .gm-partner-card {
  border-color: rgba(13, 20, 26, 0.10);
}
[data-theme="light"] .gm-card-normal {
  background: rgba(255, 255, 255, 0.92);
}
[data-theme="light"] .gm-card-code {
  background: rgba(13, 20, 26, 0.92);
  border-color: rgba(51, 169, 219, 0.30);
}
[data-theme="light"] .gm-partner-logo-img {
  /* dark logos on light card */
  filter: brightness(0) opacity(0.85);
}
[data-theme="light"] .gm-partner-name {
  color: rgba(13, 20, 26, 0.78);
}
[data-theme="light"] .gm-partner-logo-placeholder {
  background: rgba(51, 169, 219, 0.10);
  border-color: rgba(51, 169, 219, 0.30);
  color: rgba(51, 169, 219, 0.85);
}

/* --- Generic modal/drawer panels (slide-overs use rgba black bg) --- */
[data-theme="light"] [class*="bg-black"][class*="backdrop-blur"] {
  background-color: rgba(255, 255, 255, 0.92) !important;
}

/* =====================================================
   THEME VARIABLES — power Tailwind background-dark token
   and partner-carousel edge fades from a single source.
   ===================================================== */
:root {
  --gm-bg-dark: #000000;
  --gm-fade-edge: #000000;
}
[data-theme="light"] {
  --gm-bg-dark: #f5f7fa;
  --gm-fade-edge: #f5f7fa;
}

/* Carousel edge fade-out gradients (themed) */
.gm-partner-fade-left {
  background: linear-gradient(to right, var(--gm-fade-edge) 0%, transparent 100%);
}
.gm-partner-fade-right {
  background: linear-gradient(to left, var(--gm-fade-edge) 0%, transparent 100%);
}

/* Body fallback bg in case Tailwind hasn't booted yet */
[data-theme="light"] html { background-color: #f5f7fa; }

/* Active language pill — keep blue bg, but use white text on light theme */
[data-theme="light"] .lang-btn.lang-active {
  background-color: #33a9db;
  color: #ffffff;
}
[data-theme="light"] .lang-btn { color: rgba(13, 20, 26, 0.55); }

/* Chat input shell uses arbitrary Tailwind hex — override to light surface */
[data-theme="light"] .bg-\[\#121c21\] {
  background-color: rgba(255, 255, 255, 0.92) !important;
}
[data-theme="light"] .placeholder\:text-white\/20::placeholder {
  color: rgba(13, 20, 26, 0.40) !important;
}

/* The Lottie ai_core renders white particles — fade slightly on light bg */
[data-theme="light"] lottie-player { opacity: 0.55; }

/* Restore tighter text contrast on the very low-opacity hero accents */
[data-theme="light"] .text-white\/20 { color: rgba(13, 20, 26, 0.55) !important; }
[data-theme="light"] .text-primary\/50 { color: rgba(51, 169, 219, 0.75) !important; }

/* =====================================================
   LIGHT THEME — high-specificity container overrides
   Tailwind cannot inject alpha into a CSS var color,
   so opacity-suffixed bg-background-dark/XX classes
   keep evaluating to rgba(0,0,0,0.XX). Override directly.
   ===================================================== */
[data-theme="light"] #intelligence-container {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(13, 20, 26, 0.08);
  box-shadow: 0 10px 40px rgba(13, 20, 26, 0.10);
}
[data-theme="light"] #chat-interface,
[data-theme="light"] [class*="bg-background-dark\/"] {
  background-color: rgba(245, 247, 250, 0.96) !important;
}
[data-theme="light"] .bg-background-dark\/95 { background-color: rgba(245, 247, 250, 0.96) !important; }
[data-theme="light"] .bg-background-dark\/90 { background-color: rgba(245, 247, 250, 0.92) !important; }
[data-theme="light"] .bg-background-dark\/80 { background-color: rgba(245, 247, 250, 0.85) !important; }
[data-theme="light"] .bg-background-dark\/70 { background-color: rgba(245, 247, 250, 0.75) !important; }
[data-theme="light"] .bg-background-dark\/50 { background-color: rgba(245, 247, 250, 0.55) !important; }

/* Hero radial gradient uses Tailwind from-/via-/to- which won't pick up the var
   inside a gradient with alpha — neutralise the dark stops in light mode. */
[data-theme="light"] [class*="from-primary\/10"][class*="via-background-dark"] {
  background-image: radial-gradient(circle at center,
    rgba(51, 169, 219, 0.08),
    rgba(245, 247, 250, 0) 60%) !important;
}

/* Bottom accent bar under section headings */
[data-theme="light"] .bg-primary { background-color: #33a9db !important; }

/* Strategy-orbital dark inner panel */
[data-theme="light"] #strategy-orbital,
[data-theme="light"] #strategy-panel {
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(51, 169, 219, 0.25) !important;
}

/* Modal backdrops — were dark, make them light frosted */
[data-theme="light"] #modal-backdrop {
  background-color: rgba(13, 20, 26, 0.45) !important;
}

/* Chat history readable on light */
[data-theme="light"] .chat-message-content { color: rgba(13, 20, 26, 0.92); }
[data-theme="light"] .chat-message-content strong { color: #0d141a; }

/* Heritage section bg */
[data-theme="light"] #heritage,
[data-theme="light"] #partners,
[data-theme="light"] #strategy,
[data-theme="light"] #contact {
  background-color: #f5f7fa !important;
  border-top-color: rgba(13, 20, 26, 0.08) !important;
}

/* Heritage timeline dots have bg-black */
[data-theme="light"] .bg-black { background-color: #f5f7fa !important; }

/* =====================================================
   LIGHT THEME — neutralise hero gradients & decorative
   background-images that bake in dark stops via Tailwind.
   ===================================================== */
[data-theme="light"] #hero [class*="bg-[radial-gradient"],
[data-theme="light"] #hero [class*="from-"][class*="background-dark"],
[data-theme="light"] #hero [class*="via-background-dark"],
[data-theme="light"] #hero [class*="to-background-dark"] {
  background-image: radial-gradient(circle at center, rgba(51, 169, 219, 0.06), rgba(245, 247, 250, 0)) !important;
  --tw-gradient-from: rgba(51, 169, 219, 0.06) !important;
  --tw-gradient-via: transparent !important;
  --tw-gradient-to: transparent !important;
  --tw-gradient-stops: rgba(51, 169, 219, 0.06), transparent !important;
}

/* Body & root wrapper: lock to light bg in light mode (defeats Tailwind alpha-var quirks) */
[data-theme="light"] body,
[data-theme="light"] body > .group\/design-root,
[data-theme="light"] body > div[class*="bg-background-dark"] {
  background-color: #f5f7fa !important;
  background-image: none !important;
}

/* Hero section guarantees no dark gradient leaks through */
[data-theme="light"] #hero {
  background-color: transparent !important;
}

/* THE WEDGE: #intro-header::after is a 40rem-tall hard-coded black
   pseudo-element rotated -4deg sitting under the intro hero. */
[data-theme="light"] #intro-header::after {
  background: #f5f7fa !important;
}

/* =====================================================
   LIGHT THEME — round 2 fixes (subheaders, chips, menu)
   ===================================================== */

/* Hero subheader text "DIGITAL", "AGENCY", "BUILT IN THE ANALOG ERA"
   were hard-coded white/rgba in #intro-header h3/h4 */
[data-theme="light"] #intro-header h3 {
  color: rgba(13, 20, 26, 0.85) !important;
}
[data-theme="light"] #intro-header h3 span,
[data-theme="light"] .intelligence-hub-glow {
  color: #33a8db !important;
}
[data-theme="light"] #intro-header h4 {
  color: rgba(13, 20, 26, 0.55) !important;
}

/* Nav menu items (desktop & mobile hamburger) — were rgba(255,255,255,0.7)
   so on light bg they were almost invisible. */
[data-theme="light"] .cyber-menu-item {
  color: rgba(13, 20, 26, 0.78) !important;
}
[data-theme="light"] .cyber-menu-item:hover {
  color: #33a9db !important;
  background-color: rgba(51, 169, 219, 0.08) !important;
  text-shadow: 0 0 6px rgba(51, 169, 219, 0.25) !important;
}

/* Strategy section pillar chips: were dark (rgba(8,8,12,0.92)) with white text.
   In light mode → light bg + black text per design. */
[data-theme="light"] .strategy-chip {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0d141a !important;
  border-color: rgba(13, 20, 26, 0.14) !important;
  box-shadow: 0 1px 2px rgba(13, 20, 26, 0.04) !important;
}
[data-theme="light"] .strategy-chip:hover {
  color: #33a8db !important;
  border-color: rgba(51, 169, 219, 0.6) !important;
  background: rgba(51, 169, 219, 0.06) !important;
  box-shadow: 0 0 14px rgba(51, 169, 219, 0.18), 0 0 28px rgba(51, 169, 219, 0.06) !important;
}
[data-theme="light"] .strategy-chip-active {
  color: #33a8db !important;
  border-color: rgba(51, 169, 219, 0.7) !important;
  background: rgba(51, 169, 219, 0.10) !important;
  box-shadow: 0 0 16px rgba(51, 169, 219, 0.22), 0 0 32px rgba(51, 169, 219, 0.08) !important;
}

/* Strategy wire-connection canvas draws with whitish strokes — invert too.
   Wires render via #strategy-canvas in JS using stroke colors; if any
   panels keep dark backdrops via bg-black/80 ensure they go light. */
[data-theme="light"] #strategy-panel {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(51, 169, 219, 0.30) !important;
}

/* Service modal interior — was bg-[#0a0a0f] hex-literal */
[data-theme="light"] #modal-panel,
[data-theme="light"] [class*="bg-\[\#0a0a0f\]"] {
  background-color: #ffffff !important;
  border-left-color: rgba(51, 169, 219, 0.25) !important;
}

/* Modal sticky header was bg-[#0a0a0f]/95 */
[data-theme="light"] [class*="bg-\[\#0a0a0f\]\/95"] {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

/* =====================================================
   LIGHT THEME — round 3 (footer, diagnostic popup, v2)
   ===================================================== */

/* Footer terminal bar — was bg-black/90 with white text.
   Fully opaque so backdrop-blur-md cannot bleed dark content through.
   Border-top strengthened to 0.18 so the divider line is clearly legible. */
[data-theme="light"] footer.bg-black\/90,
[data-theme="light"] footer[class*="bg-black"] {
  background-color: #f5f7fa !important;
  border-top-color: rgba(13, 20, 26, 0.18) !important;
}
[data-theme="light"] footer .text-white {
  color: #0d141a !important;
}
[data-theme="light"] footer .text-white\/30 {
  color: rgba(13, 20, 26, 0.48) !important;
}
[data-theme="light"] footer .text-white\/50 {
  color: rgba(13, 20, 26, 0.62) !important;
}
[data-theme="light"] footer .text-white\/80 {
  color: rgba(13, 20, 26, 0.85) !important;
}
/* border-white/5 on the footer element itself (Tailwind class override
   via the generic rule is only 0.06 — target it more specifically here) */
[data-theme="light"] footer.border-t {
  border-top-color: rgba(13, 20, 26, 0.18) !important;
}

/* System Diagnostics popover — was bg-[#0a0a0a] with white/N labels */
[data-theme="light"] #system-diagnostics,
[data-theme="light"] [class*="bg-\[\#0a0a0a\]"] {
  background-color: #ffffff !important;
  border-color: rgba(13, 20, 26, 0.15) !important;
  box-shadow: 0 8px 28px rgba(13, 20, 26, 0.10), 0 2px 6px rgba(13, 20, 26, 0.06) !important;
}
[data-theme="light"] #system-diagnostics .text-white\/50,
[data-theme="light"] #system-diagnostics .text-white\/30 {
  color: rgba(13, 20, 26, 0.58) !important;
}
[data-theme="light"] #system-diagnostics .text-white\/80 {
  color: #0d141a !important;
}
/* Internal divider lines inside the diagnostics popup */
[data-theme="light"] #system-diagnostics .border-white\/5,
[data-theme="light"] #system-diagnostics .border-white\/10 {
  border-color: rgba(13, 20, 26, 0.15) !important;
}

/* Blueprint slide-over panel — was bg-[#0a0a0a] */
[data-theme="light"] #blueprint-panel {
  background-color: #ffffff !important;
  border-left-color: rgba(13, 20, 26, 0.15) !important;
}
[data-theme="light"] #blueprint-panel .text-white { color: #0d141a !important; }
[data-theme="light"] #blueprint-panel .text-white\/80 { color: rgba(13, 20, 26, 0.82) !important; }
[data-theme="light"] #blueprint-panel .text-white\/70 { color: rgba(13, 20, 26, 0.78) !important; }
[data-theme="light"] #blueprint-panel .text-white\/40 { color: rgba(13, 20, 26, 0.55) !important; }
[data-theme="light"] #blueprint-panel .border-white\/10 { border-color: rgba(13, 20, 26, 0.15) !important; }

/* Service modal (Revenue Infrastructure pop-ups) — was bg-[#0a0a0f] with white/N inline text */
[data-theme="light"] #modal-panel {
  background-color: #ffffff !important;
  border-left-color: rgba(13, 20, 26, 0.15) !important;
  color: #0d141a !important;
}
[data-theme="light"] #modal-panel #modal-title { color: #0d141a !important; }
[data-theme="light"] #modal-panel .border-white\/10,
[data-theme="light"] #modal-panel .border-b { border-color: rgba(13, 20, 26, 0.15) !important; }
[data-theme="light"] #modal-panel .text-white\/40,
[data-theme="light"] #modal-panel .text-white\/50 { color: rgba(13, 20, 26, 0.55) !important; }
[data-theme="light"] #modal-panel .text-white\/70 { color: rgba(13, 20, 26, 0.78) !important; }
[data-theme="light"] #modal-panel .text-white\/80 { color: rgba(13, 20, 26, 0.85) !important; }
[data-theme="light"] #modal-body .modal-list li { color: rgba(13, 20, 26, 0.78) !important; }
[data-theme="light"] #modal-body .modal-outcome {
  color: rgba(13, 20, 26, 0.85) !important;
  background: rgba(51, 169, 219, 0.08) !important;
  border-color: rgba(51, 169, 219, 0.30) !important;
}

/* =====================================================
   LIGHT THEME — round 4: chat bubbles, lead form,
   missing bg-black variants, contact button, inputs,
   and small mono label WCAG-AA contrast boost
   ===================================================== */

/* bg-black alpha variants not yet in the override table */
[data-theme="light"] .bg-black\/20 { background-color: rgba(13, 20, 26, 0.04) !important; }
[data-theme="light"] .bg-black\/30 { background-color: rgba(255, 255, 255, 0.35) !important; }
[data-theme="light"] .bg-black\/50 { background-color: rgba(255, 255, 255, 0.55) !important; }

/* --- AI chat message bubbles (JS-generated via appendMessage / streamMessage) ---
   Dark mode uses a near-transparent gradient from-white/[0.07] to-white/[0.02]
   that renders as almost nothing on a light background.
   Target via the gradient class inside .chat-message wrappers. */
[data-theme="light"] #chat-history .chat-message .bg-gradient-to-br {
  background: rgba(13, 20, 26, 0.05) !important;
  background-image: none !important;
}

/* User avatar chip in dark mode is bg-white/10 border-white/20 — very faint on light */
[data-theme="light"] #chat-history .chat-message .bg-white\/10 {
  background-color: rgba(13, 20, 26, 0.07) !important;
}
[data-theme="light"] #chat-history .chat-message .border-white\/20 {
  border-color: rgba(13, 20, 26, 0.15) !important;
}

/* Loading / "Thinking…" bubble uses bg-white/5 text-white/50 — contrast too low */
[data-theme="light"] #chat-history > div:not(.chat-message) .bg-white\/5 {
  background-color: rgba(13, 20, 26, 0.04) !important;
}

/* --- Lead collection form (dynamically injected #lead-form-modal) ---
   Input fields use bg-black/40 (covered) but border-white/15 and
   placeholder:text-white/25 are not in the existing override table. */
[data-theme="light"] #lead-form-modal input[type="text"],
[data-theme="light"] #lead-form-modal input[type="email"],
[data-theme="light"] #lead-form-modal input[type="tel"],
[data-theme="light"] #lead-form-modal textarea {
  background-color: #ffffff !important;
  border-color: rgba(13, 20, 26, 0.15) !important;
  color: #0d141a !important;
}
[data-theme="light"] #lead-form-modal input::placeholder,
[data-theme="light"] #lead-form-modal textarea::placeholder {
  color: rgba(13, 20, 26, 0.38) !important;
}

/* Lead form divider and cancel button borders */
[data-theme="light"] #lead-form-modal .border-white\/5 {
  border-color: rgba(13, 20, 26, 0.10) !important;
}
[data-theme="light"] #lead-form-modal .border-white\/10 {
  border-color: rgba(13, 20, 26, 0.15) !important;
}
/* Cancel button — explicit override for both resting and hover states so the
   border is never rendered as near-invisible white on a light background */
[data-theme="light"] #lead-form-cancel {
  border-color: rgba(13, 20, 26, 0.20) !important;
}
[data-theme="light"] #lead-form-cancel:hover {
  border-color: rgba(13, 20, 26, 0.35) !important;
}

/* --- Contact section — AI Agent button ---
   Uses border-white/15 and bg-white/[0.03] which aren't covered globally. */
[data-theme="light"] #contact .border-white\/15 {
  border-color: rgba(13, 20, 26, 0.12) !important;
}
[data-theme="light"] #contact [class*="bg-white"] {
  background-color: rgba(13, 20, 26, 0.02) !important;
}
/* Restore primary-tinted hover states inside #contact that we don't want to flatten */
[data-theme="light"] #contact .hover\:bg-primary\/10:hover {
  background-color: rgba(51, 169, 219, 0.10) !important;
}

/* --- chat-interface input area top bar (bg-black/20 header strip) --- */
/* Covered now by the global .bg-black\/20 override above */

/* --- Chat input placeholder: white/20 is covered globally, but also
   ensure the enabled state placeholder is dark enough */
[data-theme="light"] #chat-input::placeholder {
  color: rgba(13, 20, 26, 0.38) !important;
}

/* --- Send / voice buttons inside chat input shell --- */
[data-theme="light"] #send-btn {
  color: rgba(13, 20, 26, 0.60) !important;
}
[data-theme="light"] #send-btn:hover {
  color: #0d141a !important;
}
[data-theme="light"] #send-btn:active {
  color: #0d141a !important;
  background-color: rgba(13, 20, 26, 0.10) !important;
  transform: scale(0.88);
}
[data-theme="light"] #voice-btn:active {
  color: #0d141a !important;
  background-color: rgba(13, 20, 26, 0.08) !important;
  transform: scale(0.88);
}
[data-theme="light"] .lang-btn:active {
  background-color: rgba(51, 169, 219, 0.20) !important;
  color: #0d141a !important;
  transform: scale(0.93);
}
[data-theme="light"] .lang-btn.lang-active:active {
  background-color: #2290bb !important;
  color: #fff !important;
  transform: scale(0.93);
}

/* --- Strategy panel inner close button (border-white/10 already covered,
   but scoped here for extra specificity) --- */
[data-theme="light"] #strategy-panel .border-white\/10 {
  border-color: rgba(13, 20, 26, 0.15) !important;
}
[data-theme="light"] #strategy-panel .text-white\/60 {
  color: rgba(13, 20, 26, 0.65) !important;
}

/* --- chat-message-content: ensure strong/em/code/blockquote readable on light --- */
[data-theme="light"] #chat-history .chat-message-content {
  color: rgba(13, 20, 26, 0.90);
}
[data-theme="light"] #chat-history .chat-message-content strong {
  color: #0d141a;
}
[data-theme="light"] #chat-history .chat-message-content em {
  color: #1b7ea8;
}
[data-theme="light"] #chat-history .chat-message-content h1,
[data-theme="light"] #chat-history .chat-message-content h2,
[data-theme="light"] #chat-history .chat-message-content h3 {
  color: #0d141a;
  border-bottom-color: rgba(51, 169, 219, 0.20);
}
[data-theme="light"] #chat-history .chat-message-content ul > li,
[data-theme="light"] #chat-history .chat-message-content ol > li {
  color: rgba(13, 20, 26, 0.85);
}
[data-theme="light"] #chat-history .chat-message-content blockquote {
  background-color: rgba(51, 169, 219, 0.06);
  color: rgba(13, 20, 26, 0.80);
}
[data-theme="light"] #chat-history .chat-message-content code {
  background-color: rgba(51, 169, 219, 0.08);
  border-color: rgba(51, 169, 219, 0.20);
}
[data-theme="light"] #chat-history .chat-message-content hr {
  border-top-color: rgba(13, 20, 26, 0.12);
}

/* =====================================================
   LIGHT THEME — round 4 cont.: small mono label contrast
   All 9–12 px monospace / uppercase labels must meet
   WCAG-AA 4.5:1 on #f5f7fa. The global /30 → 0.40,
   /40 → 0.48, /50 → 0.55 utility overrides are fine
   for body-size text but fall short (~2.4–3.7:1) at
   9–12 px. Scoped rules below bring every affected
   element to ≥ 4.5:1 without darkening the palette.
   Target opacity 0.70 ≈ 5.5:1 / 0.72 ≈ 6.0:1.
   ===================================================== */

/* Intelligence container terminal header (10 px) */
[data-theme="light"] #intelligence-container .text-white\/30 {
  color: rgba(13, 20, 26, 0.68) !important;
}

/* "Go Back" button label (10 px) */
[data-theme="light"] #btn-go-back {
  color: rgba(13, 20, 26, 0.68) !important;
  border-color: rgba(13, 20, 26, 0.18) !important;
}

/* Chat action icon buttons (terminal icon, mic, voice) */
[data-theme="light"] #intelligence-container .text-white\/30.material-symbols-outlined,
[data-theme="light"] #intelligence-container button.text-white\/30,
[data-theme="light"] #intelligence-container button.text-white\/40 {
  color: rgba(13, 20, 26, 0.60) !important;
}

/* Segment-selection: sub-label (9 px) and card desc (12 px) */
[data-theme="light"] #segment-phase .text-white\/50 {
  color: rgba(13, 20, 26, 0.72) !important;
}

/* Service bento "Explore →" link (text-xs font-mono uppercase) */
[data-theme="light"] .bento-card .text-white\/30 {
  color: rgba(13, 20, 26, 0.68) !important;
}

/* Service bento mono sub-descriptions (text-sm font-mono) */
[data-theme="light"] .bento-card .text-white\/50 {
  color: rgba(13, 20, 26, 0.72) !important;
}

/* Strategy section sub-label (text-xs/sm font-mono uppercase) */
[data-theme="light"] #strategy .text-white\/40 {
  color: rgba(13, 20, 26, 0.70) !important;
}

/* Heritage location labels "Strategic Hub / Knowledge Hub" (10 px) */
[data-theme="light"] #heritage .text-white\/40 {
  color: rgba(13, 20, 26, 0.70) !important;
}

/* Partner code-card text: sits on near-black bg (rgba 13,20,26,0.92);
   boost from 0.55 → 0.82 to clear 4.5:1 on that surface. */
[data-theme="light"] .gm-code-content {
  color: rgba(51, 169, 219, 0.82) !important;
}

/* Sector hover tooltip: retains dark bg — ensure text is fully opaque */
[data-theme="light"] .gm-partner-sector {
  color: rgba(51, 169, 219, 1) !important;
}

/* =====================================================
   FIXES — June 2026
   ===================================================== */

/* 1. "You Ask, We Answer" CTA — hover fix in light mode
   bg-primary !important prevents hover:bg-white from applying,
   so text-primary becomes blue-on-blue. Override to dark bg + white text. */
[data-theme="light"] [data-action="strategy-cta"]:hover {
  background-color: #0d141a !important;
  color: #ffffff !important;
}

/* 2. "Book a Consultation" button — light mode
   Force dark bg + white text so the button stands out clearly
   on the light contact-section background. */
[data-theme="light"] #contact-mailto {
  background-color: #0d141a !important;
  color: #ffffff !important;
}
[data-theme="light"] #contact-mailto:hover {
  background-color: #33a9db !important;
  color: #0d141a !important;
}
[data-theme="light"] #contact-mailto .material-symbols-outlined,
[data-theme="light"] #contact-mailto span {
  color: inherit !important;
}

/* 3. Technology Ecosystem — improved section background in both modes
   Dark: deep navy-black instead of pure black → cards have more visual contrast.
   Light: soft blue tint instead of white → clear separation from page bg.
   Fade edge gradients are updated to match so the carousel masks blend cleanly. */
#partners {
  background-color: #06101a !important;
}
#partners .gm-partner-fade-left {
  background: linear-gradient(to right, #06101a 0%, transparent 100%) !important;
}
#partners .gm-partner-fade-right {
  background: linear-gradient(to left, #06101a 0%, transparent 100%) !important;
}
[data-theme="light"] #partners {
  background-color: #c8e3f0 !important;
}
[data-theme="light"] #partners .gm-partner-fade-left {
  background: linear-gradient(to right, #c8e3f0 0%, transparent 100%) !important;
}
[data-theme="light"] #partners .gm-partner-fade-right {
  background: linear-gradient(to left, #c8e3f0 0%, transparent 100%) !important;
}

/* =====================================================
   LIGHT THEME — round 5: mobile viewport audit
   Closes gaps found at ≤ 400 px width across chat,
   modals, lead form, and strategy panel.
   ===================================================== */

/* --- Missing utility class: border-white/15 ---
   Used on all JS-generated lead form input borders.
   The specific #lead-form-modal input selectors cover
   typed inputs; this fills any other usage site. */
[data-theme="light"] .border-white\/15 {
  border-color: rgba(13, 20, 26, 0.12) !important;
}

/* --- Missing utility class: text-white/25 ---
   Gap between /20 (covered) and /30 (covered). Used
   as placeholder colour via Tailwind's placeholder:
   variant on lead-form inputs. The element-level
   ::placeholder selectors in round 4 already handle
   the lead form; this covers any other occurrence. */
[data-theme="light"] .text-white\/25 {
  color: rgba(13, 20, 26, 0.36) !important;
}

/* --- hover:text-white and hover:text-white/NN ---
   Tailwind generates hover\:text-white:hover as a
   separate class from .text-white, so the global
   .text-white override does not catch it. On light
   backgrounds this produces white-on-white text on
   tap / hover for close buttons, chat starters,
   strategy panel close, etc. */
[data-theme="light"] .hover\:text-white:hover {
  color: #0d141a !important;
}
[data-theme="light"] .hover\:text-white\/70:hover {
  color: rgba(13, 20, 26, 0.75) !important;
}
[data-theme="light"] .hover\:text-white\/50:hover {
  color: rgba(13, 20, 26, 0.62) !important;
}

/* --- group-hover:text-white ---
   Tailwind generates this as .group:hover .group-hover\:text-white
   which is a different selector from hover\:text-white:hover and is
   NOT caught by the rule above. Affected elements include:
   • "Request a Call" chat widget span (text-primary → group-hover:text-white)
   • lead-form-open-btn span (text-primary → group-hover:text-white)
   • chat-starter spans (text-white/70 → group-hover:text-white,
     partially covered by .chat-starter:hover rules but belt-and-suspenders)
   All hover backgrounds for these buttons use primary/10 or bg-primary/10
   which are very light in light mode — dark text is required for ≥4.5:1. */
[data-theme="light"] .group:hover .group-hover\:text-white {
  color: #0d141a !important;
}

/* --- "Request a Call" and lead-form-open-btn: stronger hover in light mode ---
   hover:bg-primary/10 (≈4% opacity on the light surface) is too faint to
   signal interactivity. Override to a solid primary fill so the hover state
   is immediately visible. Border is merged into the fill for a clean look.
   The text span is already overridden to dark by the group-hover rule above;
   the icon (text-primary on a primary bg) is forced dark here so it stays
   readable. Contrast: #0d141a on #33a9db ≈ 6.7:1 (WCAG AA ✓). */
[data-theme="light"] #chat-contact-btn:hover,
[data-theme="light"] .lead-form-open-btn:hover {
  background-color: #33a9db !important;
  border-color: #33a9db !important;
}
[data-theme="light"] #chat-contact-btn:hover .material-symbols-outlined,
[data-theme="light"] .lead-form-open-btn:hover .material-symbols-outlined {
  color: #0d141a !important;
}

/* --- hover:border-white/NN ---
   Same issue: hover border variants are separate
   Tailwind classes not caught by the utility overrides. */
[data-theme="light"] .hover\:border-white\/20:hover {
  border-color: rgba(13, 20, 26, 0.20) !important;
}
[data-theme="light"] .hover\:border-white\/10:hover {
  border-color: rgba(13, 20, 26, 0.12) !important;
}

/* --- Mobile-only AI icon (gm-ai-mobile-icon) ---
   Shown only below 768 px instead of the Lottie.
   Boost the radial bg slightly and the icon opacity
   so it reads against #f5f7fa light background. */
[data-theme="light"] .gm-ai-mobile-icon {
  background: radial-gradient(circle at 50% 50%, rgba(51, 169, 219, 0.14) 0%, transparent 70%);
  border-color: rgba(51, 169, 219, 0.50);
}
[data-theme="light"] .gm-ai-mobile-icon .material-symbols-outlined {
  color: rgba(51, 169, 219, 0.90);
}

/* --- Strategy panel JS-injected content ---
   openStrategyPanel() writes text-white/70 and
   text-white/80 directly into #strategy-panel-content
   via innerHTML. The global /70 and /80 overrides
   cover these, but scope them here for extra
   specificity so the panel is always readable. */
[data-theme="light"] #strategy-panel-content .text-white\/70 {
  color: rgba(13, 20, 26, 0.75) !important;
}
[data-theme="light"] #strategy-panel-content .text-white\/80 {
  color: rgba(13, 20, 26, 0.85) !important;
}

/* --- Lead form modal: full-screen on mobile ---
   At 400 px the modal is w-[95vw]. Ensure the
   outer container bg-[#0a0a0a] and the sticky
   header bg-black/60 both get light surfaces
   (bg-[#0a0a0a] is already covered by the
   [class*="bg-\[\#0a0a0a\]"] rule; add explicit
   #lead-form-modal scope for extra specificity). */
[data-theme="light"] #lead-form-modal > div {
  background-color: #ffffff !important;
  border-color: rgba(13, 20, 26, 0.12) !important;
}
[data-theme="light"] #lead-form-modal .bg-black\/60 {
  background-color: rgba(255, 255, 255, 0.96) !important;
}
[data-theme="light"] #lead-form-modal .bg-black\/80 {
  background-color: rgba(13, 20, 26, 0.50) !important;
}
[data-theme="light"] #lead-form-modal .text-white\/40 {
  color: rgba(13, 20, 26, 0.55) !important;
}
[data-theme="light"] #lead-form-modal .border-white\/10 {
  border-color: rgba(13, 20, 26, 0.10) !important;
}
[data-theme="light"] #lead-form-modal .border-white\/5 {
  border-color: rgba(13, 20, 26, 0.06) !important;
}

/* --- GDPR gate in chat input area (mobile compact) ---
   Input area wrapper uses bg-black/40 at line 207
   which is covered globally; the GDPR label
   text-white/70 is covered. Ensure the warning div
   text-white/50 reads at the 11px mono size. */
[data-theme="light"] #gdpr-warning {
  color: rgba(13, 20, 26, 0.72) !important;
}
[data-theme="light"] #gdpr-gate label {
  color: rgba(13, 20, 26, 0.78) !important;
}

/* --- Chat starter buttons: hover states in light mode ---
   hover:bg-primary/5 (≈2% opacity) is invisible on the light surface.
   Apply the same solid primary fill used on "Request a Call" so all
   four starter buttons have an equally clear hover signal.
   Contrast: #0d141a on #33a9db ≈ 6.7:1 (WCAG AA ✓). */
[data-theme="light"] .chat-starter:hover {
  background-color: #33a9db !important;
  border-color: #33a9db !important;
}
[data-theme="light"] .chat-starter:hover .material-symbols-outlined {
  color: #0d141a !important;
}
[data-theme="light"] .chat-starter:hover .text-white\/70,
[data-theme="light"] .chat-starter:hover span.text-xs {
  color: #0d141a !important;
}

/* --- Chat starter buttons: :active states for touch devices ---
   :hover is unreliable on touch-only screens (fires transiently on
   tap or not at all). :active fires for the full duration of a press
   and gives equivalent tactile feedback on phones and tablets.
   Dark-mode rules mirror the Tailwind group-hover values
   (border-primary/50, bg-primary/5, icon text-primary, text white).
   Light-mode rules reuse the same solid-fill treatment as hover.
   iOS WebKit :active guard: see js/main.js DOMContentLoaded block.  */
.chat-starter:active {
  background-color: rgba(51, 169, 219, 0.05) !important;
  border-color: rgba(51, 169, 219, 0.5) !important;
}
.chat-starter:active .material-symbols-outlined {
  color: #33a9db !important;
}
.chat-starter:active .text-white\/70,
.chat-starter:active span.text-xs {
  color: #ffffff !important;
}

[data-theme="light"] .chat-starter:active {
  background-color: #33a9db !important;
  border-color: #33a9db !important;
}
[data-theme="light"] .chat-starter:active .material-symbols-outlined {
  color: #0d141a !important;
}
[data-theme="light"] .chat-starter:active .text-white\/70,
[data-theme="light"] .chat-starter:active span.text-xs {
  color: #0d141a !important;
}

/* --- #chat-contact-btn :active state for touch devices ---
   Mirrors hover (border-primary, bg-primary/10, icon text-primary,
   label text-white) so touch users see a clear pressed state.
   Light mode reuses the solid-fill treatment applied on hover.
   iOS WebKit :active guard: see js/main.js DOMContentLoaded block.  */
#chat-contact-btn:active {
  border-color: #33a9db !important;
  background-color: rgba(51, 169, 219, 0.1) !important;
}
#chat-contact-btn:active .material-symbols-outlined {
  color: #33a9db !important;
}
#chat-contact-btn:active span.text-primary {
  color: #ffffff !important;
}

[data-theme="light"] #chat-contact-btn:active {
  background-color: #33a9db !important;
  border-color: #33a9db !important;
}
[data-theme="light"] #chat-contact-btn:active .material-symbols-outlined {
  color: #0d141a !important;
}
[data-theme="light"] #chat-contact-btn:active span.text-primary {
  color: #0d141a !important;
}

/* --- Segment selection cards: mobile compact layout ---
   At <768px the badge and title are inline (no desc).
   .cyber-cell is already overridden; ensure the inline
   title text-white at 11px has sufficient contrast. */
[data-theme="light"] .segment-card .text-white {
  color: #0d141a !important;
}

/* --- Service modal close button hover on mobile ---
   #modal-close uses hover:text-white which is now
   globally patched above; explicit scope for clarity. */
[data-theme="light"] #modal-close:hover,
[data-theme="light"] #strategy-panel-close:hover {
  color: #0d141a !important;
}

/* =====================================================
   SAFARI / iOS MOBILE COMPATIBILITY
   Fixes for backdrop-filter, momentum scrolling, and
   overflow in key interactive panels on mobile Safari.
   ===================================================== */

/* --- Touch momentum scrolling for panels ---
   iOS Safari requires -webkit-overflow-scrolling: touch
   on overflow: auto/scroll containers for the native
   inertia/bounce scroll behaviour. Without it, dragging
   a finger inside the panel feels sticky and stops
   immediately when the finger lifts.

   #strategy-panel: overflow-y-auto in index.php markup.
   #lead-form-modal .overflow-y-auto: the flex-1 inner
   body of the JS-generated lead form (line ~1332 main.js). */
#strategy-panel {
  -webkit-overflow-scrolling: touch;
}

#lead-form-modal .overflow-y-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* --- @supports fallback for backdrop-filter ---
   Devices/browsers that do not support backdrop-filter
   at all (e.g. some older Android WebViews, UC Browser)
   would show a near-transparent .glass-container that
   lets dark page content bleed through. Ensure the
   background stays readable by making it opaque enough. */
@supports not (backdrop-filter: blur(1px)) {
  .glass-container {
    background: rgba(14, 22, 27, 0.95);
  }

  [data-theme="light"] .glass-container {
    background: rgba(245, 247, 250, 0.98) !important;
  }

  .cyber-cell {
    background: rgba(18, 28, 33, 0.82);
  }

  [data-theme="light"] .cyber-cell {
    background: rgba(255, 255, 255, 0.92) !important;
  }
}