/* ==========================================================================
   NANOTECH BARCODE SOLUTIONS — STYLESHEET
   Light corporate, built on the logo's own blue and orange. Single page.
   The reference points are zebra.com, tscprinters.com and tvselectronics.in:
   white ground, photographic hero, a strip of manufacturer logos, and product
   categories as picture tiles.
   --------------------------------------------------------------------------
   1  Tokens
   2  Reset & base
   3  Typography & utilities
   4  Buttons
   5  Background effects
   6  Header & navigation
   7  Hero
   8  Stats
   9  Brand marquee
   10 Services
   11 Products
   12 Form controls
   13 Why us
   14 Testimonials
   15 FAQ
   16 Contact
   17 Footer
   18 Floating UI (WhatsApp, top, toast)
   19 Reveal animations
   20 Responsive
   ========================================================================== */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* the logo's own colours — sampled from logos/. Everything else is derived
     from these three, so the site cannot drift away from the brand. */
  --brand-blue:   #0d94e1;
  --brand-navy:   #135982;
  --brand-orange: #e98123;

  /* surfaces — white ground, with two cool greys for banding sections */
  --bg:          #ffffff;
  --bg-2:        #f5f8fb;
  --bg-3:        #eaf1f7;
  --surface:     #ffffff;
  --surface-2:   #f2f7fb;
  --border:      #e3eaf1;
  --border-2:    #cbd8e4;

  /* text — navy-tinted rather than pure black, so it sits with the logo */
  --text:        #0e2436;
  --text-2:      #3d566b;
  --muted:       #6d8497;

  /* accents */
  --accent:      #0d94e1;
  --accent-2:    #135982;
  --accent-3:    #e98123;
  --success:     #15803d;
  --warn:        #b45309;
  --danger:      #dc2626;

  /* Ink used ON an accent fill. Named, because "what colour is the text on a
     blue button" is asked in a dozen places and must not be guessed. */
  --on-accent:   #ffffff;

  --grad:        linear-gradient(135deg, #0d94e1 0%, #1478b8 55%, #135982 100%);
  --grad-soft:   linear-gradient(135deg, rgba(13,148,225,.10), rgba(19,89,130,.08));
  --grad-text:   linear-gradient(100deg, #0d94e1 0%, #135982 60%, #e98123 100%);

  /* shape */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;

  /* elevation */
  --shadow:      0 14px 40px -14px rgba(14, 36, 54, .22);
  --shadow-sm:   0 2px 10px -4px rgba(14, 36, 54, .14);
  --shadow-glow: 0 0 0 1px rgba(13, 148, 225, .22), 0 18px 48px -18px rgba(13, 148, 225, .35);

  /* rhythm */
  --nav-h:  74px;
  --pad:    clamp(20px, 5vw, 40px);
  --gap:    clamp(18px, 2.4vw, 30px);
  --sec-y:  clamp(72px, 10vw, 132px);
  --maxw:   1240px;

  /* type */
  --font-head: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ── 2. RESET & BASE ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.68;
  color: var(--text-2);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

/* components below set their own display, which would otherwise beat [hidden] */
[hidden] { display: none !important; }

img, svg, video { display: block; max-width: 100%; height: auto; }

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

button, input, textarea, select { font: inherit; color: inherit; }

ul, ol { list-style: none; }

::selection { background: rgba(13, 148, 225, .22); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb {
  background: #262c3d;
  border-radius: 99px;
  border: 3px solid var(--bg-2);
}
::-webkit-scrollbar-thumb:hover { background: #38405a; }

/* skip link */
.skip {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--accent);
  color: #04202a;
  font-weight: 700;
  border-radius: var(--r-sm);
  transition: top .2s;
}
.skip:focus { top: 16px; }

/* ── 3. TYPOGRAPHY & UTILITIES ─────────────────────────────────────────── */
/* Headings keep the strong ink by default. The only two places that sit on a
   dark ground are the hero and the category tiles, and both say so on
   themselves — see `.hero h1` and `.cat h3`. Anything dark added later must do
   the same, or it lands as near-black text on a near-black photograph. */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--text);
  line-height: 1.12;
  letter-spacing: -.025em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.85rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.12rem, 2vw, 1.4rem); }

p { text-wrap: pretty; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: var(--sec-y); position: relative; }

.section--alt {
  background:
    radial-gradient(900px 480px at 15% 0%, rgba(19, 89, 130, .05), transparent 65%),
    var(--bg-2);
  border-block: 1px solid var(--border);
}

.sec-head {
  max-width: 720px;
  margin-bottom: clamp(38px, 5vw, 62px);
}
.sec-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 11px;
  margin-bottom: 20px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(13, 148, 225, .07);
  border: 1px solid rgba(13, 148, 225, .22);
  border-radius: 99px;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px 2px var(--accent);
}

.sec-head p {
  margin-top: 18px;
  font-size: 1.045rem;
  color: var(--muted);
}

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--border-2), transparent);
}


/* decorative line break — desktop only */
.d-br { display: inline; }
@media (max-width: 700px) { .d-br { display: none; } }

/* ── 4. BUTTONS ────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--border-2);
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .25s, border-color .25s, opacity .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary {
  --btn-fg: var(--on-accent);
  background: var(--brand-blue);
  border-color: transparent;
  box-shadow: 0 8px 22px -10px rgba(13, 148, 225, .7);
}
.btn--primary:hover { background: #0b82c7; box-shadow: 0 12px 30px -10px rgba(13, 148, 225, .8); }

/* Outlined, the way both Zebra and TSC set their secondary actions. */
.btn--ghost {
  background: #fff;
  border-color: var(--border-2);
  color: var(--text);
}
.btn--ghost:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); }

.btn--wa {
  --btn-fg: #fff;
  background: #25d366;
  border-color: transparent;
  box-shadow: 0 8px 22px -12px rgba(37, 211, 102, .8);
}
.btn--wa:hover { background: #1fb955; }

/* The orange half of the logo, kept for the one call to action that should
   out-shout a blue one. */
.btn--accent {
  --btn-fg: #fff;
  background: var(--brand-orange);
  border-color: transparent;
  box-shadow: 0 8px 22px -10px rgba(233, 129, 35, .7);
}
.btn--accent:hover { background: #d6721a; }

.btn--sm { padding: 10px 18px; font-size: .86rem; }
.btn--block { width: 100%; }

.btn[disabled] { opacity: .45; pointer-events: none; }

/* ── 5. BACKGROUND EFFECTS ─────────────────────────────────────────────── */
.fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.fx__grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(rgba(19, 89, 130, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 89, 130, .055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 10%, transparent 70%);
}

/* Two very soft brand-coloured washes. On the dark build these were glowing
   neon orbs; on white anything near that strength reads as a printing fault,
   so they are barely there — just enough to stop the page being flat. */
.fx__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .55;
}
.fx__orb--1 {
  width: 620px; height: 620px;
  top: -300px; left: -180px;
  background: radial-gradient(circle, rgba(13, 148, 225, .20), transparent 68%);
  animation: drift 22s var(--ease) infinite alternate;
}
.fx__orb--2 {
  width: 700px; height: 700px;
  top: -260px; right: -260px;
  background: radial-gradient(circle, rgba(233, 129, 35, .14), transparent 68%);
  animation: drift 28s var(--ease) infinite alternate-reverse;
}
.fx__orb--3 { display: none; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(70px, 60px, 0) scale(1.13); }
}

/* ── 6. HEADER & NAVIGATION ────────────────────────────────────────────── */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background .35s, border-color .35s, box-shadow .35s, height .35s;
  /* Solid white from the top, the way zebra.com and tscprinters.com sit. The
     hero photo starts below it rather than behind it, so there is nothing to
     be translucent over and a see-through bar would only hurt legibility. */
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.header.is-stuck {
  height: 64px;
  box-shadow: var(--shadow-sm);
}
/* without backdrop-filter the translucent bar lets text show through — go opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header.is-stuck { background: #fff; }
  .drawer          { background: #fff; }
}

.header__in {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  gap: 20px;
}

/* logo — the client's own lockup (assets/img/logo-h.webp), one image */
.logo {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  flex: none;
}
.logo__img {
  display: block;
  height: 46px;
  width: auto;
  max-width: min(250px, 54vw);
  object-fit: contain;
  transition: height .35s;
}
.header.is-stuck .logo__img { height: 38px; }
/* the stacked version, used in the footer */
.logo--stack .logo__img { height: auto; width: 190px; max-width: 100%; }

/* desktop nav */
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative;
  padding: 9px 14px;
  font-size: .915rem;
  font-weight: 500;
  color: var(--text-2);
  border-radius: 9px;
  transition: color .2s, background .2s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a:hover { color: var(--accent); background: var(--surface-2); }
.nav a:hover::after,
.nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { color: var(--text); }

.header__cta { display: flex; align-items: center; gap: 10px; }

/* burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
}
.burger span {
  display: block;
  position: relative;
  width: 19px; height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .3s var(--ease), background .2s;
}
.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 19px; height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .3s var(--ease), top .25s;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: calc(var(--nav-h) + 24px) var(--pad) 40px;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition: opacity .3s, transform .35s var(--ease), visibility .3s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.drawer a {
  padding: 15px 4px;
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.drawer a:last-of-type { border-bottom: 0; }
.drawer .btn { margin-top: 22px; }

/* ── 7. HERO ───────────────────────────────────────────────────────────── */
/* The client's own photographs edge to edge, sliding sideways on a timer,
   with the words over them. The dark wash on the left is what makes it work:
   white text straight onto a photograph is a coin toss, text on a wash is
   readable whatever picture happens to be behind it. */
.hero {
  position: relative;
  margin-top: var(--nav-h);
  min-height: clamp(500px, 74vh, 720px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: var(--brand-navy);
}

/* the slides, behind everything */
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__track {
  display: flex;
  height: 100%;
  touch-action: pan-y;
  transition: transform .9s var(--ease);
}
.hslide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  background: var(--brand-navy);
}
.hslide img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}
/* A cut-out on a transparent ground (the Zebra line-up) cannot be stretched to
   fill the frame; it sits on the right, over a lit navy, where the wash is
   thinnest. */
.hslide--contain {
  background:
    radial-gradient(70% 90% at 78% 50%, rgba(13, 148, 225, .45), transparent 65%),
    var(--brand-navy);
}
.hslide--contain img {
  inset: 14% 4% 14% auto;
  width: 50%; height: 72%;
  object-fit: contain;
  object-position: center right;
}
/* The wash. Strong where the words are, falling away to the right so the
   picture is still a picture, and a little weight at the foot for the
   caption and dots. */
.hero__slides::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(8, 28, 43, .88) 0%,
      rgba(8, 28, 43, .78) 38%,
      rgba(8, 28, 43, .55) 60%,
      rgba(8, 28, 43, .28) 82%,
      rgba(8, 28, 43, .18) 100%),
    linear-gradient(0deg, rgba(8, 28, 43, .55) 0%, transparent 34%);
}

.hero__in {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  /* extra room at the foot so the caption bar never sits on the trust line */
  padding: clamp(36px, 5vw, 68px) var(--pad) calc(clamp(36px, 5vw, 68px) + 56px);
}
.hero__copy { max-width: 42rem; }

.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 8px;
  margin-bottom: 24px;
  font-size: .79rem;
  font-weight: 500;
  color: #dbe9f4;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 99px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero__pill b {
  padding: 3px 10px;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
  background: var(--brand-orange);
  border-radius: 99px;
}

.hero h1 {
  margin-bottom: 18px;
  font-size: clamp(2.15rem, 5vw, 3.6rem);
  color: #fff;
}
.hero h1 span { display: block; }
/* the gradient wordmark has no contrast to spare on a photo — one flat colour */
.hero h1 .grad-text {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: #5cc2f5;
}

.hero__lead {
  max-width: 52ch;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: #cfe0ec;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 32px;
}
/* the outlined button has to read against a photo, not against white */
.hero__actions .btn--ghost {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}
.hero__actions .btn--ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--brand-navy);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .865rem;
  color: #cfe0ec;
}
.hero__trust svg {
  width: 17px; height: 17px;
  flex: none;
  color: #7ee2a8;
}

/* ── 7b. SLIDESHOW CONTROLS ────────────────────────────────────────────── */
/* Caption, dots and arrows along the foot of the banner, right-aligned to the
   page column. Only the row itself takes pointer events, so nothing here can
   sit in the way of the buttons above it. */
.hero__ctl {
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  z-index: 2;
  pointer-events: none;
}
.hero__ctl-in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
}
.slider__cap,
.slider__ctl { pointer-events: auto; }

.slider__cap { display: grid; gap: 2px; min-width: 0; text-align: right; }
.slider__cap b,
.slider__cap span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slider__cap b {
  font-family: var(--font-head);
  font-size: .98rem;
  font-weight: 600;
  color: #fff;
}
.slider__cap span { font-size: .8rem; color: #cfe0ec; }

.slider__ctl { display: flex; align-items: center; gap: 8px; flex: none; }
.slider__arrow {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .2s, color .2s, border-color .2s;
}
.slider__arrow:hover { color: var(--brand-navy); background: #fff; border-color: #fff; }
.slider__arrow svg { width: 16px; height: 16px; }
.slider__arrow[data-slide="-1"] svg { transform: rotate(180deg); }

.slider__dots { display: flex; gap: 6px; padding-inline: 4px; }
.slider__dot {
  width: 8px; height: 8px;
  padding: 0;
  background: rgba(255, 255, 255, .5);
  border: 0;
  border-radius: 99px;
  cursor: pointer;
  transition: width .3s var(--ease), background .3s;
}
.slider__dot:hover { background: #fff; }
.slider__dot.is-on { width: 24px; background: var(--brand-orange); }

/* ── 8. STATS ──────────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat {
  padding: clamp(24px, 3.4vw, 38px) 20px;
  text-align: center;
  background: var(--bg-2);
  transition: background .3s;
}
.stat:hover { background: var(--bg-3); }
.stat__n {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__l {
  margin-top: 10px;
  font-size: .83rem;
  color: var(--muted);
}

/* ── 9. BRAND STRIP ────────────────────────────────────────────────────── */
/* The manufacturers' own marks, scrolling, in full colour. Heights were
   equalised when the files were built (see assets/img/brands/) — by INK AREA,
   not pixel height, or the wide wordmarks swamp the compact ones. How big the
   row is comes from the dashboard (Brands & Support → Logo size). */
.marquee {
  --logo-h: 36px;                       /* small — the default */
  padding-block: 22px;
  border-block: 1px solid var(--border);
  background: #fff;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee[data-size="medium"] { --logo-h: 48px; padding-block: 26px; }
.marquee[data-size="large"]  { --logo-h: 64px; padding-block: 30px; }

.marquee__track {
  display: flex;
  align-items: center;
  gap: calc(var(--logo-h) + 18px);
  width: max-content;
  animation: scroll 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee__item {
  display: grid;
  place-items: center;
  height: var(--logo-h);
  flex: none;
}
.marquee__item img {
  max-height: var(--logo-h);
  max-width: calc(var(--logo-h) * 3.6);
  width: auto;
  object-fit: contain;
  transition: transform .3s var(--ease);
}
.marquee__item:hover img { transform: scale(1.06); }

/* a brand with no logo file yet — reads at the same weight as the real ones */
.marquee__item span {
  font-family: var(--font-head);
  font-size: calc(var(--logo-h) * .5);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--brand-navy);
  transition: color .3s;
}
.marquee__item:hover span { color: var(--accent); }

/* ── 9b. CATEGORY TILES ──────────────────────────────── */
/* Light cards, because the artwork is Nanotech's own product line-ups shot on
   white. An earlier version cropped these to fill a dark panel with white text
   over the top; that works for a photograph of a warehouse and destroys a row
   of seven printers. So the picture is CONTAINED, never cropped, and the words
   sit underneath it on the card. TSC's own product page is laid out the same
   way, and for the same reason. */
.cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--gap);
}

.cat {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.cat:hover {
  transform: translateY(-6px);
  border-color: rgba(13, 148, 225, .45);
  box-shadow: var(--shadow);
}

.cat__img {
  position: relative;
  aspect-ratio: 16 / 10;
  display: block;
  /* `overflow: hidden` is doing real work, not tidying: without it a child's
     automatic minimum size beats aspect-ratio, and the one portrait image in
     the set (the stack of label rolls) stretches its tile taller than the
     other five. Clipping zeroes that minimum, so the ratio holds. */
  overflow: hidden;
  /* the pale ground is what lets a wide line-up and a tall stack of label rolls
     sit in the same row without either looking like a mistake */
  background: var(--bg-3);
  border-bottom: 1px solid var(--border);
}
/* Pinned to the box and letterboxed by object-fit.
   Absolute rather than a centred grid child on purpose: a percentage height on
   a grid item resolves against the grid AREA, which an aspect-ratio box sizes
   inconsistently — the landscape images obeyed it and the portrait one did not,
   so one tile clipped its picture while the rest fitted theirs. Pinning to the
   four edges leaves nothing to resolve. */
.cat__img img {
  position: absolute;
  inset: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  object-fit: contain;
  transition: transform .5s var(--ease);
}
.cat:hover .cat__img img { transform: scale(1.04); }

/* the category's icon, as a small chip in the corner of the picture */
.cat__ico {
  position: absolute;
  top: 12px; left: 12px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  color: var(--brand-navy);
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--border);
  border-radius: 10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cat__ico svg { width: 17px; height: 17px; }

.cat__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}
.cat h3 { font-size: 1.06rem; color: var(--text); }
.cat p {
  flex: 1;
  margin-top: 6px;
  font-size: .855rem;
  line-height: 1.55;
  color: var(--muted);
}
.cat__n {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--accent);
}
.cat__n svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.cat:hover .cat__n svg { transform: translateX(4px); }

/* ── 10. SERVICES ──────────────────────────────────────────────────────── */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap);
}

.svc {
  position: relative;
  padding: clamp(26px, 3vw, 34px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s, background .35s;
}
.svc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 220px at var(--mx, 50%) var(--my, 0%), rgba(13, 148, 225, .1), transparent 72%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.svc:hover {
  transform: translateY(-6px);
  border-color: rgba(13, 148, 225, .35);
  background: var(--surface-2);
}
.svc:hover::after { opacity: 1; }

.svc__ico {
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 15px;
  background: var(--grad-soft);
  border: 1px solid var(--border-2);
  color: var(--accent);
  transition: transform .35s var(--ease);
}
.svc:hover .svc__ico { transform: scale(1.08) rotate(-5deg); }
.svc__ico svg { width: 25px; height: 25px; }

.svc h3 { margin-bottom: 12px; }
.svc p { font-size: .945rem; color: var(--muted); }

.svc__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--accent);
}
.svc__link svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.svc__link:hover svg { transform: translateX(4px); }

/* ── 11. PRODUCTS ──────────────────────────────────────────────────────── */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 38px;
}
.filter {
  padding: 10px 20px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  cursor: pointer;
  transition: all .25s;
}
.filter:hover { color: var(--text); border-color: var(--border-2); }
.filter.is-active {
  color: var(--on-accent);
  font-weight: 600;
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 8px 24px -10px rgba(13, 148, 225, .6);
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--gap);
}

.prod {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.prod:hover {
  transform: translateY(-6px);
  border-color: rgba(13, 148, 225, .4);
  box-shadow: var(--shadow-glow);
}
.prod.is-hidden { display: none; }

.prod__art {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(13, 148, 225, .07), transparent 62%),
    linear-gradient(160deg, #ffffff, #eef4f9);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.prod__art img { width: 100%; height: 100%; object-fit: cover; }
.prod__art svg {
  width: 46%;
  height: auto;
  color: var(--accent);
  filter: drop-shadow(0 8px 22px rgba(14, 36, 54, .18));
  transition: transform .45s var(--ease);
}
.prod:hover .prod__art svg { transform: scale(1.09) translateY(-4px); }

.prod__badge {
  position: absolute;
  top: 13px; left: 13px;
  padding: 5px 12px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--grad);
  border-radius: 99px;
}
.prod__off {
  position: absolute;
  top: 13px; right: 13px;
  padding: 5px 11px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--success);
  background: rgba(52, 211, 153, .13);
  border: 1px solid rgba(52, 211, 153, .3);
  border-radius: 99px;
}

.prod__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 21px;
}
.prod__cat {
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
}
.prod__name {
  margin: 8px 0 14px;
  font-family: var(--font-head);
  font-size: 1.045rem;
  font-weight: 600;
  line-height: 1.32;
  color: var(--text);
}
.prod__specs {
  display: grid;
  gap: 7px;
  margin-bottom: 20px;
}
.prod__specs li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .805rem;
  line-height: 1.45;
  color: var(--muted);
}
.prod__specs li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .75;
}

.prod__foot {
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid var(--border);
}
.prod__price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 15px;
}
.prod__price b {
  font-family: var(--font-head);
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}
.prod__price s {
  font-size: .875rem;
  color: var(--muted);
  opacity: .75;
}
.prod__price em {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 600;
  color: var(--text);
}

.prod__btns { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.prod__ask {
  width: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 99px;
  color: var(--text-2);
  cursor: pointer;
  transition: all .25s;
}
.prod__ask:hover { color: #4ade80; border-color: rgba(74, 222, 128, .5); }
.prod__ask svg { width: 18px; height: 18px; }

/* razorpay embedded button wrapper */

.products-empty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
}

/* real product photos sit on a light panel — IndiaMART shots are on white */
button.prod__art {
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  cursor: zoom-in;
}
.prod__art--photo { background: #fff; }
.prod__art--photo img {
  object-fit: contain;
  padding: 16px;
  transition: transform .45s var(--ease);
}
.prod:hover .prod__art--photo img { transform: scale(1.05); }
.prod__art--photo .prod__off { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }

.prod__name button {
  all: unset;
  cursor: pointer;
}
.prod__name button:hover { color: var(--accent); }
.prod__name button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.prod__specs li span { color: var(--text-2); }
.prod__price small { font-size: .78rem; color: var(--muted); margin-left: -4px; }

.shopbar { margin-bottom: 18px; }
.shopbar__search { position: relative; display: block; max-width: 520px; }
.shopbar__search svg {
  position: absolute;
  left: 16px; top: 50%;
  width: 18px; height: 18px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.shopbar__search .input { padding-left: 46px; border-radius: 99px; }
.filter__n {
  margin-left: 4px;
  font-size: .74rem;
  opacity: .6;
}
.products-more { display: flex; justify-content: center; margin-top: 36px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* product detail popup */
.pmodal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .25s;
}
.pmodal.is-on { opacity: 1; }
.pmodal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(14, 36, 54, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pmodal__box {
  position: relative;
  width: min(1040px, 100%);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  transform: translateY(16px) scale(.98);
  transition: transform .3s var(--ease);
}
.pmodal.is-on .pmodal__box { transform: none; }
.pmodal__x {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 40px; height: 40px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text);
  background: rgba(14, 17, 26, .85);
  border: 1px solid var(--border-2);
  border-radius: 50%;
  cursor: pointer;
}
.pmodal__x:hover { border-color: var(--accent); color: var(--accent); }
.pmodal__grid { display: grid; grid-template-columns: 1fr 1.1fr; }
.pmodal__media {
  padding: 22px;
  border-right: 1px solid var(--border);
}
.pmodal__stage {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: #fff;
  overflow: hidden;
}
.pmodal__stage.is-photo { background: #fff; }
.pmodal__stage img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.pmodal__stage svg { width: 40%; color: var(--accent); }
.pmodal__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.pmodal__thumbs button {
  width: 62px; height: 62px;
  padding: 4px;
  background: #fff;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  opacity: .7;
}
.pmodal__thumbs button.is-on,
.pmodal__thumbs button:hover { border-color: var(--accent); opacity: 1; }
.pmodal__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pmodal__info { padding: 30px 28px 28px; }
.pmodal__info h3 {
  margin: 8px 46px 14px 0;
  font-family: var(--font-head);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--text);
}
.pmodal__price { margin-bottom: 6px; }
.pmodal__moq { font-size: .88rem; color: var(--muted); }
.pmodal__moq b { color: var(--text-2); font-weight: 600; }
.pmodal__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 24px;
}
.pmodal__specs {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  margin-bottom: 20px;
}
.pmodal__specs th,
.pmodal__specs td {
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.pmodal__specs th { width: 42%; font-weight: 500; color: var(--muted); }
.pmodal__specs td { color: var(--text); }
.pmodal__specs tr:nth-child(odd) { background: var(--surface); }
.pmodal__desc { font-size: .9rem; color: var(--text-2); margin-bottom: 18px; }
.pmodal__pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--accent);
}
.pmodal__pdf svg { width: 18px; height: 18px; }
.pmodal__pdf:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .pmodal { padding: 0; place-items: end center; }
  .pmodal__box { max-height: 92vh; max-height: 92dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .pmodal__grid { grid-template-columns: 1fr; }
  .pmodal__media { border-right: 0; border-bottom: 1px solid var(--border); }
  .pmodal__stage { aspect-ratio: 4 / 3; }
  .pmodal__info { padding: 22px 20px 28px; }
}

.link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--text); }

/* company photos (about strip) */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
}
.gallery figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery figcaption { padding: 10px 14px; font-size: .84rem; color: var(--text-2); }

/* ── 12. FORM CONTROLS ─────────────────────────────────────────────────── */
/* form fields */
.field { margin-bottom: 18px; }
.field label {
  display: block;
  margin-bottom: 8px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-2);
}
.field label span { color: var(--accent); }

.input, .textarea, .select {
  width: 100%;
  padding: 14px 16px;
  font-size: .95rem;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.input::placeholder, .textarea::placeholder { color: #5c6580; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(13, 148, 225, .16);
}
.textarea { min-height: 120px; resize: vertical; }
.select { appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d8497' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 16px;
}
.select option { background: #fff; color: var(--text); }

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

/* ── 12c. ODDS AND ENDS ────────────────────────────────────────────────── */
.textarea--sm { min-height: 78px; }

/* live "Open now / Closed now" beside the opening hours */
.hours__now {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  padding: 4px 12px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 99px;
}
.hours__now:empty { display: none; }
.hours__now::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.hours__now.is-open { color: var(--success); background: rgba(21, 128, 61, .10); }
.hours__now.is-shut { color: var(--warn);    background: rgba(180, 83, 9, .10); }

/* ── 12b. SUPPORT & DOWNLOADS ──────────────────────────────────────────── */
.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--gap);
}

.dl {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform .35s var(--ease), border-color .35s, background .35s;
}
.dl:hover {
  transform: translateY(-6px);
  border-color: rgba(13, 148, 225, .4);
  background: var(--surface-2);
}

/* The manufacturer's own mark, boxed to a fixed height so four cards of
   different logos still line up. Full colour here, unlike the scrolling strip —
   this is the card you are meant to pick out by its brand. */
.dl__logo {
  display: flex;
  align-items: center;
  height: 46px;
}
.dl__logo img { max-height: 46px; max-width: 78%; width: auto; }
.dl__logo b {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}
.dl__desc {
  flex: 1;
  margin: 12px 0 20px;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--muted);
}
.dl__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--accent);
}
.dl__go svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.dl:hover .dl__go svg { transform: translateX(4px); }

.dl-note {
  margin-top: 30px;
  padding: 16px 20px;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.dl-note a { color: var(--accent); font-weight: 600; }

/* ── 13. WHY US ────────────────────────────────────────────────────────── */
.why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap);
}
.why__item {
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform .35s var(--ease), border-color .35s;
}
.why__item:hover { transform: translateY(-5px); border-color: rgba(13, 148, 225, .35); }
.why__n {
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--accent);
}
.why__item h3 { margin: 14px 0 10px; font-size: 1.09rem; }
.why__item p { font-size: .9rem; color: var(--muted); }

/* ── 14. TESTIMONIALS ──────────────────────────────────────────────────── */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap);
}
.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 34px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform .35s var(--ease), border-color .35s;
}
.quote:hover { transform: translateY(-5px); border-color: rgba(233, 129, 35, .35); }
.quote__mark {
  font-family: var(--font-head);
  font-size: 3.6rem;
  line-height: .7;
  color: var(--accent);
  opacity: .28;
}
.quote__stars { display: flex; gap: 3px; margin: 16px 0 14px; }
.quote__stars svg { width: 16px; height: 16px; color: var(--warn); }
.quote p {
  flex: 1;
  font-size: .945rem;
  line-height: 1.72;
  color: var(--text-2);
}
.quote__who {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.quote__av {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--grad);
}
.quote__who b {
  display: block;
  font-family: var(--font-head);
  font-size: .95rem;
  color: var(--text);
}
.quote__who span { font-size: .8rem; color: var(--muted); }

/* Google Business Profile summary card above the quotes */
.grating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  max-width: 900px;
  margin: 0 auto var(--gap);
  padding: 22px clamp(20px, 3vw, 30px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.grating:empty { display: none; }
.grating__badge {
  width: 56px; height: 56px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 8px 22px -14px rgba(13, 89, 130, .45);
}
.grating__badge svg { width: 30px; height: 30px; }
.grating__body { flex: 1 1 240px; min-width: 0; }
.grating__score { display: flex; align-items: center; gap: 12px; }
.grating__score > b {
  font-family: var(--font-head);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--text);
}
.grating__stars { display: inline-flex; gap: 2px; }
.grating__stars svg { width: 20px; height: 20px; color: var(--warn); }
.grating__body p { margin-top: 6px; font-size: .92rem; color: var(--text-2); }
.grating__body p b { color: var(--text); }
.grating__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.quote__av--g { background: #fff; border: 1px solid var(--border); }
.quote__av--g svg { width: 22px; height: 22px; }
@media (max-width: 560px) {
  .grating__cta { width: 100%; }
  .grating__cta .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── 15. FAQ ───────────────────────────────────────────────────────────── */
.faq { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; }

.faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .3s, background .3s;
}
.faq__item.is-open { border-color: rgba(13, 148, 225, .35); background: var(--surface-2); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 21px 24px;
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 600;
  text-align: left;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
}
.faq__ico {
  position: relative;
  flex: none;
  width: 26px; height: 26px;
  margin-left: auto;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  transition: background .3s, border-color .3s, transform .35s var(--ease);
}
.faq__ico::before,
.faq__ico::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 1.5px;
  border-radius: 2px;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease), opacity .3s;
}
.faq__ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item.is-open .faq__ico {
  background: var(--grad);
  border-color: transparent;
  transform: rotate(180deg);
}
.faq__item.is-open .faq__ico::before,
.faq__item.is-open .faq__ico::after { background: var(--on-accent); }
.faq__item.is-open .faq__ico::after { opacity: 0; }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding: 0 24px 24px 24px;
  font-size: .94rem;
  color: var(--muted);
}

/* ── 16. CONTACT ───────────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: var(--gap);
  align-items: start;
}

.cinfo { display: grid; gap: 13px; }
.citem {
  display: flex;
  gap: 16px;
  padding: 21px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: transform .3s var(--ease), border-color .3s;
}
.citem:hover { transform: translateX(5px); border-color: rgba(13, 148, 225, .35); }
.citem__ico {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--grad-soft);
  border: 1px solid var(--border);
  color: var(--accent);
}
.citem__ico svg { width: 19px; height: 19px; }
.citem b {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.citem span, .citem a {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--text);
}
.citem a:hover { color: var(--accent); }

.hours { display: grid; gap: 5px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; font-size: .9rem; }
.hours span:last-child { color: var(--text-2); }

.map {
  margin-top: 13px;
  height: 260px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-3);
}
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.35) invert(.92) hue-rotate(180deg) contrast(.88); }

.cform {
  padding: clamp(26px, 3.4vw, 38px);
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
}
.cform h3 { margin-bottom: 8px; }
.cform > p { margin-bottom: 26px; font-size: .93rem; color: var(--muted); }

.err {
  display: block;
  margin-top: 6px;
  font-size: .78rem;
  color: #f87171;
  min-height: 0;
}
.input.is-err, .textarea.is-err, .select.is-err { border-color: #f87171; }

/* ── 17. FOOTER ────────────────────────────────────────────────────────── */
.footer {
  padding-top: clamp(56px, 7vw, 84px);
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--gap);
  padding-bottom: 48px;
}
.footer__about p {
  margin: 20px 0;
  max-width: 34ch;
  font-size: .9rem;
  color: var(--muted);
}
.footer h4 {
  margin-bottom: 20px;
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
}
.footer__links { display: grid; gap: 11px; }
.footer__links a {
  font-size: .9rem;
  color: var(--muted);
  transition: color .22s, transform .22s;
  display: inline-block;
}
.footer__links a:hover { color: var(--accent); transform: translateX(4px); }

.socials { display: flex; gap: 10px; }
.socials a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: all .25s;
}
.socials a:hover {
  color: var(--on-accent);
  background: var(--grad);
  border-color: transparent;
  transform: translateY(-3px);
}
.socials svg { width: 17px; height: 17px; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 24px;
  border-top: 1px solid var(--border);
  font-size: .84rem;
  color: var(--muted);
}
.footer__bar a:hover { color: var(--accent); }

/* ── 18. FLOATING UI ───────────────────────────────────────────────────── */
.fab {
  position: fixed;
  right: 22px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 12px 34px -10px rgba(14, 36, 54, .3);
  transition: transform .3s var(--ease), opacity .3s, visibility .3s;
}
.fab:hover { transform: scale(1.08); }
.fab svg { width: 26px; height: 26px; }

.fab--wa {
  bottom: 22px;
  background: linear-gradient(135deg, #4ade80, #16a34a);
  color: #fff;
}
.fab--wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(74, 222, 128, .55);
  animation: ring 2.4s ease-out infinite;
}
@keyframes ring {
  0%   { transform: scale(1);   opacity: .9; }
  100% { transform: scale(1.65); opacity: 0; }
}

.fab--top {
  bottom: 88px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
}
.fab--top svg { width: 20px; height: 20px; }
.fab--top.is-on { opacity: 1; visibility: visible; }

/* toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: calc(100vw - 40px);
  padding: 14px 22px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text);
  background: rgba(14, 17, 26, .96);
  border: 1px solid var(--border-2);
  border-radius: 99px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translate(-50%, 130%);
  transition: transform .45s var(--ease);
}
.toast.is-on { transform: translate(-50%, 0); }
.toast svg { width: 18px; height: 18px; flex: none; color: var(--success); }
.toast.is-err svg { color: #f87171; }

/* ── 19. REVEAL ANIMATIONS ─────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ── 20. RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .contact-grid  { grid-template-columns: 1fr; }
  .footer__grid  { grid-template-columns: 1fr 1fr; }
  /* the wash was aimed at a wide banner; on a narrower one it has to cover
     more of the picture or the headline starts fighting it */
  .hero__slides::after {
    background:
      linear-gradient(90deg, rgba(8, 28, 43, .9) 0%, rgba(8, 28, 43, .76) 55%, rgba(8, 28, 43, .5) 100%),
      linear-gradient(0deg, rgba(8, 28, 43, .55) 0%, transparent 34%);
  }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: flex; }
  .header__cta .btn--desk { display: none; }
  .hslide--contain img { inset: auto 0 6% auto; width: 70%; height: 40%; }
}

@media (max-width: 640px) {
  :root { --nav-h: 66px; }
  .stats         { grid-template-columns: repeat(2, 1fr); }
  .field-row     { grid-template-columns: 1fr; }
  .footer__grid  { grid-template-columns: 1fr; gap: 34px; }
  .products      { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .header__cta .btn { display: none; }
  .logo__img { height: 40px; }
  .header.is-stuck .logo__img { height: 36px; }
  .footer__bar   { justify-content: center; text-align: center; }

  /* the banner: the picture goes behind the words entirely, because there is
     no room beside them, and the wash runs top to bottom */
  .hero { min-height: 0; }
  .hero__slides::after {
    background: linear-gradient(180deg, rgba(8, 28, 43, .76) 0%, rgba(8, 28, 43, .88) 100%);
  }
  .hero__in { padding-bottom: calc(clamp(36px, 5vw, 68px) + 50px); }
  .hero__trust { gap: 8px 18px; }
  .hero__ctl { bottom: 16px; }
  .slider__cap { display: none; }     /* dots and arrows carry it on a phone */
  .hero__ctl-in { justify-content: flex-start; }
  .hero__trust li { font-size: .82rem; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }

  /* logos scroll faster and sit closer once only two fit on screen */
  .marquee { padding-block: 16px; }
  .marquee__track { gap: calc(var(--logo-h) * .8 + 14px); animation-duration: 30s; }
  .marquee__item { height: calc(var(--logo-h) * .8); }
  .marquee__item img { max-height: calc(var(--logo-h) * .8); max-width: calc(var(--logo-h) * 2.9); }
  .marquee__item span { font-size: calc(var(--logo-h) * .42); }

  /* two tiles per row rather than one tall column */
  .cats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cat__img img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
  .cat__body { padding: 12px 13px 14px; }
  .cat h3 { font-size: .9rem; }
  .cat p { display: none; }          /* the picture and the count carry it */
  .cat__n { margin-top: 8px; font-size: .76rem; }
  .cat__ico { width: 28px; height: 28px; top: 8px; left: 8px; border-radius: 8px; }
  .cat__ico svg { width: 14px; height: 14px; }
}

@media (max-width: 400px) {
  .products { grid-template-columns: 1fr; }
  .cats     { grid-template-columns: 1fr; }
}

/* ── PRINT ─────────────────────────────────────────────────────────────── */
@media print {
  .fx, .header, .fab, .toast, .marquee, .drawer { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
}

/* ── REDUCED MOTION ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}