/* =========================================================
   The Banwarilal Marketing — Site Styles
   Design & development: ClickHold (clickhold.in)
   ========================================================= */

:root {
  --navy-950: #04142e;
  --navy-900: #071c3c;
  --navy-800: #0a2650;   /* logo navy */
  --navy-700: #0f3570;
  /* pulled toward the logo navy so the palette reads navy + gold, not navy + bright blue */
  --blue-600: #12447f;
  --blue-500: #1b5ba8;
  --blue-100: #e9eef6;
  --gold-600: #a67f32;   /* hover / darker */
  --gold-500: #c09848;   /* logo gold */
  --gold-400: #d9b265;   /* gold on dark backgrounds */
  --gold-ink: #8a6a20;   /* gold-family text on white (AA) */
  --gold-100: #f8f1df;   /* soft tint */
  --ink: #0e1726;
  --ink-2: #2a3446;
  --muted: #5d6779;
  --line: #e4e9f2;
  --bg: #ffffff;
  --bg-soft: #f4f7fc;
  --bg-soft-2: #eef3fb;
  --star: #e9a93c;
  --wa: #1fae5b;

  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 8px rgba(6, 26, 61, .06);
  --shadow: 0 14px 40px -12px rgba(6, 26, 61, .18);
  --shadow-lg: 0 30px 80px -20px rgba(6, 26, 61, .35);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --container: 1240px;
  --header-h: 84px;
  --topbar-h: 40px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.75rem); font-weight: 800; }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 700; }
p { margin: 0 0 1em; }
::selection { background: var(--gold-500); color: var(--navy-900); }
:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.text-gold { color: var(--gold-ink); }
.text-blue { color: var(--blue-600); }

/* ---------- Eyebrow (echoes the logo's ruled tagline) ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-ink); margin-bottom: 18px;
}
.eyebrow::before, .eyebrow::after { content: ""; width: 28px; height: 2px; background: currentColor; opacity: .7; }
.eyebrow--left::after { display: none; }
.eyebrow--light { color: var(--gold-400); }

/* ---------- Buttons ---------- */
/* Buttons: solid colour + soft top gloss + a light sweep on hover */
.btn {
  --bg: var(--gold-500); --bg-hover: var(--gold-600); --fg: var(--navy-900); --glow: rgba(192, 152, 72, .6);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
  background-color: var(--bg);
  background-image: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 52%);
  color: var(--fg);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, border-color .25s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 26px -12px var(--glow);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn:hover { transform: translateY(-2px); background-color: var(--bg-hover); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 18px 34px -14px var(--glow); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--navy { --bg: var(--navy-800); --bg-hover: var(--navy-900); --glow: rgba(10, 42, 94, .6); }
.btn--wa { --bg: #1fae5b; --bg-hover: #179a4f; --glow: rgba(31, 174, 91, .55); }
.btn--ghost, .btn--light { background-image: none; box-shadow: none; }
.btn--ghost { --bg: transparent; --bg-hover: var(--bg-soft); --fg: var(--navy-800); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--navy-800); box-shadow: none; }
.btn--light { --bg: rgba(255,255,255,.07); --bg-hover: rgba(255,255,255,.15); --fg: #fff; border-color: rgba(255,255,255,.26); backdrop-filter: blur(8px); }
.btn--light:hover { border-color: rgba(255,255,255,.5); box-shadow: none; }
.btn--sm { min-height: 42px; padding: 9px 18px; font-size: .85rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--blue-600);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Top bar ---------- */
.topbar { background: var(--navy-950); color: #b9c4da; font-size: .82rem; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: var(--topbar-h); }
.topbar__group { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar a:hover { color: #fff; }
.topbar__item { display: inline-flex; align-items: center; gap: 7px; }
.topbar__item svg { width: 14px; height: 14px; color: var(--gold-500); }
.topbar__rating { color: #fff; font-weight: 600; }
.topbar__rating .stars { color: var(--star); letter-spacing: 1px; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s, border-color .3s;
}
.header.is-scrolled { box-shadow: 0 8px 30px -14px rgba(6, 26, 61, .25); border-color: var(--line); }
.header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }
/* logo-640/1280.webp are pre-cropped to the logo's content box (aspect 5:1) */
.logo-crop { --h: 54px; display: block; height: var(--h); aspect-ratio: 1706 / 247; }
.logo-crop img { height: 100%; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--ink);
  white-space: nowrap; transition: color .2s, background .2s;
}
.nav__link:hover { color: var(--blue-600); background: var(--bg-soft); }
.nav__link.is-active { color: var(--gold-ink); }
.nav__link.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--gold-500); }
.nav__link svg { width: 12px; height: 12px; transition: transform .25s; }

.nav__item { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
  width: 560px; padding: 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s, transform .25s var(--ease), visibility .25s;
}
.nav__item:hover .dropdown, .nav__item:focus-within .dropdown { opacity: 1; visibility: visible; transform: none; }
.nav__item:hover > .nav__link svg { transform: rotate(180deg); }
.dropdown a { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 12px; transition: background .2s; }
.dropdown a:hover { background: var(--bg-soft); }
.dropdown__icon { flex: none; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: var(--blue-100); border: 1px solid var(--line); }
.dropdown__icon img { width: 100%; height: 100%; object-fit: cover; }
.dropdown strong { display: block; font-family: var(--font-display); font-size: .92rem; color: var(--ink); }
.dropdown small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.4; }

.header__cta { display: flex; align-items: center; gap: 10px; position: relative; z-index: 2; }
.header__phone { display: flex; align-items: center; gap: 10px; margin-right: 6px; }
.header__phone-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-100); color: var(--gold-ink); }
.header__phone-icon svg { width: 18px; height: 18px; }
.header__phone small { display: block; font-size: .72rem; color: var(--muted); line-height: 1.2; }
.header__phone strong { font-family: var(--font-display); font-size: .95rem; color: var(--ink); white-space: nowrap; }
.header__phone small { white-space: nowrap; }
.brand { flex: none; }

.nav__mobile-cta { display: none; }
.burger {
  display: none; width: 48px; height: 48px; border-radius: 14px; border: 0; cursor: pointer; position: relative;
  background: linear-gradient(145deg, var(--navy-700), var(--navy-900));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px -10px rgba(10,42,94,.7);
  -webkit-tap-highlight-color: transparent;
}
.burger span { position: absolute; left: 14px; height: 2px; background: #fff; border-radius: 2px; transition: transform .35s var(--ease), opacity .3s, top .35s var(--ease), width .35s var(--ease); }
.burger span:nth-child(1) { top: 16px; width: 20px; }
.burger span:nth-child(2) { top: 23px; width: 14px; background: var(--gold-400); }
.burger span:nth-child(3) { top: 30px; width: 20px; }
.nav-open .burger span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav-open .burger span:nth-child(2) { opacity: 0; }
.nav-open .burger span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(1200px 600px at 85% 20%, rgba(26, 111, 214, .35), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, rgba(192, 152, 72, .3), transparent 60%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-950) 100%);
  color: #cfd8ea;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%);
}
/* The hero fills exactly one screen below the top bar + header, and every size
   inside it scales with viewport height so it fits short laptop screens too. */
.hero { --hero-h: calc(100vh - var(--topbar-h) - var(--header-h)); }
@supports (height: 100svh) { .hero { --hero-h: calc(100svh - var(--topbar-h) - var(--header-h)); } }
.hero .container {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
  min-height: var(--hero-h);
  padding-top: clamp(20px, 4vh, 64px);
  padding-bottom: clamp(60px, 9vh, 100px); /* leaves room for the overlapping trust strip */
}
.hero .eyebrow { margin-bottom: clamp(10px, 2.2vh, 18px); }
.hero h1 { color: #fff; font-size: clamp(2rem, min(4.4vw, 6.4vh), 3.9rem); margin-bottom: clamp(10px, 2vh, 22px); }
.hero h1 .accent { background: linear-gradient(90deg, #e4c17d, #c09848); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { font-size: clamp(.95rem, 2.3vh, 1.12rem); max-width: 560px; color: #c2cde3; margin-bottom: clamp(16px, 3.6vh, 32px); }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: clamp(18px, 4.6vh, 44px); }
.hero__actions .btn { padding-top: clamp(11px, 1.8vh, 15px); padding-bottom: clamp(11px, 1.8vh, 15px); }
.hero__stats { display: flex; gap: 36px; flex-wrap: wrap; }
.hero__stat strong { display: block; font-family: var(--font-display); font-size: clamp(1.35rem, 3.8vh, 2rem); font-weight: 800; color: #fff; line-height: 1.1; }
.hero__stat span { font-size: .85rem; color: #93a2bf; }
.hero__visual { position: relative; height: clamp(300px, calc(var(--hero-h) - 130px), 560px); display: grid; place-items: center; }
.hero__glow { position: absolute; left: 50%; top: 52%; height: 82%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(26,111,214,.55), transparent 65%); filter: blur(10px); }
.hero__ring { position: absolute; left: 50%; top: 52%; height: 90%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.15); animation: spin 60s linear infinite; }
/* Showroom photos sit in rounded frames instead of floating cut-outs */
.hero__photo {
  /* width leads and height is only capped — sizing from the height instead let the
     square frame grow wider than its column and ride over the hero copy */
  position: relative; width: 100%; max-height: 92%; aspect-ratio: 1; border-radius: 28px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 40px 80px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.18);
  animation: float 8s ease-in-out infinite;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__photo--sm {
  position: absolute; left: 0; bottom: 4%; height: 40%; max-width: 55%; z-index: 2;
  border-radius: 20px; border-width: 4px; border-style: solid; border-color: var(--navy-900);
  animation: float 8s ease-in-out -4s infinite;
}
.hero__badge {
  /* above both photo frames — the small one is lifted to z-index 2 */
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: var(--shadow-lg);
  font-size: .82rem; line-height: 1.35;
}
.hero__badge strong { font-family: var(--font-display); font-size: 1rem; display: block; }
.hero__badge--rating { top: 30px; right: 4%; animation: float 6s ease-in-out -1s infinite; }
.hero__badge--since { bottom: 20%; left: -2%; animation: float 6s ease-in-out -2.5s infinite; }
.hero__badge-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--navy-900); background: linear-gradient(145deg, var(--gold-400), var(--gold-500)); flex: none; }
.hero__badge-icon--blue { background: linear-gradient(145deg, var(--blue-500), var(--navy-800)); }
.hero__badge-icon svg { width: 22px; height: 22px; }
.stars { color: var(--star); letter-spacing: 1px; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Trust strip ---------- */
.trust { position: relative; z-index: 2; margin-top: -44px; }
.trust__inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.trust__item { display: flex; gap: 16px; align-items: center; padding: 26px 28px; }
.trust__item + .trust__item { border-left: 1px solid var(--line); }
.trust__icon { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(145deg, #f1f6fe, #dce8fa); color: var(--blue-600); border: 1px solid rgba(11,85,176,.12); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(11,85,176,.6); }
.trust__icon svg { width: 26px; height: 26px; }
.trust__item:nth-child(even) .trust__icon { background: linear-gradient(145deg, #fdf8ec, #f3e6c7); color: var(--gold-ink); border-color: rgba(192,152,72,.22); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(192,152,72,.6); }
.trust__item strong { display: block; font-family: var(--font-display); color: var(--ink); font-size: 1rem; line-height: 1.3; }
.trust__item span { font-size: .84rem; color: var(--muted); }

/* ---------- Sections ---------- */
.section { padding: 110px 0; position: relative; }
.section--soft { background: var(--bg-soft); }
.section--tight { padding: 80px 0; }
.section--dark {
  background: radial-gradient(900px 500px at 90% 0%, rgba(26,111,214,.25), transparent 60%), linear-gradient(160deg, var(--navy-900), var(--navy-950));
  color: #c2cde3;
}
.section--dark h2, .section--dark h3 { color: #fff; }
.section-head { max-width: 720px; margin: 0 auto 60px; text-align: center; }
.section-head p { font-size: 1.08rem; color: var(--muted); margin: 0; }
.section--dark .section-head p { color: #a9b6cf; }
.section-head--left { margin-left: 0; text-align: left; }
.section-head--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; text-align: left; }
.section-head--split > div { max-width: 640px; }

/* ---------- Product stage (illustration background) ---------- */
.stage {
  position: relative; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #fff 0%, var(--bg-soft-2) 55%, #e2eaf6 100%);
  overflow: hidden;
}
.stage::after { content: ""; position: absolute; bottom: 14%; left: 50%; width: 60%; height: 18px; translate: -50% 0; background: radial-gradient(ellipse, rgba(6,26,61,.28), transparent 70%); filter: blur(4px); }
.stage img { position: relative; z-index: 1; transition: transform .6s var(--ease); }
.stage--dark { background: radial-gradient(circle at 50% 40%, #12366f 0%, var(--navy-900) 60%, var(--navy-950) 100%); }
.stage--dark::after { background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 70%); }


/* ---------- Spotlight (main products) ---------- */
.spotlight { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 24px; }
.spot-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.spot-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.spot-card:hover .stage img { transform: scale(1.05) translateY(-6px); }
.spot-card .stage { height: 320px; }
.spot-card .stage img { max-height: 270px; width: auto; }
.spot-card--hero .stage { height: 420px; }
.spot-card--hero .stage img { max-height: 370px; }
.spot-card__tag { position: absolute; top: 18px; left: 18px; z-index: 2; padding: 6px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--gold-500); color: var(--navy-900); font-family: var(--font-display); }
.spot-card__tag--blue { background: var(--navy-800); color: #fff; }
.spot-card__body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.spot-card__body p { color: var(--muted); font-size: .95rem; }
.spot-card__body .link-arrow { margin-top: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }
.chip { padding: 6px 12px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.section--dark .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #d6deec; }

/* ---------- Category grid ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cat-card {
  position: relative; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.cat-card:hover .stage img { transform: scale(1.07); }
.cat-card .stage { height: 200px; }
.cat-card .stage img { max-height: 150px; max-width: 75%; width: auto; }
.cat-card__body { padding: 18px 20px 22px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cat-card__body h3 { font-size: 1.02rem; margin: 0 0 2px; }
.cat-card__body span { font-size: .8rem; color: var(--muted); }
.cat-card__arrow { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-soft); color: var(--navy-800); transition: background .3s, color .3s, transform .3s; }
.cat-card__arrow svg { width: 16px; height: 16px; }
.cat-card:hover .cat-card__arrow { background: var(--gold-500); color: var(--navy-900); transform: rotate(-45deg); }

/* ---------- Configurator (custom branding) ---------- */
.configurator { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.configurator__stage { height: 600px; border-radius: var(--radius-lg); }
.configurator__stage svg { height: 540px; width: auto; position: relative; z-index: 1; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.swatches { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0 28px; }
.swatch {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; border: 3px solid rgba(255,255,255,.15);
  background: var(--c); box-shadow: inset 0 -6px 12px rgba(0,0,0,.25);
  transition: transform .2s, border-color .2s;
}
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] { border-color: #fff; transform: scale(1.12); }
.brand-input { display: flex; gap: 10px; margin-bottom: 30px; }
.brand-input input {
  flex: 1; min-width: 0; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color: #fff; outline: none; text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.brand-input input::placeholder { color: #8394b4; }
.brand-input input:focus { border-color: var(--blue-500); background: rgba(255,255,255,.1); }
.label-sm { display: block; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #8fa0c0; margin-bottom: 4px; }
.tick-list li { position: relative; padding-left: 34px; margin-bottom: 12px; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071c3c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/13px no-repeat;
}
.tick-list--blue li::before { background-color: var(--blue-600); }

/* ---------- Industries ---------- */
.industries { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.industry {
  padding: 28px 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.industry:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.industry__icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 18px; background: linear-gradient(145deg, var(--blue-500), var(--navy-800)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 12px 22px -12px rgba(11,85,176,.8); transition: transform .35s var(--ease); }
.industry:hover .industry__icon { transform: translateY(-3px) rotate(-4deg); }
.industry:nth-child(3n+2) .industry__icon { background: linear-gradient(145deg, var(--gold-400), var(--gold-500)); color: var(--navy-900); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 12px 22px -12px rgba(192,152,72,.8); }
.industry__icon svg { width: 28px; height: 28px; }
.industry h3 { font-size: 1.05rem; margin-bottom: 6px; }
.industry p { font-size: .9rem; color: var(--muted); margin: 0; }

/* ---------- Why / features ---------- */
.why { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.why__visual { position: relative; border-radius: var(--radius-lg); overflow: hidden; height: 560px; }
.why__visual .stage { position: absolute; inset: 0; }
.why__visual .stage img { max-height: 430px; }
.why__floating {
  position: absolute; z-index: 2; left: 24px; bottom: 24px; right: 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.why__floating div { background: #fff; padding: 18px 14px; text-align: center; }
.why__floating strong { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--navy-800); line-height: 1.1; }
.why__floating span { font-size: .78rem; color: var(--muted); }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; margin-top: 36px; }
.feature { display: flex; gap: 16px; }
.feature__icon { flex: none; width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(145deg, #fdf8ec, #f3e6c7); color: var(--gold-ink); border: 1px solid rgba(192,152,72,.22); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(192,152,72,.6); }
.feature:nth-child(even) .feature__icon,
.feature__icon--blue { background: linear-gradient(145deg, #f1f6fe, #dce8fa) !important; color: var(--blue-600) !important; border-color: rgba(11,85,176,.12); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(11,85,176,.6); }
.feature__icon svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1rem; margin-bottom: 4px; }
.feature p { font-size: .9rem; color: var(--muted); margin: 0; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; counter-reset: step; position: relative; }
.steps::before { content: ""; position: absolute; top: 34px; left: 10%; right: 10%; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 8px, transparent 8px 16px); }
.step { position: relative; text-align: center; padding: 0 6px; }
.step__num {
  position: relative; z-index: 1; width: 68px; height: 68px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: #fff;
  background: linear-gradient(145deg, var(--blue-500), var(--navy-800)); border: 6px solid var(--navy-900);
  box-shadow: 0 0 0 1px rgba(255,255,255,.15);
}
.step:nth-child(odd) .step__num { background: linear-gradient(145deg, var(--gold-400), var(--gold-500)); color: var(--navy-900); }
.step h3 { font-size: 1rem; margin-bottom: 6px; }
.step p { font-size: .88rem; color: #a9b6cf; margin: 0; }

/* ---------- Reviews ---------- */
.reviews-wrap { display: grid; grid-template-columns: .8fr 2fr; gap: 40px; align-items: stretch; }
.rating-card {
  border-radius: var(--radius-lg); padding: 40px 34px; color: #fff;
  background: radial-gradient(400px 300px at 100% 0%, rgba(192,152,72,.4), transparent 60%), linear-gradient(160deg, var(--navy-800), var(--navy-950));
  display: flex; flex-direction: column;
}
.rating-card__score { font-family: var(--font-display); font-size: 5rem; font-weight: 800; line-height: 1; }
.rating-card .stars { font-size: 1.4rem; margin: 8px 0 6px; }
.rating-card p { color: #b8c4da; }
.rating-bars { margin: 18px 0 28px; display: grid; gap: 8px; }
.rating-bar { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: center; font-size: .8rem; color: #9fb0cc; }
.rating-bar i { display: block; height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.rating-bar i::before { content: ""; display: block; height: 100%; width: var(--w); background: var(--star); border-radius: 6px; }
.rating-card .btn { margin-top: auto; }
/* start, not stretch: a short review keeps a short card instead of padding out
   to the tallest one and leaving a gap above the reviewer's name */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.review {
  position: relative; padding: 36px 32px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line);
  display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s;
}
.review:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.review::before { content: "\201C"; position: absolute; top: 4px; right: 22px; font-family: Georgia, serif; font-size: 5rem; line-height: 1; color: var(--blue-100); }
.review p { color: var(--ink-2); font-size: 1.04rem; line-height: 1.7; }
.review .stars { font-size: 1.1rem; margin-bottom: 6px; }
.review__who { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: #fff; background: linear-gradient(145deg, var(--blue-500), var(--navy-800)); flex: none; }
.review:nth-child(even) .avatar { background: linear-gradient(145deg, var(--gold-400), var(--gold-500)); color: var(--navy-900); }
/* unattributed Google highlight quotes get a neutral avatar, not a person's initials */
.review .avatar.avatar--g { background: linear-gradient(145deg, #5f6b7f, #38414f); }
.review__who strong { display: block; font-family: var(--font-display); font-size: .92rem; color: var(--ink); line-height: 1.2; }
.review__who small { color: var(--muted); font-size: .78rem; }

/* ---------- Brands marquee ---------- */
.brands { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.brands__track { display: flex; gap: 18px; width: max-content; animation: marquee 38s linear infinite; }
.brands:hover .brands__track { animation-play-state: paused; }
.brand-pill {
  padding: 18px 34px; border-radius: 16px; background: #fff; border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: .04em; color: #8a94a8; white-space: nowrap;
  transition: color .3s, border-color .3s;
}
.brand-pill:hover { color: var(--navy-800); border-color: var(--navy-800); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 64px 60px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; color: #dbe3f1;
  background:
    radial-gradient(500px 300px at 100% 100%, rgba(192,152,72,.45), transparent 60%),
    radial-gradient(500px 300px at 0% 0%, rgba(26,111,214,.45), transparent 60%),
    linear-gradient(135deg, var(--navy-800), var(--navy-950));
}
.cta-band h2 { color: #fff; margin-bottom: 12px; }
.cta-band p { margin: 0; color: #b9c6dd; font-size: 1.05rem; }
.cta-band__actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate; color: #c2cde3;
  background:
    radial-gradient(800px 400px at 90% 10%, rgba(26,111,214,.35), transparent 60%),
    radial-gradient(500px 300px at 0% 100%, rgba(192,152,72,.25), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-950));
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse at 80% 30%, #000 10%, transparent 70%);
}
.page-hero .container { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; padding-top: 70px; padding-bottom: 70px; min-height: 380px; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.3rem); }
.page-hero p { font-size: 1.08rem; max-width: 620px; color: #b8c4da; }
.page-hero__visual { position: relative; height: 300px; display: grid; place-items: center; }
.page-hero__visual::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(26,111,214,.5), transparent 65%); }
.page-hero__visual img { position: relative; max-height: 290px; width: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.5)); animation: float 7s ease-in-out infinite; }
.breadcrumb { display: flex; gap: 10px; align-items: center; font-size: .85rem; color: #8fa0c0; margin-bottom: 18px; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span[aria-current] { color: var(--gold-400); }

/* ---------- Product rows (detail pages) ---------- */
.product-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.product-row + .product-row { margin-top: 110px; }
.product-row--flip .product-row__media { order: 2; }
.product-row__media { border-radius: var(--radius-lg); overflow: hidden; height: 500px; position: relative; }
.product-row__media .stage { position: absolute; inset: 0; }
.product-row__media .stage img { max-height: 400px; max-width: 80%; width: auto; }
.product-row__media .spot-card__tag { z-index: 3; }
.product-row h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.product-row > div > p { color: var(--muted); font-size: 1.02rem; }

.spec-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 22px 0 28px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: .92rem; }
.spec-table th, .spec-table td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th { width: 40%; background: var(--bg-soft); font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: .85rem; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Variant cards ---------- */
.variants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.variant { border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s; }
.variant:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.variant .stage { height: 240px; }
.variant .stage img { max-height: 190px; max-width: 70%; width: auto; }
.variant__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.variant__body h3 { font-size: 1.08rem; margin-bottom: 6px; }
.variant__body p { font-size: .9rem; color: var(--muted); }
.variant__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.variant__body .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Tabs / filter ---------- */
.tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.tab {
  padding: 11px 22px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: var(--ink-2); transition: all .25s;
}
.tab:hover { border-color: var(--navy-800); }
.tab[aria-selected="true"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; box-shadow: 0 8px 20px -8px rgba(10,42,94,.6); }
.is-hidden { display: none !important; }

/* ---------- Info cards / numbers ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.info-card { padding: 34px 30px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s; }
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.section--dark .info-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.section--dark .info-card p { color: #a9b6cf; }
.info-card p { color: var(--muted); font-size: .94rem; margin: 0; }
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.number { padding: 30px; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); text-align: center; }
.number strong { display: block; font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; color: #fff; line-height: 1.1; }
.number span { color: #a9b6cf; font-size: .9rem; }

/* ---------- Timeline (about) ---------- */
.timeline { position: relative; max-width: 860px; margin: 0 auto; }
.timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; translate: -1px 0; background: linear-gradient(var(--gold-500), var(--blue-600)); }
.tl-item { position: relative; width: 50%; padding: 0 48px 48px 0; text-align: right; }
.tl-item:nth-child(even) { margin-left: 50%; padding: 0 0 48px 48px; text-align: left; }
.tl-item::before { content: ""; position: absolute; top: 6px; right: -9px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--gold-500); }
.tl-item:nth-child(even)::before { right: auto; left: -9px; border-color: var(--blue-600); }
.tl-item span { font-family: var(--font-display); font-weight: 800; color: var(--gold-ink); font-size: .9rem; letter-spacing: .1em; }
.tl-item:nth-child(even) span { color: var(--blue-600); }
.tl-item h3 { margin: 6px 0 6px; }
.tl-item p { color: var(--muted); margin: 0; }

/* ---------- About split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
/* Two overlapping photo panels; each photo fills its panel (see .stage--photo) */
.about-collage { position: relative; height: 540px; }
.about-collage .stage { position: absolute; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.about-collage .stage:nth-child(1) { inset: 0 16% 28% 0; }
.about-collage .stage:nth-child(2) { inset: 54% 0 0 46%; border: 8px solid #fff; }
.about-collage__badge {
  position: absolute; z-index: 3; top: 26px; right: 0; padding: 22px 26px; border-radius: var(--radius);
  background: var(--gold-500); color: var(--navy-900); box-shadow: var(--shadow-lg); text-align: center;
}
.about-collage__badge strong { display: block; font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; line-height: 1; }
.about-collage__badge span { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; }
.faq details { border-radius: var(--radius); background: #fff; border: 1px solid var(--line); transition: box-shadow .3s; }
.faq details[open] { box-shadow: var(--shadow); border-color: transparent; }
.faq summary { cursor: pointer; list-style: none; padding: 22px 64px 22px 26px; position: relative; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; translate: 0 -50%; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-soft); color: var(--gold-ink); font-size: 1.3rem; font-weight: 600; transition: transform .3s, background .3s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--gold-100); }
.faq details p { padding: 0 26px 22px; margin: 0; color: var(--muted); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; }
.contact-cards { display: grid; gap: 16px; }
.contact-card { display: flex; gap: 18px; padding: 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); transition: box-shadow .3s, transform .3s var(--ease); }
.contact-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.contact-card__icon { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(145deg, #fdf8ec, #f3e6c7); color: var(--gold-ink); border: 1px solid rgba(192,152,72,.22); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(192,152,72,.6); }
.contact-card:nth-child(even) .contact-card__icon { background: linear-gradient(145deg, #f1f6fe, #dce8fa); color: var(--blue-600); border-color: rgba(11,85,176,.12); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(11,85,176,.6); }
.contact-card__icon svg { width: 24px; height: 24px; }
.contact-card h3 { font-size: 1rem; margin-bottom: 4px; }
.contact-card p, .contact-card a { margin: 0; color: var(--muted); font-size: .94rem; }
.contact-card a:hover { color: var(--gold-ink); }
.form-card { padding: 42px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-weight: 600; font-size: .85rem; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-soft);
  outline: none; transition: border-color .2s, background .2s, box-shadow .2s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue-500); background: #fff; box-shadow: 0 0 0 4px rgba(26,111,214,.12); }
.form-note { font-size: .8rem; color: var(--muted); margin: 14px 0 0; text-align: center; }
.map { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); height: 440px; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-950); color: #9aa8c3; padding-top: 80px; font-size: .92rem; position: relative; overflow: hidden; }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--blue-600) 0 50%, var(--gold-500) 50% 100%); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 60px; }
.footer__logo { display: inline-block; background: #fff; padding: 10px 16px; border-radius: 14px; margin-bottom: 22px; }
.footer__logo .logo-crop { --h: 46px; }
.footer h4 { color: #fff; font-size: 1rem; margin-bottom: 22px; letter-spacing: .02em; }
.footer__links li { margin-bottom: 11px; }
.footer__links a { transition: color .2s, padding .2s; }
.footer__links a:hover { color: #fff; padding-left: 4px; }
.footer__contact li { display: flex; gap: 12px; margin-bottom: 16px; }
.footer__contact svg { width: 18px; height: 18px; color: var(--gold-500); flex: none; margin-top: 3px; }
.footer__contact a:hover { color: #fff; }
.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: background .25s, transform .25s; }
.socials a:hover { background: var(--gold-500); transform: translateY(-3px); }
.socials a:hover svg { color: var(--navy-900); }
.socials svg { width: 18px; height: 18px; color: #fff; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0; font-size: .8rem; }
.footer__bottom .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.credit { color: #6f7f9e; font-size: .78rem; }
.credit a { color: #c9d3e6; font-weight: 600; border-bottom: 1px dotted rgba(255,255,255,.35); }
.credit a:hover { color: #fff; border-bottom-color: var(--gold-500); }

/* ---------- Floating actions ---------- */
.float-actions { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; flex-direction: column; gap: 12px; }
.float-btn { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 14px 30px -8px rgba(0,0,0,.4); transition: transform .25s; position: relative; }
.float-btn:hover { transform: scale(1.08); }
.float-btn svg { width: 28px; height: 28px; }
.float-btn--wa { background: var(--wa); }
.float-btn--wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa); animation: pulse 2s ease-out infinite; }
.float-btn--call { background: var(--navy-800); display: none; }
.to-top { width: 46px; height: 46px; margin-left: auto; margin-right: 6px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--navy-800); border: 1px solid var(--line); cursor: pointer; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; transform: translateY(10px); }
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top svg { width: 18px; height: 18px; }
@keyframes pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
.float-btn--wa { background: linear-gradient(145deg, #2fd078, #149a4c); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 16px 30px -10px rgba(20,154,76,.7); }

/* ---------- Mobile quick-action bar (phones only) ---------- */
.mobile-bar { display: none; }
@media (max-width: 680px) {
  .mobile-bar {
    position: fixed; z-index: 95; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end;
    height: 64px; padding: 0 6px; border-radius: 22px;
    background: rgba(6, 26, 61, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 18px 40px -12px rgba(4, 15, 38, .65), inset 0 1px 0 rgba(255,255,255,.08);
    transition: transform .4s var(--ease);
  }
  .nav-open .mobile-bar { transform: translateY(140%); }
  .mobile-bar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
    height: 100%; padding-bottom: 8px; color: #c9d4e8; font-family: var(--font-display); font-weight: 600; font-size: .7rem; letter-spacing: .02em;
    -webkit-tap-highlight-color: transparent; transition: color .2s;
  }
  .mobile-bar__item:active { color: #fff; }
  .mobile-bar__icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; transition: transform .2s; }
  .mobile-bar__item:active .mobile-bar__icon { transform: scale(.92); }
  .mobile-bar__icon svg { width: 19px; height: 19px; }
  .mobile-bar__item--wa { color: #fff; }
  /* the hero's one-screen height leaves room for this bar */
  .hero { --hero-h: calc(100vh - var(--header-h) - 84px); }
  @supports (height: 100svh) { .hero { --hero-h: calc(100svh - var(--header-h) - 84px - env(safe-area-inset-bottom)); } }
  .mobile-bar__item--wa .mobile-bar__icon {
    width: 58px; height: 58px; border-radius: 50%; margin-top: -30px;
    background: linear-gradient(145deg, #2fd078, #149a4c);
    border: 4px solid var(--navy-900);
    box-shadow: 0 10px 22px -6px rgba(20,154,76,.75), inset 0 1px 0 rgba(255,255,255,.35);
  }
  .mobile-bar__item--wa .mobile-bar__icon svg { width: 27px; height: 27px; }
  .mobile-bar__item--quote .mobile-bar__icon { background: linear-gradient(145deg, var(--gold-400), var(--gold-500)); color: var(--navy-900); box-shadow: 0 8px 16px -8px rgba(192,152,72,.8); }
  /* room under the footer for the bar, in the footer's own colour */
  .footer { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .float-actions { display: none; }
}

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400) 40%, var(--blue-500));
  transform-origin: 0 50%; transform: scaleX(0);
}

/* ---------- Card polish ---------- */
.spot-card, .cat-card, .variant, .industry, .info-card, .review, .contact-card {
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, var(--shadow-sm);
}
.spot-card:hover, .cat-card:hover, .variant:hover { border-color: rgba(11,85,176,.18); }
.section-head h2 { letter-spacing: -.02em; }

/* ---------- Rendering performance: skip off-screen sections until needed ---------- */
main > .section ~ .section { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Inner-page hero photo sits in a rounded frame rather than floating */
.page-hero__visual img {
  max-height: 300px; width: auto; border-radius: 24px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.18);
  filter: none;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1340px) {
  .header__phone { display: none; }
}
@media (max-width: 1180px) {
  .nav__link { padding: 10px 11px; }
  .spotlight { grid-template-columns: 1fr 1fr; }
  .spot-card--hero { grid-column: 1 / -1; }
  .cat-grid, .industries, .cards-4 { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  :root { --header-h: 72px; }
  .brand .logo-crop { --h: 40px; }
  .burger { display: block; }
  /* backdrop-filter would make the header the containing block of the fixed menu */
  .header { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .header__cta .btn { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 0; padding: 20px 24px 40px;
    background: #fff; overflow-y: auto;
    /* clip-path (not transform) so the closed menu adds no horizontal overflow */
    clip-path: inset(0 0 0 100%); visibility: hidden;
    transition: clip-path .45s var(--ease), visibility 0s .45s;
    background: radial-gradient(420px 300px at 100% 0%, #e9f1fd, transparent 70%), linear-gradient(#fff, #f6f9fd);
    padding: 12px 20px calc(28px + env(safe-area-inset-bottom));
  }
  .nav-open .nav { clip-path: inset(0); visibility: visible; transition: clip-path .45s var(--ease), visibility 0s; }
  .nav-open { overflow: hidden; }
  .nav > * { opacity: 0; transform: translateX(18px); }
  .nav-open .nav > * { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .nav-open .nav > :nth-child(2) { transition-delay: .04s; } .nav-open .nav > :nth-child(3) { transition-delay: .08s; }
  .nav-open .nav > :nth-child(4) { transition-delay: .12s; } .nav-open .nav > :nth-child(5) { transition-delay: .16s; }
  .nav-open .nav > :nth-child(6) { transition-delay: .2s; }
  .nav__link {
    display: flex; padding: 17px 6px; border-bottom: 1px solid var(--line); border-radius: 0;
    font-size: 1.12rem; font-weight: 700; justify-content: space-between; background: none !important;
  }
  .nav__link::after, .nav__link.is-active::after {
    content: ""; position: static; display: block; width: 30px; height: 30px; border-radius: 50%; flex: none;
    background: var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2a5e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;
  }
  .nav__link.is-active { color: var(--gold-ink); }
  .nav__link.is-active::after { background-color: var(--gold-100); }
  .nav__link svg { display: none; }
  .nav__item > .nav__link { border-bottom: 0; }
  .dropdown {
    position: static; translate: none; width: auto; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: none; padding: 0 0 14px; border-bottom: 1px solid var(--line); border-radius: 0;
    grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .dropdown a { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); }
  .dropdown small { display: none; }
  .dropdown strong { font-size: .88rem; }
  .dropdown__icon { width: 44px; height: 44px; }
  .nav__mobile-cta { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .nav__mobile-cta .btn { min-height: 50px; padding: 12px 14px; font-size: .9rem; }
  .nav__mobile-note { grid-column: 1 / -1; text-align: center; font-size: .8rem; color: var(--muted); margin-top: 4px; }

  /* tablets keep the two-column hero so it still fits one screen */
  .hero .container { grid-template-columns: 1.1fr .9fr; gap: 20px; }
  .hero h1 { font-size: clamp(1.9rem, min(4.6vw, 5.6vh), 2.8rem); }
  .hero__visual { height: clamp(280px, calc(var(--hero-h) - 200px), 460px); }
  .hero__product--cooler { left: 6%; }
  .hero__badge { padding: 9px 12px; font-size: .74rem; }
  .hero__badge-icon { width: 34px; height: 34px; }
  .hero__badge--since { left: -6%; }
  .trust__inner { grid-template-columns: 1fr 1fr; }
  .trust__item:nth-child(3) { border-left: 0; }
  .trust__item:nth-child(n+3) { border-top: 1px solid var(--line); }

  .configurator, .why, .split, .product-row, .contact-grid, .reviews-wrap { grid-template-columns: 1fr; gap: 44px; }
  .product-row--flip .product-row__media { order: 0; }
  .product-row__media { height: 420px; }
  .configurator__stage { height: 520px; }
  .configurator__stage svg { height: 460px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .steps::before { display: none; }
  .reviews { grid-template-columns: 1fr; }
  .variants, .cards-3 { grid-template-columns: 1fr 1fr; }
  .numbers { grid-template-columns: 1fr 1fr; }
  .cta-band { grid-template-columns: 1fr; padding: 48px 36px; }
  .page-hero .container { grid-template-columns: 1fr; min-height: 0; }
  .page-hero__visual { height: 240px; }
  .page-hero__visual img { max-height: 230px; }
  .section-head--split { flex-direction: column; align-items: flex-start; }
  .section { padding: 84px 0; }
}

/* Tablet portrait: two columns leave the copy ~340px wide, which wraps the stats
   onto three rows and pushes the hero past one screen. Give the text the full width
   and drop the photo until there is room for both again. */
/* No min-width here: fractional viewport rounding can fall between 680 and 681
   and match neither range. The phone block below overrides what it needs to. */
@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero__visual { display: none; }
  .hero__lead { max-width: 640px; }
  .hero h1 { font-size: clamp(2.1rem, min(6vw, 6vh), 3rem); }
}

/* very short phone screens: the stats repeat further down the page */
@media (max-width: 680px) and (max-height: 600px) {
  .hero__stats { display: none; }
  .hero__actions { margin-bottom: 0; }
}

@media (max-width: 680px) {
  .container { padding: 0 16px; }
  .topbar__group--right, .topbar__hide-sm { display: none; }
  .topbar .container { justify-content: center; }
  /* phones: drop the top bar and the illustration so the whole hero message fits one screen */
  :root { --topbar-h: 0px; }
  .topbar { display: none; }
  .hero .container { grid-template-columns: 1fr; padding-top: clamp(12px, 2.6vh, 40px); padding-bottom: clamp(52px, 8vh, 72px); }
  .hero__lead { margin-bottom: clamp(14px, 2.6vh, 28px); }
  .hero__actions { margin-bottom: clamp(16px, 3.4vh, 40px); }
  .hero__visual { display: none; }
  .hero h1 { font-size: clamp(1.75rem, min(9.2vw, 5.4vh), 2.6rem); }
  .hero .eyebrow { font-size: .68rem; letter-spacing: .2em; }
  .hero .eyebrow::before { width: 18px; }
  .hero__lead { font-size: clamp(.92rem, 2.2vh, 1.02rem); line-height: 1.55; }
  .hero__stats { gap: 16px; flex-wrap: nowrap; justify-content: space-between; }
  .hero__stat span { font-size: .74rem; white-space: nowrap; }
  .hide-sm { display: none; }
  .hero__actions { gap: 10px; flex-wrap: nowrap; }
  .hero__actions .btn { flex: 1 1 auto; min-height: 52px; padding-left: 16px; padding-right: 16px; font-size: .9rem; }
  .btn-row .btn, .cta-band__actions .btn { min-height: 50px; }
  .btn-row { gap: 10px; }
  .btn-row > .btn { flex: 1 1 auto; }
  .hero__actions .btn--wa { flex-grow: 1.4; }
  .trust { margin-top: -30px; }
  .trust__inner { grid-template-columns: 1fr; }
  .trust__item { padding: 18px 20px; }
  .trust__item + .trust__item { border-left: 0; border-top: 1px solid var(--line); }
  .spotlight, .cat-grid, .industries, .variants, .cards-3, .cards-4, .features, .form-grid, .footer__grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .cat-card .stage { height: 150px; }
  .cat-card .stage img { max-height: 110px; }
  .cat-card__body { padding: 14px; }
  .cat-card__arrow { display: none; }
  .spot-card--hero .stage, .spot-card .stage { height: 300px; }
  .spot-card .stage img, .spot-card--hero .stage img { max-height: 250px; }
  .why__visual { height: 460px; }
  .why__visual .stage img { max-height: 300px; }
  .steps { grid-template-columns: 1fr; }
  .numbers { grid-template-columns: 1fr 1fr; }
  .number { padding: 22px 12px; }
  .number strong { font-size: 2rem; }
  .product-row__media { height: 340px; }
  .product-row__media .stage img { max-height: 280px; }
  .product-row + .product-row { margin-top: 80px; }
  .configurator__stage { height: 440px; }
  .configurator__stage svg { height: 390px; }
  .about-collage { height: 420px; }
  .timeline::before { left: 9px; }
  .tl-item, .tl-item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 36px 40px; text-align: left; }
  .tl-item::before, .tl-item:nth-child(even)::before { left: 0; right: auto; }
  .form-card { padding: 26px 20px; }
  .cta-band { padding: 40px 24px; }
  .section { padding: 70px 0; }
  .section-head { margin-bottom: 40px; }
  .footer__bottom .container { flex-direction: column; text-align: center; }
  .spec-table th, .spec-table td { padding: 11px 12px; }
}


/* ---------- Real product photos ----------
   A photo fills its whole card; the gradient stage stays for cut-out illustrations.
   Kept at the very end of the file: the per-card img sizing inside the media
   queries above has the same specificity, so source order decides the winner. */
.stage--photo { background: #e8eef7; }
.stage--photo::after { display: none; }
.stage.stage--photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover;
}