:root{
  --brand:#0E6BA8; --brand-dark:#0B3C5D; --accent:#12B886;
  --ink:#0f172a; --muted:#64748b; --bg:#F5F7FB; --card:#FFFFFF;
  --shadow:0 12px 28px rgba(15,23,42,.08); --radius:16px; --container:1200px;
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--ink);line-height:1.65}
.container{max-width:var(--container);margin-inline:auto;padding:0 20px}
.lead{font-size:1.125rem;color:var(--muted);max-width:70ch}
/* HOme Page */
.home .hero--spotlight{ position:relative; min-height:520px;
  display:flex; align-items:center; justify-content:center;
  background:url('../images/products-hero.jpg') center/cover no-repeat;
}

/* Make overlay lighter so it’s not too grey */
.home .hero__overlay{
  position:relative; z-index:2; background:rgba(0,0,0,.25);
  width:100%; height:100%; display:flex; align-items:center;
}

.home .hero__content{ text-align:center; color:#fff }
.home .hero__content h1{ font-size:clamp(2rem,4vw,3.2rem); margin:0 0 12px }
.home .hero__cta{ margin-top:12px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

.home .section{ padding:54px 0 }
.home .section--alt{ background:linear-gradient(180deg,#fff,#f7fbff) }

.home .kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.home .kpi{ background:#fff; border:1px solid rgba(2,6,23,.06); border-radius:14px; box-shadow:0 12px 28px rgba(15,23,42,.08); padding:16px; text-align:center }
.home .kpi__num{ font-weight:800; color:#0B3C5D; font-size:1.1rem }
.home .kpi__label{ color:#64748b; font-size:.95rem }
@media (max-width:960px){ .home .kpis{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .home .kpis{ grid-template-columns:1fr } }




/* Hero */
.hero--spotlight{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center;background:url('../images/main-hero.jpg') center/cover no-repeat}
.hero__overlay{position:relative;z-index:2;background:rgba(0,0,0,.45);width:100%;height:100%;display:flex;align-items:center}
.hero__content{text-align:center;color:#fff}
.hero__content h1{font-size:clamp(2rem,4vw,3.2rem);margin:0 0 12px}
.hero__cta{margin-top:12px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero__video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* Buttons */
.btn{display:inline-block;padding:.8rem 1.1rem;border-radius:999px;font-weight:600;text-decoration:none;border:1px solid transparent;transition:.2s ease}
.btn--primary{background:var(--brand);color:#fff;box-shadow:var(--shadow)} .btn--primary:hover{background:#0c5f96;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--brand);border-color:var(--brand)} .btn--ghost:hover{background:rgba(14,107,168,.08)}
/* Section */
.section{padding:54px 0}
.section--alt{background:linear-gradient(180deg,#fff,#f7fbff)}
/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kpi{background:var(--card);border:1px solid rgba(2,6,23,.06);border-radius:14px;box-shadow:var(--shadow);padding:16px;text-align:center}
.kpi__num{font-weight:800;color:var(--brand-dark);font-size:1.1rem}
.kpi__label{color:var(--muted);font-size:.95rem}
@media (max-width: 960px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 560px){.kpis{grid-template-columns:1fr}}
/* Footer */
.site-footer{margin-top:40px;background:#0c2540;color:#e5e7eb}
.footer__bar{border-top:1px solid rgba(255,255,255,.12);padding:12px 0;text-align:center}
/* ===== Header / Nav (migrated from styles.css) ===== */
.site-header{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(1.1) blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
  border-bottom: 1px solid rgba(2,6,23,.06);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color: var(--ink); font-weight:700; }
.brand__logo{
  width:36px; height:36px; border-radius:10px;
  background:
    radial-gradient(120% 140% at 10% 10%, var(--accent) 0%, rgba(18,184,134,.35) 40%, transparent 41%),
    radial-gradient(120% 140% at 90% 90%, var(--brand) 0%, rgba(14,107,168,.35) 42%, transparent 43%),
    linear-gradient(135deg, var(--brand-dark), var(--brand));
  box-shadow: var(--shadow);
}

/* Reset default list bullets inside header nav (prevents the bullet issue) */
.site-header nav ul, .nav__list{ list-style:none; margin:0; padding:0; }
.nav__list{ display:flex; gap: 22px; }
.nav__list li{ margin:0; padding:0; }
.nav__list a{
  color: var(--ink); text-decoration:none; font-weight:600;
  padding:8px 10px; border-radius:10px;
}
.nav__list a:hover{ background: rgba(14,107,168,.08); color: var(--brand-dark); }

.nav__toggle{ display:none; background:transparent; border:1px solid rgba(2,6,23,.2);
  border-radius:8px; padding:6px 10px; font-size:1.05rem; cursor:pointer; }
@media (max-width: 860px){
  .nav__toggle{ display:block; }
  .nav__list{
    position:absolute; right:20px; top:64px; background:#fff;
    border:1px solid rgba(2,6,23,.06); padding:12px; border-radius:12px;
    box-shadow: var(--shadow); display:none; flex-direction:column;
  }
  .nav__list.is-open{ display:flex; }
}

/* ===== Footer ===== */
.site-footer{ margin-top: 40px; background: #0c2540; color: #e5e7eb; }
.footer__bar{ border-top:1px solid rgba(255,255,255,.12); padding: 12px 0; text-align:center; }
.site-footer a{ color:#e5e7eb; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }

/* Generic header nav safety net (if your header.html uses plain <ul> without classes) */
.site-header nav ul{ display:flex; gap:22px; }
.site-header nav li{ list-style:none; }
.site-header nav a{ font-weight:600; padding:8px 10px; border-radius:10px; }
.site-header nav a:hover{ background: rgba(14,107,168,.08); }
/* ===== Footer (final) ===== */
.site-footer{
  margin-top: 40px;
  background: #0c2540;
  color: #e5e7eb;
}
.footer__grid{
  display: grid;
  gap: 18px;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 32px 0;
}
.footer__brand h5{ margin: 0 0 8px; font-size: 1.05rem; }
.footer__links h6,
.footer__contact h6{ margin: 0 0 8px; font-size: .95rem; color: #cbd5e1; letter-spacing: .2px; }
.footer__links ul{ list-style: none; margin: 0; padding: 0; }
.footer__links li{ margin: 6px 0; }
.site-footer a{ color: #e5e7eb; text-decoration: none; }
.site-footer a:hover{ text-decoration: underline; }
.muted{ color: #a8b4c4; }

.footer__bar{
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 12px 0;
  font-size: .9rem;
  color: #cbd5e1;
}

.brand__img {
  height: 42px;       /* adjust as needed */
  width: auto;
  display: block;
}


/* Responsive */
@media (max-width: 900px){
  .footer__grid{ grid-template-columns: 1fr; }
}

/* Remove any stray white band before footer (caused by margins) */
#footer-placeholder{ margin-top: 0; }
.site-footer, .footer__bar, .footer__grid { box-sizing: border-box; }

/* ---------- Section headings ---------- */
.section-title{ text-align:center; margin:0 0 18px; font-size:clamp(1.3rem,2.6vw,1.6rem); color:#0B3C5D; }

/* ---------- Testimonials slider ---------- */
.testimonials .t-slider{ position:relative; overflow:hidden; }
.t-track{
  --gap: 16px;
  display:flex; gap:var(--gap);
  scroll-behavior:smooth; overflow:auto; padding:4px;
  scroll-snap-type: x mandatory;
}
.t-track::-webkit-scrollbar{ display:none; }
.t-card{
  flex:0 0 min(420px, 90%); scroll-snap-align:center;
  background:#fff; border:1px solid rgba(2,6,23,.08); border-radius:14px;
  box-shadow:0 10px 26px rgba(2,6,23,.08); padding:18px;
}
.t-quote{ margin:0 0 10px; color:#334155; }
.t-author{ font-weight:700; color:#0B3C5D; }

.t-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  border:1px solid rgba(2,6,23,.12); background:#fff; border-radius:10px;
  width:36px; height:36px; cursor:pointer; display:grid; place-items:center;
  box-shadow:0 8px 20px rgba(2,6,23,.12);
}
.t-prev{ left:0; translate: -50% 0; }
.t-next{ right:0; translate: 50% 0; }
@media (max-width:720px){ .t-nav{ display:none; } }

/* ---------- Infinite scrolling logo belts ---------- */
.logo-belt .belt, .acc-belt .belt{
  overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.belt-track{
  display:inline-flex; align-items:center; gap:24px; padding:8px 0;
  animation: belt 28s linear infinite;
}
.belt--slow .belt-track{ animation-duration: 38s; }

.belt img{
  height:42px;
  width:auto;
  filter:none;     /* remove grayscale */
  opacity:1;       /* full visibility */
  transition: transform .2s ease;
}

.belt img:hover{
  transform: scale(1.05); /* small zoom effect on hover (optional) */
}

/* Seamless loop */
@keyframes belt{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .belt-track{ animation: none; }
}

/* Light divider before footer (optional) */
.section + .site-footer{ border-top: 1px solid rgba(2,6,23,.06); }

/* ===== Contact Us Widget ===== */
:root{
  --cu-green: #0F2434;        /* top */
  --cu-green-dark: #0B1B28;   /* bottom */
  
}

/* Wrapper, Overlay, Panel positions */
.cu-panel__body,
.cu-panel__footer{
  background: #ffffff !important;
}
.cu-wrap{ position:fixed; right:18px; bottom:18px; z-index:9999; }
.cu-overlay{
  position: absolute;
  right: 0;
  bottom: 72px;
  z-index: 10000;                /* ABOVE the overlay */
  background: #ffffff !important;/* solid, no see-through */
  opacity: 1 !important;
  backdrop-filter: none !important;
}
.cu-panel{
  width:min(360px, 92vw); background:var(--cu-bg); color:var(--cu-text);
  border:1px solid var(--cu-ring); border-radius:16px; overflow:hidden;
  box-shadow:var(--cu-shadow); position:absolute; right:0; bottom:72px;
  display:flex; flex-direction:column; animation:cu-pop .18s ease-out;
}
@keyframes cu-pop{ from{ transform:translateY(8px); opacity:0 } to{ transform:none; opacity:1 } }

/* FAB */
.cu-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  height: 56px;
  max-width: 56px;                 /* compact by default */
  padding: 0 14px 0 12px;          /* space for label when expanded */
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid var(--cu-ring, rgba(0,0,0,.08));
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cu-green,#25D366), var(--cu-green-dark,#1EB45A));
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  cursor: pointer;
  transition: max-width .25s ease, transform .15s ease, box-shadow .15s ease;
}
.cu-fab:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.22); }
.cu-fab-icon img{ width: 26px; height: 26px; object-fit: contain; display: block; }
.cu-fab-text{
  font-weight: 600;
  opacity: 0;
  max-width: 0;
  transition: opacity .2s ease .05s, max-width .25s ease;
}
              /* hide the old ✉️ span if it still exists */
.cu-fab-icon-img{
  width: 26px; height: 26px;
  object-fit: contain; display: block;
}

/* reveal label on desktop hover */
@media (hover:hover){
  .cu-fab:hover{
    max-width: 220px;
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
  }
  .cu-fab:hover .cu-fab-text{
    opacity: 1;
    max-width: 160px;
  }
}
/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .cu-fab, .cu-fab-text{ transition: none !important; }
}
/* Header */
.cu-panel__header{
  background:linear-gradient(180deg,var(--cu-green),var(--cu-green-dark));
  color:#fff; padding:14px; display:flex; align-items:center; justify-content:space-between;
}
.cu-brand{ display:flex; gap:10px; align-items:center; }
.cu-brand__icon{ width:28px; height:28px; object-fit:contain; border-radius:50%; background:rgba(255,255,255,.16); }
.cu-panel__title{ font-weight:700; font-size:14px; }
.cu-panel__subtitle{ font-size:12px; opacity:.9; }
.cu-close{ background:rgba(255,255,255,.2); color:#fff; border:none; border-radius:8px; width:28px; height:28px; cursor:pointer; }

/* Body */
.cu-panel__body{ padding:14px; display:flex; flex-direction:column; gap:12px; }
.cu-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cu-field{ display:flex; flex-direction:column; gap:6px; font-size:13px; }
.cu-field input, .cu-field textarea{
  width:100%; border:1px solid #e3e8ee; border-radius:10px; padding:10px 12px; font-size:14px;
  outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.cu-field input:focus, .cu-field textarea:focus{
  border-color:#b7e7c8; box-shadow:0 0 0 3px rgba(37,211,102,.18);
}
.cu-hint{ font-size:12px; color:var(--cu-muted); }
.cu-status{ font-size:12px; min-height:16px; }

/* Footer */
.cu-panel__footer{ padding:12px 14px; display:flex; justify-content:flex-end; }
.cu-send{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(180deg,var(--cu-green),var(--cu-green-dark));
  color:#fff; border:none; border-radius:10px; padding:10px 14px; font-weight:600; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.16); transition:filter .15s ease, transform .15s ease;
}
.cu-send:disabled{ filter:grayscale(.6) brightness(.9); cursor:not-allowed; }
.cu-send:hover:not(:disabled){ transform:translateY(-1px); }

/* Mobile tweak */
@media (max-width: 420px){ .cu-row{ grid-template-columns:1fr; } }

/* Safe areas */
@supports(padding:max(0px)){
  .cu-wrap{ right:max(18px, env(safe-area-inset-right)); bottom:max(18px, env(safe-area-inset-bottom)); }
}

/* Print */
@media print{ .cu-wrap, .cu-panel{ display:none !important; } }
/* Ensure hidden attribute always hides the widget */
#cu-panel[hidden], #cu-overlay[hidden] { display: none !important; }