/* ==========================
   GLOBAL RESET
========================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; scroll-behavior: smooth; }
body {
  font-family: Inter, system-ui, Segoe UI, Arial, sans-serif;
  line-height: 1.4;
  transition: background 0.3s, color 0.3s;
}

/* THEME COLORS */
:root {
  --electric: #0ea5ff;
  --neon: #8b5cf6;
  --teal: #00c2a8;
  --card: #ffffff;
  --muted: #6b7280;
}

/* HEADER */
.site-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  background:linear-gradient(90deg,var(--electric),var(--neon),var(--teal));
  color:white; position:sticky; top:0; z-index:100;
}
.brand { display:flex; gap:10px; align-items:center; }
.brand-logo { width:48px; height:48px; border-radius:8px; object-fit:contain; }
.brand-name { font-weight:700; font-size:1.05rem; }

/* NAV */
.main-nav { display:flex; align-items:center; gap:12px; }
.nav-links { display:flex; gap:12px; list-style:none; }
.nav-links a { color:white; text-decoration:none; font-weight:600; padding:8px; border-radius:8px; }
.nav-links a:hover { background:rgba(255,255,255,0.15); }
.theme-toggle, .hamburger { background:transparent; border:none; color:white; font-size:20px; cursor:pointer; padding:8px; }
.hamburger { display:none; }
@media (max-width:900px){
  .nav-links{display:none;position:absolute;top:64px;right:12px;background:linear-gradient(90deg,var(--electric),var(--neon));flex-direction:column;padding:12px;border-radius:10px;}
  .nav-links.show{display:flex;} .hamburger{display:block;}
}

/* HERO */
.hero { position:relative; background-image:url("../images/home-hero1.png"); background-position:center; background-repeat:no-repeat; background-size:cover;
  text-align:center; padding:140px 20px; display:flex;flex-direction:column;justify-content:center;align-items:center; overflow:hidden;
}
.hero::before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.45); z-index:0; transition:background .3s ease; }
.hero-inner { position:relative; z-index:1; max-width:800px; }
.hero h1 { font-size:2.8rem; font-weight:700; margin-bottom:15px; line-height:1.2; color:#fff; text-shadow:0 0 20px rgba(14,165,255,0.5); }
.hero p { font-size:1.2rem; color:#f0f0f0; margin-bottom:25px; }
.hero-cta a { display:inline-block; padding:10px 18px; border-radius:8px; text-decoration:none; font-weight:700; transition:all .3s ease; }
.hero-cta .primary { background:linear-gradient(90deg,var(--electric),var(--neon)); color:#fff; }
.hero-cta .ghost { background:transparent; color:#fff; border:2px solid rgba(255,255,255,0.8); margin-left:10px; }
.hero-cta .ghost:hover { background:rgba(255,255,255,0.15); }

/* LIGHT-MODE ADJUSTS (keeps earlier styles) */
body.light-mode .hero::before { background: rgba(255,255,255,0.6); }
body.light-mode .hero h1, body.light-mode .hero p { color:#111; text-shadow:none; }

/* SERVICES */
.services-preview { padding:34px 18px; background:linear-gradient(180deg,#fff,#fbfdff); }
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;max-width:1100px;margin:0 auto}
.service{background:var(--card);border-radius:12px;padding:12px;text-align:center;box-shadow:0 8px 24px rgba(2,6,23,0.06);transition:transform .3s ease}
.service:hover{transform:translateY(-6px)}
.service img{width:100%;height:140px;object-fit:cover;border-radius:8px;margin-bottom:10px}
.service h3{color:var(--electric);margin-bottom:6px}
.service p{color:var(--muted);margin-bottom:12px}
.service .btn{display:inline-block;padding:8px 12px;border-radius:8px;background:linear-gradient(90deg,var(--neon),var(--teal));color:#fff}

/* FOOTER */
.site-footer{padding:18px;text-align:center;color:var(--muted);margin-top:28px}

/* ==========================
   PRODUCT GRID / REVEAL
========================== */
.product-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.5rem;
  margin:1.5rem 0 3rem;
}

/* base product card */
.product {
  background:var(--card);
  border-radius:14px;
  text-align:center;
  padding:1rem;
  border:2px solid rgba(14,165,255,0.12);
  box-shadow:0 6px 18px rgba(2,6,23,0.06);
  transform: translateY(0);
  transition: all 0.45s ease;
}

/* reveal-on-scroll base (hidden until observed) */
.reveal-on-scroll { opacity:0; transform:translateY(30px); transition:all 0.6s cubic-bezier(.2,.9,.3,1); }
.reveal-on-scroll.visible { opacity:1; transform:translateY(0); animation:pulseGlow 3s ease-in-out infinite; }

/* small hover polish */
.product img { width:100%; border-radius:10px; margin-bottom:.8rem; transition:transform .4s; }
.product:hover img { transform:scale(1.05); }
.product h3 { color:var(--electric); font-size:1.05rem; margin-bottom:.3rem; }
.product .tag { color:var(--muted); font-size:.9rem; margin-bottom:.5rem; }
.product .price { color:var(--neon); font-weight:700; margin-bottom:.7rem; }
.product .buy-now { background:linear-gradient(90deg,var(--electric),var(--neon)); border:none; color:#fff; font-weight:600; padding:8px 14px; border-radius:8px; cursor:pointer; transition:transform .2s; }
.product .buy-now:active { transform:translateY(1px); }

/* ===== fadeIn fallback (so older pages work) ===== */
.fade-in { animation: fadeInUp .8s ease forwards; }
@keyframes fadeInUp { from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }

/* ==========================
   BUY NOW DROPDOWN — SLIDE + GLOW
========================== */
.buy-options {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-top:10px;
  background:rgba(14,165,255,0.05);
  border:1px solid rgba(14,165,255,0.18);
  border-radius:10px;
  padding:10px;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(-10px);
  transition: all 0.35s cubic-bezier(.2,.9,.3,1);
  visibility:hidden;
}

/* buttons inside dropdown */
.buy-options a {
  display:block; width:100%; text-align:center; padding:6px 10px; border-radius:8px; text-decoration:none; font-weight:600;
  transition: all .25s ease; background:linear-gradient(90deg,var(--electric),var(--neon)); color:#fff; box-shadow:0 0 10px rgba(14,165,255,0.18);
}
.buy-options a:hover { transform:scale(1.03); background:linear-gradient(90deg,var(--neon),var(--teal)); box-shadow:0 0 20px rgba(0,229,255,0.28); }

/* open state */
.product.show-options .buy-options {
  max-height:220px;
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  box-shadow:0 0 22px rgba(14,165,255,0.2);
  animation: dropdownGlow 0.36s ease forwards;
}

/* dropdown keyframes */
@keyframes dropdownGlow {
  0% { opacity:0; transform:translateY(-12px); box-shadow:0 0 0 rgba(14,165,255,0); }
  100% { opacity:1; transform:translateY(0); box-shadow:0 0 22px rgba(14,165,255,0.22); }
}

/* ==========================
   PULSE GLOW ANIMATION
========================== */
@keyframes pulseGlow {
  0%,100% { box-shadow:0 0 16px rgba(14,165,255,0.12), 0 0 36px rgba(139,92,246,0.08); }
  50% { box-shadow:0 0 28px rgba(14,165,255,0.28), 0 0 56px rgba(0,229,255,0.18); }
}

/* ==========================
   CONTACT BOX (if used)
========================== */
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; margin:2rem auto 3rem; max-width:900px; text-align:center; }
.contact-box { background:rgba(255,255,255,0.05); border-radius:14px; padding:1.5rem; text-decoration:none; color:inherit; border:2px solid rgba(139,92,246,0.2); box-shadow:0 0 20px rgba(139,92,246,0.12); transform:translateY(0); transition:all .35s; }
.contact-box img { width:60px; height:60px; margin-bottom:.8rem; }
.contact-box h3 { font-size:1.2rem; font-weight:700; margin-bottom:.3rem; }
.contact-box p { font-size:.95rem; color:var(--muted); }
.contact-box.whatsapp{border-color:#25D366; box-shadow:0 0 25px rgba(37,211,102,0.14);}
.contact-box.telegram{border-color:#0088cc; box-shadow:0 0 25px rgba(0,136,204,0.14);}
.contact-box.email{border-color:var(--neon); box-shadow:0 0 25px rgba(139,92,246,0.14);}
.contact-box:hover{transform:translateY(-8px); box-shadow:0 0 40px rgba(14,165,255,0.22),0 0 70px rgba(139,92,246,0.16);}

/* ==========================
   DARK MODE (improved visibility)
========================== */
body.dark-mode { background:#050b18; color:#e8f0ff; }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode p, body.dark-mode a, body.dark-mode span { color:#f5f8ff; }
body.dark-mode a:hover { color:var(--neon); text-shadow:0 0 8px rgba(139,92,246,0.5); }
body.dark-mode .hero { background:radial-gradient(circle at top left,#0f172a,#020617); }

/* product adjustments for dark mode */
body.dark-mode .product { background:#0f1724; color:#e6eef8; border-color:rgba(0,229,255,0.06); box-shadow:0 6px 18px rgba(0,0,0,0.4); }
body.dark-mode .product h3 { color:var(--teal); }
body.dark-mode .product .price { color:#00e5ff; }
body.dark-mode .product.show-options .buy-options { background:rgba(10,18,33,0.95); border-color:rgba(0,229,255,0.14); }

/* contact dark mode */
body.dark-mode .contact-box { background:#0a1221; color:#eaf2ff; }
body.dark-mode .site-footer { background:#0f1724; color:#a8b5c9; }

/* Soft neon heading glow in dark mode */
body.dark-mode h1, body.dark-mode h2 { text-shadow:0 0 10px rgba(0,229,255,0.28), 0 0 20px rgba(139,92,246,0.16); }

/* small utilities */
.hidden { display:none !important; }