/* ═══════════════════════════════════════════════
   HIMANSHU RAJPUT PORTFOLIO — SHARED STYLESHEET
═══════════════════════════════════════════════ */
:root {
  --cyan: #00FFFF;
  --violet: #7C3AED;
  --violet-light: #9F67FF;
  --orange: #FF6B35;
  --matrix: #00FF41;
  --navy: #050B18;
  --navy-2: #0A1628;
  --navy-3: #0F1F3D;
  --white: #F0F4FF;
  --gray: #8892A4;
  /* SOLID card backgrounds — 100% opaque, zero bleed-through possible */
  --card-bg: #0C1A30;
  --card-hover: #0E2040;
  --glass: rgba(255,255,255,0.04);
  --glass-border: rgba(124,58,237,0.22);
  --font: 'Inter', sans-serif;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --t: all 0.3s var(--ease);
}
[data-theme="light"] {
  --navy: #F4F6FF;
  --navy-2: #E8EEF8;
  --navy-3: #D6E0F0;
  --white: #0D1A2E;
  --gray: #4A5568;
  /* SOLID white card backgrounds for light theme */
  --card-bg: #FFFFFF;
  --card-hover: #FFFFFF;
  --glass: rgba(0,0,0,0.02);
  --glass-border: rgba(124,58,237,0.2);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; overflow-x:hidden }
body {
  font-family: var(--font);
  background: var(--navy);
  color: var(--white);
  overflow-x: hidden;
}
a { color:inherit; text-decoration:none }
img { max-width:100%; display:block; height:auto }
button { font-family:var(--font) }
input,textarea,select { font-family:var(--font) }
ul { list-style:none }
::selection { background:var(--violet); color:#fff }
::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-track { background:var(--navy-2) }
::-webkit-scrollbar-thumb { background:linear-gradient(var(--cyan),var(--violet)); border-radius:2px }

/* ── SCROLL PROGRESS ── */
#scroll-progress {
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--orange));
  z-index:9999; box-shadow:0 0 8px var(--cyan); transition:width 0.1s linear;
}

/* ── NAVBAR ── */
nav#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:16px 48px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(5,11,24,0.85); backdrop-filter:blur(24px);
  border-bottom:1px solid var(--glass-border);
  transition:padding 0.3s;
}
nav#navbar.scrolled { padding:10px 48px; background:rgba(5,11,24,0.97) }
.nav-logo {
  font-size:1.4rem; font-weight:900; letter-spacing:-0.02em;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-decoration:none;
}
.nav-links { display:flex; align-items:center; gap:28px }
.nav-links a {
  font-size:0.875rem; font-weight:500; color:var(--gray);
  transition:var(--t); position:relative; padding-bottom:4px;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:1px; background:var(--cyan);
  transform:scaleX(0); transition:transform 0.3s; transform-origin:left;
}
.nav-links a:hover,.nav-links a.active { color:var(--cyan) }
.nav-links a:hover::after,.nav-links a.active::after { transform:scaleX(1) }
.nav-actions { display:flex; align-items:center; gap:12px }
.btn-icon {
  background:none; border:1px solid var(--glass-border); color:var(--white);
  padding:8px 14px; border-radius:8px; font-size:0.8rem; transition:var(--t);
}
.btn-icon:hover { border-color:var(--cyan); color:var(--cyan) }
.nav-cta {
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  color:#fff; border:none; padding:10px 22px;
  border-radius:8px; font-weight:600; font-size:0.875rem;
  transition:var(--t); position:relative; overflow:hidden;
}
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(124,58,237,0.4) }
.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:8px;
}
.hamburger span { display:block; width:22px; height:2px; background:var(--white); transition:var(--t); border-radius:2px }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }

/* Mobile menu */
#mobile-menu {
  display:none; position:fixed; inset:0; top:64px;
  background:rgba(5,11,24,0.99); z-index:999;
  padding:40px 32px; backdrop-filter:blur(20px);
  flex-direction:column; gap:8px;
}
#mobile-menu.open { display:flex }
#mobile-menu a {
  font-size:1.3rem; font-weight:700; color:var(--white);
  padding:14px 0; border-bottom:1px solid var(--glass-border);
  transition:var(--t);
}
#mobile-menu a:hover { color:var(--cyan); padding-left:8px }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  padding:160px 0 80px;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-3) 100%);
  position:relative; overflow:hidden; text-align:center;
}
.page-hero .aurora-bg {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 20% 50%,rgba(124,58,237,0.08),transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 30%,rgba(0,255,255,0.05),transparent 60%);
}
.page-hero .section-tag { display:inline-block; margin-bottom:16px }
.page-hero h1 { font-size:clamp(2.2rem,6vw,4.5rem); font-weight:900; margin-bottom:16px }
.page-hero p { font-size:1.1rem; color:var(--gray); max-width:560px; margin:0 auto; line-height:1.7 }

/* ── SECTION UTILITIES ── */
section { padding:96px 0; position:relative }
.container { max-width:1200px; margin:0 auto; padding:0 40px }
.section-tag {
  display:inline-block; font-size:0.68rem; font-weight:700;
  letter-spacing:0.3em; text-transform:uppercase; color:var(--violet-light);
  padding:4px 12px; background:rgba(124,58,237,0.1);
  border-radius:4px; border:1px solid rgba(124,58,237,0.25); margin-bottom:12px;
}
[data-theme="light"] .section-tag {
  color:var(--violet); background:rgba(124,58,237,0.08); border-color:rgba(124,58,237,0.3);
}
.section-title {
  font-size:clamp(1.8rem,4.5vw,3rem); font-weight:800;
  line-height:1.15; margin-bottom:14px;
  background:linear-gradient(135deg,var(--white),rgba(240,244,255,0.75));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
/* Light theme: dark gradient so text is visible on white background */
[data-theme="light"] .section-title {
  background:linear-gradient(135deg,#0D1A2E,#1E3A5F);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.section-title .ai-glow {
  -webkit-text-fill-color:var(--violet);
  text-shadow:0 0 20px rgba(124,58,237,0.5); animation:ai-flicker 4s infinite;
}
/* Dark mode ai-glow stays cyan */
[data-theme="dark"] .section-title .ai-glow,
html:not([data-theme="light"]) .section-title .ai-glow {
  -webkit-text-fill-color:var(--cyan);
  text-shadow:0 0 30px var(--cyan);
}
/* Light mode: violet glow */
[data-theme="light"] .section-title .ai-glow {
  -webkit-text-fill-color:var(--violet);
  text-shadow:0 0 16px rgba(124,58,237,0.4);
}
.section-desc { font-size:1rem; color:var(--gray); line-height:1.7 }
.text-center { text-align:center }
.text-center .section-desc { margin:0 auto }

/* ── ANIMATIONS ── */
@keyframes ai-flicker {
  0%,95%,97%,100% { text-shadow:0 0 30px var(--cyan) }
  96%,98% { text-shadow:none }
}
@keyframes pulse-dot {
  0%,100% { box-shadow:0 0 4px var(--matrix) }
  50% { box-shadow:0 0 16px var(--matrix),0 0 32px var(--matrix) }
}
/* holo-border keyframe removed — replaced by card-border-pulse box-shadow animations */
@keyframes float {
  0%,100% { transform:translateY(0) }
  50% { transform:translateY(-8px) }
}
@keyframes pulse-ring {
  0% { transform:scale(1); opacity:1 }
  100% { transform:scale(1.6); opacity:0 }
}
@keyframes marquee { from { transform:translateX(0) } to { transform:translateX(-50%) } }
@keyframes slide-up { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:translateY(0) } }
@keyframes grid-shift { from { background-position:0 0 } to { background-position:0 40px } }
@keyframes blink { 0%,100% { opacity:1 } 50% { opacity:0 } }

/* ── REVEAL ON SCROLL ── */
.scan-reveal { opacity:0; transform:translateY(28px); transition:opacity 0.6s var(--ease),transform 0.6s var(--ease) }
.scan-reveal.delay-1 { transition-delay:0.1s }
.scan-reveal.delay-2 { transition-delay:0.2s }
.scan-reveal.delay-3 { transition-delay:0.3s }
.scan-reveal.delay-4 { transition-delay:0.4s }
.scan-reveal.visible { opacity:1; transform:translateY(0) }

/* ── CIRCUIT DIVIDER ── */
.circuit-divider {
  width:100%; height:1px;
  background:linear-gradient(90deg,transparent,var(--violet),var(--cyan),var(--violet),transparent);
  position:relative;
}
.circuit-divider::before {
  content:''; position:absolute; top:-3px; left:50%; transform:translateX(-50%);
  width:8px; height:8px; background:var(--cyan); border-radius:50%;
  box-shadow:0 0 12px var(--cyan); animation:pulse-dot 2s infinite;
}

/* ── AURORA BG ── */
.aurora-bg {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 50%,rgba(124,58,237,0.06),transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 30%,rgba(0,255,255,0.04),transparent 60%);
  animation:aurora-shift 18s ease-in-out infinite alternate;
}
@keyframes aurora-shift { 0% { opacity:0.6 } 100% { opacity:1 } }

/* ── BUTTONS ── */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 36px; border-radius:10px;
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  color:#fff; font-weight:700; font-size:0.95rem; border:none;
  transition:var(--t); position:relative; overflow:hidden;
  box-shadow:0 0 24px rgba(124,58,237,0.35);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,255,255,0.35) }
.btn-secondary {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 36px; border-radius:10px;
  background:transparent; color:var(--white);
  font-weight:600; font-size:0.95rem;
  border:1px solid var(--glass-border); transition:var(--t);
}
.btn-secondary:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(0,255,255,0.05); transform:translateY(-2px) }
.btn-sm { padding:9px 20px; font-size:0.82rem; border-radius:8px }

/* ── GLASS CARD ── */
.glass-card {
  background:var(--card-bg);
  border:1px solid var(--glass-border);
  border-radius:20px;
  transition:var(--t);
}
.glass-card:hover {
  border-color:rgba(124,58,237,0.55);
  box-shadow:
    0 0 0 1px rgba(124,58,237,0.4),
    0 20px 48px rgba(0,0,0,0.4),
    0 0 28px rgba(124,58,237,0.15);
}
[data-theme="light"] .glass-card:hover {
  box-shadow:
    0 0 0 1px rgba(124,58,237,0.45),
    0 12px 36px rgba(0,0,0,0.08),
    0 0 20px rgba(124,58,237,0.12);
}

/* ── HOLO CARD ──────────────────────────────────────────
   Animated border via box-shadow ONLY.
   NO ::before pseudo-element — that was the bleed source.
   box-shadow is painted OUTSIDE the element box so it can
   NEVER overlap or tint card content. Text is always safe.
──────────────────────────────────────────────────────── */
@keyframes card-border-pulse {
  0%,100% {
    border-color: rgba(124,58,237,0.75);
    box-shadow:
      0 0 0 2px rgba(124,58,237,0.5),
      0 0 22px rgba(124,58,237,0.25),
      0 22px 44px rgba(0,0,0,0.45);
  }
  50% {
    border-color: rgba(99,102,241,0.85);
    box-shadow:
      0 0 0 2px rgba(99,102,241,0.6),
      0 0 28px rgba(99,102,241,0.3),
      0 22px 44px rgba(0,0,0,0.45);
  }
}
@keyframes card-border-pulse-light {
  0%,100% {
    border-color: rgba(124,58,237,0.6);
    box-shadow:
      0 0 0 2px rgba(124,58,237,0.4),
      0 0 18px rgba(124,58,237,0.15),
      0 14px 36px rgba(0,0,0,0.08);
  }
  50% {
    border-color: rgba(99,102,241,0.7);
    box-shadow:
      0 0 0 2px rgba(99,102,241,0.5),
      0 0 22px rgba(99,102,241,0.2),
      0 14px 36px rgba(0,0,0,0.08);
  }
}
.holo-card { position:relative }
/* NO ::before — completely removed */
.holo-card:hover {
  animation: card-border-pulse 2.5s ease-in-out infinite;
  transform: perspective(1000px) rotateX(-1.5deg) rotateY(1.5deg) translateY(-5px);
}
[data-theme="light"] .holo-card:hover {
  animation: card-border-pulse-light 2.5s ease-in-out infinite;
  transform: perspective(1000px) rotateX(-1.5deg) rotateY(1.5deg) translateY(-5px);
}

/* ── TECH TAG ── */
.tech-tag {
  display:inline-block; padding:3px 10px; border-radius:4px;
  background:rgba(124,58,237,0.1); border:1px solid rgba(124,58,237,0.22);
  font-size:0.7rem; color:var(--violet-light); font-weight:600;
}
[data-theme="light"] .tech-tag {
  background:rgba(124,58,237,0.08); border-color:rgba(124,58,237,0.25); color:var(--violet);
}

/* ── STATS ── */
.stats-row { display:flex; gap:48px; flex-wrap:wrap }
.stat-item { text-align:center; flex:1; min-width:100px }
.stat-num {
  font-size:2.4rem; font-weight:900; display:block;
  background:linear-gradient(135deg,var(--cyan),var(--violet-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-label { font-size:0.75rem; color:var(--gray); margin-top:4px; font-weight:500 }

/* ── FOOTER ── */
footer {
  background:var(--navy); border-top:1px solid var(--glass-border);
  padding:72px 0 0; position:relative; overflow:hidden;
}
.footer-neural {
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0.25; pointer-events:none;
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px;
  padding-bottom:56px; position:relative; z-index:1;
}
.footer-brand p { color:var(--gray); font-size:0.875rem; line-height:1.7; max-width:260px; margin-top:10px }
.footer-col h5 {
  font-size:0.72rem; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--white); margin-bottom:18px;
}
.footer-col li { margin-bottom:10px }
.footer-col a { color:var(--gray); font-size:0.875rem; transition:var(--t) }
.footer-col a:hover { color:var(--cyan); padding-left:4px }
.footer-bottom {
  border-top:1px solid var(--glass-border); padding:22px 0;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px; position:relative; z-index:1;
}
.footer-bottom p { font-size:0.8rem; color:var(--gray) }
.footer-bottom span { color:var(--cyan) }
.binary-strip {
  font-size:0.55rem; color:rgba(0,255,65,0.12);
  font-family:'Courier New',monospace; overflow:hidden; white-space:nowrap;
  animation:marquee 25s linear infinite; padding:8px 0;
  position:relative; z-index:1;
}

/* ── SOCIAL LINKS ── */
.social-links { display:flex; gap:10px; flex-wrap:wrap }
.social-link {
  width:42px; height:42px; border-radius:10px;
  background:var(--glass); border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; transition:var(--t);
}
.social-link:hover { border-color:var(--cyan); background:rgba(0,255,255,0.08); transform:translateY(-2px) }

/* ── FLOATING WHATSAPP ── */
.whatsapp-float {
  position:fixed; bottom:28px; right:28px; z-index:900;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 30px rgba(37,211,102,0.4);
  animation:float 3.5s ease-in-out infinite; transition:transform 0.25s,box-shadow 0.25s;
  text-decoration:none;
}
.whatsapp-float:hover { transform:scale(1.12); box-shadow:0 12px 40px rgba(37,211,102,0.65) }
.whatsapp-float svg { width:28px; height:28px; flex-shrink:0 }
.wa-pulse-ring {
  position:absolute; inset:-8px; border-radius:50%;
  border:2px solid rgba(37,211,102,0.4); animation:pulse-ring 2s ease-out infinite;
}

/* ── SCROLL TO TOP ── */
#scroll-top-btn {
  position:fixed; bottom:96px; right:28px; z-index:899;
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 22px rgba(124,58,237,0.45);
  opacity:0; transform:translateY(14px) scale(0.8);
  transition:opacity 0.3s,transform 0.3s,box-shadow 0.25s;
  pointer-events:none;
}
#scroll-top-btn.stt-visible {
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
}
#scroll-top-btn:hover {
  transform:translateY(-3px) scale(1.1);
  box-shadow:0 8px 30px rgba(124,58,237,0.7);
}
#scroll-top-btn svg { width:20px; height:20px; color:#fff }
@media(max-width:768px){
  #scroll-top-btn { bottom:80px; right:14px; width:40px; height:40px }
  #scroll-top-btn svg { width:17px; height:17px }
}

/* ── MAPS SECTION ── */
.maps-iframe-wrap {
  border-radius:20px; overflow:hidden;
  border:1px solid rgba(124,58,237,0.22);
  box-shadow:0 20px 60px rgba(0,0,0,0.3); position:relative;
}
.maps-iframe-wrap iframe { display:block; width:100%; border:none }
.maps-iframe-wrap::after {
  content:''; position:absolute; inset:0; border-radius:20px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(124,58,237,0.12);
}
[data-theme="light"] .maps-iframe-wrap { border-color:rgba(124,58,237,0.14); box-shadow:0 8px 32px rgba(0,0,0,0.1) }

/* ── MOBILE CTA BAR ── */
.mobile-cta-bar {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:800;
  background:linear-gradient(135deg,var(--violet),var(--cyan)); padding:14px; text-align:center;
}
.mobile-cta-bar a { color:#fff; font-weight:700; font-size:0.9rem }

/* ── TOAST ── */
.toast {
  position:fixed; bottom:110px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  color:#fff; padding:14px 28px; border-radius:12px; font-weight:600;
  z-index:9999; font-size:0.9rem; box-shadow:0 8px 30px rgba(124,58,237,0.4);
  animation:slide-up 0.3s ease; white-space:nowrap;
}

/* ── DATA STREAM ── */
#data-stream {
  position:fixed; left:10px; top:50%; transform:translateY(-50%);
  width:38px; z-index:10; pointer-events:none;
  font-family:'Courier New',monospace; font-size:7.5px;
  color:rgba(0,255,65,0.18); line-height:1.9; overflow:hidden; height:55vh;
}

/* ── PARTICLE CANVAS ── */
#particle-canvas { position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0.35 }

/* ── HERO (HOME) ── */
#hero {
  position:relative; height:100vh; min-height:680px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
#neural-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0.65 }
.hero-content { position:relative; z-index:2; text-align:center; max-width:880px; padding:0 24px }
.status-badge {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(0,255,65,0.07); border:1px solid rgba(0,255,65,0.3);
  border-radius:100px; padding:7px 18px; margin-bottom:20px;
  font-size:0.7rem; font-weight:700; letter-spacing:0.18em; color:var(--matrix); text-transform:uppercase;
}
.status-dot { width:7px; height:7px; background:var(--matrix); border-radius:50%; animation:pulse-dot 1.5s infinite; box-shadow:0 0 8px var(--matrix) }
.available-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(124,58,237,0.09); border:1px solid rgba(124,58,237,0.28);
  border-radius:100px; padding:6px 16px; margin-bottom:14px;
  font-size:0.72rem; color:var(--violet-light); font-weight:500;
}
.hero-title {
  font-size:clamp(2.4rem,7vw,5.2rem); font-weight:900; line-height:1.1; margin-bottom:18px;
  background:linear-gradient(135deg,var(--white) 0%,rgba(240,244,255,0.8) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub { font-size:clamp(0.95rem,2.2vw,1.3rem); color:var(--gray); margin-bottom:10px; font-weight:400; letter-spacing:0.04em }
.hero-sub .ai-glow { color:var(--cyan); text-shadow:0 0 20px var(--cyan); animation:ai-flicker 3s infinite; font-weight:600 }
.typing-line { font-size:clamp(0.95rem,1.8vw,1.15rem); color:var(--cyan); margin-bottom:36px; min-height:1.5em; font-weight:500 }
.typing-cursor { display:inline-block; width:2px; height:1.1em; background:var(--cyan); margin-left:2px; animation:blink 0.7s infinite; vertical-align:text-bottom }
.thinking-dots { display:inline-flex; gap:4px; margin-left:6px; vertical-align:middle }
.thinking-dots span { width:4px; height:4px; background:var(--cyan); border-radius:50%; animation:think 1.4s infinite }
.thinking-dots span:nth-child(2) { animation-delay:0.2s }
.thinking-dots span:nth-child(3) { animation-delay:0.4s }
@keyframes think { 0%,80%,100% { transform:scale(0.5); opacity:0.3 } 40% { transform:scale(1); opacity:1 } }
.hero-ctas { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:36px }
.hero-grid-floor {
  position:absolute; bottom:0; left:0; right:0; height:180px;
  background:linear-gradient(transparent,rgba(0,255,255,0.02));
  overflow:hidden; pointer-events:none;
}
.hero-grid-floor::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(0,255,255,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,255,0.06) 1px,transparent 1px);
  background-size:40px 40px;
  transform:rotateX(70deg) translateZ(-60px) scaleY(3); transform-origin:bottom;
  animation:grid-shift 12s linear infinite;
}

/* ── SERVICES GRID ── */
.services-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:22px; margin-top:56px; position:relative; z-index:1 }
.service-card {
  padding:32px 26px; border-radius:20px; position:relative; overflow:hidden;
  transition:var(--t);
  /* Solid bg — immune to any gradient bleed-through */
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
}
/* box-shadow border only — zero content bleed possible */
.service-card:hover {
  animation: card-border-pulse 2.5s ease-in-out infinite;
  transform: perspective(800px) rotateX(-1deg) rotateY(1deg) translateY(-4px);
}
[data-theme="light"] .service-card:hover {
  animation: card-border-pulse-light 2.5s ease-in-out infinite;
  transform: perspective(800px) rotateX(-1deg) rotateY(1deg) translateY(-4px);
}
/* Circuit bg: violet-only, very faint — no bright cyan lines */
.service-card .circuit-bg {
  position:absolute; inset:0; opacity:0; transition:opacity 0.5s; z-index:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M8 40h24m0-16v32m16-16h24m-24-8v16' stroke='%237C3AED' stroke-width='0.5' fill='none' opacity='0.1'/%3E%3Ccircle cx='32' cy='40' r='2' fill='%237C3AED' opacity='0.12'/%3E%3Ccircle cx='56' cy='40' r='2' fill='%234F46E5' opacity='0.12'/%3E%3C/svg%3E");
}
[data-theme="light"] .service-card .circuit-bg {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M8 40h24m0-16v32m16-16h24m-24-8v16' stroke='%237C3AED' stroke-width='0.5' fill='none' opacity='0.08'/%3E%3Ccircle cx='32' cy='40' r='2' fill='%237C3AED' opacity='0.1'/%3E%3Ccircle cx='56' cy='40' r='2' fill='%234F46E5' opacity='0.1'/%3E%3C/svg%3E");
}
.service-card:hover .circuit-bg { opacity:1 }
/* All text & content sits above the circuit bg */
.service-card > *:not(.circuit-bg) { position:relative; z-index:1 }
.service-icon {
  width:52px; height:52px; border-radius:14px;
  background:rgba(124,58,237,0.15);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; margin-bottom:18px; border:1px solid rgba(124,58,237,0.2);
  transition:var(--t);
}
[data-theme="light"] .service-icon {
  background:rgba(124,58,237,0.1); border-color:rgba(124,58,237,0.25);
}
.service-card:hover .service-icon {
  background:rgba(124,58,237,0.22); border-color:rgba(124,58,237,0.4);
}
.service-card h3 { font-size:1.05rem; font-weight:700; margin-bottom:9px; color:var(--white) }
[data-theme="light"] .service-card h3 { color:var(--white) }
.service-card p { font-size:0.85rem; color:var(--gray); line-height:1.6 }
.service-link { display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:0.8rem; font-weight:600; color:var(--violet-light); transition:var(--t) }
[data-theme="light"] .service-link { color:var(--violet) }
.service-link:hover { gap:12px; color:var(--violet-light) }

/* ── PORTFOLIO ── */
.filter-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px }
.filter-tab {
  padding:7px 18px; border-radius:100px;
  background:transparent; color:var(--gray);
  border:1px solid var(--glass-border); font-size:0.82rem; font-weight:500; transition:var(--t);
}
.filter-tab.active,.filter-tab:hover {
  background:linear-gradient(135deg,var(--violet),var(--cyan)); color:#fff; border-color:transparent;
}
.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px }
.portfolio-card {
  border-radius:20px; overflow:hidden; transition:var(--t);
  background:var(--card-bg); border:1px solid var(--glass-border);
}
.portfolio-card:hover {
  animation: card-border-pulse 2.5s ease-in-out infinite;
  transform: perspective(1000px) rotateX(-1.5deg) translateY(-6px);
}
[data-theme="light"] .portfolio-card:hover {
  animation: card-border-pulse-light 2.5s ease-in-out infinite;
  transform: perspective(1000px) rotateX(-1.5deg) translateY(-6px);
}
.portfolio-img {
  height:190px;
  background:linear-gradient(135deg,rgba(124,58,237,0.15),rgba(79,70,229,0.1));
  display:flex; align-items:center; justify-content:center; font-size:3rem;
  position:relative; overflow:hidden; border-bottom:1px solid var(--glass-border);
}
[data-theme="light"] .portfolio-img {
  background:linear-gradient(135deg,rgba(124,58,237,0.08),rgba(79,70,229,0.05));
  border-bottom-color:rgba(124,58,237,0.15);
}
.portfolio-img img { width:100%; height:100%; object-fit:cover }
.portfolio-body { padding:22px }
.portfolio-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px }
.portfolio-card h4 { font-size:0.98rem; font-weight:700; margin-bottom:6px; color:var(--white) }
.portfolio-card p { font-size:0.83rem; color:var(--gray); line-height:1.5; margin-bottom:14px }
.btn-view {
  display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:8px;
  background:rgba(124,58,237,0.14); border:1px solid rgba(124,58,237,0.28);
  color:var(--violet-light); font-size:0.78rem; font-weight:600; transition:var(--t);
}
[data-theme="light"] .btn-view { color:var(--violet); border-color:rgba(124,58,237,0.35) }
.btn-view:hover { background:var(--violet); color:#fff; border-color:var(--violet) }

/* ── TECH MARQUEE ── */
.marquee-wrap {
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
}
.marquee-track { display:flex; gap:20px; width:max-content; animation:marquee 32s linear infinite }
.marquee-track:hover { animation-play-state:paused }
.tech-item {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:18px 26px; border-radius:14px;
  background:var(--card-bg); border:1px solid var(--glass-border);
  backdrop-filter:blur(10px); transition:var(--t); min-width:90px;
}
.tech-item:hover { border-color:var(--cyan); box-shadow:0 0 24px rgba(0,255,255,0.12); transform:translateY(-4px) }
.tech-icon { font-size:1.7rem }
.tech-name { font-size:0.72rem; font-weight:600; color:var(--gray) }

/* ── TESTIMONIALS ── */
.testimonials-track { display:flex; gap:22px; transition:transform 0.5s var(--ease) }
.testimonial-card {
  flex:0 0 calc(33.333% - 15px); padding:32px; border-radius:20px;
  position:relative; overflow:hidden;
  background:var(--card-bg); border:1px solid var(--glass-border);
}
.testimonial-card:hover {
  animation: card-border-pulse 2.5s ease-in-out infinite;
}
[data-theme="light"] .testimonial-card:hover {
  animation: card-border-pulse-light 2.5s ease-in-out infinite;
}
.quote-icon { font-size:2.2rem; color:var(--violet); opacity:0.5; line-height:1; margin-bottom:14px }
/* Testimonial text must stay visible in light mode */
.testimonial-text { font-size:0.9rem; color:var(--white); line-height:1.75; margin-bottom:22px; font-style:italic }
[data-theme="light"] .testimonial-text { color:var(--white) }
.testimonial-author { display:flex; align-items:center; gap:12px }
.author-avatar {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,var(--violet),#4F46E5);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; border:2px solid rgba(124,58,237,0.3); flex-shrink:0;
}
.author-name { font-size:0.88rem; font-weight:700 }
.author-biz { font-size:0.72rem; color:var(--gray) }
.carousel-dots { display:flex; justify-content:center; gap:8px; margin-top:28px }
.carousel-dot { width:6px; height:6px; border-radius:50%; background:var(--gray); border:none; transition:var(--t) }
.carousel-dot.active { background:var(--violet-light); width:20px; border-radius:3px }

/* ── CONTACT FORM ── */
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:56px; position:relative; z-index:1 }
.contact-item {
  display:flex; align-items:center; gap:14px; padding:14px;
  border-radius:12px; background:var(--glass); border:1px solid var(--glass-border);
  margin-bottom:10px; transition:var(--t);
}
.contact-item:hover { border-color:rgba(124,58,237,0.5); transform:translateX(4px); background:rgba(124,58,237,0.06) }
[data-theme="light"] .contact-item:hover { border-color:rgba(124,58,237,0.45); background:rgba(124,58,237,0.04) }
.contact-icon { width:38px; height:38px; border-radius:9px; background:rgba(124,58,237,0.12); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0 }
[data-theme="light"] .contact-icon { background:rgba(124,58,237,0.1) }
.contact-label { font-size:0.68rem; color:var(--gray); text-transform:uppercase; letter-spacing:0.1em }
.contact-value { font-size:0.88rem; font-weight:600 }
.btn-whatsapp {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius:11px;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff; font-weight:700; font-size:0.9rem; border:none; margin-top:22px; transition:var(--t);
}
.btn-whatsapp:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(37,211,102,0.4) }
.form-group { margin-bottom:14px }
.form-label { display:block; font-size:0.7rem; font-weight:700; color:var(--gray); margin-bottom:7px; text-transform:uppercase; letter-spacing:0.08em }
.form-input,.form-select,.form-textarea {
  width:100%; padding:13px 16px; border-radius:9px;
  background:rgba(255,255,255,0.04); border:1px solid var(--glass-border);
  color:var(--white); font-size:0.88rem; font-family:var(--font); outline:none; transition:var(--t);
}
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
  background:rgba(255,255,255,0.9); border-color:rgba(124,58,237,0.25);
  color:#0D1A2E;
}
.form-input:focus,.form-select:focus,.form-textarea:focus {
  border-color:var(--cyan); box-shadow:0 0 18px rgba(0,255,255,0.1);
}
.form-select { appearance:none; cursor:pointer }
.form-select option { background:var(--navy-2); color:var(--white) }
.form-textarea { resize:vertical; min-height:110px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.btn-submit {
  width:100%; padding:15px; border-radius:11px;
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  color:#fff; font-weight:700; font-size:0.95rem; border:none; transition:var(--t);
}
.btn-submit:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(124,58,237,0.4) }
.btn-submit.success { background:linear-gradient(135deg,#25D366,#128C7E) }

/* ── SKILLS PILLS ── */
.skill-pill {
  padding:6px 15px; border-radius:100px;
  background:rgba(124,58,237,0.08); border:1px solid rgba(124,58,237,0.22);
  font-size:0.78rem; font-weight:500; color:var(--white);
  transition:var(--t); position:relative; overflow:hidden;
  display:inline-block;
}
[data-theme="light"] .skill-pill {
  background:rgba(124,58,237,0.07); border-color:rgba(124,58,237,0.2); color:var(--white);
}
.skill-pill::before {
  content:''; position:absolute; top:0; left:-100%; right:100%; bottom:0;
  /* Violet shimmer instead of cyan — doesn't overpower text */
  background:linear-gradient(90deg,transparent,rgba(124,58,237,0.25),transparent);
  animation:skill-pulse 3.5s linear infinite;
}
[data-theme="light"] .skill-pill::before {
  background:linear-gradient(90deg,transparent,rgba(124,58,237,0.15),transparent);
}
@keyframes skill-pulse { to { left:100%; right:-100% } }
.skill-pill:hover { border-color:rgba(124,58,237,0.6); color:var(--violet-light); transform:translateY(-2px) }
[data-theme="light"] .skill-pill:hover { color:var(--violet); border-color:var(--violet) }
.skills-wrap { display:flex; flex-wrap:wrap; gap:9px; margin:20px 0 }

/* ── AVATAR RING ── */
.avatar-ring {
  width:200px; height:200px; border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--cyan)); padding:3px;
  animation:ring-rotate 8s linear infinite;
}
@keyframes ring-rotate {
  from { background:linear-gradient(0deg,var(--violet),var(--cyan)) }
  to { background:linear-gradient(360deg,var(--violet),var(--cyan)) }
}
.avatar-inner {
  width:100%; height:100%; border-radius:50%;
  background:var(--navy-2); display:flex; align-items:center; justify-content:center;
  font-size:4.5rem; overflow:hidden;
}
.avatar-inner img { width:100%; height:100%; object-fit:cover }
.avatar-glow {
  position:absolute; inset:-30px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,255,0.12),transparent 70%);
  pointer-events:none; animation:pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow { 0%,100% { opacity:0.4 } 50% { opacity:1 } }

/* ── PRICING ── */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.pricing-card {
  border-radius:16px; padding:30px 22px; background:rgba(0,0,0,0.3);
  border:1px solid var(--glass-border); text-align:center; position:relative; transition:var(--t);
}
.pricing-card.popular { border-color:var(--violet); background:rgba(124,58,237,0.1) }
.pricing-card:hover { transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,0.3) }
.popular-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  color:#fff; font-size:0.68rem; font-weight:700; padding:4px 14px; border-radius:100px; white-space:nowrap;
}
.pricing-card h4 { font-size:0.98rem; font-weight:700; margin-bottom:8px }
.pricing-price {
  font-size:2rem; font-weight:900; margin:12px 0;
  background:linear-gradient(135deg,var(--cyan),var(--violet-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.pricing-price span { font-size:0.88rem; font-weight:400; color:var(--gray); -webkit-text-fill-color:var(--gray) }
.pricing-features { text-align:left; margin:14px 0 }
.pricing-features li { font-size:0.78rem; color:var(--gray); padding:5px 0; display:flex; align-items:center; gap:8px }
.pricing-features li::before { content:'✓'; color:var(--cyan); font-weight:700; flex-shrink:0 }

/* ── PRODUCT HERO CARD ── */
/* ── PRODUCT HERO CARD ──
   Animated border via box-shadow — no ::before, no bleed.
   The 2px violet border + layered box-shadow creates a premium
   glowing frame without touching the card's content area.
────────────────────────────────────────────────────────── */
@keyframes product-card-glow {
  0%,100% {
    border-color: rgba(124,58,237,0.8);
    box-shadow:
      0 0 0 1px rgba(124,58,237,0.5),
      0 0 32px rgba(124,58,237,0.25),
      0 32px 64px rgba(0,0,0,0.5);
  }
  50% {
    border-color: rgba(99,102,241,0.9);
    box-shadow:
      0 0 0 1px rgba(99,102,241,0.6),
      0 0 40px rgba(99,102,241,0.3),
      0 32px 64px rgba(0,0,0,0.5);
  }
}
@keyframes product-card-glow-light {
  0%,100% {
    border-color: rgba(124,58,237,0.6);
    box-shadow:
      0 0 0 1px rgba(124,58,237,0.35),
      0 0 24px rgba(124,58,237,0.15),
      0 20px 48px rgba(0,0,0,0.08);
  }
  50% {
    border-color: rgba(99,102,241,0.7);
    box-shadow:
      0 0 0 1px rgba(99,102,241,0.45),
      0 0 30px rgba(99,102,241,0.2),
      0 20px 48px rgba(0,0,0,0.08);
  }
}
.product-hero-card {
  border-radius:24px; padding:56px; position:relative; overflow:hidden;
  background:var(--card-bg);
  border:2px solid rgba(124,58,237,0.55);
  animation: product-card-glow 4s ease-in-out infinite;
}
[data-theme="light"] .product-hero-card {
  background:var(--card-bg);
  animation: product-card-glow-light 4s ease-in-out infinite;
}
.product-badge-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px }
.product-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(124,58,237,0.14); border:1px solid rgba(124,58,237,0.35);
  border-radius:100px; padding:5px 14px;
  font-size:0.68rem; font-weight:700; letter-spacing:0.15em; color:var(--violet-light); text-transform:uppercase;
}
.audience-tag {
  font-size:0.72rem; color:var(--gray); background:rgba(0,0,0,0.3); padding:4px 10px; border-radius:4px;
}

/* ── SCREENSHOTS / MEDIA GALLERY ── */
.media-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-top:32px }
.media-item {
  border-radius:14px; overflow:hidden; aspect-ratio:16/10;
  background:linear-gradient(135deg,rgba(124,58,237,0.15),rgba(0,255,255,0.1));
  border:1px solid var(--glass-border); cursor:pointer; transition:var(--t);
  display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; position:relative;
}
.media-item img { width:100%; height:100%; object-fit:cover }
.media-item:hover { transform:scale(1.02); border-color:var(--cyan); box-shadow:0 12px 40px rgba(0,0,0,0.4) }
.media-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px }
.media-placeholder p { font-size:0.75rem; color:var(--gray); text-align:center; padding:0 16px }

/* ── VIDEO EMBED ── */
.video-wrap {
  border-radius:16px; overflow:hidden; aspect-ratio:16/9;
  background:rgba(0,0,0,0.5); border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.video-wrap iframe { width:100%; height:100%; border:none }
.video-placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; color:var(--gray); text-align:center; padding:32px;
}
.video-placeholder .play-btn {
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; cursor:pointer; transition:var(--t);
}
.video-placeholder .play-btn:hover { transform:scale(1.1); box-shadow:0 0 30px rgba(0,255,255,0.4) }

/* ── FAQ ── */
.faq-item {
  border-bottom:1px solid var(--glass-border); padding:20px 0; cursor:pointer;
}
.faq-q { display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:0.95rem }
.faq-q::after { content:'+'; color:var(--cyan); font-size:1.2rem; transition:transform 0.3s }
.faq-item.open .faq-q::after { transform:rotate(45deg) }
.faq-a { font-size:0.875rem; color:var(--gray); line-height:1.7; max-height:0; overflow:hidden; transition:max-height 0.4s ease, padding 0.3s }
.faq-item.open .faq-a { max-height:200px; padding-top:12px }

/* ── FEATURE HIGHLIGHT ── */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px }
.feature-item {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:10px;
  background:rgba(0,255,255,0.04); border:1px solid rgba(0,255,255,0.1);
  font-size:0.84rem; color:var(--white); transition:var(--t);
}
.feature-item:hover { border-color:var(--cyan); background:rgba(0,255,255,0.08) }
.feature-icon { font-size:1.1rem; flex-shrink:0 }

/* ── LIGHTBOX ── */
#lightbox {
  position:fixed; inset:0; z-index:9990; background:rgba(0,0,0,0.92);
  display:none; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(8px);
}
#lightbox.open { display:flex }
#lightbox img { max-width:90vw; max-height:90vh; border-radius:12px; object-fit:contain }
#lightbox-close {
  position:absolute; top:20px; right:28px; font-size:2rem; color:#fff;
  background:none; border:none; cursor:pointer; transition:var(--t);
}
#lightbox-close:hover { color:var(--cyan); transform:rotate(90deg) }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:40px }
  .contact-grid { grid-template-columns:1fr; gap:40px }
  .pricing-grid { grid-template-columns:1fr }
  .testimonial-card { flex:0 0 calc(50% - 11px) }
}
@media(max-width:768px) {
  nav#navbar { padding:14px 20px }
  .nav-links { display:none }
  .hamburger { display:flex }
  .nav-actions .btn-icon:not(.sound-toggle) { display:none }
  section { padding:70px 0 }
  .container { padding:0 20px }
  .product-hero-card { padding:32px 22px }
  .form-row { grid-template-columns:1fr }
  .mobile-cta-bar { display:block }
  body { padding-bottom:52px }
  .testimonial-card { flex:0 0 100% }
  .footer-grid { grid-template-columns:1fr }
  #data-stream { display:none }
  .stats-row { justify-content:center }
  .hero-title { font-size:clamp(2rem,8vw,3rem) }
  .media-gallery { grid-template-columns:1fr 1fr }
}
@media(max-width:480px) {
  .hero-ctas { flex-direction:column; align-items:center }
  .btn-primary,.btn-secondary { width:100%; justify-content:center }
  .media-gallery { grid-template-columns:1fr }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important }
}

/* ── ABOUT GRIDS — responsive gaps & stacking ── */
@media(max-width:900px) {
  .about-grid-home { grid-template-columns: 1fr !important; gap: 40px !important }
  .about-main-grid { grid-template-columns: 1fr !important; gap: 40px !important }
}
@media(max-width:768px) {
  .about-grid-home { gap: 28px !important }
  .about-main-grid { gap: 20px !important }
  .solar-grid { gap: 0 !important }
}

/* ── PRODUCT HERO GRID — mobile stack ── */
.product-hero-grid { min-width: 0 }
.product-hero-grid > * { min-width: 0 }
@media(max-width:860px) {
  .product-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important }
}
@media(max-width:480px) {
  .product-hero-grid { gap: 24px !important }
}

/* ── GLASS CARD — reduce padding on mobile ── */
@media(max-width:768px) {
  .glass-card[style*="padding:56px"],
  .glass-card[style*="padding:52px"] { padding: 28px 20px !important }
}
@media(max-width:480px) {
  .glass-card[style*="padding:56px"],
  .glass-card[style*="padding:52px"] { padding: 22px 16px !important }
}

/* ── ABOUT CONTENT — prevent word overflow on desktop ── */
.about-main-grid > * { overflow-wrap: break-word; word-break: break-word }

/* ── EXTRA SMALL SCREENS (≤ 400px) ── */
@media(max-width:400px) {
  .container { padding: 0 14px }
  section { padding: 56px 0 }
  .page-hero { padding: 130px 0 56px }
  .btn-primary, .btn-secondary { padding: 12px 22px; font-size: 0.88rem }
  .product-hero-card { padding: 22px 14px }
  .footer-grid { gap: 24px }
  nav#navbar { padding: 12px 14px }
  nav#navbar.scrolled { padding: 8px 14px }
  .hero-service-badges { bottom: 44px; padding: 0 10px }
  .hsb { font-size: 0.6rem; padding: 4px 9px }
}

/* ══════════════════════════════════════════════
   LIGHT THEME — COMPREHENSIVE OVERRIDES
   All elements that need dark-on-light treatment
══════════════════════════════════════════════ */

/* Navbar */
[data-theme="light"] nav#navbar {
  background:rgba(240,244,255,0.92);
  border-bottom-color:rgba(124,58,237,0.18);
}
[data-theme="light"] nav#navbar.scrolled {
  background:rgba(240,244,255,0.97);
}
[data-theme="light"] .nav-links a { color:#4A5568 }
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active { color:var(--violet) }
[data-theme="light"] .nav-links a::after { background:var(--violet) }
[data-theme="light"] .btn-icon { color:#0D1A2E; border-color:rgba(124,58,237,0.2) }
[data-theme="light"] .btn-icon:hover { border-color:var(--violet); color:var(--violet) }
[data-theme="light"] #mobile-menu { background:rgba(240,244,255,0.99) }
[data-theme="light"] #mobile-menu a { color:#0D1A2E; border-bottom-color:rgba(124,58,237,0.15) }

/* Page hero */
[data-theme="light"] .page-hero {
  background:linear-gradient(135deg,var(--navy-2),var(--navy-3));
}
[data-theme="light"] .page-hero p { color:#4A5568 }

/* Section descriptions */
[data-theme="light"] .section-desc { color:#4A5568 }

/* Cards — solid white bg in light mode, dark text */
[data-theme="light"] .glass-card { background:#FFFFFF; border-color:rgba(124,58,237,0.18) }
[data-theme="light"] .glass-card h3,
[data-theme="light"] .glass-card h4 { color:#0D1A2E }
[data-theme="light"] .glass-card p { color:#4A5568 }

/* Service cards — white bg, dark text */
[data-theme="light"] .service-card { background:#FFFFFF; border-color:rgba(124,58,237,0.18) }
[data-theme="light"] .service-card h3 { color:#0D1A2E !important }
[data-theme="light"] .service-card p { color:#4A5568 !important }

/* Portfolio card */
[data-theme="light"] .portfolio-card { background:#FFFFFF; border-color:rgba(124,58,237,0.18) }
[data-theme="light"] .portfolio-card h4 { color:#0D1A2E }
[data-theme="light"] .portfolio-card p { color:#4A5568 }
[data-theme="light"] .portfolio-body { background:#FFFFFF }

/* Testimonial cards */
[data-theme="light"] .testimonial-card { background:#FFFFFF; border-color:rgba(124,58,237,0.18) }

/* Stat numbers */
[data-theme="light"] .stat-num {
  background:linear-gradient(135deg,var(--violet),#4F46E5);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
[data-theme="light"] .stat-label { color:#4A5568 }

/* Feature items */
[data-theme="light"] .feature-item {
  background:rgba(124,58,237,0.04); border-color:rgba(124,58,237,0.15); color:#0D1A2E;
}
[data-theme="light"] .feature-item:hover { border-color:rgba(124,58,237,0.4); background:rgba(124,58,237,0.07) }

/* Circuit divider in light */
[data-theme="light"] .circuit-divider {
  background:linear-gradient(90deg,transparent,rgba(124,58,237,0.4),rgba(79,70,229,0.5),rgba(124,58,237,0.4),transparent);
}
[data-theme="light"] .circuit-divider::before {
  background:var(--violet); box-shadow:0 0 10px rgba(124,58,237,0.5);
}

/* Marquee tech items */
[data-theme="light"] .tech-item { background:rgba(255,255,255,0.9) }
[data-theme="light"] .tech-item:hover { border-color:var(--violet); box-shadow:0 0 20px rgba(124,58,237,0.12) }
[data-theme="light"] .tech-name { color:#4A5568 }

/* Pricing cards */
[data-theme="light"] .pricing-card { background:rgba(255,255,255,0.9); border-color:rgba(124,58,237,0.2) }
[data-theme="light"] .pricing-card h4 { color:#0D1A2E }
[data-theme="light"] .pricing-features li { color:#4A5568 }
[data-theme="light"] .pricing-features li::before { color:var(--violet) }
[data-theme="light"] .pricing-card.popular { background:rgba(124,58,237,0.07); border-color:var(--violet) }

/* FAQ */
[data-theme="light"] .faq-item { border-bottom-color:rgba(124,58,237,0.15) }
[data-theme="light"] .faq-q { color:#0D1A2E }
[data-theme="light"] .faq-q::after { color:var(--violet) }
[data-theme="light"] .faq-a { color:#4A5568 }

/* Hero stats */
[data-theme="light"] .hero-stat-pill {
  background:rgba(124,58,237,0.08); border-color:rgba(124,58,237,0.25); color:var(--violet);
}

/* Social links */
[data-theme="light"] .social-link { background:rgba(255,255,255,0.8); border-color:rgba(124,58,237,0.2) }
[data-theme="light"] .social-link:hover { border-color:var(--violet); background:rgba(124,58,237,0.08) }

/* Footer */
[data-theme="light"] footer {
  background:var(--navy-2); border-top-color:rgba(124,58,237,0.18);
}
[data-theme="light"] .footer-brand p,
[data-theme="light"] .footer-col a,
[data-theme="light"] .footer-bottom p { color:#4A5568 }
[data-theme="light"] .footer-col h5 { color:#0D1A2E }
[data-theme="light"] .footer-col a:hover { color:var(--violet) }
[data-theme="light"] .binary-strip { color:rgba(124,58,237,0.15) }

/* Typing cursor in light */
[data-theme="light"] .typing-cursor { background:var(--violet) }
[data-theme="light"] .typing-line { color:var(--violet) }
[data-theme="light"] .thinking-dots span { background:var(--violet) }

/* Hero sub text in light */
[data-theme="light"] .hero-sub { color:#4A5568 }
[data-theme="light"] .hero-title {
  background:linear-gradient(135deg,#0D1A2E,#1E3A5F);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
[data-theme="light"] .hero-sub .ai-glow {
  color:var(--violet); text-shadow:0 0 16px rgba(124,58,237,0.4); -webkit-text-fill-color:var(--violet);
}

/* Status badges in light */
[data-theme="light"] .available-badge { background:rgba(124,58,237,0.08); border-color:rgba(124,58,237,0.25); color:var(--violet) }
[data-theme="light"] .status-badge { background:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.1); color:#2D7D46 }
[data-theme="light"] .status-dot { background:#2D7D46; box-shadow:0 0 6px #2D7D46 }

/* Hero grid floor in light */
[data-theme="light"] .hero-grid-floor::before {
  background-image:
    linear-gradient(rgba(124,58,237,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,58,237,0.05) 1px,transparent 1px);
}

/* Filter tabs in light */
[data-theme="light"] .filter-tab { color:#4A5568; border-color:rgba(124,58,237,0.2) }
[data-theme="light"] .filter-tab.active,
[data-theme="light"] .filter-tab:hover { color:#fff }

/* Quote icon */
[data-theme="light"] .quote-icon { color:var(--violet) }

/* Contact items */
[data-theme="light"] .contact-value { color:#0D1A2E }
[data-theme="light"] .contact-label { color:#64748B }

/* Scroll progress bar */
[data-theme="light"] #scroll-progress {
  background:linear-gradient(90deg,var(--violet),#4F46E5,var(--violet));
  box-shadow:0 0 6px rgba(124,58,237,0.5);
}

/* Aurora bg in light */
[data-theme="light"] .aurora-bg {
  background:
    radial-gradient(ellipse 80% 50% at 20% 50%,rgba(124,58,237,0.04),transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 30%,rgba(79,70,229,0.03),transparent 60%);
}

/* Product badges */
[data-theme="light"] .product-badge { color:var(--violet) }

/* Audience tags */
[data-theme="light"] .audience-tag { background:rgba(124,58,237,0.07); color:#4A5568 }