/* Dark Mode — automatic via prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0a0a0a;
    --color-bg-secondary: #171717;
    --color-text: #fafafa;
    --color-text-secondary: rgba(255, 255, 255, 0.6);
    --color-tint: #22c55e;
    --color-border: rgba(255, 255, 255, 0.1);
  }

  .nav {
    background: rgba(10, 10, 10, 0.8);
  }

  .phone-frame {
    background: #fafafa;
    box-shadow:
      0 25px 50px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.05);
  }

  .phone-frame__notch {
    background: #fafafa;
  }

  .hero__glow {
    background: radial-gradient(
      circle,
      rgba(34, 197, 94, 0.08) 0%,
      rgba(59, 130, 246, 0.04) 40%,
      transparent 70%
    );
  }

  .demo__card {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  }

  .compare__cell--highlight {
    background: color-mix(in srgb, var(--color-green) 10%, transparent);
  }

  .cta {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-green) 8%, var(--color-bg)),
      color-mix(in srgb, var(--color-blue) 8%, var(--color-bg))
    );
  }

  /* Carousel arrows: stay light and visible on dark background */
  .carousel__btn {
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a1a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  }

  .carousel__btn:hover {
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  }
}

/* Dark mode for new sections */
@media (prefers-color-scheme: dark) {
  .sticky-cta {
    background: rgba(10, 10, 10, 0.95);
  }

  .for-notfor__card {
    background: var(--color-bg-secondary);
  }

  .feature-item {
    background: var(--color-bg-secondary);
  }
}