/* ============================================
   1. FONTS
   ============================================ */
@font-face {
  font-family: "Fireside DEMO";
  src: url("fonts/Fireside-DEMO.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ZTNature-Thin";
  src: url("fonts/ZTNature-Thin.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   2. CSS VARIABLES (THEMING) - NEW PALETTE
   ============================================ */
:root {
  /* --- DARK THEME (Default) --- */
  --color-primary: #ffffff;
  --color-primary-dark: #03256c;
  --color-secondary: #003459;
  --color-secondary-dark: #00171f;
  --color-accent: #007ea7;
  --color-background: #00171f;
  --color-surface: #00345900;
  --color-surface-light: rgba(0, 126, 167, 0.2);
  --color-surface-alt: #002a3faf;
  --color-text-light: #ffffff;
  --color-text-muted: #ffffff;
  --color-text-header: #ffffff;
  --color-text: #e0e0e0;
  --color-border: rgba(0, 168, 232, 0.3);
  --color-border-light: rgba(0, 168, 232, 0.1);

  --gradient-purple: rgba(255, 255, 255, 0);
  --gradient-dark-blue: rgba(0, 35, 61, 0);
  --header-navigation-bar: linear-gradient(to right, var(--gradient-purple) 0%, var(--gradient-dark-blue) 100%);
  --header-navigation-bar-scrolled: linear-gradient(to right,
      rgba(0, 0, 0, 0.548) 0%,
      rgba(255, 255, 255, 0.536) 100%);


  --header-card-text: #00c2ff;
  --dropdown-bg: rgba(15, 18, 25, 0.374);
  --dropdown-hover-bg: rgba(0, 168, 232, 0.15);
  --dropdown-text-color: #eaeaea;

  /* Typography */
  --font-header: "Fireside DEMO", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "ZTNature-Thin", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --padding-section: 80px 20px;
  --padding-mobile: 60px 15px;
  --container-max: 1200px;
  --border-radius: 10px;
  --border-radius-sm: 6px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 15px rgba(0, 168, 232, 0.4);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  --transition-theme: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index layers */
  --z-background: -10;
  --z-base: 1;
  --z-card: 10;
  --z-header: 1000;
  --z-modal: 2000;
}

/* --- LIGHT THEME OVERRIDES --- */
:root[data-theme="light"] {
  --color-background: #ffffff;
  --color-surface: #f5f7fa00;
  --color-surface-light: #f0f3f7;
  --color-surface-alt: #ffffffdb;
  --color-text-light: #003459;
  --color-text-muted: #007ea7;
  --color-text-header: #000000;
  --color-text: #00171f;
  --color-border: rgba(0, 126, 167, 0.4);
  --color-border-light: rgba(0, 126, 167, 0.15);
  --color-primary: #0072b4;
  --color-primary-dark: #2541b2;
  --color-secondary: #00a8e8;
  --color-secondary-dark: #007ea7;
  --color-accent: #00a8e8;

  --header-card-text: #0072b4;

  --gradient-purple: rgba(101, 50, 230, 0);
  --gradient-dark-blue: rgba(30, 80, 120, 0);

  --header-navigation-bar: linear-gradient(to right,
      var(--gradient-purple) 0%,
      var(--gradient-dark-blue) 100%);

  --header-navigation-bar-scrolled: linear-gradient(to right,
      rgba(255, 255, 255, 0.534) 0%,
      rgba(0, 0, 0, 0.303) 100%);


  --dropdown-bg: rgba(255, 255, 255, 0.437);
  --dropdown-hover-bg: rgba(0, 126, 167, 0.12);
  --dropdown-text-color: #00171f;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 15px rgba(0, 126, 167, 0.3);
}

/* ============================================
   3. BASE STYLES & RESET
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-text-light);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  transition: background-color var(--transition-theme),
    color var(--transition-theme);
}

/* Utilities */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}

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

/* ============================================
   4. TYPOGRAPHY
   ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-header);
  color: var(--color-text-header);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.2;
  margin-bottom: 1rem;
  transition: color var(--transition-theme);
}

h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
}

h2 {
  font-size: clamp(2rem, 4vw, 2.5rem);
}

h3 {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
}

h4 {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
}

p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  transition: color var(--transition-theme);
  font-weight: bold;
}

strong {
  color: var(--color-primary);
  font-weight: 600;
  transition: color var(--transition-theme);
}

/* Section Titles */
.section-title,
.glitch-text {
  text-align: center;
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin-bottom: 5px;
  color: var(--color-primary);
  position: relative;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  transition: color var(--transition-theme);
}

.section-subtitle {
  text-align: center;
  font-size: 1.4rem;
  color: var(--color-text-muted);
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
}

.section-header {
  margin-bottom: auto;
}

/* ============================================
   5. BACKGROUNDS & CANVAS
   ============================================ */
#background-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-background);
  pointer-events: none;
  background: transparent !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  z-index: 2000;
  transition: width var(--transition-fast), background var(--transition-theme);
}

#home-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  transition: none !important;
  will-change: transform;
}

.video-spacer {
  height: 100vh;
  width: 100%;
  position: relative;
  z-index: 0;
  pointer-events: none;
  background: transparent;
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 1;
  transition: opacity var(--transition-theme);
  pointer-events: none;
  background-color: #000000;
}

.day-video,
.night-video {
  opacity: 0;
  display: none;
}

:root[data-theme="light"] .day-video {
  opacity: 1;
  display: block;
}

:root[data-theme="dark"] .night-video {
  opacity: 1;
  display: block;
  filter: brightness(0.9) contrast(1.1);
}

/* ============================================
   6. HEADER & NAVIGATION
   ============================================ */
header {

  background: var(--header-navigation-bar);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-header);
  padding: 15px 0;
  transition: padding var(--transition-normal),
    box-shadow var(--transition-normal);
}

header.scrolled {
  background: var(--header-navigation-bar-scrolled);
  box-shadow: var(--shadow-md);
  padding: 10px 0;
}

:root[data-theme="light"] header.scrolled {
  background-color: var(--header-navigation-bar-scrolled);
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 95%;
  margin: 0 auto;
}

.header-left {
  margin-right: auto;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Logo */
.logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: var(--z-header);
  position: relative;
  flex-shrink: 0;
  min-width: max-content;
}

.logo-img {
  height: 70px;
  width: auto;
  filter: drop-shadow(0 0 5px rgba(0, 168, 232, 0.7));
  transition: transform var(--transition-normal);
}

.logo:hover .logo-img {
  transform: scale(1.3);
}

.logo-text {
  font-family: var(--font-header);
  font-size: 1.8rem;
  color: var(--color-primary);
  text-shadow: 0 0 10px rgba(0, 168, 232, 0.5);
  transition: color var(--transition-theme), text-shadow var(--transition-theme);
  white-space: nowrap;
}

/* Main Navigation */
.main-nav {
  position: relative;
  z-index: var(--z-header);
  margin-left: auto;
  margin-right: 15px;
}

#main-nav {
  list-style: none;
  display: flex;
  gap: 25px;
  margin: 0;
  padding: 0;
}

#main-nav li {
  display: inline-block;
}

.nav-link {
  color: var(--color-text-header);
  text-decoration: none;
  font-family: var(--font-header);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 12px;
  transition: all var(--transition-normal);
  position: relative;
  display: block;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width var(--transition-normal), background var(--transition-theme);
}

.nav-link:hover {
  color: var(--color-primary);
  text-shadow: 0 0 10px rgba(0, 168, 232, 0.5);
}

.nav-link:hover::after {
  width: 80%;
}

/* Dropdown Menu */
.nav-item {
  position: relative;
}

.has-dropdown .dropdown-arrow {
  margin-left: 6px;
  font-size: 0.7em;
  opacity: 0.7;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--dropdown-bg);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 14px 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

.dropdown-menu a {
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--dropdown-text-color);
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  transition: background 0.2s ease, transform 0.2s ease;
}

.dropdown-menu a:hover {
  background: var(--dropdown-hover-bg);
  transform: translateX(4px);
  color: var(--dropdown-text-color);
}

.has-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(6px) scale(1);
}

/* Mobile Toggle */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  z-index: var(--z-header);
  position: relative;
}

.menu-bar {
  display: block;
  width: 25px;
  height: 2px;
  background-color: var(--color-primary);
  margin: 5px 0;
  transition: var(--transition-normal);
}

/* ============================================
   7. THEME TOGGLE
   ============================================ */
.theme-toggle-container {
  margin-left: 15px;
  position: relative;
  z-index: var(--z-header);
}

.theme-toggle {
  background: rgba(0, 35, 47, 0.7);
  border: 1px solid var(--color-border);
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  min-width: 50px;
  overflow: hidden;
  backdrop-filter: blur(1px);
  transition: all var(--transition-normal);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  padding: 0;
}

.theme-toggle:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 15px rgba(0, 168, 232, 0.4);
  transform: scale(1.05);
}

:root[data-theme="light"] .theme-toggle {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 126, 167, 0.3);
}

.toggle-icon {
  position: absolute;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  opacity: 1;
  transform: scale(1);
}

.toggle-icon svg {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}

.toggle-icon .moon {
  fill: var(--color-primary);
  filter: drop-shadow(0 0 8px rgba(0, 168, 232, 0.5));
}

.toggle-icon .sun {
  fill: #ff9800;
  filter: drop-shadow(0 0 8px rgba(255, 152, 0, 0.5));
}

/* Toggle Logic */
:root[data-theme="light"] .toggle-icon.moon {
  opacity: 0;
  transform: scale(0) rotate(-90deg);
}

:root[data-theme="light"] .toggle-icon.sun {
  opacity: 1;
  transform: scale(1) rotate(0);
}

:root[data-theme="dark"] .toggle-icon.sun {
  opacity: 0;
  transform: scale(0) rotate(90deg);
}

:root[data-theme="dark"] .toggle-icon.moon {
  opacity: 1;
  transform: scale(1) rotate(0);
}

/* ============================================
   8. HERO SECTION
   ============================================ */
.home-content {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  z-index: 2;
}

.home-content .container {
  width: 100%;
}

.banner-content {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: 0;
  text-align: right;
  padding-right: 5%;
  position: relative;
  z-index: 10;
}

/* Main Title */
#main-title {
  font-family: "Fireside DEMO", sans-serif;
  font-size: clamp(3.5rem, 10vw, 6rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  line-height: 1;
  margin-bottom: 0.5rem;
  position: relative;
  text-align: right;
  background: linear-gradient(180deg, #fff 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 15px rgba(0, 168, 232, 0.6));
  animation: titleEntrance 1.5s cubic-bezier(0.23, 1, 0.32, 1) both,
    pulseGlowDark 4s ease-in-out infinite alternate;
}

:root[data-theme="light"] #main-title {
  background: linear-gradient(180deg, #00171f 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(0, 126, 167, 0.4));
  animation: titleEntrance 1.5s cubic-bezier(0.23, 1, 0.32, 1) both,
    pulseGlowLight 4s ease-in-out infinite alternate;
}

#main-title::after {
  content: "";
  position: absolute;
  bottom: -15px;
  right: 0;
  width: 0;
  height: 3px;
  background: var(--color-primary);
  box-shadow: 0 0 15px var(--color-primary);
  animation: lineGrow 1s 1.2s ease-out forwards;
}

/* Rotating Text */
.rotating-text-container {
  margin: 25px;
  display: flex;
  justify-content: flex-start;
  width: 100%;
  font-family: "ZTNature-Thin", sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-text-muted);
}

.rotating-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  position: relative;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-family: var(--font-body);
  font-weight: bold;
  color: var(--color-text-light);
  line-height: 1.4;
  max-width: 100%;
  margin: 0;
  text-align: right;
  transition: color var(--transition-theme);
}

.rotating-text-word {
  display: inline-flex;
  margin: 0 4px 5px;
  overflow: visible;
  position: relative;
  align-items: center;
  min-height: 2rem;
}

.rotating-text-char {
  display: inline-block;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  transform-origin: bottom center;
  will-change: transform, opacity;
}

.rotating-text-char:not(.rotating-highlight) {
  color: var(--color-text-light);
  transition: color var(--transition-theme);
}

.rotating-highlight {
  background: linear-gradient(120deg,
      var(--color-primary),
      var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
  padding: 0 1px;
  margin: 0 -0.5px;
  position: relative;
}

.rotating-text-space {
  white-space: pre;
  width: 6px;
  display: inline-block;
}

/* Scroll Indicator */
.scroll-indicator {
  margin-top: 60px;
  display: flex;
  justify-content: flex-end;
}

.mouse {
  width: 30px;
  height: 50px;
  border: 2px solid var(--color-primary);
  border-radius: 20px;
  position: relative;
  margin: 0;
  transition: border-color var(--transition-theme);
}

.wheel {
  width: 4px;
  height: 10px;
  background-color: var(--color-primary);
  border-radius: 2px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll-wheel 2s infinite;
  transition: background-color var(--transition-theme);
}

/* ============================================
   9. UI COMPONENTS & BUTTONS
   ============================================ */
/* Sections */
section {
  background-color: transparent !important;
  padding: var(--padding-section);
  position: relative;
  z-index: var(--z-base);
  border-bottom: 1px solid var(--color-border-light);
  transition: border-color var(--transition-theme);
}

/* Reusing your 'glass-card' logic for the section intro */
.section-intro-text {
  max-width: 900px;
  margin: 0 auto 50px auto;
  padding: 30px;
  text-align: center;

  /* Creative background: Reusing your glass effect */
  background: var(--color-surface-alt);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--color-border);
  border-radius: 20px;

  /* Subtle glow to make it "pop" from the background */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 5;
}

.section-intro-text p {
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0;
  font-weight: 300;
}

/* Reusing your primary color for a small tech-accent */
.section-intro-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 0 0 10px 10px;
}

/* Optional: Add a subtle accent line under the description */
.section-intro-text::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--color-primary);
  margin: 25px auto 0 auto;
  opacity: 0.5;
}

.parallax-section {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: rgba(0, 23, 31, 0.8);

  margin-top: 0;
  box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] .parallax-section {
  background: rgba(255, 255, 255, 0.85);
}

/* Buttons */
.cta-container {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  margin: 40px 0;
  flex-wrap: wrap;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
      var(--color-primary),
      var(--color-accent));
  color: var(--color-background);
  padding: 14px 32px;
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  font-family: var(--font-header);
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  min-width: 130px;
  text-transform: uppercase;
  font-size: 0.95rem;
}

.cta-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent);
  transition: left 0.7s;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 168, 232, 0.4);
}

.cta-button:hover::before {
  left: 100%;
}

.cta-button.pulse {
  animation: pulse-glow 2s infinite;
}

.cta-button.secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.cta-button.secondary:hover {
  background: rgba(0, 168, 232, 0.1);
}

.cta-button.small {
  padding: 10px 25px;
  font-size: 0.85rem;
}

/* Cards & Grids */
.real-time-grid,
.ai-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.real-time-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Ensure it's 3 columns */
  gap: 20px;
}

.rt-card,
.ai-card,
.about-card {
  background: var(--color-surface-alt);
  padding: 30px;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border-light);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.ai-card {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  background: transparent !important;
  /* Move background to inner */
  border: none !important;
  box-shadow: none !important;
}

.highlight-card {
  border-color: var(--color-primary);
  background: linear-gradient(145deg,
      var(--color-surface-alt),
      rgba(0, 168, 232, 0.1));
}

.rt-card:hover,
.ai-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  background: var(--color-surface-light-hover);
}

.service-icon {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: var(--color-primary);
  display: inline-block;
}

.ai-card-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.ai-card-inner {
  background: var(--color-surface-light);
  border: 1px solid var(--color-border);
  padding: 30px;
  border-radius: var(--border-radius-md);
  height: 100%;
  width: 100%;
  /* This ensures the inner content handles the look while the outer handles movement */
}

.ai-icon {
  font-family: "Courier New", monospace;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-primary);
  background: rgba(0, 168, 232, 0.1);
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all var(--transition-normal);
}

.ai-card:hover .ai-icon {
  background: var(--color-primary);
  color: var(--color-background);
  transform: scale(1.1);
}

.ai-scan-line {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(0, 168, 232, 0.1),
      transparent);
  transition: left 0.5s;
  z-index: 1;
  pointer-events: none;
}

.rt-card:hover .ai-scan-line,
.ai-card:hover .ai-scan-line {
  left: 100%;
  transition: left 0.8s ease-in-out;
}

/* AI Intro Container */
.ai-intro-container {
  background: rgba(0, 35, 47, 0.8);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 0;
  margin-bottom: auto;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
  transition: transform var(--transition-slow),
    border-color var(--transition-theme);
}

:root[data-theme="light"] .ai-intro-container {
  background: rgba(245, 247, 250, 0.9);
  border-color: var(--color-border-light);
}

.ai-status-line {
  background: rgba(0, 168, 232, 0.1);
  padding: 10px 20px;
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: #0f0;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 5px #0f0;
}

.status-dot.pulse {
  animation: status-blink 1.5s infinite;
}

.ai-philosophy-content {
  padding: 40px;
  text-align: center;
}

.ai-philosophy-content h3 {
  font-size: 2rem;
  margin-bottom: 15px;
  background: linear-gradient(90deg,
      var(--color-text-light),
      var(--color-primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-primary);
}

/* About Content */
.about-content {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: auto;
}

.about-text,
.about-card {
  flex: 1;
  min-width: 300px;
}

.about-text p {
  background-color: rgba(0, 35, 47, 0.6);
  padding: 25px;
  border-radius: var(--border-radius);
  backdrop-filter: blur(5px);
  border: 1px solid var(--color-border-light);
  font-size: 1.15rem;
  line-height: 1.8;
  transition: all var(--transition-theme);
}

:root[data-theme="light"] .about-text p {
  background-color: rgba(255, 255, 255, 0.7);
}

.competencies-list {
  list-style: none;
  padding: 0;
}

.competencies-list li {
  margin-bottom: 15px;
  position: relative;
  padding-left: 25px;
  font-size: 1.1rem;
  line-height: 1.6;
  transition: color var(--transition-theme);
}

.competencies-list li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: bold;
  font-size: 1.2rem;
}

.ai-bridge-container {
  text-align: center;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--color-border-light);
}

.bridge-content {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.bridge-content p {
  font-size: 1.1rem;
  color: var(--color-text-header);
}

/* Table Styles */
.table-container {
  overflow-x: auto;
  margin-top: 15px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

thead tr {
  border-bottom: 2px solid var(--color-primary);
}

th,
td {
  text-align: left;
  padding: 10px;
}

/* ============================================
   10. FORMS
   ============================================ */
#contact {
  background: var(--color-surface);
  position: relative;
  z-index: 10;
}

.fs-form {
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  row-gap: 1.5rem;
}

.fs-field {
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

.fs-label {
  display: block;
  margin-bottom: 10px;
  color: var(--color-primary);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color var(--transition-theme);
}

.fs-input,
.fs-textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text-light);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-body);
  font-size: 1.125rem;
  transition: all var(--transition-normal);
}

:root[data-theme="light"] .fs-input,
:root[data-theme="light"] .fs-textarea {
  border-color: var(--color-border);
  background: var(--color-surface-alt);
}

.fs-input:focus-visible,
.fs-textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.2);
}

.fs-textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}

.fs-description {
  color: var(--color-text-muted);
  display: block;
  font-size: 0.9rem;
  line-height: 1.25rem;
  margin-top: 5px;
  transition: color var(--transition-theme);
}

.fs-button-group {
  display: flex;
  flex-direction: row-reverse;
  column-gap: 1.5rem;
  margin-top: 1rem;
}

.fs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
      var(--color-primary),
      var(--color-accent));
  color: var(--color-background);
  padding: 14px 32px;
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  font-family: var(--font-header);
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  min-width: 130px;
  text-transform: uppercase;
  font-size: 0.95rem;
}

.fs-button:hover {
  background: linear-gradient(135deg,
      var(--color-primary-dark),
      var(--color-accent));
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 168, 232, 0.4);
}

/* ============================================
   11. FOOTER
   ============================================ */
footer {
  text-align: center;
  padding: 50px 0;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface) !important;
  margin-top: 60px;
  transition: all var(--transition-theme);
  position: relative;
  z-index: 10;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.footer-logo-img {
  height: 35px;
  width: auto;
  filter: drop-shadow(0 0 5px rgba(0, 168, 232, 0.5));
}

.footer-logo-text {
  font-family: var(--font-header);
  font-size: 1.3rem;
  color: var(--color-primary);
  transition: color var(--transition-theme);
}

.footer-tagline {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  letter-spacing: 1px;
}

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

/* ============================================
   12. ANIMATIONS
   ============================================ */
@keyframes status-blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

@keyframes scroll-wheel {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
}

@keyframes titleEntrance {
  0% {
    opacity: 0;
    letter-spacing: -0.05em;
    transform: translateY(40px);
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    letter-spacing: 0.15em;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes lineGrow {
  to {
    width: 150px;
  }
}

@keyframes pulseGlowDark {
  from {
    filter: drop-shadow(0 0 5px rgba(0, 168, 232, 0.4));
  }

  to {
    filter: drop-shadow(0 0 25px rgba(0, 168, 232, 0.8));
  }
}

@keyframes pulseGlowLight {
  from {
    filter: drop-shadow(0 0 5px rgba(0, 126, 167, 0.3));
  }

  to {
    filter: drop-shadow(0 0 15px rgba(0, 126, 167, 0.5));
  }
}

@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(0, 168, 232, 0.5);
  }

  50% {
    box-shadow: 0 0 20px rgba(0, 168, 232, 0.8);
  }
}

@keyframes iconRotateIn {
  from {
    transform: rotate(-90deg) scale(0);
    opacity: 0;
  }

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

@keyframes iconRotateOut {
  from {
    transform: rotate(0) scale(1);
    opacity: 1;
  }

  to {
    transform: rotate(90deg) scale(0);
    opacity: 0;
  }
}

/* ============================================
   13. MEDIA QUERIES
   ============================================ */
@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  section {
    padding: var(--padding-mobile);
  }

  .logo-img {
    height: 40px;
  }

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

  .theme-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  .theme-toggle-container {
    margin-left: 10px;
  }

  .toggle-icon {
    width: 20px;
    height: 20px;
  }

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

  #main-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 23, 31, 0.95);
    backdrop-filter: blur(10px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    z-index: 999;
  }

  :root[data-theme="light"] #main-nav {
    background: rgba(255, 255, 255, 0.95);
  }

  #main-nav.active {
    display: flex;
    z-index: 1001;
  }

  .nav-link {
    font-size: 1.2rem;
    padding: 15px;
  }

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

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

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

  .banner-content {
    margin: 0 auto;
    text-align: center;
    padding: 30px 20px;
    max-width: 100%;
    padding-right: 20px;
  }

  .banner-content h1 {
    text-align: center;
  }

  .rotating-text-container,
  .rotating-text,
  .rotating-text-line {
    justify-content: center;
    text-align: center;
  }

  .cta-container {
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .cta-button {
    width: 100%;
    max-width: 300px;
  }

  .scroll-indicator {
    justify-content: center;
  }

  .real-time-grid,
  .ai-services-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-content {
    gap: 30px;
  }

  .about-text p,
  .about-card {
    padding: 20px;
  }

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

  .highlight-card {
    grid-column: span 1;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {

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

@media (min-width: 1024px) {
  .highlight-card {
    background: linear-gradient(145deg,
        var(--color-surface-alt),
        rgba(0, 168, 232, 0.1));
  }
}

@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;
  }
}

/* ============================================
   14. HMI SCADA EFFECT STYLES
   ============================================ */
/* ===== HMI SCADA - local effect styles (append to style.css) ===== */
#HMI_SCADA {
  position: relative;
  overflow: visible;
}

/* Canvas layer */
.hmi-effect-wrapper {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* behind content (we'll push content to z-index:2) */
  pointer-events: none;
  overflow: hidden;
}

#HMI_SCADA .real-time-layout {
  position: relative;
  z-index: 2;
  /* content above the canvas */
}

/* Canvas full cover */
#hmi-canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.95;
  mix-blend-mode: screen;
  /* subtle brightening */
  filter: saturate(1.05) contrast(1.02);
}

/* small control (visually hidden on small screens) */
.hmi-controls {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 3;
  pointer-events: auto;
  /* allow clicks on the button */
}

/* Card entry animation only for this section (won't affect other .rt-card) */
#HMI_SCADA .rt-card {
  transform: translateY(24px) scale(0.99);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
  will-change: transform, opacity;
}

#HMI_SCADA .rt-card.in-view {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Table scanline highlight for the HMI table */
#HMI_SCADA .table-scan {
  position: relative;
  overflow: hidden;
}

#HMI_SCADA .table-scan::after {
  content: "";
  position: absolute;
  left: -150%;
  top: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(0, 168, 232, 0.12),
      transparent);
  transform: skewX(-12deg);
  animation: hmi-scan 3.2s linear infinite;
  pointer-events: none;
}

@keyframes hmi-scan {
  0% {
    left: -150%;
  }

  40% {
    left: 120%;
  }

  100% {
    left: 120%;
  }
}

/* small performance safeguard: reduce effects on very small screens */
@media (max-width: 720px) {
  #hmi-canvas {
    display: none;
  }

  .hmi-controls {
    display: none;
  }
}

/* ============================================
   CENTERED BLURRED HEADER CARD
   ============================================ */

.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centers the card horizontally */
  justify-content: center;
  width: 100%;
  text-align: center;
}

.header-glass-card {
  position: relative;
  /* Centering logic */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;

  /* The blur effect you requested */
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;

  /* Background and Border styling to match your other cards */
  background: var(--color-surface-light);
  border: 1px solid var(--color-surface-alt);
  border-radius: 12px;

  padding: 50px 30px;
  width: 100%;
  max-width: 1000px;
  /* Limits width so it doesn't stretch too far */
  overflow: hidden;
  z-index: 10;
}

/* Ensure text inside is also centered */
.header-glass-card .glitch-text {
  display: block;
  margin: 0 auto 15px auto;
  color: var(--header-card-text);
}

/* Light mode adjustment to ensure blur is visible */
[data-theme="light"] .header-glass-card {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(0, 52, 89, 0.2);
}

.header-glass-card .glitch-text::before,
.header-glass-card .glitch-text::after {
  color: var(--header-card-text);
  opacity: 0.5;
}

/* ============================================
   history slider styles
   ============================================ */
.history-slider-container {
  max-width: 1200px;
  margin: 40 auto;
  position: relative;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 40px;
  backdrop-filter: blur(10px);
}

.history-slide {
  display: none;
  /* Hidden by default */
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: fadeIn var(--transition-normal);
}

.history-slide.active {
  display: flex;
}

.slide-image-wrapper {
  width: 100%;
  height: 600px;
  /* Fixed height for consistency */
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  margin-bottom: 25px;
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-glow);
}

.slide-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensures images don't stretch */
}

.slider-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

/* ============================================
   GSAP SCROLL HISTORY SECTION (UPDATED)
   ============================================ */

/* Override the global header background when inside this section */
/* This class will be added by GSAP to the BODY tag */
body.history-scroll-active #main-header {
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#INTRO_SCROLL_WRAPPER {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* --- The Header Layer --- */
.intro-header-layer {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  z-index: 1;
  /* Lowest Z-index so it gets covered */
  padding: 0 20px;
  text-align: center;
}

/* --- The Container for all Images --- */
.history-pin-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  /* Sit above the header layer */
  pointer-events: none;
}

/* --- Common Panel Styles --- */
.history-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.panel-subtitle {
  font-size: 1.4rem;
  /* Increase this value (was likely around 1.1rem) */
  line-height: 1.6;
  margin-top: 10px;
  color: var(--color-text-muted);
}

.panel-overlay h3 {
  font-size: 2.4rem;
  color: var(--color-primary);
  /* Adjust this to your preference */
  max-width: 600px;
  /* Keeps the text from spanning too wide */
  margin: 0 auto;
}

.panel-overlay p {
  font-size: 1.4rem;
  /* Adjust this to your preference */
  max-width: 600px;
  /* Keeps the text from spanning too wide */
  margin: 0 auto;
}

/* --- Panel 1 (The Zoomer) --- */
.panel-1 {
  z-index: 10;
  display: flex;
  align-items: flex-end;
  /* Align to bottom initially */
  padding-bottom: 0;
}

.panel-1 .panel-img-wrapper {
  width: 600px;
  /* Initial Size */
  height: 400px;
  /* Initial Size */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  position: relative;
  transform: translateY(30vh);
  /* Start lower down */
  margin: 0 auto;
  /* Center horizontal */
}

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

/* Panel 1 Overlay Specifics */
.panel-1-overlay {
  opacity: 0;
  /* Hidden initially */
  transform: translateY(20px);
}

/* --- Panels 2, 3, 4, 5 (The Sliders) --- */
.panel-right {
  z-index: 11;
  /* Above panel 1 */
  transform: translateX(100%);
  background-color: var(--color-background);
}

.panel-content {
  width: 100%;
  height: 100%;
  position: relative;
}

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

.panel-overlay {
  position: absolute;
  bottom: 10%;
  left: 10%;
  background: rgba(0, 0, 0, 0.193);
  /* Dark background for readability */
  padding: 30px;
  border-left: 4px solid var(--color-primary);
  backdrop-filter: blur(5px);
  max-width: 500px;
  color: white;
  border-radius: 0 10px 10px 0;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .panel-1 .panel-img-wrapper {
    width: 90%;
    height: 300px;
  }

  .panel-subtitle {
    font-size: 1.1rem;
    /* Smaller size for mobile screens */
  }
}

/* ============================================
   IMMERSIVE SCROLL SECTION in real-time
   ============================================ */

/* Specific color for the Real-Time section header in Night Mode (Default) */
#REAL_TIME .glitch-text,
#REAL_TIME h2 {
  color: #ffffff;
  text-align: left;
  margin-left: 0;
  margin-right: auto;
  /* Remove white-space: nowrap; if you want the <br> to work correctly */
  display: block;

  /* Apply the massive size here explicitly */
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 0.9;
  margin-bottom: 20px;
}

#REAL_TIME .section-header {
  text-align: left;
  /* Aligns the container content */
}

#REAL_TIME .section-subtitle {
  text-align: left;
  margin-left: 0;
  /* Removes the auto margin that centers it */
  margin-right: auto;
  max-width: 900px;
  /* Optional: adjust width for better readability on left-align */
}

/* Specific color for the Real-Time section header in Day Mode (Light Theme) */
:root[data-theme="light"] #REAL_TIME .glitch-text,
:root[data-theme="light"] #REAL_TIME h2 {
  color: #ffffff;
  /* Replace with your preferred day mode color */
}

/* Targeted adjustment for Real-Time section card spacing */
#REAL_TIME .container,
#REAL_TIME .cards-grid {
  /* Replace .cards-grid with the actual class name if different */
  gap: 20px;
  /* Decrease this value to bring cards closer together */
}

/* If the cards use margins instead of gap */
#REAL_TIME .rt-card {
  margin-bottom: 20px;
}

/* Remove default section padding for this specific section to go full screen */
.immersive-section {
  padding: 0 !important;
  position: relative;
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-border-light);
}

.container-fluid {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* The Layout Grid */
.immersive-layout {
  display: flex;
  flex-wrap: wrap;
}

/* --- LEFT SIDE: THE STAGE (Sticky) --- */
.immersive-stage {
  width: 60%;
  /* Takes up 60% of width */
  height: 100vh;
  /* Full screen height */
  position: sticky;
  top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
  z-index: 1;
}

/* The Background Image Area */
.stage-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.stage-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Removed the filter line so colors are original */
  /* Added opacity to transition so it actually fades instead of blinking */
  transition: transform 0.5s ease, opacity 0.5s ease;
  will-change: opacity, transform;
}

/* Add this to style.css to enable the smooth transition fade */
.stage-image.image-fade-out {
  opacity: 0;
  transform: scale(1.05);
  /* Optional: Adds a subtle zoom during change */
}

/* Header Styles in this section */
.transparent-mode {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  text-align: left;
}

.massive-title {
  font-size: clamp(3rem, 6vw, 5rem);
  /* HUGE TEXT */
  line-height: 0.9;
  margin-bottom: 20px;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.align-left {
  text-align: left;
  margin-left: 0;
  font-size: 1.2rem;
  /* We set this to 90% so it stays inside the 60% image stage 
     but gives the text room to be huge */
  max-width: 90%;
  color: rgba(255, 255, 255, 0.8);
}

/* --- RIGHT SIDE: THE TRACK (Scrolling) --- */
.immersive-track {
  width: 40%;
  position: relative;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2));
  /* Create vertical space so cards appear one by one */
  padding-bottom: 20vh;
}

.track-item {
  min-height: 80vh;
  /* Each card gets its own full screen-ish height */
  display: flex;
  align-items: center;
  /* Center card vertically in its slot */
  justify-content: flex-start;
  padding: 40px;
  perspective: 1000px;
  position: relative;
  z-index: 1;
  /* Lower than the sticky card (50) */
  /* Optional: Add a transition so they don't snap awkwardly */
  transition: transform 0.3s ease-out;
}

/* 1. OUTER SPACING: Moves the card away from the edges and header */
.rt-intro-sticky-card {
  position: sticky;
  top: 110px;
  /* Distance from header */
  margin: 20px;
  /* Gap between the card and the right/left edges */
  z-index: 100;
  align-self: flex-start;
  pointer-events: all;
}

/* 2. ROUNDED CORNERS & INTERNAL SPACING */
.rt-intro-sticky-card .glass-card {
  padding: 35px !important;
  /* Breathing room for text inside */
  border-radius: 24px !important;
  /* Makes the corners nice and round */

  /* Standard glassmorphism styles to match your theme */
  background: var(--color-surface-alt) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--color-border);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);

  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 3. SCROLLING CARDS BEHAVIOR */
.scrolling-track .track-item:not(.rt-intro-sticky-card) {
  position: relative;
  z-index: 1;
  margin-top: 40vh;
  /* Space so the user sees the Intro card first */
  margin-left: 20px;
  /* Aligns them horizontally with the intro card */
  margin-right: 20px;
}

/* Ensure the scrolling cards also have rounded corners for consistency */
.track-item .glass-card {
  border-radius: 24px !important;
}

:root[data-theme="light"] .rt-card.side-entry {
  background: rgba(255, 255, 255, 0.9);
}

.card-number {
  font-family: "Courier New", monospace;
  font-size: 3rem;
  font-weight: 900;
  color: var(--color-surface-light);
  position: absolute;
  top: -20px;
  right: 20px;
  opacity: 0.5;
  z-index: 0;
}

.tech-list {
  list-style: none;
  padding: 0;
}

.tech-list li {
  border-bottom: 1px solid var(--color-border-light);
  padding: 10px 0;
  font-family: monospace;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .immersive-layout {
    flex-direction: column;
  }

  .immersive-stage {
    width: 100%;
    height: 60vh;
    /* Shorter on mobile */
    position: relative;
    /* Not sticky on mobile to allow scrolling past */
    padding: 30px;
  }

  .massive-title {
    font-size: 2.5rem;
  }

  .immersive-track {
    width: 100%;
    background: var(--color-background);
  }

  .track-item {
    min-height: auto;
    padding: 40px 20px;
    border-bottom: 1px solid var(--color-border-light);
  }
}

/* ============================================
   UPDATED AI SECTION (FIXED LAYOUT)
   ============================================ */

/* 1. LAYOUT CONTAINER - Fixes "Cards too big" & "Images missing" */
.ai-split-layout {
  display: flex;
  /* This puts Left and Right columns side-by-side */
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* 2. LEFT COLUMN - Holds the Header & Cards */
.ai-left-col {
  width: 50%;
  /* Takes half the screen */
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Aligns content to top, not center */
  padding-top: 40px;
  /* Pushes content down so it's not behind the Nav Bar */
  padding-left: 40px;
  padding-right: 40px;
  position: relative;
  z-index: 2;
}

/* 3. RIGHT COLUMN - Holds the Canvas/Images */
.ai-right-col {
  width: 50%;
  /* Takes the other half */
  height: 100vh;
  position: relative;
  z-index: 1;
}

/* 4. CANVAS WRAPPER */
.ai-video-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* 5. THE CANVAS ITSELF */
#ai-image-canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 6. CARD STACKING */
.ai-cards-list {
  position: relative;
  width: 100%;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -20px;
}

.ai-card {
  position: absolute;
  top: 50%;
  /* Center in the container */
  left: 0;
  width: 100%;
  /* Relative to the Left Column (so it fits nicely) */
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
}

/* Mobile Adjustments */
@media (max-width: 900px) {
  .ai-split-layout {
    flex-direction: column;
  }

  .ai-left-col,
  .ai-right-col {
    width: 100%;
    height: auto;
  }

  .ai-left-col {
    padding-top: 100px;
  }

  .ai-right-col {
    height: 50vh;
  }
}

/* ============================================
   AI EDGE SECTION STYLES (FIXED)
   ============================================ */

/* The container that makes the header sticky */
.sticky-header-container {
  position: -webkit-sticky;
  position: sticky;
  /* INCREASED SPACE: 120px pushes it down from the top/nav bar */
  top: 2px;
  z-index: 100;
  padding-bottom: 20px;
  margin-bottom: 50px;
  pointer-events: none;
  /* Allows scrolling/clicking through the empty space */
}

/* Modifying the glass card specifically for this section */
.ai-sticky-glass {
  pointer-events: auto;
  margin: 0 auto !important;
  width: 100%;
  max-width: 1100px !important;
  padding: 40px 30px !important;
  /* Increased padding for better look */

  /* CENTERING MAGIC */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  /* Glass Effect */
  background: rgba(0, 52, 89, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-radius: 16px;
}

/* Ensure the header text inside is centered */
.ai-sticky-glass h2,
.ai-sticky-glass .glitch-text {
  text-align: center;
  width: 100%;
  justify-content: center;
}

/* Light mode adjustment */
:root[data-theme="light"] .ai-sticky-glass {
  background: rgba(255, 255, 255, 0.85);
}

/* Mobile: Disable stickiness on small screens to save space */
@media (max-height: 800px) {
  .sticky-header-container {
    position: relative;
    top: 0;
    margin-bottom: 20px;
  }
}

/* ============================================
   15. SUB-PAGE LAYOUTS (Add to style.css)
   ============================================ */
body.sub-page {
  padding-top: 0;
  overflow-x: hidden;
}

/* The Split Layout (Text Left, Image Right) */
.split-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  gap: 60px;
  padding: 120px 5% 60px 5%;
  /* Top padding clears fixed header */
  position: relative;
  z-index: 2;
}

.split-section.reverse {
  flex-direction: row-reverse;
}

.split-text {
  flex: 1;
  max-width: 600px;
  z-index: 10;
}

/* The Image Container with 3D Depth */
.split-visual {
  flex: 1;
  max-width: 600px;
  height: 50vh;
  min-height: 400px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}

.split-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Responsive Fixes */
@media (max-width: 1024px) {
  .split-section {
    flex-direction: column !important;
    text-align: center;
    padding-top: 100px;
    gap: 40px;
  }

  .split-visual {
    width: 100%;
    height: 300px;
  }
}

/* ============================================
   CONTACT MODAL & FLOATING BUTTON
   ============================================ */

/* The Floating Button (FAB) */
.floating-contact-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 168, 232, 0.4);
  z-index: 2000;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.floating-contact-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 168, 232, 0.6);
}

/* The Icon inside the button */
.floating-contact-btn svg {
  width: 30px;
  height: 30px;
  fill: var(--color-background);
  /* Icon color matches page background */
  transition: fill 0.3s ease;
}

/* The Modal Overlay (Background Dimmer) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 2001;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

/* State when Open */
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* The Actual Form Box */
.modal-content {
  background: var(--color-surface-alt);
  padding: 40px;
  border-radius: 15px;
  width: 90%;
  max-width: 500px;
  position: relative;
  border: 1px solid var(--color-border);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

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

/* Close 'X' Button */
.modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.3s ease;
  line-height: 1;
}

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