@media (min-width: 600px) {
  .home-content {
    padding: 3rem 2rem;
  }

  .brand-name {
    font-size: 3.5rem;
  }

  .tips-content {
    max-width: 500px;
    margin: 0 auto;
    padding: 2rem;
  }

  .roi-circle {
    width: 240px;
    height: 240px;
  }

  .photo-content {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f9f6;
    --bg-elevated: #ffffff;
    --surface: #edf5f0;
    --surface-hover: #e2ede7;
    --border: rgba(20, 46, 35, 0.08);
    --border-strong: rgba(20, 46, 35, 0.15);

    --text-primary: #0f2a1f;
    --text-secondary: #3d6b52;
    --text-muted: #7ba390;

    --accent: #1aab6d;
    --accent-soft: rgba(26, 171, 109, 0.1);
    --accent-glow: rgba(26, 171, 109, 0.2);
  }

  .home-bg {
    background:
      radial-gradient(ellipse 60% 50% at 50% 0%, rgba(26, 171, 109, 0.06) 0%, transparent 70%),
      var(--bg);
  }

  .camera-results {
    background: linear-gradient(to top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 70%, transparent 100%);
  }

  .result-card {
    background: rgba(255, 255, 255, 0.95);
  }

  .confidence-badge {
    background: rgba(255,255,255,0.7);
    color: var(--text-secondary);
  }
}

@supports (padding: max(0px)) {
  .camera-results {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
}