:root {
  --bg-dark:#0b0b0b;
  --panel-dark:#121212;
  --text-dark:#fff;

  --bg-light:#f9f9f9;
  --panel-light:#fff;
  --text-light:#111;

  --muted:#bfbfbf;
  --gold:#ffd700;
  --agni:#ff6600;
}

* { box-sizing:border-box }
body {
  margin:0;
  font-family:'Poppins',system-ui,Arial,sans-serif;
  background:var(--bg-dark);
  color:var(--text-dark);
  transition: background 0.3s, color 0.3s;
}
a { color:inherit }

/* Light mode */
body.light { background:var(--bg-light); color:var(--text-light); }
body.light .card { background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.02)); color:var(--text-light); }
body.light nav a { color:#111 }
body.light nav a:hover { background:rgba(0,0,0,.08) }
body.light .btn.ghost { color:#111; border-color:rgba(0,0,0,.2) }

/* Header & Logos */
#top { position: relative; }
.top { position: sticky; top: 0; z-index: 50; background:#fff; border-bottom:1px solid rgba(0,0,0,.06); }
.logo-wrap { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:#fff; }
.logo-symbol { height:72px; width:auto; }
.logo-text { height:72px; width:auto; }

/* Navbar (desktop) */
.navbar { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.6)); position:relative; z-index:10; }
nav { display:flex; gap:8px; flex-wrap:wrap; }
nav a { color:#fff; text-decoration:none; padding:6px 10px; border-radius:8px; }
nav a:hover { background:rgba(255,255,255,.08) }
.cta { display:flex; gap:8px; align-items:center }
.btn { background:var(--agni); color:#000; padding:8px 14px; border-radius:999px; border:none; text-decoration:none; font-weight:700 }
.btn.ghost { background:transparent; border:1px solid rgba(255,255,255,.2); color:#fff }

.container { max-width:1180px; margin:22px auto; padding:0 16px }
.card { background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02)); border-radius:14px; padding:16px 18px; box-shadow:0 10px 30px rgba(0,0,0,.5); margin-bottom:18px }
.agni { background:linear-gradient(45deg,#ff3300,#ff6600,#ffcc00); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:900 }

/* Services */
.services { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; padding-left:16px }
.services li { list-style:disc; color:inherit }

/* Products slider */
.slider { display:flex; gap:14px; align-items:center; animation:scroll 25s linear infinite }
.slide { min-width:260px; border-radius:12px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.5) }
.slide img { width:100%; height:200px; object-fit:cover; display:block }
@keyframes scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* Gallery */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px }
.gallery-grid img { width:100%; height:160px; object-fit:cover; border-radius:10px; display:block }
.lightbox { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:1000 }
.lightbox img { max-width:90%; max-height:80%; border-radius:10px }
.lightbox:target { display:flex }
.lightbox .close { position:absolute; top:20px; right:30px; font-size:32px; color:#fff; text-decoration:none }

/* Brands */
.brand-belt { overflow:hidden }
.belt-track { display:flex; gap:26px; animation:brandroll 30s linear infinite }
.brand img { height:60px; width:auto; display:block; filter:contrast(1.1) brightness(1.05) }
@keyframes brandroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.hint { color:var(--muted); font-size:.9rem }
.muted { color:var(--muted) }

/* Team */
.team-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px }
.member { background:rgba(0,0,0,.2); padding:12px; border-radius:12px; text-align:center }
.member img { width:120px; height:120px; border-radius:999px; object-fit:cover; display:block; margin:8px auto }

/* Testimonials */
.testi-belt { overflow:hidden }
.testi-track { display:flex; gap:18px; animation:testiscroll 32s linear infinite }
.testi { min-width:320px; background:rgba(255,255,255,.06); padding:14px; border-radius:12px }
@keyframes testiscroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* Connect tiles */
.social-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; text-align:center }
.tile { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; border-radius:12px; color:#fff; font-weight:600; text-decoration:none; transition:.3s }
.tile img { width:40px; height:40px; margin-bottom:6px }
.tile.whatsapp{background:#25D366}.tile.instagram{background:#E1306C}.tile.facebook{background:#1877F2}.tile.youtube{background:#FF0000}
.tile:hover { filter:brightness(1.2); box-shadow:0 6px 18px rgba(0,0,0,.4) }

/* Contact */
.connect-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:16px }
form input,form textarea { width:100%; padding:10px; border:none; border-radius:10px; background:#0f0f0f; color:#fff; margin:6px 0 }
.card.mini { padding:10px }
.social a { margin-right:10px; text-decoration:none; color:var(--gold) }
.map { width:100%; height:280px; border:0; border-radius:12px }

/* Footer */
.footer { border-top:1px solid rgba(255,255,255,.06); padding:16px; text-align:center; color:#ddd }
.whatsapp-float { position:fixed; right:18px; bottom:18px; background:#25D366; color:#fff; padding:12px 14px; border-radius:999px; text-decoration:none; font-weight:800; box-shadow:0 8px 18px rgba(0,0,0,.4) }

/* Mobile hamburger menu (glass) */
.mobile-nav-toggle{display:none;font-size:18px;padding:10px 14px;cursor:pointer;color:#fff;background:#111;border-radius:8px;margin-left:auto}
.mobile-nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;z-index:9999}
.mobile-nav-overlay.active{display:block}
.mobile-nav-overlay .overlay-inner{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
.mobile-nav{display:flex;flex-direction:column;align-items:center;gap:10px}
.mobile-nav a{font-size:20px;margin:10px 0;text-decoration:none;font-weight:700;background:linear-gradient(45deg,#ff3300,#ff6600,#ffcc00);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.mobile-nav a:hover{filter:brightness(1.2);text-shadow:0 0 6px rgba(255,165,0,0.7)}
.cta-mobile{margin-top:18px;display:flex;flex-direction:column;gap:12px;align-items:center}
.close-btn{position:absolute;top:16px;right:18px;font-size:26px;color:#fff;background:transparent;border:none;cursor:pointer}

/* Responsive */
@media(max-width:820px){
  
  .navbar{ display:none }
  .mobile-nav-toggle{ display:block }
  .logo-symbol { height:60px }
  .logo-text { height:60px }
  .connect-grid { grid-template-columns:1fr }
  nav { justify-content:center; flex-wrap:wrap }
}

/* v13.1: fix anchor scroll cut-off */
section { scroll-margin-top: 120px; }

html { scroll-behavior: smooth; }

/* v13.3: Blue gradient section headings */
h2 {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(45deg,#0066ff,#00ccff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Active menu highlight */
nav a.active, .mobile-nav a.active {
  background: linear-gradient(45deg,#0066ff,#00ccff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 8px rgba(0,153,255,0.6);
  font-weight: 700;
}