/* Landing Page Styles (Hero, Platform, Features, Solutions, Roadmap, AI, Contact) */

/* Hero Section */
.hero {
  padding-top: calc(80px + var(--spacing-xl)); /* Header offset */
  padding-bottom: var(--spacing-xl);
  min-height: 90vh; /* Almost full height but allows peek */
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden; /* Ensure animation stays within bounds */
  background: radial-gradient(circle at 50% 40%, #E1EDFF 0%, #FFFFFF 70%); /* Stronger light cold neutral */
}

.hero-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  opacity: 0;
  pointer-events: none;
}

.hero-ring--dashed {
  border-style: dashed;
  border-width: 2px;
}

.hero-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 4px solid var(--color-accent);
  box-shadow: 0 0 15px rgba(0, 85, 255, 0.3); /* Glow */
  opacity: 0;
  pointer-events: none;
}

.hero-content {
  max-width: 800px;
  position: relative;
  z-index: 1;
}

.hero-sub {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
  max-width: 600px;
}

/* Platform Section - Background Visual Layout */
#platform {
  position: relative;
  overflow: hidden;
  /* Visual positioning */
  background-repeat: no-repeat;
  background-position: right center; /* Fully shifted right for immersion */
  background-size: 70% auto; /* Reduced scale for better readability */
  /* Ensure height for visual */
  min-height: 600px;
  display: flex;
  align-items: center;
}

/* Language-specific backgrounds */
.platform-ru {
  background-image: url('../assets/platform-dashboard-ru.jpg');
}

.platform-en {
  background-image: url('../assets/platform-dashboard-en.jpg');
}

/* Gradient Overlay for Text Readability */
#platform::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%; /* Cover left side */
  height: 100%;
  background: linear-gradient(90deg, var(--color-surface) 50%, rgba(249, 249, 249, 0) 100%);
  z-index: 1;
}

/* Content positioning */
.platform-content {
  position: relative;
  z-index: 2; /* Above overlay */
  max-width: 500px; /* Constrain width */
  font-family: var(--font-mono); /* Apply Mono font to all content */
}

.platform-content h2,
.platform-content p,
.platform-content ul,
.platform-content li {
  font-family: var(--font-mono); /* Force Mono font inheritance if needed */
}

/* Fix for RU Headline wrapping (max 4 lines) */
.platform-ru .platform-content {
  max-width: 650px;
}

/* Mobile Responsive */
@media (max-width: 900px) {
  #platform {
    background-position: center bottom;
    background-size: 100% auto;
    align-items: flex-start; /* Align text to top */
    padding-bottom: 250px; /* Space for image */
  }

  #platform::before {
    width: 100%;
    height: 60%; /* Gradient from top */
    background: linear-gradient(180deg, var(--color-surface) 30%, rgba(249, 249, 249, 0) 100%);
  }

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

.code-block {
  border: 1px solid #333;
  padding: 2rem;
  border-radius: 8px;
  font-family: var(--font-mono); /* Apply mono font to entire block */
}

/* Ensure title inherits or explicitly sets mono if needed, though inheritance should work */
.code-block h4 {
  font-family: var(--font-mono);
}

.code-text {
  color: #888;
  font-size: 0.9rem;
  font-family: var(--font-mono);
}

/* AI Console Animation */
.console-output {
  display: flex;
  flex-direction: column;
}

.console-line {
  min-height: 1.5em; /* Prevent layout collapse */
  line-height: 1.6;
}

.text-success { color: #44ff44; }
.btn-white {
  background: white;
  color: black;
  border: none;
}
.btn-white:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
}

/* SVG Icons */
.icon-svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* AI Insights Section */
.bg-black {
  background-color: #000;
  color: #fff;
}

.bg-black p, 
.bg-black .tag, 
.bg-black .btn {
  font-family: 'IBM Plex Mono', monospace;
}

/* Features Section (Dark Theme) */
#features {
  background-color: #0b0c0e; /* Deep dark background */
  color: #ffffff;
  position: relative;
}

#features h2 {
  color: #ffffff;
}

#features .text-light {
  color: #8899a6;
}

/* Dark Cards */
#features .card {
  background-color: #16181b;
  border: 2px solid #2a2d32; /* 2x thickness */
  border-radius: 12px; /* Consistent rounded corners */
  box-shadow: none;
  display: flex;
  flex-direction: column;
  padding: 0; 
  overflow: hidden; 
  transition: border-color 0.2s ease, transform 0.2s ease;
  min-height: 420px; /* Reduced by ~15% from 480px */
}

#features .card:hover {
  border-color: #555555; /* Gray hover, NOT accent */
  transform: translateY(-2px);
  /* Removed large shadow for tighter feel */
}

#features .card-content {
  padding: 2rem; /* Reduced padding */
  flex: 0 0 auto; /* Takes strict space needed */
  /* Visually occupies top 1/3, but allowed to expand if needed, 
     but card-visual will push back */
  position: relative;
  z-index: 2;
}

#features .card-header {
  display: flex;
  flex-direction: row; /* Horizontal alignment */
  align-items: center; /* Center vertically */
  gap: 1rem; /* Clean spacing */
  margin-bottom: 1rem;
}

#features .card-icon {
  background-color: transparent; 
  color: #FFFFFF; 
  margin-bottom: 0;
  width: 32px; /* Slightly smaller container */
  height: 32px;
  font-size: 1.5rem;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#features .card-icon svg {
  stroke: #FFFFFF; 
  width: 28px; /* Adjusted size */
  height: 28px;
}

#features h3 {
  font-family: var(--font-mono); /* Technical aesthetic */
  font-size: 1.5rem; 
  font-weight: 600;
  margin-bottom: 0;
  color: #fff;
  line-height: 1.2;
}

#features p {
  font-family: var(--font-mono); /* Technical aesthetic */
  color: #a0aeb8; 
  font-size: 0.95rem; 
  line-height: 1.5;
  max-width: 95%; 
}

/* Abstract Visual Panels */
.card-visual {
  flex: 1 1 auto; 
  min-height: 240px; 
  width: 100%;
  /* Premium Sheen */
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 80%), #111214;
  border-top: 2px solid #222;
  position: relative;
  overflow: hidden;
  margin-top: auto;
  /* Centering for SVGs */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* SVGs inside visuals */
.card-visual svg {
  width: 100%;
  height: 100%;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.card-visual img {
  border-radius: 12px;
  max-width: 100%;
  height: auto;
  display: block; /* Eliminate bottom gap */
}

#features .card:hover .card-visual svg {
  opacity: 1;
}
/* Specific heights if needed, but min-height handles most */


/* Benefits Section */
#benefits {
  padding-top: var(--spacing-lg); /* Reduced spacing from Features */
  padding-bottom: var(--spacing-lg); /* Reduced from xl */
}

.benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: var(--spacing-lg);
}

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

@media (min-width: 1024px) {
  .benefits-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.benefit-card {
  background-color: var(--color-surface); /* Match generated image background */
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  /* GSAP will handle transforms */
  transform-style: preserve-3d;
  will-change: transform;
}

.benefit-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.benefit-card p {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 2rem;
  font-family: var(--font-mono); /* Technical typography */
}

.benefit-visual {
  margin-top: auto;
  width: 100%;
  height: 160px; /* Slight increase to accommodate padding and scale */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F6F8FB; /* Light neutral container */
  border-radius: 16px;
  padding: 16px;
  position: relative;
  overflow: hidden; /* Clip image to radius */
}

.benefit-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  border-radius: 14px;
  transform: scale(1.5); /* Increase visual dominance */
}

/* Specific adjustment for "availability" (grid) icon to optically match others */
.benefits-grid .benefit-card:nth-child(5) .benefit-visual img {
  transform: scale(1.43);
}

/* Solutions Section (Redesign - Split Layout) */
#solutions {
  padding-top: var(--spacing-lg); /* Reduced from xl */
}

.solutions-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Filter Tags (Top) */
.solution-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: var(--spacing-md);
  /* Align left or center based on pref, user asked for top filter. Left/Center is fine. Center matches previous aesthetic */
  justify-content: flex-start; 
}

.solution-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  background-color: #FFFFFF;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace;
}

.solution-tag:hover {
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

.solution-tag.active {
  background-color: var(--color-text-primary);
  color: #FFFFFF;
  border-color: var(--color-text-primary);
}

/* Split Layout Container */
.solutions-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  overflow: hidden; /* Important for slider constraints */
}

@media (min-width: 1024px) {
  .solutions-split {
    grid-template-columns: 35% 65%; /* Adjusted to roughly 30/70 visual weight causing overflow */
    gap: 4rem;
    align-items: flex-start; /* Align text top or center? Center usually better for 1-paragraph */
    align-items: center;
  }
}

/* Left Column: Text */
.solutions-text {
  max-width: 480px; 
}

.solutions-text h2 {
  margin-bottom: 1rem;
}

.solutions-text p {
  margin-bottom: 2rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  font-family: 'IBM Plex Mono', monospace; /* Technical font per user request */
}

.solutions-text .btn {
  font-family: 'IBM Plex Mono', monospace;
}

/* Right Column: Slider Showcase */
.solutions-showcase {
  position: relative;
  width: 100%;
  /* To achieve the peek effect, we need the container to allow overflow visible horizontally
     OR we intentionally size the inner track wider. 
     Let's try a simple flex track within a container that has padding-right.
  */
  overflow-x: hidden; 
  border-radius: 16px;
  /* Cinematic ratio preference */
  height: 400px; 
}

.slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.slide {
  /* 
     Logic: We want to show 1 full image + ~25-30% of the next.
     Reduced from 85% to 75% to increase the "peek" effect by ~50%.
  */
  min-width: 75%; 
  margin-right: 1.5rem;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background-color: #E0E0E0;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* Overlay for text readability (optional per usage) */
.slide-overlay {
  position: absolute;
  top: 0; 
  left: 0; 
  width: 100%; height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0.4), transparent);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .solutions-showcase {
    height: 280px;
  }
  .slide {
    min-width: 90%;
  }
}

/* High-End Integration Scene (Glass & Neon) */
.integrationSection {
  padding: var(--spacing-lg) 0;
  position: relative;
  overflow: hidden;
  perspective: 1200px; /* Enhanced depth */
}

/* Typography Update: IBM Plex Mono for technical feel */
.integrationSection .container p,
.integrationSection .nodeLabel, 
.integrationSection .glassFace {
    font-family: 'IBM Plex Mono', monospace;
}
/* Ensure header stays default (Inter) or whatever h2 is globally */
.integrationSection h2 {
    font-family: var(--font-primary); /* Assuming --font-primary is Inter/default */
}

.integrationSceneWrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 400px;
  margin: var(--spacing-lg) auto 0;
  transform-style: preserve-3d;
}

/* SVG Channels Layer (Multi-Layer Pipes) */
.dataChannels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}

.pipeGroup {
  filter: drop-shadow(0 0 8px rgba(90, 198, 243, 0.4));
}

/* Layer 1: Matte Body (Glass Tubing) */
.pipeBody {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 8px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Layer 2: Neon Core */
.pipeCore {
  stroke: var(--color-accent); /* Cyan */
  stroke-width: 2px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
}

/* Layer 3: Energy Packets */
.energyPacket {
  fill: #fff;
  filter: drop-shadow(0 0 4px var(--color-accent)) drop-shadow(0 0 8px var(--color-accent));
  opacity: 0; /* Animated */
  mix-blend-mode: screen;
}


/* 3D Scene Container */
.scene3D {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  z-index: 10;
  pointer-events: none;
}

/* --- Quantoo Core (Glass Cube) --- */
.quantooCore {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px; /* 2x size (was 120) */
  height: 240px;
  transform-style: preserve-3d;
  margin-left: -120px;
  margin-top: -120px;
  animation: floatCube 6s ease-in-out infinite;
}

@keyframes floatCube {
  0%, 100% { transform: translateY(0px) rotateX(0deg); }
  50% { transform: translateY(-15px) rotateX(5deg); }
}

.glassCube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

.glassFace {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.03); /* Faint glass */
  border: 1px solid rgba(90, 198, 243, 0.4);
  box-shadow: 0 0 20px rgba(90, 198, 243, 0.1) inset;
  backdrop-filter: blur(2px); /* Glass effect */
  border-radius: 16px; /* Rounded corners */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #000; /* Black for visibility */
  backface-visibility: visible;
  font-family: 'IBM Plex Mono', monospace;
  /* Quantoo Label is now separate */
}

/* Face Transforms assuming 240px size -> 120px offset */
.quantooCore .faceFront  { transform: translateZ(120px); }
.quantooCore .faceBack   { transform: rotateY(180deg) translateZ(120px); }
.quantooCore .faceRight  { transform: rotateY(90deg) translateZ(120px); }
.quantooCore .faceLeft   { transform: rotateY(-90deg) translateZ(120px); }
.quantooCore .faceTop    { transform: rotateX(90deg) translateZ(120px); }
.quantooCore .faceBottom { transform: rotateX(-90deg) translateZ(120px); }

.processingUnit {
  position: absolute;
  top: 50%; left: 50%;
  width: 100px; height: 100px; /* Larger core */
  transform: translate(-50%, -50%) translateZ(0);
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
  filter: blur(15px); /* More blur for bigger object */
  opacity: 0.8;
  border-radius: 50%;
  animation: corePulse 3s infinite ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem; /* Larger text */
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 0 10px var(--color-accent);
  letter-spacing: 1px;
}

.coreLabel {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) translateZ(0px); /* Centered inside cube */
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    color: #000; /* Black for visibility on glass */
    font-size: 1.2rem;
    pointer-events: none;
    backface-visibility: hidden;
    white-space: nowrap;
    /* Flex for logo alignment */
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes corePulse {
  0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.8); }
  50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.2); }
}

/* --- External Nodes (Small Glass Cubes) --- */
.externalNode {
  position: absolute;
  top: var(--y); 
  left: var(--x);
  width: 90px; /* 1.5x size (was 60) */
  height: 90px;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.smallCube {
  width: 90px;
  height: 90px; 
}

/* Small Cube Transforms (90px => 45px offset) */
.smallCube .faceFront  { transform: translateZ(45px); }
.smallCube .faceBack   { transform: rotateY(180deg) translateZ(45px); }
.smallCube .faceRight  { transform: rotateY(90deg) translateZ(45px); }
.smallCube .faceLeft   { transform: rotateY(-90deg) translateZ(45px); }
.smallCube .faceTop    { transform: rotateX(90deg) translateZ(45px); }
.smallCube .faceBottom { transform: rotateX(-90deg) translateZ(45px); }

.serverStack {
  position: absolute;
  top: 50%; left: 50%;
  width: 45px; height: 60px; /* Scaled up */
  transform: translate(-50%, -50%);
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.8),
    rgba(255,255,255,0.8) 2px,
    transparent 2px,
    transparent 8px
  );
  opacity: 0.5;
}

.nodeLabel {
  position: absolute;
  top: 100px; /* Adjusted for bigger cube (90px + gap) */
  font-size: 0.85rem; /* Slight increase */
  font-weight: 600;
  background: rgba(255,255,255,0.9);
  color: var(--color-text-primary);
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  white-space: nowrap;
  transform: translateZ(50px); /* Float above glass */
}


/* Mobile Responsive */
@media (max-width: 768px) {
  .integrationSceneWrapper {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding-bottom: 2rem;
  }
  
  .dataChannels { display: none; }
  
  .scene3D {
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  
  .quantooCore {
    position: relative;
    top: auto; left: auto;
    margin: 0;
    transform: rotateX(-15deg) rotateY(25deg);
  }
  
  .externalNode {
    position: relative;
    top: auto !important;
    left: auto !important;
    transform: none;
  }
}

/* Ensure headline handles split text (Characters) */
.contact-headline {
  overflow: hidden; /* Hide content before check */
}

/* Word wrapper to keep chars together but allow line breaks between words */
.contact-headline .word-wrapper {
  display: inline-block;
  white-space: nowrap;
  margin-right: 0.2em; /* Space between words */
}

.contact-headline .char-inner {
  display: inline-block;
  transform: translateY(15px); /* Slightly increased distance for scrub feel */
  opacity: 1 !important; /* Force visible */
  will-change: transform, opacity;
}

.contact-helper {
  font-size: 0.825rem;
  color: var(--color-text-tertiary); /* Light/Subtle */
  margin-top: 1rem;
  font-family: var(--font-mono);
  opacity: 1 !important; /* Force visible */
}

.contact-cta-wrapper {
  margin-top: var(--spacing-lg);
  opacity: 1 !important; /* Force visible */
}

/* Redesigned Roadmap (Horizontal Chessboard) */

.roadmap-container {
  display: flex;
  flex-direction: column; /* Mobile Default */
  position: relative;
  gap: 2rem;
  margin-top: var(--spacing-lg);
  padding: 0 1rem;
}

.roadmap-line {
  position: absolute;
  left: 27px; /* Matches dot center */
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--color-border);
  z-index: 0;
}

.roadmap-item {
  position: relative; /* Context for dot */
  display: flex;
  gap: 2rem;
  z-index: 1;
}

.roadmap-dot {
  width: 12px;
  height: 12px;
  background-color: var(--color-text-primary);
  border-radius: 50%;
  border: 2px solid var(--color-surface); /* White outline */
  flex-shrink: 0;
  margin-top: 6px; /* Align with text top approximately */
  margin-left: 21px; /* Center on line (27px center - 6px half-width) */
}

.roadmap-content {
  flex: 1;
  padding-bottom: 2rem;
  font-family: var(--font-mono); /* IBM Plex Mono */
}

.roadmap-quarter {
  display: inline-block;
  font-family: var(--font-mono); /* IBM Plex Mono */
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
  background: var(--color-surface-hover);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
}

.roadmap-content h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-family: var(--font-mono);
}

.roadmap-content p {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  font-family: var(--font-mono);
}

/* Desktop: Horizontal Chessboard */
@media (min-width: 900px) {
  .roadmap-container {
    flex-direction: row;
    align-items: center; /* Center items on the line vertically? No, we use absolute positioning */
    justify-content: space-between;
    gap: 0;
    padding: 180px 0; /* Space for Top/Bottom content */
    margin-top: 0;
  }

  .roadmap-line {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-border);
    transform: translateY(-50%);
  }

  .roadmap-item {
    flex: 1;
    display: block; /* Reset flex */
    text-align: center;
    padding: 0 0.5rem; /* Reduced spacing to fit text better */
    margin: 0;
  }

  .roadmap-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 10px;
    height: 10px;
    background-color: var(--color-text-primary);
    border: none; /* Clean solid dot */
  }

  .roadmap-content {
    position: absolute;
    width: 100%;
    left: 0;
    padding: 0;
    /* Reset mobile styles */
  }

  /* Odd Items: Top */
  /* Note: Because there is a .roadmap-line div as first child, items are 2,3,4... */
  /* Item 1 is child 2 (even) */
  /* Item 2 is child 3 (odd) */
  /* But wait, we want textual "Item 1" to be Top, "Item 2" Bottom. */
  /* nth-child(2) -> Item 1 -> Top */
  /* nth-child(3) -> Item 2 -> Bottom */
  
  .roadmap-item:nth-child(even) .roadmap-content {
    bottom: 50%;
    margin-bottom: 30px; /* Space from line */
  }
  
  .roadmap-item:nth-child(odd) .roadmap-content {
    top: 50%;
    margin-top: 30px; /* Space from line */
  }

  /* Connector Lines (Optional - Vertical line from dot to text) */
  .roadmap-content::before {
    content: '';
    position: absolute;
    left: 50%;
    width: 1px;
    height: 30px; /* Match margin */
    background-color: var(--color-border);
    opacity: 0.5;
  }

  /* Connect downwards to dot for Top items */
  .roadmap-item:nth-child(even) .roadmap-content::before {
    bottom: -30px; 
  }

  /* Connect upwards to dot for Bottom items */
  .roadmap-item:nth-child(odd) .roadmap-content::before {
    top: -30px; 
  }
}

/* Dark Mode Roadmap Theme */

.bg-dark-roadmap {
  background-color: #0A0A0A; /* Deep dark background */
  color: #FFFFFF;
  padding: var(--spacing-lg) 0;
}

.bg-dark-roadmap h2 {
  color: #FFFFFF;
}

/* Override Lines & Dots */
.bg-dark-roadmap .roadmap-line {
  background-color: rgba(255, 255, 255, 0.15); /* Subtle light line */
}

.bg-dark-roadmap .roadmap-dot {
  background-color: #FFFFFF; /* White dots on dark */
  border: none; /* No outline needed on dark */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* Slight glow */
}

/* Override Content Text */
.bg-dark-roadmap .roadmap-content h3 {
  color: #FFFFFF;
}

.bg-dark-roadmap .roadmap-content p {
  color: #B0B0B0; /* Light gray for readability */
}

/* Override Labels */
.bg-dark-roadmap .roadmap-quarter {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-accent); /* Cyan accent remains */
}

/* Connector Lines Override */
@media (min-width: 900px) {
  .bg-dark-roadmap .roadmap-content::before {
    background-color: rgba(255, 255, 255, 0.15);
  }
}