/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .use-cases-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-inner   { grid-template-columns: 1fr 1fr 1fr; }
  .drone-float    { display: none; }
}

@media (max-width: 900px) {
  .ps-grid, .product-grid, .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid::before { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .traction-grid { grid-template-columns: 1fr; gap: 1rem; }
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
}

@media (max-width: 600px) {
  section { padding: 4rem 0; }
  .traction-inner { padding: 3rem 1.5rem; }
  .use-cases-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; text-align: left; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── THEME TOGGLE AND LIGHT MODE ────────────────────────────── */
.theme-toggle {
  background: transparent;
  border: none;
  color: var(--clr-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
  transition: var(--transition-fast);
}
.theme-toggle:hover {
  background: rgba(255,255,255,0.1);
}
.theme-toggle .sun-icon { display: none; }
.theme-toggle .moon-icon { display: block; }
:root[data-theme="light"] .theme-toggle .sun-icon { display: block; }
:root[data-theme="light"] .theme-toggle .moon-icon { display: none; }
:root[data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,0.05); }

:root[data-theme="light"] {
  --clr-dark:        #fdfdfd;
  --clr-dark-2:      #f4f5f7;
  --clr-dark-3:      #e9ebf0;
  --clr-surface:     #ffffff;
  --clr-border:      rgba(0,0,0,0.12);
  --clr-text:        #1e1e24;
  --clr-text-muted:  #5c5c6b;
  --clr-white:       #111118;

  /* Redefined glows for light backgrounds */
  --shadow-glow-red:  0 12px 40px rgba(195,34,31,0.15);
  --shadow-glow-plum: 0 12px 40px rgba(89,28,83,0.18);
  --grad-glow-red:    radial-gradient(ellipse at center, rgba(195,34,31,0.12) 0%, transparent 70%);
  --grad-glow-plum:   radial-gradient(ellipse at center, rgba(89,28,83,0.1) 0%, transparent 70%);

  /* --shadow-card (0 8px 40px rgba(0,0,0,0.5)) is tuned for dark
     backgrounds; at 50% black it reads as a hard smudge on white.
     Soften it here so every var(--shadow-card) hover site-wide
     (card lifts, doc cards, etc.) picks this up automatically. */
  --shadow-card: 0 12px 32px rgba(0,0,0,0.12);
}

:root[data-theme="light"] .btn-primary { color: #ffffff !important; box-shadow: 0 4px 20px rgba(195,34,31,0.25); }
:root[data-theme="light"] .btn-primary:hover { box-shadow: 0 8px 30px rgba(195,34,31,0.4); }
:root[data-theme="light"] section:not(#hero) .btn-outline { border-color: rgba(0,0,0,0.3); }
:root[data-theme="light"] section:not(#hero) .btn-outline:hover { background: rgba(195,34,31,0.1); color: var(--clr-red); border-color: var(--clr-red); }
/* Hero Section forces Dark Mode variables even when Light Theme is active */
:root[data-theme="light"] #hero {
  --clr-text: #e8e8f0;
  --clr-text-muted: #9090a8;
  --clr-white: #ffffff;
}

:root[data-theme="light"] .hero-overlay {
  background: linear-gradient(
    to bottom, 
    rgba(10,10,16,0.3) 0%, 
    rgba(89,28,83,0.12) 40%, 
    rgba(10,10,16,0.85) 85%, 
    #0a0a10 100%
  );
}

:root[data-theme="light"] #navbar { 
  background: rgba(255, 255, 255, 0.85); 
  border-color: rgba(0, 0, 0, 0.08); 
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
:root[data-theme="light"] #navbar.scrolled { 
  background: rgba(255, 255, 255, 0.55); 
  border-color: rgba(0, 0, 0, 0.06); 
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04); 
}
:root[data-theme="light"] .hamburger span { background: #111118; }
:root[data-theme="light"] .ps-divider-badge { color: #ffffff; }
:root[data-theme="light"] .step-number { color: #ffffff; box-shadow: 0 5px 25px rgba(195,34,31,0.25); }
:root[data-theme="light"] .footer-brand img { filter: none; }
:root[data-theme="light"] .product-image-wrap img { filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15)); }
:root[data-theme="light"] .ps-problem-card:hover { box-shadow: var(--shadow-glow-red); border-color: rgba(195,34,31,0.3); }
:root[data-theme="light"] .use-case-card:hover { box-shadow: var(--shadow-glow-red); }
:root[data-theme="light"] .step-card { box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
:root[data-theme="light"] .step-card:hover { box-shadow: var(--shadow-glow-red); border-color: rgba(195,34,31,0.3); }
:root[data-theme="light"] .team-card { border-color: rgba(0,0,0,0.08); }
:root[data-theme="light"] .team-card:hover { box-shadow: var(--shadow-glow-red); border-color: rgba(195,34,31,0.3); }

/* Ensure use-case card text becomes white over the dark hover gradient in light mode */
:root[data-theme="light"] .use-case-card:hover h4 { color: #ffffff; }
:root[data-theme="light"] .use-case-card:hover p { color: rgba(255,255,255,0.85); }

/* Interactive HIW Section - Light Mode */
:root[data-theme="light"] .hiw-interactive-box { background: #ffffff; box-shadow: 0 40px 100px rgba(0,0,0,0.08); }
:root[data-theme="light"] .hiw-step-info h3 { color: var(--clr-dark); }
:root[data-theme="light"] .hiw-ctrl { border-color: #ddd; color: #666; }
:root[data-theme="light"] .hiw-ctrl:hover { border-color: #999; color: #111; }
:root[data-theme="light"] .hiw-ctrl.active { background: var(--clr-red); border-color: var(--clr-red); color: #fff; }

/* ── LIGHT MODE: NAV DROPDOWNS ───────────────────────────── */

/* Trigger button text */
:root[data-theme="light"] .nav-drop-trigger {
  color: #3a3a4a;
}
:root[data-theme="light"] .nav-drop-trigger:hover,
:root[data-theme="light"] .nav-dropdown:hover .nav-drop-trigger,
:root[data-theme="light"] .nav-dropdown.open .nav-drop-trigger {
  color: #111118;
}
:root[data-theme="light"] .nav-chevron {
  color: #3a3a4a;
}

/* White glass panel */
:root[data-theme="light"] .nav-drop-panel {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 30px 80px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
}
:root[data-theme="light"] .nav-drop-panel::before {
  background: rgba(255, 255, 255, 0.98);
  border-left-color: rgba(0, 0, 0, 0.08);
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* Row links */
:root[data-theme="light"] .nav-drop-panel a {
  color: #2a2a36;
}
:root[data-theme="light"] .nav-drop-panel a:hover {
  background: rgba(195, 34, 31, 0.07);
  color: #111118;
}

/* Icon bubble */
:root[data-theme="light"] .drop-icon {
  background: rgba(0, 0, 0, 0.05);
  color: #5c5c6b;
}
:root[data-theme="light"] .nav-drop-panel a:hover .drop-icon {
  background: rgba(195, 34, 31, 0.1);
  color: var(--clr-red);
}

/* Text inside rows */
:root[data-theme="light"] .drop-text strong {
  color: #111118;
}
:root[data-theme="light"] .drop-text em {
  color: #5c5c6b;
}

/* ── LIGHT MODE: MOBILE ACCORDION ────────────────────────── */
:root[data-theme="light"] .mob-group-trigger {
  color: #3a3a4a;
}
:root[data-theme="light"] .mob-group-trigger:hover,
:root[data-theme="light"] .mob-group.open .mob-group-trigger {
  color: #111118;
}
:root[data-theme="light"] .mob-group-panel {
  border-left-color: rgba(195, 34, 31, 0.25);
}
:root[data-theme="light"] .mob-group-panel a {
  color: #5c5c6b;
  border-bottom-color: rgba(0,0,0,0.06);
}
:root[data-theme="light"] .mob-group-panel a:hover {
  color: #111118;
}