* { font-family: 'Inter', system-ui, sans-serif; }
.font-mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; }

/* ─────────────────────────────────────────────────────────
   DARK MODE DESIGN TOKENS
   4-step elevation model (page → section → card → raised)

   LIGHT                    DARK
   page:    #f8fafc          #0b1120   ← warmer than pure #020617
   section: #f1f5f9          #0f1829   ← alt sections, sidebars
   card:    #ffffff          #162032   ← cards, panels — clearly above page
   raised:  #f8fafc          #1d2d44   ← modals, dropdowns, inputs
   border:  #e2e8f0          #1e3050   ← visible but not harsh
   border2: #f1f5f9          #162843   ← subtle inner borders
   text-1:  #0f172a          #e2e8f0   ← primary
   text-2:  #475569          #94a3b8   ← secondary
   text-3:  #94a3b8          #4e6a8a   ← muted/placeholder
───────────────────────────────────────────────────────── */

:root {
  --bg-page:     #f8fafc;
  --bg-section:  #f1f5f9;
  --bg-card:     #ffffff;
  --bg-raised:   #f8fafc;
  --border:      #e2e8f0;
  --border-sub:  #f1f5f9;
  --text-1:      #0f172a;
  --text-2:      #475569;
  --text-3:      #94a3b8;
}

html.dark {
  --bg-page:     #0b1120;
  --bg-section:  #0f1829;
  --bg-card:     #162032;
  --bg-raised:   #1d2d44;
  --border:      #1e3050;
  --border-sub:  #162843;
  --text-1:      #e2e8f0;
  --text-2:      #94a3b8;
  --text-3:      #4e6a8a;
}

/* Base */
html body {
  background-color: var(--bg-page);
  color: var(--text-1);
  transition: background-color 0.25s ease, color 0.2s ease;
}

/* ── Global dark overrides for Tailwind classes ─────────── */

/* Page / section backgrounds */
html.dark .bg-slate-50,
html.dark .bg-slate-50\/50   { background-color: var(--bg-section) !important; }
html.dark .bg-slate-100      { background-color: var(--bg-section) !important; }
html.dark .bg-slate-900      { background-color: var(--bg-section) !important; }
html.dark .bg-slate-950      { background-color: var(--bg-page)    !important; }

/* Card surfaces — bg-white gets the card layer */
html.dark .bg-white          { background-color: var(--bg-card)    !important; }

/* Borders */
html.dark .border-slate-50,
html.dark .border-slate-100  { border-color: var(--border-sub) !important; }
html.dark .border-slate-200  { border-color: var(--border)     !important; }
html.dark .border-slate-700,
html.dark .border-slate-800  { border-color: var(--border)     !important; }
html.dark .border-slate-900  { border-color: var(--border-sub) !important; }

/* Text */
html.dark .text-slate-900    { color: var(--text-1) !important; }
html.dark .text-slate-800    { color: #cbd5e1       !important; }
html.dark .text-slate-700    { color: #94a3b8       !important; }
html.dark .text-slate-600    { color: #7a96b8       !important; }
html.dark .text-slate-500    { color: var(--text-3) !important; }
html.dark .text-slate-400    { color: #4e6a8a       !important; }

/* Hover surfaces */
html.dark .hover\:bg-slate-50:hover  { background-color: var(--bg-raised)  !important; }
html.dark .hover\:bg-slate-100:hover { background-color: var(--bg-raised)  !important; }
html.dark .hover\:bg-slate-800:hover { background-color: var(--bg-raised)  !important; }

/* ── Input fields global dark ───────────────────────────── */
html.dark input:not([type=range]):not([type=checkbox]):not([type=radio]),
html.dark textarea,
html.dark select {
  background-color: var(--bg-page)    !important;
  border-color:     var(--border)     !important;
  color:            var(--text-1)     !important;
}
html.dark input:not([type=range]):not([type=checkbox]):not([type=radio]):focus,
html.dark textarea:focus,
html.dark select:focus {
  background-color: var(--bg-raised)  !important;
  border-color:     #4263eb           !important;
  outline: none;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--text-3) !important; }
html.dark option                { background-color: var(--bg-raised); color: var(--text-1); }

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: #cbd5e1; border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb        { background: #1e3050; }
html.dark ::-webkit-scrollbar-thumb:hover  { background: #2a4268; }

/* Tailwind ring */
.ring-primary { --tw-ring-color: #4263eb; }

/* ── Modal backdrop ─────────────────────────────────────── */
/* Light: softer white-tinted blur; Dark: deep navy blur    */
.modal-backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html.dark .modal-backdrop {
  background: rgba(6, 10, 24, 0.82);
}

/* ── Animations ─────────────────────────────────────────── */
@keyframes fadeIn      { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideInRight  { from { transform:translateX(100%); }  to { transform:translateX(0); } }
@keyframes slideOutRight { from { transform:translateX(0); }    to { transform:translateX(100%); } }
@keyframes pulse-dot   { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
@keyframes scanline    { 0%{top:0;} 100%{top:100%;} }
@keyframes spin        { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }
@keyframes ping        { 0%{transform:scale(1);opacity:1;} 75%,100%{transform:scale(2);opacity:0;} }

.animate-fade-in      { animation: fadeIn       0.4s ease both; }
.animate-scan         { animation: scanline      5s linear infinite; }
.animate-ping         { animation: ping          1.5s cubic-bezier(0,0,0.2,1) infinite; }
.animate-spin         { animation: spin          45s linear infinite; }
.animate-spin-reverse { animation: spin          30s linear infinite reverse; }
.animate-pulse        { animation: pulse-dot     2s ease infinite; }

/* ── Mobile menu ────────────────────────────────────────── */
.mobile-menu-enter { animation: slideInRight  0.3s cubic-bezier(0.16,1,0.3,1) both; }
.mobile-menu-exit  { animation: slideOutRight 0.25s ease both; }

/* ── Progress bar ───────────────────────────────────────── */
.progress-fill { transition: width 0.5s ease; }

/* ── Line clamp ─────────────────────────────────────────── */
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ── FAQ accordion ──────────────────────────────────────── */
.faq-body      { display:none; }
.faq-body.open { display:block; animation: fadeIn 0.2s ease; }

/* ── Floating WhatsApp Button ───────────────────────────── */
.floating-whatsapp {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 999;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-whatsapp:hover {
  background-color: #20ba5a;
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
}

.floating-whatsapp:active {
  transform: scale(0.95);
}

/* Dark mode adjustments */
html.dark .floating-whatsapp {
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.25);
}

html.dark .floating-whatsapp:hover {
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .floating-whatsapp {
    width: 55px;
    height: 55px;
    font-size: 26px;
    bottom: 1.5rem;
    right: 1.5rem;
  }
}

@media (max-width: 384px) {
  .floating-whatsapp {
    width: 50px;
    height: 50px;
    font-size: 24px;
    bottom: 1rem;
    right: 1rem;
  }
}

/* ── Video Player Styling ───────────────────────────── */
video {
  /* Hide default browser video controls for custom UI */
}

video::-webkit-media-controls {
  display: none !important;
}

video::-moz-media-controls {
  display: none !important;
}

/* Ensure video takes up proper space */
video {
  background-color: #000;
  width: 100%;
  height: 100%;
}