:root {
  /* Colors - Dark Mode Theme */
  --bg-color: #0a0b1e;
  --bg-secondary: #14162e;
  --text-primary: #ffffff;
  --text-secondary: #a0a4b8;
  --primary-color: #4f7eff;
  /* Blue ish */
  --accent-color: #ff6b6b;
  /* Red/Orange ish for contrast */
  --gradient-1: linear-gradient(135deg, #4f7eff 0%, #9d50bb 100%);
  --gradient-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
  --border-glass: rgba(255, 255, 255, 0.1);
  --shadow-glow: 0 0 20px rgba(79, 126, 255, 0.3);

  /* Spacing & Layout */
  --container-width: 1200px;
  --header-height: 80px;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 8rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

body.is-framed .header,
body.is-framed .footer {
  display: none !important;
}

body.is-framed {
  padding-top: 0 !important;
}

html {
  scroll-behavior: smooth;
}

/* Background Animation */
.active-theme-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: radial-gradient(circle at 10% 20%, rgba(79, 126, 255, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(157, 80, 187, 0.15) 0%, transparent 40%);
  filter: blur(50px);
  animation: bgPulse 10s ease-in-out infinite alternate;
}

@keyframes bgPulse {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}

.active-theme-insight .active-theme-bg {
  background: radial-gradient(circle at 10% 20%, rgba(157, 80, 187, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(255, 107, 107, 0.15) 0%, transparent 40%);
}

/* Background Canvas */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* Behind content but above the -1 gradient background? No, content needs to be higher.
                 Wait, body creates a stacking context? 
                 Let's check existing z-indexes. 
                 .active-theme-bg is -1. 
                 Content usually has no z-index so it's auto (0). 
                 We want canvas behind content. 
                 Let's make active-theme-bg -2 and canvas -1. 
               */
  pointer-events: none;
}

/* Typography */
h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

strong {
  color: #CF5630;
}

h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

p {
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.text-gradient {
  background: var(--gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-blue {
  color: var(--primary-color);
}

.text-gold {
  color: #ffbd2e;
}

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

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-primary {
  background: var(--primary-color);
  color: white;
  box-shadow: 0 4px 15px rgba(79, 126, 255, 0.4);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 126, 255, 0.6);
}

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

.btn-outline:hover {
  border-color: white;
  background: rgba(255, 255, 255, 0.05);
}

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

.btn-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.btn-link:hover {
  text-decoration: underline;
}

/* Layout Utilities */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.section {
  padding: var(--spacing-xl) 0;
  position: relative;
  /* Ensure it handles potential positioning contexts */
}

main>section:nth-of-type(even) {
  background: rgba(0, 0, 0, 0.2);
  /* Darken even sections */
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
  /* Inner shadow for depth */
}

/* Hairline Separator between sections */
.section+.section {
  border-top: 1px solid var(--border-glass);
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: rgba(10, 11, 30, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-glass);
  height: var(--header-height);
  display: flex;
  align-items: center;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo img {
  height: 64px;
  /* Increased to 64px */
  width: auto;
}

.nav {
  display: none;
  /* Mobile first hidden, show on desktop */
}

@media (min-width: 768px) {
  .nav {
    display: flex;
    gap: 2rem;
  }
}

/* Mobile Nav Styles */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }
}

@media (max-width: 767px) {
  .header .btn-primary {
    display: none;
  }
}

.nav-toggle span {
  width: 100%;
  height: 3px;
  background-color: var(--text-primary);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.nav-toggle.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

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

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

@media (max-width: 767px) {
  .nav {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background: var(--bg-color);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.2rem;
    transition: left 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    z-index: 1000;
    display: flex;
    padding: 8rem 3rem 8rem;
    overflow-y: auto;
  }

  .mobile-only-link {
    display: block !important;
  }

  .nav.active {
    left: 0;
  }

  .nav-link {
    font-size: 1.2rem;
    font-weight: 600;
  }

  .nav-dropdown {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    text-align: left;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    pointer-events: auto;
    width: 100%;
  }

  .nav-dropdown.active .dropdown-menu {
    max-height: 500px;
    margin-top: 1rem;
  }

  .dropdown-link {
    padding: 0.5rem 0;
    font-size: 1rem;
    text-align: left;
    padding-left: 1rem;
  }

  .nav-mobile-cta {
    display: inline-block !important;
    position: absolute;
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 4rem);
    max-width: 300px;
    z-index: 1001;
    text-align: center;
  }
}

.nav-mobile-cta {
  display: none;
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.mobile-only-link {
  display: none;
}

.nav-link:hover,
.nav-link.active {
  color: #ffffff;
}

.nav-link.active {
  position: relative;
}

.dropdown-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

/* Dropdown Menu */
@media (min-width: 768px) {
  .nav-dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
  }
}

@media (min-width: 768px) {
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(10, 11, 30, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 0.5rem 0;
    min-width: 180px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
  }

  .nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
}

.dropdown-link {
  display: block;
  padding: 0.8rem 1.5rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}

.dropdown-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

/* Keep parent link active when dropdown is hovered */
.nav-dropdown:hover .nav-link {
  color: #ffffff;
}


/* Hero - Vertical Layout */
.hero {
  padding-top: calc(var(--header-height) + var(--spacing-md) + 20px);
  /* Reduced by 300px (from 320px) */
  min-height: 100vh;
  /* Full height for the grand feel */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  /* Hide floor overflow */
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  /* Reduced gap from lg */
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 2;
}

.hero-text {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 20;
  /* Ensure text/buttons stay above floating image if overlapped */
}

.center-actions {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* Hero Visuals Container */
.hero-visual-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -250px;
  /* Pulling up significantly as requested (approx -200px visual impact) */
  /* Ensure it has space */
  min-height: 500px;
}

/* Floor Animation/Position */
.hero-floor {
  position: absolute;
  bottom: 0px;
  /* Aligned to bottom of container, but container is flexible */
  left: 50%;
  /* Added scale(0.8) to reduce size as requested */
  transform: translateX(-50%) perspective(1000px) rotateX(10deg) scale(0.8);
  width: 120%;
  /* Wider than screen to cover edges */
  height: auto;
  z-index: -1;
  opacity: 0.8;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 100%);
}

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

/* Main Hero Image Floating */
.hero-main-image {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
}

.hero-image {
  width: 100%;
  max-width: 1200px;
  /* Increased from 900px (approx 1.3x) */
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
  transition: transform 0.5s ease;
  animation: heroFloat 6s ease-in-out infinite;
}

.hero-image:hover {
  transform: scale(1.05) translateY(-10px);
  /* Enhance scale on hover */
}

@keyframes heroFloat {

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

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


/* Slideshow */
.slideshow-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: 380px;
  /* Reduced from 500px */
  margin: 0 auto;
  margin-top: 3rem;
}

.slide-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Pointer events none for inactive slides to prevent interaction issues */
  pointer-events: none;
}

.slide-content.active {
  opacity: 1;
  z-index: 10;
  pointer-events: auto;
}

.slide-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: white;
}

.slide-subtitle {
  font-size: 1.2rem;
  color: var(--text-secondary);
  margin-bottom: 3rem;
}

.slide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  width: 100%;
}

@media (min-width: 768px) {
  .slide-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.slide-card {
  padding: 2rem;
  border-radius: 20px;
  /* Softer corners */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 180px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  position: relative;
}

.slide-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.slide-card h3 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: white;
  /* White text looks better on these dark/modern gradients */
}

.slide-card p {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  margin: 0;
  font-size: 1.1rem;
}

/* Specific Card Themes */
.blue-card {
  background: linear-gradient(135deg, rgba(79, 126, 255, 0.2), rgba(79, 126, 255, 0.05));
  border-color: rgba(79, 126, 255, 0.3);
  box-shadow: 0 0 20px rgba(79, 126, 255, 0.1);
  /* Subtle glow */
}

.blue-card:hover {
  box-shadow: 0 0 30px rgba(79, 126, 255, 0.2);
  border-color: rgba(79, 126, 255, 0.5);
}

.yellow-card {
  background: linear-gradient(135deg, rgba(255, 189, 46, 0.2), rgba(255, 189, 46, 0.05));
  border-color: rgba(255, 189, 46, 0.3);
  box-shadow: 0 0 20px rgba(255, 189, 46, 0.1);
  /* Subtle glow */
}

.yellow-card:hover {
  box-shadow: 0 0 30px rgba(255, 189, 46, 0.2);
  border-color: rgba(255, 189, 46, 0.5);
}

/* Flip Card Mechanics */
.card-flip-grid {
  perspective: 1000px;
}

.flip-card {
  background-color: transparent;
  height: 220px;
  perspective: 1200px;
  /* Increased perspective for better depth */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  cursor: pointer;
  will-change: transform;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  margin: 0 !important;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  /* Hardware acceleration */
  transform: translateZ(0);
}

/* Backface needs to be rotated initially */
.flip-card-back {
  transform: rotateY(180deg) translateZ(1px);
  /* Small Z-offset prevents fighting */
}

/* Prevent any flickering logic by keeping the container static */
.flip-card:hover {
  transform: none;
}

/* Ensure child elements don't trigger mouseleave/mouseenter loops */
.flip-card * {
  pointer-events: none;
}

.flip-card {
  pointer-events: auto;
}

/* Add a subtle highlight to the top edge for 3D feel */
.slide-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}


/* Split Section (Cards) */
.split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

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

.card {
  padding: 3rem;
  background: var(--bg-secondary);
  border-radius: 20px;
  border: 1px solid var(--border-glass);
  transition: transform 0.3s, box-shadow 0.3s;
}

.active-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-glow);
  border-color: rgba(79, 126, 255, 0.4);
}

.active-card:hover .btn-link {
  text-decoration: underline;
}

.card-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

/* Specific Card Layouts */
.side-image-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}

@media (min-width: 992px) {
  .side-image-card {
    flex-direction: row;
    text-align: left;
    align-items: center;
    padding-left: 2rem;
    /* Adjust padding for balance */
  }
}

.card-image-left {
  width: 240px;
  height: 240px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.card-text-block {
  flex: 1;
}

.card-text-block h3 {
  margin-bottom: 0.5rem;
  font-size: 2rem;
}

.feature-text-col {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  padding: 2.5rem;
  transition: transform 0.3s ease, background 0.3s ease;
}

.feature-text-col:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}

.feature-text-col h3 {
  /* Removed top border as card provides the boundary, added bottom accent instead or just spacing */
  margin-bottom: 1rem;
  font-size: 1.4rem;
  color: #fff;
}

.feature-text-col p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .features-text-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Blog Feed Styles */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.blog-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-color: rgba(79, 126, 255, 0.4);
}

.blog-image {
  height: 200px;
  width: 100%;
  object-fit: cover;
  background: #2a2a2a;
  /* Fallback */
}

.blog-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.blog-title {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: white;
  line-height: 1.4;
}

.blog-excerpt {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.blog-link:hover,
.blog-card-link:hover .blog-link {
  text-decoration: underline;
}

.loading-spinner {
  text-align: center;
  width: 100%;
  grid-column: 1 / -1;
  padding: 2rem;
  color: var(--text-secondary);
}

.feature-rows {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

/* Insight/General Feature Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: var(--gradient-glass);
  border: 1px solid var(--border-glass);
  padding: 2.5rem;
  border-radius: 20px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.feature-card h3 {
  font-size: 18px;
  margin-bottom: 1rem;
  color: #fff;
}

.feature-card p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.feature-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.video-placeholder {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.video-placeholder:hover {
  transform: scale(1.02);
}

.play-button {
  transition: transform 0.3s ease, background 0.3s ease;
}

.video-placeholder:hover .play-button {
  transform: scale(1.1);
  background: #ff5252;
}

.content-box {
  transition: transform 0.3s ease;
}

.content-box:hover {
  transform: translateY(-5px);
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 768px) {
  .feature-row {
    grid-template-columns: 1fr 1fr;
  }

  .feature-row.reverse {
    direction: rtl;
    /* Simple way to swap, text-align left reset needed */
  }

  .feature-row.reverse .feature-content {
    direction: ltr;
  }

  .feature-row-1-2 {
    grid-template-columns: 1fr 2fr;
  }
}

.feature-visual {
  height: 250px;
  background: var(--gradient-glass);
  border-radius: 16px;
  border: 1px solid var(--border-glass);
}

.visual-integrity {
  background: linear-gradient(135deg, rgba(39, 201, 63, 0.1), transparent);
}

.visual-team {
  background: linear-gradient(135deg, rgba(255, 189, 46, 0.1), transparent);
}

.visual-reporting {
  background: linear-gradient(135deg, rgba(79, 126, 255, 0.1), transparent);
}

/* AI Section (Full Bleed) */
.ai-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: rgba(0, 0, 0, 0.4);
  /* Darker full bleed bg */
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
}

.ai-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(79, 126, 255, 0.1), transparent 70%);
  pointer-events: none;
}

.ai-content-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

@media (min-width: 992px) {
  .ai-content-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

.panel-visual {
  height: 420px;
  background: #000;
  border-radius: 12px;
  position: relative;
  overflow: visible;
  /* Allow image to overflow */
  border: 1px solid var(--border-glass);
  box-shadow: 0 0 30px rgba(79, 126, 255, 0.1);
}

.ai-bg-image {
  width: 90%;
  height: 90%;
  object-fit: contain;
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 1;
}

.scanner-line {
  /* Ensure scanner stays within the box limits visually or clipped? 
     If overflow is visible, scanner might need its own container if it shouldn't bleed.
     But usually scanner is for the "detected" area. 
     Let's keep scanner strict to the box (width 100% of parent).
  */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #ff4444;
  box-shadow: 0 0 10px #ff4444, 0 0 20px #ff4444;
  /* Glow effect */
  animation: scan 3s linear infinite;
  z-index: 3;
}

@keyframes scan {
  0% {
    top: 0;
  }

  50% {
    top: 100%;
  }

  100% {
    top: 0;
  }
}

/* Logo Marquee Section */
.logo-marquee-section {
  padding: 3rem 0;
  background: var(--bg-color);
  overflow: hidden;
  border-top: 1px solid var(--border-glass);
}

.marquee-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
  display: flex;
  gap: 4rem;
  width: max-content;
  animation: marqueeScroll 40s linear infinite;
  /* Increased duration for more content */
}

.marquee-content img {
  height: 60px;
  /* Increased from 50px (20%) */
  width: auto;
  opacity: 1;
  /* Always full opacity */
  transition: transform 0.3s ease;
  filter: none;
  /* Always color */
}

.marquee-content img:hover {
  transform: scale(1.1);
  /* Slight zoom on hover instead of color change */
}

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

  100% {
    transform: translateX(-50%);
    /* Adjust based on how many sets. If 4 sets and we want seamless, moving -50% might be too much if content isn't doubled exactly. Usually use -50% if content is doubled 2x. Here we have 4x. Let's move -25%? No, standard is duplicated content. If we have 2 identical halves, -50% works. I pasted 4 sets. So moving -25% (one full set length) might be tricky if not calc'd. Actually, simply moving -50% of the WHOLE width will work if the first half is identical to the second half. Since I repeated the block 4 times, the first half (2 sets) is identical to the second half (2 sets). So -50% works perfectly. */
  }
}

/* Testimonials Marquee */
.testimonial-marquee-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 2rem 0;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.testimonial-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: scrollTestimonials 60s linear infinite;
  /* Slower scroll for readability */
}

/* Pause on hover */
.testimonial-track:hover {
  animation-play-state: paused;
}

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

  100% {
    transform: translateX(-50%);
    /* Move half the length (because we duplicated content) */
  }
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid var(--border-glass);
  min-width: 350px;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.testimonial-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testimonial-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 50%;
  /* Optional: make it circular */
  background: rgba(255, 255, 255, 0.1);
  /* Background for transparency */
  padding: 2px;
}

.author-info {
  display: flex;
  flex-direction: column;
}

.testimonial-header h4 {
  margin-bottom: 0.1rem;
  font-size: 1.1rem;
  color: var(--primary-color);
}

.testimonial-header span {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.testimonial-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  font-style: italic;
  color: #ddd;
}

/* Footer */
.footer {
  background: #05060f;
  border-top: 1px solid var(--border-glass);
  padding: 4rem 0 2rem;
  margin-top: 0;
}

.footer .logo img {
  height: 80px;
  width: auto;
  display: block;
  margin-top: 12px;
  /* Align with column titles */
  margin-bottom: 8px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-col h4 {
  margin-bottom: 1.5rem;
  color: white;
}

.footer-col a {
  display: block;
  color: var(--text-secondary);
  text-decoration: none;
  margin-bottom: 0.8rem;
  transition: color 0.3s;
}

.footer-col a:hover {
  color: var(--primary-color);
}

.footer-social {
  margin-top: 2rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.social-link {
  color: #ffffff;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.3s, color 0.3s;
}

.social-link:hover {
  transform: scale(1.1);
  color: var(--primary-color);
}

.social-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid var(--border-glass);
  font-size: 0.9rem;
}

/* Animations Classes */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 2.0s ease, transform 2.0s ease;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 2.0s ease, transform 2.0s ease;
}

.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 2.0s ease, transform 2.0s ease;
}

.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.delay-200 {
  transition-delay: 0.4s;
}

.delay-300 {
  transition-delay: 0.6s;
}

/* Mobile Adjustments */
@media (max-width: 768px) {

  /* Mobile Adjustments */
  .hero {
    padding-bottom: 0 !important;
    /* Minimize bottom padding */
    min-height: auto;
    /* Allow it to shrink */
  }

  h1 {
    font-size: 2.8rem;
    /* 80% of 3.5rem */
  }

  .hero-visual-container {
    margin-top: -150px;
    /* Brought down 100px from -250px */
    margin-bottom: 120px;
    /* Added 240px more space (was -120px) to prevent cut-off */
    transform: scale(0.9);
  }

  /* Increase spacing below Trajektory Solution (Slideshow) on mobile */
  #features {
    padding-bottom: 8rem;
  }

  /* Make slideshow taller on mobile to fit the wrapped grid */
  .slideshow-container {
    height: 650px;
    /* Increased to fit 2x2 grid + text */
    margin-bottom: 2rem;
  }

  .slide-grid {
    gap: 1rem;
  }

  .logo img {
    height: 48px;
    /* Slightly smaller logo on mobile */
  }

  /* Force text before image on mobile */
  .feature-row,
  .ai-content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    /* Changed from center to stretch */
  }

  .feature-content,
  .panel-content {
    order: -1;
  }

  .panel-visual {
    width: 100%;
    height: 300px;
    /* Reduced from 420px for mobile balance */
    margin-top: 1rem;
  }

  .ai-bg-image {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  /* Ensure card images are visible on mobile */
  .card-image-left {
    width: 100%;
    max-width: 240px;
    height: auto;
    margin-bottom: 1rem;
  }

  .side-image-card {
    padding: 2rem;
  }
}

/* Holistic Solution Section */
.holistic-section {
  padding: 4rem 0;
  background: var(--bg-primary);
  /* Or slightly different if needed */
}

.holistic-divider {
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
  margin: 2rem 0 1rem;
  position: relative;
}

.holistic-divider span {
  position: absolute;
  top: -12px;
  left: 0;
  background: var(--bg-primary);
  padding-right: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.holistic-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2rem 1rem;
  margin-top: 2rem;
  justify-items: center;
}

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

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

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  width: 80px;
}

.icon-box {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: rgba(255,255,255,0.05); */
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.icon-box img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.icon-item:hover .icon-box {
  transform: translateY(-5px);
}

.icon-item span {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
}

/* Text Features Grid (Trajektory is the difference) */
.section-description {
  max-width: 900px;
  margin: 0 auto 4rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.features-text-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  text-align: left;
}

/* Feature Text Column styled as Card */
.feature-text-col {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 2.5rem;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.feature-text-col::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.feature-text-col:hover {
  transform: translateY(-8px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.05);
}

.feature-text-col:hover::before {
  opacity: 1;
}

.feature-text-col h3 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.feature-text-col p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .features-text-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  z-index: 1000;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  justify-content: center;
  align-items: center;
}

.modal-overlay.active {
  opacity: 1;
}

.modal-container {
  width: 1280px;
  max-width: 95%;
  height: 90vh;
  /* 90% viewport height as requested */
  background: var(--bg-secondary);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
}

.modal-overlay.active .modal-container {
  transform: scale(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-glass);
  background: rgba(20, 22, 46, 0.95);
}

.modal-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: white;
  margin: 0;
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: white;
}

.modal-body {
  flex: 1;
  background: #fff;
  position: relative;
  overflow: hidden;
  /* Important for cropping */
}

.modal-iframe {
  width: 100%;
  height: calc(100% + 600px);
  /* Add extra height to push footer out */
  margin-top: -80px;
  /* Slice off header */
  border: none;
  display: block;
  background: white;
  position: relative;
  z-index: 10;
  transition: opacity 0.3s ease-in;
}

/* Loading state for iframe */
.modal-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #333;
  z-index: 0;
}

.modal-legacy-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* Split Modal Layout (New) */
.split-modal-container {
  max-width: 1100px;
  height: 80vh;
  max-height: 80vh;
  /* Fixed height for a consistent premium feel */
  background: white;
  /* Default base */
  border: none;
  overflow: hidden;
  /* To contain rounded corners properly */
}

.modal-split-content {
  display: flex;
  width: 100%;
  height: 100%;
}

.modal-left {
  flex: 0 0 45%;
  /* Slightly less than 50% to give more room to form */
  background: white;
  /* Dark backdrop for image */
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
  padding-top: 3rem;
  padding-left: 48px;
}

.modal-left img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: top center;
  opacity: 1;
  border-radius: 8px;
}

.modal-right {
  flex: 1;
  padding: 3rem 3rem 128px 3rem;
  background: white;
  color: #1a1a1a;
  overflow-y: auto;
  overflow-x: auto;
  /* Added horizontal scroll specifically as requested */
  display: flex;
  flex-direction: column;
}

/* Premium Scrollbar for Modal content */
.modal-right::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.modal-right::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.modal-right::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
  border: 2px solid #f1f1f1;
}

.modal-right::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

.modal-split-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #0f122b;
  line-height: 1.2;
}

.modal-subtitle {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #d9534f;
  /* Example accent color */
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.modal-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 2rem;
}

.modal-form-wrapper {
  margin-top: 0;
  min-height: 300px;
}

/* HubSpot Form Styling Overrides */
.modal-form-wrapper .hs-input,
.modal-form-wrapper fieldset {
  max-width: 100% !important;
}

.modal-form-wrapper .hs-input {
  height: 32px !important;
  min-height: 32px !important;
  font-size: 14px !important;
  line-height: normal !important;
  border-radius: 4px !important;
  border: 1px solid #ccc !important;
  padding: 0 5px !important;
  background-color: #f8f9fa !important;
  box-sizing: border-box !important;
}

/* Force specific spacing if needed */
.modal-form-wrapper .hs-form-field {
  margin-bottom: 16px !important;
}

/* Share Link Button */
.modal-share-container {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.modal-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid #e1e4e8;
  color: #586069;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-share-btn:hover {
  background: #f6f8fa;
  border-color: #d1d5da;
  color: #24292e;
}

.modal-share-btn.copied {
  background: #28a745;
  border-color: #28a745;
  color: white;
}

.share-icon svg {
  vertical-align: middle;
}

/* First and Last Name 50% Split */
.modal-form-wrapper .hs_firstname,
.modal-form-wrapper .hs_lastname {
  width: 50% !important;
  float: left !important;
  clear: none !important;
  box-sizing: border-box !important;
}


.modal-form-wrapper .hs_firstname {
  padding-right: 8px !important;
}

.modal-form-wrapper .hs_lastname {
  padding-left: 8px !important;
}

/* Ensure all inputs fill their container */
.modal-form-wrapper .hs-input {
  width: 100% !important;
}

/* Submit Button Styling */
/* Submit Button Styling */
.modal-form-wrapper .hs-button {
  background: var(--primary-color) !important;
  /* Solid color */
  color: white !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 12px 30px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(79, 126, 255, 0.4) !important;
  width: 100% !important;
}

.modal-form-wrapper .hs-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(79, 126, 255, 0.6) !important;
}

/* Label Styling */
.modal-form-wrapper .hs-form-field>label {
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
  display: block !important;
  color: #333 !important;
}

/* HubSpot Form Reset & Global Form Styles */
.modal-form-wrapper .hs-form ul,
.modal-form-wrapper .hs-form li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  /* Force left align */
}

/* Checkbox Text Styling */
.modal-form-wrapper .hs-form-checkbox-display p,
.modal-form-wrapper .hs-form-checkbox-display span,
.modal-form-wrapper .hs-form-boolean-checkbox-display p,
.modal-form-wrapper .hs-form-boolean-checkbox-display span {
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #333 !important;
  display: block !important;
  /* Treat as block to fill space */
  text-align: left !important;
}

/* Error Message Styling */
.modal-form-wrapper .hs-error-msgs label,
.modal-form-wrapper .hs-error-msg {
  font-size: 12px !important;
  color: #f2545b !important;
  /* Standard HubSpot Error Red or custom */
  text-align: left !important;
  margin-top: 4px !important;
}

/* Adjust close button for the light background */
.split-modal-container .modal-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  color: #333;
  z-index: 100;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

.split-modal-container .modal-close:hover {
  background: #eee;
  color: #000;
}

/* Mobile Responsive for Split Modal */
@media (max-width: 900px) {
  .modal-split-content {
    flex-direction: column;
    overflow-y: auto;
  }

  .modal-left {
    flex: 0 0 200px;
    /* Fixed height for image area on mobile */
    height: 200px;
  }

  .modal-right {
    padding: 1.5rem;
    overflow-y: visible;
    /* Let the container scroll */
  }

  .split-modal-container {
    height: 95vh;
    overflow-y: auto;
    /* Scrollable container */
  }
}

/* Company Page Specific Styles */
.hero-split-section {
  padding-top: calc(var(--header-height) + 4.8rem);
  padding-bottom: 4.8rem;
  min-height: auto;
  display: flex;
  align-items: center;
}

.hero-split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 992px) {
  .hero-split-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.hero-text-side {
  max-width: 600px;
}

.hero-text-side .hero-title {
  font-size: 3.15rem;
  line-height: 1.2;
  margin: 0;
  text-align: left;
}

.hero-image-side {
  width: 100%;
  position: relative;
  background: transparent;
  box-shadow: none;
}

.company-hero-img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  transition: transform 0.5s ease;
  display: block;
}

.company-hero-img:hover {
  transform: scale(1.02) translateY(-10px);
}

.story-timeline {
  max-width: 900px;
  margin: 4rem auto 0;
  position: relative;
  padding-left: 0;
}

/* Timeline vertical line removed as per user request */

.timeline-item {
  position: relative;
  margin-bottom: 4rem;
}

/* Timeline dot removed as per user request */

.timeline-content {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.03);
  padding: 2rem;
  border-radius: 20px;
  border: 1px solid var(--border-glass);
  transition: transform 0.3s ease, background 0.3s ease;
}

.timeline-content:hover {
  transform: translateX(10px);
  background: rgba(255, 255, 255, 0.05);
}

.timeline-thumbnail {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--primary-color);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.timeline-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.timeline-text-content {
  flex: 1;
}

.timeline-text-content h3 {
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
  color: #fff;
}

.timeline-text-content p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 600px) {
  .timeline-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem;
  margin-top: 4rem;
}

.logo-item {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  transition: transform 0.3s ease;
}

.logo-item:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.05);
}

.logo-icon-box {
  width: 100px;
  height: 100px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-icon-box img {
  max-width: 100%;
  max-height: 100%;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
}

.logo-item h3 {
  margin-bottom: 1rem;
}

.testimonial-section-stadium {
  position: relative;
  background: url('assets/testimonial-bg.jpg') center/cover no-repeat;
  padding: 10rem 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-section-stadium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 11, 30, 0.8), rgba(10, 11, 30, 0.4), rgba(10, 11, 30, 0.8));
}

.testimonial-content-overlay {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.testimonial-text {
  font-size: 2rem;
  font-style: italic;
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 2rem;
}

.testimonial-author .author-name {
  display: block;
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
}

.testimonial-author .author-title {
  color: var(--text-secondary);
}

.secondary-bg {
  background: rgba(0, 0, 0, 0.2);
}

.reverse-layout {
  flex-direction: row-reverse !important;
}

@media (max-width: 768px) {
  .reverse-layout {
    flex-direction: column !important;
  }
}

/* Company Page Overrides */
.active-theme-company .ai-section {
  background: transparent;
  border: none;
}

.active-theme-company .panel-visual {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Crew Page Styles */
.crew-section {
  padding-top: calc(var(--header-height) + 4rem);
}

.crew-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 3rem 2rem;
}

@media (min-width: 576px) {
  .crew-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .crew-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.crew-card {
  text-align: center;
  transition: transform 0.3s ease;
  position: relative;
  /* Anchor for popovers */
}

.crew-card:hover,
.crew-card.active {
  transform: translateY(-5px);
  z-index: 1000;
}

.crew-image-wrapper {
  width: 180px;
  height: 180px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--border-glass);
  background: var(--bg-secondary);
  position: relative;
}

.crew-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.crew-card:hover .crew-image {
  transform: scale(1.1);
}

.crew-info h3 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
  color: #fff;
}

.crew-title {
  font-size: 0.9rem;
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 1rem;
  display: block;
}

.crew-bio {
  display: none;
}

.crew-card .btn-link {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  display: inline-block;
}

/* Marketing Popup Specifics */
.marketing-modal .marketing-container {
  width: 1000px;
  max-width: 95%;
  height: auto;
  min-height: 600px;
  display: block;
  overflow: hidden;
  background: white;
  border-radius: 12px;
  border: none;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.marketing-modal .modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 100;
  color: #666;
  font-size: 1.5rem;
  background: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.marketing-content-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media (min-width: 768px) {
  .marketing-content-grid {
    flex-direction: row;
    min-height: 600px;
  }
}

.marketing-visual {
  flex: 1.1;
  /* Slightly wider for the image */
  background: #0a0b1e;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.marketing-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.marketing-text {
  flex: 0.9;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: white;
  color: #1a1a1a;
  text-align: left;
}

.marketing-text h2 {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 2rem;
  color: #000;
  letter-spacing: -0.02em;
}

.marketing-text p {
  color: #333;
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 3rem;
  font-weight: 400;
}

.marketing-actions {
  display: flex;
  justify-content: center;
}

.marketing-modal .btn-primary {
  background: #1a73e8;
  color: white;
  border-radius: 50px;
  padding: 1.2rem 3.5rem;
  font-size: 1.3rem;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(26, 115, 232, 0.3);
  width: auto;
  text-align: center;
}

.marketing-modal .btn-primary:hover {
  background: #1557b0;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26, 115, 232, 0.4);
}

/* Bio Popover */
.crew-popover {
  position: absolute;
  top: 25%;
  left: 48%;
  transform: scale(0.95);
  width: 280px;
  background: rgba(13, 15, 33, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(15px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.02);
  text-align: left;
  pointer-events: none;
}

.crew-card:hover .crew-popover,
.crew-card.active .crew-popover {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
}

.popover-section {
  margin-bottom: 1.25rem;
}

.popover-section:last-child {
  margin-bottom: 0;
}

.popover-section strong {
  display: block;
  color: #fff;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
  font-weight: 700;
}

.popover-section p {
  color: #a0a4b8;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  .crew-popover {
    width: 240px;
    padding: 1rem;
  }
}

/* Specific styling to fix the checkbox alignment */
.modal-form-wrapper .hs-form-booleancheckbox-display,
.modal-form-wrapper .hs-form-checkbox-display {
  display: flex !important;
  align-items: flex-start !important;
  /* Align to top so if text wraps, box stays at top */
  gap: 12px !important;
  /* Space between box and text */
}

/* Ensure the input (checkbox) doesn't take full width like other inputs */
.modal-form-wrapper .hs-form-booleancheckbox-display input,
.modal-form-wrapper .hs-form-checkbox-display input {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin-top: 4px !important;
  /* Slight adjustments for visual alignment with text line-height */
  margin-right: 0 !important;
  /* Reset margin since we use gap */
  cursor: pointer !important;
  flex-shrink: 0 !important;
  /* Prevent shrinking */
}

/* Ensure label text takes remaining space */
.modal-form-wrapper .hs-form-booleancheckbox-display span,
.modal-form-wrapper .hs-form-checkbox-display span {
  width: auto !important;
  flex: 1 !important;
  margin: 0 !important;
  /* Reset margins */
  text-align: left !important;
}

/* Override previously set block display for spans/p inside checkbox if needed */
.modal-form-wrapper .hs-form-booleancheckbox-display p,
.modal-form-wrapper .hs-form-checkbox-display p {
  margin: 0 !important;
  display: inline !important;
  /* Allow text to flow naturally */
}

/* Analytics Page Styles */
.analytics-page {
  overflow: hidden;
  background-color: var(--bg-color);
}

.analytics-container {
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Firefox */
}

.analytics-container::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

.fullscreen-section {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  scroll-snap-align: start;
  padding: 8rem 2rem 2rem 2rem;
  /* Increased top padding */
  overflow: hidden;
}

.section-content {
  max-width: 1200px;
  width: 100%;
  z-index: 2;
  display: flex;
  gap: 6rem;
  align-items: flex-start;
}

.section-text {
  flex: 1;
}

.section-visual {
  flex: 1.5;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

.section-visual.visual-large {
  height: 120%;
  display: flex;
  flex-direction: column;
}

.section-visual.visual-large .flourish-embed {
  height: 100%;
  width: 100%;
}

.fullscreen-section:nth-child(even) .section-content {
  flex-direction: row-reverse;
}

.dynamic-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(79, 126, 255, 0.05) 0%, transparent 80%),
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 50px 50px, 50px 50px;
}

#dustCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.geo-shape {
  position: absolute;
  border: 1px solid rgba(79, 126, 255, 0.2);
  background: rgba(79, 126, 255, 0.03);
  backdrop-filter: blur(2px);
  transition: transform 0.1s linear;
}

.shape-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  right: -5%;
  transform: rotate(45deg);
  border-radius: 40px;
}

.shape-2 {
  width: 200px;
  height: 200px;
  bottom: 10%;
  left: -5%;
  transform: rotate(-15deg);
  border-color: rgba(255, 107, 107, 0.2);
  background: rgba(255, 107, 107, 0.02);
}

.shape-3 {
  width: 150px;
  height: 150px;
  top: 40%;
  left: 15%;
  border-radius: 50%;
  border-style: dashed;
}

.shape-4 {
  width: 400px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 126, 255, 0.4), transparent);
  top: 25%;
  left: -10%;
  transform: rotate(30deg);
  border: none;
}

.analytics-hero {
  background: linear-gradient(135deg, rgba(84, 0, 31, 0.3) 0%, rgba(10, 11, 30, 0) 60%);
}

.hero-logo {
  width: 120px;
  margin-bottom: 2rem;
}

.chart-placeholder {
  width: 100%;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-style: italic;
  font-size: 1.1rem;
}

.analytics-page .header {
  background: transparent;
  border-bottom: none;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

.analytics-page .header.scrolled {
  background: rgba(10, 11, 30, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-glass);
}

@media (max-width: 992px) {
  .section-content {
    flex-direction: column !important;
    gap: 2rem;
    text-align: center;
  }

  .section-visual {
    width: 100%;
  }
}

/* Hero Stats Grid Dashboard */
.hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 900px;
  margin: 3rem auto 0;
}

.stat-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease;
  backdrop-filter: blur(10px);
}

.stat-card:hover {
  transform: translateY(-10px);
  border-color: var(--primary-color);
  background: rgba(79, 126, 255, 0.05);
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .hero-stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Hero Background Pattern */
.hero-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 70%);
  animation: patternMove 60s linear infinite;
}

@keyframes patternMove {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 1000px 1000px;
  }
}

/* Ensure the analytic sections feel grounded */
.fullscreen-section {
  background: radial-gradient(circle at 50% 50%, rgba(20, 22, 46, 0.5) 0%, transparent 100%);
}

/* Section Scroll Indicator */
.section-indicator {
  position: fixed;
  right: 50px;
  top: 120px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.indicator-number {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  font-family: 'Inter', sans-serif;
  margin-bottom: 10px;
}

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

.indicator-bar {
  width: 6px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.indicator-bar.active {
  background: var(--primary-color);
  box-shadow: 0 0 15px var(--primary-color);
  height: 60px;
}

.fullscreen-section.snap-section {
  scroll-snap-align: start;
  min-height: 100vh;
  padding: 0;
  display: flex;
  align-items: center;
}

.fullscreen-section .section-visual.visual-full-page {
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  flex: 1.5;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fullscreen-section .section-visual.visual-full-page img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

/* Cavaliers Themed Hero Styles */
:root {
  --cavs-wine: #860038;
  --cavs-gold: #FDBB30;
  --cavs-navy: #002B5C;
}

.analytics-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5%;
}

.hero-split-content {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  max-width: 1400px !important;
  width: 100%;
}

.hero-logo-container {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.hero-main-logo {
  width: 100%;
  max-width: 450px;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.4));
}

.hero-text-container {
  flex: 1.5;
  color: var(--cavs-gold);
  text-align: left;
}

.hero-title-main {
  font-size: 8rem;
  font-weight: 800;
  line-height: 0.9;
  margin-bottom: 0.5rem;
  color: var(--cavs-gold);
  text-transform: none;
}

.hero-subtitle-main {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--cavs-gold);
}

.hero-info-text {
  font-size: 1.1rem;
  color: rgba(253, 187, 48, 0.4);
  line-height: 1.6;
}

/* Responsive Overrides for Hero */
@media (max-width: 1200px) {
  .hero-title-main {
    font-size: 6rem;
  }

  .hero-subtitle-main {
    font-size: 2.5rem;
  }
}

@media (max-width: 992px) {
  .hero-split-content {
    flex-direction: column !important;
    text-align: center;
    gap: 2rem;
  }

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

  .hero-logo-container {
    justify-content: center;
  }

  .hero-main-logo {
    max-width: 300px;
  }

  .hero-title-main {
    font-size: 4.5rem;
  }
}

/* Active Brand Redesign - High Energy Sports Aesthetic */
.analytics-page {
  --active-bg: #020308;
  --active-accent: #00f2ff;
  /* Neon Cyan */
  --active-gold: #ffcc00;
  /* Sharp Gold */
  --active-wine: #9d0039;
  --glass-border: rgba(255, 255, 255, 0.1);
  background-color: var(--active-bg);
  background-image: linear-gradient(rgba(2, 3, 8, 0.7), rgba(2, 3, 8, 0.7)), url('assets/analytics_bg_basketball.png');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

.analytics-container {
  background-color: transparent;
}

.fullscreen-section {
  background: radial-gradient(circle at 50% 50%, rgba(0, 242, 255, 0.05) 0%, transparent 80%);
}

.section-visual {
  background: rgba(10, 11, 30, 0.4);
  border: 1px solid var(--glass-border);
  box-shadow: 0 0 40px rgba(0, 242, 255, 0.05);
  position: relative;
  overflow: hidden;
}

.section-visual::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--active-accent), transparent);
  animation: scanlineRow 4s linear infinite;
}

@keyframes scanlineRow {
  0% {
    transform: translateX(-100%);
  }

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

.text-gradient {
  background: linear-gradient(90deg, #fff, var(--active-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Sharp Geometric Background Elements - More Subtle */
.geo-shape {
  border: 1px solid rgba(0, 242, 255, 0.03);
  /* Reduced opacity */
  background: transparent;
  /* Removed background fill */
  box-shadow: none;
  /* Removed glow */
  opacity: 0.3;
}

.shape-1 {
  border-radius: 0;
  /* Sharper */
  border-width: 2px;
}

.shape-4 {
  background: linear-gradient(90deg, transparent, var(--active-accent), transparent);
  height: 1px;
  /* Thinner */
  opacity: 0.2;
  /* Much more subtle */
}

/* Grid & Scanline Effect Overlay */
.dynamic-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(0deg,
      rgba(0, 0, 0, 0.1) 0px,
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 2px);
  pointer-events: none;
  z-index: 5;
  opacity: 0.1;
  /* More subtle grid */
}

/* Snappier Animations */
.section-visual {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease !important;
}

.stat-value {
  color: var(--active-accent);
  text-shadow: 0 0 20px rgba(0, 242, 255, 0.3);
}

.hero-title-main {
  color: var(--active-gold);
  text-shadow: 2px 2px 0px rgba(157, 0, 57, 0.5);
}

.hero-subtitle-main {
  color: #fff;
  border-left: 4px solid var(--active-wine);
  padding-left: 1.5rem;
}

/* Hero Grid Guides & Refined Typography */
.hero-grid-guides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.guide-line {
  position: absolute;
  background-color: rgba(147, 51, 234, 0.3);
  /* Purple guide color from ref */
}

.guide-v {
  width: 1px;
  height: 100%;
}

.guide-h {
  width: 100%;
  height: 1px;
}

.guide-v-1 {
  left: 30%;
}

.guide-v-2 {
  left: 43%;
}

.guide-h-1 {
  top: 20%;
}

.hero-title-main {
  font-size: 96px;
  font-weight: 800;
  letter-spacing: -2px;
  color: #B29B66;
  /* Golden-Beige from ref */
}

.hero-subtitle-main {
  font-size: 4rem;
  font-weight: 700;
  color: #B29B66;
  margin-bottom: 2.5rem;
  border-left: none;
  /* Removed the line from previous iteration */
  padding-left: 0;
}

.hero-info-text p {
  font-size: 1.15rem;
  font-weight: 500;
  color: rgba(178, 155, 102, 0.6);
  /* Muted gold */
  margin-bottom: 0.5rem;
}

@media (max-width: 1400px) {
  .hero-title-main {
    font-size: 4.5rem;
  }

  .hero-subtitle-main {
    font-size: 3rem;
  }
}

/* Visibility & Animation Fixes */
.hero-split-content {
  position: relative;
  z-index: 10;
  /* Ensure content is above background scanlines */
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

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

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

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

.fade-in-up {
  opacity: 0;
  animation: fadeInUp 2.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fade-in-left {
  opacity: 0;
  animation: fadeInLeft 2.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fade-in-right {
  opacity: 0;
  animation: fadeInRight 2.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-200 {
  animation-delay: 0.4s;
}

.delay-300 {
  animation-delay: 0.6s;
}

.delay-400 {
  animation-delay: 0.4s;
}

/* Clean up hero typography to ensure visibility */
.hero-title-main,
.hero-subtitle-main {
  position: relative;
  z-index: 11;
  visibility: visible !important;
}

.hero-main-logo {
  position: relative;
  z-index: 11;
}

/* Analytics Section Header Styles */
.section-meta-date {
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 0.5rem;
}

.section-meta-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #FDBB30;
  /* Cavs Gold */
  line-height: 1;
  margin-bottom: 0.5rem;
}

.section-meta-matchup {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(253, 187, 48, 0.5);
  /* Muted Cavs Gold */
  margin-bottom: 2rem;
}

.numbered-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
}

.section-desc-text {
  font-size: 0.8rem;
  line-height: 1.4;
  color: #fff;
  max-width: 400px;
  opacity: 0.8;
}

/* Accessibility Widget Styles */
.accessibility-modes-high-contrast {
  --bg-color: #000 !important;
  --bg-secondary: #000 !important;
  --text-primary: #fff !important;
  --text-secondary: #fff !important;
  --primary-color: #ffff00 !important;
  --border-glass: #fff !important;
}

.accessibility-modes-high-contrast * {
  border-color: #fff !important;
  color: #fff !important;
  background-color: #000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.accessibility-modes-high-contrast a,
.accessibility-modes-high-contrast button {
  color: #ffff00 !important;
  text-decoration: underline !important;
}

html.accessibility-modes-greyscale {
  filter: grayscale(100%) !important;
}

html.accessibility-modes-invert {
  filter: invert(100%) hue-rotate(180deg) !important;
}

/* Exempt widget from inversion so it stays visible and usable */
html.accessibility-modes-invert .accessibility-widget {
  filter: invert(100%) hue-rotate(180deg) !important;
}

.accessibility-modes-highlight-links a {
  background-color: yellow !important;
  color: black !important;
  outline: 2px solid orange !important;
  text-decoration: underline !important;
}

.accessibility-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2147483647;
  font-family: 'Inter', sans-serif;
  transform: translateZ(0);
}

.accessibility-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.accessibility-btn:hover {
  transform: scale(1.1);
}

.accessibility-btn svg {
  width: 48px;
  height: 48px;
}

.accessibility-panel {
  position: absolute;
  bottom: 60px;
  right: 0;
  width: 300px;
  background: rgba(20, 22, 46, 0.95);
  backdrop-filter: blur(15px);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  display: none;
  flex-direction: column;
  gap: 1rem;
}

.accessibility-panel.active {
  display: flex;
  animation: panelOpen 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes panelOpen {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }

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

.accessibility-panel h4 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  border-bottom: 1px solid var(--border-glass);
  padding-bottom: 0.5rem;
}

.acc-feature-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.acc-btn {
  flex: 1;
  padding: 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, 0.05);
  color: white;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s;
}

.acc-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--primary-color);
}

.acc-btn-icon {
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.acc-btn.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.acc-reset {
  margin-top: 0.5rem;
  background: rgba(255, 107, 107, 0.2);
  border-color: rgba(255, 107, 107, 0.3);
}

.acc-reset:hover {
  background: rgba(255, 107, 107, 0.4);
  border-color: #ff6b6b;
}

/* Cookie Banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #0D0F21;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}

.cookie-banner.active {
  transform: translateY(0);
}

.cookie-banner-content {
  max-width: var(--container-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 992px) {
  .cookie-banner-content {
    flex-direction: row;
    justify-content: space-between;
    gap: 3rem;
  }
}

.cookie-text {
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}


.cookie-text a {
  color: #fff;
  text-decoration: underline;
  transition: opacity 0.2s;
}

.cookie-text a:hover {
  opacity: 0.8;
}

.cookie-actions {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 0.75rem 2.5rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 140px;
  text-align: center;
}

.cookie-btn-decline {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}

.cookie-btn-decline:hover {
  background: rgba(255, 255, 255, 0.1);
}

.cookie-btn-allow {
  background: #e0e0e0;
  /* Slightly dimmer white */
  border: 1px solid #e0e0e0;
  color: #0D0F21;
}

.cookie-btn-allow:hover {
  background: #ccc;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

/* Cookie Management Modal */
.cookie-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 500px;
  max-width: 90%;
  background: #0D0F21;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2.5rem;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
  color: #fff;
}

.cookie-modal.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.cookie-modal-header {
  margin-bottom: 2rem;
}

.cookie-modal-header h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #fff;
}

.cookie-modal-header p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.cookie-options-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.cookie-opt-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cookie-opt-info h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: #fff;
}

.cookie-opt-info p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0;
}

/* Toggle Switch */
.cookie-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.cookie-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.1);
  transition: .4s;
  border-radius: 24px;
}

.cookie-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.cookie-slider {
  background-color: var(--primary-color);
}

input:checked+.cookie-slider:before {
  transform: translateX(20px);
}

input:disabled+.cookie-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

.cookie-modal-footer {
  display: flex;
  justify-content: center;
}

.cookie-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.cookie-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* TTS Accessibility Player */
.tts-container {
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
}

.tts-toggle-btn {
  display: none;
  /* Hidden as controls are now in main panel */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(79, 126, 255, 0.4);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tts-toggle-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(79, 126, 255, 0.6);
}

.tts-controls {
  background: rgba(14, 15, 41, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-glass);
  border-radius: 30px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 15px;
  opacity: 0;
  transform: translateX(-20px);
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.tts-container.active .tts-controls {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

.tts-container.active .tts-toggle-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-glass);
}

.tts-btn {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: color 0.3s;
  padding: 4px;
}

.tts-btn:hover {
  color: var(--primary-color);
}

.tts-btn.active {
  color: var(--primary-color);
}

.tts-speed-select {
  background: rgba(255, 255, 255, 0.05);
  color: white;
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  outline: none;
}

.tts-highlight {
  background: rgba(79, 126, 255, 0.2);
  border-bottom: 2px solid var(--primary-color);
  transition: all 0.3s;
}

@media (max-width: 768px) {
  .tts-container {
    bottom: 20px;
    left: 20px;
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .tts-controls {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 150px;
    border-radius: 20px;
    padding: 12px;
  }
}