/* ============================================================
   REN TECHNOLOGIES — DESIGN TOKENS
   ============================================================ */
:root {
  --navy: #0F2340;
  --navy-deep: #091729;
  --navy-mid: #16345C;
  --blue: #1E6FD9;
  --coral: #F5C400;
  --coral-dark: #D4A800;
  --gold: #F5A623;
  --bg-light: #F8F9FA;
  --text-primary: #1A1A2E;
  --text-secondary: #6C757D;
  --radius-card: 8px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 20px rgba(0,0,0,0.08);
  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --container-max: 1280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  background: #091729; /* matches .top-band so any sub-pixel gap is invisible */
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-light);
  line-height: 1.6;
  overflow-x: hidden;
}
h1, h2, h3, h4, .font-display { font-family: var(--font-display); }
.wrap { max-width: var(--container-max); margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
a { text-decoration: none; }
img { max-width: 100%; display: block; }

.blueprint-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ============================================================
   TOP BAND
   ============================================================ */
.top-band {
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: .42rem 0;
}
.top-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.top-band-left {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.top-band-left a {
  color: rgba(255,255,255,.62);
  font-size: .74rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .32rem;
  transition: color .15s;
  white-space: nowrap;
}
.top-band-left a i { font-size: .78rem; color: var(--coral); }
.top-band-left a:hover { color: #fff; }
.top-band-right {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.top-band-right a {
  color: rgba(255,255,255,.55);
  font-size: .88rem;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color .15s, background .15s;
}
.top-band-right a:hover { color: var(--coral); background: rgba(255,255,255,.08); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-coral {
  background: var(--coral);
  color: var(--navy);
  border: none;
  border-radius: var(--radius-pill);
  padding: .7rem 1.85rem;
  font-weight: 700;
  font-size: .92rem;
  font-family: var(--font-body);
  transition: .2s;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-coral { text-decoration: none; }
.btn-coral:hover { background: var(--coral-dark); color: var(--navy); text-decoration: none; }

.btn-outline-light-custom {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.45);
  border-radius: var(--radius-pill);
  padding: .7rem 1.75rem;
  font-weight: 600;
  font-size: .92rem;
  font-family: var(--font-body);
  transition: .2s;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-outline-light-custom { text-decoration: none; }
.btn-outline-light-custom:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; text-decoration: none; }

.btn-navy-outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: var(--radius-pill);
  padding: .7rem 1.75rem;
  font-weight: 600;
  font-size: .92rem;
  font-family: var(--font-body);
  transition: .2s;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-navy-outline { text-decoration: none; }
.btn-navy-outline:hover { background: var(--navy); color: #fff; text-decoration: none; }

.btn-wa {
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: .7rem 1.75rem;
  font-weight: 600;
  font-size: .92rem;
  font-family: var(--font-body);
  transition: .2s;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn-wa:hover { background: #1da851; color: #fff; text-decoration: none; }

.btn-orange-fill {
  background: #FF5733;
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: .7rem 1.75rem;
  font-weight: 600;
  font-size: .92rem;
  font-family: var(--font-body);
  transition: .2s;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-orange-fill { text-decoration: none; }
.btn-orange-fill:hover { background: #E44420; color: #fff; text-decoration: none; }

.btn-learn-more {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid #D0D5DD;
  border-radius: var(--radius-card);
  padding: .42rem .9rem;
  font-weight: 600;
  font-size: .78rem;
  font-family: var(--font-body);
  transition: .2s;
  display: block;
  width: 100%;
  text-align: center;
  cursor: pointer;
}
.btn-learn-more:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.logo-light { filter: brightness(0) invert(1); }

/* ============================================================
   HERO ACCENT LINE
   ============================================================ */
.hero-accent-line {
  height: 4px;
  background: linear-gradient(90deg, var(--coral) 0%, var(--navy-mid) 70%, transparent 100%);
}

/* ============================================================
   NAV
   ============================================================ */
.top-band {
  transition: max-height .3s ease, padding .3s ease, opacity .3s ease;
  overflow: hidden;
  max-height: 80px;
}
.top-band.top-band-hidden {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}
.navbar.site-nav {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid rgba(0,0,0,.07);
  padding: 1.1rem 0;
  transition: padding .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.navbar.site-nav.scrolled {
  padding: 0.35rem 0;
  box-shadow: 0 4px 24px rgba(0,0,0,.13);
  border-bottom-color: rgba(0,0,0,.12);
}
.nav-logo { height: 68px; display: block; transition: height .3s ease; }
.navbar.site-nav.scrolled .nav-logo { height: 52px; }

.desktop-nav-links { align-items: center; flex-wrap: nowrap; gap: 0; }
.desktop-nav-links .nav-link {
  color: var(--navy) !important;
  font-weight: 500;
  font-size: .92rem;
  padding: .5rem 1rem !important;
  white-space: nowrap;
  transition: color .15s;
  background: none;
  border: none;
  cursor: pointer;
}
.desktop-nav-links .nav-link:hover,
.desktop-nav-links .nav-link.active { color: var(--coral) !important; }

.nav-quote-btn {
  background: var(--coral);
  color: var(--navy);
  border-radius: var(--radius-card);
  padding: .55rem 1.3rem;
  font-weight: 700;
  font-size: .88rem;
  white-space: nowrap;
  transition: .2s;
  display: inline-block;
}
.nav-quote-btn:hover { background: var(--coral-dark); color: var(--navy); }

.nav-hamburger {
  background: none;
  border: 1.5px solid var(--navy);
  border-radius: var(--radius-card);
  color: var(--navy);
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  cursor: pointer; transition: .2s; flex-shrink: 0; padding: 0; line-height: 1;
}
.nav-hamburger:hover { background: var(--navy); color: #fff; }

/* ============================================================
   MEGA MENU — hover, 886px
   ============================================================ */
.mega-dropdown { position: relative; }
.mega-menu {
  display: none;
  position: absolute;
  left: -20px;
  top: calc(100% + 0px);
  width: 886px;
  background: #fff;
  border-top: 3px solid var(--coral);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  box-shadow: 0 16px 48px rgba(0,0,0,.14);
  z-index: 1050;
}
.mega-dropdown:hover .mega-menu { display: block; }
.mega-inner { padding: 1.4rem 1.8rem; }
.mega-col-title {
  color: var(--navy); font-weight: 700; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .07em; display: block; padding-bottom: .5rem; margin-bottom: .6rem;
  border-bottom: 2px solid var(--coral);
}
.mega-col a { display: block; color: var(--text-secondary); font-size: .84rem; padding: .22rem 0; transition: .15s; }
.mega-col a:hover { color: var(--coral); padding-left: .3rem; }
.mega-view-all {
  color: var(--coral) !important; font-weight: 700 !important; font-size: .8rem;
  margin-top: .5rem; display: inline-flex !important; align-items: center; gap: .25rem;
}
.mega-view-all:hover { opacity: .8; }

/* ============================================================
   MOBILE OFFCANVAS MENU
   ============================================================ */
.offcanvas-nav { width: 300px !important; }
.offcanvas-nav .offcanvas-header { border-bottom: 1px solid #E9ECEF; padding: 1.1rem 1.4rem; }
.offcanvas-nav .offcanvas-body { padding: 1.2rem 1.4rem; }

.mobile-nav-link {
  display: block; padding: .8rem 0; color: var(--navy); font-weight: 600; font-size: 1rem;
  border-bottom: 1px solid #F0F0F0; transition: color .15s;
  background: none; border-left: none; border-right: none; border-top: none;
  width: 100%; text-align: left; font-family: var(--font-body); cursor: pointer;
}
.mobile-nav-link:hover { color: var(--coral); }

.mobile-products-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 0; color: var(--navy); font-weight: 600; font-size: 1rem;
  border-bottom: 1px solid #F0F0F0; width: 100%;
  background: none; border-left: none; border-right: none; border-top: none;
  font-family: var(--font-body); cursor: pointer; transition: color .15s;
}
.mobile-products-toggle:hover { color: var(--coral); }
.mobile-acc-icon { font-size: .7rem; transition: transform .25s; flex-shrink: 0; }
.mobile-products-toggle[aria-expanded="true"] .mobile-acc-icon { transform: rotate(180deg); }

.mobile-product-sub { padding: .4rem 0 0 .5rem; }
.mobile-sub-title {
  display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-secondary); padding: .75rem 0 .3rem;
}
.mobile-sub-link {
  display: block; padding: .35rem 0 .35rem .75rem; color: var(--text-secondary);
  font-size: .88rem; border-left: 2px solid #E9ECEF; margin-bottom: .1rem; transition: .15s;
}
.mobile-sub-link:hover { color: var(--coral); border-left-color: var(--coral); }

/* ============================================================
   HERO CAROUSEL
   ============================================================ */
.hero-carousel { position: relative; background: var(--navy); overflow: hidden; }
.hero-slide {
  min-height: 580px;
  display: flex; align-items: center;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-mid) 100%);
  position: relative;
}
.hero-slide::after {
  content: ""; position: absolute; right: -10%; top: -20%; width: 70%; height: 140%;
  background: linear-gradient(115deg, transparent 40%, rgba(245,196,0,.1) 48%, rgba(245,196,0,.16) 53%, transparent 61%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 2; padding: 4.5rem 0; }
.hero-eyebrow {
  display: inline-block; background: rgba(245,196,0,.15); color: var(--coral);
  border: 1px solid rgba(245,196,0,.4); font-size: .78rem; font-weight: 600;
  padding: .35rem .9rem; border-radius: var(--radius-pill); margin-bottom: 1.25rem;
  letter-spacing: .03em; text-transform: uppercase;
}
.hero-content h1 { color: #fff; font-weight: 700; font-size: 2.6rem; line-height: 1.2; margin-bottom: 1rem; max-width: 620px; }
.hero-content h1 .accent { color: var(--coral); }
.hero-content p { color: rgba(255,255,255,.68); font-size: 1.02rem; max-width: 500px; margin-bottom: 2rem; }
.hero-illustration { position: relative; z-index: 2; }
.hero-illustration svg { width: 100%; max-width: 380px; margin: 0 auto; display: block; }
.hero-product-img {
  width: 100%; max-height: 460px; object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.45));
  display: block; margin: 0 auto;
}

.hero-carousel .carousel-indicators { bottom: 14px; }
.hero-carousel .carousel-indicators [data-bs-target] {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); border: none; margin: 0 5px;
}
.hero-carousel .carousel-indicators .active { background: var(--coral); }
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next { width: 6%; opacity: 0; transition: opacity .2s; }
.hero-carousel:hover .carousel-control-prev,
.hero-carousel:hover .carousel-control-next { opacity: .7; }

/* ============================================================
   HERO VIDEO (commented out — styles kept for when activated)
   ============================================================ */
.hero-video-section {
  position: relative; overflow: hidden; min-height: 600px;
  display: flex; align-items: center; background: var(--navy);
}
.hero-vid-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
.hero-vid-overlay {
  position: absolute; inset: 0;
 background: linear-gradient(74.53deg, rgba(0, 0, 0, 0.7) 24.69%, rgba(0, 89, 255, 0) 94.25%);
  z-index: 1;
}
.hero-vid-content { position: relative; z-index: 2; width: 100%; padding: 5.5rem 0; }
.hero-vid-title {
  color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: 2.9rem; line-height: 1.18; margin: 0 auto 1.1rem; max-width: 740px;
}
.hero-vid-title .accent { color: var(--coral); }
.hero-vid-sub { color: rgba(255,255,255,.66); font-size: 1.04rem; max-width: 580px; margin: 0 auto 2.2rem; line-height: 1.7; }

/* Brand strip */
.brand-strip { background: var(--navy-deep); padding: 1.1rem 0; border-top: 1px solid rgba(255,255,255,.06); }
.brand-strip .label { color: rgba(255,255,255,.4); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .6rem; text-align: center; }
.brand-pills { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.brand-pill { color: rgba(255,255,255,.72); font-weight: 600; font-size: .85rem; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-pill); padding: .3rem 1rem; }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar { background: var(--navy-mid); padding: 1.1rem 0; }
.trust-scroll { display: flex; gap: 2rem; overflow-x: auto; scrollbar-width: none; justify-content: center; flex-wrap: nowrap; padding: 0 1rem; -webkit-overflow-scrolling: touch; }
.trust-scroll::-webkit-scrollbar { display: none; }
.trust-item { display: flex; align-items: center; gap: .55rem; white-space: nowrap; color: rgba(255,255,255,.85); font-size: .85rem; font-weight: 500; flex-shrink: 0; }
@media (max-width: 767px) {
  .trust-bar { padding: .9rem 0; }
  .trust-scroll { justify-content: flex-start; gap: 1.5rem; padding: 0 1.25rem; }
  .trust-item { font-size: .8rem; }
}
.trust-item .num { font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 1.1rem; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 4.5rem 0; }
.section-alt { background: #fff; }
.eyebrow { color: var(--coral); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .6rem; display: block; }
.section-title { font-size: 1.9rem; font-weight: 700; color: var(--navy); margin-bottom: .7rem; }
.section-sub { color: var(--text-secondary); font-size: .98rem; max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 0; }

/* ============================================================
   VERTICALS
   ============================================================ */
.vert-card {
  background: #fff; border: 1px solid #E9ECEF; border-radius: var(--radius-card);
  padding: 1.75rem; height: 100%; transition: .2s; position: relative; overflow: hidden;
}
.vert-card:hover { border-color: var(--coral); box-shadow: var(--shadow-card); transform: translateY(-3px); }
.vert-icon { width: 52px; height: 52px; border-radius: var(--radius-card); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1rem; }
.vert-card:has(.vert-card-img) { padding: 0; }
.vert-card-content { padding: 1.25rem 1.75rem 1.75rem; }
.vert-card-img { width: 100%; height: 220px; overflow: hidden; }
.vert-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vert-card h3 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.vert-card p { font-size: .875rem; color: var(--text-secondary); margin-bottom: 1rem; }
.vert-brands { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.vert-brands span { background: var(--bg-light); color: var(--text-secondary); font-size: .72rem; font-weight: 600; padding: .2rem .6rem; border-radius: var(--radius-pill); border: 1px solid #E9ECEF; }
.vert-card a { color: var(--coral); font-weight: 600; font-size: .88rem; }
.vert-card a i { transition: .2s; }
.vert-card a:hover i { transform: translateX(3px); }

/* ============================================================
   APPLICATIONS SHOWCASE
   ============================================================ */
.applications-section {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.applications-section::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.applications-section .section-title { color: #fff; }
.applications-section .section-sub { color: rgba(255,255,255,.58); }

/* Category pill tabs */
.app-tabs-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  background: rgba(255,255,255,.06);
  border-radius: 50px;
  padding: .35rem;
  width: fit-content;
  margin: 0 auto 2.5rem;
}
.app-tab-btn {
  display: flex;
  align-items: center;
  gap: .45rem;
  background: transparent;
  color: rgba(255,255,255,.58);
  border: none;
  border-radius: 50px;
  padding: .6rem 1.3rem;
  font-size: .88rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background .18s, color .18s;
  white-space: nowrap;
}
.app-tab-btn i { font-size: .95rem; }
.app-tab-btn:hover { color: #fff; background: rgba(255,255,255,.1); }
.app-tab-btn.active { background: var(--coral); color: var(--navy); }

/* Application grid */
.tab-pane { animation: appFadeIn .28s ease; }
@keyframes appFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Application card — image with bottom overlay */
.app-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  height: 220px;
  position: relative;
  cursor: default;
  background: var(--navy-mid);
  transition: transform .22s, box-shadow .22s;
}
.app-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,.55); }

.app-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.app-card:hover .app-card-img { transform: scale(1.07); }

.app-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 28%, rgba(6,16,32,.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: .95rem 1rem 1rem;
  transition: background .2s;
}
.app-card:hover .app-card-overlay {
  background: linear-gradient(180deg, rgba(6,16,32,.12) 0%, rgba(6,16,32,.92) 100%);
}

.app-name {
  display: block;
  color: #fff;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: .86rem;
  line-height: 1.3;
  margin-bottom: .38rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.app-machine {
  display: inline-flex;
  align-items: center;
  background: rgba(245,196,0,.22);
  color: var(--coral);
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .18rem .65rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(245,196,0,.35);
  width: fit-content;
}

/* App section CTA row */
.app-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

/* ── App Masonry Gallery Grid ───────────────────────────────── */
.app-gallery {
  display: grid;
  grid-template-columns: 1.65fr 1fr 1fr;
  grid-template-rows: 245px 245px 210px;
  gap: .75rem;
}
.app-gallery .app-card           { height: 100%; }
.app-gallery .app-card:nth-child(1) { grid-row: 1 / 3; }
.app-gallery .app-card:nth-child(6) { grid-column: 1 / 4; }

/* Wide bottom card — landscape overlay with left-aligned text */
.app-gallery .app-card:nth-child(6) .app-card-overlay {
  flex-direction: row; align-items: flex-end; gap: 1rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(90deg, rgba(6,16,32,.9) 0%, rgba(6,16,32,.3) 60%, transparent 100%);
}
.app-gallery .app-card:nth-child(6) .app-machine { margin-left: auto; flex-shrink: 0; }

/* Explore link — appears on hover */
.app-explore {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--coral); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  margin-top: .55rem; opacity: 0; transform: translateY(6px); transition: .25s;
}
.app-card:hover .app-explore { opacity: 1; transform: none; }

/* ── Video Section ─────────────────────────────────────────── */
.video-section { background: #fff; }

.vid-tab-bar {
  display: flex; gap: .5rem; justify-content: center;
  background: #F1F4F8; border-radius: 50px; padding: .35rem;
  width: fit-content; margin: 0 auto 2.75rem;
}
.vid-tab-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.75rem; border-radius: 50px;
  font-size: .88rem; font-weight: 700; font-family: var(--font-body);
  border: none; background: transparent; color: var(--text-secondary);
  cursor: pointer; transition: .2s; white-space: nowrap;
}
.vid-tab-btn:hover  { color: var(--navy); }
.vid-tab-btn.active { background: var(--navy); color: #fff; }
.vid-tab-btn i { font-size: .95rem; }

.vid-card {
  border-radius: var(--radius-card); overflow: hidden;
  background: #fff; border: 1px solid #E9ECEF; height: 100%; transition: .25s; cursor: pointer;
}
.vid-card:hover { box-shadow: 0 14px 40px rgba(0,0,0,.1); transform: translateY(-4px); }

.vid-thumb {
  position: relative; overflow: hidden; aspect-ratio: 16/9;
  cursor: pointer; background: var(--navy);
}
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: .4s; }
.vid-card:hover .vid-thumb img { transform: scale(1.05); opacity: .8; }

.vid-play-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,16,32,.25); transition: background .2s;
}
.vid-card:hover .vid-play-wrap { background: rgba(6,16,32,.4); }
.vid-play-btn {
  width: 62px; height: 62px; background: var(--coral); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--navy);
  box-shadow: 0 6px 24px rgba(0,0,0,.35); transition: .2s;
}
.vid-card:hover .vid-play-btn { transform: scale(1.12); }

.vid-duration {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0,0,0,.78); color: #fff; font-size: .7rem; font-weight: 700;
  padding: .22rem .58rem; border-radius: 5px; letter-spacing: .02em;
}
.vid-cat-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--coral); color: var(--navy); font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .22rem .72rem; border-radius: var(--radius-pill);
}
.vid-body  { padding: 1.1rem 1.25rem 1.4rem; }
.vid-title { font-size: .92rem; font-weight: 700; color: var(--navy); margin-bottom: .35rem; line-height: 1.35; }
.vid-desc  { font-size: .8rem; color: var(--text-secondary); margin: 0; line-height: 1.55; }

@media (max-width: 991.98px) {
  .app-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 200px 200px auto;
  }
  .app-gallery .app-card:nth-child(1) { grid-row: 1; grid-column: 1 / 3; }
  .app-gallery .app-card:nth-child(6) { grid-column: 1 / 3; height: 180px; }
  .app-gallery .app-card:nth-child(6) .app-card-overlay { flex-direction: column; align-items: flex-start; }
  .app-gallery .app-card:nth-child(6) .app-machine { margin-left: 0; }
}
@media (max-width: 575.98px) {
  .app-gallery { grid-template-rows: 180px 180px 180px auto; }
}

/* ============================================================
   FEATURED PRODUCTS
   ============================================================ */
.prod-card {
  background: #fff; border: 1px solid #E9ECEF; border-radius: var(--radius-card);
  overflow: hidden; height: 100%; transition: .2s;
}
.prod-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }

/* Larger image area so full machine is visible */
.prod-img {
  height: 250px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid #E9ECEF;
  background: #F1F4F8;
  padding: .75rem;
  overflow: hidden;
}
.prod-img img {
 max-height: 355px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  padding:10px;
}

.prod-body { padding: 1rem 1.1rem 1.1rem; }
.prod-brand { color: var(--coral); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .25rem; }
.prod-name { font-size: .95rem; font-weight: 700; color: var(--navy); margin-bottom: .3rem; min-height: 2.2em; line-height: 1.3; }
.prod-use { font-size: .8rem; color: var(--text-secondary); margin-bottom: .85rem; line-height: 1.45; }

.prod-carousel-header {
  display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1rem;
}
.prod-carousel-controls { display: flex; gap: .4rem; flex-shrink: 0; padding-bottom: .25rem; }
.prod-nav-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--coral); color: var(--navy); font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: .2s; font-weight: 700;
}
.prod-nav-btn:hover { background: var(--coral-dark); }

#productCarousel .carousel-indicators { position: static !important; margin-top: 1rem; margin-bottom: 0; justify-content: center; }
#productCarousel .carousel-indicators [data-bs-target] { width: 8px; height: 8px; border-radius: 50%; background: #D0D5DD; border: none; opacity: 1; margin: 0 3px; }
#productCarousel .carousel-indicators .active { background: var(--coral); }

/* ============================================================
   WHY REN (USP)
   ============================================================ */
.usp-card { text-align: center; padding: 1.4rem 1rem; }
.usp-icon { width: 54px; height: 54px; background: var(--navy); border-radius: var(--radius-card); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: var(--coral); font-size: 1.3rem; }
.usp-title { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: .4rem; }
.usp-desc { font-size: .84rem; color: var(--text-secondary); }

/* ============================================================
   TESTIMONIALS — indicator carousel, all screen sizes
   ============================================================ */
.testi-card {
  background: #fff; border: 1px solid #E9ECEF; border-radius: var(--radius-card);
  padding: 2rem 2rem 1.75rem;
}
.testi-stars { color: var(--gold); font-size: .9rem; margin-bottom: .9rem; }
.testi-quote { font-size: .93rem; color: var(--text-primary); font-style: italic; margin-bottom: 1.4rem; line-height: 1.75; }
.testi-author { display: flex; align-items: center; gap: .75rem; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.author-name { font-size: .88rem; font-weight: 700; color: var(--navy); }
.author-co { font-size: .76rem; color: var(--text-secondary); }

/* Carousel wrapper — works at all breakpoints */
.testi-carousel-outer { position: relative; max-width: 820px; margin: 0 auto; padding: 0 3.8rem; }
#testiCarousel .carousel-indicators { position: static !important; margin-top: 1.5rem; margin-bottom: 0; justify-content: center; }
#testiCarousel .carousel-indicators [data-bs-target] { width: 9px; height: 9px; border-radius: 50%; background: #D0D5DD; border: none; opacity: 1; margin: 0 4px; transition: background .2s; }
#testiCarousel .carousel-indicators .active { background: var(--coral); }
.testi-nav-btn {
  position: absolute; top: 42%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid #E9ECEF; background: #fff; color: var(--navy);
  font-size: 1rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: .2s; z-index: 2; box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.testi-nav-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.testi-nav-btn.prev { left: 0; }
.testi-nav-btn.next { right: 0; }

/* ============================================================
   RESOURCES TEASER
   ============================================================ */
.res-card { background: #fff; border: 1px solid #E9ECEF; border-radius: var(--radius-card); overflow: hidden; height: 100%; transition: .2s; }
.res-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.res-thumb { height: 140px; background: var(--navy); position: relative; }
.res-tag { position: absolute; top: .8rem; left: .8rem; background: rgba(255,255,255,.15); color: #fff; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .25rem .6rem; border-radius: var(--radius-pill); backdrop-filter: blur(4px); }
.res-body { padding: 1rem 1.1rem; }
.res-title { font-size: .9rem; font-weight: 700; color: var(--navy); margin-bottom: .4rem; line-height: 1.4; }
.res-meta { font-size: .75rem; color: var(--text-secondary); }
.res-case { background: var(--navy); border-radius: var(--radius-card); color: #fff; padding: 2rem; height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.res-case::after { content: ""; position: absolute; right: -30%; top: -40%; width: 80%; height: 180%; background: linear-gradient(115deg, transparent 45%, rgba(245,196,0,.16) 50%, transparent 58%); }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner { background: var(--navy-deep); padding: 4rem 0; text-align: center; position: relative; overflow: hidden; }
.cta-banner h2 { color: #fff; font-size: 1.85rem; font-weight: 700; margin-bottom: .6rem; position: relative; z-index: 1; }
.cta-banner p { color: rgba(255,255,255,.65); margin-bottom: 2rem; position: relative; z-index: 1; }
.cta-btns { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--navy); color: rgba(255,255,255,.65); padding: 0; }
.footer-newsletter { border-bottom: 1px solid rgba(255,255,255,.1); padding-top: 2.5rem; padding-bottom: 2rem; margin-bottom: 2.5rem; }
.footer-newsletter h5 { color: #fff; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: .3rem; }
.footer-newsletter p { font-size: .875rem; color: rgba(255,255,255,.6); margin-bottom: 0; }
.newsletter-form { display: flex; gap: .6rem; max-width: 480px; }
.newsletter-input { flex: 1; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: var(--radius-card); font-size: .9rem; padding: .55rem 1rem; }
.newsletter-input::placeholder { color: rgba(255,255,255,.38); }
.newsletter-input:focus { background: rgba(255,255,255,.15); border-color: var(--coral); box-shadow: none; color: #fff; outline: none; }
.newsletter-btn { background: var(--coral); color: var(--navy); border: none; border-radius: var(--radius-card); padding: .55rem 1.3rem; font-weight: 700; font-size: .88rem; white-space: nowrap; cursor: pointer; transition: .2s; font-family: var(--font-body); }
.newsletter-btn:hover { background: var(--coral-dark); }
.site-footer h6 { color: #fff; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1.2rem; }
.site-footer a { color: rgba(255,255,255,.6); font-size: .88rem; }
.site-footer a:hover { color: var(--coral); }
.footer-links li { margin-bottom: .7rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.5rem; padding: 1.2rem 0; font-size: .8rem; }
.social-icon { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: inline-flex; align-items: center; justify-content: center; color: #fff; margin-right: .5rem; font-size: .95rem; }
.social-icon:hover { background: var(--coral); border-color: var(--coral); color: var(--navy); }

/* ============================================================
   ENQUIRY MODAL
   ============================================================ */
.enquiry-modal .modal-content { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.enquiry-modal .modal-header { background: var(--navy); border-bottom: 3px solid var(--coral); padding: 1.1rem 1.5rem; }
.enquiry-modal .modal-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: #fff; }
.enquiry-modal .modal-header .btn-close { filter: invert(1) brightness(1.5); opacity: .7; }
.enquiry-modal .modal-header .btn-close:hover { opacity: 1; }
.enquiry-modal .modal-body { padding: 1.4rem 1.5rem; background: #fff; }
.enquiry-modal .form-label { font-size: .8rem; font-weight: 600; color: var(--navy); margin-bottom: .28rem; }
.enquiry-modal .form-control,
.enquiry-modal .form-select { font-size: .875rem; border-radius: var(--radius-card); border-color: #E2E8F0; padding: .5rem .85rem; }
.enquiry-modal .form-control:focus,
.enquiry-modal .form-select:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(245,196,0,.18); }
.enquiry-modal textarea.form-control { resize: none; }
.enquiry-modal .modal-footer { background: #F8F9FA; border-top: 1px solid #E9ECEF; padding: .9rem 1.5rem; }
.enquiry-modal .product-label-badge {
  display: inline-block; background: rgba(245,196,0,.15); color: var(--coral);
  border: 1px solid rgba(245,196,0,.3); font-size: .72rem; font-weight: 700;
  padding: .2rem .65rem; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: .04em;
}

/* ============================================================
   WHATSAPP FLOAT + MOBILE BAR
   ============================================================ */
.wa-float { position: fixed; bottom: 84px; right: 20px; width: 52px; height: 52px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; box-shadow: 0 6px 20px rgba(0,0,0,.25); z-index: 1035; transition: transform .2s; }
.wa-float:hover { color: #fff; transform: scale(1.08); }
.mobile-cta-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--navy); z-index: 1040; border-top: 1px solid rgba(255,255,255,.1); }
.mobile-cta-bar a,
.mobile-cta-bar button { flex: 1; text-align: center; color: #fff; font-size: .78rem; font-weight: 700; padding: .6rem .5rem; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .4rem; border: none; background: none; cursor: pointer; font-family: var(--font-body); text-decoration: none; white-space: nowrap; }
.mobile-cta-bar a i,
.mobile-cta-bar button i { font-size: 1rem; flex-shrink: 0; }
.mobile-cta-bar a.is-wa { background: #25D366; }
.mobile-cta-bar button.is-quote { background: #FF5733; }

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top {
  position: fixed; bottom: 144px; right: 20px;
  width: 40px; height: 40px; background: var(--navy); color: #fff;
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer; z-index: 1034;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s, transform .3s, background .2s;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.back-to-top.visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--coral); color: var(--navy); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199.98px) {
  .mega-menu { width: 700px; }
}
@media (max-width: 991.98px) {
  .mega-menu { display: none !important; }
  .hero-content { padding: 2.5rem 0 1.5rem; }
  .hero-illustration { padding-bottom: 2rem; }
  .hero-product-img { max-height: 300px; }
  .app-tabs-wrap { border-radius: var(--radius-card); padding: .4rem; }
  .app-tab-btn { padding: .5rem 1rem; font-size: .82rem; }
  .app-card { height: 190px; }
}
@media (max-width: 767.98px) {
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: 58px; }
  .wa-float { display: none; }
  .back-to-top { display: none; }
  .hero-content h1 { font-size: 1.9rem; }
  .hero-content { padding: 2rem 0 1rem; }
  .hero-product-img { max-height: 230px; }
  .section { padding: 3rem 0; }
  .testi-carousel-outer { padding: 0 3rem; }
  .newsletter-form { flex-direction: column; }
  .newsletter-btn { width: 100%; text-align: center; padding: .65rem 1rem; }
  .app-tabs-wrap { gap: .25rem; }
  .app-tab-btn { padding: .45rem .8rem; font-size: .78rem; }
  .app-card { height: 170px; }
  .app-icon { font-size: 1.8rem; }
  .app-name { font-size: .8rem; }
}
@media (max-width: 575.98px) {
  .top-band-left a:last-child { display: none; }
  .hero-content h1 { font-size: 1.7rem; }
  .hero-product-img { max-height: 190px; }
  .testi-carousel-outer { padding: 0 2.5rem; }
  .cta-btns { flex-direction: column; align-items: stretch; gap: .6rem; }
  .cta-btns .btn-coral,
  .cta-btns .btn-wa,
  .cta-btns .btn-orange-fill,
  .cta-btns .btn-outline-light-custom,
  .cta-btns .btn-navy-outline {
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* ============================================================
   RESOURCES DROPDOWN — hover, 210px
   ============================================================ */
.res-dropdown { position: relative; }
.res-menu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 0px);
  min-width: 210px;
  background: #fff;
  border-top: 3px solid var(--coral);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  box-shadow: 0 16px 48px rgba(0,0,0,.14);
  z-index: 1050;
  padding: .35rem 0;
}
.res-dropdown:hover .res-menu { display: block; }
.res-menu a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem 1.15rem;
  color: var(--text-secondary);
  font-size: .86rem;
  font-weight: 500;
  transition: background .15s, padding-left .15s, color .15s;
  white-space: nowrap;
}
.res-menu a i { color: var(--coral); font-size: .9rem; width: 16px; text-align: center; flex-shrink: 0; }
.res-menu a:hover { background: #F8F9FA; color: var(--navy); padding-left: 1.4rem; }
@media (max-width: 991.98px) { .res-menu { display: none !important; } }

/* ============================================================
   NAV QUOTE BTN — button variant (was <a>)
   ============================================================ */
.nav-quote-btn {
  background: var(--coral);
  color: var(--navy);
  border: none;
  border-radius: var(--radius-card);
  padding: .55rem 1.3rem;
  font-weight: 700;
  font-size: .88rem;
  white-space: nowrap;
  transition: .2s;
  cursor: pointer;
  font-family: var(--font-body);
  display: inline-block;
}
.nav-quote-btn:hover { background: var(--coral-dark); color: var(--navy); }

/* ============================================================
   PAGE HERO BAND — inner pages
   ============================================================ */
.page-hero-band {
  background: var(--navy);
  padding: .65rem 0;
}
.page-hero-band .wrap { width: 100%; }
.page-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .45rem;
  font-size: .78rem;
  color: rgba(255,255,255,.4);
  margin-bottom: 0;
  flex-wrap: wrap;
}
.page-breadcrumb a { color: rgba(255,255,255,.55); transition: color .15s; }
.page-breadcrumb a:hover { color: var(--coral); }
.page-breadcrumb .sep { color: rgba(255,255,255,.2); font-size: .65rem; }
.page-hero-band h1 {
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(1.5rem, 3.5vw, 2.3rem);
  font-weight: 800;
  margin-bottom: .65rem;
  line-height: 1.25;
}
.page-hero-sub { color: rgba(255,255,255,.58); font-size: .98rem; max-width: 640px; margin: 0; }

/* ============================================================
   RESOURCE SUB-NAV (tabs inside resource pages)
   ============================================================ */
.res-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: 2.5rem;
  border-bottom: 2px solid #E9ECEF;
  padding-bottom: 0;
}
.res-subnav a {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: .88rem;
  padding: .55rem 1.1rem;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  transition: .15s;
  position: relative;
  bottom: -2px;
  border-bottom: 2px solid transparent;
}
.res-subnav a:hover { color: var(--navy); }
.res-subnav a.active { color: var(--navy); border-bottom-color: var(--coral); background: rgba(245,196,0,.06); }

/* ============================================================
   PRODUCTS HUB PAGE
   ============================================================ */
.products-hub-section { padding-top: 2.5rem; }

/* Filter bar */
.hub-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  background: #fff;
  border: 1px solid #E9ECEF;
  border-radius: var(--radius-card);
  padding: .9rem 1.2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-card);
}
.filter-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
  flex-shrink: 0;
}
.filter-select {
  border: 1.5px solid #D0D5DD;
  border-radius: 6px;
  padding: .44rem .9rem;
  font-size: .85rem;
  color: var(--navy);
  background: #fff;
  font-family: var(--font-body);
  cursor: pointer;
  min-width: 155px;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236C757D' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.2rem;
}
.filter-select:focus { outline: none; border-color: var(--coral); }
.filter-divider { width: 1px; height: 22px; background: #E9ECEF; flex-shrink: 0; }
.filter-reset-btn {
  background: none;
  border: 1.5px solid #D0D5DD;
  border-radius: 6px;
  padding: .44rem 1rem;
  font-size: .83rem;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-body);
  transition: .15s;
  white-space: nowrap;
}
.filter-reset-btn:hover { border-color: var(--navy); color: var(--navy); }
.filter-count { margin-left: auto; font-size: .8rem; color: var(--text-secondary); white-space: nowrap; font-weight: 500; }

/* Hub layout — main grid + sticky sidebar */
.hub-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.hub-main { flex: 1; min-width: 0; }
.hub-sidebar { width: 300px; flex-shrink: 0; position: sticky; top: 100px; }

/* Category cards */
.cat-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
  border: 1px solid #E9ECEF;
  transition: transform .25s, box-shadow .25s;
  height: 100%;
}
.cat-card:hover { transform: translateY(-5px); box-shadow: 0 18px 48px rgba(0,0,0,.13); }
.cat-card-img { position: relative; height: 210px; overflow: hidden; }
.cat-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.cat-card:hover .cat-card-img img { transform: scale(1.06); }
.cat-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(6,16,32,.72) 100%);
  display: flex;
  align-items: flex-end;
  padding: .7rem 1rem;
}
.cat-count-badge {
  background: var(--coral);
  color: var(--navy);
  font-size: .7rem;
  font-weight: 700;
  padding: .22rem .75rem;
  border-radius: var(--radius-pill);
}
.cat-card-body { padding: 1.3rem 1.4rem 1.5rem; }
.cat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-bottom: .85rem;
  flex-shrink: 0;
}
.cat-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .5rem;
  line-height: 1.3;
}
.cat-desc {
  font-size: .84rem;
  color: var(--text-secondary);
  margin-bottom: .9rem;
  line-height: 1.65;
}
.cat-brands { display: flex; flex-wrap: wrap; gap: .28rem; margin-bottom: 1rem; }
.cat-brands span {
  background: #F0F4F8;
  color: var(--navy);
  font-size: .68rem;
  font-weight: 700;
  padding: .18rem .6rem;
  border-radius: var(--radius-pill);
}
.cat-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #0F2340;
  font-weight: 700;
  font-size: .86rem;
  border-bottom: 2px solid var(--coral);
  padding-bottom: .1rem;
  transition: gap .2s, color .15s;
}
.cat-cta:hover { gap: .65rem; color: var(--coral-dark); }

/* Quick enquiry sidebar card */
.qe-card {
  background: var(--navy);
  border-radius: var(--radius-card);
  padding: 1.6rem;
  box-shadow: 0 8px 32px rgba(15,35,64,.22);
}
.qe-header { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.3rem; }
.qe-icon {
  width: 38px; height: 38px; border-radius: 8px;
  background: rgba(245,196,0,.18); color: var(--coral);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0; margin-top: .1rem;
}
.qe-header h5 { font-family: var(--font-display); color: #fff; font-size: 1.05rem; margin-bottom: .25rem; }
.qe-header p { color: rgba(255,255,255,.55); font-size: .8rem; margin: 0; }
.qe-form .form-control,
.qe-form .form-select {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-size: .84rem;
  margin-bottom: .6rem;
  border-radius: 6px;
  font-family: var(--font-body);
}
.qe-form .form-control::placeholder { color: rgba(255,255,255,.38); }
.qe-form .form-control:focus,
.qe-form .form-select:focus {
  background: rgba(255,255,255,.12);
  border-color: var(--coral);
  box-shadow: none;
  color: #fff;
}
.qe-form .form-select { color: rgba(255,255,255,.55); }
.qe-form .form-select option { background: #16345C; color: #fff; }
.qe-form textarea.form-control { resize: none; }
.qe-submit-btn {
  width: 100%;
  background: var(--coral);
  color: var(--navy);
  border: none;
  border-radius: 6px;
  padding: .75rem;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  font-family: var(--font-body);
  transition: .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qe-submit-btn:hover { background: var(--coral-dark); }
.qe-divider {
  text-align: center;
  font-size: .74rem;
  color: rgba(255,255,255,.3);
  margin: 1rem 0 .8rem;
  position: relative;
}
.qe-divider::before, .qe-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: rgba(255,255,255,.12);
}
.qe-divider::before { left: 0; }
.qe-divider::after { right: 0; }
.qe-contact-links { display: flex; flex-direction: column; gap: .45rem; }
.qe-contact-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: rgba(255,255,255,.62);
  font-size: .81rem;
  font-weight: 500;
  transition: color .15s;
  padding: .38rem .5rem;
  border-radius: 6px;
  transition: .15s;
}
.qe-contact-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.qe-contact-link i { color: var(--coral); width: 16px; }
.qe-contact-link.is-wa i { color: #25D366; }

/* Hub bottom CTA */
.hub-cta {
  background: linear-gradient(135deg, var(--navy-mid) 0%, var(--navy) 100%);
  border-radius: var(--radius-card);
  padding: 2.2rem 2rem;
  margin-top: 3rem;
}
.hub-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.hub-cta h4 { font-family: var(--font-display); color: #fff; font-size: 1.3rem; margin-bottom: .4rem; }
.hub-cta p { color: rgba(255,255,255,.6); font-size: .9rem; margin: 0; }

/* ============================================================
   RESOURCE LIST CARDS (blogs, case-studies, news)
   ============================================================ */
.res-list-card {
  background: #fff;
  border: 1px solid #E9ECEF;
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform .22s, box-shadow .22s;
  height: 100%;
}
.res-list-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,.1); transform: translateY(-4px); }
.res-list-card-thumb { height: 195px; overflow: hidden; background: var(--navy-mid); }
.res-list-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.res-list-card:hover .res-list-card-thumb img { transform: scale(1.06); }
.res-list-card-body { padding: 1.15rem 1.3rem 1.35rem; }
.res-tag-pill {
  display: inline-block;
  background: #EBF5FF;
  color: #185FA5;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .18rem .65rem;
  border-radius: var(--radius-pill);
  margin-bottom: .65rem;
}
.res-card-title { font-family: var(--font-display); font-size: .97rem; font-weight: 700; color: var(--navy); margin-bottom: .4rem; line-height: 1.4; }
.res-card-meta { font-size: .77rem; color: var(--text-secondary); }
.res-card-link { color: var(--coral-dark); font-weight: 700; font-size: .83rem; display: inline-flex; align-items: center; gap: .32rem; margin-top: .85rem; transition: gap .2s, color .15s; }
.res-card-link:hover { gap: .55rem; color: var(--coral-dark); }

/* Case study cards */
.case-card {
  background: #fff;
  border: 1px solid #E9ECEF;
  border-radius: var(--radius-card);
  overflow: hidden;
  height: 100%;
  transition: transform .22s, box-shadow .22s;
}
.case-card:hover { box-shadow: 0 14px 40px rgba(0,0,0,.11); transform: translateY(-4px); }
.case-card-img { height: 240px; overflow: hidden; position: relative; }
.case-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.case-card:hover .case-card-img img { transform: scale(1.05); }
.case-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(6,16,32,.75) 100%); display: flex; align-items: flex-end; padding: .75rem 1rem; }
.case-tag-pill { background: var(--coral); color: var(--navy); font-size: .7rem; font-weight: 700; padding: .22rem .75rem; border-radius: var(--radius-pill); }
.case-card-body { padding: 1.3rem 1.5rem 1.6rem; }
.case-result-row { display: flex; gap: 1.5rem; margin-bottom: 1.1rem; }
.case-stat-num { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: var(--coral-dark); line-height: 1; }
.case-stat-label { font-size: .72rem; color: var(--text-secondary); margin-top: .18rem; }
.case-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; line-height: 1.4; }
.case-excerpt { font-size: .84rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: 0; }

/* Downloads */
.dl-section-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: .85rem; }
.download-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.1rem;
  background: #fff;
  border: 1px solid #E9ECEF;
  border-radius: var(--radius-card);
  margin-bottom: .6rem;
  transition: box-shadow .2s, border-color .2s;
}
.download-row:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: var(--coral); }
.dl-icon {
  width: 44px; height: 44px; border-radius: var(--radius-card);
  background: #FFF8E6; display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: var(--coral-dark); flex-shrink: 0;
}
.dl-info { flex: 1; min-width: 0; }
.dl-title { font-weight: 600; font-size: .9rem; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-meta { font-size: .76rem; color: var(--text-secondary); margin-top: .12rem; }
.dl-list { border-radius: var(--radius-card); overflow: hidden; }
.dl-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: .4rem .9rem;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  gap: .35rem;
  transition: background .15s;
  text-decoration: none;
  flex-shrink: 0;
}
.dl-btn:hover { background: var(--navy-mid); color: #fff; }

/* FAQs */
.faq-group-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .85rem;
  padding-bottom: .45rem;
  border-bottom: 2px solid var(--coral);
  display: inline-block;
}
.faq-item {
  border: 1px solid #E9ECEF;
  border-radius: var(--radius-card);
  margin-bottom: .6rem;
  overflow: hidden;
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 1.25rem;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  font-size: .93rem;
  gap: .75rem;
  transition: background .15s;
  user-select: none;
}
.faq-question:hover { background: #F8F9FA; }
.faq-question i { font-size: .72rem; transition: transform .25s; flex-shrink: 0; color: var(--text-secondary); }
.faq-item.open .faq-question { background: var(--navy); color: #fff; }
.faq-item.open .faq-question i { transform: rotate(180deg); color: var(--coral); }
.faq-answer { padding: 0 1.25rem; max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .3s ease; background: #FAFAFA; }
.faq-item.open .faq-answer { padding: 1rem 1.25rem 1.15rem; max-height: 500px; }
.faq-answer p { font-size: .88rem; color: var(--text-secondary); line-height: 1.75; margin: 0; }

/* ============================================================
   PRODUCTS HUB RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
  .hub-layout { flex-direction: column; }
  .hub-sidebar { width: 100%; position: static; order: -1; }
  .qe-card { padding: 1.3rem; }
  .hub-filter-bar { gap: .5rem; }
}
@media (max-width: 767.98px) {
  .filter-count { width: 100%; margin-left: 0; }
  .hub-cta-inner { flex-direction: column; text-align: center; }
  .case-result-row { gap: 1rem; }
  .download-row { flex-wrap: wrap; }
  .dl-btn { width: 100%; justify-content: center; }
  .dl-title { white-space: normal; }
  .page-hero-band { padding: .75rem 0; }
}

/* ============================================================
   garment-detail — page-specific styles
   ============================================================ */
/* ── Utilities ─────────────────────────────────────────── */
.eyebrow-sm { font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--coral);display:block;margin-bottom:.5rem; }
.eyebrow-light { color:rgba(255,255,255,.45); }
.gd-section { padding:5rem 0; }
.gd-alt  { background:#F8F9FC; }
.gd-dark { background:var(--navy); }
.gd-deep { background:#07111F; }
.section-title-light { color:#fff; }
.section-sub-light { color:rgba(255,255,255,.55); }
.back-link { display:inline-flex;align-items:center;gap:.4rem;color:var(--navy);font-size:.875rem;font-weight:600;text-decoration:none; }
.back-link:hover { color:var(--coral); }
.btn-outline-white { display:inline-flex;align-items:center;gap:.45rem;padding:.8rem 1.9rem;font-size:.95rem;font-weight:700;border:2px solid rgba(255,255,255,.35);color:rgba(255,255,255,.85);background:transparent;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;transition:.2s; }
.btn-outline-white:hover { background:rgba(255,255,255,.1);border-color:#fff;color:#fff; }

/* ── HERO ─────────────────────────────────────────────── */
.gd-hero {
  min-height:92vh; display:flex; align-items:center;
  background-image: url("../images/coloreel-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position:relative; overflow:hidden; padding:5.5rem 0 4.5rem;
}
.gd-hero::before {
  content:""; position:absolute; inset:0;
  background: linear-gradient(105deg, rgba(3,10,22,.93) 0%, rgba(7,17,31,.82) 40%, rgba(12,20,40,.55) 70%, rgba(20,10,40,.45) 100%);
}
.gd-hero::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 60% 70% at 75% 50%, rgba(245,140,40,.08) 0%, transparent 60%),
              radial-gradient(ellipse 40% 50% at 10% 20%, rgba(30,111,217,.1) 0%, transparent 55%);
}
.gd-hero-badge {
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(245,196,0,.12);border:1px solid rgba(245,196,0,.35);
  color:#F5C400;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  padding:.45rem 1.2rem;border-radius:var(--radius-pill);margin-bottom:1.4rem;
}
.gd-hero-badge i { font-size:.8rem; }
.gd-hero-tag {
  display:inline-block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.5);margin-bottom:.6rem;
}
.gd-hero-title {
  font-size:clamp(1.9rem,4vw,3.2rem);font-weight:800;color:#fff;line-height:1.07;margin-bottom:1.1rem;
}
.gd-hero-title .accent { color:var(--coral); }
.gd-hero-sub { font-size:1.05rem;color:rgba(255,255,255,.62);line-height:1.75;margin-bottom:1.85rem;max-width:520px; }
.gd-chips { display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem; }
.gd-chip {
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.88);font-size:.77rem;font-weight:600;
  padding:.38rem .95rem;border-radius:var(--radius-pill);
  backdrop-filter:blur(6px);
}
.gd-chip i { color:var(--coral); }
.gd-ctas { display:flex;gap:.85rem;flex-wrap:wrap; }

/* Hero machine visual */
.gd-hero-visual {
  border-radius:18px;overflow:hidden;
  position:relative;
}
.gd-hero-visual img { width:100%;height:520px;object-fit:cover;display:block; }
.gd-hero-visual::after { display:none; }
.gd-hero-float {
  position:absolute;bottom:1.4rem;left:1.4rem;right:1.4rem;z-index:2;
  display:flex;gap:.65rem;flex-wrap:wrap;
}
.gd-hero-pill {
  display:inline-flex;align-items:center;gap:.35rem;
  background:rgba(3,10,22,.8);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-pill);
  color:#fff;font-size:.72rem;font-weight:600;padding:.32rem .78rem;
}
.gd-hero-pill i { color:var(--coral); }

/* ── HERO BREADCRUMB ─────────────────────────────────── */
.hero-breadcrumb {
  display:flex;align-items:center;gap:.45rem;
  font-size:.72rem;color:rgba(255,255,255,.4);margin-bottom:1.4rem;flex-wrap:wrap;
}
.hero-breadcrumb a { color:rgba(255,255,255,.5);text-decoration:none;transition:.15s; }
.hero-breadcrumb a:hover { color:var(--coral); }
.hero-breadcrumb i { font-size:.6rem;opacity:.5; }
.hero-breadcrumb span { color:rgba(255,255,255,.7); }

/* ── STATS STRIP ─────────────────────────────────────── */
.gd-stats { background:var(--coral);padding:1.4rem 0; }
.gd-stats-grid { display:grid;grid-template-columns:repeat(4,1fr);text-align:center; }
.gd-stat { padding:0 1rem; }
.gd-stat + .gd-stat { border-left:1px solid rgba(15,35,64,.18); }
.gd-stat-num { display:block;font-size:2.75rem;font-weight:800;color:var(--navy);line-height:1;margin-bottom:.3rem; }
.gd-stat-lbl { font-size:.68rem;color:rgba(15,35,64,.65);font-weight:700;text-transform:uppercase;letter-spacing:.07em;line-height:1.4; }

/* ── EFFECTS CAROUSEL (no scroll) ───────────────────────── */
.effects-scroll-section { background:#07111F;padding:5rem 0 4rem; }
.effects-carousel-outer { overflow:hidden; }
.effects-scroll-track {
  display:flex;
  gap:1.1rem;
  transition:transform .45s cubic-bezier(.25,.46,.45,.94);
  will-change:transform;
}
.eff-card {
  flex:0 0 calc(20% - 0.88rem);
  height:340px;border-radius:14px;overflow:hidden;position:relative;
  cursor:pointer;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.06);
  transition:transform .3s,box-shadow .3s;
}
.eff-card:hover { transform:translateY(-6px);box-shadow:0 20px 56px rgba(0,0,0,.55); }
.eff-card img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease; }
.eff-card:hover img { transform:scale(1.08); }
.eff-card-overlay {
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,10,22,.08) 0%,rgba(3,10,22,.75) 60%,rgba(3,10,22,.95) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem;
  transition:background .3s;
}
.eff-card:hover .eff-card-overlay { background:linear-gradient(180deg,rgba(3,10,22,.15) 0%,rgba(3,10,22,.82) 55%,rgba(3,10,22,.97) 100%); }
.eff-card-tag {
  display:inline-flex;align-items:center;gap:.3rem;
  background:var(--coral);color:var(--navy);
  font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  padding:.2rem .6rem;border-radius:var(--radius-pill);margin-bottom:.45rem;width:fit-content;
}
.eff-card-title { font-size:.88rem;font-weight:800;color:#fff;line-height:1.25;margin-bottom:.25rem; }
.eff-card-desc { font-size:.72rem;color:rgba(255,255,255,.55);line-height:1.45;margin:0; }
.effects-scroll-nav { display:flex;gap:.7rem; }
.eff-nav-btn {
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);backdrop-filter:blur(6px);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.2s;font-size:1rem;flex-shrink:0;
}
.eff-nav-btn:hover { background:var(--coral);border-color:var(--coral);color:var(--navy); }

/* ── CONCEPT INTRO SPLIT ─────────────────────────────── */
.gd-concept { display:grid;grid-template-columns:1fr 1fr;min-height:540px; }
.gd-concept-img { position:relative;overflow:hidden; }
.gd-concept-img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease; }
.gd-concept:hover .gd-concept-img img { transform:scale(1.04); }
.gd-concept-body {
  background:#F8F9FC;display:flex;flex-direction:column;
  justify-content:center;padding:4.5rem 4rem;
}
.gd-concept-body h2 { font-size:2.1rem;font-weight:800;color:var(--navy);line-height:1.2;margin-bottom:1rem; }
.gd-concept-body p { font-size:.93rem;color:var(--text-secondary);line-height:1.8;margin-bottom:1.4rem; }
.gd-check-list { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem; }
.gd-check-list li { display:flex;align-items:flex-start;gap:.6rem;font-size:.88rem;color:var(--navy);font-weight:600;line-height:1.4; }
.gd-check-list li i { color:var(--coral);flex-shrink:0;margin-top:2px; }

/* ── FEATURE STRIPS (alternating full-width) ─────────── */
.fs-strip { display:flex;align-items:stretch;min-height:460px; }
.fs-strip.fs-rev { flex-direction:row-reverse; }
.fs-img { flex:0 0 50%;position:relative;overflow:hidden; }
.fs-img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease; }
.fs-strip:hover .fs-img img { transform:scale(1.05); }
.fs-body {
  flex:1;display:flex;flex-direction:column;
  justify-content:center;padding:3.5rem 4.5rem;background:#fff;
}
.fs-body.fs-light { background:#F8F9FC; }
.fs-body.fs-navy { background:var(--navy); }
.fs-num { font-size:5.5rem;font-weight:800;color:#EAEDF2;line-height:1;margin-bottom:.05rem; }
.fs-navy .fs-num { color:rgba(255,255,255,.06); }
.fs-eyebrow { font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--coral);display:block;margin-bottom:.45rem; }
.fs-title { font-size:1.8rem;font-weight:800;color:var(--navy);line-height:1.2;margin-bottom:.75rem; }
.fs-navy .fs-title { color:#fff; }
.fs-desc { font-size:.9rem;color:var(--text-secondary);line-height:1.8;margin-bottom:1.25rem; }
.fs-navy .fs-desc { color:rgba(255,255,255,.55); }
.fs-bullets { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.45rem; }
.fs-bullets li { display:flex;align-items:flex-start;gap:.55rem;font-size:.85rem;color:var(--navy);font-weight:500;line-height:1.4; }
.fs-navy .fs-bullets li { color:rgba(255,255,255,.72); }
.fs-bullets li i { color:var(--coral);flex-shrink:0;margin-top:2px; }

/* ── CAPABILITY CARDS ────────────────────────────────── */
.cap-card {
  background:#fff;border-radius:14px;border:1px solid #E9ECEF;
  overflow:hidden;height:100%;display:flex;flex-direction:column;
  transition:.25s;
}
.cap-card:hover { box-shadow:0 20px 56px rgba(15,35,64,.13);transform:translateY(-6px);border-color:var(--coral); }
.cap-card-thumb { height:220px;overflow:hidden;position:relative;background:var(--navy-mid); }
.cap-card-thumb img { width:100%;height:100%;object-fit:cover;display:block;transition:.5s; }
.cap-card:hover .cap-card-thumb img { transform:scale(1.08); }
.cap-card-flag {
  position:absolute;top:12px;left:12px;
  background:var(--navy);color:#fff;font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:.24rem .7rem;border-radius:var(--radius-pill);
}
.cap-card-body { padding:1.6rem;flex:1;display:flex;flex-direction:column; }
.cap-icon { width:46px;height:46px;border-radius:10px;background:#FFF8DE;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--coral);margin-bottom:.85rem; }
.cap-name { font-size:1.05rem;font-weight:800;color:var(--navy);margin-bottom:.4rem; }
.cap-desc { font-size:.82rem;color:var(--text-secondary);line-height:1.6;margin-bottom:1rem;flex:1; }
.cap-list { list-style:none;padding:0;margin:0; }
.cap-list li { font-size:.77rem;color:var(--navy);font-weight:500;padding:.28rem 0;border-bottom:1px solid #F1F4F8;display:flex;align-items:flex-start;gap:.4rem;line-height:1.4; }
.cap-list li:last-child { border-bottom:none; }
.cap-list li::before { content:"•";color:var(--coral);font-weight:900;flex-shrink:0; }

/* ── BEFORE / AFTER ─────────────────────────────────── */
.ba-dark { background:#07111F;padding:5rem 0; }
.ba-wrap { border-radius:16px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.35);max-width:420px;margin:0 auto; }
.ba-slider { position:relative;overflow:hidden;aspect-ratio:1/1;cursor:ew-resize;user-select:none; }
.ba-before,.ba-after { position:absolute;inset:0; }
.ba-before img,.ba-after img { width:100%;height:100%;object-fit:cover;display:block;pointer-events:none; }
.ba-after { clip-path:inset(0 0 0 50%);transition:clip-path .05s; }
.ba-divider { position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;z-index:10;transform:translateX(-50%);pointer-events:none; }
.ba-handle { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,.3);cursor:ew-resize;pointer-events:all; }
.ba-handle i { color:var(--navy);font-size:.9rem; }
.ba-lbl { position:absolute;bottom:22px;padding:.25rem .7rem;background:rgba(255,255,255,.9);color:#333;font-size:.72rem;font-weight:700;border-radius:var(--radius-pill);z-index:5; }
.ba-lbl-l { left:25%; transform:translateX(-50%); }
.ba-lbl-r { left:75%; transform:translateX(-50%); background:linear-gradient(90deg,#f5a623,#e8445a,#a855f7,#3b82f6); color:#fff; }
.ba-caption { text-align:center;font-size:.8rem;color:rgba(255,255,255,.45);font-weight:500;margin-top:.5rem; }
.ba-callouts { display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem; }
.ba-callout {
  text-align:center;padding:1.35rem 1rem;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-card);transition:.2s;
}
.ba-callout:hover { border-color:var(--coral);background:rgba(245,196,0,.05); }
.ba-callout-icon { font-size:1.6rem;color:var(--coral);margin-bottom:.4rem; }
.ba-callout-label { font-size:.8rem;font-weight:700;color:#fff;margin-bottom:.2rem; }
.ba-callout-val { font-size:.7rem;color:rgba(255,255,255,.4); }
.ba-callout-val strong { color:var(--coral); }

/* ── APPLICATIONS GALLERY ────────────────────────────── */
.gd-apps-bg { background:var(--navy);padding:5.5rem 0; }
.gd-apps-intro { text-align:center;max-width:620px;margin:0 auto 3.5rem; }
.gd-apps-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.gd-app-card {
  border-radius:14px;overflow:hidden;position:relative;
  background:#0d1f38;
  box-shadow:0 8px 28px rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.06);
  transition:transform .35s,box-shadow .35s,border-color .35s;
}
.gd-app-card:hover { transform:translateY(-6px);box-shadow:0 20px 56px rgba(0,0,0,.5);border-color:rgba(245,140,40,.35); }
.gd-app-card.featured { grid-column:span 2; }
.gd-app-card-inner { position:relative;height:100%; }
.gd-app-card-img {
  width:100%;display:block;object-fit:cover;
  transition:transform .55s ease;
}
.gd-app-card:not(.featured) .gd-app-card-img { height:280px; }
.gd-app-card.featured .gd-app-card-img { height:360px; }
.gd-app-card:hover .gd-app-card-img { transform:scale(1.07); }
.gd-app-overlay {
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(6,16,32,.7) 65%,rgba(6,16,32,.96) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.4rem 1.5rem 1.5rem;
  transition:background .3s;
}
.gd-app-card:hover .gd-app-overlay {
  background:linear-gradient(180deg,rgba(6,16,32,.1) 0%,rgba(6,16,32,.78) 55%,rgba(6,16,32,.97) 100%);
}
.gd-app-tag {
  display:inline-flex;align-items:center;gap:.3rem;
  background:var(--coral);color:var(--navy);
  font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  padding:.2rem .6rem;border-radius:var(--radius-pill);margin-bottom:.55rem;width:fit-content;
}
.gd-app-name {
  display:block;color:#fff;font-weight:700;line-height:1.3;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
}
.gd-app-card:not(.featured) .gd-app-name { font-size:.92rem; }
.gd-app-card.featured .gd-app-name { font-size:1.25rem; }
.gd-app-desc {
  font-size:.75rem;color:rgba(255,255,255,.55);line-height:1.5;
  margin-top:.3rem;max-height:0;overflow:hidden;
  transition:max-height .35s ease,opacity .35s ease;opacity:0;
}
.gd-app-card:hover .gd-app-desc { max-height:80px;opacity:1; }

/* ── SPEC TABLE ──────────────────────────────────────── */
.spec-table-wrap { max-width:820px;margin:0 auto; }
.spec-table-card { background:#fff;border-radius:var(--radius-card);box-shadow:0 6px 32px rgba(15,35,64,.12);overflow:hidden;border:1px solid #E2E8F0; }
.spec-table { width:100%;border-collapse:collapse; }
.spec-table tr { border-bottom:1px solid #EEF1F6;transition:background .15s; }
.spec-table tr:last-child { border-bottom:none; }
.spec-table tr:hover td { background:#FFF8E6 !important; }
.spec-table td { padding:.9rem 1.25rem;font-size:.875rem;vertical-align:middle; }
.spec-table td:first-child { color:var(--text-secondary);width:42%;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;border-left:3px solid var(--coral);background:#F8FAFD; }
.spec-table td:last-child  { color:var(--navy);font-weight:600;font-size:.9rem;background:#fff; }
.spec-table tr:nth-child(even) td:first-child { background:#F3F6FB; }
.spec-table tr:nth-child(even) td:last-child  { background:#FAFBFE; }
.spec-html-wrap table { width:100%;border-collapse:collapse; }
.spec-html-wrap table th,.spec-html-wrap table td { padding:.6rem 1rem;border:1px solid var(--border,#dde0e8);font-size:.87rem;text-align:left; }
.spec-html-wrap table th { background:#f5f7fa;font-weight:700;color:#16345C; }
.spec-html-wrap table tr:nth-child(even) td { background:#fafbfd; }

/* ── WHY COLOREEL ────────────────────────────────────── */
.why-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; }
.why-card { padding:2rem;border:1px solid rgba(255,255,255,.09);border-radius:12px;transition:.25s;height:100%; }
.why-card:hover { border-color:var(--coral);background:rgba(255,255,255,.03); }
.why-num { font-size:3rem;font-weight:800;color:var(--coral);line-height:1;margin-bottom:.55rem; }
.why-title { font-size:1rem;font-weight:700;color:#fff;margin-bottom:.38rem; }
.why-desc { font-size:.82rem;color:rgba(255,255,255,.52);margin:0;line-height:1.65; }

/* ── FAQ ─────────────────────────────────────────────── */
.faq-accordion .accordion-item { border:1px solid #E9ECEF;border-radius:var(--radius-card) !important;margin-bottom:.6rem;overflow:hidden; }
.faq-accordion .accordion-button { font-size:.9rem;font-weight:600;color:var(--navy);background:#fff;box-shadow:none; }
.faq-accordion .accordion-button:not(.collapsed) { color:var(--coral);background:#FFF9F5;box-shadow:none; }
.faq-accordion .accordion-body { font-size:.875rem;color:var(--text-secondary);line-height:1.7; }

/* ── RELATED PRODUCTS ────────────────────────────────── */
.prod-card-link { display:block;text-decoration:none;color:inherit;height:100%; }
.prod-card-link:hover .prod-card { box-shadow:0 18px 48px rgba(0,0,0,.13);transform:translateY(-4px); }
.prod-card { transition:transform .25s,box-shadow .25s; }
.prod-cta-hint { display:flex;align-items:center;gap:.35rem;color:var(--coral);font-size:.82rem;font-weight:700;margin-top:.9rem;padding-top:.85rem;border-top:1px solid #F1F4F8; }

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width:991.98px) {
  /* Tablet (768–991px): two-column maintained, just smaller */
  .gd-hero { min-height:auto; padding:3rem 0 2rem; background-position:60% center; }
  .gd-hero .col-lg-6 { width:50%; flex:0 0 50%; max-width:50%; }
  .gd-hero .row { --bs-gutter-x:1.25rem; --bs-gutter-y:0; }
  .gd-hero-title { font-size:1.55rem; }
  .gd-hero-sub { font-size:.88rem; margin-bottom:1rem; }
  .gd-chips { margin-bottom:1rem; gap:.4rem; }
  .gd-hero-visual img { height:260px; }
  .gd-stats { padding:1rem 0; }
  .gd-stats-grid { grid-template-columns:repeat(2,1fr);gap:0; }
  .gd-stat { padding:.6rem .75rem; }
  .gd-stat-num { font-size:2.1rem;margin-bottom:.2rem; }
  .gd-stat-lbl { font-size:.63rem; }
  .gd-stat:nth-child(3) { border-left:none;border-top:1px solid rgba(15,35,64,.18); }
  .gd-stat:nth-child(4) { border-top:1px solid rgba(15,35,64,.18); }
  .gd-concept { grid-template-columns:1fr; }
  .gd-concept-img { min-height:300px; }
  .gd-concept-body { padding:2.5rem 1.75rem; }
  .fs-strip,.fs-strip.fs-rev { flex-direction:column; }
  .fs-img { min-height:280px;flex:none; }
  .fs-body { padding:2.5rem 1.75rem; }
  .fs-title { font-size:1.45rem; }
  .fs-num { font-size:3.5rem; }
  .gd-apps-grid { grid-template-columns:1fr 1fr; }
  .gd-app-card.featured { grid-column:span 2; }
  .gd-app-card.featured .gd-app-card-img { height:300px; }
  .gd-app-card:not(.featured) .gd-app-card-img { height:240px; }
  .eff-card { flex:0 0 calc(33.333% - 0.74rem);height:300px; }
  .why-grid { grid-template-columns:1fr 1fr; }
  .ba-callouts { grid-template-columns:1fr 1fr; }
}
/* ── Phone hero: full-banner, badge+title on image ─────── */
@media (max-width:767.98px) {
  .gd-hero {
    background-size: contain;
    background-position: top center;
    background-color: #07111F;
    display: block;
    min-height: 0;
    padding: 0;
    position: relative;
  }
  /* Left-side dark panel (badge/title readability) + bottom fade into content */
  .gd-hero::before {
    background:
      linear-gradient(to right,  rgba(3,10,22,.78) 0%, rgba(3,10,22,.35) 50%, transparent 72%),
      linear-gradient(to bottom, transparent 0%, transparent 44%, rgba(3,10,22,.88) 62%, rgba(3,10,22,1) 76%);
  }
  /* Remove positioning from every ancestor between section and badge/title
     so position:absolute on badge/title resolves to .gd-hero (the section) */
  .gd-hero .wrap    { position:static; padding-top:52vw; padding-bottom:2.5rem; }
  .gd-hero .row     { position:static; display:flex; --bs-gutter-x:1.25rem; --bs-gutter-y:0; }
  .gd-hero .col-lg-6 { position:static; width:100%; flex:0 0 100%; max-width:100%; }
  /* Badge + title: anchor to .gd-hero — pushed to upper area of the banner */
  .gd-hero-badge {
    position:absolute; top:-35vw; left:1.25rem;
    z-index:3; margin-bottom:0;
    font-size:.66rem; padding:.28rem .75rem;
    white-space:normal; align-items:flex-start; max-width:58vw; line-height:1.5;
  }
  .gd-hero-badge i { margin-top:.15rem; flex-shrink:0; }
  .gd-hero-title {
    position:absolute; top:7.5vw; left:1.25rem; right:38%;
    z-index:3; font-size:1.3rem; line-height:1.12; margin-bottom:0;
  }
  .gd-hero-visual { display:none; }
  .hero-breadcrumb { display:none; }
  .gd-hero-sub { font-size:.9rem; margin-bottom:1rem; max-width:none; }
  .gd-chips { gap:.4rem; margin-bottom:1rem; }
  .gd-chip { font-size:.7rem; padding:.25rem .6rem; }
  .gd-ctas { gap:.6rem; }
  .gd-hero-float { display:none; }
}
@media (max-width:575.98px) {
  .gd-stats { padding:.75rem 0; }
  .gd-stat { padding:.5rem .5rem; }
  .gd-stat-num { font-size:1.75rem;margin-bottom:.15rem; }
  .gd-stat-lbl { font-size:.6rem;letter-spacing:.05em; }
  .gd-apps-grid { grid-template-columns:1fr; }
  .gd-app-card.featured { grid-column:span 1; }
  .gd-app-card.featured .gd-app-card-img { height:240px; }
  .gd-app-card:not(.featured) .gd-app-card-img { height:220px; }
  .why-grid { grid-template-columns:1fr; }
  .gd-hero .wrap { padding-top:41vw; }
  .gd-hero-badge { top-37vw; font-size:.62rem; padding:.24rem .65rem; }
  .gd-hero-title { top:-22vw; font-size:1.05rem; right:35%; }
  .gd-hero-sub { font-size:.82rem; margin-bottom:.75rem; }
  .gd-chips { margin-bottom:.75rem; }
  .ba-callouts { grid-template-columns:1fr 1fr; }
  .eff-card { flex:0 0 calc(50% - 0.55rem);height:260px; }
}

/* ============================================================
   product-detail — page-specific styles
   ============================================================ */
/* ── Base ──────────────────────────────────────────────── */
.pd-section     { padding:4rem 0; }
.pd-section-alt { background:#F8F9FC; }
.pd-dark { background:linear-gradient(160deg,#071020 0%,#0F2347 50%,#071020 100%);position:relative;overflow:hidden; }
.pd-dark::before { content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 80% 30%,rgba(245,140,40,.08) 0%,transparent 60%),radial-gradient(ellipse 40% 50% at 15% 70%,rgba(30,100,200,.07) 0%,transparent 55%);pointer-events:none; }
.eyebrow-sm     { font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--coral);display:block;margin-bottom:.4rem; }

/* ── Product Image Carousel ── */
.pd-carousel-wrap { display:flex;flex-direction:column;gap:.8rem; }
.pd-car-main { position:relative;border-radius:var(--radius-card);overflow:hidden;background:#F1F4F8;border:1px solid #E9ECEF; }
.pd-car-viewport { overflow:hidden; }
.pd-car-track { display:flex;transition:transform .42s cubic-bezier(.25,.46,.45,.94); }
.pd-car-slide { flex:0 0 100%;height:400px;display:flex;align-items:center;justify-content:center;background:#F1F4F8; }
.pd-car-slide img { max-height:520px;max-width:100%;object-fit:contain; }
.pd-car-arrow { position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid #E9ECEF;color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,.1); }
.pd-car-arrow:hover { background:var(--coral);border-color:var(--coral);color:#fff; }
.pd-car-prev { left:10px; }
.pd-car-next { right:10px; }
.pd-car-dots { display:flex;gap:.4rem;justify-content:center; }
.pd-car-dot { width:8px;height:8px;border-radius:50%;border:none;background:#D0D5DD;cursor:pointer;transition:.2s;padding:0; }
.pd-car-dot.active { background:var(--coral);width:22px;border-radius:4px; }
.pd-thumbs { display:flex;gap:.6rem; }
.pd-thumb { width:74px;height:66px;border-radius:10px;border:2px solid #E9ECEF;background:#F8F9FA;overflow:hidden;cursor:pointer;flex-shrink:0;transition:.2s; }
.pd-thumb:hover,.pd-thumb.active { border-color:var(--coral); }
.pd-thumb img { width:100%;height:100%;object-fit:cover; }

/* ── Applications Gallery ── */
.pd-apps-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; }
.pd-app-card { border-radius:14px;overflow:hidden;position:relative;background:#0d1f38;box-shadow:0 8px 28px rgba(0,0,0,.12);border:1px solid rgba(0,0,0,.08);transition:transform .35s,box-shadow .35s; }
.pd-app-card:hover { transform:translateY(-5px);box-shadow:0 18px 48px rgba(0,0,0,.18); }
.pd-app-card.pd-app-featured { grid-column:span 2; }
.pd-app-img { width:100%;display:block;object-fit:cover;transition:transform .5s ease; }
.pd-app-card:not(.pd-app-featured) .pd-app-img { height:260px; }
.pd-app-card.pd-app-featured .pd-app-img { height:340px; }
.pd-app-card:hover .pd-app-img { transform:scale(1.06); }
.pd-app-overlay { position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(6,16,32,.72) 65%,rgba(6,16,32,.97) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.3rem 1.4rem 1.4rem; }
.pd-app-tag { display:inline-flex;align-items:center;background:var(--coral);color:var(--navy);font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;padding:.2rem .6rem;border-radius:var(--radius-pill);margin-bottom:.5rem;width:fit-content; }
.pd-app-name { display:block;color:#fff;font-weight:700;font-size:.95rem;line-height:1.3;margin-bottom:.25rem; }
.pd-app-card.pd-app-featured .pd-app-name { font-size:1.2rem; }
.pd-app-desc { font-size:.75rem;color:rgba(255,255,255,.6);line-height:1.45;margin:0;max-height:0;overflow:hidden;transition:max-height .3s,opacity .3s;opacity:0; }
.pd-app-card:hover .pd-app-desc { max-height:70px;opacity:1; }
@media (max-width:991.98px) { .pd-apps-grid { grid-template-columns:1fr 1fr; } .pd-app-card.pd-app-featured { grid-column:span 2; } }
@media (max-width:575.98px) { .pd-apps-grid { grid-template-columns:1fr; } .pd-app-card.pd-app-featured { grid-column:span 1; } .pd-app-card.pd-app-featured .pd-app-img,.pd-app-card:not(.pd-app-featured) .pd-app-img { height:220px; } }

/* ── Video Section ── */
.pd-video-section { background:#07111F;padding:5rem 0; }
.pd-video-frame { border-radius:14px;overflow:hidden;box-shadow:0 24px 72px rgba(0,0,0,.55);position:relative;padding-top:56.25%; }
.pd-video-frame iframe { position:absolute;inset:0;width:100%;height:100%;border:0; }

/* ── Hero Info ─────────────────────────────────────────── */
.pd-info    { padding-left:2.5rem; }
.pd-badges  { display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem; }
.pd-badge   { font-size:.7rem;font-weight:700;padding:.28rem .8rem;border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:.05em; }
.pd-badge-brand { background:var(--navy);color:#fff; }
.pd-badge-cat   { background:#E6F1FB;color:#185FA5; }
.pd-name    { font-size:2.1rem;font-weight:800;color:var(--navy);line-height:1.15;margin-bottom:.5rem; }
.pd-tagline { font-size:1.05rem;color:var(--text-secondary);margin-bottom:1.4rem;line-height:1.55; }
.pd-spec-chips { display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem; }
.pd-spec-chip  { display:inline-flex;align-items:center;gap:.4rem;background:#F1F4F8;color:var(--navy);font-size:.78rem;font-weight:600;padding:.35rem .9rem;border-radius:var(--radius-pill);border:1px solid #E9ECEF; }
.pd-spec-chip i { color:var(--coral); }
.pd-highlights { list-style:none;padding:0;margin-bottom:1.75rem; }
.pd-highlights li { display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;color:var(--text-primary);margin-bottom:.55rem;line-height:1.45; }
.pd-highlights li i { color:var(--coral);flex-shrink:0;margin-top:2px; }
.pd-cta-group { display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.5rem; }
.pd-cta-group .btn-coral { padding:.8rem 1.9rem;font-size:.95rem;display:inline-flex;align-items:center;gap:.45rem;border:none;cursor:pointer;border-radius:var(--radius-pill); }
.pd-btn-outline { display:inline-flex;align-items:center;gap:.45rem;padding:.8rem 1.9rem;font-size:.95rem;font-weight:700;border:2px solid var(--navy);color:var(--navy);background:transparent;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;transition:.2s; }
.pd-btn-outline:hover { background:var(--navy);color:#fff; }
.pd-contact { display:flex;gap:1.5rem;flex-wrap:wrap;padding-top:1.25rem;border-top:1px solid #E9ECEF; }
.pd-contact a { font-size:.85rem;font-weight:600;color:var(--navy);text-decoration:none;display:flex;align-items:center;gap:.4rem;transition:.2s; }
.pd-contact a.is-wa { color:#25D366; }
.pd-contact a:hover { color:var(--coral); }

/* ── Stats Strip ── */
.pd-stats { background:#F5C400;padding:0;position:relative;overflow:hidden; }
.pd-stats::before { content:none; }
.pd-stats-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center;position:relative;z-index:1; }
.pd-stat-item { padding:1rem 1.25rem;border-right:1px solid rgba(0,0,0,.12);transition:background .2s; }
.pd-stat-item:last-child { border-right:none; }
.pd-stat-item:hover { background:rgba(0,0,0,.05); }
.pd-stat-icon { font-size:1.1rem;color:#0F2340;opacity:.55;margin-bottom:.3rem;display:block; }
.pd-stat-num { display:block;font-size:2.2rem;font-weight:900;color:#0F2340;line-height:1;margin-bottom:.2rem;letter-spacing:-.02em; }
.pd-stat-num sup { font-size:.95rem;font-weight:700;vertical-align:.55em;opacity:.9; }
.pd-stat-lbl { font-size:.62rem;color:rgba(0,0,0,.65);font-weight:700;text-transform:uppercase;letter-spacing:.09em;line-height:1.5; }
.pd-stats-divider { width:1px;background:rgba(0,0,0,.12); }

/* ── Machine In Action (full crystal glass) ──────────────────────── */
.pd-action { display:grid;grid-template-columns:1fr 1fr;min-height:400px;background:linear-gradient(160deg,#d6e4f7 0%,#edf3fc 22%,#ede8f9 44%,#e4f2fb 66%,#d4e5f6 100%); }
.pd-action-body { background:rgba(255,255,255,.28);backdrop-filter:blur(28px) saturate(1.9) brightness(1.04);-webkit-backdrop-filter:blur(28px) saturate(1.9) brightness(1.04);border-right:1px solid rgba(255,255,255,.7);box-shadow:inset 1px 0 0 rgba(255,255,255,.95),8px 0 40px rgba(120,160,220,.12);display:flex;flex-direction:column;justify-content:center;padding:2.25rem 2.75rem;gap:1.1rem;position:relative;overflow:hidden; }
/* diagonal shimmer streak */
.pd-action-body::before { content:"";position:absolute;top:-30%;left:-15%;width:55%;height:160%;background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.15) 45%,transparent 100%);transform:rotate(-8deg);pointer-events:none; }
/* bottom prismatic highlight */
.pd-action-body::after { content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,rgba(245,196,0,.7) 30%,rgba(180,210,255,.6) 60%,transparent);pointer-events:none; }
.pd-action-eyebrow { display:flex;align-items:center;gap:.6rem;position:relative;z-index:1; }
.pd-action-eyebrow::before { content:"";width:18px;height:2px;background:#F5C400;border-radius:2px;flex-shrink:0; }
.pd-action-title { font-size:1.85rem;font-weight:800;color:#0F2340;line-height:1.2;margin:0;position:relative;z-index:1; }
.pd-action-list  { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.38rem;position:relative;z-index:1; }
.pd-action-list li { display:flex;align-items:center;gap:.7rem;font-size:.86rem;color:#111827;font-weight:600;line-height:1.45;padding:.3rem 0;background:none;border:none;box-shadow:none;transition:transform .15s,color .15s; }
.pd-action-list li:hover { transform:translateX(4px);color:#0F2340; }
.pd-action-list-icon { width:21px;height:21px;background:rgba(255,255,255,.85);border:1px solid rgba(180,210,255,.5);border-radius:50%;box-shadow:0 1px 4px rgba(100,140,200,.15),inset 0 1px 0 rgba(255,255,255,1);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.pd-action-list-icon i { color:#0F2340;font-size:.65rem; }
.pd-action-cta { display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;position:relative;z-index:1; }
.pd-action-cta-note { font-size:.72rem;color:rgba(15,35,64,.45);font-weight:500; }
.pd-action-img { position:relative;overflow:hidden; }
.pd-action-img img { width:100%;height:100%;object-fit:cover;display:block; }
.pd-action-img::after { content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(214,228,247,.55) 0%,transparent 40%); }

/* ── Specs Table (centred, no image) ──────────────────── */
.spec-table-wrap { max-width:820px;margin:0 auto; }
.spec-table-card { background:#fff;border-radius:var(--radius-card);box-shadow:0 6px 32px rgba(15,35,64,.12);overflow:hidden;border:1px solid #E2E8F0; }
.spec-table { width:100%;border-collapse:collapse; }
.spec-table tr { border-bottom:1px solid #EEF1F6;transition:background .15s; }
.spec-table tr:last-child { border-bottom:none; }
.spec-table tr:hover td { background:#FFF8E6 !important; }
.spec-table td { padding:.9rem 1.25rem;font-size:.875rem;vertical-align:middle; }
.spec-table td:first-child { color:var(--text-secondary);width:42%;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;border-left:3px solid var(--coral);background:#F8FAFD; }
.spec-table td:last-child  { color:var(--navy);font-weight:600;font-size:.9rem;background:#fff; }
.spec-table tr:nth-child(even) td:first-child { background:#F3F6FB; }
.spec-table tr:nth-child(even) td:last-child  { background:#FAFBFE; }

/* ── Before / After Slider ─────────────────────────────── */
.ba-section { background:#0C1A2E;padding:4.5rem 0; }
.ba-intro-title { color:#fff; }
.ba-intro-sub   { color:rgba(255,255,255,.6); }
.ba-wrap { border-radius:16px;overflow:hidden;margin-bottom:.75rem;box-shadow:0 12px 40px rgba(0,0,0,.35);max-width:420px;margin-left:auto;margin-right:auto; }
.ba-slider { position:relative;overflow:hidden;aspect-ratio:1/1;cursor:ew-resize;user-select:none; }
.ba-before,.ba-after { position:absolute;inset:0; }
.ba-before img,.ba-after img { width:100%;height:100%;object-fit:cover;display:block;pointer-events:none; }
.ba-after { clip-path:inset(0 0 0 50%);transition:clip-path .05s; }
.ba-divider { position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;z-index:10;transform:translateX(-50%);pointer-events:none; }
.ba-handle  { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,.3);pointer-events:all;cursor:ew-resize; }
.ba-handle i { color:var(--navy);font-size:.9rem; }
.ba-lbl { position:absolute;bottom:22px;padding:.25rem .7rem;background:rgba(255,255,255,.9);color:#333;font-size:.72rem;font-weight:700;border-radius:var(--radius-pill);z-index:5; }
.ba-lbl-l { left:25%; transform:translateX(-50%); }
.ba-lbl-r { left:75%; transform:translateX(-50%); background:linear-gradient(90deg,#f5a623,#e8445a,#a855f7,#3b82f6); color:#fff; }
.ba-caption { text-align:center;font-size:.8rem;color:rgba(255,255,255,.5);font-weight:500; }

/* ── Use Cases — alternating strips ───────────────────── */
.uc-strip { display:flex;align-items:stretch;min-height:400px; }
.uc-strip.uc-reverse { flex-direction:row-reverse; }
.uc-img   { flex:0 0 45%;position:relative;overflow:hidden; }
.uc-img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease; }
.uc-strip:hover .uc-img img { transform:scale(1.04); }
.uc-body  { flex:1;display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem; }
.uc-strip:nth-child(even) .uc-body { background:#F8F9FC; }
.uc-num   { font-size:4rem;font-weight:800;color:#E9ECEF;line-height:1;margin-bottom:.25rem; }
.uc-tag   { font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--coral);margin-bottom:.5rem; }
.uc-title { font-size:1.6rem;font-weight:800;color:var(--navy);margin-bottom:.85rem;line-height:1.2; }
.uc-desc  { font-size:.9rem;color:var(--text-secondary);line-height:1.7;margin-bottom:1.25rem; }
.uc-list  { list-style:none;padding:0;margin:0; }
.uc-list li { display:flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--navy);margin-bottom:.45rem;font-weight:500; }
.uc-list li i { color:var(--coral);font-size:.9rem; }

/* ── Why — outcome cards on dark bg ───────────────────── */
.outcome-card { padding:1.75rem;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-card);height:100%;transition:.25s; }
.outcome-card:hover { border-color:var(--coral);background:rgba(255,255,255,.04); }
.outcome-num   { font-size:2.6rem;font-weight:800;color:var(--coral);line-height:1;margin-bottom:.6rem; }
.outcome-title { font-size:1rem;font-weight:700;color:#fff;margin-bottom:.4rem; }
.outcome-desc  { font-size:.82rem;color:rgba(255,255,255,.58);margin:0;line-height:1.65; }

/* ── Comparison Widget ─────────────────────────────────── */
.comp-toggle-btn { display:inline-flex;align-items:center;gap:.5rem;background:#F1F4F8;border:1px solid #E9ECEF;color:var(--navy);font-size:.85rem;font-weight:700;padding:.55rem 1.25rem;border-radius:var(--radius-pill);cursor:pointer;transition:.2s;margin-bottom:1.5rem; }
.comp-toggle-btn:hover { background:var(--navy);color:#fff;border-color:var(--navy); }
.comp-wrap { overflow-x:auto; }
.comp-table { width:100%;border-collapse:collapse;min-width:480px; }
.comp-table th { padding:.75rem 1rem;font-size:.8rem;font-weight:700;text-align:center; }
.comp-table th:first-child { text-align:left;background:#F1F4F8;color:var(--text-secondary);width:38%; }
.comp-table th.comp-current { background:var(--coral);color:var(--navy); }
.comp-table th.comp-other   { background:var(--navy);color:#fff; }
.comp-table td { padding:.65rem 1rem;font-size:.82rem;text-align:center;border-bottom:1px solid #F1F4F8; }
.comp-table td:first-child { text-align:left;color:var(--text-secondary);font-weight:500; }
.comp-table td.comp-current { background:#FFFBF5;font-weight:600;color:var(--navy); }
.comp-check { color:#2E7D32; }
.comp-dash  { color:#C0C5CC; }
.comp-table tfoot td { padding:.85rem 1rem;background:#F8F9FC;font-weight:600; }

/* ── Accessories ───────────────────────────────────────── */
.acc-card { background:#fff;border:1px solid #E9ECEF;border-radius:var(--radius-card);padding:1.25rem;height:100%;display:flex;flex-direction:column;gap:.6rem;transition:.2s; }
.acc-card:hover { box-shadow:0 6px 18px rgba(0,0,0,.07);border-color:#D0D5DD; }
.acc-icon  { width:44px;height:44px;background:#F1F4F8;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--navy); }
.acc-name  { font-size:.88rem;font-weight:700;color:var(--navy);margin:0; }
.acc-meta  { font-size:.75rem;color:var(--text-secondary);margin:0;flex:1;line-height:1.45; }
.acc-cta   { font-size:.78rem;font-weight:700;color:var(--coral);text-decoration:none;display:inline-flex;align-items:center;gap:.3rem;transition:.2s; }
.acc-cta:hover { color:var(--navy); }
.acc-outline { font-size:.78rem;font-weight:700;color:var(--navy);border:1px solid #D0D5DD;padding:.3rem .8rem;border-radius:var(--radius-pill);text-decoration:none;display:inline-flex;align-items:center;gap:.3rem;transition:.2s; }
.acc-outline:hover { background:var(--navy);color:#fff;border-color:var(--navy); }

/* ── FAQ ───────────────────────────────────────────────── */
.faq-accordion .accordion-item   { border:1px solid #E9ECEF;border-radius:var(--radius-card) !important;margin-bottom:.6rem;overflow:hidden; }
.faq-accordion .accordion-button { font-size:.9rem;font-weight:600;color:var(--navy);background:#fff;box-shadow:none; }
.faq-accordion .accordion-button:not(.collapsed) { color:var(--coral);background:#FFF9F5;box-shadow:none; }
.faq-accordion .accordion-body   { font-size:.875rem;color:var(--text-secondary);line-height:1.7; }

/* ── Related Products ──────────────────────────────────── */
.prod-card-link { display:block;text-decoration:none;color:inherit;height:100%; }
.prod-card-link:hover .prod-card { box-shadow:0 18px 48px rgba(0,0,0,.13);transform:translateY(-4px); }
.prod-card { transition:transform .25s,box-shadow .25s; }
.prod-cta-hint { display:flex;align-items:center;gap:.35rem;color:var(--coral);font-size:.82rem;font-weight:700;margin-top:.9rem;padding-top:.85rem;border-top:1px solid #F1F4F8; }
.back-link { display:inline-flex;align-items:center;gap:.4rem;color:var(--navy);font-size:.875rem;font-weight:600;text-decoration:none; }
.back-link:hover { color:var(--coral); }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width:991.98px) {
  .pd-info { padding-left:0;margin-top:2rem; }
  .pd-main-img { height:300px; }
  .pd-name { font-size:1.65rem; }
  .pd-stats-grid { grid-template-columns:repeat(2,1fr); }
  .pd-stat-item { border-bottom:1px solid rgba(0,0,0,.1); }
  .pd-stat-item:nth-child(2n) { border-right:none; }
  .pd-stat-item:nth-last-child(-n+2) { border-bottom:none; }
  .pd-action { grid-template-columns:1fr; }
  .pd-action-img { min-height:240px; }
  .pd-action-img::after { background:linear-gradient(180deg,rgba(214,228,247,.55) 0%,transparent 40%); }
  .pd-action-body { padding:1.75rem 1.5rem;backdrop-filter:blur(20px) saturate(1.7);-webkit-backdrop-filter:blur(20px) saturate(1.7); }
  .pd-action-title { font-size:1.5rem; }
  .uc-strip,.uc-strip.uc-reverse { flex-direction:column; }
  .uc-img { min-height:260px;flex:none; }
  .uc-body { padding:2rem 1.5rem; }
  .uc-title { font-size:1.3rem; }
  .uc-num { font-size:2.5rem; }
}
@media (max-width:575.98px) {
  .pd-stats-grid { grid-template-columns:repeat(2,1fr); }
  .pd-stat-item { padding:.75rem .65rem; }
  .pd-stat-num { font-size:1.85rem; }
}


/* ============================================================
   PRODUCT DETAIL v2 — Reference layout in REN theme
   ============================================================ */

/* ── Hero ──────────────────────────────────────────────────── */
.pd2-hero { background:linear-gradient(160deg,#06101e 0%,#0F2340 40%,#0c1e3a 70%,#060e1a 100%);padding:2.75rem 0 0;position:relative;overflow:hidden; }
.pd2-hero-glow { position:absolute;top:-15%;right:-8%;width:65%;height:130%;background:radial-gradient(ellipse at 65% 40%,rgba(245,196,0,.07) 0%,rgba(80,130,220,.05) 45%,transparent 70%);pointer-events:none; }
.pd2-breadcrumb { margin-bottom:1.75rem; }
.pd2-hero-grid { display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;padding-bottom:2.75rem; }
.pd2-hero-brand { display:inline-block;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#F5C400;margin-bottom:.55rem; }
.pd2-hero-title { font-size:clamp(1.85rem,3.5vw,2.75rem);font-weight:800;color:#fff;line-height:1.15;margin:0 0 1rem; }
.pd2-hero-sub { font-size:.95rem;color:rgba(255,255,255,.6);line-height:1.72;margin-bottom:1.5rem;max-width:480px; }
.pd2-hero-actions { display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.4rem; }
.pd2-btn-outline { display:inline-flex;align-items:center;gap:.4rem;font-size:.875rem;font-weight:600;color:rgba(255,255,255,.8);border:1.5px solid rgba(255,255,255,.3);border-radius:var(--radius-pill);padding:.65rem 1.5rem;text-decoration:none;transition:.2s; }
.pd2-btn-outline:hover { color:#fff;border-color:rgba(255,255,255,.65); }
.pd2-price-label { font-size:1rem;font-weight:700;color:#F5C400;margin-bottom:1rem; }
.pd2-hero-contact { display:flex;flex-wrap:wrap;gap:.9rem; }
.pd2-hero-contact a { display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.5);text-decoration:none;transition:color .15s; }
.pd2-hero-contact a:hover { color:#F5C400; }
.pd2-hero-contact a i { color:#F5C400;font-size:.85rem; }
.pd2-hero-visual { position:relative;display:flex;align-items:center;justify-content:flex-start; }
.pd2-hero-img { width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5)); }
.pd2-hero-badge { position:absolute;top:.75rem;right:.75rem;background:#F5C400;color:#0F2340;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:.28rem .75rem;border-radius:var(--radius-pill); }

/* ── Stats bar (inside hero) ──────────────────────────────── */
.pd2-stats-bar { display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-bottom:none;border-radius:12px 12px 0 0;overflow:hidden; }
.pd2-stat { display:flex;align-items:center;gap:.85rem;padding:1.05rem 1.35rem;border-right:1px solid rgba(255,255,255,.08);transition:background .2s; }
.pd2-stat:last-child { border-right:none; }
.pd2-stat:hover { background:rgba(255,255,255,.04); }
.pd2-stat-icon { width:38px;height:38px;background:rgba(245,196,0,.1);border:1px solid rgba(245,196,0,.18);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem;color:#F5C400; }
.pd2-stat-num { display:block;font-size:1.65rem;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em; }
.pd2-stat-num sup { font-size:.78rem;font-weight:700;vertical-align:.5em;color:#F5C400; }
.pd2-stat-lbl { display:block;font-size:.6rem;color:rgba(255,255,255,.48);font-weight:600;text-transform:uppercase;letter-spacing:.07em;line-height:1.45;margin-top:.15rem; }

/* ── Full Description ─────────────────────────────────────── */
.pd2-desc-section { padding:2.75rem 0;background:#fff;border-bottom:1px solid #F1F4F8; }
.pd2-desc-body { max-width:880px;margin:0 auto;font-size:.975rem;color:var(--text-secondary);line-height:1.82;text-align:center; }

/* ── Key Features ─────────────────────────────────────────── */
.pd2-features-section { padding:2.75rem 0;background:#F4F6F9; }
.pd2-features-grid { display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center; }
.pd2-features-body { display:flex;flex-direction:column;gap:1.1rem; }
.pd2-features-title { font-size:clamp(1.55rem,2.8vw,2.1rem);font-weight:800;color:var(--navy);line-height:1.2;margin:0; }
.pd2-features-sub { font-size:.9rem;color:var(--text-secondary);line-height:1.72;margin:0; }
.pd2-feat-list { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem; }
.pd2-feat-list li { display:flex;align-items:flex-start;gap:.75rem;font-size:.9rem;color:var(--navy);font-weight:500;line-height:1.55; }
.pd2-feat-chk { width:20px;height:20px;min-width:20px;background:#F5C400;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:2px; }
.pd2-feat-chk i { font-size:.65rem;color:#0F2340;font-weight:900; }
.pd2-features-actions { display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.25rem; }
.pd2-dl-btn { display:inline-flex;align-items:center;gap:.4rem;font-size:.875rem;font-weight:700;color:#fff;background:var(--navy);border:none;border-radius:var(--radius-pill);padding:.7rem 1.65rem;text-decoration:none;cursor:pointer;transition:background .18s; }
.pd2-dl-btn:hover { background:#16345C;color:#fff; }
.pd2-features-visual { position:relative; }
.pd2-features-visual > img { width:100%;border-radius:var(--radius-card);box-shadow:none;display:block; }
.pd2-mini-gallery { display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;margin-top:.45rem; }
.pd2-mini-gallery img { width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;opacity:.78;transition:opacity .15s;cursor:pointer; }
.pd2-mini-gallery img:hover { opacity:1; }

/* ── Video ─────────────────────────────────────────────────── */
.pd2-video-section { padding:4rem 0;background:#fff; }
.pd2-video-grid { display:grid;grid-template-columns:1fr 1.35fr;gap:3.5rem;align-items:center; }
.pd2-video-body { display:flex;flex-direction:column;gap:.9rem; }
.pd2-video-title { font-size:clamp(1.5rem,2.5vw,2rem);font-weight:800;color:var(--navy);line-height:1.2;margin:0; }
.pd2-video-sub { font-size:.9rem;color:var(--text-secondary);line-height:1.72;margin:0; }
.pd2-watch-btn { display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;color:#fff;background:var(--navy);border-radius:var(--radius-pill);padding:.72rem 1.65rem;text-decoration:none;width:fit-content;transition:background .18s; }
.pd2-watch-btn:hover { background:#16345C;color:#fff; }
.pd2-watch-btn i { font-size:1.1rem; }
.pd2-video-frame { position:relative;background:#0a1628;border-radius:12px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 16px 48px rgba(0,0,0,.24); }
.pd2-video-label { position:absolute;top:0;left:0;right:0;background:rgba(0,0,0,.55);color:#fff;font-size:.78rem;font-weight:600;padding:.6rem 1rem;z-index:2; }
.pd2-video-frame iframe,.pd2-video-frame video { width:100%;height:100%;object-fit:cover;display:block; }
.pd2-vid-poster { position:absolute;inset:0;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center; }
.pd2-vid-poster img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; }
.pd2-vid-play-btn { position:relative;z-index:1;background:none;border:none;padding:0;color:#fff;font-size:4.5rem;line-height:1;filter:drop-shadow(0 4px 16px rgba(0,0,0,.5));transition:transform .18s,filter .18s;pointer-events:none; }
.pd2-vid-poster:hover .pd2-vid-play-btn { transform:scale(1.12);filter:drop-shadow(0 6px 24px rgba(0,0,0,.6)); }

/* ── Specifications ────────────────────────────────────────── */
.pd2-specs-section { padding:4rem 0;background:#fff; }
.pd2-specs-title { font-size:clamp(1.5rem,2.5vw,2rem);font-weight:800;color:var(--navy);margin:.25rem 0 2rem; }
.pd2-specs-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;max-width:720px;margin-left:auto;margin-right:auto; }
.pd2-specs-col { border:1px solid #E9ECEF;border-radius:var(--radius-card);overflow:hidden; }
.pd2-spec-row { display:flex;border-bottom:1px solid #EEF1F6; }
.pd2-spec-row:last-child { border-bottom:none; }
.pd2-spec-label { flex:0 0 44%;padding:.65rem .9rem;font-size:.72rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;background:#F8FAFD;border-right:1px solid #EEF1F6;border-left:3px solid #F5C400; }
.pd2-spec-value { flex:1;padding:.65rem .9rem;font-size:.875rem;font-weight:600;color:var(--navy); }
.pd2-specs-empty { color:var(--text-secondary);font-size:.9rem; }
.pd2-specs-empty a { color:#F5C400; }

/* ── Applications ─────────────────────────────────────────── */
.pd2-apps-section { padding:4rem 0;background:#fff; }
.pd2-apps-title { font-size:clamp(1.5rem,2.5vw,2rem);font-weight:800;color:var(--navy);margin:.25rem 0 .5rem; }
.pd2-apps-sub { font-size:.9rem;color:var(--text-secondary);margin-bottom:2rem; }
.pd2-apps-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem; }
.pd2-app-card { background:#fff;border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .22s,box-shadow .22s; }
.pd2-app-card:hover { transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.12); }
.pd2-app-img-wrap { position:relative;overflow:hidden;aspect-ratio:4/3; }
.pd2-app-img-wrap img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s; }
.pd2-app-card:hover .pd2-app-img-wrap img { transform:scale(1.06); }
.pd2-app-body { padding:.85rem 1rem; }
.pd2-app-icon { width:26px;height:26px;background:#F5C400;border-radius:5px;display:flex;align-items:center;justify-content:center;margin-bottom:.45rem; }
.pd2-app-icon i { font-size:.75rem;color:var(--navy); }
.pd2-app-name { font-size:.88rem;font-weight:700;color:var(--navy);margin:0 0 .2rem; }
.pd2-app-desc { font-size:.76rem;color:var(--text-secondary);margin:0;line-height:1.5; }

/* ── Comparison ────────────────────────────────────────────── */
.pd2-compare-section { padding:4rem 0;background:#F4F6F9; }
.pd2-compare-title { font-size:clamp(1.5rem,2.5vw,2rem);font-weight:800;color:var(--navy);margin:.25rem 0 .4rem; }
.pd2-compare-sub { font-size:.9rem;color:var(--text-secondary);margin-bottom:1.25rem; }

/* ── Enquiry Form Section ──────────────────────────────────── */
.pd2-enq-section { background:#F4F6F9;padding:2.5rem 0;position:relative;overflow:hidden; }
.pd2-enq-section::before { content:none; }
.pd2-enq-inner { display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;position:relative;z-index:1; }
.pd2-enq-left { display:flex;flex-direction:column;gap:1.4rem; }
.pd2-enq-title { font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;color:var(--navy);line-height:1.2;margin:0; }
.pd2-enq-sub { font-size:.9rem;color:var(--text-secondary);line-height:1.72;margin:0; }
.pd2-enq-contacts { display:flex;flex-direction:column;gap:.85rem;margin-top:.25rem; }
.pd2-enq-contact-item { display:flex;align-items:center;gap:.9rem;text-decoration:none;transition:opacity .15s; }
.pd2-enq-contact-item:hover { opacity:.82; }
.pd2-enq-contact-icon { width:38px;height:38px;min-width:38px;background:#F5C400;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;color:var(--navy); }
.pd2-enq-contact-lbl { display:block;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary);margin-bottom:.1rem; }
.pd2-enq-contact-val { display:block;font-size:.875rem;font-weight:600;color:var(--navy); }
.pd2-enq-form-card { background:#fff;border-radius:14px;padding:2rem;box-shadow:0 8px 32px rgba(15,35,64,.1); }
.pd2-enq-form-title { font-size:1.05rem;font-weight:800;color:var(--navy);margin:0 0 1.25rem;padding-bottom:.85rem;border-bottom:2px solid #F5C400; }
.pd2-enq-form-row { display:grid;grid-template-columns:1fr 1fr;gap:.7rem; }
.pd2-enq-field { margin-bottom:.7rem; }
.pd2-enq-field label { display:block;font-size:.76rem;font-weight:700;color:#374151;margin-bottom:.28rem;letter-spacing:.02em; }
.pd2-enq-field .req { color:#DC2626; }
.pd2-enq-input { width:100%;padding:.58rem .85rem;font-size:.875rem;border:1.5px solid #E5E7EB;border-radius:8px;color:#111827;background:#fff;transition:border-color .15s,box-shadow .15s;outline:none;resize:vertical;font-family:inherit; }
.pd2-enq-input:focus { border-color:#F5C400;box-shadow:0 0 0 3px rgba(245,196,0,.18); }
.pd2-enq-submit { width:100%;justify-content:center;margin-top:.25rem; }

/* ── Related ───────────────────────────────────────────────── */
.pd2-related-section { padding:4rem 0;background:#fff; }
.pd2-related-title { font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:800;color:var(--navy);margin:.25rem 0 1.75rem; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:991.98px) {
  .pd2-hero-grid { grid-template-columns:1fr;gap:1.5rem; }
  .pd2-hero-visual { order:-1; }
  .pd2-hero-img { width:100%;height:auto; }
  .pd2-stats-bar { grid-template-columns:repeat(2,1fr); }
  .pd2-stat:nth-child(2) { border-right:none; }
  .pd2-stat:nth-child(3),.pd2-stat:nth-child(4) { border-top:1px solid rgba(255,255,255,.08); }
  .pd2-stat:nth-child(4) { border-right:none; }
  .pd2-features-grid { grid-template-columns:1fr;gap:2.5rem; }
  .pd2-video-grid { grid-template-columns:1fr;gap:2rem; }
  .pd2-specs-grid { grid-template-columns:1fr;gap:1rem; }
  .pd2-apps-grid { grid-template-columns:repeat(2,1fr); }
  .pd2-enq-inner { grid-template-columns:1fr;gap:2.5rem; }
  .pd2-enq-form-row { grid-template-columns:1fr 1fr; }
}
@media (max-width:575.98px) {
  .pd2-hero-title { font-size:1.65rem; }
  .pd2-hero-sub { font-size:.875rem; }
  .pd2-stat { padding:.85rem .9rem;gap:.65rem; }
  .pd2-stat-num { font-size:1.4rem; }
  .pd2-apps-grid { grid-template-columns:repeat(2,1fr); }
  .pd2-cta-actions .btn-coral,.pd2-talk-btn { width:100%;justify-content:center; }
}

/* ============================================================
   products — page-specific styles
   ============================================================ */
.back-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--navy);font-size:.875rem;font-weight:600;text-decoration:none;margin-bottom:1.75rem}
.back-link:hover{color:var(--coral)}
.prod-card-link{display:block;text-decoration:none;color:inherit;height:100%}
.prod-card-link:hover .prod-card{box-shadow:0 18px 48px rgba(0,0,0,.13);transform:translateY(-4px)}
.prod-card{cursor:pointer;transition:transform .25s,box-shadow .25s}
.prod-cta-hint{display:flex;align-items:center;gap:.35rem;color:var(--coral);font-size:.82rem;font-weight:700;margin-top:.9rem;padding-top:.85rem;border-top:1px solid #F1F4F8}
.prod-apps{font-size:.78rem;color:var(--text-secondary);margin-bottom:.5rem}
.prod-apps i{color:var(--coral)}

/* ============================================================
   Utility / Inline-Style Replacements
   ============================================================ */

/* --- Color helpers --- */
.text-coral { color: var(--coral); }

/* --- Width helpers --- */
.wrap-narrow { max-width: 860px; }

/* --- Position helpers --- */
.pos-rel { position: relative; z-index: 1; }

/* garment-detail.php hero wrap */
.gd-hero .wrap { position: relative; z-index: 1; }

/* --- Section subtitle modifiers --- */
.section-sub-light { color: rgba(255,255,255,.55); font-size: .93rem; }
.section-sub-narrow { max-width: 480px; }
.section-sub-md     { max-width: 540px; }

/* --- product-detail.php list icon --- */
.pd-list-icon { color: var(--coral); font-size: 1rem; flex-shrink: 0; }

/* --- product-detail.php video section list --- */
.pd-video-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.pd-video-list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .88rem;
  color: rgba(255,255,255,.75);
}

/* --- product-detail.php section description --- */
.pd-section-desc {
  color: var(--text-secondary);
  font-size: .93rem;
  max-width: 540px;
  margin: .5rem auto 0;
}

/* --- product-detail.php section description dark variant --- */
.pd-section-desc-dark { color: rgba(255,255,255,.55); max-width: 540px; margin: 0 auto; }

/* --- product-detail.php general descriptive text --- */
.pd-desc-text {
  color: var(--text-secondary);
  font-size: .93rem;
  line-height: 1.65;
}

/* --- product-detail.php comparison table spans --- */
.comp-th-sub {
  display: block;
  font-weight: 400;
  font-size: .7rem;
  opacity: .85;
}
.comp-table tfoot td.comp-current { background: #FFF6EE; }
.comp-current-label {
  font-size: .78rem;
  color: var(--coral);
  font-weight: 700;
}
.comp-link {
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}
.comp-link:hover { color: var(--coral); }

/* --- product-detail.php button size helpers --- */
.pd-btn-sm  { font-size: .85rem; padding: .6rem 1.2rem; }
.pd-btn-wa  {
  font-size: .85rem;
  padding: .6rem 1.2rem;
  border-color: #25D366 !important;
  color: #25D366 !important;
}

/* --- index.php video modal --- */
.video-modal-content { background: #000; border: none; border-radius: 12px; overflow: hidden; }
.video-modal-header  { border: none; padding: .6rem 1rem; background: rgba(0,0,0,.6); }
.video-embed-wrap    { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-embed-iframe  { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* --- index.php resources case-study card text --- */
.video-intro-text {
  font-size: .88rem;
  color: rgba(255,255,255,.7);
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}
.link-coral-sm {
  color: var(--coral);
  font-weight: 600;
  font-size: .85rem;
  position: relative;
  z-index: 1;
}

/* --- news-pr.php article body text --- */
.news-body-text {
  font-size: .84rem;
  color: var(--text-secondary);
  margin-top: .5rem;
}

/* --- downloads.php / faqs.php muted small text --- */
.text-sm-muted {
  font-size: .9rem;
  color: var(--text-secondary);
}

/* --- products.php cover image --- */
.img-cover { object-fit: cover; height: 100%; width: 100%; }

/* --- products.php garment decoration contained image on dark bg --- */
.img-contain-dark { object-fit: contain; background: #0F2340; padding: 1rem; }

/* ============================================================
   Inline-style migration — batch 2
   ============================================================ */

/* --- Color & transform utilities --- */
.text-gold      { color: var(--gold); }
.text-navy      { color: var(--navy); }
.rotate-90      { transform: rotate(90deg); }
.mw-480-mx-auto { max-width: 480px; margin: 0 auto; }
.mt-sub-para    { margin: .75rem auto 0; }
.mt-sub         { margin-top: .75rem; }

/* --- vert-icon / cat-icon palette variants (shared color pairs) --- */
.vert-icon--label,    .cat-icon--label    { background: #E6F1FB; color: #185FA5; }
.vert-icon--garment,  .cat-icon--garment  { background: #EAF3DE; color: #3B6D11; }
.vert-icon--metal,    .cat-icon--metal    { background: #FAEEDA; color: #854F0B; }
.vert-icon--media,    .cat-icon--media    { background: #EEEDFE; color: #534AB7; }
.vert-icon--specialty,.cat-icon--specialty{ background: #FAECE7; color: #993C1D; }
.vert-icon--service,  .cat-icon--service  { background: #E1F5EE; color: #0F6E56; }

/* --- Testimonial avatar colors --- */
.avatar--blue   { background: #185FA5; }
.avatar--green  { background: #3B6D11; }
.avatar--orange { background: #854F0B; }

/* --- News/PR tag pill color variants --- */
.res-tag-pill--gold  { background: #FFF0CC; color: #8B6800; }
.res-tag-pill--blue  { background: #E6F1FB; color: #185FA5; }
.res-tag-pill--green { background: #E8F8F0; color: #0F6E56; }

/* --- Downloads section icon colors --- */
.dl-sec-icon--label       { color: #185FA5; }
.dl-sec-icon--spreadsheet { color: #217346; }
.dl-sec-icon--garment     { color: #3B6D11; }
.dl-sec-icon--metal       { color: #854F0B; }
.dl-sec-icon--media       { color: #534AB7; }

/* --- FAQs footer divider --- */
.faq-footer { border-top: 1px solid #E9ECEF; }

/* --- Section title white variant (dark-bg sections) --- */
.section-title--white { color: #fff; }

/* --- Section sub dimmed white (dark-bg sections) --- */
.section-sub--dim { color: rgba(255,255,255,.58); }

/* --- Applications CTA paragraph (different opacity from video-intro-text) --- */
.app-cta-text { color: rgba(255,255,255,.5); margin: 0; font-size: .88rem; position: relative; z-index: 1; }

/* --- Video modal title --- */
.modal-title-sm { font-size: .9rem; font-weight: 600; }

/* --- Resource case-study card title white --- */
.res-title--white { color: #fff; }

/* --- Products no-results state --- */
#noResults       { display: none; }
.no-results-icon { font-size: 2.5rem; color: #D0D5DD; }

/* --- acc-icon color variants --- */
.acc-icon--dim  { color: #aaa; }
.acc-icon--gold { color: #B8860B; }

/* --- why-num text-size variants (ECO & REN cards) --- */
.why-num--text-lg { font-size: 2.2rem; }
.why-num--text-md { font-size: 2rem; }

/* --- pd-section-desc spacing variants --- */
.pd-section-desc--cmp { margin-bottom: 1.5rem; max-width: 520px; }
.pd-section-desc--acc { margin-bottom: 2.25rem; max-width: 560px; }

/* --- header.php --- */
.nav-chevron     { font-size: .65rem; }
.nav-logo-mobile { height: 34px; }

/* --- footer.php --- */
.footer-logo { height: 60px; }
.footer-desc { font-size: .88rem; max-width: 320px; }
.enquiry-modal .modal-dialog { max-width: 480px; }
#enquiryProductBadge { display: none; }
#categoryRow         { display: none; }
.btn-coral-compact   { padding: .6rem 1.6rem; }

/* ============================================================
   MASONRY LIBRARY LAYOUT
   ============================================================ */
.msnry-wrap { column-count: 3; column-gap: 0; }
.msnry-item { width: 100%; padding: .45rem; box-sizing: border-box; break-inside: avoid; display: inline-block; vertical-align: top; }

/* Override fixed heights — let images set card height naturally */
.msnry-wrap .app-card,
.msnry-wrap .pd-app-card { height: auto; }
.msnry-wrap .app-card-img,
.msnry-wrap .pd-app-img { width: 100%; height: auto; display: block; min-height: 160px; object-fit: cover; }

/* Category chip shown on overlay when all filters active */
.app-cat-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.65); margin-bottom: .3rem; }
.app-cat-chip i { color: var(--coral); font-size: .65rem; }

/* Quick Enquiry sidebar card (blog detail) — must beat .sidebar-card specificity */
.sidebar-card.quick-enq-card { background: linear-gradient(145deg,#091729,#0F2340) !important; border-color:transparent !important; }
.quick-enq-card h5 { color:#fff !important; border-bottom-color:var(--coral) !important; }
.quick-enq-card p  { color:rgba(255,255,255,.55); }
.quick-enq-card .form-control,
.quick-enq-card .form-select { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:.83rem; border-radius:8px; }
.quick-enq-card .form-control::placeholder { color:rgba(255,255,255,.4); }
.quick-enq-card .form-control:focus,
.quick-enq-card .form-select:focus { background:rgba(255,255,255,.12); border-color:var(--coral); box-shadow:none; color:#fff; }
.quick-enq-card .form-select option { background:#0F2340; color:#fff; }
.quick-enq-card .form-label { color:rgba(255,255,255,.65); font-size:.78rem; margin-bottom:.3rem; }
.quick-enq-card .btn-coral { width:100%; justify-content:center; border:none; }

@media (max-width:991.98px) { .msnry-wrap { column-count: 2; } }
@media (max-width:575.98px) { .msnry-wrap { column-count: 1; } }

/* ============================================================
   INNER PAGES — shared + page-specific
   ============================================================ */

/* ── Shared Page Hero ──────────────────────────────────────── */
.page-hero { background: linear-gradient(135deg,#091729 0%,#0F2340 45%,#16345C 100%); padding:5rem 0 4rem; position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 80% at 70% 50%,rgba(245,196,0,.06) 0%,transparent 65%); }
.page-hero-eyebrow { display:inline-flex; align-items:center; gap:.4rem; background:rgba(245,196,0,.12); color:var(--coral); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; padding:.3rem .9rem; border-radius:var(--radius-pill); border:1px solid rgba(245,196,0,.25); margin-bottom:1.25rem; }
.page-hero-title { font-size:clamp(1.9rem,4vw,3rem); font-weight:800; color:#fff; line-height:1.15; margin-bottom:.9rem; }
.page-hero-title span { color:var(--coral); }
.page-hero-sub { font-size:1.05rem; color:rgba(255,255,255,.65); line-height:1.7; max-width:620px; }
.page-breadcrumb { display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:rgba(255,255,255,.5); margin-bottom:0; }
.page-breadcrumb a { color:rgba(255,255,255,.6); text-decoration:none; transition:.2s; }
.page-breadcrumb a:hover { color:var(--coral); }
.page-breadcrumb i { font-size:.6rem; }
.page-hero .page-breadcrumb { margin-bottom:1.5rem; }

/* ── About — Story ─────────────────────────────────────────── */
.about-story { padding:5rem 0; }
.about-story-text h2 { font-size:clamp(1.6rem,3vw,2.4rem); font-weight:800; color:var(--navy); margin-bottom:1rem; }
.about-story-text p  { font-size:.95rem; color:var(--text-secondary); line-height:1.75; margin-bottom:1rem; }
.about-story-list { list-style:none; padding:0; margin:0 0 1.75rem; }
.about-story-list li { display:flex; align-items:flex-start; gap:.65rem; font-size:.9rem; color:var(--navy); margin-bottom:.6rem; line-height:1.45; }
.about-story-list li i { color:var(--coral); flex-shrink:0; margin-top:2px; font-size:1rem; }
.about-stat-panel { background:linear-gradient(145deg,#0A1826,#0F2340,#16345C); border-radius:20px; padding:2.5rem; position:relative; overflow:hidden; box-shadow:0 24px 64px rgba(0,0,0,.25); }
.about-stat-panel::before { content:''; position:absolute; top:-40px; right:-40px; width:200px; height:200px; background:radial-gradient(circle,rgba(245,196,0,.1) 0%,transparent 65%); }
.about-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; position:relative; }
.about-stat-item { text-align:center; }
.about-stat-num { display:block; font-size:2.6rem; font-weight:800; color:var(--coral); line-height:1; }
.about-stat-lbl { font-size:.73rem; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.07em; margin-top:.35rem; line-height:1.3; display:block; }
.about-est { text-align:center; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.08); margin-top:1.5rem; position:relative; }
.about-est-year { font-size:3rem; font-weight:800; color:#fff; line-height:1; }
.about-est-lbl  { font-size:.72rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.1em; }

/* ── About — Story enhancements ────────────────────────────── */
.about-section-h2 { font-size:clamp(1.7rem,3vw,2.3rem); font-weight:800; color:var(--navy); line-height:1.2; margin:0 0 1.3rem; padding-bottom:.9rem; position:relative; }
.about-section-h2::after { content:''; position:absolute; bottom:0; left:0; width:48px; height:3px; background:var(--coral); border-radius:2px; }
.about-intro-para { font-size:1.05rem; color:var(--navy); font-weight:500; line-height:1.75; margin-bottom:.85rem; }
.about-body-para { font-size:.93rem; color:var(--text-secondary); line-height:1.8; margin-bottom:1.5rem; }
.about-colorjet-callout { display:flex; gap:1rem; align-items:flex-start; border-left:3px solid var(--coral); background:linear-gradient(135deg,rgba(15,35,64,.03),rgba(15,35,64,.065)); border-radius:0 10px 10px 0; padding:1rem 1.2rem; margin-bottom:1.75rem; }
.acj-badge { width:42px; height:42px; background:var(--navy); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; color:var(--coral); flex-shrink:0; letter-spacing:.04em; font-family:var(--font-display); }
.acj-title { font-size:.88rem; font-weight:700; color:var(--navy); margin-bottom:.25rem; }
.acj-sub { font-size:.8rem; color:var(--text-secondary); line-height:1.55; margin:0; }
.about-solutions-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--text-secondary); margin:0 0 .6rem; }
.about-solutions-wrap { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; }
.abt-sol-item { display:flex; align-items:center; gap:.55rem; font-size:.82rem; font-weight:600; color:var(--navy); background:#F4F7FB; border-radius:8px; padding:.55rem .85rem; border:1px solid #E8ECF2; transition:.2s; }
.abt-sol-item:hover { background:#EBF0F8; border-color:#C8D4E3; }
.abt-sol-item i { color:var(--coral); font-size:.85rem; flex-shrink:0; }

/* ── About — Values ─────────────────────────────────────────── */
.about-values { background:#F8F9FC; padding:5rem 0; }
.value-card { background:#fff; border-radius:var(--radius-card); padding:2rem 1.75rem; border:1px solid #E9ECEF; height:100%; transition:.25s; }
.value-card:hover { box-shadow:0 12px 36px rgba(0,0,0,.08); border-color:#D0D5DD; transform:translateY(-4px); }
.value-icon { width:52px; height:52px; background:rgba(245,196,0,.1); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--coral); margin-bottom:1.1rem; }
.value-name { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:.55rem; }
.value-desc { font-size:.875rem; color:var(--text-secondary); line-height:1.65; margin:0; }

/* ── About — Stats Band ─────────────────────────────────────── */
.about-stats-band { background:linear-gradient(135deg,#091729 0%,#16345C 100%); padding:2rem 0; }
.about-stats-row { display:flex; justify-content:center; align-items:stretch; flex-wrap:wrap; }
.about-stats-item { text-align:center; padding:.75rem 2rem; position:relative; flex:1 1 130px; }
.about-stats-item + .about-stats-item::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); height:32px; width:1px; background:rgba(255,255,255,.14); }
.about-stats-num { display:block; font-size:clamp(1.35rem,2.5vw,1.8rem); font-weight:800; color:var(--coral); line-height:1; font-family:var(--font-display); }
.about-stats-lbl { font-size:.62rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.09em; margin-top:.35rem; display:block; }

/* ── About — Vision & Mission ───────────────────────────────── */
.about-vm-section { padding:5rem 0; background:#fff; }
.about-vm-card { border-radius:var(--radius-card); padding:2.5rem 2.25rem; height:100%; border-top:4px solid var(--coral); background:#F8F9FC; }
.about-vm-card.vision-card { border-top-color:var(--navy); }
.about-vm-icon { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.35rem; margin-bottom:1.25rem; }
.about-vm-icon.is-mission { background:rgba(225,92,51,.1); color:var(--coral); }
.about-vm-icon.is-vision  { background:rgba(15,35,64,.09); color:var(--navy); }
.about-vm-title { font-size:1.35rem; font-weight:800; color:var(--navy); margin:0 0 .85rem; }
.about-vm-body  { font-size:.93rem; color:var(--text-secondary); line-height:1.85; margin:0; }

/* ── About — Timeline ───────────────────────────────────────── */
.about-timeline-section { padding:5rem 0; }
.timeline { position:relative; padding-left:2rem; }
.timeline::before { content:''; position:absolute; left:.6rem; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--coral) 0%,rgba(245,196,0,.2) 100%); }
.tl-item { position:relative; padding:0 0 2.5rem 2.5rem; }
.tl-item:last-child { padding-bottom:0; }
.tl-dot  { position:absolute; left:-1.4rem; top:.25rem; width:14px; height:14px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 4px rgba(245,196,0,.2); }
.tl-year  { font-size:.72rem; font-weight:800; color:var(--coral); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.3rem; }
.tl-title { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:.4rem; }
.tl-desc  { font-size:.875rem; color:var(--text-secondary); line-height:1.6; margin:0; }

/* ── About — Team ─────────────────────────────────────────── */
.about-team { background:#fff; padding:5rem 0; }
.team-grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.team-card  { border-radius:16px; overflow:hidden; background:#fff; border:1px solid #E9ECEF; transition:.25s; }
.team-card:hover { box-shadow:0 12px 36px rgba(0,0,0,.1); transform:translateY(-4px); border-color:transparent; }
.team-photo-placeholder { width:100%; aspect-ratio:4/3; background:linear-gradient(135deg,#E8F0FB,#D5E5F7); display:flex; align-items:center; justify-content:center; }
.team-photo-placeholder i { font-size:3.5rem; color:rgba(15,35,64,.2); }
.team-info   { padding:1.25rem 1.25rem 1.4rem; }
.team-name   { font-size:.95rem; font-weight:700; color:var(--navy); margin-bottom:.25rem; }
.team-role   { font-size:.78rem; color:var(--coral); font-weight:600; text-transform:uppercase; letter-spacing:.07em; margin-bottom:.7rem; }
.team-bio    { font-size:.8rem; color:var(--text-secondary); line-height:1.6; margin-bottom:1rem; }
.team-social { display:flex; gap:.5rem; }
.team-social a { width:30px; height:30px; background:#F1F4F8; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.75rem; color:var(--navy); text-decoration:none; transition:.2s; }
.team-social a:hover { background:var(--coral); color:var(--navy); }

/* ── About — Partners ─────────────────────────────────────── */
.about-partners { background:#F8F9FC; padding:3.5rem 0; }
.partner-logos  { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2rem 3.5rem; margin-top:2.5rem; }
.partner-logo   { font-size:1.1rem; font-weight:800; color:#B0B8C8; letter-spacing:.04em; transition:.2s; }
.partner-logo:hover { color:var(--navy); }

/* ── Services Page ─────────────────────────────────────────── */
.services-intro { padding:5rem 0 3rem; }
.services-grid-section { background:#F8F9FC; padding:4rem 0 5rem; }
.service-card { background:#fff; border-radius:16px; padding:2rem 1.75rem; border:1px solid #E9ECEF; height:100%; display:flex; flex-direction:column; gap:.65rem; transition:.28s; }
.service-card:hover { box-shadow:0 16px 48px rgba(0,0,0,.1); border-color:transparent; transform:translateY(-5px); }
.service-icon-wrap { width:56px; height:56px; background:linear-gradient(135deg,rgba(245,196,0,.15),rgba(245,196,0,.05)); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--coral); border:1px solid rgba(245,196,0,.2); }
.service-name { font-size:1.05rem; font-weight:700; color:var(--navy); margin:0; }
.service-desc { font-size:.875rem; color:var(--text-secondary); line-height:1.65; margin:0; flex:1; }
.service-list { list-style:none; padding:0; margin:0; }
.service-list li { font-size:.8rem; color:var(--text-secondary); display:flex; align-items:flex-start; gap:.5rem; margin-bottom:.4rem; line-height:1.45; }
.service-list li i { color:var(--coral); flex-shrink:0; font-size:.85rem; margin-top:1px; }
.service-badge { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:.2rem .65rem; border-radius:var(--radius-pill); background:rgba(245,196,0,.1); color:var(--coral); border:1px solid rgba(245,196,0,.2); width:fit-content; }
.services-process { padding:5rem 0; }
.process-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; position:relative; margin-top:3rem; }
.process-steps::before { content:''; position:absolute; top:28px; left:12.5%; right:12.5%; height:2px; background:linear-gradient(90deg,var(--coral),rgba(245,196,0,.2)); z-index:0; }
.process-step { text-align:center; position:relative; z-index:1; }
.step-num  { width:56px; height:56px; border-radius:50%; background:var(--coral); color:var(--navy); font-size:1.1rem; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 1.1rem; box-shadow:0 4px 16px rgba(245,196,0,.35); }
.step-title { font-size:.9rem; font-weight:700; color:var(--navy); margin-bottom:.4rem; }
.step-desc  { font-size:.8rem; color:var(--text-secondary); line-height:1.6; }
.services-coverage { background:linear-gradient(135deg,#091729,#0F2340); padding:4.5rem 0; }
.coverage-card { border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-card); padding:1.5rem; text-align:center; transition:.25s; }
.coverage-card:hover { border-color:var(--coral); background:rgba(255,255,255,.04); }
.coverage-icon  { font-size:1.8rem; color:var(--coral); margin-bottom:.75rem; }
.coverage-title { font-size:.9rem; font-weight:700; color:#fff; margin-bottom:.4rem; }
.coverage-desc  { font-size:.78rem; color:rgba(255,255,255,.5); line-height:1.6; margin:0; }

/* ── Applications Full Page ────────────────────────────────── */
.apps-page { padding:4rem 0 5rem; }
.app-filter-bar { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:3rem; }
.app-filter-btn { display:inline-flex; align-items:center; gap:.45rem; padding:.55rem 1.35rem; border-radius:var(--radius-pill); font-size:.82rem; font-weight:600; border:2px solid #E0E4ED; color:var(--text-secondary); background:#fff; cursor:pointer; transition:.2s; }
.app-filter-btn:hover { border-color:var(--navy); color:var(--navy); }
.app-filter-btn.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.app-cat-section { margin-bottom:4rem; transition:opacity .3s; }
.app-cat-section.hidden { display:none; }
.app-cat-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:2px solid #F1F4F8; }
.app-cat-title  { font-size:1.2rem; font-weight:800; color:var(--navy); display:flex; align-items:center; gap:.6rem; margin:0; }
.app-cat-title i { color:var(--coral); }
.app-cat-link   { font-size:.82rem; font-weight:700; color:var(--coral); text-decoration:none; display:flex; align-items:center; gap:.35rem; transition:.2s; }
.app-cat-link:hover { color:var(--navy); }
.app-masonry-lg { display:grid; grid-template-columns:1.65fr 1fr 1fr; grid-template-rows:260px 260px 200px; gap:.85rem; }
.app-masonry-lg .app-card { height:100%; }
.app-masonry-lg .app-card:nth-child(1) { grid-row:1/3; }
.app-masonry-lg .app-card:nth-child(6) { grid-column:1/4; }
.app-masonry-lg .app-card:nth-child(6) .app-card-overlay { flex-direction:row; align-items:flex-end; gap:1rem; padding:1.1rem 1.75rem; background:linear-gradient(90deg,rgba(6,16,32,.9) 0%,rgba(6,16,32,.35) 60%,transparent 100%); }
.app-masonry-lg .app-card:nth-child(6) .app-machine { margin-left:auto; flex-shrink:0; }

/* ── Home masonry (replaces tabs) ──────────────────────────── */
.app-home-masonry { display:grid; grid-template-columns:1.65fr 1fr 1fr; grid-template-rows:270px 270px 220px; gap:.85rem; margin-bottom:2.5rem; }
.app-home-masonry .app-card { height:100%; }
.app-home-masonry .app-card:nth-child(1) { grid-row:1/3; }
.app-home-masonry .app-card:nth-child(6) { grid-column:1/4; }
.app-home-masonry .app-card:nth-child(6) .app-card-overlay { flex-direction:row; align-items:flex-end; gap:1rem; padding:1.1rem 1.75rem; background:linear-gradient(90deg,rgba(6,16,32,.9) 0%,rgba(6,16,32,.3) 60%,transparent 100%); }
.app-home-masonry .app-card:nth-child(6) .app-machine { margin-left:auto; flex-shrink:0; }
.app-home-cta { display:flex; align-items:center; justify-content:center; gap:1.25rem; flex-wrap:wrap; }

/* ── Contact Page ───────────────────────────────────────────── */
.contact-section { padding:5rem 0; }
.contact-form-card { background:#fff; border-radius:20px; padding:2.5rem; box-shadow:0 8px 40px rgba(0,0,0,.08); border:1px solid #E9ECEF; }
.contact-form-card h3 { font-size:1.35rem; font-weight:700; color:var(--navy); margin-bottom:1.5rem; }
.contact-info-side { display:flex; flex-direction:column; gap:1.25rem; }
.contact-info-card { background:#fff; border-radius:16px; padding:1.5rem; border:1px solid #E9ECEF; display:flex; align-items:flex-start; gap:1.1rem; transition:.2s; }
.contact-info-card:hover { box-shadow:0 6px 20px rgba(0,0,0,.07); border-color:#D0D5DD; }
.contact-info-icon  { width:44px; height:44px; border-radius:12px; background:rgba(245,196,0,.1); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--coral); flex-shrink:0; }
.contact-info-label { font-size:.72rem; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.25rem; }
.contact-info-val   { font-size:.9rem; font-weight:600; color:var(--navy); text-decoration:none; line-height:1.4; display:block; }
a.contact-info-val:hover { color:var(--coral); }
.contact-map-card   { border-radius:16px; overflow:hidden; border:1px solid #E9ECEF; }
.contact-map-card iframe { width:100%; height:260px; border:0; display:block; }
.contact-hours { background:#F8F9FC; border-radius:12px; padding:1.25rem 1.5rem; }
.contact-hours h6 { font-size:.8rem; font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.75rem; }
.hours-row { display:flex; justify-content:space-between; font-size:.83rem; color:var(--text-secondary); margin-bottom:.4rem; }
.hours-row span:last-child { font-weight:600; color:var(--navy); }
.contact-wa-banner { background:linear-gradient(135deg,#075E54,#128C7E); border-radius:16px; padding:2rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-top:2rem; flex-wrap:wrap; }
.contact-wa-banner p { margin:0; color:#fff; font-size:.95rem; }
.contact-wa-banner p strong { display:block; font-size:1.1rem; margin-bottom:.25rem; }

/* ── Blog Detail Page ────────────────────────────────────────── */
.blog-detail-hero { background:linear-gradient(135deg,#091729 0%,#0F2340 100%); padding:5rem 0 4rem; }
.blog-category-badge { display:inline-flex; align-items:center; gap:.4rem; background:var(--coral); color:var(--navy); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; padding:.3rem .9rem; border-radius:var(--radius-pill); margin-bottom:1rem; }
.blog-article-title  { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; color:#fff; line-height:1.2; margin-bottom:1.25rem; }
.blog-meta-row { display:flex; align-items:center; flex-wrap:wrap; gap:1.25rem; font-size:.82rem; color:rgba(255,255,255,.6); }
.blog-meta-row i { color:var(--coral); }
.blog-meta-author { color:rgba(255,255,255,.8); font-weight:600; }
.blog-detail-body { padding:4rem 0 5rem; background:#F8F9FC; }
.blog-content { font-size:.95rem; color:var(--text-secondary); line-height:1.8; background:#fff; border-radius:16px; padding:2.5rem; border:1px solid #E9ECEF; }
.blog-content h2 { font-size:1.5rem; font-weight:800; color:var(--navy); margin:2.5rem 0 1rem; line-height:1.25; }
.blog-content h3 { font-size:1.15rem; font-weight:700; color:var(--navy); margin:2rem 0 .85rem; }
.blog-content p  { margin-bottom:1.4rem; }
.blog-content ul,.blog-content ol { margin-bottom:1.4rem; padding-left:1.4rem; }
.blog-content ul li,.blog-content ol li { margin-bottom:.5rem; line-height:1.65; }
.blog-content img { width:100%; border-radius:var(--radius-card); margin:1.75rem 0; display:block; }
.blog-content blockquote { border-left:4px solid var(--coral); padding:1.25rem 1.5rem; margin:2rem 0; background:#FFF8E6; border-radius:0 var(--radius-card) var(--radius-card) 0; }
.blog-content blockquote p { margin:0; font-size:1.05rem; font-weight:600; color:var(--navy); font-style:italic; }
.blog-content .blog-feature-img { aspect-ratio:16/9; object-fit:cover; width:100%; border-radius:var(--radius-card); margin-bottom:2rem; display:block; }
.blog-sidebar { display:flex; flex-direction:column; gap:1.75rem; }
.sidebar-card  { background:#fff; border-radius:16px; padding:1.5rem; border:1px solid #E9ECEF; }
.sidebar-card h5 { font-size:.82rem; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.08em; margin-bottom:1.1rem; padding-bottom:.75rem; border-bottom:2px solid var(--coral); }
.sidebar-toc   { list-style:none; padding:0; margin:0; }
.sidebar-toc li { margin-bottom:.55rem; }
.sidebar-toc a  { font-size:.85rem; color:var(--text-secondary); text-decoration:none; display:flex; align-items:center; gap:.5rem; padding:.35rem .5rem; border-radius:6px; transition:.2s; }
.sidebar-toc a:hover { background:#F8F9FC; color:var(--navy); }
.sidebar-toc a i { color:var(--coral); font-size:.7rem; flex-shrink:0; }
.sidebar-author { display:flex; align-items:center; gap:1rem; }
.author-avatar  { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#E8F0FB,#D5E5F7); display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--navy); flex-shrink:0; overflow:hidden; }
.author-name    { font-size:.9rem; font-weight:700; color:var(--navy); }
.author-title-sm{ font-size:.75rem; color:var(--text-secondary); }
.author-bio     { font-size:.82rem; color:var(--text-secondary); line-height:1.65; margin:.85rem 0 0; }
.blog-tags      { display:flex; flex-wrap:wrap; gap:.5rem; }
.blog-tag       { font-size:.75rem; font-weight:600; padding:.3rem .85rem; border-radius:var(--radius-pill); background:#F1F4F8; color:var(--text-secondary); text-decoration:none; transition:.2s; }
.blog-tag:hover { background:var(--navy); color:#fff; }
.related-article { display:flex; gap:.85rem; align-items:flex-start; padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid #F1F4F8; text-decoration:none; }
.related-article:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.related-article-img   { width:70px; height:56px; border-radius:8px; object-fit:cover; flex-shrink:0; background:#EBF1FA; display:block; }
.related-article-title { font-size:.82rem; font-weight:600; color:var(--navy); line-height:1.4; transition:.2s; }
.related-article:hover .related-article-title { color:var(--coral); }
.related-article-date  { font-size:.72rem; color:var(--text-secondary); margin-top:.25rem; }
.blog-share { display:flex; align-items:center; gap:.75rem; margin-top:2.5rem; padding-top:1.75rem; border-top:2px solid #F1F4F8; }
.share-label { font-size:.85rem; font-weight:700; color:var(--navy); }
.share-btn   { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.9rem; text-decoration:none; transition:.2s; }
.share-btn.is-linkedin { background:#0A66C2; color:#fff; }
.share-btn.is-twitter  { background:#000; color:#fff; }
.share-btn.is-whatsapp { background:#25D366; color:#fff; }
.share-btn:hover       { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.2); }
.blog-nav-row  { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; }
.blog-nav-card { border:1px solid #E9ECEF; border-radius:var(--radius-card); padding:1.25rem; text-decoration:none; transition:.2s; display:block; }
.blog-nav-card:hover { border-color:var(--coral); box-shadow:0 4px 16px rgba(0,0,0,.06); }
.blog-nav-dir  { font-size:.7rem; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.35rem; display:flex; align-items:center; gap:.35rem; }
.blog-nav-dir i { color:var(--coral); }
.blog-nav-title { font-size:.875rem; font-weight:700; color:var(--navy); line-height:1.4; }
.blog-nav-card.is-next { text-align:right; }
.blog-nav-card.is-next .blog-nav-dir { justify-content:flex-end; }

/* ── Inner pages responsive ─────────────────────────────────── */
@media (max-width:991.98px) {
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .process-steps { grid-template-columns:repeat(2,1fr); gap:2rem; }
  .process-steps::before { display:none; }
  .app-home-masonry { grid-template-columns:1fr 1fr; grid-template-rows:220px 220px 220px auto; }
  .app-home-masonry .app-card:nth-child(1) { grid-row:1; grid-column:1/3; }
  .app-home-masonry .app-card:nth-child(6) { grid-column:1/3; height:180px; }
  .app-home-masonry .app-card:nth-child(6) .app-card-overlay { flex-direction:column; align-items:flex-start; }
  .app-home-masonry .app-card:nth-child(6) .app-machine { margin-left:0; }
  .app-masonry-lg { grid-template-columns:1fr 1fr; grid-template-rows:240px 240px 180px; }
  .app-masonry-lg .app-card:nth-child(1) { grid-row:1; grid-column:1/3; }
  .app-masonry-lg .app-card:nth-child(6) { grid-column:1/3; }
  .app-masonry-lg .app-card:nth-child(6) .app-card-overlay { flex-direction:column; align-items:flex-start; }
  .app-masonry-lg .app-card:nth-child(6) .app-machine { margin-left:0; }
}
@media (max-width:575.98px) {
  .team-grid { grid-template-columns:1fr; }
  .process-steps { grid-template-columns:1fr; }
  .app-home-masonry { grid-template-columns:1fr; grid-template-rows:auto; gap:.6rem; }
  .app-home-masonry .app-card { height:200px; }
  .app-home-masonry .app-card:nth-child(1),.app-home-masonry .app-card:nth-child(6) { grid-column:1; height:220px; }
  .app-home-masonry .app-card:nth-child(6) .app-card-overlay { flex-direction:column; align-items:flex-start; }
  .app-home-masonry .app-card:nth-child(6) .app-machine { margin-left:0; }
  .app-masonry-lg { grid-template-columns:1fr; grid-template-rows:auto; }
  .app-masonry-lg .app-card { height:200px; }
  .app-masonry-lg .app-card:nth-child(1),.app-masonry-lg .app-card:nth-child(6) { grid-column:1; height:220px; }
  .blog-nav-row { grid-template-columns:1fr; }
}