/* DevStack — futuristic visual layer (HTML/CSS only, loads after main + styles) */

html[data-theme="dark"] {
  --ds-bg: #06080f;
  --ds-bg-2: #0c1222;
  --ds-surface: rgba(15, 23, 42, 0.72);
  --ds-glass: rgba(255, 255, 255, 0.06);
  --ds-border: rgba(148, 163, 184, 0.22);
  --ds-glow: rgba(10, 165, 255, 0.55);
  --ds-glow-2: rgba(99, 102, 241, 0.35);
  --ds-text: #f1f5f9;
  --ds-muted: #cbd5e1;
  --ds-heading: #ffffff;
  --ds-accent: #38bdf8;
  --ds-accent-2: #22d3ee;
  --ds-accent-3: #818cf8;
}

/* Ambient background */
html[data-theme="dark"] .ambient-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(10, 165, 255, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 50%, rgba(99, 102, 241, 0.12), transparent 50%),
    radial-gradient(ellipse 50% 35% at 0% 80%, rgba(6, 182, 212, 0.1), transparent 45%),
    var(--ds-bg);
}
html[data-theme="dark"] .ambient-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 75%);
}
html[data-theme="dark"] .ambient-bg::after {
  content: "";
  position: absolute;
  width: 140%;
  height: 60%;
  left: -20%;
  top: 10%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(10, 165, 255, 0.06) 48%,
    rgba(6, 182, 212, 0.08) 52%,
    transparent 60%
  );
  animation: ds-shimmer 12s ease-in-out infinite;
}
@keyframes ds-shimmer {
  0%,
  100% {
    transform: translateX(-8%) skewY(-2deg);
    opacity: 0.6;
  }
  50% {
    transform: translateX(8%) skewY(-2deg);
    opacity: 1;
  }
}

/* Nav — glass */
html[data-theme="dark"] .s-navbar {
  background: rgba(6, 8, 15, 0.72) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--ds-border);
}
html[data-theme="dark"] .s-navbar.nav-scrolled {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(10, 165, 255, 0.08);
}
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link {
  color: var(--ds-muted) !important;
  font-weight: 500;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover,
html[data-theme="dark"] .navbar-light .navbar-nav .nav-item.active .nav-link {
  color: var(--ds-heading) !important;
  text-shadow: 0 0 20px var(--ds-glow);
}
html[data-theme="dark"] .nav-cta .nav-link {
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-3)) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 0.45rem 1rem !important;
  margin-left: 0.5rem;
  box-shadow: 0 0 24px var(--ds-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: none !important;
}
html[data-theme="dark"] .nav-cta .nav-link:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 32px var(--ds-glow), 0 0 48px var(--ds-glow-2);
}

/* Hero */
html[data-theme="dark"] .home-banner .video-bg .video {
  filter: brightness(0.25) saturate(1.2) hue-rotate(-8deg);
}
html[data-theme="dark"] .home-banner .video-overlay {
  background:
    linear-gradient(135deg, rgba(6, 8, 15, 0.92) 0%, rgba(12, 18, 34, 0.75) 45%, rgba(6, 8, 15, 0.88) 100%),
    radial-gradient(circle at 70% 30%, rgba(10, 165, 255, 0.15), transparent 45%);
}

/* Landing hero — show video motion through a lighter, branded scrim */
html[data-theme="dark"] .home-landing-hero.home-banner .video-bg .video {
  filter: brightness(0.48) saturate(1.25) contrast(1.05);
}
html[data-theme="dark"] .home-landing-hero .video-bg .video-overlay {
  background:
    linear-gradient(
      118deg,
      rgba(6, 8, 15, 0.72) 0%,
      rgba(6, 8, 15, 0.38) 40%,
      rgba(12, 18, 34, 0.55) 70%,
      rgba(6, 8, 15, 0.75) 100%
    ),
    radial-gradient(ellipse 75% 60% at 80% 30%, rgba(10, 165, 255, 0.16), transparent 50%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(6, 182, 212, 0.08), transparent 45%);
}
html[data-theme="dark"] .home-banner .header-headings h1 {
  color: var(--ds-heading);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-shadow: 0 0 40px rgba(10, 165, 255, 0.25);
}
html[data-theme="dark"] .home-banner .hero-lead {
  color: var(--ds-muted);
}
html[data-theme="dark"] .hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-accent-2);
  margin-bottom: 1rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(10, 165, 255, 0.35);
  background: rgba(10, 165, 255, 0.08);
  box-shadow: 0 0 20px rgba(10, 165, 255, 0.15);
}
html[data-theme="dark"] .hero-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-accent-2);
  box-shadow: 0 0 10px var(--ds-accent-2);
  animation: ds-pulse 2s ease-in-out infinite;
}
@keyframes ds-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.85);
  }
}

html[data-theme="dark"] .hero-dashboard-frame {
  position: relative;
  transition: transform 0.15s ease-out;
  transform-style: preserve-3d;
  padding: 3px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-3), var(--ds-accent-2), var(--ds-accent));
  background-size: 300% 300%;
  animation: ds-border-flow 8s ease infinite;
  box-shadow:
    0 0 60px rgba(10, 165, 255, 0.25),
    0 24px 64px rgba(0, 0, 0, 0.45);
}
@keyframes ds-border-flow {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
html[data-theme="dark"] .hero-dashboard-frame__inner {
  border-radius: 17px;
  overflow: hidden;
  background: var(--ds-bg-2);
  position: relative;
}
html[data-theme="dark"] .hero-dashboard-frame__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 165, 255, 0.08) 0%, transparent 40%);
  pointer-events: none;
}
html[data-theme="dark"] .hero-dashboard-frame img {
  display: block;
  width: 100%;
  border-radius: 0;
}

html[data-theme="dark"] .hero-actions .cta-link:not(.--primary-cta) {
  color: var(--ds-accent-2) !important;
  border: 1px solid rgba(6, 182, 212, 0.4);
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  background: rgba(6, 182, 212, 0.06);
}
html[data-theme="dark"] .hero-actions .--primary-cta {
  box-shadow: 0 0 28px var(--ds-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Sections */
html[data-theme="dark"] .section-spacing {
  position: relative;
}
html[data-theme="dark"] .bg-light {
  background: linear-gradient(180deg, rgba(12, 18, 34, 0.95) 0%, rgba(6, 8, 15, 0.98) 100%) !important;
}
html[data-theme="dark"] .section-header .header-headings h2,
html[data-theme="dark"] .section-header .header-headings .h1,
html[data-theme="dark"] .header-headings h2.h1 {
  color: var(--ds-heading);
  letter-spacing: -0.02em;
}
html[data-theme="dark"] .section-header .header-headings p,
html[data-theme="dark"] .header-headings p.mb0 {
  color: var(--ds-muted);
}
html[data-theme="dark"] .section-eyebrow {
  color: var(--ds-accent-2);
  text-shadow: 0 0 24px rgba(6, 182, 212, 0.35);
}
html[data-theme="dark"] .gradient-text {
  background: linear-gradient(90deg, #38bdf8, #818cf8, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.35));
}

/* Glass cards */
html[data-theme="dark"] .ind-card,
html[data-theme="dark"] .solution-card,
html[data-theme="dark"] .trust-pill,
html[data-theme="dark"] .case-study-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .faq-item {
  background: var(--ds-surface) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--ds-border) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .ind-card:hover,
html[data-theme="dark"] .solution-card:hover,
html[data-theme="dark"] .case-study-card:hover,
html[data-theme="dark"] .feature-card:hover,
html[data-theme="dark"] .trust-pill:hover {
  border-color: rgba(10, 165, 255, 0.35) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 32px rgba(10, 165, 255, 0.12);
}
html[data-theme="dark"] .ind-card-body h3,
html[data-theme="dark"] .solution-card h3,
html[data-theme="dark"] .case-study-card .cs-body h3,
html[data-theme="dark"] .trust-pill h4,
html[data-theme="dark"] .feature-body h4,
html[data-theme="dark"] .process-step h4 {
  color: var(--ds-heading);
}
html[data-theme="dark"] .ind-card-body p,
html[data-theme="dark"] .solution-card p,
html[data-theme="dark"] .case-study-card .cs-meta,
html[data-theme="dark"] .case-study-card .cs-features,
html[data-theme="dark"] .trust-pill p,
html[data-theme="dark"] .process-step p,
html[data-theme="dark"] .feature-body p {
  color: var(--ds-muted) !important;
}
html[data-theme="dark"] .solution-card .solution-icon {
  background: linear-gradient(135deg, rgba(10, 165, 255, 0.2), rgba(99, 102, 241, 0.2));
  border: 1px solid rgba(10, 165, 255, 0.25);
  box-shadow: 0 0 20px rgba(10, 165, 255, 0.15);
}
html[data-theme="dark"] .case-study-card .cs-industry {
  background: rgba(6, 8, 15, 0.85);
  border: 1px solid rgba(10, 165, 255, 0.35);
  color: var(--ds-accent-2);
}
html[data-theme="dark"] .case-study-card .cs-impact {
  color: #5eead4;
}
html[data-theme="dark"] .benefit-row li {
  color: var(--ds-text);
}
html[data-theme="dark"] .testimonial-card blockquote {
  color: var(--ds-muted);
}
html[data-theme="dark"] .testimonial-card .t-author {
  color: var(--ds-heading);
}
html[data-theme="dark"] .testimonial-placeholder {
  border-color: rgba(148, 163, 184, 0.25);
}
html[data-theme="dark"] .faq-question {
  color: var(--ds-heading);
}
html[data-theme="dark"] .faq-answer {
  color: var(--ds-muted);
}

html[data-theme="dark"] .stat,
html[data-theme="dark"] .section-spacing .h1[style*="color"] {
  color: var(--ds-accent-2) !important;
  text-shadow: 0 0 30px rgba(6, 182, 212, 0.4);
}
html[data-theme="dark"] .stat-label {
  color: var(--ds-muted) !important;
}

html[data-theme="dark"] .cta-link {
  color: var(--ds-accent-2);
}
html[data-theme="dark"] .cta-band {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 80px rgba(10, 165, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .cta-band::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  animation: ds-rotate 10s linear infinite;
}
@keyframes ds-rotate {
  to {
    transform: rotate(360deg);
  }
}
html[data-theme="dark"] .cta-band > * {
  position: relative;
  z-index: 1;
}

/* AI / engineering blobs */
html[data-theme="dark"] #ai-custom-software,
html[data-theme="dark"] #engineering-excellence {
  background: transparent;
}
html[data-theme="dark"] .blob {
  opacity: 0.45;
  filter: blur(60px);
}

/* Footer */
html[data-theme="dark"] #footer .footer-section {
  background: var(--ds-bg-2);
  border-top: 1px solid var(--ds-border);
}
html[data-theme="dark"] #footer .cta-footer h3,
html[data-theme="dark"] #footer a {
  color: var(--ds-heading);
}
html[data-theme="dark"] #footer .made-with,
html[data-theme="dark"] #footer .copyright,
html[data-theme="dark"] #footer .contact-details p {
  color: var(--ds-muted) !important;
}
html[data-theme="dark"] #footer .footer-links a {
  color: var(--ds-muted);
}
html[data-theme="dark"] #footer .footer-links a:hover {
  color: var(--ds-accent-2);
}

/* Modal */
html[data-theme="dark"] .modal-dialog-custom {
  background: linear-gradient(165deg, #111827 0%, #0c1222 100%);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  box-shadow: 0 0 60px rgba(10, 165, 255, 0.15);
}
html[data-theme="dark"] .modal-dialog-custom h3,
html[data-theme="dark"] .modal-dialog-custom label {
  color: var(--ds-heading);
}
html[data-theme="dark"] .modal-dialog-custom .form-control {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--ds-border);
  color: var(--ds-text);
}
html[data-theme="dark"] .modal-dialog-custom .form-control:focus {
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 3px rgba(10, 165, 255, 0.2);
}

html[data-theme="dark"] .back-to-top {
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-3));
  box-shadow: 0 0 24px var(--ds-glow);
}

/* Slick on dark */
html[data-theme="dark"] .slick-dots li button:before {
  color: var(--ds-accent-2);
}
html[data-theme="dark"] .slick-arrow {
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1px solid var(--ds-border);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] .ambient-bg::after,
  html[data-theme="dark"] .hero-dashboard-frame,
  html[data-theme="dark"] .cta-band::before,
  html[data-theme="dark"] .hero-kicker::before {
    animation: none;
  }
}

html[data-theme="dark"] .team-hero {
  border: 1px solid var(--ds-border);
  box-shadow: 0 0 40px rgba(10, 165, 255, 0.12);
}

html[data-theme="dark"] .label {
  color: var(--ds-accent-2) !important;
}

html[data-theme="dark"] .mobile-nav,
html[data-theme="dark"] .js-mobile-nav {
  background: rgba(6, 8, 15, 0.96) !important;
  backdrop-filter: blur(20px);
}
html[data-theme="dark"] .home-banner {
  min-height: 0;
}
html[data-theme="dark"] .learn-more-arrow img {
  filter: drop-shadow(0 0 8px rgba(10, 165, 255, 0.6)) brightness(1.2);
}

/* Inner pages — banner areas */
html[data-theme="dark"] .home-banner:not(:has(.video-bg)) {
  background: linear-gradient(180deg, var(--ds-bg-2) 0%, var(--ds-bg) 100%);
}
html[data-theme="dark"] .contact-us,
html[data-theme="dark"] .about-banner {
  color: var(--ds-text);
}
html[data-theme="dark"] .contact-us .h1 {
  color: var(--ds-heading);
}
html[data-theme="dark"] .about-banner h1 {
  color: var(--ds-accent) !important;
}
html[data-theme="dark"] .work-item h3 {
  color: var(--ds-heading) !important;
}
html[data-theme="dark"] .work-item span {
  color: var(--ds-muted) !important;
}
html[data-theme="dark"] .about-banner .about-description p {
  color: var(--ds-muted) !important;
}
html[data-theme="dark"] .ethos-group h2,
html[data-theme="dark"] .about-team h2,
html[data-theme="dark"] .playbook-section h2,
html[data-theme="dark"] .playbook-body h3,
html[data-theme="dark"] .header-text {
  color: var(--ds-heading) !important;
}
html[data-theme="dark"] .ethos-group p,
html[data-theme="dark"] .playbook-body p {
  color: var(--ds-muted) !important;
}
html[data-theme="dark"] .team-member h4 {
  color: var(--ds-heading) !important;
}
html[data-theme="dark"] .team-member .team-role {
  color: var(--ds-muted) !important;
}

html[data-theme="dark"] .playbook-card {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid var(--ds-border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .playbook-card:hover {
  box-shadow: 0 16px 40px rgba(10, 165, 255, 0.12);
}

html[data-theme="dark"] .svc-card,
html[data-theme="dark"] .plan {
  background: rgba(15, 23, 42, 0.55);
  border-color: var(--ds-border) !important;
  color: var(--ds-text);
}
html[data-theme="dark"] .svc-card h3,
html[data-theme="dark"] .plan h3 {
  color: var(--ds-heading);
}
html[data-theme="dark"] .plan .price {
  color: var(--ds-heading) !important;
}
html[data-theme="dark"] .badge {
  background: rgba(56, 189, 248, 0.15) !important;
  color: var(--ds-accent-2) !important;
}

html[data-theme="dark"] .cs-section h2 {
  color: var(--ds-heading) !important;
}
html[data-theme="dark"] .cs-section p,
html[data-theme="dark"] .cs-section li {
  color: var(--ds-muted) !important;
}
html[data-theme="dark"] .cs-tag {
  background: rgba(56, 189, 248, 0.12) !important;
  color: var(--ds-accent-2) !important;
}
html[data-theme="dark"] .cs-detail-hero .cs-hero-img {
  border: 1px solid var(--ds-border);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .contact-us .contact-us-details > a {
  color: var(--ds-accent-2) !important;
}
html[data-theme="dark"] .contact-us .social-media .fab {
  color: var(--ds-muted) !important;
}
html[data-theme="dark"] .contact-us .social-media a:hover .fab {
  color: var(--ds-accent-2) !important;
}

html[data-theme="dark"] body.site-themed .form-control {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--ds-border) !important;
  color: var(--ds-text) !important;
}
html[data-theme="dark"] body.site-themed .form-control:focus {
  border-color: var(--ds-accent) !important;
  box-shadow: 0 0 0 3px rgba(10, 165, 255, 0.2);
}
html[data-theme="dark"] body.site-themed .form-control::placeholder {
  color: #64748b;
}

html[data-theme="dark"] body.site-themed main a:not(.nav-link):not(.cta-link):not(.btn):not(.navbar-brand) {
  color: var(--ds-accent-2);
}
html[data-theme="dark"] body.site-themed main a:not(.nav-link):not(.cta-link):not(.btn):hover {
  color: #fff;
}

html[data-theme="dark"] body.site-themed .btn-primary {
  background: var(--ds-accent) !important;
  border-color: var(--ds-accent) !important;
  color: #0f172a !important;
}

html[data-theme="dark"] .home-banner:not(:has(.video-bg)) .header-headings h1,
html[data-theme="dark"] .home-banner:not(:has(.video-bg)) .header-headings .h1 {
  color: var(--ds-heading) !important;
  text-shadow: 0 0 40px rgba(10, 165, 255, 0.15);
}
html[data-theme="dark"] .home-banner:not(:has(.video-bg)) .header-headings p {
  color: var(--ds-muted) !important;
}

html[data-theme="dark"] body.site-themed .browserupgrade {
  background: #1e293b;
  color: #f8fafc;
}

html[data-theme="dark"] .section-spacing .h1[style*="color"] {
  color: var(--ds-accent-2) !important;
}

html[data-theme="dark"] .footer-section.--footer-details,
html[data-theme="dark"] #footer .footer-section {
  background-color: var(--ds-bg-2) !important;
  border-top: 1px solid var(--ds-border);
}
html[data-theme="dark"] .footer-section strong,
html[data-theme="dark"] #footer strong {
  color: var(--ds-heading);
}

html[data-theme="dark"] body.site-themed .card {
  background: rgba(15, 23, 42, 0.55);
  border-color: var(--ds-border) !important;
  color: var(--ds-text);
}
html[data-theme="dark"] body.site-themed .card h3 {
  color: var(--ds-heading);
}
html[data-theme="dark"] body.site-themed .text-muted {
  color: var(--ds-muted) !important;
}
html[data-theme="dark"] body.site-themed .form-check-label {
  color: var(--ds-text) !important;
}
html[data-theme="dark"] body.site-themed .alert-success {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.35);
  color: #bbf7d0;
}
html[data-theme="dark"] body.site-themed .alert-danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fecaca;
}

html[data-theme="dark"] body.site-themed main.pt100,
html[data-theme="dark"] body.site-themed main.pt100 h1,
html[data-theme="dark"] body.site-themed main.pt100 h2,
html[data-theme="dark"] body.site-themed main.pt100 h3 {
  color: var(--ds-heading);
}