/* ══════════════════════════════════════════════════════════
   S3 Gfx Portfolio — Master CSS (Debug & Clean)
   Version: 3.0 — Full Debug & Enhancement
══════════════════════════════════════════════════════════ */

/* ── CSS Variables ───────────────────────────────────────── */
:root {
  --navbar-height: 80px;
  --sidebar-width: 72px;
  --z-bg: 0;
  --z-content: 1;
  --z-sidebar-overlay: 9997;
  --z-sidebar: 9999;
  --z-navbar: 1000;
  --z-tooltip: 10000;

  /* ── Dark Mode (default) ───────── */
  --color-bg-primary:    #0a0a0f;
  --color-bg-secondary:  #0f0f1a;
  --color-bg-tertiary:   #12121f;
  --color-surface:       rgba(255,255,255,0.04);
  --color-surface-hover: rgba(255,255,255,0.08);
  --color-border:        rgba(255,255,255,0.08);
  --color-border-strong: rgba(139,92,246,0.3);

  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-muted:     rgba(255,255,255,0.35);
  --color-text-inverse:   #0a0a0f;

  --color-nav-bg:         rgba(10,10,15,0.85);
  --color-nav-border:     rgba(255,255,255,0.06);
  --color-sidebar-bg:     rgba(10,10,15,0.92);
  --color-sidebar-item:   rgba(255,255,255,0.45);
  --color-sidebar-hover:  rgba(255,255,255,0.08);

  --color-card-bg:        rgba(255,255,255,0.04);
  --color-card-border:    rgba(255,255,255,0.07);
  --color-card-hover:     rgba(255,255,255,0.07);

  --color-input-bg:       rgba(255,255,255,0.06);
  --color-input-border:   rgba(255,255,255,0.12);
  --color-input-text:     rgba(255,255,255,0.85);
  --color-input-placeholder: rgba(255,255,255,0.3);

  --color-footer-bg:      rgba(0,0,0,0.5);
  --color-footer-text:    rgba(255,255,255,0.6);

  --color-accent-1: #8b5cf6;
  --color-accent-2: #06b6d4;
  --color-accent-3: #ec4899;

  --bg-noise-opacity: 0.03;
  --section-alt-bg: rgba(255,255,255,0.015);
  --theme-transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
[data-theme="light"] {
  --color-bg-primary:    #f8f7ff;
  --color-bg-secondary:  #f0eeff;
  --color-bg-tertiary:   #ebe8ff;
  --color-surface:       rgba(255,255,255,0.85);
  --color-surface-hover: rgba(139,92,246,0.06);
  --color-border:        rgba(139,92,246,0.12);
  --color-border-strong: rgba(139,92,246,0.4);

  --color-text-primary:   #1a1035;
  --color-text-secondary: #4a3f6b;
  --color-text-muted:     #8b7fb5;
  --color-text-inverse:   #ffffff;

  --color-nav-bg:         rgba(248,247,255,0.92);
  --color-nav-border:     rgba(139,92,246,0.1);
  --color-sidebar-bg:     rgba(248,247,255,0.96);
  --color-sidebar-item:   #6d5fa8;
  --color-sidebar-hover:  rgba(139,92,246,0.08);

  --color-card-bg:        rgba(255,255,255,0.85);
  --color-card-border:    rgba(139,92,246,0.1);
  --color-card-hover:     rgba(139,92,246,0.06);

  --color-input-bg:       rgba(255,255,255,0.9);
  --color-input-border:   rgba(139,92,246,0.2);
  --color-input-text:     #1a1035;
  --color-input-placeholder: #9d93c3;

  --color-footer-bg:      rgba(26,16,53,0.97);
  --color-footer-text:    rgba(255,255,255,0.65);

  --bg-noise-opacity: 0.015;
  --section-alt-bg: rgba(139,92,246,0.03);
}



/* ══════════════════════════════════════════════════════════
   GLOBAL RESET & BASE
══════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* overflow rules defined in SCROLLBAR section */
}

/* body scroll rules defined in SCROLLBAR section below */

/* ── Fix: Eliminate bottom scroll gap / extra space ─────── */
body::after {
  content: none;
  display: none;
}

/* Ensure no element causes horizontal scroll */
section,
.section-glass,
footer,
.glass-card {
  max-width: 100%;
}

/* ══════════════════════════════════════════════════════════
   LAYOUT — Navbar + Sidebar + Main
══════════════════════════════════════════════════════════ */

/* Navbar: fixed top, full width */
.glass-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--navbar-height) !important;
  z-index: var(--z-navbar) !important;
}

/* Sidebar: fixed left, base styles */
#sidebar.glass-sidebar,
.glass-sidebar {
  position: fixed !important;
  left: 0 !important;
  z-index: var(--z-sidebar) !important;
  overflow: visible !important;
}

/* Desktop: narrow icon bar, always visible, below navbar */
@media (min-width: 1024px) {
  #sidebar.glass-sidebar,
  .glass-sidebar {
    top: var(--navbar-height) !important;
    width: var(--sidebar-width) !important;
    height: calc(100vh - var(--navbar-height)) !important;
    transform: translateX(0) !important;
    overflow: visible !important;
  }
}

/* Mobile: full-height panel, 260px wide, hidden until hamburger tapped */
@media (max-width: 1023px) {
  #sidebar.glass-sidebar,
  .glass-sidebar {
    top: 0 !important;
    width: 260px !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: fixed !important;   /* ensures absolute children stay inside */
  }
}

/* Close button — always inside sidebar, theme-aware */
#sidebar-close-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  z-index: 60 !important;
}
[data-theme="light"] #sidebar-close-btn {
  background: rgba(139,92,246,0.1) !important;
  border-color: rgba(139,92,246,0.2) !important;
  color: #4a3f6b !important;
}
[data-theme="light"] #sidebar-close-btn:hover {
  background: rgba(239,68,68,0.12) !important;
  color: #dc2626 !important;
}
:root:not([data-theme="light"]) #sidebar-close-btn {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.8) !important;
}
:root:not([data-theme="light"]) #sidebar-close-btn:hover {
  background: rgba(239,68,68,0.2) !important;
  color: #ffffff !important;
}

/* Main wrapper: account for sidebar on DESKTOP only */
@media (min-width: 1024px) {
  div.lg\:ml-sidebar-width {
    margin-left: var(--sidebar-width) !important;
  }
}

@media (max-width: 1023px) {
  div.lg\:ml-sidebar-width {
    margin-left: 0 !important;
  }
}

/* Main content: top padding = navbar height (80px = h-20) */
main#main-content {
  padding-top: var(--navbar-height) !important;
}

/* Override hardcoded tailwind pt-navbar-height utility */
.pt-navbar-height {
  padding-top: var(--navbar-height) !important;
}

/* ══════════════════════════════════════════════════════════
   SECTION BACKGROUNDS — Full Width (Left to Right)
══════════════════════════════════════════════════════════ */

/* Section glass: full horizontal coverage, no overflow */
.section-glass {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  padding-bottom: 5rem;
}

/* Alternating section backgrounds for visual depth */
.section-glass:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}

/* Full-width decorative background blobs */
.section-glass > .container {
  position: relative;
  z-index: 2;
}

/* Section background pseudo-elements for full-bleed effect */
.section-bg-purple::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.section-bg-cyan::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(225deg, rgba(6, 182, 212, 0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ══════════════════════════════════════════════════════════
   TYPOGRAPHY & GRADIENTS
══════════════════════════════════════════════════════════ */

.gradient-text {
  background: linear-gradient(135deg, #8b5cf6, #ec4899, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════════════════
   FLOAT & ANIMATION
══════════════════════════════════════════════════════════ */

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-20px); }
}

@keyframes float-soft {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-12px) rotate(1deg); }
  66%       { transform: translateY(-6px) rotate(-1deg); }
}

.animate-float { animation: float 3s ease-in-out infinite; }
.float-soft    { animation: float-soft 6s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════ */

.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.portfolio-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.portfolio-card:hover {
  transform: scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

/* ══════════════════════════════════════════════════════════
   MASONRY PORTFOLIO GRID
══════════════════════════════════════════════════════════ */

.portfolio-masonry {
  column-count: 4;
  column-gap: 24px;
}

.portfolio-masonry .portfolio-card {
  break-inside: avoid;
  margin-bottom: 24px;
}

@media (max-width: 1280px) { .portfolio-masonry { column-count: 3; } }
@media (max-width: 1024px) { .portfolio-masonry { column-count: 2; } }
@media (max-width: 640px)  { .portfolio-masonry { column-count: 1; } }

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */

.footer-link {
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;
}

.footer-link:hover { color: #ffffff; }

.social-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
}

.social-icon:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transform: scale(1.1);
}

/* ══════════════════════════════════════════════════════════
   FILTER BUTTONS
══════════════════════════════════════════════════════════ */

.filter-btn {
  padding: 0.5rem 1.25rem;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.25s ease;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.filter-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(139, 92, 246, 0.5);
  color: #ffffff;
}

.filter-btn.active {
  background: linear-gradient(135deg, #8b5cf6, #06b6d4);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR LINK HIGHLIGHT
══════════════════════════════════════════════════════════ */

.sidebar-link {
  position: relative;
  overflow: hidden;
}

.sidebar-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: linear-gradient(180deg, #8b5cf6, #06b6d4);
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: 0 2px 2px 0;
}

.sidebar-link:hover,
.sidebar-link.active { background: rgba(255, 255, 255, 0.08); }

.sidebar-link:hover::before,
.sidebar-link.active::before { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   NAV GLOW + MISC
══════════════════════════════════════════════════════════ */

.nav-glow:hover { box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.toc-sticky-bar { position: sticky; top: 40px; z-index: 40; }

@media (max-width: 640px) { html { font-size: 15px; } }

@media print { .no-print { display: none !important; } }

/* ══════════════════════════════════════════════════════════
   OUR CLIENTS — Infinite Marquee Strip
══════════════════════════════════════════════════════════ */

.clients-ticker-wrap {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.clients-ticker {
  display: flex;
  width: max-content;
  animation: clientScroll var(--ticker-duration, 28s) linear infinite;
  will-change: transform;
  gap: 0;
}

.clients-ticker:hover { animation-play-state: paused; }

@keyframes clientScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.client-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2.5rem;
  flex-shrink: 0;
  min-width: 180px;
}

.client-logo-item a,
.client-logo-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease, opacity .3s ease;
}

.client-logo-item:hover a,
.client-logo-item:hover span { transform: scale(1.08); opacity: 1 !important; }

.client-logo-img {
  max-height: 80px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) brightness(0) invert(1);
  opacity: 0.55;
  transition: filter .35s ease, opacity .35s ease;
}

.client-logo-item:hover .client-logo-img { filter: none; opacity: 1; }

.client-name-fallback {
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  letter-spacing: .03em;
  white-space: nowrap;
  transition: color .3s ease;
}

.client-logo-item:hover .client-name-fallback { color: rgba(255,255,255,0.75); }

.client-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
  align-self: center;
}

/* ══════════════════════════════════════════════════════════
   LAZY LOADING — Fade-in
══════════════════════════════════════════════════════════ */

img[loading="lazy"] { transition: opacity 0.4s ease; }

img.lazy-img {
  filter: blur(8px);
  opacity: 0.3;
  transition: filter 0.5s ease, opacity 0.5s ease;
}

img.lazy-img--loaded,
img[loading="lazy"].loaded { filter: none; opacity: 1; }

img { transition: opacity 0.35s ease; }

/* ══════════════════════════════════════════════════════════
   READING PROGRESS BAR
══════════════════════════════════════════════════════════ */

#reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #8b5cf6, #06b6d4, #ec4899);
  width: 0%;
  z-index: 9999;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
}

/* ══════════════════════════════════════════════════════════
   COOKIE CONSENT
══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  #cookie-banner {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    border-radius: 1rem 1rem 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════
   WHATSAPP BUTTON
══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  #whatsapp-btn {
    bottom: 5rem !important;
    right: 1.25rem !important;
    width: 46px !important;
    height: 46px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   FAQ SECTION
══════════════════════════════════════════════════════════ */

.faq-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  background: rgba(15, 15, 26, 0.6);
  backdrop-filter: blur(16px);
  transition: all 0.3s ease;
  overflow: hidden;
}

.faq-item:hover {
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: 0 4px 24px rgba(139, 92, 246, 0.1);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  user-select: none;
  gap: 1rem;
}

.faq-question h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.5;
  flex: 1;
}

.faq-icon {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #a78bfa;
  font-size: 0.75rem;
}

.faq-item.open .faq-icon {
  background: linear-gradient(135deg, #8b5cf6, #06b6d4);
  border-color: transparent;
  color: #fff;
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
  padding: 0 1.5rem;
}

.faq-item.open .faq-answer {
  max-height: 400px;
  padding: 0 1.5rem 1.25rem;
}

.faq-answer p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.faq-image-side {
  position: relative;
}

.faq-image-side::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899, #06b6d4);
  border-radius: 1.5rem;
  z-index: 0;
  opacity: 0.4;
}

.faq-image-side img {
  position: relative;
  z-index: 1;
  border-radius: 1.25rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 400px;
}

/* ══════════════════════════════════════════════════════════
   CONTACT FORM — Left Image + Right Form Layout
══════════════════════════════════════════════════════════ */

.contact-image-col {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  min-height: 500px;
}

.contact-image-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.contact-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.7), rgba(6, 182, 212, 0.5));
  z-index: 1;
}

.contact-image-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem;
}

.contact-info-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  color: #fff;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.contact-info-badge:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateX(4px);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE FIXES
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .faq-image-side {
    display: block;
    min-height: 280px !important;
  }

  .contact-image-col {
    min-height: 280px;
    border-radius: 1rem;
  }
}

/* Fix: No horizontal scrollbar — covered in SCROLLBAR section */
html, body { max-width: 100vw; }

/* Fix: Footer no extra margin/padding at bottom */
footer {
  margin-bottom: 0 !important;
  padding-bottom: 0;
}

/* Fix: Last section no double spacing at bottom */
section:last-of-type {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════
   HERO SECTION IMPROVEMENTS
══════════════════════════════════════════════════════════ */

/* Hero section occupies full viewport width */
.hero-section-full {
  width: 100%;
  min-height: 90vh;
  position: relative;
  overflow: hidden;
}

/* Hero image float animation */
.hero-img {
  animation: float-soft 6s ease-in-out infinite;
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════
   PORTFOLIO CARD HOVER INFO
══════════════════════════════════════════════════════════ */

.pf-card-hover-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 80%, transparent 100%);
  padding: 1.5rem 1rem 1rem;
  transform: translateY(8px);
  opacity: 0;
  transition: all 0.35s ease;
}

.portfolio-card:hover .pf-card-hover-info {
  transform: translateY(0);
  opacity: 1;
}

.pf-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pf-badge--purple {
  background: rgba(139, 92, 246, 0.3);
  border: 1px solid rgba(139, 92, 246, 0.5);
  color: #c4b5fd;
}

.pf-view-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 8px;
  background: rgba(139, 92, 246, 0.25);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: #e9d5ff;
  font-size: 0.75rem;
  font-weight: 600;
  gap: 4px;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR OVERLAY & MOBILE STYLES
══════════════════════════════════════════════════════════ */

/* Sidebar overlay - behind sidebar */
#sidebar-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9997 !important;
}

#sidebar-overlay:not(.hidden) {
  opacity: 1;
  visibility: visible;
  z-index: 9997 !important;
}

/* Sidebar z-index - above overlay */
#sidebar,
#sidebar.glass-sidebar {
  z-index: 9999 !important;
}

/* Prevent body scroll when sidebar is open — handled in SCROLLBAR section above */



/* ══════════════════════════════════════════════════════════
   SIDEBAR COMPONENTS — sb-* classes
══════════════════════════════════════════════════════════ */

/* Nav container */
.sb-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
  flex: 1;
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: none;
}
.sb-nav::-webkit-scrollbar { display: none; }

.sb-section-label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  padding: 0 0 6px;
  text-align: center;
  width: 100%;
}

/* Nav items */
.sb-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.sb-item:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
  transform: translateY(-1px);
}

.sb-item.active {
  background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(6,182,212,0.15));
  color: #a78bfa;
  box-shadow: 0 0 0 1px rgba(139,92,246,0.3), 0 4px 12px rgba(139,92,246,0.2);
}

.sb-item.active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background: linear-gradient(180deg, #8b5cf6, #06b6d4);
  border-radius: 0 3px 3px 0;
}

.sb-item-icon {
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
}

.sb-item-label {
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 10px;
  white-space: nowrap;
}

/* Divider */
.sb-divider {
  width: 32px;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 6px auto;
  flex-shrink: 0;
}

/* Logo wrap */
.sb-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0 8px;
  flex-shrink: 0;
}

.sb-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #8b5cf6, #06b6d4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Bottom section */
.sb-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 0 16px;
  flex-shrink: 0;
}

/* Social buttons */
.sb-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  font-size: 0.8rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.sb-social-btn:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
  transform: translateY(-1px);
}

/* CTA button */
.sb-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #8b5cf6, #06b6d4);
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  box-shadow: 0 0 16px rgba(139,92,246,0.35);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.sb-cta-btn:hover {
  box-shadow: 0 0 24px rgba(139,92,246,0.55);
  transform: translateY(-2px) scale(1.05);
}

/* ── Global Tooltip ─────────────────────────────────────── */
#global-tooltip {
  padding: 5px 10px;
  background: rgba(15,15,26,0.95);
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
  transition: opacity 0.15s ease;
  z-index: 10000;
}

/* ══════════════════════════════════════════════════════════
   MOBILE SIDEBAR — Full menu with labels when open
══════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

  /* Sidebar inner layout */
  .glass-sidebar {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Nav area: scrollable, padded for close button */
  .sb-nav {
    flex: 1 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 70px 10px 16px 10px !important;
    gap: 2px !important;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Each nav item: full width, icon + label row */
  .sb-item {
    width: 100% !important;
    height: 50px !important;
    justify-content: flex-start !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    gap: 14px !important;
  }

  /* Show labels on mobile */
  .sb-item-label {
    display: inline-block !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: inherit !important;
    white-space: nowrap !important;
  }

  /* Icon size */
  .sb-item-icon {
    font-size: 1rem !important;
    width: 20px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
  }

  /* Divider full width */
  .sb-divider {
    width: calc(100% - 20px) !important;
    margin: 8px 10px !important;
  }

  /* Bottom: social icons + CTA in a row */
  .sb-bottom {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 16px 24px !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    flex-shrink: 0 !important;
    margin-top: auto;
  }

  /* Sidebar must be flex column so sb-nav flex:1 + sb-bottom margin-top:auto works */
aside#sidebar.glass-sidebar {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
} 

  .sb-social-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    background: rgba(255,255,255,0.07) !important;
  }

  /* CTA: wider with text */
  .sb-cta-btn {
    width: auto !important;
    height: 40px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    font-size: 0.82rem !important;
    flex-direction: row !important;
    gap: 8px !important;
  }

  .sb-cta-btn::after {
    content: 'Start Project';
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  /* Active item left indicator */
  .sb-item.active::before {
    height: 28px !important;
  }

  /* NEVER show tooltips on mobile */
  #global-tooltip {
    display: none !important;
  }
}


/* ══════════════════════════════════════════════════════════
   MOBILE FIXES — Hero + General Layout
══════════════════════════════════════════════════════════ */

/* Hero: reduce gap on mobile */
@media (max-width: 1023px) {
  #hero-content {
    gap: 2rem !important;
    padding-top: 1.5rem;
  }

  /* Hero image: smaller on mobile, no float animation waste */
  .hero-slide-image img,
  .hero-img {
    max-width: 85vw !important;
    animation: none; /* save battery / prevent jank on mobile */
  }

  /* Hero text: tighter on small screens */
  .hero-slide-content h1 {
    font-size: 2rem !important;
    line-height: 1.25;
  }
}

@media (max-width: 640px) {
  .hero-slide-content h1 {
    font-size: 1.75rem !important;
  }

  /* Hero CTA buttons: stack cleanly */
  .hero-slide-content .flex.flex-col.sm\:flex-row {
    flex-direction: column !important;
    align-items: stretch;
  }

  /* Floating card icons on hero image: smaller on mobile */
  .hero-slide-image .glass-card {
    padding: 0.5rem !important;
  }
  .hero-slide-image .glass-card i {
    font-size: 1.25rem !important;
  }
}

/* ── Services cards mobile: prevent overflow ── */
@media (max-width: 640px) {
  .services-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Portfolio masonry: prevent card overflow on small phones ── */
@media (max-width: 375px) {
  .portfolio-masonry {
    column-count: 1 !important;
    column-gap: 0.75rem;
  }
}

/* ── Stats section: 2 cols on mobile (already correct via Tailwind) ── */

/* ── Testimonials: safe horizontal scroll on mobile ── */
@media (max-width: 767px) {
  .testimonials-track {
    gap: 0.75rem;
  }
}

/* ── Footer: stack newsletter form on mobile ── */
@media (max-width: 640px) {
  .newsletter-form-row {
    flex-direction: column;
    gap: 0.75rem;
  }
  .newsletter-form-row input,
  .newsletter-form-row button {
    width: 100% !important;
  }
}

/* ── Global: prevent text overflow on all narrow screens ── */
@media (max-width: 640px) {
  h2, h3 {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Ensure no section breaks outside viewport */
  section {
    overflow-x: hidden;
  }
}

/* ══════════════════════════════════════════════════════════
   HERO SLIDER — DOTS ONLY (arrows removed)
══════════════════════════════════════════════════════════ */

#hero-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, width 0.35s cubic-bezier(.4,0,.2,1);
}

.hero-dot--active {
  background: #ffffff;
  width: 24px; /* pill shape for active */
}

.hero-dot:not(.hero-dot--active):hover {
  background: rgba(255, 255, 255, 0.7);
}

/* Floating icon badges on hero image */
.hero-icon-badge {
  position: absolute;
  background: rgba(15, 15, 25, 0.85);
  border: 1px solid rgba(139, 92, 246, 0.35);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  white-space: nowrap;
  z-index: 10;
}

.hero-icon-badge--tr {
  top: -14px;
  right: -14px;
}

.hero-icon-badge--bl {
  bottom: -14px;
  left: -14px;
}

/* Hero image wrapper — relative container for icon badges */
.hero-image-wrap {
  position: relative;
  display: block;
}

/* ══════════════════════════════════════════════════════════
   HERO SLIDER — z-index fix
   fallback blobs must sit BEHIND the slide background image
══════════════════════════════════════════════════════════ */
#hero-slider-bg {
  z-index: 2;
}

.hero-fallback-bg {
  z-index: 1;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   THEME SYSTEM v2 — Clean, No Conflicts
   Strategy: CSS variables drive everything.
   One rule per element. No duplicate overrides.
══════════════════════════════════════════════════════════ */

/* ── 1. SCROLLBAR & SCROLL FIX ────────────────────────── */

/*
 * ROOT CAUSE OF DOUBLE SCROLLBAR:
 * tailwind.css sets ::-webkit-scrollbar globally (all elements)
 * We must explicitly control ONLY html, and suppress everything else.
 *
 * Rule: ONLY html scrolls. Body never creates its own scrollbar.
 */

/* Step 1: Kill ALL webkit scrollbars globally */
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; }

/* Step 2: html — single scroll container
   NO scrollbar-width (Firefox-only, causes dual scrollbar on Windows Chrome)
   NO scrollbar-gutter (causes reserved OS track to show separately)
   ONLY ::-webkit-scrollbar for Chrome/Edge */
html {
  overflow-x: hidden;
  overflow-y: auto;
}
html::-webkit-scrollbar        { width: 6px !important; }
html::-webkit-scrollbar-track  { background: transparent !important; }
html::-webkit-scrollbar-thumb  {
  background: linear-gradient(180deg,#8b5cf6,#06b6d4) !important;
  border-radius: 99px !important;
  min-height: 40px !important;
}
html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,#7c3aed,#0891b2) !important;
}

/* Step 3: body — never creates its own scrollbar */
body {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  min-height: 100vh;
}

/* Step 4: sidebar open — CSS class only, no JS inline styles */
body.sidebar-open {
  overflow: hidden !important;
  touch-action: none;
}

/* Step 5: Internal elements that need scrolling — hide their scrollbar UI */
.sb-nav,
.contact-popup-form-side,
.admin-sidebar nav,
#sidebar.glass-sidebar {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.sb-nav::-webkit-scrollbar,
.contact-popup-form-side::-webkit-scrollbar,
#sidebar.glass-sidebar::-webkit-scrollbar { width: 0 !important; }


/* ── 2. SELECT — Single Arrow Fix ─────────────────────── */
/* Kill ALL previous arrows first */
.glass-select-wrapper::after { display: none !important; }

select,
select.glass-input,
.contact-popup-field select,
.contact-popup-field select.glass-input {
  -webkit-appearance: none !important;
  -moz-appearance:    none !important;
  appearance:         none !important;
  background-repeat:   no-repeat !important;
  background-position: right 12px center !important;
  background-size:     18px 18px !important;
  padding-right:       40px !important;
}
/* Dark mode arrow */
select.glass-input,
.contact-popup-field select.glass-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}
/* Options */
select.glass-input option,
.contact-popup-field select.glass-input option {
  background: #1a1a2e !important;
  color: #ffffff !important;
}

/* ── 3. CORE VALUE ICON — Always Visible ──────────────── */
.core-value-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.core-value-icon i {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  font-size: 1.5rem !important;
}

/* ── 4. FOOTER — Always Dark ──────────────────────────── */
footer {
  background: rgba(10,10,15,0.97) !important;
}
footer h4 { color: #ffffff !important; }
footer p, footer li, footer span,
footer .text-text-secondary,
footer .text-text-muted {
  color: rgba(255,255,255,0.65) !important;
}
footer a { color: rgba(255,255,255,0.65) !important; text-decoration: none; }
footer a:hover { color: #ffffff !important; }
footer .bg-glass-100 { background: rgba(255,255,255,0.1) !important; }

/* ── 5. SHARE MODAL CLOSE BUTTON ──────────────────────── */
#close-share {
  cursor: pointer !important;
  z-index: 100 !important;
  position: relative !important;
  padding: 6px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  min-height: 32px !important;
  transition: background 0.2s, color 0.2s !important;
}
#close-share:hover { background: rgba(239,68,68,0.2) !important; color: #ef4444 !important; }

/* ── 6. MOBILE HAMBURGER ──────────────────────────────── */
#mobile-menu-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  min-height: 40px !important;
  cursor: pointer !important;
  z-index: 10 !important;
}
@media (min-width: 1024px) { #mobile-menu-btn { display: none !important; } }

/* ── 7. MOBILE SIDEBAR CLOSE BUTTON ──────────────────── */
#sidebar-close-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 60 !important;
}
@media (min-width: 1024px) { #sidebar-close-btn { display: none !important; } }

/* ── 8. MOBILE SIDEBAR OPEN ANIMATION ─────────────────── */
@media (max-width: 1023px) {
  #sidebar.glass-sidebar {
    transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94) !important;
  }
  #sidebar.glass-sidebar.sidebar-open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 40px rgba(0,0,0,0.4) !important;
  }
  #sidebar.sidebar-open .sb-item {
    width: 100% !important; justify-content: flex-start !important;
    padding: 0 16px !important; gap: 12px !important;
  }
  #sidebar.sidebar-open .sb-item-label { display: inline !important; }
  #sidebar.sidebar-open .sb-nav { align-items: flex-start !important; padding: 10px 12px !important; }
}

/* ── 9. ANIMATIONS ────────────────────────────────────── */
@keyframes dw-fadeUp   { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes dw-scaleIn  { from { opacity:0; transform:scale(0.9); }        to { opacity:1; transform:none; } }
@keyframes dw-slideLeft{ from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:none; } }
@keyframes dw-navDrop  { from { opacity:0; transform:translateY(-100%); } to { opacity:1; transform:none; } }
@keyframes dw-shimmer  { 0%{background-position:-200% center;} 100%{background-position:200% center;} }
@keyframes dw-float    { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes dw-glow     { 0%,100%{box-shadow:0 0 12px rgba(139,92,246,.3);} 50%{box-shadow:0 0 28px rgba(139,92,246,.6);} }
@keyframes dw-popIn    { from{opacity:0;transform:scale(.93) translateY(14px);} to{opacity:1;transform:none;} }

.glass-nav { animation: dw-navDrop .5s cubic-bezier(.25,.46,.45,.94) both; }
.glass-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease !important; will-change: transform; }
.glass-card:hover { transform: translateY(-4px) !important; }
.portfolio-card:hover { transform: scale(1.03) translateY(-2px) !important; }
.filter-btn { transition: all .2s ease !important; }
.filter-btn:nth-child(1){animation:dw-scaleIn .3s .05s both;} .filter-btn:nth-child(2){animation:dw-scaleIn .3s .1s both;}
.filter-btn:nth-child(3){animation:dw-scaleIn .3s .15s both;} .filter-btn:nth-child(4){animation:dw-scaleIn .3s .2s both;}
.filter-btn:nth-child(5){animation:dw-scaleIn .3s .25s both;} .filter-btn:nth-child(6){animation:dw-scaleIn .3s .3s both;}
.sb-item { animation: dw-slideLeft .4s both; }
.sb-item:nth-child(1){animation-delay:.1s;} .sb-item:nth-child(2){animation-delay:.15s;}
.sb-item:nth-child(3){animation-delay:.2s;} .sb-item:nth-child(4){animation-delay:.25s;}
.sb-item:nth-child(5){animation-delay:.3s;} .sb-item:nth-child(6){animation-delay:.35s;}
.sb-social-btn,.sb-cta-btn { animation: dw-scaleIn .4s .4s both; }
.contact-popup-modal.active .contact-popup-panel { animation: dw-popIn .35s cubic-bezier(.25,.46,.45,.94) both !important; }
.core-value-card:hover .core-value-icon { animation: dw-glow 1.8s ease-in-out infinite !important; }
#scroll-top { transition: opacity .3s, transform .3s ease !important; animation: dw-glow 3s ease-in-out infinite; }
#scroll-top:not(.opacity-0):hover { transform: translateY(-4px) scale(1.12) !important; }
.gradient-text {
  background: linear-gradient(90deg,#8b5cf6,#ec4899,#06b6d4,#8b5cf6) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: dw-shimmer 4s linear infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ══════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   Rule: one block per component. Specificity via [data-theme="light"]
══════════════════════════════════════════════════════════ */

/* ── Body & Background ─────────────────────────────────── */
[data-theme="light"] body {
  background: linear-gradient(135deg,#f8f7ff,#f0eeff,#f8f7ff) !important;
  color: #1a1035 !important;
}
[data-theme="light"] .fixed.inset-0.bg-gradient-to-br,
[data-theme="light"] .fixed.inset-0.-z-10 {
  background: linear-gradient(135deg,#f8f7ff,#ede9ff,#f8f7ff) !important;
  opacity: .6;
}
[data-theme="light"] .bg-noise { opacity: .012 !important; }

/* ── Navbar — LIGHT ────────────────────────────────────── */
[data-theme="light"] .glass-nav {
  background: rgba(248,247,255,.94) !important;
  border-bottom: 1px solid rgba(139,92,246,.12) !important;
  box-shadow: 0 2px 20px rgba(139,92,246,.07) !important;
}
[data-theme="light"] #mobile-menu-btn,
[data-theme="light"] #mobile-menu-btn i { color: #4a3f6b !important; }
[data-theme="light"] #mobile-menu-btn:hover { background: rgba(139,92,246,.1) !important; color: #6d28d9 !important; }

/* ── Sidebar — LIGHT ───────────────────────────────────── */
[data-theme="light"] #sidebar.glass-sidebar {
  background: rgba(248,247,255,.97) !important;
  border-right: 1px solid rgba(139,92,246,.1) !important;
}
[data-theme="light"] .sb-item { color: #6d5fa8 !important; }
[data-theme="light"] .sb-item:hover { background: rgba(139,92,246,.09) !important; color: #7c3aed !important; }
[data-theme="light"] .sb-item.active { background: rgba(139,92,246,.14) !important; color: #7c3aed !important; }
[data-theme="light"] .sb-social-btn { color: #6d5fa8 !important; background: rgba(139,92,246,.06) !important; }
[data-theme="light"] .sb-social-btn:hover { background: rgba(139,92,246,.15) !important; color: #7c3aed !important; }
[data-theme="light"] .sb-divider { background: rgba(139,92,246,.1) !important; }
[data-theme="light"] .sb-section-label { color: rgba(139,92,246,.4) !important; }
[data-theme="light"] #sidebar-overlay { background: rgba(26,16,53,.55) !important; }
[data-theme="light"] #sidebar-close-btn { background: rgba(139,92,246,.1) !important; color: #4a3f6b !important; }
[data-theme="light"] #sidebar-close-btn:hover { background: rgba(239,68,68,.15) !important; color: #dc2626 !important; }

/* ── Glass Card ────────────────────────────────────────── */
[data-theme="light"] .glass-card {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(139,92,246,.12) !important;
  box-shadow: 0 4px 20px rgba(139,92,246,.07) !important;
}
[data-theme="light"] .glass-card:hover {
  background: rgba(255,255,255,.98) !important;
  border-color: rgba(139,92,246,.28) !important;
  box-shadow: 0 10px 32px rgba(139,92,246,.13) !important;
}

/* ── Text ──────────────────────────────────────────────── */
[data-theme="light"] h1,[data-theme="light"] h2,
[data-theme="light"] h3,[data-theme="light"] h4,
[data-theme="light"] h5,[data-theme="light"] h6 { color: #1a1035 !important; }
[data-theme="light"] p { color: #4a3f6b; }
[data-theme="light"] .text-white { color: #1a1035 !important; }
[data-theme="light"] .text-text-secondary { color: #4a3f6b !important; }
[data-theme="light"] .text-text-muted { color: #8b7fb5 !important; }
/* Keep white text inside gradient-bg elements */
[data-theme="light"] [class*="from-accent"] .text-white,
[data-theme="light"] [class*="from-indigo"] .text-white,
[data-theme="light"] [class*="from-blue"] .text-white,
[data-theme="light"] [class*="from-pink"] .text-white,
[data-theme="light"] [class*="from-teal"] .text-white,
[data-theme="light"] [class*="from-green"] .text-white,
[data-theme="light"] [class*="from-purple"] .text-white { color: #ffffff !important; }

/* ── Inputs ────────────────────────────────────────────── */
[data-theme="light"] .glass-input {
  background: rgba(255,255,255,.9) !important;
  border-color: rgba(139,92,246,.2) !important;
  color: #1a1035 !important;
}
[data-theme="light"] .glass-input::placeholder { color: #9d93c3 !important; }
[data-theme="light"] .glass-input:focus {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.15) !important;
}
/* SELECT — light mode arrow */
[data-theme="light"] select.glass-input,
[data-theme="light"] .contact-popup-field select.glass-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(109,40,217,.75)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  color: #1a1035 !important;
  background-color: rgba(255,255,255,.9) !important;
}
[data-theme="light"] select.glass-input option,
[data-theme="light"] .contact-popup-field select.glass-input option {
  background: #fff !important;
  color: #1a1035 !important;
}

/* ── Filter Bar ────────────────────────────────────────── */
[data-theme="light"] .filter-bar-sticky {
  background: rgba(248,247,255,.95) !important;
  border-bottom: 1px solid rgba(139,92,246,.1) !important;
}
[data-theme="light"] .filter-btn {
  background: rgba(255,255,255,.75) !important;
  border-color: rgba(139,92,246,.18) !important;
  color: #4a3f6b !important;
}
[data-theme="light"] .filter-btn::before { background: linear-gradient(135deg,rgba(139,92,246,.1),rgba(6,182,212,.06)) !important; }
[data-theme="light"] .filter-btn:hover { background: rgba(255,255,255,.95) !important; border-color: rgba(139,92,246,.4) !important; color: #6d28d9 !important; }
[data-theme="light"] .filter-btn.active { background: linear-gradient(135deg,#8b5cf6,#06b6d4) !important; border-color: transparent !important; color: #fff !important; }
[data-theme="light"] .filter-btn .filter-count { background: rgba(139,92,246,.12) !important; color: #6d28d9 !important; }
[data-theme="light"] .filter-btn.active .filter-count { background: rgba(255,255,255,.25) !important; color: #fff !important; }

/* ── Section Alternating ───────────────────────────────── */
[data-theme="light"] .section-glass:nth-child(even) { background: rgba(139,92,246,.03) !important; }

/* ── Core Value Cards ──────────────────────────────────── */
/* gradient backgrounds stay — only icon override needed */
[data-theme="light"] .core-value-icon { box-shadow: 0 4px 16px rgba(0,0,0,.12) !important; }
/* green-teal specifically */
[data-theme="light"] .from-green-500 {
  --tw-gradient-from: #22c55e !important;
}
[data-theme="light"] .to-teal-600 {
  --tw-gradient-to: #0d9488 !important;
}

/* ── Services Icon Boxes ───────────────────────────────── */
[data-theme="light"] .from-accent-purple\/20 {
  --tw-gradient-from: rgba(139,92,246,.25) !important;
}
[data-theme="light"] .to-accent-cyan\/20 {
  --tw-gradient-to: rgba(6,182,212,.2) !important;
}

/* ── Inline dark backgrounds (FAQ badge, etc.) ─────────── */
[data-theme="light"] [style*="background:rgba(10,10,15"],
[data-theme="light"] [style*="background: rgba(10,10,15"],
[data-theme="light"] [style*="background:rgba(15,15,26"] {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(139,92,246,.15) !important;
}
[data-theme="light"] [style*="background:#1a1a2e"] { background: #fff !important; color: #1a1035 !important; }
[data-theme="light"] .bg-gray-900 { background-color: #ede9ff !important; }
[data-theme="light"] .bg-bg-secondary { background-color: #ffffff !important; color: #1a1035 !important; }
[data-theme="light"] [style*="color:rgba(255,255,255,.6)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.6)"] { color: #4a3f6b !important; }
[data-theme="light"] [style*="color:rgba(255,255,255,.5)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.5)"] { color: #8b7fb5 !important; }

/* ── Border/bg utilities ───────────────────────────────── */
[data-theme="light"] .border-glass-border,.border-white\/10 { border-color: rgba(139,92,246,.12) !important; }
[data-theme="light"] .bg-glass-100 { background-color: rgba(139,92,246,.08) !important; }
[data-theme="light"] .bg-white\/5  { background-color: rgba(139,92,246,.04) !important; }
[data-theme="light"] .bg-white\/10 { background-color: rgba(139,92,246,.07) !important; }
[data-theme="light"] .bg-white\/20 { background-color: rgba(139,92,246,.12) !important; }

/* ── Contact Popup ─────────────────────────────────────── */
[data-theme="light"] .contact-popup-panel {
  background: #f8f7ff !important;
  border-color: rgba(139,92,246,.2) !important;
  box-shadow: 0 25px 80px rgba(139,92,246,.15) !important;
}
[data-theme="light"] .contact-popup-form-header h3 { color: #1a1035 !important; }
[data-theme="light"] .contact-popup-form-header p  { color: #4a3f6b !important; }
[data-theme="light"] .contact-popup-field label     { color: #4a3f6b !important; }
[data-theme="light"] .contact-popup-close { background: rgba(139,92,246,.1) !important; border-color: rgba(139,92,246,.2) !important; color: #4a3f6b !important; }
[data-theme="light"] .contact-popup-close:hover { background: rgba(239,68,68,.8) !important; color: #fff !important; }
[data-theme="light"] .contact-popup-backdrop { background: rgba(26,16,53,.6) !important; }
/* Left info side stays dark */
[data-theme="light"] .contact-popup-info-bg { background: linear-gradient(135deg,rgba(23,14,46,.92),rgba(0,28,33,.85)) !important; }

/* ── Blog: Share Modal & TOC ───────────────────────────── */
[data-theme="light"] #share-modal > div {
  background: #ffffff !important;
  border-color: rgba(139,92,246,.2) !important;
}
[data-theme="light"] #share-modal h3 { color: #1a1035 !important; }
[data-theme="light"] #share-modal input { background: rgba(139,92,246,.05) !important; border-color: rgba(139,92,246,.2) !important; color: #1a1035 !important; }
[data-theme="light"] #close-share { color: #4a3f6b !important; }
[data-theme="light"] .toc-sticky-bar { background: rgba(248,247,255,.96) !important; border-color: rgba(139,92,246,.12) !important; }
[data-theme="light"] .toc-sticky-bar * { color: #4a3f6b !important; }
[data-theme="light"] #toc-dropdown  { background: #fff !important; border-color: rgba(139,92,246,.15) !important; }
[data-theme="light"] #toc-dropdown * { color: #4a3f6b !important; }
[data-theme="light"] #toc-dropdown a:hover { color: #6d28d9 !important; }

/* ── Blog prose ────────────────────────────────────────── */
[data-theme="light"] .prose, [data-theme="light"] .prose-invert { color: #2d2550 !important; }
[data-theme="light"] .prose h1,[data-theme="light"] .prose h2,
[data-theme="light"] .prose h3,[data-theme="light"] .prose h4 { color: #1a1035 !important; }
[data-theme="light"] .prose p, [data-theme="light"] .prose li   { color: #3d3468 !important; }
[data-theme="light"] .prose a       { color: #7c3aed !important; }
[data-theme="light"] .prose strong  { color: #1a1035 !important; }
[data-theme="light"] .prose code    { background: rgba(139,92,246,.08) !important; color: #6d28d9 !important; }
[data-theme="light"] .prose blockquote { background: rgba(139,92,246,.05) !important; border-left-color: #8b5cf6 !important; color: #3d3468 !important; }
[data-theme="light"] .prose h2 { border-bottom-color: rgba(139,92,246,.15) !important; }

/* ── Client logos ──────────────────────────────────────── */
[data-theme="light"] .client-name-fallback { color: rgba(74,63,107,.55) !important; }
[data-theme="light"] .client-logo-item:hover .client-name-fallback { color: rgba(74,63,107,.9) !important; }
[data-theme="light"] .client-logo-item:hover .client-logo-img { filter: none !important; opacity: 1 !important; }

/* ── Portfolio modal / filter ──────────────────────────── */
[data-theme="light"] .filter-sidebar { background: rgba(255,255,255,.9) !important; border-color: rgba(139,92,246,.1) !important; }

/* ══════════════════════════════════════════════════════════
   TARGETED LIGHT MODE FIXES v3
   Each rule solves exactly one specific issue.
   No broad overrides. No conflicts.
══════════════════════════════════════════════════════════ */

/* ── glass-badge (Our Services, Portfolio, FAQ etc.) ──── */
/* Dark: white text on glass bg — Light: purple text */
[data-theme="light"] .glass-badge {
  background: rgba(139,92,246,0.1) !important;
  border-color: rgba(139,92,246,0.25) !important;
  color: #7c3aed !important;
}

/* ── CTA section "View Portfolio" glass-btn-secondary ─── */
/* Dark: white text — Light: dark text, visible border */
[data-theme="light"] .glass-btn-secondary {
  background: rgba(255,255,255,0.7) !important;
  border: 1.5px solid rgba(139,92,246,0.35) !important;
  color: #1a1035 !important;
}
[data-theme="light"] .glass-btn-secondary:hover {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(139,92,246,0.6) !important;
  color: #6d28d9 !important;
}
[data-theme="light"] .glass-btn-secondary i,
[data-theme="light"] .glass-btn-secondary span { color: inherit !important; }

/* ── FAQ accordion items ─────────────────────────────── */
[data-theme="light"] .faq-item {
  background: rgba(255,255,255,0.88) !important;
  border-color: rgba(139,92,246,0.15) !important;
}
[data-theme="light"] .faq-item:hover {
  border-color: rgba(139,92,246,0.3) !important;
  box-shadow: 0 4px 20px rgba(139,92,246,0.1) !important;
}
[data-theme="light"] .faq-question h3 {
  color: #1a1035 !important;
}
[data-theme="light"] .faq-answer p {
  color: #4a3f6b !important;
}

/* FAQ overlay stats cards (dark inline style) */
[data-theme="light"] .faq-image-side .absolute.top-6 > div,
[data-theme="light"] .faq-image-side .absolute.bottom-6 > div > div {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(139,92,246,0.2) !important;
}
[data-theme="light"] .faq-image-side .absolute .text-white,
[data-theme="light"] .faq-image-side .absolute p { color: #1a1035 !important; }
[data-theme="light"] .faq-image-side [style*="color:rgba(255,255,255,.5)"],
[data-theme="light"] .faq-image-side [style*="color:rgba(255,255,255,0.5)"] {
  color: #8b7fb5 !important;
}

/* ── Collaboration icon — green-teal gradient ────────── */
/* Force via computed style — tailwind generates the gradient
   but our CSS variable override may not reach all browsers */
[data-theme="light"] .core-value-icon[class*="from-green"] {
  background: linear-gradient(135deg,#22c55e,#0d9488) !important;
}
/* Nuclear option: target ALL core-value-icon children */
[data-theme="light"] .core-value-card:nth-child(4) .core-value-icon {
  background: linear-gradient(135deg,#22c55e,#0d9488) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* footer uses ft-* classes now, not glass-card */

/* ── Contact popup LEFT side text ────────────────────── */
/* Left side stays dark — text must be white/light */
.contact-popup-title { color: #ffffff !important; }
.contact-popup-desc  { color: rgba(255,255,255,0.8) !important; }
.contact-popup-badge { color: #ffffff !important; background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.25) !important; }
.contact-popup-label { color: rgba(255,255,255,0.6) !important; }
.contact-popup-value { color: #ffffff !important; }
.contact-popup-icon  { background: rgba(255,255,255,0.2) !important; color: #ffffff !important; }
.contact-popup-social-link { background: rgba(255,255,255,0.2) !important; color: #ffffff !important; }
.contact-popup-social-link:hover { background: rgba(255,255,255,0.3) !important; }

/* ── Services icon boxes — higher opacity in light ────── */
[data-theme="light"] .bg-gradient-to-br.from-accent-purple\/20 {
  background: linear-gradient(135deg,rgba(139,92,246,0.22),rgba(6,182,212,0.18)) !important;
  border: 1px solid rgba(139,92,246,0.18) !important;
}

/* ── Section description text (was inline rgba white) ─── */
.dw-section-desc { color: rgba(255,255,255,0.6); }
[data-theme="light"] .dw-section-desc { color: #4a3f6b !important; }

/* ── FAQ overlay stat card — stays dark both themes ────── */
.dw-faq-overlay-card { /* always dark, inline style handles it */ }

/* ── Remove footer CSS class overrides (using inline now) */
[data-theme="light"] footer .glass-card { all: unset; }

/* Footer uses ft-* CSS classes */

/* ── Blog share modal close button ─────────────────────── */
.dw-share-close {
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
  padding: 6px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  min-height: 32px !important;
  z-index: 100 !important;
  position: relative !important;
  transition: background 0.2s, color 0.2s !important;
  color: rgba(255,255,255,0.7) !important;
}
.dw-share-close:hover { background: rgba(239,68,68,0.25) !important; color: #ef4444 !important; }
[data-theme="light"] .dw-share-close { color: #4a3f6b !important; }
[data-theme="light"] .dw-share-close:hover { color: #dc2626 !important; }

/* ══════════════════════════════════════════════════════════
   FOOTER THEME SYSTEM — ft-* classes
   Dark theme: dark background, white text
   Light theme: light background, dark text
   Uses CSS variables — no inline styles needed.
══════════════════════════════════════════════════════════ */

/* ── CSS Variables for footer ─────────────────────────── */
:root {
  --ft-bg:          rgba(10,10,15,0.97);
  --ft-card-bg:     rgba(255,255,255,0.04);
  --ft-card-border: rgba(255,255,255,0.08);
  --ft-border:      rgba(255,255,255,0.07);
  --ft-heading:     #ffffff;
  --ft-text:        rgba(255,255,255,0.65);
  --ft-link:        rgba(255,255,255,0.65);
  --ft-link-hover:  #ffffff;
  --ft-muted:       rgba(255,255,255,0.4);
  --ft-social-bg:   rgba(255,255,255,0.1);
  --ft-social-text: rgba(255,255,255,0.7);
}

[data-theme="light"] {
  --ft-bg:          #f0eeff;
  --ft-card-bg:     #ffffff;
  --ft-card-border: rgba(139,92,246,0.18);
  --ft-border:      rgba(139,92,246,0.15);
  --ft-heading:     #1a1035;
  --ft-text:        #3d3268;
  --ft-link:        #3d3268;
  --ft-link-hover:  #6d28d9;
  --ft-muted:       #6b5fa8;
  --ft-social-bg:   rgba(139,92,246,0.12);
  --ft-social-text: #5b4fa0;
}

/* Footer wrapper */
.ft-footer {
  background: var(--ft-bg) !important;
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--ft-border);
  transition: background 0.35s ease, border-color 0.35s ease;
}

/* Card */
.ft-card {
  background: var(--ft-card-bg);
  border: 1px solid var(--ft-card-border);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: background 0.35s ease, border-color 0.2s ease;
}
.ft-card:hover { border-color: rgba(139,92,246,0.35); }

/* Logo fallback */
.ft-logo-icon { background: linear-gradient(135deg,#8b5cf6,#06b6d4); }

/* Heading */
.ft-heading {
  color: var(--ft-heading);
  font-weight: 600;
  font-size: 1rem;
  transition: color 0.35s ease;
}

/* Text */
.ft-text {
  color: var(--ft-text);
  font-size: 0.875rem;
  transition: color 0.35s ease;
}

/* Links */
.ft-link {
  color: var(--ft-link);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ft-link:hover { color: var(--ft-link-hover); }

/* Contact row */
.ft-contact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ft-text);
  font-size: 0.875rem;
  transition: color 0.35s ease;
}

/* Bottom bar divider */
.ft-bottom { border-top: 1px solid var(--ft-border); transition: border-color 0.35s ease; }

/* Muted */
.ft-muted { color: var(--ft-muted); transition: color 0.35s ease; }
.ft-muted-link { color: var(--ft-muted); text-decoration: none; transition: color 0.2s ease; }
.ft-muted-link:hover { color: var(--ft-link-hover); }

/* Social buttons */
.ft-social-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ft-social-bg);
  color: var(--ft-social-text);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  font-size: 0.9rem;
}
.ft-social-btn:hover { transform: scale(1.1); color: #fff !important; }
.ft-social-fb:hover { background: #8b5cf6 !important; }
.ft-social-ig:hover { background: #ec4899 !important; }
.ft-social-yt:hover { background: #ef4444 !important; }
.ft-social-li:hover { background: #2563eb !important; }


/* ══════════════════════════════════════════════════════════
   THEME-AWARE CSS CLASSES — replaces all inline styles
   Dark default, light override via [data-theme="light"]
══════════════════════════════════════════════════════════ */

/* ── FAQ / About overlay cards ─────────────────────────── */
.dw-overlay-card {
  background: rgba(10,10,15,0.92);
  border: 1px solid rgba(139,92,246,0.3);
  backdrop-filter: blur(12px);
  transition: background 0.35s ease, border-color 0.35s ease;
}
[data-theme="light"] .dw-overlay-card {
  background: rgba(255,255,255,0.92);
  border-color: rgba(139,92,246,0.25);
  box-shadow: 0 4px 20px rgba(139,92,246,0.1);
}

.dw-overlay-title {
  color: #ffffff;
  transition: color 0.35s ease;
}
[data-theme="light"] .dw-overlay-title { color: #1a1035; }

.dw-overlay-sub {
  color: rgba(255,255,255,0.5);
  transition: color 0.35s ease;
}
[data-theme="light"] .dw-overlay-sub { color: #8b7fb5; }

/* ── Stat cards (Projects / Clients / Years) ────────────── */
.dw-stat-card {
  background: rgba(10,10,15,0.9);
  border: 1px solid rgba(255,255,255,0.1);
  transition: background 0.35s ease, border-color 0.35s ease;
}
[data-theme="light"] .dw-stat-card {
  background: rgba(255,255,255,0.88);
  border-color: rgba(139,92,246,0.15);
  box-shadow: 0 2px 12px rgba(139,92,246,0.08);
}

.dw-stat-num {
  color: #ffffff;
  transition: color 0.35s ease;
}
[data-theme="light"] .dw-stat-num { color: #1a1035; }

.dw-stat-label {
  color: rgba(255,255,255,0.5);
  transition: color 0.35s ease;
}
[data-theme="light"] .dw-stat-label { color: #8b7fb5; }

/* ── Select option background ───────────────────────────── */
.dw-select-option {
  background: #1a1a2e;
  color: #ffffff;
}
[data-theme="light"] .dw-select-option {
  background: #ffffff;
  color: #1a1035;
}

/* ── Sidebar "Creative Studio" sub label ────────────────── */
.dw-sidebar-sub {
  color: rgba(255,255,255,0.4);
  transition: color 0.35s ease;
}
[data-theme="light"] .dw-sidebar-sub { color: rgba(109,40,217,0.45); }

/* ── Contact Popup CSS Variables ────────────────────────── */
/* dark default */
:root {
  --cp-panel-bg:   linear-gradient(135deg, rgba(26,26,46,0.98), rgba(15,15,26,0.98));
  --cp-option-bg:  #1a1a2e;
  --cp-option-text:#ffffff;
  --cp-form-bg:    transparent;
  --cp-label-color:rgba(255,255,255,0.7);
  --cp-title-color:#ffffff;
  --cp-desc-color: rgba(255,255,255,0.6);
}
/* light */
[data-theme="light"] {
  --cp-panel-bg:   linear-gradient(135deg, #ffffff, #f8f7ff);
  --cp-option-bg:  #ffffff;
  --cp-option-text:#1a1035;
  --cp-form-bg:    transparent;
  --cp-label-color:#4a3f6b;
  --cp-title-color:#1a1035;
  --cp-desc-color: #4a3f6b;
}

/* Apply contact popup vars */
.contact-popup-form-header h3 { color: var(--cp-title-color); transition: color 0.35s ease; }
.contact-popup-form-header p  { color: var(--cp-desc-color);  transition: color 0.35s ease; }
.contact-popup-field label    { color: var(--cp-label-color); transition: color 0.35s ease; }

/* Contact popup glass-input in form side */
.contact-popup-field .glass-input {
  background: var(--color-input-bg);
  border-color: var(--color-input-border);
  color: var(--color-input-text);
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.contact-popup-field .glass-input::placeholder { color: var(--color-input-placeholder); }
.contact-popup-field .glass-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.15);
}

/* ══════════════════════════════════════════════════════════
   BLOG TOC BAR & SHARE PANEL — theme-aware via data attribute
   JS sets data-blog-theme="dark|light" on elements
   No inline styles — all CSS
══════════════════════════════════════════════════════════ */

/* ── TOC Sticky Bar ──────────────────────────────────────── */
#dw-toc-bar {
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
#dw-toc-bar[data-blog-theme="dark"],
#dw-toc-bar:not([data-blog-theme]) {
  background-color: rgba(15,15,26,0.95);
  border-bottom-color: rgba(255,255,255,0.08);
}
#dw-toc-bar[data-blog-theme="light"] {
  background-color: rgba(248,247,255,0.97);
  border-bottom-color: rgba(139,92,246,0.12);
  box-shadow: 0 2px 12px rgba(139,92,246,0.07);
}

/* TOC buttons */
.dw-toc-btn { transition: background-color 0.35s, color 0.35s; }
#dw-toc-bar[data-blog-theme="dark"]  .dw-toc-btn,
#dw-toc-bar:not([data-blog-theme])   .dw-toc-btn {
  background-color: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
}
#dw-toc-bar[data-blog-theme="light"] .dw-toc-btn {
  background-color: rgba(139,92,246,0.07);
  color: #4a3f6b;
}
#dw-toc-bar[data-blog-theme="dark"]  .dw-toc-btn:hover,
#dw-toc-bar:not([data-blog-theme])   .dw-toc-btn:hover { color: #ffffff; background-color: rgba(255,255,255,0.1); }
#dw-toc-bar[data-blog-theme="light"] .dw-toc-btn:hover { color: #6d28d9; background-color: rgba(139,92,246,0.12); }

/* TOC reading time */
.dw-toc-muted { transition: color 0.35s; }
#dw-toc-bar[data-blog-theme="dark"]  .dw-toc-muted,
#dw-toc-bar:not([data-blog-theme])   .dw-toc-muted { color: rgba(255,255,255,0.45); }
#dw-toc-bar[data-blog-theme="light"] .dw-toc-muted { color: #8b7fb5; }

/* ── TOC Dropdown ────────────────────────────────────────── */
#toc-dropdown { transition: background-color 0.35s, border-color 0.35s; }
#toc-dropdown[data-blog-theme="dark"],
#toc-dropdown:not([data-blog-theme]) {
  background-color: #0f0f1a;
  border: 1px solid rgba(255,255,255,0.1);
}
#toc-dropdown[data-blog-theme="light"] {
  background-color: #ffffff;
  border: 1px solid rgba(139,92,246,0.15);
  box-shadow: 0 8px 32px rgba(139,92,246,0.1);
}

/* TOC links */
.dw-toc-link { transition: color 0.2s; }
#toc-dropdown[data-blog-theme="dark"]  .dw-toc-link,
#toc-dropdown:not([data-blog-theme])   .dw-toc-link { color: rgba(255,255,255,0.7); }
#toc-dropdown[data-blog-theme="light"] .dw-toc-link { color: #4a3f6b; }
#toc-dropdown[data-blog-theme="dark"]  .dw-toc-link:hover,
#toc-dropdown:not([data-blog-theme])   .dw-toc-link:hover { color: #8b5cf6; }
#toc-dropdown[data-blog-theme="light"] .dw-toc-link:hover { color: #6d28d9; }

/* ── Share Modal Panel ───────────────────────────────────── */
.dw-share-panel { transition: background-color 0.35s, color 0.35s; }
.dw-share-panel[data-blog-theme="dark"],
.dw-share-panel:not([data-blog-theme]) {
  background-color: #0f0f1a;
  color: #ffffff;
}
.dw-share-panel[data-blog-theme="light"] {
  background-color: #ffffff;
  color: #1a1035;
}

/* Share title */
.dw-share-title { transition: color 0.35s; }
.dw-share-panel[data-blog-theme="dark"]  .dw-share-title,
.dw-share-panel:not([data-blog-theme])   .dw-share-title { color: #ffffff; }
.dw-share-panel[data-blog-theme="light"] .dw-share-title { color: #1a1035; }

/* Share URL input */
.dw-share-panel[data-blog-theme="dark"]  input[type="text"],
.dw-share-panel:not([data-blog-theme])   input[type="text"] {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: #ffffff;
}
.dw-share-panel[data-blog-theme="light"] input[type="text"] {
  background: rgba(139,92,246,0.05);
  border-color: rgba(139,92,246,0.2);
  color: #1a1035;
}

/* Share social icon buttons */
.dw-share-panel[data-blog-theme="dark"]  a.bg-white\/10,
.dw-share-panel:not([data-blog-theme])   a.bg-white\/10 { background: rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.8) !important; }
.dw-share-panel[data-blog-theme="light"] a.bg-white\/10 { background: rgba(139,92,246,0.08) !important; color: #4a3f6b !important; }

/* ── Background gradient overlay in header (body bg) ────── */
/* This is the fixed dark gradient behind all content */
/* In light mode it should be overridden */
[data-theme="light"] .from-\[\#0a0a0f\] {
  --tw-gradient-from: #f8f7ff !important;
}
[data-theme="light"] .via-\[\#0f0f1a\] {
  --tw-gradient-via: #f0eeff !important;
}
[data-theme="light"] .to-\[\#0a0a0f\] {
  --tw-gradient-to: #f8f7ff !important;
}

/* ── Footer light mode explicit overrides ─────────────────
   Ensures text is visible even if CSS variable inheritance fails
── */
[data-theme="light"] .ft-footer {
  background: #f0eeff !important;
}
[data-theme="light"] .ft-card {
  background: #ffffff !important;
  border-color: rgba(139,92,246,0.18) !important;
  box-shadow: 0 2px 16px rgba(139,92,246,0.08);
}
[data-theme="light"] .ft-heading {
  color: #1a1035 !important;
}
[data-theme="light"] .ft-text {
  color: #3d3268 !important;
}
[data-theme="light"] .ft-link {
  color: #3d3268 !important;
}
[data-theme="light"] .ft-link:hover {
  color: #6d28d9 !important;
}
[data-theme="light"] .ft-contact-item {
  color: #3d3268 !important;
}
[data-theme="light"] .ft-muted {
  color: #6b5fa8 !important;
}
[data-theme="light"] .ft-muted-link {
  color: #6b5fa8 !important;
}
[data-theme="light"] .ft-muted-link:hover {
  color: #6d28d9 !important;
}
[data-theme="light"] .ft-social-btn {
  background: rgba(139,92,246,0.12) !important;
  color: #5b4fa0 !important;
}
[data-theme="light"] .ft-bottom {
  border-top-color: rgba(139,92,246,0.15) !important;
}

/* ══════════════════════════════════════════════════════════
   DW-SELECT — Clean single-arrow select
   Used in contact.php to replace glass-select-wrapper
══════════════════════════════════════════════════════════ */
.dw-select {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.1);
  background-color: rgba(255,255,255,0.05);
  color: #ffffff;
  font-size: 0.95rem;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}
.dw-select:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.2);
}
.dw-select option { background: #1a1a2e; color: #ffffff; }

[data-theme="light"] .dw-select {
  background-color: rgba(255,255,255,0.9);
  border-color: rgba(139,92,246,0.2);
  color: #1a1035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(109,40,217,0.75)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
[data-theme="light"] .dw-select option { background: #ffffff; color: #1a1035; }


/* ══════════════════════════════════════════════════════════
   DOUBLE SCROLLBAR — Final definitive fix
   Problem: screenshot shows 2 scrollbars
   Left thin = sidebar internal scroll (webkit shows despite scrollbar-width:none)
   Right thick = page scroll (correct, ours)
   Fix: suppress all internal element scrollbars completely
══════════════════════════════════════════════════════════ */

/* Sidebar scrollbar — handled in SCROLLBAR section above */

/* ══════════════════════════════════════════════════════════
   AOS LIBRARY OVERRIDE
   AOS 2.3.4 temporarily sets html overflow during init.
   This overrides that behavior to prevent double scrollbar.
══════════════════════════════════════════════════════════ */

/* AOS sets html[data-aos-easing] - override any overflow it adds */
html[data-aos-easing],
html[data-aos-duration],
html[data-aos-delay] {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* AOS animated elements - ensure no overflow escapes */
[data-aos] {
  pointer-events: none;
}
[data-aos].aos-animate {
  pointer-events: auto;
}

/* AOS slide overflow: handled by html overflow-x:hidden */

/* body.sidebar-open — defined in SCROLLBAR section above */
/* Restore on close */
body:not(.sidebar-open) {
  overflow-y: visible !important;
  touch-action: auto;
}

/* Popup open body scroll lock — CSS class only, no JS inline */
body.popup-open {
  overflow: hidden !important;
  touch-action: none;
}