:root{
  --gold:#DB9111;

  /* Theme colors */
  --bg-main:#0b0b0b;
  --bg-alt:#111;
  --bg-deep:#000;

  --glass:rgba(255,255,255,.08);
  --text:#fff;
}

html{scroll-behavior:smooth;}

body{
  font-family:Poppins,sans-serif;
  background:var(--dark);
  color:#fff;
  overflow-x:hidden;
}

body.light-mode{
  --bg-main:#f5f5f5;
  --bg-alt:#ffffff;
  --bg-deep:#ffffff;

  --glass:rgba(0,0,0,.06);
  --text:#111;
}

h1, h2, h3, h4, h5, h6{

  font-family:'Cinzel',serif;
}

/* ================= PARTICLE LAYER ================= */
#particle-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:5;
}

/* ================= HEADER ================= */
header{
  position:fixed;top:0;width:100%;z-index:1000;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(219,145,17,.35);
  transition:top .4s ease;
}
header.hidden{top:-120px;}

.navbar{
  display:flex;align-items:center;gap:20px;
  padding:14px 30px;
  font-family:'Cinzel',serif;
}
.navbar a{

  text-decoration: none;
}
.brand{
  display:flex;align-items:center;gap:14px;
}
.brand img{width:85px;}
.brand h1{
  font-family:'Cinzel',serif;
  font-size:1.6rem;
  letter-spacing:2px;
  margin:0;
  color:#fff;
}
.nav-links a{
  color:#fff;text-decoration:none;margin-left:24px;
  font-weight:500;position:relative;
}
.nav-links a::after{
  content:"";position:absolute;bottom:-6px;left:0;
  width:0;height:2px;background:var(--gold);transition:.3s;
}
.nav-links a:hover::after{width:100%;}

/* ================= CURSOR GLOW ================= */
.cursor-glow{
  position:fixed;
  width:260px;
  height:260px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, rgba(219,145,17,.25), transparent 60%);
  transform:translate(-50%,-50%);
  z-index:3;
}

/* ================= PARTICLES ================= */
.particle{
  position:absolute;
  width:4px;
  height:4px;
  background:var(--gold);
  border-radius:50%;
  opacity:.6;
  animation:float linear infinite;
}
@keyframes float{
  from{transform:translateY(110vh);}
  to{transform:translateY(-10vh);}
}

/* ================= GLASS ================= */
.glass{
  background:var(--glass);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:20px;
  box-shadow:0 25px 50px rgba(0,0,0,.6);
}

/* ================= SLIDER ================= */

.slid{display:none;text-align:center;}
.slid.active{display:block;}
.slider{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  transition:background 2s ease;
}
.slide{display:none;text-align:center;}
.slide.active{display:block;}

section{padding:120px 20px; position:relative; z-index:2;}
.dark{background:#111;}
.darker{background:#000;}

.slider{
  background:var(--bg-main);
}

#sldr{
  background:var(--bg-alt);
 }

/* ================= PRODUCTS ================= */
.product-card{
  background:#0f0f0f;
  border:1px solid rgba(219,145,17,.3);
  border-radius:18px;
  padding:18px;
  text-align:center;
  transition:.3s ease;
  perspective:1000px;
}
.product-card img{
  width:100%;
  border-radius:14px;
}
.product-card h5{
  margin-top:16px;
  font-weight:500;
  letter-spacing:.5px;
}
.product-card h4{
  font-weight:600;
  margin-top:8px;
  font-size: 20px;
}
.product-card button{
  margin-top:14px;
  padding:10px 26px;
  border:none;
  border-radius:30px;
  background:linear-gradient(135deg,var(--gold),#ffbf55);
  color:#000;
  font-weight:600;
}
/* ================= SERVICES ================= */
.services h4{
  max-width:820px;
  margin:0 auto 60px;
  font-weight:400;
  opacity:.85;
}
.service-card{
  padding:40px;
  text-align:center;
  height:100%;
}
.service-card i{
  font-size:2.6rem;
  color:var(--gold);
}
.service-card h5{
  margin-top:20px;
  color:var(--gold);
}
.service-card p{
  font-size:.95rem;
  opacity:.85;
}

/* ================= ABOUT ================= */
.about-section{
  position:relative;
  overflow:hidden;
}

body.light-mode .about-watermark{
  opacity:.06;
}

.about-watermark{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:700px;
  max-width:90%;
  opacity:.04;                 /* subtle */
  pointer-events:none;
  z-index:20;
  filter:grayscale(100%);
}
.about-wrapper{
  max-width:1000px;
  margin:0 auto;
  position:relative;
  z-index:2;
}

.about-section h2{
  letter-spacing:2px;
}

.about-divider{
  width:80px;
  height:3px;
  background:var(--gold);
  margin:20px auto 40px;
  border-radius:3px;
}

.about-lead{
  font-size:1.15rem;
  line-height:1.9;
  opacity:.9;
}

.about-block{
  margin-top:60px;
}

.about-block h4{
  margin-bottom:20px;
  letter-spacing:1px;
}

.about-block p{
  line-height:1.9;
  opacity:.9;
}

.reveal-text{
  overflow:hidden;
}

.reveal-text span{
  display:inline-block;
  transform:translateY(110%);
}

/* ================= CONTACT ================= */
.contact-grid{display:grid;gap:40px;}
@media(min-width:992px){
  .contact-grid{grid-template-columns:1fr 1fr;}
}
input{
  background:#000;border:1px solid var(--gold);
  color:#fff;border-radius:14px;padding:12px;
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold),#ffbf55);
  color:#000;font-weight:600;border-radius:30px;
}

/* ================= WHATSAPP FLOAT ================= */
.whatsapp-float{
  position:fixed;bottom:25px;right:25px;
  width:60px;height:60px;
  background:#25D366;color:#fff;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;
  z-index:999;
  box-shadow:0 10px 30px rgba(0,0,0,.6);
}

.whatsapp-floa{
  position:fixed;bottom:100px;right:40px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  z-index:999;
  box-shadow:0 10px 30px rgba(0,0,0,.6);
}

/* ================= FOOTER ================= */
footer{
  padding:60px 20px;
  background:#000;
  border-top:2px solid var(--gold);
}

body.light-mode header{
  background:rgba(255,255,255,.7);
  border-bottom:1px solid rgba(219,145,17,.35);
}

body.light-mode .nav-links a,
body.light-mode .brand h1,
body.light-mode p,
body.light-mode h4{
  color:#111;
}

body.light-mode .slider,
body.light-mode .glass,
body.light-mode .slid,
body.light-mode .product-card,
body.light-mode .dark,
body.light-mode .darker{
  background:#fff;
}

body.light-mode input{
  background:#fff;
  color:#111;
}

body.light-mode footer{
  background:#fff;
  color:#111;
}

body.light-mode .glass{
  box-shadow:0 20px 40px rgba(0,0,0,.15);
}
body.light-mode .particle{
  opacity:.25;
}
body.light-mode .cursor-glow{
  background:radial-gradient(circle, rgba(219,145,17,.15), transparent 60%);
}
/* ================= BRAND LOGO SWITCH ================= */

/* Default: DARK MODE */
.logo-light{
  display:none;
}
.logo-dark{
  display:block;
}

/* LIGHT MODE */
body.light-mode .logo-dark{
  display:none;
}
body.light-mode .logo-light{
  display:block;
}
