/* Light theme tokens */
html[data-theme="light"] {
  --body-bg: #f7f9ff;
  --heading: #101629;
  --text: #26344f;
  --muted: #5f6f8e;
  --border: rgba(118, 84, 230, 0.24);
  --glass-bg: rgba(255, 255, 255, 0.76);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 22px 50px rgba(49, 34, 118, 0.13);
  --input-bg: rgba(255, 255, 255, 0.9);
  --footer-bg: rgba(248, 250, 255, 0.96);
  --timeline-dot: #ffffff;
  --timeline-ring: rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 12% 12%, rgba(141, 77, 255, 0.2), transparent 24rem),
    radial-gradient(circle at 86% 13%, rgba(23, 212, 255, 0.22), transparent 28rem),
    radial-gradient(circle at 50% 48%, rgba(217, 70, 239, 0.09), transparent 36rem),
    var(--body-bg);
}

html[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(111, 53, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 212, 255, 0.08) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

html[data-theme="light"] .glass-nav {
  background: rgba(255, 255, 255, 0.86);
}

html[data-theme="light"] .hero-visual img,
html[data-theme="light"] .cta-banner img {
  /* opacity: 0.98; */
  opacity: 1;
  filter: drop-shadow(0 28px 48px rgba(82, 57, 174, 0.22));
}

html[data-theme="light"] .hero-section h1 em,
html[data-theme="light"] .cta-kicker {
  background: linear-gradient(90deg, #2563eb, #7c3aed, #d946ef);
  -webkit-background-clip: text;
  background-clip: text;
}

html[data-theme="light"] .neon-btn {
  background: linear-gradient(135deg, #6d5dfc, #9b4dff);
  box-shadow: 0 14px 30px rgba(109, 93, 252, 0.28);
}

html[data-theme="light"] .service-card>i,
html[data-theme="light"] .timeline-item span {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(237, 242, 255, 0.86));
  box-shadow: inset 0 0 22px rgba(141, 77, 255, 0.12), 0 10px 28px rgba(82, 57, 174, 0.13);
}

html[data-theme="light"] .contact-panel {
  background:
    linear-gradient(105deg, rgba(239, 214, 255, 0.76) 0%, rgba(251, 240, 255, 0.5) 35%, transparent 60%),
    radial-gradient(circle at 4% 18%, rgba(217, 70, 239, 0.2), transparent 27rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(243, 247, 255, 0.8));
}

html[data-theme="light"] .stats-band {
  background: rgba(255, 255, 255, 0.82);
}

html[data-theme="light"] .stat-item strong {
  color: var(--purple);
}

html[data-theme="light"] .project-shot {
  border-color: rgba(103, 73, 198, 0.28);
}

html[data-theme="light"] .hero-image-dark,
html[data-theme="light"] .cta-visual-dark {
  display: none;
}

html[data-theme="light"] .hero-image-light,
html[data-theme="light"] .cta-visual-light {
  display: block;
}

html[data-theme="light"] .contact-panel {
  background:
    linear-gradient(105deg, rgba(238, 208, 255, 0.88) 0%, rgba(248, 232, 255, 0.66) 34%, rgba(239, 246, 255, 0.76) 68%, rgba(226, 246, 255, 0.78) 100%),
    radial-gradient(circle at 84% 18%, rgba(23, 212, 255, 0.18), transparent 25rem),
    rgba(255, 255, 255, 0.84);
}

html[data-theme="light"] .contact-info::after {
  opacity: 0.28;
}

html[data-theme="light"] .hero-image-light,
html[data-theme="light"] .cta-visual-light {
  mix-blend-mode: multiply;
}

@media (min-width: 992px) {
  html[data-theme="light"] .hero-visual::after {
    background:
      linear-gradient(90deg, var(--body-bg) 0%, rgba(247, 249, 255, 0.9) 15%, transparent 34%, transparent 96%, rgba(247, 249, 255, 0.45) 100%),
      linear-gradient(180deg, rgba(247, 249, 255, 0.98) 0%, rgba(247, 249, 255, 0.34) 12%, transparent 23%, transparent 62%, rgba(247, 249, 255, 0.52) 80%, var(--body-bg) 100%);
  }

  /* html[data-theme="light"] .hero-visual .hero-image-light {
    opacity: 0.96;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 15%, #000 30%, #000 98%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 11%, #000 67%, rgba(0, 0, 0, 0.62) 82%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 15%, #000 30%, #000 98%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 11%, #000 67%, rgba(0, 0, 0, 0.62) 82%, transparent 100%);
    mask-composite: intersect;
  } */
}

html[data-theme="light"] .cta-banner .cta-visual-light {
  /* opacity: 0.94; */
  opacity: 1;
  /* -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.46) 12%, #000 24%, #000 91%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%); */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.46) 2%, #000 3%, #000 99%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 0%, #000 100%, transparent 100%);
  -webkit-mask-composite: source-in;
  /* mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.46) 12%, #000 24%, #000 91%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%); */
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.46) 2%, #000 3%, #000 99%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 0%, #000 100%, transparent 100%);
  mask-composite: intersect;
}

/* My light css start */
.contact-submit-alert{position:relative}.contact-submit-alert .btn-close{position:absolute;right:.75rem;top:50%;transform:translateY(-50%)}
/* My light css start */