:root {
  /* Matte Black & White Palette */
  --bg-color: #000000; /* Pure Black */
  --text-primary: #ffffff;
  --text-secondary: #888888; /* Neutral Grey */

  --accent-glow: #ffffff; /* White Glow */
  --accent-secondary: #333333; /* Dark Grey Accent */

  --primary-color: #ffffff;

  --glass-bg: rgba(20, 20, 20, 0.6);
  --glass-border: rgba(255, 255, 255, 0.15);

  --font-main: "Inter", system-ui, -apple-system, sans-serif;
}

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

body {
  font-family: var(--font-main);
  background-color: var(--bg-color);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.6;
}

/* Lenis Smooth Scroll Recommended CSS */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* Background Effects */
.background-glow {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.03),
    /* Faint white */ rgba(100, 100, 100, 0.02),
    transparent 60%
  );
  z-index: -1;
  animation: pulseGlow 15s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* Initial State: Big & Attached */
  /* Unified Positioning Strategy for Smooth Morph */
  position: fixed;
  left: 0; 
  right: 0;
  margin: 0 auto; /* Stable Centering */
  transform: none; /* Disable transform centering */
  top: 0;
  width: 100%;
  max-width: 1400px; /* Limit spread initially too */

  z-index: 1000;
  padding: 2rem 5%; /* Big comfortable padding */
  border-radius: 0;

  /* Transparent initially */
  background: transparent;
  backdrop-filter: blur(0px); /* Animate from 0 for smoothness */
  -webkit-backdrop-filter: blur(0px);
  border: 1px solid transparent;

  /* Performance & Transition */
  will-change:
    width, max-width, top, padding, border-radius, background, backdrop-filter,
    box-shadow;
  transition:
    width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    max-width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.6s ease,
    backdrop-filter 0.6s ease,
    box-shadow 0.6s ease;
}

/* Scrolled State: Floating Pill */
.navbar.scrolled {
  /* Morph Dimensions */
  width: 85%; /* Slightly narrower */
  max-width: 800px; /* Bring elements much closer! */
  top: 20px;
  /* Left/Right/Margin inherited, so no jitter */

  border-radius: 100px; /* Pill shape */
  padding: 0.7rem 1.5rem; /* Compact padding */

  /* Glass Effect */
  background: rgba(10, 10, 10, 0.75); /* Darker on scroll */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.8);
  
  /* Reinforced Centering */
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: none;
}

/* Logo & Brand */
.logo {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 1.25rem; /* Reduced from 2.5rem */
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.logo-text {
  background: linear-gradient(135deg, #fff, #a1a1aa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.beta-badge {
  font-size: 0.5rem;
  font-weight: 700;
  color: #000;
  background: #fff;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
  margin-left: 0.2rem;
  align-self: center; /* Align center */
  /* Remove margin-top to center perfectly */
}

/* Disabled Card State */
.download-card.disabled {
  opacity: 0.6;
  pointer-events: none; /* Prevent clicks */
  filter: grayscale(1);
}

.btn-secondary.disabled {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  cursor: not-allowed;
}

.logo-icon {
  width: 32px; /* Reduced from 64px */
  height: 32px;
  border-radius: 6px;
}

.helper-link {
  display: block;
  text-align: center;
  margin-top: 1rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.helper-link:hover {
  opacity: 1;
  color: #fff;
}

/* Buy Me a Coffee Button */
.bmc-btn-nav {
  display: block;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  border: none;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
}

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

.bmc-btn-nav img {
  display: block;
  height: 28px; /* Reduced from 36px */
  width: auto;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem; /* Slightly tighter */
}

.nav-icon {
  color: var(--text-secondary);
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
}

.nav-icon svg {
  width: 20px; /* Smaller icons */
  height: 20px;
}

.nav-icon:hover {
  color: var(--text-primary);
}

.nav-icon.coffee:hover {
  color: #fff;
}

.btn-download-small {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.85rem; /* Smaller text */
  font-weight: 500;
  padding: 0.4rem 0.9rem; /* Smaller pad */
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  transition: all 0.3s ease;
}

.btn-download-small:hover {
  background: var(--glass-bg);
  border-color: #fff;
}

/* Hero Section */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 25vh 1rem 5vh; /* Reduced bottom padding (5vh) */
  max-width: 1200px;
  margin: 0 auto;
  gap: 4rem;
}

@media (min-width: 768px) {
  .hero {
    /* Keep huge top padding (15rem) but reduce bottom (4rem) */
    padding: 15rem 2rem 6.5rem;
  }
}

/* Hero Title & Text Enhancement */
.hero-title {
  font-size: 3.5rem;
  line-height: 0.85; /* Tighter line height */
  letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0; /* No gap */
}

@media (min-width: 768px) {
  .hero-title {
    /* Keep column layout on desktop too as per new request */
    gap: 0;
  }
}

.title-line {
  display: block;
}

/* Typography Upgrade: Technical Mono */
.stat-value, 
.val, 
.pill-value, 
.version-badge,
.hero-subtitle /* Adding subtitle to mono mix might be too much, let's keep it specific to data */ {
  font-family: "SF Mono", "Menlo", "Monaco", "Courier New", monospace;
  letter-spacing: -0.03em;
}

/* Phase Shift Text Reveal */
.highlight-wrapper {
  display: inline-block;
}

.highlight-text {
  /* The "Phase Shift" Reveal - Monochrome */
  background: linear-gradient(to right, #fff 20%, #666 40%, #666 60%, #fff 80%);
  background-size: 200% auto;
  color: #000;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: phaseShimmer 3s linear infinite;
  font-weight: 800;
}

@keyframes phaseShimmer {
  to {
    background-position: 200% center;
  }
}

/* Remove old highlighter pseudo-elements */
.highlight-text::before {
  display: none;
}

.title-line {
  display: block;
}

.ampersand-line {
  font-weight: 100; /* Thin */
  font-style: italic; /* Slanted */
  font-size: 0.6em;
  opacity: 0.7;
  color: var(--text-secondary);
  font-family: "Helvetica Neue", "Arial", sans-serif;
  margin: 0;
}

@keyframes drawHighlightFunky {
  0% {
    width: 0%;
  }
  100% {
    width: 105%; /* Go slightly wider than text for marker effect */
  }
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto 2.5rem;
  font-weight: 300;
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards 0.4s;
}

.cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards 0.6s;
}

.btn-primary {
  background: #fff;
  color: #000;
  text-decoration: none;
  padding: 1rem 2.5rem;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1.1rem;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.5);
}

.version-badge {
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--glass-bg);
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
}

/* Hero Visual (Simplified) */
.hero-visual {
  width: 100%;
  display: flex;
  justify-content: center;
  perspective: 1000px;
  animation: fadeIn 1s ease forwards 0.8s;
  animation: fadeIn 1s ease forwards 0.8s;
  opacity: 0;
  display: flex;
  justify-content: center;
}

.hero-decorative-orb {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.1),
    transparent 60%
  );
  filter: blur(40px);
  box-shadow: 0 0 100px rgba(255, 255, 255, 0.05);
  animation: pulseOrb 8s ease-in-out infinite alternate;
}

@keyframes pulseOrb {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

.hero-visual .app-card {
  transform: rotateX(10deg) rotateY(-10deg);
  transition: transform 0.5s ease;
}

.hero-visual:hover .app-card {
  transform: rotateX(0deg) rotateY(0deg) scale(1.02);
}

.app-card {
  width: 100%;
  max-width: 360px;
  height: auto;
  min-height: 240px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.02)
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}

/* Year Card: Mission Dashboard */
.dashboard-card {
  width: 100%;
  max-width: 360px; /* Slightly wider for data */
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  width: 100%;
  flex-wrap: wrap; /* Allow wrapping on tiny screens */
  gap: 0.5rem;
}

/* Age Card Information */
/* Inherits from .app-card */

.age-display-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  text-align: center;
}

.label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.icon-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  opacity: 0.5;
  transition:
    opacity 0.2s,
    color 0.2s;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover {
  opacity: 1;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
}

.age-segments {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin: 1rem 0;
  font-family: "Courier New", Courier, monospace;
}

.segment {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.lbl {
  font-size: 0.5rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-top: 2px;
  opacity: 0.7;
}

.sep {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0 1px;
}

.label-sub {
  font-size: 0.7rem;
  color: var(--text-secondary);
  opacity: 0.6;
  font-style: italic;
}

/* Showcase Section: Scrollytelling */
.showcase-section {
  padding: 0 5%;
  max-width: 1200px;
  margin: 0 auto;
}

.showcase-container {
  display: flex;
  align-items: flex-start; /* Important for sticky */
  justify-content: space-between;
  gap: 4rem;
  position: relative;
}

.showcase-container.reversed {
  flex-direction: row-reverse;
}

@media (max-width: 768px) {
  .showcase-container.reversed {
    flex-direction: column-reverse;
  }
}

/* Left: Scrollable Text */
.showcase-text {
  flex: 1;
  max-width: 450px;
  position: relative;
  z-index: 10;
  padding-bottom: 20vh; /* Extra space at bottom */
}

.scroll-step {
  height: 80vh; /* Each step takes up a screen almost */
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.3;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  padding: 2rem 0;
}

.scroll-step.active-step {
  opacity: 1;
  transform: translateX(10px);
}

.step-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  background: linear-gradient(to right, #fff, #94a3b8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.step-desc {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Right: Sticky Visual */
.sticky-container {
  flex: 1;
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.age-segments {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 1rem 0;
  font-family: "Courier New", Courier, monospace;
}

/* Segment Interactive States */
.segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy */
  border-radius: 8px;
  padding: 4px;
}

.segment.highlight {
  transform: scale(1.3) translateY(-10px);
  background: rgba(124, 58, 237, 0.1);
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
}

.segment.highlight .val {
  color: #fff;
  text-shadow: 0 0 10px var(--accent-glow);
}

.segment.highlight .lbl {
  color: var(--accent-secondary);
  opacity: 1;
}

.segment.dim {
  opacity: 0.2;
  transform: scale(0.9);
  filter: blur(1px);
}

.val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  transition: color 0.3s ease;
}

.lbl {
  font-size: 0.5rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-top: 2px;
  opacity: 0.7;
  transition: color 0.3s ease;
}

.sep {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0 1px;
}

@media (max-width: 768px) {
  .showcase-container {
    flex-direction: column-reverse;
  }
  .sticky-container {
    height: auto;
    position: relative;
    top: 0;
    margin-bottom: 2rem;
  }
  .scroll-step {
    height: auto;
    min-height: 40vh; /* Reduced from 50vh to fit better */
    opacity: 1;
    padding: 1rem 0;
  }
}

/* Enhancements for very small screens */
@media (max-width: 480px) {
  .downloads-grid {
    gap: 1.5rem;
  }

  .download-card {
    padding: 2rem 1.5rem;
    min-width: 100%;
  }

  .os-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }

  .download-card h2 {
    font-size: 1.5rem;
  }
}

/* Card Internals */
.card-header {
  display: flex;
  gap: 6px;
  margin-bottom: 2rem;
}

.traffic-lights {
  display: flex;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #333; /* Matte Grey base */
}

.dot.red {
  background-color: #555;
} /* Dark Grey */
.dot.yellow {
  background-color: #777;
} /* Mid Grey */
.dot.green {
  background-color: #999;
} /* Light Grey */

/* Tooltips for Grid */
.year-dot {
  position: relative;
}

.year-dot[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.65rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
  backdrop-filter: blur(4px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.2s ease;
}

/* Year Card: Mission Dashboard */
.dashboard-card {
  width: 360px; /* Slightly wider for data */
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  width: 100%;
}

.traffic-lights {
  display: flex;
  gap: 6px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent-glow);
  background: rgba(124, 58, 237, 0.1);
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid rgba(124, 58, 237, 0.2);
}

.status-dot {
  width: 6px;
  height: 6px;
  background-color: var(--accent-glow);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

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

.dashboard-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dashboard-row-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 0.5rem;
}

.stat-block {
  display: flex;
  flex-direction: column;
}

.stat-block.big {
  align-items: flex-start;
}

.stat-label {
  font-size: 0.65rem;
  color: var(--text-secondary);
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 4px;
}

.stat-value {
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  line-height: 1;
}

.stat-value.primary {
  font-size: 2.5rem;
  background: linear-gradient(135deg, #fff, #cbd5e1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

.dashboard-footer {
  border-top: 1px solid var(--glass-border);
  padding-top: 1rem;
  display: flex;
  justify-content: center;
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--glass-bg);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
}

.pill-label {
  font-size: 0.65rem;
  color: var(--text-secondary);
  letter-spacing: 0.1em;
  font-weight: 600;
}

.pill-value {
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Adjust Grid for Dashboard */
.year-progress-container {
  width: 100%;
  padding: 0;
}

.year-grid {
  gap: 3px;
  padding: 0;
}

.year-dot {
  width: 4px;
  height: 4px;
}

.app-ui-preview {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.year-progress-container {
  width: 100%;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  margin-bottom: 5px;
}

/* Year Grid (Eclipse Visuals) */
.year-grid {
  display: grid;
  grid-template-columns: repeat(30, 1fr); /* High density */
  gap: 2px;
  width: 100%;
}

.year-dot {
  /* Make them tiny stars */
  width: 3px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: none;
  border-radius: 50%;
  transition: all 0.5s ease;
}

.year-dot.active {
  background-color: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8); /* White hot glow */
}

/* The "Phase Shift" Tail Effect */
/* This makes dots 5 days ago dimmer than today */
.year-dot.active:nth-last-child(n + 5) {
  opacity: 0.5;
  box-shadow: none;
}

.percent {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}

.scramble-desc {
  font-family: "SF Mono", "Menlo", "Monaco", "Courier New", monospace;
  font-size: 0.65rem;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 1rem;
  letter-spacing: 0.05em;
  opacity: 0.7;
  min-height: 1em; /* prevent layout shift */
}

.label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* How It Works */
.section-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 3rem;
  background: linear-gradient(to right, #fff, #94a3b8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.how-it-works,
.downloads-section {
  padding: 4rem 5%;
  max-width: 1200px;
  margin: 0 auto;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.step-card {
  padding: 2.5rem;
  border-radius: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  position: relative;
  overflow: hidden;
}

.step-number {
  font-size: 4rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.03);
  position: absolute;
  top: 0;
  right: 1rem;
  line-height: 1;
}

.step-card h3 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  position: relative;
}

.step-card p {
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
}

/* Features Section */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 4rem 5%;
  max-width: 1200px;
  margin: 0 auto 4rem;
}

.feature-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  padding: 2rem;
  border-radius: 20px;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

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

.icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.feature-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.feature-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.modal-card {
  width: 90%;
  max-width: 600px;
  max-height: 85vh; /* Prevent overflow on small screens */
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow-y: auto; /* Enable scrolling for list */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.modal-card::-webkit-scrollbar {
  width: 6px;
}
.modal-card::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.modal-overlay:not(.hidden) .modal-card {
  transform: translateY(0);
}

.modal-header {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fbbf24; /* Amber-400 */
  margin-bottom: 0.5rem;
  text-align: center;
  flex-shrink: 0;
}

.modal-intro {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.5;
  text-align: center;
  flex-shrink: 0;
}

/* Carousel Styles */
.carousel-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.carousel-slide {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  animation: fadeIn 0.3s ease;
}

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

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.2);
}

.slide-caption {
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
}

/* Controls */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.5rem;
}

.nav-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  min-width: 100px;
  justify-content: center;
}

.nav-btn:hover:not(:disabled) {
  background: #fff;
  color: #000;
}

.nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.carousel-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.dot.active {
  background: #fff;
  transform: scale(1.3);
}

/* FAQ Section */
.faq {
  padding: 4rem 5%;
  max-width: 800px;
  margin: 0 auto 6rem;
}

.faq-container {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 2rem;
}

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

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  padding: 0.5rem 0;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.faq-item.active .faq-answer {
  max-height: 100px; /* Approximate max height */
  padding-top: 0.5rem;
}

.toggle {
  transition: transform 0.3s ease;
  font-size: 1.5rem;
  line-height: 1;
}

.faq-item.active .toggle {
  transform: rotate(45deg);
}

/* Downloads Page Styles */
.downloads-grid {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
  width: 100%;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards 0.4s;
}

.download-card {
  flex: 1;
  min-width: 300px;
  max-width: 400px;
  padding: 3rem;
  border-radius: 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

.download-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.25);
}

.download-card.popular {
  background: radial-gradient(
    circle at top right,
    rgba(124, 58, 237, 0.1),
    var(--glass-bg)
  );
  border: 1px solid rgba(124, 58, 237, 0.3);
}

.os-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.os-icon.win {
  background: linear-gradient(135deg, #00a4ef, #6ccdf5);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.download-card h2 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.version {
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.specs {
  font-size: 0.85rem;
  color: var(--text-secondary);
  opacity: 0.7;
  margin-bottom: 2rem;
}

.full-width {
  width: 100%;
  display: block;
  text-align: center;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
  padding: 1rem 2.5rem;
  border-radius: 30px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Animations Helpers */
.hidden {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.show {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 {
  transition-delay: 0.1s;
}
.delay-200 {
  transition-delay: 0.2s;
}

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Philosophy Section */
.philosophy {
  padding: 6rem 1rem;
  text-align: center;
  position: relative;
}

.philosophy-content {
  max-width: 600px;
  margin: 0 auto;
}

.philosophy h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  background: linear-gradient(to right, #fff, #94a3b8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.philosophy p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.philosophy .author {
  color: var(--accent-glow);
  font-size: 0.9rem;
  margin-top: -0.5rem;
}

/* Final CTA Section */
.final-cta {
  padding: 8rem 5%;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Add subtle texture or noise if available, otherwise keep clean */
}

/* More aligned glow - subtle tint */
.final-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.03) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

.cta-content {
  position: relative;
  z-index: 1;
  max-width: 1200px; /* Increased to fit single line text */
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  gap: 6rem; /* Increased from 2rem */
}

.cta-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  /* Use the exact title gradient from hero/sections */
  background: linear-gradient(to right, #fff, #94a3b8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  white-space: nowrap; /* Prevent wrapping */
}

.cta-subtitle {
  white-space: nowrap; /* Prevent wrapping */
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 0; /* Removed margin-top */
  flex-shrink: 0; /* Prevent shrinking */
}

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

  .cta-buttons {
    margin-top: 2rem;
  }
}

/* Updated Buttons to match Feature/Step Cards */
.btn-glass-large {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.2rem 2.2rem; /* Reduced padding for minimalism */

  /* Minimal Glass Theme */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.3s ease;
  min-width: 220px;
  position: relative;
  overflow: hidden;
  box-shadow: none; /* Clean start */
}

/* No pseudo-elements needed for minimal style */
.btn-glass-large::after {
  display: none;
}

.btn-glass-large:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.05); /* Subtle fill */
  border-color: #ffffff; /* Bright border on hover */
  box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.1);
}

.btn-glass-large .icon {
  font-size: 2rem;
  line-height: 1;
  color: #ffffff; /* White icon */
}

.btn-glass-large .btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.btn-glass-large .small {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6); /* Soft white */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.btn-glass-large .label {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff; /* White label */
}

/* Footer Enhanced */
footer {
  text-align: center;
  padding: 4rem 5%;
  color: var(--text-secondary);
  font-size: 0.875rem;
  border-top: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.2);
  padding-bottom: 0; /* Removing padding bottom to let huge text hit the edge */
  position: relative;
  overflow: hidden;
}

.footer-content {
  padding: 4rem 5% 2rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 10; /* Ensure links are clickable above the text */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.footer-logo {
  font-weight: 700;
  color: #fff;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: var(--text-primary);
}

.footer-icon {
  color: var(--text-secondary);
  transition: color 0.3s ease;
  display: flex;
}

.footer-icon:hover {
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
  }

  /* Fix Footer Visibility */
  footer {
     display: block !important;
     opacity: 1 !important;
     visibility: visible !important;
  }

  /* Fix CTA Title Overflow */
  .cta-title {
      font-size: 2.5rem; /* Reduced from 3.5rem */
      white-space: normal; /* Allow wrapping */
      line-height: 1.1;
  }
  
  .cta-content {
      gap: 3rem;
  }
}

@media (max-width: 640px) {
  .footer-content {
    align-items: center;
  }
  
  .cta-title {
      font-size: 2rem; /* Even smaller for phones */
  }
}

/* Glitch Effect */
@keyframes glitch-skew {
  0% {
    transform: skew(0deg);
  }
  20% {
    transform: skew(-2deg);
  }
  40% {
    transform: skew(2deg);
  }
  60% {
    transform: skew(-1deg);
  }
  80% {
    transform: skew(1deg);
  }
  100% {
    transform: skew(0deg);
  }
}

@keyframes glitch-anim-1 {
  0% {
    clip: rect(20px, 9999px, 15px, 0);
  }
  20% {
    clip: rect(60px, 9999px, 80px, 0);
  }
  40% {
    clip: rect(10px, 9999px, 80px, 0);
  }
  60% {
    clip: rect(80px, 9999px, 10px, 0);
  }
  80% {
    clip: rect(50px, 9999px, 30px, 0);
  }
  100% {
    clip: rect(70px, 9999px, 90px, 0);
  }
}

.card-glitch {
  animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
  color: red; /* visual hint of error */
  position: relative;
}

.card-glitch::before,
.card-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--glass-bg);
}

.card-glitch::before {
  left: 2px;
  text-shadow: -1px 0 #ff00c1;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

/* Wave Effect for Grid */
@keyframes wave-opacity {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

.year-dot.wave {
  animation: wave-opacity 0.6s ease forwards;
}

/* Big Box Layout Styles */
.year-showcase-section.stacked-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 5%;
  gap: 4rem;
}

.big-box-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.big-box-visual {
  width: 100%;
  max-width: 900px; /* Much wider than the standard 360px */
  min-height: 500px;
}

.year-progress-container.full-size {
  width: 100%;
  height: auto;
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.year-grid.expanded {
  display: grid;
  grid-template-columns: repeat(25, 1fr); /* Fixed col count for stability */
  gap: 8px; /* Larger gap */
  width: 100%;
  padding: 2rem;
}

.year-grid.expanded .year-dot {
  width: 12px; /* Larger dots */
  height: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.year-grid.expanded .year-dot.active {
  background-color: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* Big Box Sticky Scroll Animation */
.year-scroll-wrapper {
  z-index: 20; /* Sit on top of the text initially */
  pointer-events: none; /* Let clicks pass through if the box is invisible */
}

/* Centered Text Flow */
.centered-text-flow {
  max-width: 600px;
  text-align: center;
  /* Pull text up to overlap the empty space left after box fades out */
  /* Pull text up to overlap the empty space left after box fades out */
  margin-top: -150vh; /* Reduced from -200vh to add space */
  position: relative;
  z-index: 10; /* Behind the box */
  pointer-events: auto;
}

.centered-text-flow .scroll-step {
  height: auto;
  min-height: 40vh; /* Reduced from 80vh to decrease spacing */
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* Cinematic Defaults */
  opacity: 0;
  transform: translateY(100px) scale(0.9); /* Start lower and smaller */
  transition:
    opacity 0.8s ease-out,
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.centered-text-flow .scroll-step:first-child {
  /* The first step ("The Orbit") is handled manually by JS for the "reveal" effect */
  transition: none;
}

.centered-text-flow .scroll-step.active-step {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Huge Footer Text */
.footer-huge-text {
  font-size: 15vw;
  font-weight: 900;
  line-height: 0.8;
  text-align: center;
  width: 100%;
  pointer-events: none;
  user-select: none;

  /* Gradient Fill Effect - Brighter for visibility */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.02)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Positioning */
  margin-top: 2rem;
  padding-bottom: 0;
  opacity: 1; /* Was 0.5, set to 1 for full control via gradient */
  letter-spacing: -0.05em;
}

/* --------------------
   Modal & Carousel Styles
   -------------------- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow: hidden; /* Contain slides */
}

.modal-overlay:not(.hidden) .modal-card {
  transform: translateY(0);
}

.modal-header {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 0.5rem;
  text-align: center;
}

.modal-intro {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.5;
  text-align: center;
}

/* Carousel Inner */
.carousel-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
}

.carousel-slide {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  animation: slideFade 0.4s ease;
}

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

@keyframes slideFade {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.slide-caption {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
}

/* Controls */
.carousel-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 1rem;
}

.nav-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.6rem 1.2rem;
  border-radius: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.nav-btn:hover:not(:disabled) {
  background: #fff;
  color: #000;
}

.nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.carousel-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transition: all 0.3s;
}


.dot.active {
  background: #fff;
  transform: scale(1.2);
}

/* Mobile Responsiveness */
/* Mobile Responsiveness */
@media (max-width: 768px) {
  /* Navbar - Minimal Mode & LOCKED Centered (No Morph) */
  .navbar,
  .navbar.scrolled {
    padding: 0.8rem 1.5rem;
    flex-direction: row; 
    justify-content: center; 
    z-index: 9999;
    
    /* Force Fixed Centered Pill Appearance always */
    position: fixed;
    top: 20px !important; /* Always top 20 */
    width: 85% !important;
    max-width: 360px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    border-radius: 100px;
    background: rgba(10, 10, 10, 0.85); /* Always dark glass */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  }

  .nav-links,
  .btn-download-small {
      display: none; 
  }

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

  /* Hero */
  .hero {
    padding: 15vh 1rem 5vh;
  }

  .hero-title {
    font-size: 2.2rem;
  }
  
  .hero-subtitle {
      font-size: 0.9rem;
  }

  /* Sticky Behavior - Mobile Scrollytelling */
  .showcase-container,
  .year-showcase-section {
    display: block !important;
    position: relative;
    padding-bottom: 20vh; 
  }

  .sticky-container, 
  .big-box-sticky {
      position: sticky !important;
      top: 15vh !important;
      height: auto !important; 
      z-index: 50; /* HIGH Z-Index for Sticky Visual */
      margin-bottom: 10vh;
      display: flex;
      justify-content: center;
      pointer-events: none; /* Let clicks pass through to text if needed */
  }

  /* Single-Line Age Timer Logic */
  .age-card {
      width: 95vw;
      max-width: 360px;
      transform: none !important; 
      padding: 1.2rem 0.8rem;
      pointer-events: auto; /* Re-enable clicks on card */
  }
  
  .age-display-container {
      padding: 0;
      width: 100%;
  }

  .age-segments {
      display: flex;
      flex-direction: row; 
      flex-wrap: nowrap; 
      justify-content: space-between;
      align-items: baseline;
      gap: 2px;
      width: 100%;
  }
  
  .segment {
      min-width: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  
  .segment .val {
      font-size: 0.9rem; 
      font-weight: 700;
  }
  
  .segment .lbl {
      font-size: 0.4rem;
  }
  
  .sep {
      font-size: 0.9rem;
      opacity: 0.5;
      margin: 0 1px;
  }

  /* Scrollytelling Text - FROM BELOW */
  .showcase-text {
      width: 100%;
      position: relative;
      background: transparent;
      padding: 0 1rem;
      z-index: 40; /* LOWER than sticky visual (50) so it slides under/behind? 
                      User said "scroll from below". Usually means visual layer logic. 
                      If sticky is 50, and text is 40, text goes BEHIND card. 
                      If text needs to cover, it should be 60.
                      "Content should scroll from below of the age timer card... and other element should go below it"
                      Implies visually appearing from bottom of screen. 
                      Let's set z-index lower so it flows underneath the sticky header card.
                   */
      margin-top: 5vh; 
  }
  
  .scroll-step {
      min-height: 40vh; 
      background: rgba(0,0,0,0.6); /* Darker background for readability */
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 1.5rem;
      margin-bottom: 5vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative; 
  }

  /* Year Orbit Grid Overflow Fix & Zoom Removal */
  /* User requested REMOVE ZOOM on mobile. */
  .year-scroll-wrapper {
      height: auto !important;
      min-height: 50vh; /* Reduced from 100vh to close gap */
      position: relative;
      margin-bottom: 0;
  }
  
  .big-box-visual {
      position: sticky;
      top: 15vh; /* Move up slightly */
      z-index: 40;
  }

  /* Force Override JS Scale */
  #year-card-visual {
      transform: scale(1) !important; /* DISABLE ZOOM */
      opacity: 1 !important;
  }
  
  .year-grid.expanded {
     grid-template-columns: repeat(10, 1fr) !important; 
     gap: 2px !important;
     width: 100%;
     padding: 0.5rem;
     box-sizing: border-box; 
  }
  
  .year-grid.expanded .year-dot {
      width: 4px;
      height: 4px;
  }
  
  .centered-text-flow {
      margin-top: -30vh; /* Pull text up to overlap/meet the box */
      z-index: 50; 
      position: relative;
  }
  
  /* Age Timer Sync Adjustment */
  /* "Sync animation... scroll from below" */
  /* Refine spacing so text appears naturally after card sticks */
  
  /* Ensure Age Card is sticky */
  .sticky-container.age-sticky {
      top: 15vh !important;
  }
  
  /* Push text down so it enters from bottom */
  .showcase-text.scroll-steps {
       margin-top: 40vh; /* Start showing text well below the card initially */
       z-index: 30; /* Behind card? Or Top? User said "scroll from below of the age timer card". */
                    /* If z-index is lower, it slides BEHIND. If higher, OVER. */
                    /* "from below" implies position. Let's keep it clean. */
  }
  
  /* Grids - Stacked */
  .steps-grid,
  .features,
  .downloads-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .feature-icon-img {
      width: 64px; 
  }
}

/* New Feature Icon Styles */
.icon-img-wrapper {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
}

.feature-icon-img {
    width: 80px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.2));
    transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon-img {
    transform: scale(1.1) rotate(5deg);
}