.demo-navbtn { transition: background .15s, color .15s, box-shadow .15s; }
.demo-navbtn:hover { background: #E6E3F7 !important; color: #2E2270 !important; box-shadow: inset 3px 0 0 #5B4BD6; }
.demo-navbtn.active { background: #EDEBFA !important; color: #2E2270 !important; }
.demo-navbtn.active .demo-navbtn-label { font-weight: 600 !important; }
.demo-fadein { animation: reveal .4s cubic-bezier(.2,.7,.2,1); }
.demo-tab-panel[hidden] { display: none !important; }

@media (max-width: 720px) {
  .demo-body { flex-direction: column !important; }
  .demo-nav { flex-direction: row !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; width: auto !important; overflow-x: auto; border-right: none !important; border-bottom: 1px solid #ECECF1; padding: 10px !important; gap: 8px !important; }
  .demo-navbtn { flex: 0 0 auto; white-space: nowrap; min-height: 44px; scroll-snap-align: start; }
  .demo-navsection { display: none !important; }
  .demo-main { padding: 16px !important; min-height: 0 !important; height: auto !important; overflow-y: visible !important; }
  .demo-stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .demo-2col { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr !important; padding-top: 48px !important; padding-bottom: 44px !important; gap: 34px !important; }
  .hero-orbital { max-width: 380px !important; }
  .journey-sprint { grid-template-columns: repeat(3,1fr) !important; }
  .cs-card { flex: 0 0 calc((100% - 22px)/2) !important; }
}
@media (max-width: 640px) {
  .hero-grid { padding-left: 18px !important; padding-right: 18px !important; }
  .hero-h1 { font-size: 36px !important; }
  .hero-lead { font-size: 17px !important; }
  .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important; }
  .journey-sprint { grid-template-columns: 1fr !important; }
  .journey-outer { max-width: 100% !important; }
  .cs-card { flex: 0 0 84% !important; scroll-snap-align: start; }
  .cs-arrow, .cs-dots { display: none !important; }
  .cs-viewport { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
}