html { scroll-behavior: smooth; scroll-padding-top: 64px; }

.screenshot-strip { scrollbar-width: thin; scrollbar-color: #93c5fd #f1f5f9; }
.screenshot-strip::-webkit-scrollbar { height: 4px; }
.screenshot-strip::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.screenshot-strip::-webkit-scrollbar-thumb { background: #93c5fd; border-radius: 4px; }

.app-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.app-card:hover { transform: translateY(-6px); }

.hero-dot { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.6s ease both; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* ── DARK MODE ───────────────────────────────────────────── */
.dark body { background-color: #0f172a; color: #cbd5e1; }

/* Navbar */
.dark #navbar { background-color: rgba(2,6,23,0.97); border-color: rgba(30,58,138,0.4); }
.dark #navbar .bg-white { background-color: #1e293b; color: #e2e8f0; }
.dark #navbar .bg-white:hover { background-color: #334155; }
.dark #mobileMenu { background-color: #0c1220; border-color: rgba(30,58,138,0.4); }

/* Apps grid section */
.dark #apps { background-color: #0f172a; }
.dark #apps h2 { color: #f1f5f9; }
.dark #apps p { color: #94a3b8; }

/* App cards */
.dark .app-card { background-color: #1e293b !important; border-color: #334155 !important; }
.dark .app-card h3 { color: #f1f5f9; }
.dark .app-card p { color: #94a3b8; }
.dark .app-card .text-gray-800 { color: #e2e8f0; }
.dark .app-card .text-gray-400 { color: #64748b; }
.dark .app-card .bg-gray-100 { background-color: #334155; color: #94a3b8; }
.dark .app-card .hover\:bg-gray-200:hover { background-color: #475569; }
.dark .app-card .bg-white { background-color: #334155; }
.dark .app-card .border-gray-200 { border-color: #475569; }
.dark .app-card .bg-orange-50 { background-color: rgba(234,88,12,0.15); border-color: rgba(234,88,12,0.3); }
.dark .store-btn { background-color: #fff !important; border-color: #e2e8f0 !important; }
.dark .store-btn:hover { background-color: #f1f5f9 !important; }

/* Individual app sections */
.dark #app-sections section { background-color: #0f172a !important; }
.dark #app-sections h2 { color: #f1f5f9; }
.dark #app-sections h3 { color: #f1f5f9; }
.dark #app-sections h4 { color: #f1f5f9; }
.dark #app-sections p { color: #94a3b8; }
.dark #app-sections .text-gray-800 { color: #e2e8f0; }
.dark #app-sections .text-gray-400 { color: #475569; }
.dark #app-sections .text-gray-500 { color: #64748b; }
.dark #app-sections .bg-white { background-color: #1e293b; }
.dark #app-sections .border-gray-100 { border-color: #334155; }

/* Contact section */
.dark #contact { background-color: #0d1525; }
.dark #contact h2 { color: #f1f5f9; }
.dark #contact p { color: #94a3b8; }
.dark #contact h3 { color: #f1f5f9; }
.dark #contact .bg-white { background-color: #1e293b; border-color: #334155; }
.dark #contact .bg-brand-50 { background-color: #1e2f58; }

/* Modals */
.dark #comingSoonModal > div { background-color: #1e293b; }
.dark #comingSoonModal h2 { color: #f1f5f9; }
.dark #comingSoonModal p { color: #94a3b8; }

/* Scrollbar */
.dark .screenshot-strip { scrollbar-color: #334155 #1e293b; }
.dark .screenshot-strip::-webkit-scrollbar-track { background: #1e293b; }
.dark .screenshot-strip::-webkit-scrollbar-thumb { background: #334155; }