html{scroll-behavior:smooth;}
/* ==== Base / Reset ==== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root{
  --primary:#003973;
  --accent:#ffc107;
  --text:#222;
  --muted:#6b7280;
  --bg:#f7f7f7;
  --white:#fff;
}
body{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==== Layout Helpers ==== */
.container{
  width: min(1200px, 92vw);
  margin: 0 auto;
}
main{ padding: 32px 16px; }

/* ==== Header (Sticky + Responsive) ==== */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(17,17,17,0.85);
  backdrop-filter: saturate(120%) blur(8px);
  color: var(--white);
}
.nav-wrap{
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
}
.logo a{
  color: var(--white); text-decoration: none; font-weight: 700; font-size: 1.25rem;
}

/* Desktop nav */
.nav{
  display: flex; gap: 20px;
}
.nav a{
  color: var(--white); text-decoration: none; padding: 8px 10px; border-radius: 8px;
}
.nav a:hover{ background: rgba(255,255,255,0.1); }

/* Hamburger */
.nav-toggle{
  display: none;
  width: 42px; height: 42px;
  background: transparent; border: 0; cursor: pointer;
}
.nav-toggle span{
  display: block; height: 2px; width: 24px; margin: 6px auto;
  background: var(--white); transition: transform .25s ease, opacity .25s ease;
}
.nav-open .nav-toggle span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2){ opacity: 0; }
.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Mobile nav collapsed */
@media (max-width: 900px){
  .nav-toggle{ display: inline-block; }
  .nav{
    position: absolute; left: 0; right: 0; top: 100%;
    background: rgba(17,17,17,0.98);
    display: grid; gap: 6px; padding: 10px 16px;
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .nav a{ padding: 12px; border-radius: 10px; }
  .nav-open .nav{ max-height: 360px; }
}

/* ==== Hero (supports PL01.jpg with blue overlay) ==== */
.hero{
  min-height: 56vh;
  display: grid; place-items: center;
  text-align: center; padding: 64px 16px;
  color: var(--white);
  background:
    linear-gradient(rgba(0,38,77,.6), rgba(0,38,77,.6)),
    url('PL01.jpg') center/cover no-repeat fixed;
}
.hero h1{ font-size: clamp(1.8rem, 2.8vw + 1rem, 3rem); margin: 0 0 10px; }
.hero p{ margin: 0 0 18px; color: #e8eef9; }

/* Buttons */
.btn{
  display: inline-block;
  background: var(--accent); color: #111;
  padding: 10px 18px; text-decoration: none; border-radius: 10px;
  font-weight: 600; transition: transform .15s ease, opacity .15s ease;
}
.btn:hover{ opacity: .9; transform: translateY(-1px); }

/* ==== Sections (cards look) ==== */
section.card{
  background: var(--white);
  width: min(1100px, 94vw);
  margin: 18px auto; padding: 22px;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
}

/* ==== Products Grid (auto-fit) ==== */
.category{ margin: 36px 0; }
.category h2{
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
  padding-bottom: 6px; margin: 0 0 14px;
}
.product-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
}
.product-card{
  background: var(--white); border: 1px solid #e6e6e6;
  border-radius: 12px; padding: 12px; text-align: center; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.product-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.product-card img{ width: 100%; height: auto; border-radius: 8px; margin-bottom: 8px; }
.product-card p{ margin: 6px 0 0; font-weight: 600; }

/* ==== Popup (product detail) ==== */
.popup-overlay{
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6); z-index: 1100;
  justify-content: center; align-items: center; padding: 16px;
}
.popup-box{
  background: var(--white); width: min(520px, 94vw);
  border-radius: 14px; padding: 20px; position: relative; text-align: center;
}
.close-btn{
  position: absolute; top: 10px; right: 14px; cursor: pointer; font-size: 22px;
}

/* ==== Forms (contact) ==== */
form{ width: min(520px, 94vw); margin: 0 auto; display: grid; gap: 12px; }
input[type="text"], input[type="email"], textarea{
  width: 100%; padding: 12px; border-radius: 10px;
  border: 1px solid #ddd; outline: none;
}
textarea{ min-height: 120px; resize: vertical; }
button[type="submit"]{
  background: var(--primary); color: var(--white);
  border: 0; padding: 12px 16px; border-radius: 10px; cursor: pointer;
}
button[type="submit"]:hover{ filter: brightness(1.05); }

/* ==== Footer ==== */
footer{
  background: #111; color: #bbb; text-align: center; padding: 18px 12px;
  font-size: .95rem;
}

/* ==== Floating CTA (optional WhatsApp) ==== */
.floating-cta{
  position: fixed; right: 16px; bottom: 16px; z-index: 1050;
}
.floating-cta a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff; text-decoration: none;
  font-weight: 700; box-shadow: 0 10px 24px rgba(0,0,0,.15);
}

/* ==== Small screens tweaks ==== */
@media (max-width: 600px){
  .hero{ min-height: 48vh; padding: 56px 16px; background-attachment: scroll; }
  .nav-wrap{ padding: 10px 0; }
}
.site-header.scrolled{ box-shadow: 0 8px 24px rgba(0,0,0,.12); }
/* ===== Home page upgrades ===== */
.section-title{
  margin: 0 0 8px; font-size: clamp(1.4rem, 1.6vw + 1rem, 2rem);
}
.section-sub{ color: var(--muted); margin: 0 0 18px; }

/* Trust strip */
.trust-strip{ background: #0f1b2b; color:#e9eff8; padding: 18px 0; }
.trust-grid{
  display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  gap: 10px; align-items: stretch;
}
.trust-item{ display:flex; gap:10px; align-items:center; background:rgba(255,255,255,0.06);
  padding:10px 12px; border-radius:12px; }
.trust-item span{ font-size: 1.25rem; }
.trust-item p{ margin:0; line-height:1.35; }

/* Feature categories */
.feature-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.feature-card{
  display:block; background:var(--white); border:1px solid #e6e6e6; border-radius:14px;
  text-decoration:none; color:inherit; padding:12px; box-shadow:0 6px 18px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.feature-card:hover{ transform: translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.08);}
.feature-card img{ width:100%; height:auto; border-radius:10px; margin-bottom:10px; }
.feature-card h3{ margin:6px 0 4px; font-size:1.05rem; }
.feature-card p{ margin:0; color:var(--muted); }

/* Value props */
.value-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.value-card{
  background:var(--white); border:1px solid #eaeaea; border-radius:14px; padding:16px;
}
.value-ico{ font-size:1.4rem; margin-bottom:6px; }

/* Projects scroller */
.projects-scroller{
  display:grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr);
  gap:16px; overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom:6px;
}
.project-card{ scroll-snap-align: start; background:var(--white); border:1px solid #eee; border-radius:14px; overflow:hidden; }
.project-card img{ width:100%; height:auto; display:block; }
.project-card figcaption{ padding:10px; font-size:.95rem; }

/* Partner logos */
.logo-row{
  display:grid; gap:18px; align-items:center; justify-items:center;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.logo-row img{ width:120px; height:auto; opacity:.85; filter: grayscale(100%); transition: opacity .15s ease; }
.logo-row img:hover{ opacity:1; filter:none; }

/* Testimonials */
.testimonials{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.testimonials blockquote{
  margin:0; background:var(--white); border-left:4px solid var(--primary); padding:12px 14px; border-radius:10px;
}
.testimonials cite{ display:block; margin-top:8px; color:var(--muted); font-style: normal; }

/* CTAs */
.cta-wide{
  background: linear-gradient(90deg, #0f2747, #133a6b);
  color:#e8f0ff; margin: 26px 0; padding: 18px 0;
}
.cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.cta-actions .btn{ margin-left:0; }
.btn-ghost{
  background: transparent; color: #fff; border:2px solid #fff;
}
.btn-ghost:hover{ background: rgba(255,255,255,0.1); color:#fff; }

.cta-banner{
  background: linear-gradient(180deg, #0e1d33, #0b1524);
  color:#e9f1ff; text-align:center; padding: 36px 16px; border-radius: 16px;
  width: min(1100px, 94vw); margin: 28px auto;
}

/* Small devices */
@media (max-width: 820px){
  .cta-inner{ flex-direction: column; text-align: center; }
}
/* Brand Name Styling */
.logo a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  text-decoration: none;
  letter-spacing: 0.5px;
}

.logo-led {
  color: #ffffff; /* White for contrast */
}

.logo-lutece {
  color: #00aaff; /* Example brand blue */
  position: relative;
}

/* Subtle glow for lighting theme */
.logo-lutece::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: linear-gradient(90deg, #00aaff, #00ffe0);
  box-shadow: 0 0 6px rgba(0, 170, 255, 0.8);
  border-radius: 2px;
}



/* ===== Featured Categories Marquee (JS-driven) ===== */
.featured-marquee { overflow: hidden; position: relative; }
.marquee{ --gap:16px; position: relative; overflow:hidden; padding: 6px 0 4px; }
.marquee-track{ display: inline-flex; gap: var(--gap); will-change: transform; }

.cat-card{
  flex: 0 0 auto;
  width: 240px;
  background: #fffdf9;
  border:1px solid #e9dcc7;
  border-radius: 14px;
  text-decoration: none; color: #2a2a2a;
  box-shadow: 0 10px 24px rgba(140,110,70,.08);
  padding: 10px; display: grid; gap: 8px; justify-items: center;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cat-card img{ width:100%; height:auto; border-radius: 10px; }
.cat-card span{ font-weight: 600; font-size: 1rem; text-align:center; }
.cat-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 36px rgba(140,110,70,.12); border-color: #d0a86e; }

@media (max-width: 680px){ .cat-card{ width: 190px; } }

/* Cream theme background for the card section */
.featured-marquee{
  background: linear-gradient(180deg, #f7f2e9, #f1e7d6);
  border: 1px solid #e9dcc7;
  box-shadow: 0 10px 28px rgba(120,90,40,.08);
}
.featured-marquee .section-title{ color:#2a2a2a; }
.featured-marquee .section-sub{ color:#7a6a53; }

/* Buttons */
.marquee-btn{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #e9dcc7;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
  cursor: pointer; font-size: 22px; line-height: 1; font-weight: 700;
  display: grid; place-items: center; color: #5a4a33;
  transition: transform .12s ease, background .12s ease;
  z-index: 2;
}
.marquee-btn:hover{ transform: translateY(-50%) scale(1.06); background: #fff; }
.marquee-left{ left: 8px; }
.marquee-right{ right: 8px; }


/* Ensure anchored category headings aren't hidden behind sticky header */
.category h2{ scroll-margin-top: 96px; }

/* Pause motion in Featured Categories on hover */
.featured-categories:hover { animation-play-state: paused; }
.featured-categories:hover * { animation-play-state: paused; }