/* Light-mode overrides — loaded conditionally via BaseLayout.astro only for light theme users */

html[data-theme="light"] .section-logo-accent-filled {
  filter: invert(1);
  opacity: 0.06;
}
html[data-theme="light"] .section-logo-accent-outline {
  filter: invert(1);
  opacity: 0.07;
}

/* Light mode: dark logo on light bg */
html[data-theme="light"] .img-loader {
  background: #e8e8ec;
}
html[data-theme="light"] .img-loader::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1080 1080'%3E%3Cg fill='none' stroke='rgba(26,26,34,0.2)' stroke-width='28' stroke-miterlimit='10'%3E%3Cpath d='M492.2,520.8l-82-245.2c-18.4-55,22.6-111.8,80.6-111.8h284.4c56.6,0,85.7,67.6,46.9,108.7L566.5,543.1c-22.3,23.6-61.8,14.9-72.1-15.9L492.2,520.8z'/%3E%3Cpath d='M382.3,478.2l-280.7,1.5c-39.6-6.6-61-50.1-42.2-85.5l193.2-206.4c2.1-2.2,6.3-6.9,8.5-9c24.3-23.8,54.4-19.3,64.6,11l86,254.8c6.2,18.3-9.2,36.6-28.2,33.9C383.2,478.3,382.8,478.2,382.3,478.2z'/%3E%3Cpath d='M659.6,669.2l280.7-1.5c39.6,6.6,61,50.1,42.2,85.5L789.2,959.7c-2.1,2.2-6.3,6.9-8.5,9c-24.3,23.8-54.4,19.3-64.6-10.9l-86-254.8c-6.2-18.3,9.2-36.6,28.2-33.9C658.7,669.2,659.2,669.2,659.6,669.2z'/%3E%3Cpath d='M547,616.5L631.1,868c18.4,55-22.6,111.8-80.6,111.8H266.2c-56.6,0-85.7-67.6-46.9-108.7l255.6-270.5C497.2,577,536.7,585.7,547,616.5z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════
   LIGHT MODE (data-theme="light")
   ══════════════════════════════════════════════ */

html[data-theme="light"] {
  --color-surface: rgba(0, 0, 0, 0.05);
  --color-surface-hover: rgba(0, 0, 0, 0.08);
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-hover: rgba(0, 0, 0, 0.2);
  --color-text-primary: #1a1a22;
  --color-text-secondary: rgba(26, 26, 34, 0.7);
  --color-text-tertiary: rgba(26, 26, 34, 0.5);
  --color-dark: #f5f5f7;
  --color-darker: #ebebed;
}

html[data-theme="light"] body {
  background: #f5f5f7;
  color: #1a1a22;
}

html[data-theme="light"] .page-gradient {
  background:
    radial-gradient(ellipse 120% 80% at 20% 0%, rgba(0, 0, 0, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse 100% 60% at 80% 100%, rgba(0, 0, 0, 0.02) 0%, transparent 50%),
    linear-gradient(180deg, #f8f8fa 0%, #f5f5f7 35%, #eeeef0 100%);
}

html[data-theme="light"] .page-ambient {
  background:
    radial-gradient(circle 40vmax at 10% 15%, rgba(0, 0, 0, 0.02) 0%, transparent 45%),
    radial-gradient(circle 35vmax at 90% 85%, rgba(0, 0, 0, 0.015) 0%, transparent 45%);
}

html[data-theme="light"] .section-divider {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.06) 20%,
    rgba(0, 0, 0, 0.12) 50%,
    rgba(0, 0, 0, 0.06) 80%,
    transparent 100%
  );
}

html[data-theme="light"] .main-gradient-edge {
  background: linear-gradient(to bottom, rgba(245, 245, 247, 0.4) 0%, transparent 100%);
}


html[data-theme="light"] .glass-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.75) 100%);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

html[data-theme="light"] .glass-card::before {
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, transparent 100%);
}

html[data-theme="light"] .glass-card:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255, 255, 255, 1);
}

html[data-theme="light"] .glass-card-static {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #1a1a22, #2d2d35);
  color: #ffffff;
}

html[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2), 0 0 40px -5px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .btn-ghost {
  border-color: rgba(0, 0, 0, 0.15);
  color: #1a1a22;
}

html[data-theme="light"] .btn-ghost:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.25);
}

html[data-theme="light"] .glass-input {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.1);
  color: #1a1a22;
}

html[data-theme="light"] .glass-input::placeholder {
  color: rgba(26, 26, 34, 0.5);
}

html[data-theme="light"] .glass-input:focus {
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
  background: #ffffff;
}

/* Logo swap: show dark logo in light mode */
html[data-theme="light"] .theme-logo-light { display: none; }
html[data-theme="light"] .theme-logo-dark { display: block; }

html[data-theme="light"] .theme-toggle-thumb {
  left: calc(100% - 26px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 252, 0.9) 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1);
}
html[data-theme="light"] .theme-toggle-pill [data-mode="dark"] { color: rgba(26, 26, 34, 0.35); }
html[data-theme="light"] .theme-toggle-pill [data-mode="light"] { color: rgba(26, 26, 34, 0.9); }

/* Nav in light mode */
html[data-theme="light"] #nav-links {
  background: rgba(245, 245, 247, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
html[data-theme="light"] .nav-pill-divider {
  background-color: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] #nav-compact-pill {
  background: rgba(245, 245, 247, 0.97) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
html[data-theme="light"] .theme-toggle-pill {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .theme-toggle-pill:hover {
  border-color: rgba(0, 0, 0, 0.16);
  background: rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Log in button: text black in light mode so it's visible */
html[data-theme="light"] #nav-cta-btn {
  color: #1a1a22 !important;
}
html[data-theme="light"] #nav-cta-btn svg {
  stroke: #1a1a22;
}

/* ── Light mode: fix white-on-white text and gradients (titles, hero, sections) ── */

/* Global Reach: title — solid dark text in light mode (no gradient, clearly visible) */
html[data-theme="light"] .global-reach-section .global-reach-title {
  background: none !important;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: unset;
  color: #1a1a22 !important;
}

/* Global Reach map: light mode — higher contrast map SVG, dark dots and lines */
html[data-theme="light"] .global-reach-section .map-base .map-image {
  filter: brightness(0.45) contrast(1.9);
  opacity: 0.95;
}
html[data-theme="light"] .global-reach-section .map-arc {
  stroke: rgba(26, 26, 34, 0.4) !important;
}
html[data-theme="light"] .global-reach-section .map-arc-glow {
  stroke: rgba(26, 26, 34, 0.15) !important;
}
html[data-theme="light"] .global-reach-section .arc-pulse {
  fill: #1a1a22 !important;
}
/* Hub markers */
html[data-theme="light"] .global-reach-section .hub-marker .hub-glow {
  fill: rgba(26, 26, 34, 0.08);
}
html[data-theme="light"] .global-reach-section .hub-marker .hub-bubble {
  fill: rgba(26, 26, 34, 0.08) !important;
  stroke: rgba(26, 26, 34, 0.35) !important;
}
html[data-theme="light"] .global-reach-section .hub-marker .hub-core {
  fill: #1a1a22 !important;
}
html[data-theme="light"] .global-reach-section .hub-marker .hub-center {
  fill: #1a1a22 !important;
}
html[data-theme="light"] .global-reach-section .hub-marker .hub-ring-inner {
  stroke: rgba(26, 26, 34, 0.3) !important;
}
html[data-theme="light"] .global-reach-section .hub-marker .hub-ring-outer {
  stroke: rgba(26, 26, 34, 0.15) !important;
}
html[data-theme="light"] .global-reach-section .hub-marker .hub-broadcast-1,
html[data-theme="light"] .global-reach-section .hub-marker .hub-broadcast-2 {
  stroke: rgba(26, 26, 34, 0.3) !important;
}
html[data-theme="light"] .global-reach-section .hub-marker .hub-label text {
  fill: #1a1a22 !important;
}
html[data-theme="light"] .global-reach-section .hub-marker .hub-label text:last-of-type {
  fill: rgba(26, 26, 34, 0.6) !important;
}
html[data-theme="light"] .global-reach-section .hub-marker:hover .hub-bubble,
html[data-theme="light"] .global-reach-section .hub-marker:focus .hub-bubble {
  fill: rgba(26, 26, 34, 0.12) !important;
  stroke: rgba(26, 26, 34, 0.5) !important;
}

/* Hero: eyebrow, paragraph, hints → dark text */
html[data-theme="light"] #hero [class*="text-white"] {
  color: rgba(26, 26, 34, 0.75) !important;
}
html[data-theme="light"] #hero .hero-accent-text {
  background: linear-gradient(100deg, #1a1a22 0%, #3d3d45 35%, #555 65%, #1a1a22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="light"] #hero .proof-strip-line {
  background: linear-gradient(90deg, rgba(0,0,0,0.18), transparent);
}
html[data-theme="light"] #hero .proof-strip-value {
  color: rgba(26, 26, 34, 0.85) !important;
}
html[data-theme="light"] #hero .proof-strip-label {
  color: rgba(26, 26, 34, 0.45) !important;
}
html[data-theme="light"] #hero .proof-strip-label strong {
  color: rgba(26, 26, 34, 0.8) !important;
}
html[data-theme="light"] #hero .proof-strip-sep {
  background: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] #hero .proof-star {
  color: #eab308;
}
html[data-theme="light"] #hero .proof-strip-logo img {
  filter: brightness(0.3) contrast(1.4);
}
html[data-theme="light"] #hero .hero-cta-ghost {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(26, 26, 34, 0.7);
}
html[data-theme="light"] #hero .hero-cta-ghost:hover {
  border-color: rgba(0, 0, 0, 0.22);
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a22;
}
html[data-theme="light"] #hero .zos-hint-pill {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] #hero .zos-key {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.06);
  color: rgba(26, 26, 34, 0.8);
  box-shadow: 0 0 12px rgba(0,0,0,0.08);
}
html[data-theme="light"] #hero .hero-eyebrow-line {
  background: linear-gradient(90deg, rgba(0,0,0,0.25), transparent);
}
html[data-theme="light"] #hero .hero-sub-accent {
  background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.02));
}

/* THE ZULBERA METHOD (flow overlay): dark text + lines in light mode */
html[data-theme="light"] #hero .flow-eyebrow span {
  color: #1a1a22 !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] #hero .flow-eyebrow-line {
  background: linear-gradient(90deg, transparent, rgba(26, 26, 34, 0.5), transparent);
}

/* Hero logo SVG (Zulbera fill + strokes): dark in light mode */
html[data-theme="light"] #hero #sigSvg #hgTopStroke,
html[data-theme="light"] #hero #sigSvg #hgBotStroke {
  stroke: rgba(26, 26, 34, 0.72) !important;
}
html[data-theme="light"] #hero #sigSvg #zTLStroke,
html[data-theme="light"] #hero #sigSvg #zBRStroke {
  stroke: rgba(26, 26, 34, 0.78) !important;
}
html[data-theme="light"] #hero #sigSvg #snapFlash path {
  fill: rgba(26, 26, 34, 0.35) !important;
}
html[data-theme="light"] #hero #sigSvg #segStrategy,
html[data-theme="light"] #hero #sigSvg #segDesign,
html[data-theme="light"] #hero #sigSvg #segEngineering,
html[data-theme="light"] #hero #sigSvg #segLaunch {
  fill: rgba(26, 26, 34, 0.85) !important;
}

/* Flow overlay SVG (Z-path, pen, dots): dark in light mode */
html[data-theme="light"] #hero #flowSvg #flowLineBg {
  stroke: rgba(26, 26, 34, 0.35) !important;
}
html[data-theme="light"] #hero #flowSvg #flowLineGlow {
  stroke: rgba(26, 26, 34, 0.2) !important;
}
html[data-theme="light"] #hero #flowSvg #flowLineDraw {
  stroke: rgba(26, 26, 34, 0.9) !important;
}
html[data-theme="light"] #hero #flowSvg .flow-connector {
  stroke: rgba(26, 26, 34, 0.3) !important;
}
html[data-theme="light"] #hero #flowSvg .flow-corner-dot {
  fill: rgba(26, 26, 34, 0.85) !important;
}
html[data-theme="light"] #hero #flowSvg .flow-svg-ring {
  stroke: rgba(26, 26, 34, 0.35) !important;
}
html[data-theme="light"] #hero #flowSvg #penCursor .pen-outer-ring {
  stroke: rgba(26, 26, 34, 0.4) !important;
}
html[data-theme="light"] #hero #flowSvg #penCursor circle[r="5"] {
  fill: rgba(26, 26, 34, 0.25) !important;
}
html[data-theme="light"] #hero #flowSvg #penCursor circle[r="2"] {
  fill: rgba(26, 26, 34, 0.95) !important;
}

/* Section eyebrow lines: any div with gradient from white → dark in light mode */
html[data-theme="light"] [class*="from-white"][class*="bg-gradient"] {
  background: linear-gradient(to right, rgba(0,0,0,0.25), transparent) !important;
}
html[data-theme="light"] [class*="to-white"][class*="bg-gradient"] {
  background: linear-gradient(to left, transparent, rgba(0,0,0,0.2)) !important;
}

/* ── Services section bento cards: light mode — visible, modern demo panels ── */
html[data-theme="light"] #services .bento-card {
  border-color: rgba(0, 0, 0, 0.08);
  background: linear-gradient(165deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.85) 100%);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.8) inset,
    0 4px 24px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] #services .bento-card:hover {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.95) inset,
    0 16px 48px -12px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] #services .bento-card::before {
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,0,0,0.02) 0%, transparent 70%);
}
html[data-theme="light"] #services .svc-card-shine.glass-card::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 30%,
    rgba(0,0,0,0.03) 40%,
    rgba(0,0,0,0.08) 50%,
    rgba(0,0,0,0.03) 60%,
    transparent 70%,
    transparent 100%
  );
}
html[data-theme="light"] #services .dp {
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 4px 20px -4px rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] #services .svc-card:hover .dp {
  border-color: rgba(0, 0, 0, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 12px 36px -8px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0,0,0,0.06);
}
/* Demo panel inner gradient (override inline style) */
html[data-theme="light"] #services .dp > div.absolute.inset-0:first-of-type {
  background: linear-gradient(160deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.01) 50%, rgba(0,0,0,0.02) 100%) !important;
}
/* All text in demo panels: dark for visibility */
html[data-theme="light"] #services .dp [class*="text-white"] {
  color: rgba(26, 26, 34, 0.9) !important;
}
html[data-theme="light"] #services .dp [class*="text-white"]:not([class*="text-white/"]) {
  color: #1a1a22 !important;
}
/* Backgrounds and borders in demo panels: dark tint so UI elements are visible */
html[data-theme="light"] #services .dp [class*="bg-white"] {
  background-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] #services .dp [class*="border-white"] {
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] #services .dp .d-bar,
html[data-theme="light"] #services .dp .d-side,
html[data-theme="light"] #services .dp .d-search {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] #services .dp .d-tab,
html[data-theme="light"] #services .dp .d-tab2 {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
/* Thin lines and placeholders in demo panels */
html[data-theme="light"] #services .dp [class*="rounded"][class*="bg-white"]:not(.d-bar):not(.d-side):not(.d-search) {
  background-color: rgba(0, 0, 0, 0.05) !important;
}
html[data-theme="light"] #services .dp svg[class*="text-white"] {
  color: rgba(26, 26, 34, 0.5);
}
/* Card number 01, 02... */
html[data-theme="light"] #services .bento-inner .text-text-tertiary\/20,
html[data-theme="light"] #services .bento-card-num {
  color: rgba(26, 26, 34, 0.4) !important;
}
html[data-theme="light"] #services .bento-inner [class*="bg-white/"] {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: rgba(26, 26, 34, 0.75) !important;
}

/* "Get a project plan" links visible in light mode (header CTA + card links) */
html[data-theme="light"] #services .services-header-cta {
  color: #1a1a22 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
html[data-theme="light"] #services .services-header-cta:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
  color: #1a1a22 !important;
}
html[data-theme="light"] #services .services-show-more {
  color: rgba(26, 26, 34, 0.75) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
html[data-theme="light"] #services .services-show-more:hover {
  color: #1a1a22 !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="light"] #services a[href="/contact"] {
  color: rgba(26, 26, 34, 0.75) !important;
}
html[data-theme="light"] #services a[href="/contact"]:hover {
  color: #1a1a22 !important;
}
html[data-theme="light"] #services a[href="/contact"][class*="border"] {
  border-color: rgba(0, 0, 0, 0.12) !important;
}
html[data-theme="light"] #services a[href="/contact"][class*="border"]:hover {
  border-color: rgba(0, 0, 0, 0.2) !important;
}

/* Web App chart: line/area/dots visible in light mode */
html[data-theme="light"] #services .dp .w-area {
  fill: rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] #services .dp .w-line {
  stroke: rgba(0, 0, 0, 0.28);
}
html[data-theme="light"] #services .dp .w-line2 {
  stroke: rgba(96, 165, 250, 0.5);
}
html[data-theme="light"] #services .dp .w-dot {
  fill: rgba(26, 26, 34, 0.5);
}
html[data-theme="light"] #services .dp .w-dot-ring {
  stroke: rgba(0, 0, 0, 0.2);
}
/* AI & ML — Zulbera Lab HUD (light): borders and grid darker for readability */
html[data-theme="light"] #services .dp .mlr {
  border-color: rgba(0, 0, 0, 0.12);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
}
html[data-theme="light"] #services .dp .mlr [class*="border-white"],
html[data-theme="light"] #services .dp .mlr .mlr-pipeline,
html[data-theme="light"] #services .dp .mlr .mlr-gauge-wrap,
html[data-theme="light"] #services .dp .mlr .mlr-loss {
  border-color: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] #services .dp .mlr .mlr-silhouette {
  fill: rgba(0, 0, 0, 0.06);
  stroke: rgba(0, 0, 0, 0.14);
}
html[data-theme="light"] #services .dp .mlr .mlr-stream {
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06), transparent);
}
html[data-theme="light"] #services .dp .mlr .mlr-scan {
  stroke: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] #services .dp .mlr .mlr-loss-dash {
  stroke: rgba(139, 92, 246, 0.4);
}

/* AI Automation panel: pipeline and nodes visible in light mode */
html[data-theme="light"] #services .dp .aa-line {
  stroke: rgba(0, 0, 0, 0.2);
}
html[data-theme="light"] #services .dp .aa-line2 {
  stroke: rgba(52, 211, 153, 0.35);
}
html[data-theme="light"] #services .dp .aa-node,
html[data-theme="light"] #services .dp .aa-node2 {
  fill: rgba(0, 0, 0, 0.04);
  stroke: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] #services .dp .aa-node3 {
  fill: rgba(52, 211, 153, 0.08);
  stroke: rgba(52, 211, 153, 0.4);
}
html[data-theme="light"] #services .dp svg line[stroke*="255"] {
  stroke: rgba(0, 0, 0, 0.1);
}
/* Desktop app cursor icon */
html[data-theme="light"] #services .d-mouse svg path {
  fill: rgba(26, 26, 34, 0.7);
}
html[data-theme="light"] #services .d-mouse svg {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.15));
}
/* Wireframe grid (Technology card): stronger so 3D floor is visible */
html[data-theme="light"] #services .t-grid-svg {
  opacity: 0.35;
}
html[data-theme="light"] #services .t-grid-svg line {
  stroke: rgba(0, 0, 0, 0.45);
}

/* ── 3D & Animation card: visible in light mode (darker elements, stronger contrast) ── */
/* Cube faces: dark borders and fills so edges and faces are visible */
html[data-theme="light"] #services .t-f {
  border-color: rgba(0, 0, 0, 0.14) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] #services .t-fr {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02)) !important;
}
html[data-theme="light"] #services .t-tp {
  background: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] #services .t-f.t-rt [class*="border-white"] {
  border-color: rgba(0, 0, 0, 0.12) !important;
}
/* Cube logo icon: invert so it's dark on light face */
html[data-theme="light"] #services .t-fr img,
html[data-theme="light"] #services .t-scene img {
  filter: invert(1) brightness(0.85);
  opacity: 0.5;
}
/* Orbit rings: visible ring path in light mode */
html[data-theme="light"] #services .t-orbit,
html[data-theme="light"] #services .t-orbit2 {
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  box-sizing: border-box;
}
html[data-theme="light"] #services .t-orb-dot {
  box-shadow: 0 0 10px rgba(196, 131, 110, 0.35), 0 0 4px rgba(0, 0, 0, 0.15);
}
/* Floating particles: darker so they're visible on light background */
html[data-theme="light"] #services .t-pt[class*="bg-white"] {
  background-color: rgba(0, 0, 0, 0.22) !important;
}
html[data-theme="light"] #services .t-pt.bg-white\/20 { background-color: rgba(0, 0, 0, 0.28) !important; }
html[data-theme="light"] #services .t-pt.bg-white\/15 { background-color: rgba(0, 0, 0, 0.2) !important; }
html[data-theme="light"] #services .t-pt.bg-white\/10 { background-color: rgba(0, 0, 0, 0.15) !important; }
/* Slightly stronger accent/violet/cyan particles in light mode */
html[data-theme="light"] #services .t-pt.bg-accent\/15 { background-color: rgba(196, 131, 110, 0.35) !important; }
html[data-theme="light"] #services .t-pt.bg-accent\/10 { background-color: rgba(196, 131, 110, 0.28) !important; }
html[data-theme="light"] #services .t-pt.bg-violet-400\/15 { background-color: rgba(139, 92, 246, 0.35) !important; }
html[data-theme="light"] #services .t-pt.bg-violet-300\/10 { background-color: rgba(196, 181, 253, 0.3) !important; }
html[data-theme="light"] #services .t-pt.bg-cyan-400\/15 { background-color: rgba(34, 211, 238, 0.35) !important; }
/* Ambient glows: darker tint so they're visible */
html[data-theme="light"] #services .t-glow1 {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 70%) !important;
}
html[data-theme="light"] #services .t-glow2 {
  background: radial-gradient(circle, rgba(34, 211, 238, 0.1) 0%, transparent 70%) !important;
}
/* Layers / Material panels: readable on light */
html[data-theme="light"] #services [class*="bg-black/30"] {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
/* Progress track and timeline dots */
html[data-theme="light"] #services .t-tdot.bg-white\/10,
html[data-theme="light"] #services .t-tdot[class*="border-white"] {
  background-color: rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}
html[data-theme="light"] #services .flex-1.h-\[2px\].bg-white\/\[0\.04\] {
  background-color: rgba(0, 0, 0, 0.08) !important;
}
/* Timeline glow animation: dark shadow in light mode */
html[data-theme="light"] #services .t-tdot {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] #services .svc-card.in-view .t-tdot:nth-child(1) {
  animation: tdGlowLight 5s ease-in-out 1s infinite;
}
@keyframes tdGlowLight {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 0, 0, 0.12); }
  50% { box-shadow: 0 0 14px rgba(196, 131, 110, 0.3), 0 0 6px rgba(0, 0, 0, 0.1); }
}

/* CTA: divider and trust line icons */
html[data-theme="light"] #cta [class*="text-white"] {
  color: rgba(26, 26, 34, 0.5) !important;
}
html[data-theme="light"] #cta [class*="bg-white"] {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* Testimonials: avatar circles and stars */
html[data-theme="light"] #testimonials [class*="bg-white"][class*="border"] {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: #e8e8ec !important;
}
html[data-theme="light"] #testimonials [class*="text-white"] {
  color: rgba(26, 26, 34, 0.6) !important;
}
html[data-theme="light"] #testimonials .testimonial-card > div.h-px {
  background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12), rgba(0,0,0,0.06)) !important;
}

/* Global: any white text in main (except inside primary buttons) → dark */
html[data-theme="light"] main [class*="text-white"] {
  color: rgba(26, 26, 34, 0.85) !important;
}
html[data-theme="light"] .btn-primary [class*="text-white"],
html[data-theme="light"] .hero-cta-primary [class*="text-white"] {
  color: inherit !important;
}

/* Scrollbar in light mode */
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* CTA block: light-mode */
html[data-theme="light"] .cta-block {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 24px 60px -24px rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .cta-block:hover {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9) inset,
    0 12px 40px rgba(0, 0, 0, 0.1),
    0 32px 80px -24px rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .cta-btn-primary {
  background: #1a1a22;
  color: #fff;
}

/* Light mode prose */
html[data-theme="light"] .blog-prose pre {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .blog-prose hr {
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1), transparent);
}