:root{
  --navy-deep:#050d18;
  --navy:#0a1c30;
  --navy-light:#123150;
  --cyan:#4fd8ff;
  --cyan-soft:rgba(79,216,255,.35);
  --green:#5fc24a;
  --green-bright:#7be05f;
  --ink:#eaf3fb;
  --ink-dim:#9fb6cc;
  --line:rgba(120,180,220,.18);
  --radius:14px;
  --font-display:'Orbitron', 'Segoe UI', sans-serif;
  --font-body:'Rubik', 'Segoe UI', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:
    radial-gradient(ellipse 1100px 600px at 50% 0%, rgba(20,45,70,.5), transparent 60%),
    radial-gradient(circle at 90% 80%, rgba(79,216,255,.04), transparent 45%),
    var(--navy-deep);
  background-attachment:fixed;
  color:var(--ink);
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:46px 46px;
  opacity:.07;
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="700" height="700" viewBox="0 0 700 700"><g fill="none" stroke="%234fd8ff" stroke-width="1.4"><path d="M0 480 L120 480 L160 440 L300 440 L300 520 L420 520"/><circle cx="120" cy="480" r="4" fill="%234fd8ff" stroke="none"/><circle cx="300" cy="440" r="4" fill="%234fd8ff" stroke="none"/><circle cx="420" cy="520" r="4" fill="%234fd8ff" stroke="none"/><path d="M620 0 L620 90 L560 150 L560 260"/><circle cx="620" cy="90" r="4" fill="%234fd8ff" stroke="none"/><circle cx="560" cy="260" r="5" fill="%237be05f" stroke="none"/><path d="M40 0 L40 60 L90 110 L90 220"/><circle cx="90" cy="220" r="4" fill="%234fd8ff" stroke="none"/><path d="M700 600 L640 600 L600 640 L600 700"/><circle cx="640" cy="600" r="4" fill="%237be05f" stroke="none"/></g></svg>');
  background-repeat:repeat;
  background-size:700px 700px;
  opacity:.06;
}

/* sections sit on the shared body background — no per-section bg / seams */
.circuit-bg{ position:relative; background:transparent; }

/* ===== Header / Navbar ===== */
header{
  position:sticky; top:0; z-index:1000;
  background:rgba(5,13,24,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.top-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 22px;
  max-width:1300px; margin:0 auto;
}
.hamburger{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; background:none; border:1px solid var(--line);
  border-radius:8px; cursor:pointer;
}
.hamburger span{
  width:20px; height:2px; background:var(--cyan); margin:0 auto; display:block;
  transition:.3s;
}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink); cursor:pointer;
}
.brand img{
  width:46px; height:46px; border-radius:50%;
  box-shadow:0 0 18px var(--cyan-soft);
}
.brand-text{
  font-family:var(--font-display);
  font-size:.95rem; line-height:1.05;
  letter-spacing:.5px;
}
.brand-text small{
  display:block; font-family:var(--font-body); font-weight:400;
  font-size:.6rem; color:var(--ink-dim); letter-spacing:1.5px;
  text-transform:uppercase; margin-top:2px;
}

.cart-btn{
  position:relative;
  background:none; border:1px solid var(--line); color:var(--ink);
  width:42px; height:42px; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:.25s;
}
.cart-btn:hover{border-color:var(--cyan); box-shadow:0 0 12px var(--cyan-soft);}
.cart-count{
  position:absolute; top:-7px; right:-7px;
  background:var(--green); color:#06210b; font-size:.65rem; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* Desktop nav row */
nav.desktop-nav{
  display:none;
  border-top:1px solid var(--line);
  background:rgba(10,28,48,.6);
}
nav.desktop-nav ul{
  list-style:none; display:flex; justify-content:center; gap:42px;
  max-width:1300px; margin:0 auto; padding:12px 22px;
}
nav.desktop-nav a{
  color:var(--ink-dim); text-decoration:none; font-size:.85rem;
  letter-spacing:1px; text-transform:uppercase; font-weight:500;
  position:relative; padding:4px 0; transition:.25s; cursor:pointer;
}
nav.desktop-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--cyan); transition:.25s;
}
nav.desktop-nav a:hover{color:var(--ink);}
nav.desktop-nav a:hover::after{width:100%;}

/* Mobile dropdown menu */
.mobile-menu{
  max-height:0; overflow:hidden; transition:max-height .35s ease;
  background:rgba(8,20,34,.97);
  border-top:1px solid var(--line);
}
.mobile-menu.open{max-height:300px;}
.mobile-menu ul{list-style:none;}
.mobile-menu a{
  display:block; padding:14px 24px; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--line);
  font-size:.95rem; letter-spacing:.5px; cursor:pointer;
}
.mobile-menu a:active, .mobile-menu a:hover{color:var(--cyan); background:rgba(79,216,255,.05);}

@media(min-width:860px){
  .hamburger{display:none;}
  nav.desktop-nav{display:block;}
  .mobile-menu{display:none !important;}
}

/* ===== Hero / About ===== */
.hero{
  padding:90px 22px 70px;
  text-align:center;
  position:relative;
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2rem, 5vw, 3.4rem);
  letter-spacing:2px;
  background:linear-gradient(90deg, var(--cyan), var(--green-bright));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:14px;
}
.hero p.tag{
  color:var(--ink-dim); font-size:1rem; max-width:560px; margin:0 auto;
  letter-spacing:.5px;
}

section{position:relative; scroll-margin-top:115px;}
.section-inner{max-width:1200px; margin:0 auto; padding:70px 22px;}
.section-head{text-align:center; margin-bottom:42px;}
.eyebrow{
  font-family:var(--font-display); font-size:.7rem; letter-spacing:4px;
  color:var(--green-bright); text-transform:uppercase;
}
.section-head h2{
  font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.2rem);
  margin-top:8px; letter-spacing:1px;
}
.section-head .divider{
  width:60px; height:3px; margin:16px auto 0;
  background:linear-gradient(90deg, var(--cyan), var(--green));
  border-radius:3px;
}

#about .about-box{
  max-width:760px; margin:0 auto; text-align:center;
  background:rgba(18,49,80,.35);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px 30px;
}
#about .about-box p, .about-box p{
  color:var(--ink-dim); line-height:1.85; font-size:1.02rem; text-align:justify;
}
#about .about-box strong{color:var(--cyan);}

/* ===== Carousel ===== */
.carousel{
  position:relative; max-width:1200px; margin:0 auto;
  width: 100%;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.carousel-track{display:flex; transition:transform .6s cubic-bezier(.65,0,.35,1);}
.slide{
  min-width:100%; position:relative; height:420px;
  aspect-ratio: 16/9;
  overflow: hidden;
  background:linear-gradient(135deg, rgba(18,49,80,.6) 0%, rgba(10,28,48,.8) 100%);
  display:flex; align-items:flex-end;
}
.slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slide::after{ display:none; }
.slide-text{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:34px 40px;
}
.slide-text .eyebrow{display:block; margin-bottom:6px;}
.slide-text h3{
  font-family:var(--font-display); font-size:clamp(1.3rem,3vw,2rem);
  letter-spacing:1px; margin-bottom:8px;
}
.slide-text p{color:var(--ink-dim); max-width:480px;}
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  background:rgba(5,13,24,.6); border:1px solid var(--line); color:var(--ink);
  width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  transition:.25s;
}
.carousel-btn:hover{background:var(--cyan); color:var(--navy-deep);}
.carousel-btn.prev{left:16px;} .carousel-btn.next{right:16px;}
.carousel-dots{
  position:absolute; bottom:14px; right:24px; z-index:3;
  display:flex; gap:8px;
}
.carousel-dots span{
  width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.35);
  cursor:pointer; transition:.25s;
}
.carousel-dots span.active{background:var(--cyan); box-shadow:0 0 8px var(--cyan);}

/* ===== Products ===== */
.products-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  gap:26px;
}
.product-card{
  background:linear-gradient(160deg, rgba(18,49,80,.55), rgba(10,28,48,.55));
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.product-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(95,194,74,.18), 0 0 24px rgba(123,224,95,.15);
  border-color:var(--green);
  background:linear-gradient(160deg, rgba(24,64,100,.65), rgba(14,38,62,.65));
}
.product-card:hover .price{ text-shadow:0 0 10px rgba(123,224,95,.6); }

.product-img{
  height:250px; position:relative; overflow:hidden;
}
.product-img img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  transition:transform .4s ease;
  color:transparent; /* hides alt text */
}

.product-img img[data-error]{
  visibility:hidden; /* hides broken icon */
}
.product-card:hover .product-img img{
  transform:scale(1.04);
}
.product-body{padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1;}
.product-body h3{font-family:var(--font-display); font-size:1.02rem; letter-spacing:.5px;}
.product-body p{color:var(--ink-dim); font-size:.85rem; line-height:1.5; flex:1;}
.price-row{display:flex; align-items:center; margin-top:6px;}
.price-row .add-btn{width:100%; text-align:center;}
.add-btn{
  background:transparent; border:1px solid var(--cyan); color:var(--cyan);
  padding:9px 16px; border-radius:8px; font-size:.78rem; letter-spacing:.5px;
  cursor:pointer; transition:.25s; text-transform:uppercase; font-weight:600;
}
.add-btn:hover{background:var(--cyan); color:var(--navy-deep);}
.add-btn.added{background:var(--green); border-color:var(--green); color:#06210b;}

/* ===== Popular Producers ===== */
.producers-wrap{position:relative;}
.producers-scroll{
  display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth;
  padding:10px 54px 16px; scrollbar-width:none; -ms-overflow-style:none;
}
.producers-scroll::-webkit-scrollbar{display:none;}

.producer-card{
  flex:0 0 180px; height:110px;
  background:#ffffff;
  border:1px solid var(--line); border-radius:var(--radius);
  transition:.25s;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  position:relative;
  z-index:1;
  isolation:isolate;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  overflow:hidden;
}
.producer-card img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background:#ffffff;
}
.producer-card:hover{border-color:var(--green); box-shadow:0 12px 28px rgba(95,194,74,.15);}

/* ===== Producers Page (categorized) ===== */
.producers-category{margin-bottom:38px;}
.producers-category:last-child{margin-bottom:0;}
.producers-category h3{
  font-family:var(--font-display); font-size:.95rem; letter-spacing:1.5px;
  color:var(--cyan); text-transform:uppercase; margin-bottom:16px;
  padding-bottom:8px; border-bottom:1px solid var(--line);
}
.producers-tile-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px;
}
.producer-tile{
  background:white; border:1px solid var(--line); border-radius:var(--radius);
  min-height:78px; padding:14px; display:flex; align-items:center; justify-content:center;
  text-align:center; transition:.25s;
}
.producer-tile:hover{border-color:var(--green); box-shadow:0 12px 28px rgba(95,194,74,.15); transform:translateY(-3px);}
.producer-tile span{color:var(--ink); font-size:.85rem; font-family:var(--font-display); letter-spacing:.4px;}
.producer-tile img{width:100%; height:44px; object-fit:contain; display:block;}

/* ===== Products Page Category Nav ===== */
.products-nav{
  display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:4px 4px 12px; margin-bottom:28px; scrollbar-width:none;justify-content: space-between;
}
.products-nav::-webkit-scrollbar{display:none;}
.products-nav-btn{
  flex:0 0 auto; padding:10px 22px; border-radius:999px; border:1px solid var(--line);
  background:rgba(18,49,80,.35); color:var(--ink); font-family:var(--font-display);
  font-size:.78rem; letter-spacing:.6px; text-transform:uppercase; font-weight:600;
  cursor:pointer; transition:.25s; white-space:nowrap;
}
.products-nav-btn:hover{border-color:var(--cyan); color:var(--cyan);}
.products-nav-btn.active{background:var(--cyan); border-color:var(--cyan); color:#04202b;}
@media (max-width:600px){
  .products-nav{justify-content:flex-start;}
  .products-nav-btn{padding:9px 18px; font-size:.72rem;}
}

@media (max-width:860px){
  /* background-attachment:fixed is unreliable on mobile browsers and can
     cause repaint glitches (e.g. faint grid/circuit overlay bleeding into
     cards) during scroll. Use normal scroll attachment on smaller screens. */
  body{ background-attachment:scroll; }
  body::before, body::after{ position:absolute; }
}

/* ===== Contact ===== */
.contact-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:22px;
}
.contact-card{
  background:rgba(18,49,80,.35); border:1px solid var(--line);
  border-radius:var(--radius); padding:28px 22px; text-align:center;
  transition:.25s;
}
.contact-card a{
  display: block;
}
.contact-card:hover{
  border-color:var(--green); transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(95,194,74,.18), 0 0 24px rgba(123,224,95,.15);
}
.contact-card .icon{font-size:1.7rem; margin-bottom:10px;}
.contact-card h4{font-family:var(--font-display); font-size:.85rem; letter-spacing:1px; text-transform:uppercase; color:var(--ink-dim); margin-bottom:8px;}
.contact-card a, .contact-card span{color:var(--ink); font-size:1rem; text-decoration:none;}
.contact-card a:hover{color:var(--cyan);}

/* ===== Footer ===== */
footer{
  background:transparent; border-top:1px solid var(--line);
  text-align:center; padding:26px 22px; color:var(--ink-dim); font-size:.82rem;
}
footer span{color:var(--green-bright);}

/* ===== Cart Page ===== */
#cart-page{display:none;}
.page{display:none;}
.page.active{
  display:block;
  min-height:100vh;
  position:relative;
  padding-bottom:60px; /* reserve space for fixed footer */
}
.page.active > footer{
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:999;
  background:rgba(5,13,24,.95);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  padding:16px 22px;
  text-align:center;
  color:var(--ink-dim);
  font-size:.82rem;
}
/* Home page footer stays in normal flow (lots of content) */
#page-home > footer{
  position:static;
  background:transparent;
  backdrop-filter:none;
}
#cart-page.visible{display:block;}
.main-content.hidden{display:none;}
.cart-wrap{max-width:850px; margin:0 auto; padding:70px 22px;}
.cart-item{
  display:flex; align-items:center; gap:18px;
  background:rgba(18,49,80,.35); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px; margin-bottom:16px;
}
.cart-item .cart-item-img{width:74px; height:74px; border-radius:10px; flex-shrink:0; object-fit:cover; object-position:center; background:rgba(255,255,255,.03); border:1px solid var(--line);}
.cart-item .info{flex:1;}
.cart-item .info h4{font-family:var(--font-display); font-size:.95rem;}
.cart-item .info p{color:var(--ink-dim); font-size:.82rem; margin-top:4px;}
.cart-item .price-tag{color:var(--green-bright); font-family:var(--font-display); font-size:.95rem;}
.remove-btn{
  background:none; border:1px solid rgba(255,100,100,.4); color:#ff8a8a;
  width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:.9rem;
  transition:.25s;
}
.remove-btn:hover{background:rgba(255,100,100,.15);}
.cart-total{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:24px; padding-top:18px; border-top:1px solid var(--line);
  font-family:var(--font-display); font-size:1.2rem;
}
.empty-cart{text-align:center; color:var(--ink-dim); padding:50px 0;}
.back-link{
  display:inline-block; margin-bottom:24px; color:var(--cyan); text-decoration:none;
  font-size:.85rem; letter-spacing:.5px; cursor:pointer;
}
.enquire-btn{
  margin-top:22px; width:100%; padding:14px; border:none; border-radius:10px;
  background:#25D366;
  color:#06210b; font-family:var(--font-display); font-size:.9rem; letter-spacing:1px;
  cursor:pointer; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:.25s;
}
.enquire-btn:hover{background:#20bd5a; box-shadow:0 0 18px rgba(37,211,102,.45);}
.enquire-btn svg{width:20px; height:20px; flex-shrink:0;}