:root {
  /* Backgrounds */
  --bg0: #f7f8fb;
  /* page wash */
  --bg1: #ffffff;
  /* page bg */
  --bg2: #ffffff;
  /* cards */
  --bg3: #f2f4f8;
  /* elevated */
  --bg4: #e9edf5;
  /* hover */

  /* Text */
  --t0: #0f172a;
  /* primary */
  --t1: #334155;
  /* secondary */
  --t2: #64748b;
  /* muted */
  --t3: #94a3b8;
  /* very muted */

  /* Brand */
  --orange: #ef4931;
  --orange-d: #c73822;
  --orange-g: linear-gradient(135deg, #ef4931, #c73822);
  --orange-glow: 0 4px 24px rgba(239, 73, 49, .35);

  --blue: #ef4931;
  --blue-d: #ef4931;
  --blue-g: linear-gradient(135deg, #ef4931, #ef4931);
  --blue-glow: 0 4px 24px rgba(4, 136, 249, .3);

  /* Borders */
  --br1: rgba(15, 23, 42, .08);
  --br2: rgba(15, 23, 42, .12);
  --br3: rgba(15, 23, 42, .18);

  /* Shadows */
  --sh1: 0 1px 4px rgba(15, 23, 42, .08);
  --sh2: 0 6px 18px rgba(15, 23, 42, .12);
  --sh3: 0 14px 36px rgba(15, 23, 42, .14);
  --sh4: 0 24px 64px rgba(15, 23, 42, .18);

  /* Fonts */
  --fd: 'DM Serif Display', serif;
  --fh: 'Plus Jakarta Sans', sans-serif;
  --fb: 'Plus Jakarta Sans', sans-serif;

  /* Easing */
  --ease: cubic-bezier(.25, .46, .45, .94);
  --eout: cubic-bezier(.16, 1, .3, 1);
}

/* ═══════════════════════════════════════
RESET & BASE
═══════════════════════════════════════ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  background: var(--bg1);
  color: var(--t0);
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 4px
}

::-webkit-scrollbar-track {
  background: var(--bg0)
}

::-webkit-scrollbar-thumb {
  background: var(--orange);
  border-radius: 2px
}

img {
  max-width: 100%;
  display: block
}

a {
  text-decoration: none;
  color: inherit
}

button {
  cursor: pointer;
  font-family: inherit
}

::selection {
  background: rgba(239, 73, 49, .3);
  color: var(--t0)
}

/* ═══════════════════════════════════════
UTILITIES
═══════════════════════════════════════ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px
}

section {
  padding: 88px 0
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--orange);
}

.tag::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--orange);
  display: block;
  flex-shrink: 0
}

.h2 {
  font-family: var(--fd);
  font-size: clamp(28px, 3.5vw, 46px);
  color: var(--t0);
  line-height: 1.1;
  font-weight: 400
}

.body-txt {
  font-family: var(--fb);
  font-size: 14.5px;
  color: var(--t1);
  line-height: 1.85;
  max-width: 520px
}

.divhr {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--br2), transparent)
}

/* Glow line accent */
.glow-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange), var(--blue), transparent);
  opacity: .5
}

/* Reveal animations */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease)
}

.rv.vi {
  opacity: 1;
  transform: none
}

.d1 {
  transition-delay: .07s
}

.d2 {
  transition-delay: .14s
}

.d3 {
  transition-delay: .21s
}

.d4 {
  transition-delay: .28s
}

/* ═══════════════════════════════════════
BUTTONS
═══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fh);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: 6px;
  border: none;
  transition: all .22s;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
}

.btn-orange {
  background: var(--orange-g);
  color: #fff;
  box-shadow: var(--orange-glow)
}

.btn-orange:hover {
  box-shadow: 0 6px 28px rgba(239, 73, 49, .5);
  transform: translateY(-2px);
  filter: brightness(1.08)
}

.btn-blue {
  background: var(--blue-g);
  color: #fff;
  box-shadow: var(--blue-glow)
}

.btn-blue:hover {
  box-shadow: 0 6px 28px rgba(4, 136, 249, .45);
  transform: translateY(-2px);
  filter: brightness(1.08)
}

.btn-ghost {
  background: transparent;
  color: var(--t1);
  border: 1.5px solid var(--br2);
  font-size: 11.5px;
  padding: 9px 20px
}

.btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(227, 227, 227, 0.08)
}

/* ═══════════════════════════════════════
TOPBAR
═══════════════════════════════════════ */
.topbar {
  background: var(--bg0);
  border-bottom: 1px solid var(--br1);
  font-family: var(--fh);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 20px;
  color: var(--t2);
}

.topbar strong {
  color: var(--orange)
}

.topbar span {
  color: var(--t3);
  margin: 0 10px
}

/* ═══════════════════════════════════════
HEADER
═══════════════════════════════════════ */
#site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

#hdr {
  position: relative;
  top: 0;
  padding: 10px 0;
  z-index: 1000;
  background: rgb(0 0 0);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--br1);
  transition: all .3s;
}

#hdr.cmp {
  box-shadow: var(--sh3);
  border-bottom-color: var(--br2)
}

.hdr-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0
}

.logo img {
  height: 100%;
  width: 80px;
  opacity: .9
}

.logo-brand {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 800;
  color: var(--t0);
  letter-spacing: .5px;
  text-transform: uppercase
}

.logo-sub {
  font-family: var(--fb);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--orange);
  text-transform: uppercase;
  margin-top: 3px
}

/* Desktop nav */
.desk-nav {
  display: flex;
  align-items: center;
  gap: 2px
}

.ni {
  position: relative
}

.nl {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 13px;
  font-family: var(--fh);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #cfcfcf;
  border-radius: 5px;
  transition: all .2s;
  white-space: nowrap;
}

.nl .arr {
  width: 8px;
  height: 8px;
  transition: transform .2s
}

.ni:hover .nl {
  color: var(--blue);
  background: rgba(4, 136, 249, .1)
}

.ni:hover .nl .arr {
  transform: rotate(180deg)
}

/* Products dropdown – 2 col text only */
.pdrop {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 320px;
  background: rgb(0 0 0);
  border: 1px solid #333;
  border-radius: 10px;
  padding: 10px;
  box-shadow: var(--sh4);
  opacity: 0;
  visibility: hidden;
  transition: all .22s var(--ease);
}

.ni:hover .pdrop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0)
}

.pdrop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px
}

.pdrop a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 500;
  color: #cfcfcf;
  transition: all .18s;
  line-height: 1.3;
}

.pdrop a:hover {
  background: rgba(4, 136, 249, .12);
  color: var(--blue)
}

.hdr-ctas {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0
}

.brochure-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #cfcfcf;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1.5px solid var(--br2);
  transition: all .2s;
}

.brochure-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2
}

.brochure-btn:hover {
  color: var(--orange);
  border-color: rgba(239, 73, 49, .4);
  background: rgba(239, 73, 49, .08)
}

/* Hamburger */
.ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer
}

.ham span {
  width: 21px;
  height: 2px;
  background: #cfcfcf;
  border-radius: 2px;
  display: block;
  transition: all .28s
}

/* ═══════════════════════════════════════
OFF-CANVAS MOBILE NAV
═══════════════════════════════════════ */
.mob-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1998;
  background: rgba(15, 23, 42, .45);
  opacity: 0;
  transition: opacity .3s;
}

.mob-overlay.open {
  display: block;
  opacity: 1
}

.mob-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1999;
  width: 290px;
  max-width: 85vw;
  background: rgb(0 0 0);
  border-left: 1px solid var(--br2);
  transform: translateX(100%);
  transition: transform .32s var(--eout);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mob-panel.open {
  transform: translateX(0)
}

.mob-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--br1);
  flex-shrink: 0;
}

.mob-logo {
  display: flex;
  align-items: center;
  gap: 9px
}

.mob-logo img {
  height: 60px;

  opacity: .85
}

.mob-logo-t {
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 800;
  color: var(--t0);
  text-transform: uppercase
}

.mob-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--br2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
}

.mob-close-btn:hover {
  background: var(--bg4)
}

.mob-close-btn svg {
  width: 15px;
  height: 15px;
  stroke: var(--t1);
  stroke-width: 2;
  fill: none
}

.mob-links {
  padding: 10px 0;
  flex: 1
}

.mob-links a {
  display: block;
  padding: 11px 20px;
  font-family: var(--fh);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #cfcfcf;
  border-bottom: 1px solid var(--br1);
  transition: color .2s;
}

.mob-links a:hover {
  color: var(--orange)
}

.mob-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.mob-cat svg {
  width: 11px;
  height: 11px;
  stroke: var(--t2);
  stroke-width: 2;
  fill: none;
  transition: transform .25s
}

.mob-cat.exp svg {
  transform: rotate(180deg)
}

.mob-sub-group {
  display: none;
  background: var(--bg1);
}

.mob-sub-group.open {
  display: block
}

.mob-sub-group a {
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: #cfcfcf;
  padding-left: 32px;
  background-color: rgb(0 0 0);
}

.mob-sub-group a:hover {
  color: var(--blue)
}

.mob-footer {
  padding: 18px 20px;
  border-top: 1px solid var(--br1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0
}

/* ── BREADCRUMB ── */
.breadcrumb {
  background: var(--bg0);
  border-bottom: 1px solid var(--br1);
  padding: 14px 0;
}

.bc-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fh);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t2)
}

.bc-inner a {
  color: var(--t2);
  transition: color .2s
}

.bc-inner a:hover {
  color: var(--orange)
}

.bc-inner svg {
  width: 10px;
  height: 10px;
  stroke: var(--t3);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0
}

.bc-inner span {
  color: var(--t0)
}

/* ═══════════════════════════════════════
HERO
═══════════════════════════════════════ */
#hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 100px 0 60px;
  background: var(--bg0);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=1600&q=80');
  background-size: cover;
  background-position: center;
  filter: brightness(.92) saturate(.95);
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, .92) 35%, rgba(255, 255, 255, .65) 100%);
}

/* Animated grid overlay */
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(15, 23, 42, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5) 30%, rgba(0, 0, 0, .5) 70%, transparent);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
  animation: fu .7s ease both;
}

.hero-eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--orange)
}

.hero-h1 {
  font-family: var(--fd);
  font-size: clamp(40px, 5.5vw, 68px);
  color: var(--t0);
  line-height: 1.05;
  font-weight: 400;
  margin-bottom: 18px;
  animation: fu .7s .08s ease both;
}

.hero-h1 em {
  font-style: italic;
  color: var(--orange)
}

.hero-h1 strong {
  color: var(--blue);
  font-weight: 400
}

.hero-desc {
  font-family: var(--fb);
  font-size: 15px;
  color: var(--t1);
  line-height: 1.85;
  max-width: 480px;
  margin-bottom: 32px;
  animation: fu .7s .16s ease both;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  animation: fu .7s .22s ease both
}

.hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--br1);
  flex-wrap: wrap;
  animation: fu .7s .32s ease both;
}

.stat-n {
  font-family: var(--fd);
  font-size: 38px;
  color: var(--t0);
  line-height: 1
}

.stat-n span {
  font-family: var(--fh);
  font-size: 20px;
  font-weight: 800;
  color: var(--orange)
}

.stat-l {
  font-family: var(--fh);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--t2);
  margin-top: 4px
}

/* Hero right – image card */
.hero-right {
  position: relative;
  animation: fi .9s .2s ease both
}

.hero-img-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sh4);
  border: 1px solid var(--br2);
  position: relative;
}

.hero-img-card img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block
}

.hero-img-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, .08) 0%, transparent 55%);
}

.hero-badge {
  position: absolute;
  bottom: -16px;
  left: -16px;
  background: var(--bg2);
  border: 1px solid var(--br2);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: var(--sh3);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}

.badge-ic {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(239, 73, 49, .15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-ic svg {
  width: 18px;
  height: 18px;
  stroke: var(--orange);
  fill: none;
  stroke-width: 1.8
}

.badge-tt {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 700;
  color: var(--t0)
}

.badge-st {
  font-family: var(--fb);
  font-size: 11px;
  color: var(--t2);
  margin-top: 2px
}

.hero-cert {
  position: absolute;
  top: 16px;
  right: -14px;
  background: var(--blue-g);
  color: #fff;
  border-radius: 10px;
  padding: 13px 16px;
  text-align: center;
  box-shadow: var(--blue-glow);
  z-index: 2;
}

.hero-cert .cn {
  font-family: var(--fh);
  font-size: 22px;
  font-weight: 800;
  line-height: 1
}

.hero-cert .cl {
  font-family: var(--fh);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: .8
}

@keyframes fu {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fi {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* ═══════════════════════════════════════
STATS BAR
═══════════════════════════════════════ */
.statsbar {
  background: var(--bg0);
  border-top: 1px solid var(--br1);
  border-bottom: 1px solid var(--br1)
}

.statsbar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid var(--br1)
}

.sb-item {
  padding: 28px 32px;
  border-right: 1px solid var(--br1);
  position: relative;
  overflow: hidden;
}

.sb-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--blue));
  opacity: 0;
  transition: opacity .3s;
}

.sb-item:hover::before {
  opacity: 1
}

.sb-n {
  font-family: var(--fd);
  font-size: 38px;
  color: var(--t0);
  line-height: 1
}

.sb-n span {
  font-family: var(--fh);
  font-size: 20px;
  font-weight: 800;
  color: var(--orange)
}

.sb-l {
  font-family: var(--fh);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--t2);
  margin-top: 5px
}

/* ═══════════════════════════════════════
ABOUT
═══════════════════════════════════════ */
#about {
  background: var(--bg1)
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center
}

.about-img-col {
  position: relative
}

.about-main {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--sh3);
  border: 1px solid var(--br1);
}

.about-main img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block
}

.about-accent {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 170px;
  height: 170px;
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid var(--bg2);
  box-shadow: var(--sh3);
}

.about-accent img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.about-chip {
  position: absolute;
  top: 20px;
  left: -20px;
  background: var(--bg2);
  border: 1px solid var(--br2);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: var(--sh2);
  display: flex;
  align-items: center;
  gap: 10px;
}

.chip-ic {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: rgba(4, 136, 249, .15);
  display: flex;
  align-items: center;
  justify-content: center
}

.chip-ic svg {
  width: 16px;
  height: 16px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2
}

.chip-t {
  font-family: var(--fh);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t0)
}

.chip-s {
  font-family: var(--fb);
  font-size: 10px;
  color: var(--t2)
}

.about-text .h2 {
  margin: 12px 0 18px
}

.about-text p {
  font-family: var(--fb);
  font-size: 14.5px;
  color: var(--t1);
  line-height: 1.85;
  margin-bottom: 14px
}

.about-feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 22px 0
}

.af {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border-radius: 8px;
  background: var(--bg2);
  border: 1px solid var(--br1);
  transition: border-color .2s;
}

.af:hover {
  border-color: rgba(4, 136, 249, .3)
}

.af-ic {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(208, 208, 208, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.af-ic svg {
  width: 13px;
  height: 13px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2.2
}

.af-t {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 700;
  color: var(--t0);
  letter-spacing: .2px
}

.ind-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px
}

.ipill {
  font-family: var(--fh);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--bg3);
  color: var(--t2);
  border: 1px solid var(--br1);
  transition: all .18s;
  cursor: default;
}

.ipill:hover {
  background: rgba(4, 136, 249, .12);
  color: var(--blue);
  border-color: rgba(4, 136, 249, .3)
}

/* ═══════════════════════════════════════
PRODUCTS
═══════════════════════════════════════ */
#products {
  background: var(--bg0);
  padding-bottom: 100px
}

.prod-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 44px;
  flex-wrap: wrap;
  gap: 20px
}

.prod-hdr .h2 {
  margin-top: 11px
}

.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

/* Card 10 — center it */
.prod-grid .pc:nth-child(10) {
  grid-column: 2
}

.pc {
  background: var(--bg2);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--br1);
  box-shadow: var(--sh1);
  transition: all .3s var(--eout);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.pc:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh4);
  border-color: rgba(4, 136, 249, .25)
}

.pc-img {
  height: 182px;
  overflow: hidden;
  position: relative;
  background: var(--bg3)
}

.pc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--eout);
  filter: brightness(.85)
}

.pc:hover .pc-img img {
  transform: scale(1.06);
  filter: brightness(.95)
}

.pc-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, .10) 0%, transparent 55%)
}

.pc-num {
  position: absolute;
  top: 11px;
  left: 11px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(6px);
  border: 1px solid var(--br2);
  border-radius: 5px;
  padding: 3px 9px;
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--t2);
}

.pc-body {
  padding: 16px 16px 10px;
  flex: 1;
  display: flex;
  flex-direction: column
}

.pc-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fh);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}

.pc-cat::before {
  content: '';
  width: 10px;
  height: 2px;
  background: var(--blue)
}

.pc-name {
  font-family: var(--fd);
  font-size: 17px;
  color: var(--t0);
  line-height: 1.2;
  margin-bottom: 8px
}

.pc-desc {
  font-family: var(--fb);
  font-size: 12.5px;
  color: var(--t2);
  line-height: 1.65;
  flex: 1
}

.pc-foot {
  padding: 11px 16px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--br1);
  margin-top: 6px;
}

.pc-enq {
  font-family: var(--fh);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 5px;
}

.pc-enq::after {
  content: '→';
  transition: transform .2s
}

.pc:hover .pc-enq::after {
  transform: translateX(4px)
}

.pc-badge {
  font-family: var(--fh);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--bg3);
  color: var(--t2);
  border: 1px solid var(--br1);
}

.pc:hover .pc-badge {
  background: rgba(4, 136, 249, .12);
  color: var(--blue);
  border-color: rgba(4, 136, 249, .25)
}

/* ═══════════════════════════════════════
WHY US – DARK ELEVATED
═══════════════════════════════════════ */
.why-section {
  background: var(--bg0);
  border-top: 1px solid var(--br1);
  border-bottom: 1px solid var(--br1);
  padding: 88px 0
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 2.3fr;
  gap: 56px;
  align-items: start
}

.why-left .h2 {
  color: var(--t0);
  margin: 12px 0 16px
}

.why-left .body-txt {
  color: var(--t1)
}

.why-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

.wc {
  background: var(--bg2);
  border: 1px solid var(--br1);
  border-radius: 12px;
  padding: 22px;
  transition: all .3s;
}

.wc:hover {
  background: var(--bg3);
  transform: translateY(-4px);
  border-color: rgba(197, 197, 197, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5)
}

.wc-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(215, 215, 215, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: background .3s;
}

.wc:hover .wc-icon {
  background: rgba(223, 223, 223, 0.22)
}

.wc-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.wc-title {
  font-family: var(--fh);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--t0);
  margin-bottom: 8px
}

.wc-body {
  font-family: var(--fb);
  font-size: 12.5px;
  color: var(--t2);
  line-height: 1.72
}

/* ═══════════════════════════════════════
VIDEOS – SWIPER
═══════════════════════════════════════ */
#videos {
  background: var(--bg1)
}

.vid-hdr {
  text-align: center;
  margin-bottom: 44px
}

.vid-hdr .tag {
  justify-content: center
}

.vid-hdr .h2 {
  margin: 12px 0 10px
}

.vid-hdr .body-txt {
  margin: 0 auto
}

.swiper.vid-swiper {
  padding: 6px 4px 48px
}

.vc {
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg2);
  border: 1px solid var(--br1);
  box-shadow: var(--sh1);
  transition: all .3s;
  cursor: pointer;
}

.vc:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh3);
  border-color: var(--br2)
}

.vthumb {
  height: 192px;
  position: relative;
  overflow: hidden
}

.vthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
  filter: brightness(.75)
}

.vc:hover .vthumb img {
  transform: scale(1.05);
  filter: brightness(.85)
}

.vov {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .10);
  transition: background .3s
}

.vc:hover .vov {
  background: rgba(15, 23, 42, .18)
}

.play-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh2);
  transition: all .3s;
  z-index: 2;
}

.vc:hover .play-ring {
  background: var(--orange-g);
  border-color: transparent;
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: var(--orange-glow)
}

.play-ring svg {
  width: 16px;
  height: 16px;
  margin-left: 3px
}

.play-ring svg polygon {
  fill: #fff
}

.vbody {
  padding: 16px 18px 18px
}

.vtitle {
  font-family: var(--fd);
  font-size: 17px;
  color: var(--t0);
  margin-bottom: 5px;
  line-height: 1.3
}

.vsub {
  font-family: var(--fb);
  font-size: 12.5px;
  color: var(--t2);
  line-height: 1.6
}

.vwatch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange);
}

/* ═══════════════════════════════════════
TESTIMONIALS – SWIPER
═══════════════════════════════════════ */
#testimonials {
  background: var(--bg0);
  overflow: hidden
}

.test-hdr {
  text-align: center;
  margin-bottom: 48px
}

.test-hdr .tag {
  justify-content: center
}

.test-hdr .h2 {
  margin: 12px 0 10px
}

.test-hdr .body-txt {
  margin: 0 auto
}

.swiper.test-swiper {
  padding: 8px 4px 52px
}

.tcard {
  background: var(--bg2);
  border-radius: 14px;
  padding: 28px;
  border: 1px solid var(--br1);
  box-shadow: var(--sh1);
  transition: all .3s;
  height: auto;
}

.tcard:hover {
  box-shadow: var(--sh3);
  border-color: rgba(4, 136, 249, .2);
  background: var(--bg3)
}

.tcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px
}

.stars {
  font-size: 13px;
  letter-spacing: 2px;
  color: #f59e0b
}

.qm {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(239, 73, 49, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fd);
  font-size: 22px;
  color: var(--orange);
  line-height: 1;
  padding-bottom: 4px;
}

.ttext {
  font-family: var(--fb);
  font-size: 13.5px;
  color: var(--t1);
  line-height: 1.85;
  margin-bottom: 20px;
  font-style: italic
}

.tauthor {
  display: flex;
  align-items: center;
  gap: 11px
}

.tav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(4, 136, 249, .25), rgba(239, 73, 49, .15));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 800;
  color: var(--blue);
  border: 1.5px solid var(--br2);
}

.tan {
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 700;
  color: var(--t0)
}

.tco {
  font-family: var(--fb);
  font-size: 11.5px;
  color: var(--t2);
  margin-top: 2px
}

/* Swiper theming */
.swiper-pagination-bullet {
  background: var(--br3);
  opacity: 1;
  width: 7px;
  height: 7px;
  transition: all .25s
}

.swiper-pagination-bullet-active {
  background: var(--orange);
  width: 22px;
  border-radius: 4px
}

.swiper-button-next,
.swiper-button-prev {
  width: 36px !important;
  height: 36px !important;
  border-radius: 7px;
  background: var(--bg2);
  border: 1px solid var(--br2);
  box-shadow: var(--sh2);
  transition: all .22s;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  border-color: var(--blue);
  background: rgba(4, 136, 249, .1)
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 12px !important;
  font-weight: 700;
  color: var(--t1)
}

.swiper-button-next:hover::after,
.swiper-button-prev:hover::after {
  color: var(--blue)
}

/* ═══════════════════════════════════════
CONTACT
═══════════════════════════════════════ */
#contact {
  background: var(--bg1)
}

.cont-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start
}

.cinfo .h2 {
  margin: 12px 0 12px
}

.cinfo .body-txt {
  margin-bottom: 28px
}

.cdet {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 0;
  border-bottom: 1px solid var(--br1)
}

.cdet:last-of-type {
  border-bottom: none
}

.cdet-ic {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(222, 222, 222, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cdet-ic svg {
  width: 16px;
  height: 16px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.8
}

.cdet-l {
  font-family: var(--fh);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--t2)
}

.cdet-v {
  font-family: var(--fb);
  font-size: 13.5px;
  color: var(--t1);
  line-height: 1.65;
  margin-top: 2px
}

.cdet-v a {
  color: var(--blue);
  transition: opacity .2s
}

.cdet-v a:hover {
  opacity: .7
}

.map-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue);
  border: 1.5px solid rgba(202, 202, 202, 0.3);
  border-radius: 5px;
  padding: 6px 12px;
  transition: all .2s;
}

.map-btn:hover {
  background: rgba(4, 136, 249, .1)
}

.cform {
  background: var(--bg2);
  border: 1px solid var(--br2);
  border-radius: 14px;
  padding: 34px;
  position: relative;
  overflow: hidden;
}

.cform::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--blue));
  border-radius: 14px 14px 0 0;
}

.form-title {
  font-family: var(--fd);
  font-size: 27px;
  color: var(--t0);
  margin-bottom: 4px
}

.form-sub {
  font-family: var(--fb);
  font-size: 13px;
  color: var(--t2);
  margin-bottom: 22px
}

.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px
}

.fg {
  margin-bottom: 13px
}

label {
  display: block;
  font-family: var(--fh);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--t2);
  margin-bottom: 6px;
}

input,
select,
textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: 7px;
  background: var(--bg3);
  border: 1.5px solid var(--br1);
  color: var(--t0);
  font-family: var(--fb);
  font-size: 14px;
  outline: none;
  transition: all .2s;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(4, 136, 249, .12)
}

input::placeholder,
textarea::placeholder {
  color: var(--t3)
}

select option {
  background: var(--bg2);
  color: var(--t0)
}

textarea {
  resize: vertical;
  min-height: 88px
}

.fsub {
  width: 100%;
  justify-content: center;
  font-size: 12px;
  padding: 12px;
  margin-top: 6px
}

/* ═══════════════════════════════════════
TOAST
═══════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  background: var(--bg2);
  color: var(--t0);
  border: 1px solid var(--br2);
  border-left: 3px solid #22c55e;
  border-radius: 8px;
  padding: 12px 20px;
  font-family: var(--fh);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .5px;
  transform: translateX(200px);
  opacity: 0;
  transition: all .38s var(--ease);
  box-shadow: var(--sh4);
}

.toast.sh {
  transform: none;
  opacity: 1
}

/* ═══════════════════════════════════════
VIDEO MODAL
═══════════════════════════════════════ */
#vmod {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, .86);
  align-items: center;
  justify-content: center
}

#vmod.sh {
  display: flex
}

.vmi {
  position: relative;
  width: 90%;
  max-width: 840px;
  aspect-ratio: 16/9
}

#vfr {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 10px
}

.vcl {
  position: absolute;
  top: -42px;
  right: 0;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: var(--t1);
  font-family: var(--fh);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 5px;
  cursor: pointer;
  transition: background .2s;
}

.vcl:hover {
  background: rgba(255, 255, 255, .15)
}

/* ═══════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════ */
@media(max-width:1050px) {
  .prod-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .prod-grid .pc:nth-child(10) {
    grid-column: auto
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .why-cards-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px
  }

  .statsbar-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:900px) {

  .desk-nav,
  .hdr-ctas {
    display: none
  }

  .ham {
    display: flex
  }

  section {
    padding: 60px 0
  }

  .container {
    padding: 0 20px
  }

  .hero-inner {
    grid-template-columns: 1fr
  }



  .about-grid {
    grid-template-columns: 1fr
  }

  .about-img-col {
    display: none
  }

  .cont-grid {
    grid-template-columns: 1fr
  }

  .why-cards-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .pd-gallery {
    position: sticky;
    top: calc(66px + 20px);
    padding-right: 48px;
  }
}

@media(max-width:640px) {
  .prod-grid {
    grid-template-columns: 1fr
  }

  .frow {
    grid-template-columns: 1fr
  }

  .foot-top {
    grid-template-columns: 1fr
  }

  .foot-bot {
    flex-direction: column;
    text-align: center
  }

  .hero-stats {
    gap: 20px
  }

  .prod-hdr {
    flex-direction: column;
    align-items: flex-start
  }

  .statsbar-grid {
    grid-template-columns: 1fr 1fr
  }

  .why-cards-grid {
    grid-template-columns: 1fr
  }
}


/* ═══════════════════════════════════════
   PRODUCT DETAIL LAYOUT
   ═══════════════════════════════════════ */
.pd-section {
  padding: 60px 0 80px;
  background: var(--bg1);
}

.pd-layout {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 0;
  align-items: start;
  position: relative;
}

/* ── LEFT: STICKY IMAGE GALLERY ── */
.pd-gallery {
  position: sticky;
  top: calc(66px + 20px);
  /* header height + gap */
  padding-right: 48px;
}

/* Main image swiper */
.gal-main {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--br2);
  background: var(--bg2);
  box-shadow: var(--sh3);
  margin-bottom: 14px;
}

.gal-main .swiper-slide {
  height: clamp(240px, 55vw, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg2);
  overflow: hidden;
}

.gal-main .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--eout);
}

.gal-main .swiper-slide:hover img {
  transform: scale(1.04)
}

/* navigation arrows inside main */
.gal-main .swiper-button-next,
.gal-main .swiper-button-prev {
  width: 36px !important;
  height: 36px !important;
  background: rgba(255, 255, 255, .72);
  border-radius: 8px;
  border: 1px solid var(--br2);
  backdrop-filter: blur(8px);
  transition: all .2s;
}

.gal-main .swiper-button-next:hover,
.gal-main .swiper-button-prev:hover {
  background: rgba(239, 73, 49, .2);
  border-color: rgba(239, 73, 49, .4)
}

.gal-main .swiper-button-next::after,
.gal-main .swiper-button-prev::after {
  font-size: 12px !important;
  font-weight: 800;
  color: var(--t0)
}

/* Zoom badge overlay */
.gal-zoom-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(8px);
  border: 1px solid var(--br2);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: var(--fh);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--t2);
  display: flex;
  align-items: center;
  gap: 5px;
}

.gal-zoom-badge svg {
  width: 12px;
  height: 12px;
  stroke: var(--t2);
  fill: none;
  stroke-width: 2
}

/* Thumbs swiper */
.gal-thumbs {
  padding: 4px 2px;
}

/* When ≤5 images: show as static flex, no swiper arrows */
.gal-thumbs .swiper-slide {
  width: 72px !important;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--br1);
  cursor: pointer;
  transition: all .2s;
  background: var(--bg2);
  flex-shrink: 0;
}

.gal-thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.7);
  transition: filter .2s
}

.gal-thumbs .swiper-slide-thumb-active {
  border-color: var(--orange) !important;
}

.gal-thumbs .swiper-slide-thumb-active img {
  filter: brightness(1)
}

.gal-thumbs .swiper-slide:hover img {
  filter: brightness(.9)
}

/* ── RIGHT: PRODUCT INFO ── */
.pd-info {
  padding-left: 0;
}

/* Top meta */
.pd-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.pd-cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fh);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blue);
}

.pd-cat-tag::before {
  content: '';
  width: 10px;
  height: 2px;
  background: var(--blue);
  display: block
}

.pd-stock-badge {
  font-family: var(--fh);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(34, 197, 94, .12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, .2);
}

.pd-code {
  font-family: var(--fb);
  font-size: 11px;
  color: var(--t2);
  margin-left: auto;
}

/* Product name */
.pd-name {
  font-family: var(--fd);
  font-size: clamp(30px, 4vw, 44px);
  color: var(--t0);
  line-height: 1.08;
  font-weight: 400;
  margin-bottom: 14px;
}

/* Price */
.pd-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: var(--bg2);
  border: 1px solid var(--br1);
  border-radius: 10px;
}

.pd-price {
  font-family: var(--fh);
  font-size: 28px;
  font-weight: 800;
  background: var(--orange-g);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pd-price-unit {
  font-family: var(--fb);
  font-size: 13px;
  color: var(--t2);
}

.pd-price-note {
  margin-left: auto;
  font-family: var(--fb);
  font-size: 11.5px;
  color: var(--t2);
  font-style: italic;
}

/* Short description */
.pd-short-desc {
  font-family: var(--fb);
  font-size: 14.5px;
  color: var(--t1);
  line-height: 1.85;
  margin-bottom: 28px;
  padding-left: 14px;
  border-left: 2px solid var(--orange);
}

/* CTA buttons */
.pd-ctas {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.pd-ctas .btn {
  padding: 12px 26px;
  font-size: 12px
}

/* Divider in product info */
.pd-divider {
  height: 1px;
  background: var(--br1);
  margin: 28px 0
}

/* Specifications table */
.spec-heading {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--t0);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.spec-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--br1)
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--br1);
  margin-bottom: 4px;
}

.spec-table tr {
  border-bottom: 1px solid var(--br1)
}

.spec-table tr:last-child {
  border-bottom: none
}

.spec-table tr:nth-child(even) td:first-child,
.spec-table tr:nth-child(even) th {
  background: var(--bg2)
}

.spec-table tr:nth-child(odd) td:first-child,
.spec-table tr:nth-child(odd) th {
  background: var(--bg1)
}

.spec-table td:first-child {
  width: 40%;
  padding: 11px 16px;
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t2);
  border-right: 1px solid var(--br1);
}

.spec-table td:last-child {
  padding: 11px 16px;
  font-family: var(--fb);
  font-size: 13.5px;
  color: var(--t0);
}

.spec-val-highlight {
  color: var(--orange);
  font-weight: 600
}

/* Product details content */
.pd-content {
  margin-top: 8px;
}

.pd-content h3 {
  font-family: var(--fd);
  font-size: 22px;
  color: var(--t0);
  margin: 28px 0 10px;
  font-weight: 400;
}

.pd-content h4 {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue);
  margin: 22px 0 10px;
}

.pd-content p {
  font-family: var(--fb);
  font-size: 14px;
  color: var(--t1);
  line-height: 1.85;
  margin-bottom: 14px;
}

.pd-content ul,
.pd-content ol {
  padding-left: 20px;
  margin-bottom: 14px;
}

.pd-content ul li,
.pd-content ol li {
  font-family: var(--fb);
  font-size: 14px;
  color: var(--t1);
  line-height: 1.85;
  margin-bottom: 6px;
}

.pd-content ul li::marker {
  color: var(--orange)
}

.pd-content ol li::marker {
  color: var(--blue);
  font-weight: 700
}

.pd-content strong {
  color: var(--t0);
  font-weight: 600
}

/* Feature highlight boxes inside content */
.pd-highlight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}

.pd-hl {
  background: var(--bg2);
  border: 1px solid var(--br1);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: border-color .2s;
}

.pd-hl:hover {
  border-color: rgba(4, 136, 249, .3)
}

.pd-hl-ic {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(4, 136, 249, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.pd-hl-ic svg {
  width: 14px;
  height: 14px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2
}

.pd-hl-t {
  font-family: var(--fh);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t0)
}

.pd-hl-s {
  font-family: var(--fb);
  font-size: 12px;
  color: var(--t2);
  margin-top: 2px;
  line-height: 1.5
}

/* Bottom CTA strip */
.pd-bottom-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--bg2);
  border: 1px solid var(--br1);
  border-radius: 12px;
  padding: 22px 26px;
  margin-top: 36px;
}

.pd-bottom-cta-txt .pbt {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 700;
  color: var(--t0)
}

.pd-bottom-cta-txt .pbs {
  font-family: var(--fb);
  font-size: 12.5px;
  color: var(--t2);
  margin-top: 3px
}

.pd-bottom-cta .btn {
  padding: 12px 26px;
  font-size: 12px
}

/* ═══════════════════════════════════════
ENQUIRY POPUP MODAL
═══════════════════════════════════════ */
#enquiry-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#enquiry-modal.sh {
  display: flex
}

.enq-box {
  background: var(--bg2);
  border: 1px solid var(--br2);
  border-radius: 16px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--sh4);
}

.enq-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--blue));
  border-radius: 16px 16px 0 0;
}

.enq-head {
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--br1);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.enq-title {
  font-family: var(--fd);
  font-size: 26px;
  color: var(--t0);
  font-weight: 400
}

.enq-sub {
  font-family: var(--fb);
  font-size: 13px;
  color: var(--t2);
  margin-top: 4px
}

.enq-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--br2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .2s;
  margin-top: 2px;
}

.enq-close:hover {
  background: rgba(239, 73, 49, .15);
  border-color: rgba(239, 73, 49, .3)
}

.enq-close svg {
  width: 14px;
  height: 14px;
  stroke: var(--t1);
  fill: none;
  stroke-width: 2
}

.enq-body {
  padding: 24px 32px 28px
}

.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.fg {
  margin-bottom: 14px
}

label {
  display: block;
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--t2);
  margin-bottom: 7px
}

input,
select,
textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  background: var(--bg3);
  border: 1.5px solid var(--br2);
  color: var(--t0);
  font-family: var(--fb);
  font-size: 14px;
  outline: none;
  transition: all .22s;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(4, 136, 249, .12)
}

input::placeholder,
textarea::placeholder {
  color: var(--t3)
}

select option {
  background: var(--bg3);
  color: var(--t0)
}

textarea {
  resize: vertical;
  min-height: 90px
}

.enq-sub-btn {
  width: 100%;
  justify-content: center;
  font-size: 12.5px;
  padding: 13px;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ═══════════════════════════════════════
MORE PRODUCTS SECTION
═══════════════════════════════════════ */
.more-prod-section {
  background: var(--bg0);
  padding: 88px 0 80px;
  border-top: 1px solid var(--br1);
}

.more-prod-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 44px;
  flex-wrap: wrap;
  gap: 20px;
}

.more-prod-hdr .h2 {
  margin-top: 11px
}

/* Shared product card (copied from index) */
.pc {
  background: var(--bg2);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--br1);
  box-shadow: var(--sh1);
  transition: all .3s var(--eout);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%
}

.pc:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh4);
  border-color: rgba(4, 136, 249, .25)
}

.pc-img {
  height: 182px;
  overflow: hidden;
  position: relative;
  background: var(--bg3)
}

.pc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--eout);
  filter: brightness(.85)
}

.pc:hover .pc-img img {
  transform: scale(1.06);
  filter: brightness(.95)
}

.pc-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, .10) 0%, transparent 55%)
}

.pc-num {
  position: absolute;
  top: 11px;
  left: 11px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(6px);
  border: 1px solid var(--br2);
  border-radius: 5px;
  padding: 3px 9px;
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--t2)
}

.pc-body {
  padding: 16px 16px 10px;
  flex: 1;
  display: flex;
  flex-direction: column
}

.pc-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fh);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px
}

.pc-cat::before {
  content: '';
  width: 10px;
  height: 2px;
  background: var(--blue)
}

.pc-name {
  font-family: var(--fd);
  font-size: 17px;
  color: var(--t0);
  line-height: 1.2;
  margin-bottom: 8px
}

.pc-desc {
  font-family: var(--fb);
  font-size: 12.5px;
  color: var(--t2);
  line-height: 1.65;
  flex: 1
}

.pc-foot {
  padding: 11px 16px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--br1);
  margin-top: 6px
}

.pc-enq {
  font-family: var(--fh);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 5px
}

.pc-enq::after {
  content: '→';
  transition: transform .2s
}

.pc:hover .pc-enq::after {
  transform: translateX(4px)
}

.pc-badge {
  font-family: var(--fh);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--bg3);
  color: var(--t2);
  border: 1px solid var(--br1)
}

.pc:hover .pc-badge {
  background: rgba(4, 136, 249, .12);
  color: var(--blue);
  border-color: rgba(4, 136, 249, .25)
}

/* More products swiper */
.more-swiper {
  padding: 8px 4px 48px !important
}

.more-swiper .swiper-slide {
  height: auto
}

.swiper-pagination-bullet {
  background: var(--br2);
  opacity: 1;
  width: 7px;
  height: 7px;
  transition: all .25s
}

.swiper-pagination-bullet-active {
  background: var(--orange);
  width: 22px;
  border-radius: 4px
}

.swiper-button-next,
.swiper-button-prev {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px;
  background: var(--bg2);
  border: 1.5px solid var(--br2);
  box-shadow: var(--sh2);
  transition: all .22s
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  border-color: var(--blue);
  background: rgba(4, 136, 249, .1)
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 13px !important;
  color: var(--t0);
  font-weight: 800
}

/* ── FOOTER ── */
footer {
  background: rgb(0 0 0);
  color: #ffffff;
  border-top: 1px solid var(--br1)
}

.foot-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 44px;
  padding: 60px 0 44px
}

.fb img {
  width: 80px;
  opacity: .8
}

.fb p {
  font-family: var(--fb);
  font-size: 13px;
  color: #cfcfcf;
  line-height: 1.8;
  margin-top: 16px;
  max-width: 250px;
  opacity: .7
}

.fsoc {
  display: flex;
  gap: 7px;
  margin-top: 18px
}

.fsb {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 700;
  color: #cfcfcf;
  transition: all .2s
}

.fsb:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff
}

.fct {
  font-family: var(--fh);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #cfcfcf;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #333
}

.flinks {
  list-style: none
}

.flinks li {
  margin-bottom: 8px
}

.flinks a {
  font-family: var(--fb);
  font-size: 13px;
  color: #cfcfcf;
  transition: color .2s
}

.flinks a:hover {
  color: #cfcfcf
}

.foot-bot {
  border-top: 1px solid #333;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px
}

.fcp {
  font-family: var(--fb);
  font-size: 12px;
  color: #cfcfcf
}

.fgst {
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #cfcfcf
}

.fgst span {
  color: #cfcfcf
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  background: var(--bg2);
  color: var(--t0);
  border-left: 3px solid #22c55e;
  border-radius: 8px;
  padding: 12px 20px;
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  transform: translateX(180px);
  opacity: 0;
  transition: all .38s var(--ease);
  box-shadow: var(--sh4)
}

.toast.sh {
  transform: none;
  opacity: 1
}

/* ── RESPONSIVE ── */
@media(max-width:1050px) {
  .pd-layout {
    grid-template-columns: 1fr 1fr
  }

  .pd-gallery {
    padding-right: 32px
  }

  .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px
  }
}

@media(max-width:900px) {

  .desk-nav,
  .hdr-ctas {
    display: none
  }

  .ham {
    display: flex
  }

  .pd-layout {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .pd-gallery {
    position: sticky;
    top: calc(66px + 16px);
    padding-right: 0
  }

  .gal-main .swiper-slide {
    height: 320px
  }

  .pd-bottom-cta {
    flex-direction: column;
    align-items: flex-start
  }

  .more-prod-hdr {
    flex-direction: column;
    align-items: flex-start
  }
}

@media(max-width:640px) {
  .container {
    padding: 0 20px
  }

  .pd-price-row {
    flex-wrap: wrap
  }

  .pd-price-note {
    margin-left: 0;
    width: 100%
  }

  .pd-ctas {
    flex-direction: column
  }

  .pd-ctas .btn {
    justify-content: center
  }

  .frow {
    grid-template-columns: 1fr
  }

  .foot-top {
    grid-template-columns: 1fr
  }

  .foot-bot {
    flex-direction: column;
    text-align: center
  }

  .pd-highlight-grid {
    grid-template-columns: 1fr
  }

  .enq-body {
    padding: 18px 20px 22px
  }

  .enq-head {
    padding: 20px 20px 16px
  }
}


/* ═══════════════════════════════════════
   PRODUCT DETAIL LAYOUT
   ═══════════════════════════════════════ */
.pd-section {
  padding: 60px 0 80px;
  background: var(--bg1);
  overflow-x: hidden;
}

.pd-layout {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 0;
  align-items: start;
  /* prevent either column from blowing out the grid */
  min-width: 0;
}

/* CRITICAL: both columns must have min-width:0 or swiper-wrapper
   will expand beyond the column and cause horizontal scroll */
.pd-gallery,
.pd-info {
  min-width: 0;
  width: 100%;
}

/* ── LEFT: STICKY IMAGE GALLERY ── */
.pd-gallery {
  position: sticky;
  top: calc(66px + 20px);
  padding-right: 48px;
}

/* Swiper containers must never exceed their parent column */
.gal-main,
.gal-thumbs {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  /* clips swiper-wrapper overflow */
}

/* Main image swiper */
.gal-main {
  border-radius: 14px;
  border: 1px solid var(--br2);
  background: var(--bg2);
  box-shadow: var(--sh3);
  margin-bottom: 14px;
  position: relative;
}

.gal-main .swiper-wrapper {
  width: 100%;
}

.gal-main .swiper-slide {
  height: 420px;
  width: 100% !important;
  /* force slide to column width, not vw */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg2);
  overflow: hidden;
  flex-shrink: 0;
}

.gal-main .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--eout);
}

.gal-main .swiper-slide:hover img {
  transform: scale(1.04)
}

/* navigation arrows inside main */
.gal-main .swiper-button-next,
.gal-main .swiper-button-prev {
  width: 36px !important;
  height: 36px !important;
  background: rgba(255, 255, 255, .72);
  border-radius: 8px;
  border: 1px solid var(--br2);
  backdrop-filter: blur(8px);
  transition: all .2s;
}

.gal-main .swiper-button-next:hover,
.gal-main .swiper-button-prev:hover {
  background: rgba(239, 73, 49, .2);
  border-color: rgba(239, 73, 49, .4)
}

.gal-main .swiper-button-next::after,
.gal-main .swiper-button-prev::after {
  font-size: 12px !important;
  font-weight: 800;
  color: var(--t0)
}

/* Zoom badge overlay */
.gal-zoom-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(8px);
  border: 1px solid var(--br2);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: var(--fh);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--t2);
  display: flex;
  align-items: center;
  gap: 5px;
}

.gal-zoom-badge svg {
  width: 12px;
  height: 12px;
  stroke: var(--t2);
  fill: none;
  stroke-width: 2
}

/* Thumbs swiper */
.gal-thumbs {
  padding: 4px 2px;
}

.gal-thumbs .swiper-wrapper {
  width: 100%;
  /* do NOT use transform tricks — let swiper handle it */
}

.gal-thumbs .swiper-slide {
  width: 68px !important;
  /* fixed px — safe, swiper scrolls if needed */
  height: 68px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--br1);
  cursor: pointer;
  transition: all .2s;
  background: var(--bg2);
  flex-shrink: 0;
}

.gal-thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.7);
  transition: filter .2s
}

.gal-thumbs .swiper-slide-thumb-active {
  border-color: var(--orange) !important;
}

.gal-thumbs .swiper-slide-thumb-active img {
  filter: brightness(1)
}

.gal-thumbs .swiper-slide:hover img {
  filter: brightness(.9)
}

/* ── RIGHT: PRODUCT INFO ── */
.pd-info {
  padding-left: 0;
  padding-bottom: 60px;
}

/* Top meta */
.pd-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.pd-cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fh);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blue);
}

.pd-cat-tag::before {
  content: '';
  width: 10px;
  height: 2px;
  background: var(--blue);
  display: block
}

.pd-stock-badge {
  font-family: var(--fh);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(34, 197, 94, .12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, .2);
}

.pd-code {
  font-family: var(--fb);
  font-size: 11px;
  color: var(--t2);
  margin-left: auto;
}

/* Product name */
.pd-name {
  font-family: var(--fd);
  font-size: clamp(30px, 4vw, 44px);
  color: var(--t0);
  line-height: 1.08;
  font-weight: 400;
  margin-bottom: 14px;
}

/* Price */
.pd-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: var(--bg2);
  border: 1px solid var(--br1);
  border-radius: 10px;
}

.pd-price {
  font-family: var(--fh);
  font-size: 28px;
  font-weight: 800;
  background: var(--orange-g);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pd-price-unit {
  font-family: var(--fb);
  font-size: 13px;
  color: var(--t2);
}

.pd-price-note {
  margin-left: auto;
  font-family: var(--fb);
  font-size: 11.5px;
  color: var(--t2);
  font-style: italic;
}

/* Short description */
.pd-short-desc {
  font-family: var(--fb);
  font-size: 14.5px;
  color: var(--t1);
  line-height: 1.85;
  margin-bottom: 28px;
  padding-left: 14px;
  border-left: 2px solid var(--orange);
}

/* CTA buttons */
.pd-ctas {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.pd-ctas .btn {
  padding: 12px 26px;
  font-size: 12px
}

/* Divider in product info */
.pd-divider {
  height: 1px;
  background: var(--br1);
  margin: 28px 0
}

/* Specifications table */
.spec-heading {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--t0);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.spec-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--br1)
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--br1);
  margin-bottom: 4px;
}

.spec-table tr {
  border-bottom: 1px solid var(--br1)
}

.spec-table tr:last-child {
  border-bottom: none
}

.spec-table tr:nth-child(even) td:first-child,
.spec-table tr:nth-child(even) th {
  background: var(--bg2)
}

.spec-table tr:nth-child(odd) td:first-child,
.spec-table tr:nth-child(odd) th {
  background: var(--bg1)
}

.spec-table td:first-child {
  width: 40%;
  padding: 11px 16px;
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t2);
  border-right: 1px solid var(--br1);
}

.spec-table td:last-child {
  padding: 11px 16px;
  font-family: var(--fb);
  font-size: 13.5px;
  color: var(--t0);
}

.spec-val-highlight {
  color: var(--orange);
  font-weight: 600
}

/* Product details content */
.pd-content {
  margin-top: 8px;
}

.pd-content h3 {
  font-family: var(--fd);
  font-size: 22px;
  color: var(--t0);
  margin: 28px 0 10px;
  font-weight: 400;
}

.pd-content h4 {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue);
  margin: 22px 0 10px;
}

.pd-content p {
  font-family: var(--fb);
  font-size: 14px;
  color: var(--t1);
  line-height: 1.85;
  margin-bottom: 14px;
}

.pd-content ul,
.pd-content ol {
  padding-left: 20px;
  margin-bottom: 14px;
}

.pd-content ul li,
.pd-content ol li {
  font-family: var(--fb);
  font-size: 14px;
  color: var(--t1);
  line-height: 1.85;
  margin-bottom: 6px;
}

.pd-content ul li::marker {
  color: var(--orange)
}

.pd-content ol li::marker {
  color: var(--blue);
  font-weight: 700
}

.pd-content strong {
  color: var(--t0);
  font-weight: 600
}

/* Feature highlight boxes inside content */
.pd-highlight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}

.pd-hl {
  background: var(--bg2);
  border: 1px solid var(--br1);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: border-color .2s;
}

.pd-hl:hover {
  border-color: rgba(4, 136, 249, .3)
}

.pd-hl-ic {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(4, 136, 249, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.pd-hl-ic svg {
  width: 14px;
  height: 14px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2
}

.pd-hl-t {
  font-family: var(--fh);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t0)
}

.pd-hl-s {
  font-family: var(--fb);
  font-size: 12px;
  color: var(--t2);
  margin-top: 2px;
  line-height: 1.5
}

/* Bottom CTA strip */
.pd-bottom-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--bg2);
  border: 1px solid var(--br1);
  border-radius: 12px;
  padding: 22px 26px;
  margin-top: 36px;
}

.pd-bottom-cta-txt .pbt {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 700;
  color: var(--t0)
}

.pd-bottom-cta-txt .pbs {
  font-family: var(--fb);
  font-size: 12.5px;
  color: var(--t2);
  margin-top: 3px
}

.pd-bottom-cta .btn {
  padding: 12px 26px;
  font-size: 12px
}

/* ═══════════════════════════════════════
   ENQUIRY POPUP MODAL
   ═══════════════════════════════════════ */
#enquiry-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, .8);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#enquiry-modal.sh {
  display: flex
}

.enq-box {
  background: var(--bg2);
  border: 1px solid var(--br2);
  border-radius: 16px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--sh4);
}

.enq-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--blue));
  border-radius: 16px 16px 0 0;
}

.enq-head {
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--br1);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.enq-title {
  font-family: var(--fd);
  font-size: 26px;
  color: var(--t0);
  font-weight: 400
}

.enq-sub {
  font-family: var(--fb);
  font-size: 13px;
  color: var(--t2);
  margin-top: 4px
}

.enq-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--br2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .2s;
  margin-top: 2px;
}

.enq-close:hover {
  background: rgba(239, 73, 49, .15);
  border-color: rgba(239, 73, 49, .3)
}

.enq-close svg {
  width: 14px;
  height: 14px;
  stroke: var(--t1);
  fill: none;
  stroke-width: 2
}

.enq-body {
  padding: 24px 32px 28px
}

.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.fg {
  margin-bottom: 14px
}

label {
  display: block;
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--t2);
  margin-bottom: 7px
}

input,
select,
textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  background: var(--bg3);
  border: 1.5px solid var(--br2);
  color: var(--t0);
  font-family: var(--fb);
  font-size: 14px;
  outline: none;
  transition: all .22s;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(4, 136, 249, .12)
}

input::placeholder,
textarea::placeholder {
  color: var(--t3)
}

select option {
  background: var(--bg3);
  color: var(--t0)
}

textarea {
  resize: vertical;
  min-height: 90px
}

.enq-sub-btn {
  width: 100%;
  justify-content: center;
  font-size: 12.5px;
  padding: 13px;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ═══════════════════════════════════════
   MORE PRODUCTS SECTION
   ═══════════════════════════════════════ */
.more-prod-section {
  background: var(--bg0);
  padding: 88px 0 80px;
  border-top: 1px solid var(--br1);
}

.more-prod-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 44px;
  flex-wrap: wrap;
  gap: 20px;
}

.more-prod-hdr .h2 {
  margin-top: 11px
}

/* More products swiper */
.more-swiper {
  padding: 8px 4px 48px !important
}

.more-swiper .swiper-slide {
  height: auto
}

.swiper-pagination-bullet {
  background: var(--br2);
  opacity: 1;
  width: 7px;
  height: 7px;
  transition: all .25s
}

.swiper-pagination-bullet-active {
  background: var(--orange);
  width: 22px;
  border-radius: 4px
}

.swiper-button-next,
.swiper-button-prev {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px;
  background: var(--bg2);
  border: 1.5px solid var(--br2);
  box-shadow: var(--sh2);
  transition: all .22s
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  border-color: var(--blue);
  background: rgba(4, 136, 249, .1)
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 13px !important;
  color: var(--t0);
  font-weight: 800
}


/* ── RESPONSIVE ── */
@media(max-width:1050px) {
  .pd-layout {
    grid-template-columns: 1fr 1fr
  }

  .pd-gallery {
    padding-right: 24px
  }

  .gal-main .swiper-slide {
    height: 340px
  }

  .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px
  }
}

@media(max-width:900px) {

  .desk-nav,
  .hdr-ctas {
    display: none
  }

  .ham {
    display: flex
  }

  .pd-layout {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .pd-gallery {
    position: static;
    padding-right: 0;
    width: 100%
  }

  .gal-main .swiper-slide {
    height: 300px
  }

  .pd-bottom-cta {
    flex-direction: column;
    align-items: flex-start
  }

  .more-prod-hdr {
    flex-direction: column;
    align-items: flex-start
  }
}

@media(max-width:640px) {
  .container {
    padding: 0 16px
  }

  .gal-main .swiper-slide {
    height: 260px
  }

  .gal-thumbs .swiper-slide {
    width: 56px !important;
    height: 56px
  }

  .pd-price-row {
    flex-wrap: wrap
  }

  .pd-price-note {
    margin-left: 0;
    width: 100%
  }

  .pd-ctas {
    flex-direction: column
  }

  .pd-ctas .btn {
    justify-content: center
  }

  .frow {
    grid-template-columns: 1fr
  }

  .foot-top {
    grid-template-columns: 1fr
  }

  .foot-bot {
    flex-direction: column;
    text-align: center
  }

  .pd-highlight-grid {
    grid-template-columns: 1fr
  }

  .enq-body {
    padding: 18px 20px 22px
  }

  .enq-head {
    padding: 20px 20px 16px
  }
}
/* -- SHARED PAGE HEADERS -- */
.page-title-block {
  background: var(--bg1);
  padding: 56px 0;
  text-align: center;
  border-bottom: 1px solid var(--br1);
}
.page-title-block .h1 {
  font-family: var(--fh);
  font-size: 38px;
  margin-bottom: 12px;
  color: var(--t0);
}
.page-title-block .body-txt {
  max-width: 600px;
  margin: 0 auto;
}
.breadcrumb {
  background: var(--bg1);
  padding: 16px 0;
}

.pc-cat {
  position: absolute;
  top: 11px;
  right: 11px;
  background: #fff;
  border: 1px solid var(--orange);
  border-radius: 4px;
  padding: 3px 8px;
  font-family: var(--fh);
  font-size: 9px;
  font-weight: 800;
  color: var(--orange);
  text-transform: uppercase;
  z-index: 50;
  letter-spacing: 0.8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}