/* Metride Design System & Main Styles */

:root {
  /* Brand Colors */
  --primary-blue: #3A98B9;
  --secondary-blue: #B9E9FC;
  --accent-sky: #7ed0ec;
  --gold: #FFB800;
  --success: #4CAF50;
  --error: #F44336;

  /* Light Theme Defaults */
  --bg-color: #F8FAFC;
  --surface-color: #FFFFFF;
  --text-main: #1A374D;
  --text-secondary: #6F7D8C;
  --border-color: #E2E8F0;
  --nav-bg: rgba(255, 255, 255, 0.9);
  --shadow-color: rgba(0, 0, 0, 0.05);

  /* Dimensions & Spacing */
  --container-width: 1200px;
  --header-height: 70px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 24px;
}

[data-theme="dark"] {
  /* Dark Theme Overrides */
  --bg-color: #121212;
  --surface-color: #1E2528;
  --text-main: #F5F9FC;
  --text-secondary: #A0AAB4;
  --border-color: #2C3E50;
  --nav-bg: rgba(18, 18, 18, 0.9);
  --shadow-color: rgba(0, 0, 0, 0.3);
}

/* Base Reset & Typography */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Outfit', sans-serif;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 1rem;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

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

a {
  text-decoration: none;
  color: var(--primary-blue);
  transition: color 0.2s;
}

ul {
  list-style: none;
}

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

.section {
  padding: 80px 0;
  position: relative;
  /* Contain absolute elements like curvy track */
}

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

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid {
  display: grid;
  gap: 2rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1rem;
  border: none;
}

.btn-primary {
  background-color: var(--primary-blue);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-color);
  opacity: 0.9;
}

.btn-secondary {
  background-color: var(--secondary-blue);
  color: #1A374D;
  /* Use dark text for contrast on light blue */
}

.btn-secondary:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.btn-outline {
  border: 2px solid var(--border-color);
  color: var(--text-main);
  background: transparent;
}

.btn-outline:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

/* Animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
}

.stagger-1 {
  animation-delay: 0.1s;
}

.stagger-2 {
  animation-delay: 0.2s;
}

.stagger-3 {
  animation-delay: 0.3s;
}

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

/* Navbar */
.navbar {
  height: var(--header-height);
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 60px);
  /* Padding from left/right sides */
  max-width: var(--container-width);
  /* Don't stretch too wide on huge screens */
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  z-index: 1000;
  border-radius: 20px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar.navbar-hidden {
  transform: translateX(-50%) translateY(-150%);
}

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

.logo {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  margin: 0 auto;
  /* Center the links group */
}

.nav-links a {
  color: var(--text-main);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 8px 16px;
  border-radius: 20px;
  transition: all 0.2s ease;
}

.nav-links a:hover {
  color: var(--primary-blue);
  background-color: var(--border-color);
}

.nav-buttons .btn {
  color: white !important;
  /* Ensure CTA is white */
}

.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-main);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.theme-toggle:hover {
  background-color: var(--border-color);
  /* Subtle background on hover */
  transform: rotate(15deg);
  /* Playful little rotation */
}

/* Hero Section */
.hero {
  padding-top: calc(var(--header-height) + 60px);
  padding-bottom: 60px;
  min-height: 90vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-content {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}

.hero-text h1 {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  color: var(--text-main);
}

/* Hero Enhancements */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(58, 152, 185, 0.1);
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 24px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--primary-blue);
  border: 1px solid rgba(58, 152, 185, 0.2);
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(58, 152, 185, 0.3);
  animation: pulseDot 2s infinite;
}

.text-gradient-animated {
  background: linear-gradient(120deg, var(--primary-blue), var(--secondary-blue), var(--accent-sky));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 4s linear infinite;
  display: inline-block;
}

.btn-glow {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 15px rgba(58, 152, 185, 0.3);
  padding-left: 28px;
  padding-right: 28px;
}

.btn-glow:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 25px rgba(58, 152, 185, 0.5);
}

.btn-glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: 0.5s;
}

.btn-glow:hover::after {
  left: 100%;
}

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

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

@keyframes pulseDot {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 2px rgba(58, 152, 185, 0.3);
  }

  50% {
    transform: scale(1.2);
    box-shadow: 0 0 0 6px rgba(58, 152, 185, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 2px rgba(58, 152, 185, 0.3);
  }
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 2.5rem;
  max-width: 500px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
}

/* Phone Mockup (CSS Only representation for now, or imagine an image) */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.phone-mockup {
  width: 300px;
  height: 600px;
  /* background: var(--surface-color); Removed to let SVG handle bg */
  /* border: 12px solid #333; Removed */
  border-radius: 40px;
  /* Kept for shadow clipping if needed, but SVG has its own radius */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  position: relative;
  /* overflow: hidden; Removed to allow SVG glow to bleed if needed, or keep if masking is desired. Keeping for safety for now */
  z-index: 1;
}

/* Features Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}


/* Curvy Track Decoration */
.curvy-track-container {
  position: absolute;
  top: 150px;
  /* Start below header */
  left: 0;
  width: 100%;
  height: 80%;
  /* Cover most of the section */
  z-index: 0;
  /* Behind content */
  pointer-events: none;
  overflow: hidden;
}

.curvy-track-svg {
  width: 100%;
  height: 100%;
  opacity: 0.4;
}

.curvy-track-path {
  stroke: var(--primary-blue);
  stroke-width: 4px;
  stroke-dasharray: 20 20;
  animation: dashScroll 60s linear infinite;
}

@keyframes dashScroll {
  to {
    stroke-dashoffset: -1000;
  }
}

/* Ensure feature cards sit above the track */
.feature-split {
  position: relative;
  z-index: 1;
}

.features-grid {
  position: relative;
  z-index: 1;
}

.feature-card {
  background: var(--surface-color);
  padding: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary-blue);
}

.feature-icon {
  width: 50px;
  height: 50px;
  background: var(--secondary-blue);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--primary-blue);
}

/* FAQ */
.faq-grid {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--border-color);
  padding: 24px 0;
}

.faq-question {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-main);
}

/* Footer */
.footer {
  background: var(--surface-color);
  color: var(--text-main);
  padding: 80px 0 40px;
  margin-top: 100px;
  border-top: 4px solid var(--primary-blue);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.footer-content {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}

.footer h4 {
  color: var(--primary-blue);
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer p {
  color: var(--text-secondary);
  line-height: 1.6;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-links span {
  color: var(--text-main);
  font-weight: 700;
  margin-bottom: 8px;
  display: block;
  font-size: 1.1rem;
}

.footer-links a {
  color: var(--text-secondary);
  transition: color 0.2s ease, padding-left 0.2s ease;
  position: relative;
}

.footer-links a:hover {
  color: var(--primary-blue);
  padding-left: 5px;
}

.social-links {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.social-icon {
  width: 40px;
  height: 40px;
  background: var(--bg-color);
  border-radius: 50%;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  transition: background 0.3s, transform 0.3s, color 0.3s;
}

.social-icon:hover {
  background: var(--primary-blue);
  color: white;
  transform: translateY(-3px);
  border-color: var(--primary-blue);
}

.copyright {
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #64748B;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-links {
    align-items: center;
  }

  .social-links {
    justify-content: center;
  }

  .footer h4 {
    justify-content: center;
  }

  .footer p {
    margin: 0 auto;
  }
}


/* Base style for mobile menu btn (hidden on desktop) */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-main);
  cursor: pointer;
  padding: 8px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  h1 {
    font-size: 2.2rem;
  }

  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-text {
    order: 2;
  }

  .hero-visual {
    order: 1;
    margin-bottom: 40px;
  }

  .phone-mockup {
    width: 240px;
    height: 480px;
  }

  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  /* Hide curvy track on mobile */
  .curvy-track-container {
    display: none;
  }

  .nav-links.active {
    display: flex;
  }

  /* Specific mobile alignment for requested features */
  .feature-left-align {
    text-align: left !important;
    align-items: flex-start;
  }

  .feature-left-align .feature-icon {
    margin-left: 0;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .mobile-menu-btn {
    display: block;
    /* Show on mobile */
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--nav-bg);
    flex-direction: column;
    padding: 20px;
    gap: 20px;
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    animation: slideDownMenu 0.3s ease-out forwards;
  }

  .nav-links.active {
    display: flex;
  }
}

/* Slide Down Animation */
@keyframes slideDownMenu {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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





.hero-animation-container {
  width: 300px;
  height: 600px;
  position: relative;
}

.phone-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
}

/* Scene 1: Chaos / Confusion (0 - 2s) */
.chaos-line {
  stroke-dasharray: 10;
  animation: jitter 2s ease-in-out infinite;
  opacity: 1;
}

.line-1 {
  animation-delay: 0s;
}

.line-2 {
  animation-delay: 0.3s;
}

.line-3 {
  animation-delay: 0.6s;
}

.chaos-dot {
  animation: pulseConfusion 1s ease-in-out infinite alternate;
}

@keyframes jitter {
  0% {
    transform: translate(0, 0);
    opacity: 0.6;
  }

  25% {
    transform: translate(2px, -2px);
    opacity: 0.8;
  }

  50% {
    transform: translate(-1px, 2px);
    opacity: 0.5;
  }

  75% {
    transform: translate(-2px, -1px);
    opacity: 0.7;
  }

  100% {
    transform: translate(0, 0);
    opacity: 0.6;
  }
}

@keyframes pulseConfusion {
  0% {
    r: 4;
    opacity: 0.5;
  }

  100% {
    r: 6;
    opacity: 1;
  }
}

/* Transitions */
.scene {
  transition: opacity 0.5s ease;
}

/* Scene Classes meant to be toggled by JS for stage management 
   OR controlled via massive keyframe strict timing. 
   Given requirements, we'll use CSS Animation classes triggered by JS for clean state machine */

/* Scene 2: Processing (2s - 3.5s) */
.ripple {
  transform-origin: 130px 280px;
  animation: rippleExpand 1.5s ease-out forwards;
}

.ripple-delayed {
  transform-origin: 130px 280px;
  animation: rippleExpand 1.5s ease-out 0.2s forwards;
}

@keyframes rippleExpand {
  0% {
    opacity: 0.6;
    transform: scale(0.1);
  }

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

.route-path {
  animation: drawRoute 1.5s ease-out forwards;
}

@keyframes drawRoute {
  to {
    stroke-dashoffset: 0;
  }
}

.badge {
  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popIn {
  0% {
    transform: translate(160px, 150px) scale(0);
    opacity: 0;
  }

  100% {
    transform: translate(160px, 150px) scale(1);
    opacity: 1;
  }
}

/* Scene 3: Live Journey & Alarm (3.5s - 5.5s) */
#next-stop-card {
  animation: slideUpFade 0.6s ease-out forwards;
}

@keyframes slideUpFade {
  0% {
    transform: translate(30px, 400px);
    opacity: 0;
  }

  100% {
    transform: translate(30px, 380px);
    opacity: 1;
  }
}

#alarm-icon {
  animation: alarmPopShake 0.6s ease-out forwards;
}

@keyframes alarmPopShake {
  0% {
    transform: translate(180px, 50px) scale(0);
    opacity: 0;
  }

  50% {
    transform: translate(180px, 50px) scale(1.2);
    opacity: 1;
  }

  70% {
    transform: translate(180px, 50px) rotate(-10deg) scale(1);
  }

  85% {
    transform: translate(180px, 50px) rotate(10deg) scale(1);
  }

  100% {
    transform: translate(180px, 50px) rotate(0) scale(1);
    opacity: 1;
  }
}

/* Scene 4: Final Breathing (5.5s - 8s) */
.final-breath {
  animation: breathe 2.5s ease-in-out infinite;
}

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

  50% {
    transform: scale(1.02);
  }

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

/* Scene 4: Alarm Ripples */
.alarm-ripple {
  animation: rippleZoom 2s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.delay-1 {
  animation-delay: 0.5s;
}

.delay-2 {
  animation-delay: 1s;
}

@keyframes rippleZoom {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
    stroke-width: 3px;
  }

  100% {
    transform: scale(2.5);
    opacity: 0;
    stroke-width: 0px;
  }
}

/* Swipe Hint Animation */
.swipe-hint {
  animation: swipeNudge 1.5s ease-in-out infinite;
}

@keyframes swipeNudge {

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

  50% {
    transform: translateX(10px);
  }
}

/* Utility to hide/show */
.hidden {
  display: none;
}

.fade-out {
  opacity: 0 !important;
  transition: opacity 0.5s;
}

.fade-in {
  opacity: 1 !important;
  transition: opacity 0.5s;
}

.phone-body-bg {
  fill: var(--surface-color);
  transition: fill 0.3s ease;
}

.screen-bg {
  fill: url(#screenGradient);
  transition: fill 0.3s ease;
}

[data-theme="dark"] .screen-bg {
  fill: #121212;
}

/* Card Theming */
.card-bg {
  fill: #4CAF50;
  transition: fill 0.3s ease;
}

.card-label {
  fill: rgba(255, 255, 255, 0.8);
  transition: fill 0.3s ease;
}

.card-title {
  fill: #ffffff;
  transition: fill 0.3s ease;
}

.card-title-alarm {
  fill: var(--primary-blue);
}

.card-time {
  fill: #ffffff;
  /* White for better contrast on green */
  transition: fill 0.3s ease;
}

[data-theme="dark"] .card-bg {
  fill: #4CAF50;
}

[data-theme="dark"] .card-label {
  fill: rgba(255, 255, 255, 0.8);
}

/* Swipe UI Theming */
.swipe-bg {
  fill: var(--border-color);
  transition: fill 0.3s ease;
}

.swipe-text {
  fill: #6F7D8C;
  transition: fill 0.3s ease;
}

[data-theme="dark"] .swipe-text {
  fill: #A0AAB4;
}

/* Feature Showcase Styles */
.feature-split {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 100px;
}

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

.feature-text {
  flex: 1;
}

.feature-image {
  flex: 1.2;
}

/* Modern Phone Mockup Styling for Images */
.img-responsive {
  width: 100%;
  height: auto;
  display: block;
}

.phone-frame {
  max-width: 260px;
  /* Limit massive screenshots */
  margin: 0 auto;
  border-radius: 30px;
  border: 8px solid var(--surface-color);
  /* Thick bezel */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
  position: relative;
  background-color: var(--surface-color);
  /* Fallback frame bg */
}

/* Add a subtle shine to the frame */
.phone-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 22px;
  /* Inner radius */
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
  pointer-events: none;
  z-index: 2;
}

.phone-frame:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 40px 70px -15px rgba(58, 152, 185, 0.25);
  /* Blue glow on hover */
}

/* Appearance Animation */
.phone-frame img {
  opacity: 0;
  animation: screenOn 0.8s ease-out forwards;
  animation-delay: 0.2s;
}

@keyframes screenOn {
  0% {
    opacity: 0;
    transform: scale(0.95);
    filter: brightness(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
}

@media (max-width: 768px) {

  .feature-split,
  .feature-split.reverse {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }

  .feature-text,
  .feature-image {
    width: 100%;
  }

  .feature-icon {
    margin: 0 auto 20px auto;
  }
}

/* Problem Section Styles */
.problem-card {
  background: var(--surface-color);
  border-radius: 24px;
  padding: 24px;
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.problem-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.problem-img-wrapper {
  width: 100%;
  height: 280px;
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 24px;
  background: #f0f0f0;
}

.problem-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crop nicely */
  transition: transform 0.5s ease;
}

.problem-card:hover img {
  transform: scale(1.05);
  /* Zoom effect on hover */
}

.problem-card h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
  color: var(--error);
  /* Highlight the pain point */
}

[data-theme="dark"] .problem-img-wrapper {
  background: #2C3E50;
}

/* Scroll Journey Tracker */
.scroll-tracker-container {
  position: fixed;
  right: 30px;
  top: 100px;
  bottom: 100px;
  width: 4px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  /* Let clicks pass through */
}

.metro-track {
  width: 4px;
  height: 100%;
  background: rgba(58, 152, 185, 0.2);
  border-radius: 2px;
  position: relative;
}

/* Dashed line effect or solid */
.metro-track::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(to bottom, var(--primary-blue), var(--primary-blue) 10px, transparent 10px, transparent 20px);
  opacity: 0.3;
}

.metro-train-icon {
  position: absolute;
  top: 0;
  /* JS will update this */
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: var(--surface-color);
  border: 2px solid var(--primary-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-blue);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: top 0.1s linear, transform 0.2s;
  z-index: 1000;
}

.metro-train-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--primary-blue);
  stroke: none;
}

.station-popup {
  position: absolute;
  right: 50px;
  /* Left of the track */
  top: 0;
  /* Follows train via JS or just relative grouping */
  background: var(--surface-color);
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  border-left: 4px solid var(--primary-blue);
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.3s, transform 0.3s;
  white-space: nowrap;
  pointer-events: none;
}

.station-popup.visible {
  opacity: 1;
  transform: translateX(0);
}

.popup-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.popup-station {
  display: block;
  font-weight: 700;
  color: var(--text-main);
  font-size: 0.95rem;
}

/* Battery Guide Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 20px;
}

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

.modal-content {
  background: var(--surface-color);
  width: 100%;
  max-width: 500px;
  border-radius: 24px;
  padding: 32px;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

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

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 5px;
}

.modal-header {
  margin-bottom: 24px;
  text-align: center;
}

.modal-header h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: var(--text-main);
}

.modal-header p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.modal-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step-item {
  background: var(--bg-color);
  padding: 16px;
  border-radius: 12px;
  border-left: 4px solid var(--primary-blue);
}

.step-item.optional {
  border-left-color: var(--gold);
}

.step-title {
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
  display: block;
}

.step-item p {
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.step-note {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
  opacity: 0.9;
}

.modal-action-close {
  margin-top: 32px;
}

.btn-full-width {
  width: 100%;
}

/* Hide on mobile */
@media (max-width: 900px) {
  .scroll-tracker-container {
    display: none;
  }

}

/* Stats Section */
.stats-section {
  background: var(--surface-color);
  padding: 40px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin-top: 40px;
}

.stats-label {
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  font-weight: 700;
}

.stats-grid {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
}

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

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-blue);
}

.stat-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Steps Section */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  counter-reset: step-counter;
}

.step-card {
  text-align: center;
  padding: 30px;
  position: relative;
}

.step-number {
  width: 50px;
  height: 50px;
  background: var(--secondary-blue);
  color: var(--primary-blue);
  font-weight: 800;
  font-size: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px auto;
  position: relative;
  z-index: 1;
}

/* Connecting line for desktop */
@media (min-width: 768px) {
  .step-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 55px;
    right: -50%;
    width: 100%;
    height: 2px;
    background: var(--border-color);
    z-index: 0;
  }
}