@media (max-width: 1024px) {
  .hero-subtitle {
    font-size: 1.25rem;
  }
  .equation-diagram {
    gap: var(--space-sm);
  }
  .eq-box {
    padding: var(--space-md);
    font-size: 0.8rem;
  }
  .node {
    width: 100px;
    font-size: 0.8rem;
    padding: var(--space-sm);
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none; /* Mobile menu toggle logic to be handled by JS */
  }
  .nav-mobile-toggle {
    display: block;
    width: 24px;
    height: 24px;
    position: relative;
  }
  .hamburger {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-text-primary);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: background 0.2s;
  }
  .hamburger::before, .hamburger::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: var(--color-text-primary);
    left: 0;
    transition: transform 0.2s;
  }
  .hamburger::before { top: -6px; }
  .hamburger::after { bottom: -6px; }

  /* Mobile menu active state classes to be toggled by JS */
  .nav-menu-active .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    background: rgba(250, 250, 248, 0.98);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  }
  .nav-menu-active .hamburger { background: transparent; }
  .nav-menu-active .hamburger::before { transform: translateY(6px) rotate(45deg); }
  .nav-menu-active .hamburger::after { transform: translateY(-6px) rotate(-45deg); }

  .hero-ctas {
    flex-direction: column;
    width: 100%;
  }
  .hero-ctas .btn {
    width: 100%;
  }
  
  .info-panel {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    transform: translateY(20px);
    margin-top: var(--space-md);
  }
  .info-panel.active {
    transform: translateY(0);
  }
  
  .equation-diagram {
    flex-direction: column;
  }
  
  .site-footer .container {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
}

@media (max-width: 480px) {
  :root {
    --space-section: 4rem;
  }
  .sensor-badge {
    width: 100%;
  }
}