/* ═══════════════════════════════════════════════════════════════
   Polygon Branding — Light / Dark Theme System
   Light mode palette inspired by retellai.com:
     Page bg     : #ffffff
     Card bg     : #f5f5fa
     Alt section : #f0f0f6
     Heading     : #131b24
     Body text   : #374151
     Muted text  : #6b7280
     Border      : #e1e4ea
   ═══════════════════════════════════════════════════════════════ */

/* ── Page & body ─────────────────────────────────────────────── */
html:not(.dark) {
  background-color: #ffffff;
}

html:not(.dark) body {
  background-color: #ffffff;
  color: #000000;
}

/* ── Background overrides ────────────────────────────────────── */
html:not(.dark) .bg-background-dark {
  background-color: #ffffff !important;
}

html:not(.dark) .bg-card-dark {
  background-color: #f5f5fa !important;
}

html:not(.dark) #hero-card {
  background: radial-gradient(circle at 80% 20%, #1565c0 0%, transparent 60%),
    radial-gradient(circle at 20% 80%, #00796b 0%, transparent 70%),
    radial-gradient(circle at 50% 50%, #031b4e 0%, #020c1b 100%) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html:not(.dark) #hero-card .text-slate-100 {
  color: #f1f5f9 !important;
}

html:not(.dark) #hero-card .text-slate-300 {
  color: #cbd5e1 !important;
}

html:not(.dark) #hero-card .text-slate-400 {
  color: #94a3b8 !important;
}

html:not(.dark) #hero-card .text-slate-500 {
  color: #64748b !important;
}

html:not(.dark) #hero-card .text-white {
  color: #ffffff !important;
}

html:not(.dark) #hero-card .bg-white\/5 {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

html:not(.dark) #hero-card .border-white\/10 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html:not(.dark) .bg-black {
  background-color: #f0f0f6 !important;
}

/* Cards nested inside card-dark (need extra separation) */
html:not(.dark) .bg-card-dark .bg-white\/5 {
  background-color: #ebebf5 !important;
}

html:not(.dark) .bg-card-dark .bg-white\/10 {
  background-color: #e4e4f0 !important;
}

/* Subtle frosted backgrounds used in badges / overlays */
html:not(.dark) .bg-white\/5 {
  background-color: #f5f5fa !important;
}

html:not(.dark) .bg-white\/10 {
  background-color: #ededf6 !important;
}

/* ── Text overrides ──────────────────────────────────────────── */
/* Global overrides to make slate text classes pure white in dark mode and pure black in light mode */
html.dark .text-slate-100,
html.dark .text-slate-300,
html.dark .text-slate-400,
html.dark .text-slate-500 {
  color: #ffffff !important;
}

html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-300,
html:not(.dark) .text-slate-400,
html:not(.dark) .text-slate-500 {
  color: #000000 !important;
}

html:not(.dark) .text-slate-600 {
  color: #4b5563 !important;
}

html:not(.dark) .text-slate-700 {
  color: #6b7280 !important;
}

/* text-white: flip to dark in light mode */
html:not(.dark) .text-white {
  color: #000000 !important;
}

/* Nav hover — prevent white text on light header */
html:not(.dark) .nav-link:hover {
  color: #000000 !important;
}

html:not(.dark) a.hover\:text-white:hover {
  color: #000000 !important;
}

/* ── Keep white text on solid-colored gradient elements ──────── */
/* btn-shine CTA buttons (gradient bg) */
html:not(.dark) .btn-shine {
  color: #ffffff !important;
}

/* Solid gradient pairs — buttons, circles, badges */
html:not(.dark) .from-primary.to-accent-blue,
html:not(.dark) .from-primary.to-purple-600,
html:not(.dark) .from-primary.to-blue-600,
html:not(.dark) .from-accent-blue.to-cyan-500,
html:not(.dark) .from-cyan-500.to-emerald-500,
html:not(.dark) .from-pink-500.to-orange-400 {
  color: #ffffff !important;
}

/* Children with text-white INSIDE solid gradient containers */
html:not(.dark) .from-primary.to-accent-blue .text-white,
html:not(.dark) .from-primary.to-purple-600 .text-white,
html:not(.dark) .from-primary.to-blue-600 .text-white,
html:not(.dark) .from-accent-blue.to-cyan-500 .text-white,
html:not(.dark) .from-cyan-500.to-emerald-500 .text-white,
html:not(.dark) .from-pink-500.to-orange-400 .text-white {
  color: #ffffff !important;
}

/* WhatsApp float button */
html:not(.dark) .bg-\[#25D366\] {
  color: #ffffff !important;
}

/* ── Border overrides ────────────────────────────────────────── */
html:not(.dark) .border-white\/5 {
  border-color: #e1e4ea !important;
}

html:not(.dark) .border-white\/10 {
  border-color: #e1e4ea !important;
}

html:not(.dark) .border-white\/30 {
  border-color: #d1d5db !important;
}

/* ── Glass header ────────────────────────────────────────────── */
html:not(.dark) .glass-header {
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom-color: #e1e4ea !important;
}

/* ── Mobile menu overlay ─────────────────────────────────────── */
html:not(.dark) #mobile-menu {
  background-color: transparent !important;
  border-top-color: #e1e4ea !important;
}

html:not(.dark) #mobile-menu .nav-link {
  color: #000000 !important;
  font-weight: 700 !important;
}

html:not(.dark) #mobile-menu .nav-link:hover {
  color: #833cf6 !important;
}

/* ── Card hover shadow ───────────────────────────────────────── */
html:not(.dark) .card-lift:hover {
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.10) !important;
}

/* ── Marquee gradient fades — hidden in light mode (color mismatch) ── */
html:not(.dark) .marquee-container::before,
html:not(.dark) .marquee-container::after {
  display: none;
}

/* ── Form inputs ─────────────────────────────────────────────── */
html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #131b24 !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #99a0ae !important;
}

html:not(.dark) input:focus,
html:not(.dark) textarea:focus,
html:not(.dark) select:focus {
  background: #ffffff !important;
  border-color: #833cf6 !important;
  box-shadow: 0 0 0 3px rgba(131, 60, 246, 0.12) !important;
  color: #131b24 !important;
}

html:not(.dark) input:-webkit-autofill,
html:not(.dark) input:-webkit-autofill:hover,
html:not(.dark) input:-webkit-autofill:focus {
  -webkit-text-fill-color: #131b24 !important;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}

/* ── Skeleton loader ─────────────────────────────────────────── */
html:not(.dark) .skeleton {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%) !important;
  background-size: 200% 100% !important;
}

/* ── Project modal (stays intentionally dark) ────────────────── */
html:not(.dark) #project-modal {
  background-color: rgba(0, 0, 0, 0.80) !important;
}

html:not(.dark) .modal-content {
  background-color: #131b24 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Text inside dark modal overrides the global text-white flip */
html:not(.dark) #project-modal .text-white,
html:not(.dark) .modal-content .text-white {
  color: #ffffff !important;
}

html:not(.dark) #project-modal .text-slate-300,
html:not(.dark) .modal-content .text-slate-300 {
  color: #cbd5e1 !important;
}

html:not(.dark) #project-modal #modal-gallery {
  background-color: #000000 !important;
}

/* ── Pricing plan card active state ─────────────────────────── */
html:not(.dark) .plan-card.active {
  border-color: #833cf6 !important;
  background-color: rgba(131, 60, 246, 0.04) !important;
  box-shadow: 0 0 20px rgba(131, 60, 246, 0.10) !important;
}

html:not(.dark) .plan-card.active .radio-circle {
  border-color: #833cf6 !important;
}

html:not(.dark) .plan-card.active .radio-circle::after {
  background: #833cf6 !important;
  box-shadow: 0 0 8px #833cf6 !important;
}

/* ── Pricing form overlay ────────────────────────────────────── */
html:not(.dark) #form-overlay>div {
  background: rgba(245, 245, 250, 0.92) !important;
  border-color: #e1e4ea !important;
  color: #6b7280 !important;
}

/* ── Success state card ──────────────────────────────────────── */
html:not(.dark) #success-view {
  background-color: #f5f5fa !important;
  border-color: rgba(131, 60, 246, 0.25) !important;
}

html:not(.dark) #success-view .bg-white\/5 {
  background-color: #ffffff !important;
  border-color: #e1e4ea !important;
}

/* ── Connect / hover cards (about page) ─────────────────────── */
html:not(.dark) .connect-card:hover {
  background-color: #f5f5fa !important;
}

/* ── Dot-grid background opacity ────────────────────────────── */
/* Reduce visibility of dark-optimised dot grid on white bg */
html:not(.dark) [style*="radial-gradient(circle at 2px 2px"] {
  opacity: 0.04 !important;
}

/* ── Brief page — override CSS custom properties ────────────── */
html:not(.dark) {
  --bg: #f1f5f9;
  --card: #ffffff;
  --card-hover: #f8fafc;
  --border: #cbd5e1;
  --text: #0f172a;
  --text-2: #334155;
  --text-3: #64748b;
}

html:not(.dark) .card {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.07) !important;
}

html:not(.dark) .btn-back {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html:not(.dark) .dropzone {
  border-color: #cbd5e1 !important;
}

html:not(.dark) .phone-prefix {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
  border-right: none !important;
}

html:not(.dark) .progress-track {
  background: #cbd5e1 !important;
}

html:not(.dark) .dot {
  background: #cbd5e1 !important;
}

html:not(.dark) .btn-row {
  border-top-color: #cbd5e1 !important;
}

html:not(.dark) .color-section {
  border-top-color: #cbd5e1 !important;
}

html:not(.dark) body::before {
  background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.05) 0%, transparent 70%) !important;
}

/* ── Theme toggle button adaptive colors ─────────────────────── */
html:not(.dark) .theme-toggle-btn {
  border-color: #cbd5e1 !important;
  color: #334155;
}

html:not(.dark) .theme-toggle-btn:hover {
  background-color: #f1f5f9 !important;
}

html:not(.dark) .theme-toggle-btn .theme-icon {
  color: #334155 !important;
}

/* Mobile menu theme toggle */
html:not(.dark) #mobile-menu .theme-toggle-btn {
  border-color: #cbd5e1 !important;
  background-color: #f1f5f9 !important;
}

/* ═══════════════════════════════════════════════════════════════
   Retell-style Morphing Glassmorphic Navbar System
   ═══════════════════════════════════════════════════════════════ */

/* ── BASE HEADER STATE (Layout for both unscrolled & scrolled) ──── */
#main-header {
  position: fixed;
  top: 1rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 2rem) !important;
  max-width: 1200px !important;
  border-radius: 0.75rem !important;
  box-shadow: none !important;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  z-index: 100 !important;
  padding: 0 !important;
}

@media (min-width: 640px) {
  #main-header {
    width: calc(100% - 3rem) !important;
  }
}

@media (min-width: 768px) {
  #main-header {
    width: calc(100% - 4rem) !important;
    border-radius: 1rem !important;
  }
}

@media (min-width: 1280px) {
  #main-header {
    width: calc(100% - 6rem) !important;
  }
}

/* Light Theme Unscrolled */
html:not(.dark) #main-header {
  background: transparent !important;
  border: none !important;
}

html:not(.dark) #header-logo-text {
  color: #0f172a !important;
}

html:not(.dark) .header-logo-img {
  filter: invert(1) !important;
}

html:not(.dark) .header-nav-link {
  color: #475569 !important;
}

html:not(.dark) .header-nav-link:hover {
  color: #0f172a !important;
}

html:not(.dark) .header-theme-btn {
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

html:not(.dark) .header-theme-btn .theme-icon {
  color: #475569 !important;
}

html:not(.dark) #header-btn-login,
html:not(.dark) #header-btn-contact {
  background-color: transparent !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

html:not(.dark) #header-btn-login:hover,
html:not(.dark) #header-btn-contact:hover {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

html:not(.dark) #header-btn-try {
  background-color: #0f172a !important;
  color: #ffffff !important;
}

html:not(.dark) #header-btn-try:hover {
  background-color: #000000 !important;
  transform: translateY(-1px) !important;
}

/* Dark Theme Unscrolled */
html.dark #main-header {
  background: transparent !important;
  border: none !important;
}

html.dark #header-logo-text {
  color: #ffffff !important;
}

html.dark .header-nav-link {
  color: #cbd5e1 !important;
}

html.dark .header-nav-link:hover {
  color: #ffffff !important;
}

html.dark .header-theme-btn {
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html.dark .header-theme-btn .theme-icon {
  color: #cbd5e1 !important;
}

html.dark #header-btn-login,
html.dark #header-btn-contact {
  background-color: transparent !important;
  border: 1px solid #334155 !important;
  color: #cbd5e1 !important;
}

html.dark #header-btn-login:hover,
html.dark #header-btn-contact:hover {
  background-color: #1e293b !important;
  color: #ffffff !important;
  border-color: #475569 !important;
}

html.dark #header-btn-try {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

html.dark #header-btn-try:hover {
  background-color: #f1f5f9 !important;
  transform: translateY(-1px) !important;
}


/* ── SCROLLED STATE (Floating Glassmorphic Capsule) ─────────── */
#main-header.scrolled {
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15) !important;
}

/* Light Theme Scrolled */
html:not(.dark) #main-header.scrolled {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

html:not(.dark) #main-header.scrolled #header-logo-text {
  color: #0f172a !important;
}

html:not(.dark) #main-header.scrolled .header-nav-link {
  color: #334155 !important;
}

html:not(.dark) #main-header.scrolled .header-nav-link:hover {
  color: #0f172a !important;
}

html:not(.dark) #main-header.scrolled .header-theme-btn {
  background-color: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #334155 !important;
}

html:not(.dark) #main-header.scrolled .header-theme-btn .theme-icon {
  color: #334155 !important;
}

html:not(.dark) #main-header.scrolled #header-btn-login,
html:not(.dark) #main-header.scrolled #header-btn-contact {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}

html:not(.dark) #main-header.scrolled #header-btn-login:hover,
html:not(.dark) #main-header.scrolled #header-btn-contact:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: rgba(15, 23, 42, 0.15) !important;
}

html:not(.dark) #main-header.scrolled #header-btn-try {
  background-color: #0f172a !important;
  color: #ffffff !important;
}

html:not(.dark) #main-header.scrolled #header-btn-try:hover {
  background-color: #000000 !important;
}

/* Dark Theme Scrolled */
html.dark #main-header.scrolled {
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
}

html.dark #main-header.scrolled #header-logo-text {
  color: #ffffff !important;
}

html.dark #main-header.scrolled .header-nav-link {
  color: #cbd5e1 !important;
}

html.dark #main-header.scrolled .header-nav-link:hover {
  color: #ffffff !important;
}

html.dark #main-header.scrolled .header-theme-btn {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}

html.dark #main-header.scrolled .header-theme-btn .theme-icon {
  color: #cbd5e1 !important;
}

html.dark #main-header.scrolled #header-btn-login,
html.dark #main-header.scrolled #header-btn-contact {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

html.dark #main-header.scrolled #header-btn-login:hover,
html.dark #main-header.scrolled #header-btn-contact:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

html.dark #main-header.scrolled #header-btn-try {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

html.dark #main-header.scrolled #header-btn-try:hover {
  background-color: #f1f5f9 !important;
}

/* Active navigation link styling */
.header-nav-link.active-link {
  color: #833cf6 !important;
  font-weight: 700 !important;
}

/* ── MOBILE MENU OVERLAYS ── */
/* ── MOBILE MENU OVERLAYS ── */
#mobile-menu {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative !important;
  width: 100% !important;
}

html.dark #mobile-menu {
  background: transparent !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

#mobile-menu .nav-link {
  color: #000000 !important;
  font-weight: 700 !important;
}

#mobile-menu .nav-link:hover {
  color: #833cf6 !important;
}

html.dark #mobile-menu .nav-link {
  color: #ffffff !important;
  font-weight: 700 !important;
}

html.dark #mobile-menu .nav-link:hover {
  color: #833cf6 !important;
}

/* Header styling when mobile menu is expanded */
#main-header.mobile-menu-open {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

html:not(.dark) #main-header.mobile-menu-open {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

html:not(.dark) #main-header.mobile-menu-open #header-logo-text {
  color: #0f172a !important;
}

html:not(.dark) #main-header.mobile-menu-open #mobile-menu-btn {
  color: #0f172a !important;
  background-color: rgba(15, 23, 42, 0.05) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

html.dark #main-header.mobile-menu-open {
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

html.dark #main-header.mobile-menu-open #header-logo-text {
  color: #ffffff !important;
}

html.dark #main-header.mobile-menu-open #mobile-menu-btn {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

#mobile-menu-btn {
  background-color: transparent !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
}

html:not(.dark) #mobile-menu-btn {
  color: #334155 !important;
}

html:not(.dark) #mobile-menu-btn span {
  color: #334155 !important;
}

html.dark #mobile-menu-btn {
  color: #cbd5e1 !important;
}

html.dark #mobile-menu-btn span {
  color: #cbd5e1 !important;
}

#main-header.scrolled #mobile-menu-btn {
  background-color: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

html.dark #main-header.scrolled #mobile-menu-btn {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ── Respect macOS / iOS "Reduce Motion" accessibility setting ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}