:root{
  --bg:#08060b;
  --card:#0f0b14;
  --muted:#9aa0b0;
  --accent1:#8b5cf6;
  --accent2:#7efcff;
  --neon-shadow: 0 0 24px rgba(139,92,246,0.16), 0 0 60px rgba(126,252,255,0.06);
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;background:
  radial-gradient(1200px 600px at 10% 10%, rgba(123,35,255,0.06), transparent),
  radial-gradient(900px 500px at 90% 90%, rgba(18,230,230,0.03), transparent),
  var(--bg);color:#dfe6f2}
a{color:inherit}
.main-nav{position:sticky;top:0;background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.12));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.02);z-index:40}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 18px}
.brand{font-weight:800;color:var(--accent2);letter-spacing:0.6px}
.nav-links{display:flex;gap:14px;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:8px}
.nav-links a:hover{color:#fff;box-shadow:var(--neon-shadow)}
#floating-contacts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:999}
#floating-contacts a{width:52px;height:52px;border-radius:999px;background:linear-gradient(180deg,#0f0b14,#1a1126);display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;box-shadow:0 10px 40px rgba(0,0,0,0.6);border:1px solid rgba(139,92,246,0.12)}
#floating-contacts a:active{transform:translateY(2px)}
.container{max-width:1200px;margin:0 auto;padding:28px 20px}
.hero{padding:54px 10px 28px; position:relative; overflow:visible}
.hero-inner{display:flex;gap:22px;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto}
.hero-text{flex:1;min-width:260px}
.hero h1{font-size:36px;line-height:1;margin:0 0 8px}
.glow{background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 14px rgba(139,92,246,0.12)}
.sub{color:var(--muted);margin:0 0 14px}
.hero-ctas{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:none;cursor:pointer;font-weight:600;transition:transform .12s ease,box-shadow .14s}
.btn.primary{background:linear-gradient(90deg,var(--accent2),var(--accent1));color:#081018;box-shadow:0 8px 30px rgba(139,92,246,0.12)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
.btn.small{padding:6px 10px;font-size:14px}
.btn.primary:active, .btn.primary.clicked { transform:translateY(2px) scale(0.995); box-shadow:0 14px 60px rgba(139,92,246,0.22), 0 0 18px rgba(126,252,255,0.08); animation: neonPulse .9s ease; }
@keyframes neonPulse { 0%{ box-shadow:0 8px 30px rgba(139,92,246,0.12) } 50%{ box-shadow:0 24px 80px rgba(139,92,246,0.26) } 100%{ box-shadow:0 8px 30px rgba(139,92,246,0.12) } }
.robot-wrap{width:220px;height:220px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.robot{width:200px;height:200px;overflow:visible}
.robot .eye{fill:#9beaf9;filter:drop-shadow(0 0 8px rgba(126,252,255,0.25));transform-origin:center;animation:eyeBlink 4s infinite}
@keyframes eyeBlink {0%,95%,100%{transform:scaleY(1)}96%,98%{transform:scaleY(0.12)}}
.section-title{font-size:22px;margin-bottom:6px}
.section-sub{color:var(--muted);margin-bottom:18px}
.filters{display:flex;gap:10px;align-items:center;margin:18px 0 10px}
.filters .filter{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:8px 14px;border-radius:999px;cursor:pointer;backdrop-filter:blur(4px)}
.filters .filter.active{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#09060a;box-shadow:0 6px 30px rgba(139,92,246,0.12);border:none}
#search{margin-left:auto;padding:8px 12px;border-radius:10px;background:#0c0a11;border:1px solid rgba(255,255,255,0.03);color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:12px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.03);box-shadow:0 10px 40px rgba(139,92,246,0.06);transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-8px);box-shadow:var(--neon-shadow)}
.card img{width:100%;height:160px;object-fit:cover;display:block;background:#06040a}
.card-body{padding:12px}
.card h4{margin:0 0 6px;font-size:15px}
.card p{margin:0 0 8px;color:var(--muted);font-size:13px}
.card .price{font-weight:700}
.card .card-actions{display:flex;gap:8px;margin-top:10px;align-items:center}
.cart-drawer{position:fixed;right:-420px;top:0;height:100%;width:360px;background:linear-gradient(180deg,#0c0812,#140a22);box-shadow:-20px 0 60px rgba(0,0,0,0.6);transition:right .28s;z-index:1000;display:flex;flex-direction:column}
.cart-drawer.open{right:0}
.cart-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid rgba(255,255,255,0.03)}
.cart-items{padding:12px;overflow:auto;flex:1}
.cart-item{display:flex;gap:10px;padding:10px;border-radius:8px;margin-bottom:10px;background:rgba(255,255,255,0.01);align-items:center}
.cart-item img{width:64px;height:48px;object-fit:cover;border-radius:6px}
.cart-footer{padding:12px;border-top:1px solid rgba(255,255,255,0.03)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.service{background:rgba(255,255,255,0.02);padding:12px;border-radius:10px}
.service img{width:100%;height:150px;object-fit:cover;border-radius:8px}
footer.site-footer{padding:18px 20px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,0.02)}
@media (max-width:900px){
  .hero-inner{flex-direction:column-reverse;gap:18px}
  .robot-wrap{width:160px;height:160px}
  .robot{width:140px;height:160px}
  .cart-drawer{width:100%;max-width:420px}
  .two-col{grid-template-columns:1fr}
}
/* =========================
   THEMES: light | dark | neon
   ========================= */

/* Base color variables (used by default) */
:root{
  --bg-main: #08060b;
  --card-bg: #0f0b14;
  --muted: #9aa0b0;
  --text: #dfe6f2;
  --accent1: #8b5cf6;
  --accent2: #7efcff;
  --accent-strong: #8b5cf6;
  --glass: rgba(255, 255, 255, 0.04);
  --brand-neon: linear-gradient(90deg, var(--accent1), var(--accent2));
}

/* Smooth transitions for theme switching */
body {
  transition: background-color 350ms ease, color 300ms ease;
}

/* LIGHT THEME: soft light + lab photo watermark */
body.theme-light {
  --bg-main: #f6f8fb;
  --card-bg: #ffffff;
  --text: #151722;
  --muted: #6b7280;
  --accent1: #7f3ff2;
  --accent2: #00c6ff;
  --brand-neon: linear-gradient(90deg, #7f3ff2, #00c6ff);
  background-color: var(--bg-main);
  color: var(--text);
}

/* add subtle student lab background with low opacity for light theme */
body.theme-light::before{
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('assets/stock_images/student_lab_bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.08;           /* light, faint overlay */
  pointer-events: none;
  z-index: 0;
  filter: saturate(0.9) brightness(0.95);
}

/* DARK THEME (default) */
body.theme-dark {
  --bg-main: #08060b;
  --card-bg: #0f0b14;
  --text: #dfe6f2;
  --muted: #9aa0b0;
  --accent1: #8b5cf6;
  --accent2: #7efcff;
  --brand-neon: linear-gradient(90deg,var(--accent1),var(--accent2));
  background-color: var(--bg-main);
  color: var(--text);
}

/* PURPLE NEON THEME */
body.theme-neon {
  --bg-main: #06030a;
  --card-bg: rgba(16,9,26,0.7);
  --text: #eafcff;
  --muted: #cbd6e2;
  --accent1: #a76ffb;
  --accent2: #49f0ff;
  --brand-neon: linear-gradient(90deg,#a76ffb,#49f0ff);
  background-color: linear-gradient(180deg, rgba(6,3,10,1) 0%, rgba(10,4,20,1) 100%);
  color: var(--text);
}

/* Brand neon look */
.brand {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  line-height:1;
  transform: translateZ(0);
}
.brand-main{
  font-weight:900;
  font-size:20px;
  letter-spacing:1px;
  /* gradient neon fill */
  background: var(--brand-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 6px rgba(126,252,255,0.06),
    0 6px 18px rgba(139,92,246,0.06);
}
.brand-tagline{
  font-size:11px;
  color: var(--muted);
  margin-top:2px;
}

/* Theme toggle styles */
.theme-toggle{
  display:flex;
  gap:8px;
  border-radius:999px;
  padding:4px;
  align-items:center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.04);
}
.theme-btn{
  background: transparent;
  color: var(--muted);
  border: none;
  padding:8px 10px;
  border-radius:6px;
  cursor:pointer;
  font-weight:700;
  font-size:12px;
  transition: all 180ms;
}
.theme-btn:hover{ transform: translateY(-3px); }
.theme-btn.active{
  color: #0b0810;
  background: linear-gradient(90deg,var(--accent2),var(--accent1));
  box-shadow: 0 8px 30px rgba(139,92,246,0.12);
}

/* Ensure overlay background doesn't cover UI */
.container, .main-nav, .cart-drawer, .site-footer, .robot-wrap {
  position: relative;
  z-index: 2;
}

/* Keep things readable when switching themes */
.card, .service, .nav-inner {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 10px;
}

/* Small nicety: make active nav link brighter based on theme */
.nav-links a:hover, .nav-links a.active {
  color: var(--accent2);
}