:root{
  --brand:#0f766e;
  --brand-2:#0ea5e9;
  --ink:#0b1220;
  --muted:#667085;
  --bg:#f8fafc;
  --card:#ffffff;
  --ring:#d0d7e2;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  font-family:Inter,system-ui,sans-serif;
  color:var(--ink); background:var(--bg);
}

a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--ring);
}
.nav-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; gap:12px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
.brand-logo{
  width:36px; height:36px; border-radius:8px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
}
.nav ul{ list-style:none; display:flex; gap:18px; margin:0; padding:0; }
.nav li a{ padding:8px 10px; border-radius:10px; }
.nav li a:hover{ background:rgba(14,165,233,.08); }

/* ---------- Sections & Cards ---------- */
.section, .grid{ max-width:1200px; margin:24px auto; padding:0 20px; }

.grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:20px;
}

.card{
  grid-column:span 6;
  background:var(--card); border:1px solid var(--ring);
  border-radius:18px; padding:20px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 8px 24px rgba(2,6,23,.08); }
.card.mini{ grid-column:span 4; } /* product cards */

.pill{
  display:inline-block; font-size:12px; color:#0b3; background:#e8f9ee;
  padding:4px 10px; border-radius:999px; border:1px solid #bfead1;
}

.section.alt{
  background:linear-gradient(180deg,#f9fafb 0%,#eef2f7 100%);
  padding-top:32px; padding-bottom:32px;
  border-top:1px solid #e5e9f2; border-bottom:1px solid #e5e9f2;
}

/* section titles */
.section-title{
  font-size:clamp(24px,3.2vw,32px);
  margin:8px 0 12px; padding-left:12px;
  border-left:4px solid var(--brand);
}

/* ---------- Products ---------- */
.cards-3{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.product{ background:var(--card); border:1px solid var(--ring); border-radius:18px; padding:16px; }
.product h4{ margin:6px 0 8px; }
.product small{ color:var(--muted); }
.img-ph{
  height:120px; border-radius:12px; border:1px dashed var(--ring);
  display:grid; place-items:center; color:var(--muted); background:#f4f7fb;
}

/* ---------- About ---------- */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.stat{ background:var(--card); border:1px solid var(--ring); border-radius:16px; padding:14px; }

/* ---------- Hero Slider ---------- */
.hero.hero-slider{
  max-width:none; margin:0; padding:0; display:block;
  position:relative; height:clamp(420px,78vh,760px);
  overflow:hidden; background:#fff; border-radius:0;
}
.slides{ width:100%; height:100%; position:relative; }
.slide{
  position:absolute; inset:0;
  background-position:center; background-size:cover;
  opacity:0; transform:scale(1.08);
  transition:opacity 450ms ease, transform 9s ease;
  will-change:transform,opacity;
}
.slide.is-active{ opacity:1; transform:scale(1.18); }

.slide .overlay{
  position:absolute; inset:0; display:grid; align-content:center;
  padding:clamp(20px,6vw,80px);
  background:linear-gradient(110deg,
              rgba(255,255,255,.96) 0 48%,
              rgba(255,255,255,.15) 60%,
              rgba(255,255,255,0) 64%);
}
/* Slight nudge to the right */
.hero-slider .overlay{ padding-left:clamp(120px,12vw,200px); }
.eyebrow{ color:var(--muted); margin:0 0 6px; font-weight:600; }
.hero-slider h1{ font-size:clamp(32px,7vw,68px); line-height:1.02; margin:0 0 10px; }
.hero-slider .sub{ color:var(--muted); margin:0 0 18px; }
/* CTA */
.hero-slider .overlay .btn{ place-self:start; width:auto; max-width:240px; padding-inline:18px; }

.ctrl{
  position:absolute; top:50%; translate:0 -50%;
  border:1px solid var(--ring); background:rgba(255,255,255,.9);
  width:38px; height:38px; border-radius:10px; font-size:22px; line-height:1;
  display:grid; place-items:center; cursor:pointer;
}
.ctrl:hover{ background:#fff; }
.ctrl.prev{ left:20px; }
.ctrl.next{ right:20px; }

.dots{
  position:absolute; left:50%; bottom:12px; translate:-50% 0;
  display:flex; gap:8px;
}
.dot{
  width:10px; height:10px; border-radius:999px;
  border:1px solid #fff; background:rgba(255,255,255,.5);
  text-indent:-9999px; overflow:hidden; cursor:pointer;
}
.dot.is-active{ background:#fff; }

@media (prefers-reduced-motion:reduce){
  .slide{ transition:opacity 200ms linear; transform:none !important; }
}
@media (max-width:900px){
  .slide .overlay{
    background:linear-gradient(110deg,rgba(255,255,255,.96) 0 64%, rgba(255,255,255,0) 64.5%);
    padding:24px;
  }
  .ctrl{ display:none; }
}

/* ---------- Scroll-in animation ---------- */
.fade-in{ opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; }
.fade-in.visible{ opacity:1; transform:none; }

/* ---------- Footer ---------- */
.site-footer{
  margin-top:56px;
  background:linear-gradient(180deg,#0f172a 0%,#1e293b 100%);
  color:#e2e8f0; font-size:14px;
}
.footer-top{ text-align:center; padding:14px 20px 0; }
.back-to-top{ color:#e2e8f0; font-weight:600; }
.back-to-top:hover{ text-decoration:underline; }

.footer-links{
  max-width:1200px; margin:20px auto 0;
  padding:0 20px 12px;
}
.footer-links.single{
  display:flex; justify-content:center; text-align:center; margin-bottom:0;
}
.footer-col h4{
  font-size:15px; margin-bottom:10px; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.15); padding-bottom:6px;
}
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-bottom:6px; }
.footer-col a{ color:#cbd5f5; }
.footer-col a:hover{ color:#fff; }

.footer-contact{
  text-align:center; margin:12px 0 20px; font-size:15px;
}
.footer-contact a{ color:#38bdf8; font-weight:600; }
.footer-contact a:hover{ color:#7dd3fc; text-decoration:underline; }

.footer-bottom{
  border-top:1px solid rgba(226,232,240,.18);
  max-width:1200px; margin:0 auto; padding:14px 20px 18px;
  display:flex; flex-direction:column; gap:6px; text-align:center;
}
.footer-brand{ display:flex; align-items:center; justify-content:center; gap:10px; font-weight:700; }
.footer-bottom p{ margin:0; color:#94a3b8; }
.tagline{ font-style:italic; color:#aab7d4; margin:4px 0; }


body {
  background: linear-gradient(180deg, #f9fbfa 0%, #e9f7f4 100%);
}



/* ===== SAFE OVERRIDES (append at end) ===== */

/* 1) Dark header like footer (links stay readable) */
.nav{
  background: linear-gradient(180deg, #0f172a, #1e293b) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}
.nav .brand,
.nav li a{
  color: #e2e8f0 !important;
}
.nav li a:hover{
  background: rgba(255,255,255,0.08) !important;
}

/* 2) Slider arrows – more visible */
.ctrl{
  background: rgba(15,23,42,0.70) !important; /* deep slate */
  color: #fff !important;
  width: 44px !important;
  height: 44px !important;
  border: none !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  line-height: 1 !important;
  transition: background .25s ease !important;
}
.ctrl:hover{
  background: rgba(15,23,42,0.90) !important;
}
.ctrl.prev{ left: 20px !important; }
.ctrl.next{ right: 20px !important; }

/* 3) Dots – slightly larger + higher contrast */
.dots{
  bottom: 18px !important;
  gap: 10px !important;
}
.dot{
  width: 12px !important;
  height: 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  background: rgba(255,255,255,0.35) !important;
  transition: all .25s ease !important;
}
.dot.is-active{
  background: #ffffff !important;
  transform: scale(1.3);
}