@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@500;600;700;800&display=swap');

:root {
  --ink: #f3eef6;
  --muted: #a79fb0;
  --paper: #000000;
  --mist: #0c0910;
  --plum: #51245d;
  --violet: #8f4a9e;
  --pink: #d84f9a;
  --amber: #f3aa2c;
  --line: rgba(255, 255, 255, .14);
  --shadow: 0 24px 70px rgba(42, 22, 48, .12);
  --radius: 24px;
  --wrap: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; width: 100%; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: Inter, Arial, sans-serif; line-height: 1.65; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
.wrap { width: var(--wrap); margin-inline: auto; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 999; padding: 10px 14px; background: white; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.site-header { position: sticky; top: 0; z-index: 50; height: 78px; border-bottom: 1px solid transparent; transition: .25s ease; }
.site-header.is-stuck { background: rgba(0, 0, 0, .85); border-color: var(--line); backdrop-filter: blur(16px); }
.nav-shell { width: 100%; height: 100%; margin: auto; padding-inline: clamp(20px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: -.06em; }
.brand__mark { width: 66px; height: 40px; display: grid; place-items: center; color: white; font-size: 19px; font-style: italic; transform: skewX(-8deg); background: linear-gradient(135deg, var(--plum), var(--pink)); clip-path: polygon(13% 0, 87% 0, 100% 50%, 87% 100%, 13% 100%, 0 50%); }
.brand__name { font: 700 17px/1 "Montserrat", "Inter", Arial, sans-serif; letter-spacing: .02em; }
.brand__logo { height: 54px; width: auto; margin-left: -16px; }
.site-header:not(.is-stuck) .brand__logo { filter: brightness(0) invert(1); }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a { padding: 10px 14px; color: rgba(255,255,255,.72); font-size: 14px; font-weight: 700; border-radius: 999px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: white; background: rgba(255, 255, 255, .12); }
.nav-links .nav-cta { margin-left: 8px; color: white; background: var(--plum); }
.nav-links .nav-cta:hover { color: white; background: var(--violet); }
.nav-toggle { display: none; border: 0; background: transparent; padding: 9px; }
.nav-toggle span { display: block; width: 24px; height: 2px; margin: 5px; background: var(--ink); transition: .2s; }
.site-header:not(.is-stuck) .brand { color: white; }
.site-header:not(.is-stuck) .nav-links a { color: rgba(255,255,255,.78); }
.site-header:not(.is-stuck) .nav-links a:hover,
.site-header:not(.is-stuck) .nav-links a[aria-current="page"] { color: white; background: rgba(255,255,255,.12); }
.site-header:not(.is-stuck) .nav-links .nav-cta { color: var(--plum); background: white; }
.site-header:not(.is-stuck) .nav-toggle span { background: white; }

.hero, .page-hero { position: relative; overflow: hidden; color: white; background: radial-gradient(circle at 84% 16%, rgba(226,116,196,.40), transparent 46%), linear-gradient(135deg, #4a1f57 0%, #8f3b9e 54%, #a94fb8 100%); }
.hero::before, .page-hero::before, .dark-cta::before { content: ""; position: absolute; inset: 0; opacity: .55; background-image: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z' fill='%23ffffff' fill-opacity='0.10' fill-rule='evenodd'/%3E%3C/svg%3E"); background-size: 56px 98px; }
.hero { min-height: 670px; display: grid; align-items: center; margin-top: -78px; padding: 150px 0 84px; }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; align-items: center; gap: 72px; }
.kicker { margin: 0 0 16px; color: var(--amber); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; line-height: 1.08; font-family: "Montserrat", "Inter", Arial, sans-serif; font-weight: 700; }
h1 { margin-bottom: 22px; font-size: clamp(48px, 6vw, 82px); letter-spacing: -.04em; }
h1 em { color: #f4badc; }
.hero__copy { max-width: 650px; color: rgba(255,255,255,.78); font-size: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 21px; border: 1px solid transparent; border-radius: 999px; font-weight: 800; cursor: pointer; transition: .2s ease; }
.button:hover { transform: translateY(-2px); }
.button--light { color: var(--plum); background: white; }
.button--outline { color: white; border-color: rgba(255,255,255,.32); }
.button--plum { color: white; background: var(--plum); }
.button--soft { color: var(--plum); background: #efe4f1; }
.hero__panel { padding: 24px; border: 1px solid rgba(255,255,255,.18); border-radius: 30px; background: rgba(255,255,255,.08); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.spectrum { height: 280px; position: relative; border-radius: 20px; background: linear-gradient(118deg, #2e1044, #7742ce 29%, #347bd6 41%, #25b36b 54%, #e1bd2d 67%, #ea6b29 82%, #a32948); overflow: hidden; }
.spectrum::before { content: "400 nm"; position: absolute; top: 20px; bottom: 20px; left: 32%; width: 2px; padding-left: 10px; color: white; font-size: 12px; font-weight: 800; border-left: 2px solid white; }
.spectrum::after { content: "THE LINE WE DRAW"; position: absolute; left: 30px; bottom: 26px; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; gap: 10px; }
.mini-stats div { padding: 16px; border-radius: 16px; background: rgba(255,255,255,.09); }
.mini-stats b { display: block; color: white; font-size: 23px; }
.mini-stats span { color: rgba(255,255,255,.65); font-size: 11px; }

/* ---- Hero: dark, car-led layout ---- */
/* Background is tuned to the near-black of assets/car.png.png so the photo
   dissolves into the section with no visible edge; the amber glow lines up
   with the sun flare baked into the top-right of the image. */
.hero {
  min-height: 660px;
  background:
    radial-gradient(44% 42% at 94% -8%, rgba(240, 184, 130, .5), rgba(236, 148, 92, .1) 42%, transparent 72%),
    radial-gradient(66% 74% at 8% 114%, rgba(115, 58, 165, .14), transparent 74%),
    linear-gradient(180deg, #07070c 0%, #08080e 50%, #060609 100%);
  background-color: #07070c;
}
/* quiet the hex texture behind the photoreal car */
.hero::before { opacity: .08; }
.hero .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 40px; }
.hero__eyebrow { margin: 0 0 18px; color: #c77dff; font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.hero__title { margin-bottom: 20px; font-family: "Montserrat", "Inter", Arial, sans-serif; font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -.02em; color: #fff; }
.hero__copy strong { color: #c77dff; font-weight: 800; }
.hero .actions { align-items: center; margin-top: 28px; }
.hero .button--plum { background: linear-gradient(135deg, #7a2fb0, #b45cf0); box-shadow: 0 14px 34px -12px rgba(150, 70, 200, .85); }
.hero .button--plum span { margin-left: 8px; font-size: 18px; }
.hero__textlink { display: inline-flex; align-items: center; color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, .5); padding-bottom: 2px; }
.hero__textlink:hover { border-bottom-color: #fff; }
.hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; max-width: 560px; }
.hero-stat { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: rgba(255, 255, 255, .04); }
.hero-stat__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: #c77dff; }
.hero-stat__icon svg { width: 26px; height: 26px; }
.hero-stat b { display: block; color: #fff; font-size: 17px; font-weight: 800; line-height: 1.15; }
.hero-stat span { color: rgba(255, 255, 255, .6); font-size: 12px; }
/* ==========================================================================
   Hero — full-bleed, car-dominant composition
   The car photo anchors to the top-right of the section, bleeds off the top
   (behind the nav) and the right edge, and sits BEHIND the headline. The copy
   and stat cards layer on top at the left; the opaque benefit strip below
   naturally hides the car's lower edge.
   ========================================================================== */
.hero .hero__grid { position: static; display: block; }

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 560px;
}
.hero__content::before { content: none; }

.hero__art {
  position: absolute;
  inset: 0 0 auto auto;
  width: min(54vw, 980px);
  height: 100%;
  margin: 0;
  z-index: 1;
  pointer-events: none;
}
.hero__art img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  /* contain (not cover) keeps the WHOLE car in frame — front bumper, both
     wheels, the box and its floor reflection — sitting a little further back,
     matching the reference composition instead of a tight crop */
  object-fit: contain;
  object-position: right 42%;
  /* gentle fade on the car's left edge into the copy, soft base into the strip */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 12%, #000 32%),
    linear-gradient(to bottom, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 12%, #000 32%),
    linear-gradient(to bottom, #000 90%, transparent 100%);
          mask-composite: intersect;
}
@media (min-width: 1440px) { .hero__art { width: min(50vw, 1100px); } }
@media (min-width: 1760px) { .hero__art { width: 1160px; } }
@media (max-width: 1180px) and (min-width: 901px) {
  .hero__content { max-width: 430px; }
  .hero__art { width: 64vw; }
  .hero__art img { object-position: right 44%; }
}

/* headline line-by-line reveal */
.hero__title .line { display: block; }

/* ---- Hero (benefit strip removed) ---- */
.hero { grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(64px, 8vw, 104px); }
.hero__strip { min-width: 0; }
.hero__strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(20px, 2.6vw, 32px) max(20px, calc((100% - 1180px) / 2));
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(180deg, #050507, #030304);
}
.hero__strip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z' fill='none' stroke='%23ffffff' stroke-opacity='0.14'/%3E%3C/svg%3E");
  background-size: 40px 70px;
  -webkit-mask: linear-gradient(90deg, #000, transparent 78%);
  mask: linear-gradient(90deg, #000, transparent 78%);
}
.hero__strip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 74, 158, .55) 22%, rgba(199, 125, 255, .3) 60%, transparent);
}
.hero__benefits {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.hero__benefits li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 4px 6px;
  text-align: center;
}
.hero__benefits li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, .1);
}
.hero__b-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #b98cf0;
}
.hero__b-icon svg { width: 27px; height: 27px; }
.hero__b-label {
  font-size: 11px;
  line-height: 1.32;
  letter-spacing: .035em;
  color: rgba(255, 255, 255, .68);
}
.hero__statement { position: relative; top: 52px; }
.hero__statement-rule {
  display: block;
  width: 52px;
  height: 2px;
  margin-bottom: 15px;
  background: linear-gradient(90deg, #8f4a9e, #c77dff);
}
.hero__statement p {
  margin: 0;
  font-size: clamp(22px, 2.9vw, 40px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #fff;
}

/* animation gate — only while JS/GSAP will run the load sequence */
html.hero-anim .hero [data-hero] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.hero-anim .hero [data-hero] { opacity: 1 !important; }
}

@media (max-width: 1024px) {
  .hero__strip { grid-template-columns: 1fr; gap: 26px; }
  .hero__statement { text-align: left; top: 0; }
}
@media (max-width: 720px) {
  .hero__benefits { grid-template-columns: repeat(3, 1fr); gap: 20px 0; }
  .hero__benefits li:nth-child(3)::before,
  .hero__benefits li:nth-child(5)::before { display: none; }
  .hero__benefits li:nth-child(4)::before { left: -1px; }
  .hero__statement p { font-size: clamp(22px, 6vw, 30px); }
}
@media (max-width: 420px) {
  .hero__benefits { grid-template-columns: repeat(2, 1fr); }
  .hero__benefits li + li::before { display: none; }
}

/* mobile: stack the hero as a plain column so nothing forces horizontal overflow */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  .hero {
    display: flex;
    flex-direction: column;
    padding-inline: clamp(16px, 5vw, 28px);
  }
  .hero > *,
  .hero .hero__grid,
  .hero__content,
  .hero__stats,
  .hero-stat,
  .hero__copy,
  .hero__title,
  .hero__art,
  .hero__strip,
  .hero__benefits,
  .hero__statement { min-width: 0; max-width: 100%; }
  .hero .hero__grid { width: 100%; margin: 0; }
  /* undo the desktop full-bleed overlay: stack the car under the copy again */
  .hero__content { max-width: 100%; margin-left: 0; }
  .hero__content::before { display: none; }
  .hero__art { position: static; width: 100%; height: auto; }
  .hero__art img {
    width: 100%; max-width: 100%; height: auto;
    object-fit: contain;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero__strip {
    margin-inline: calc(-1 * clamp(16px, 5vw, 28px));   /* full-bleed bar */
    padding-inline: clamp(16px, 5vw, 28px);
  }
}

.page-hero { margin-top: -78px; padding: 165px 0 88px; }
.page-hero__inner { position: relative; z-index: 1; max-width: 820px; }
.page-hero h1 { font-size: clamp(48px, 6vw, 74px); }
.page-hero p:last-child { max-width: 680px; color: rgba(255,255,255,.76); font-size: 18px; }
.crumb { margin-bottom: 24px; color: rgba(255,255,255,.6); font-size: 13px; font-weight: 700; }
.crumb a { color: white; }

.section { padding: 96px 0; }
.section--soft { background: var(--mist); }
.section--dark { color: white; background: #211526; }

/* Blackish + purple glow treatment (matches the hero) */
.section--glow {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(560px 380px at 84% 16%, rgba(216, 79, 154, .30), transparent 60%),
    radial-gradient(680px 460px at 6% 96%, rgba(143, 74, 158, .24), transparent 62%),
    linear-gradient(160deg, #180d20 0%, #241034 54%, #0b0710 100%);
}
.section--glow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z' fill='%23ffffff' fill-opacity='0.10' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-size: 56px 98px;
}
.section--glow > .wrap { position: relative; z-index: 1; }
.section--glow .card {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .03);
  box-shadow: 0 22px 55px -28px rgba(143, 74, 158, .55);
}
.section--glow .card h3 { color: #f5eef8; }
.section--glow .card p { color: rgba(255, 255, 255, .62); }
.section--glow .card__icon {
  color: #d9b6f0;
  background: rgba(163, 95, 199, .16);
  border: 1px solid rgba(197, 130, 230, .32);
}
.section-head { max-width: 760px; margin-bottom: 48px; }
.eyebrow { margin: 0 0 12px; color: var(--violet); font-size: 12px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.section--dark .eyebrow { color: #e6a7d1; }
.section-title { margin-bottom: 15px; font-size: clamp(36px, 4vw, 55px); letter-spacing: -.025em; }
.section-lede { margin: 0; color: var(--muted); font-size: 17px; }
.section--dark .section-lede { color: rgba(255,255,255,.65); }

.grid-3, .grid-2, .principles { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card { position: relative; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.04); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.card h3 { margin-bottom: 10px; font-size: 22px; }
.card p { margin: 0; color: var(--muted); }
.card__icon { width: 48px; height: 48px; margin-bottom: 25px; display: grid; place-items: center; color: #d9b6f0; font-weight: 900; border-radius: 15px; background: rgba(163,95,199,.16); border: 1px solid rgba(197,130,230,.32); }
.text-link { display: inline-flex; margin-top: 22px; color: var(--plum); font-weight: 800; }
.text-link::after { content: "→"; margin-left: 8px; }

/* =====================================================================
   "Why UV99" — header with bleeding car image, image cards, trust strip
   Namespace: .why99  ·  reuses .section--glow / .section-head / .grid-3 / .card
   ===================================================================== */
.why99__accent { color: #c77dff; }
.why99__head {
  margin-bottom: clamp(32px, 5vw, 52px);
}
.why99__head .section-head { margin-bottom: 0; }

.why99__cards .card {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 0;
  overflow: hidden;
}
.card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.card__num {
  font: 800 46px/1 "Montserrat", "Inter", Arial, sans-serif;
  letter-spacing: -.02em;
  color: #b98cf0;
}
.card__badge {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #d9b6f0;
  background: rgba(163, 95, 199, .16);
  border: 1px solid rgba(197, 130, 230, .32);
}
.card__badge svg { width: 20px; height: 20px; }
.why99__cards .card h3 { margin-bottom: 8px; }
.why99__cards .card p { margin-bottom: 22px; }
.card__media {
  margin: auto -26px 0;     /* push to the card's bottom, bleed to its edges */
}
.card__media img {
  display: block;
  width: 100%;
  height: 188px;
  object-fit: cover;
}

.why99__trust {
  list-style: none;
  margin: clamp(34px, 5vw, 46px) 0 0;
  padding: 30px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.why99__trust li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, .74);
  font-size: 13px;
  font-weight: 600;
}
.why99__trust-icon {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #d9b6f0;
}
.why99__trust-icon svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .why99__cards { grid-template-columns: 1fr; }
  .why99__trust { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
}
@media (max-width: 480px) {
  .why99__trust { grid-template-columns: 1fr; }
}

/* =====================================================================
   Premium treatment — "One promise, three paths"
   Namespace: .section--paths / .path-*  ·  reuses .section / .wrap / .eyebrow / .section-title
   ===================================================================== */
.section--paths {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(620px 420px at 82% 6%, rgba(216, 79, 154, .16), transparent 60%),
    radial-gradient(720px 520px at 2% 100%, rgba(143, 74, 158, .18), transparent 62%),
    var(--mist);
}
.section--paths::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z' fill='none' stroke='%23ffffff' stroke-opacity='0.9'/%3E%3C/svg%3E");
  background-size: 44px 77px;
  -webkit-mask: radial-gradient(120% 120% at 50% 0%, #000, transparent 80%);
  mask: radial-gradient(120% 120% at 50% 0%, #000, transparent 80%);
}
.section--paths > .wrap { position: relative; z-index: 1; }

.path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.path-card {
  --accent: var(--violet);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 42%),
    #111016;
  box-shadow: 0 30px 60px -32px rgba(143, 74, 158, .5);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.path-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 85%, white), transparent);
  opacity: .7;
}
.path-card::after {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 130px;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
}
.path-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, rgba(255, 255, 255, .1));
  box-shadow: 0 42px 82px -30px color-mix(in srgb, var(--accent) 55%, transparent);
}
.path-card__badge {
  align-self: flex-start;
  padding: 6px 11px;
  color: color-mix(in srgb, var(--accent) 78%, white);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.path-card h3 {
  margin: 20px 0 10px;
  font-size: 23px;
  color: #fff;
}
.path-card p {
  margin: 0;
  flex: 1;
  color: rgba(255, 255, 255, .6);
  font-size: 15px;
}
.path-card__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: color-mix(in srgb, var(--accent) 80%, white);
  font-weight: 800;
  font-size: 14px;
}
.path-card__link::after {
  content: "→";
  margin-left: 8px;
  transition: transform .2s ease;
}
.path-card:hover .path-card__link::after { transform: translateX(4px); }

@media (max-width: 1000px) {
  .path-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}
.story-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: rgba(255,255,255,.04); }
.story-strip div { padding: 28px; border-right: 1px solid var(--line); }
.story-strip div:last-child { border: 0; }
.story-strip b { display: block; color: var(--plum); font: 700 34px "Montserrat", sans-serif; }
.story-strip span { color: var(--muted); font-size: 13px; }

.film-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.film-card { --accent: var(--violet); overflow: hidden; padding: 0; }
.film-card::before { content: ""; display: block; height: 7px; background: var(--accent); }
.film-card__body { padding: 30px; }
.badge { display: inline-flex; padding: 6px 10px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; background: color-mix(in srgb, var(--accent) 11%, white); }
.film-card h2 { margin: 18px 0 9px; font-size: 32px; }
.film-option { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.film-option__name { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-weight: 800; }
.metric { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 11px; color: var(--muted); font-size: 12px; }
.metric b { color: var(--ink); }
.meter { grid-column: 1 / -1; height: 6px; border-radius: 9px; background: #ece7ed; overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--value); border-radius: inherit; background: var(--accent); }

/* Product selection experience */
.product-hero { min-height: 680px; background: radial-gradient(circle at 72% 46%, #4b4250 0, #1d1a20 38%, #0c0b0e 74%); }
.product-hero .page-hero__inner { max-width: 620px; }
.product-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: .95fr 1.05fr; gap: 50px; align-items: center; }
.film-sheets { position: relative; min-height: 410px; perspective: 900px; }
.film-sheet { position: absolute; width: 235px; height: 330px; border: 1px solid rgba(255,255,255,.32); border-radius: 8px 34px 8px 34px; box-shadow: 0 35px 55px rgba(0,0,0,.42), inset 0 0 50px rgba(255,255,255,.08); backdrop-filter: blur(3px); transform: rotateY(-17deg) rotateZ(var(--rotate)); background: linear-gradient(145deg, rgba(255,255,255,.22), var(--shade)); }
.film-sheet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.38) 43%, transparent 57%); }
.film-sheet::after { content: attr(data-label); position: absolute; left: 18px; bottom: 15px; color: rgba(255,255,255,.76); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.film-sheet:nth-child(1) { left: 4%; top: 65px; --rotate:-9deg; --shade:rgba(156,112,166,.14); }
.film-sheet:nth-child(2) { left: 31%; top: 24px; --rotate:2deg; --shade:rgba(110,71,119,.32); }
.film-sheet:nth-child(3) { left: 56%; top: 78px; --rotate:10deg; --shade:rgba(32,26,36,.61); }
.film-light { position: absolute; left: 0; right: 0; bottom: 15px; height: 90px; filter: blur(22px); opacity: .65; background: linear-gradient(90deg, transparent, #b766be, #e7c8e9, transparent); }

.selector-shell { margin-top: -42px; position: relative; z-index: 5; }
.series-tabs { padding: 8px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.series-tab { padding: 17px 20px; color: var(--muted); border: 0; border-radius: 14px; background: transparent; font-weight: 800; cursor: pointer; transition: .2s ease; }
.series-tab:hover { color: var(--plum); background: var(--mist); }
.series-tab[aria-selected="true"] { color: white; background: linear-gradient(135deg,var(--plum),var(--violet)); box-shadow: 0 12px 28px rgba(81,36,93,.24); }
.product-list { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.product-card { --product-accent:var(--violet); overflow: hidden; display: grid; grid-template-columns: .92fr 1.08fr; min-height: 450px; padding: 0; }
.product-card[hidden] { display: none; }
.product-card--premium { grid-column: 1 / -1; grid-template-columns: 1.08fr .92fr; border-color: rgba(230,148,24,.38); box-shadow: 0 28px 80px rgba(74,44,14,.15); }
.product-media { position: relative; min-height: 290px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 72% 24%, rgba(255,255,255,.54), transparent 18%), linear-gradient(150deg, #e6e2e8, #aba4af 48%, #5e5961); }
.product-media::before { content: ""; width: 72%; height: 48%; border: 7px solid #2a272c; border-radius: 45% 55% 12% 12%; transform: skewX(-7deg); box-shadow: inset 0 0 0 100px var(--glass,rgba(63,47,68,.12)), 35px 45px 0 -33px #252227; }
.media-slot > img,
.media-slot > video { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; }
.media-slot > video { background: #151218; }
.media-slot:not(.has-media) > img,
.media-slot:not(.has-media) > video { visibility: hidden; }
.media-fallback { position: absolute; inset: auto 18px 18px; z-index: 4; padding: 11px 13px; color: white; text-align: left; border: 1px dashed rgba(255,255,255,.58); border-radius: 10px; background: rgba(14,12,15,.68); backdrop-filter: blur(7px); }
.media-fallback strong { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.media-fallback code { display: block; margin-top: 4px; color: #f4c8e5; font-size: 11px; overflow-wrap: anywhere; }
.media-slot.has-media .media-fallback { display: none; }
.film-sheets > img { border-radius: 24px; }
.film-sheets.has-media .film-light,
.film-sheets.has-media .film-sheet { display: none; }
.product-media--clear { --glass:rgba(177,155,185,.12); }
.product-media--balanced { --glass:rgba(49,37,54,.38); background: linear-gradient(150deg,#c7c3c9,#7a747d 48%,#39363c); }
.product-media--cool { --glass:rgba(75,79,106,.2); background: linear-gradient(140deg,#f0d39e 0 48%,#777895 49%,#353748); }
.product-media--comfort { --glass:rgba(39,36,54,.46); background: linear-gradient(140deg,#e9bd75 0 43%,#6e6677 44%,#2c2931); }
.product-media--premium { --glass:rgba(85,58,92,.18); background: radial-gradient(circle at 78% 20%,#f6c75e,transparent 20%),linear-gradient(145deg,#d9d4dd,#827888 48%,#332d39); }
.product-body { padding: 31px; }
.product-name { margin: 13px 0 7px; font: 700 35px/1 "Montserrat", sans-serif; }
.product-copy { min-height: 52px; color: var(--muted); }
.product-best { margin: 23px 0 0; padding: 14px 16px; color: #4f3e20; font-size: 13px; border-radius: 12px; background: #fff6e5; }
.product-card .metric { margin-top: 9px; }
.product-card .meter i { background: var(--product-accent); }
.media-note { margin: 20px 0 0; color: var(--muted); font-size: 11px; }

/* ---- Tint simulator: before / after comparison ---- */
.simulator {
  --sim-gap: clamp(28px, 4.5vw, 64px);
  display: grid;
  grid-template-columns: .72fr 1.6fr;   /* text left · larger comparison image right */
  gap: var(--sim-gap);
  align-items: center;
}
.sim-controls { order: -1; }            /* text column on the left, preview on the right */

.sim-compare { position: relative; }
.sim-compare__panel {
  position: relative;
  aspect-ratio: 8 / 5;                    /* matches the 1600×1000 source images */
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(143, 74, 158, .55);
  background: #0c0910;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 70px rgba(143, 74, 158, .22);
  isolation: isolate;
  touch-action: pan-y;
}
.sim-compare__base,
.sim-compare__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}
.sim-compare__reveal {
  position: absolute;
  inset: 0;
  /* reveal the treated layer from the divider rightwards */
  clip-path: inset(0 0 0 var(--sim-pos, 50%));
}
.sim-compare__film { opacity: 0; transition: opacity .22s ease; }
.sim-compare__film.is-active { opacity: 1; }

/* corner labels */
.sim-compare__tag {
  position: absolute;
  top: 14px;
  z-index: 4;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  border-radius: 9px;
  background: rgba(10, 8, 12, .62);
  backdrop-filter: blur(4px);
}
.sim-compare__tag--l { left: 14px; }
.sim-compare__tag--r { right: 14px; }

/* divider + drag handle (visual only — the range input drives them) */
.sim-compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--sim-pos, 50%);
  z-index: 5;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 10px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.sim-compare__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: #2a1230;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.sim-compare__handle svg { width: 13px; height: 13px; }

/* the accessible control: a transparent range spanning the whole panel */
.sim-compare__range {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  touch-action: pan-y;
}
.sim-compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; }
.sim-compare__range::-moz-range-thumb { width: 44px; height: 44px; border: 0; background: transparent; }
.sim-compare__range:focus { outline: none; }
.sim-compare__range:focus-visible ~ .sim-compare__divider .sim-compare__handle {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .4), 0 0 0 6px rgba(143, 74, 158, .95);
}

/* missing-asset notice — shown only if the simulator photography is absent */
.sim-compare__missing {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  text-align: center;
  background: repeating-linear-gradient(45deg, #0c0910, #0c0910 12px, #120d17 12px, #120d17 24px);
}
.sim-compare__missing strong { font-size: 14px; color: var(--ink); }
.sim-compare__missing p { margin: 0; max-width: 42ch; font-size: 12px; color: var(--muted); }
.sim-compare__missing code { font-size: 12px; color: #f4c8e5; overflow-wrap: anywhere; }
.sim-compare.is-missing .sim-compare__divider,
.sim-compare.is-missing .sim-compare__range,
.sim-compare.is-missing .sim-compare__tag { display: none; }

/* left-side controls */
.sim-controls h3 { font-size: 30px; }
.sim-buttons { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0; }
/* decorative connector: active film pill → comparison panel on the right (not interactive) */
.sim-buttons::before {
  content: "";
  position: absolute;
  top: 50%;
  left: auto;
  right: calc(-1 * var(--sim-gap));
  width: calc(var(--sim-gap) + 26px);
  height: 1.5px;
  background: linear-gradient(90deg, rgba(143, 74, 158, .3), var(--violet));
  transform: translateY(-50%);
  pointer-events: none;
}
.sim-buttons::after {
  content: "";
  position: absolute;
  top: 50%;
  left: auto;
  right: calc(-1 * var(--sim-gap) - 3px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 10px rgba(143, 74, 158, .85);
  transform: translateY(-50%);
  pointer-events: none;
}
.sim-button {
  min-width: 52px;
  min-height: 44px;
  padding: 12px 18px;
  color: var(--plum);
  font-weight: 800;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.sim-button:hover { transform: translateY(-1px); }
.sim-button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.sim-button[aria-pressed="true"] {
  color: #fff;
  border-color: var(--violet);
  background: var(--violet);
  box-shadow: 0 10px 24px rgba(143, 74, 158, .35);
}
.sim-result { padding: 20px; border-radius: 16px; background: var(--mist); }
.sim-result b { display: block; color: var(--plum); font: 700 26px "Montserrat", sans-serif; }
.sim-result span { color: var(--muted); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .sim-compare__film { transition: none; }
}
.media-drop { position: relative; min-height: 300px; display: grid; place-items: center; text-align: center; overflow: hidden; border: 2px dashed rgba(143,74,158,.28); border-radius: 24px; background: linear-gradient(135deg,#f8f3f9,#eee7f0); }
.media-drop strong { display: block; color: var(--plum); font-size: 18px; }
.media-drop span { display: block; max-width: 390px; margin-top: 8px; color: var(--muted); font-size: 13px; }
.media-drop .media-fallback { inset: 50% auto auto 50%; width: calc(100% - 44px); max-width: 430px; color: var(--ink); text-align: center; transform: translate(-50%,-50%); border-color: rgba(143,74,158,.4); background: rgba(255,255,255,.82); }
.media-drop .media-fallback code { color: var(--plum); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
table { width: 100%; min-width: 760px; border-collapse: collapse; }
th, td { padding: 18px 20px; text-align: left; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: #faf7fb; }
tbody tr:last-child td { border: 0; }
td:first-child { color: var(--plum); font-weight: 800; }
.pick-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.pick { padding: 25px; border-radius: 20px; background: #2b1b31; }
.pick span { color: #dca9d2; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pick h3 { margin: 9px 0; }
.pick p { margin: 0; color: rgba(255,255,255,.62); }

.warranty-seal { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 65px; }
.seal { aspect-ratio: 1; max-width: 390px; display: grid; place-items: center; text-align: center; border: 2px solid #c993d2; border-radius: 50%; box-shadow: inset 0 0 0 14px #f5eaf7, inset 0 0 0 16px #c993d2; background: white; }
.seal strong { display: block; color: var(--plum); font: 700 92px/.75 "Montserrat", sans-serif; }
.seal span { display: block; margin-top: 16px; color: var(--violet); font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.check-list { list-style: none; padding: 0; margin: 26px 0 0; }
.check-list li { position: relative; padding: 13px 0 13px 34px; border-bottom: 1px solid var(--line); }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 13px; width: 22px; height: 22px; display: grid; place-items: center; color: white; font-size: 12px; border-radius: 50%; background: var(--violet); }
.timeline { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.timeline article { counter-increment: step; padding: 25px; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; }
.timeline article::before { content: "0" counter(step); display: block; margin-bottom: 28px; color: #e6a7d1; font-weight: 800; }
.timeline p { color: rgba(255,255,255,.62); }

.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; align-items: start; }
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__button { width: 100%; padding: 23px 42px 23px 0; position: relative; color: var(--ink); text-align: left; font-weight: 800; border: 0; background: transparent; cursor: pointer; }
.accordion__button::after { content: "+"; position: absolute; right: 4px; top: 18px; color: var(--violet); font-size: 24px; }
.accordion__button[aria-expanded="true"]::after { content: "−"; }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.accordion__button[aria-expanded="true"] + .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { margin: 0; padding: 0 42px 23px 0; color: var(--muted); }
.accordion__panel a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.faq-groups { display: grid; gap: 44px; }
.faq-group { scroll-margin-top: 96px; }
.faq-group__title { display: flex; align-items: baseline; gap: 12px; margin: 0 0 4px; font-size: 22px; letter-spacing: -.01em; transition: color .2s ease; }
.faq-group__index { color: var(--violet); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.faq-group .accordion { transition: border-color .2s ease; }
.faq-group.is-active .faq-group__title { color: #d9c2f5; }
.faq-group.is-active > .accordion { border-top-color: var(--violet); }

/* Flat single-column FAQ — no group headings, one continuous run of one-line rows */
.section-head--center { margin-inline: auto; text-align: center; }
.faq-groups--flat { gap: 0; border-top: 1px solid var(--line); }
.faq-groups--flat .accordion { border-top: 0; }

.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; }
.contact-cards { display: grid; gap: 12px; }
.contact-card { padding: 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; }
.contact-card span { display: block; color: rgba(255,255,255,.54); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.contact-card b { display: block; margin-top: 3px; }
.form { padding: 32px; color: var(--ink); border-radius: var(--radius); background: white; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 17px; }
.field--full { grid-column: 1/-1; }
.field label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 14px; border: 1px solid #d8d1db; border-radius: 12px; background: white; outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(143,74,158,.12); }
.field textarea { min-height: 110px; resize: vertical; }
.form-note { color: var(--muted); font-size: 11px; }
.form-status { min-height: 1.5em; color: var(--plum); font-weight: 700; }

.manifesto {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 460px;
  padding: clamp(36px, 6vw, 76px);
  border-left: 5px solid var(--pink);
  border-radius: var(--radius);
  background-color: #000;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06);
}
/* crisp artwork layer — sits above the solid black fill, below the text */
.manifesto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #000 url("/assets/images/sections/layers.png") no-repeat 60% 50%;
  background-size: cover;
  /* give the render some punch so the panes read sharp, not washed out */
  filter: contrast(1.09) saturate(1.16) brightness(1.06);
}
/* readability scrim — dense behind the quote, clears away to the right
   so the layered-glass artwork stays fully visible */
.manifesto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    #050409 0%,
    rgba(5,4,10,.80) 24%,
    rgba(5,4,10,.40) 46%,
    rgba(5,4,10,.10) 68%,
    rgba(5,4,10,0) 100%);
}
.manifesto blockquote {
  position: relative;
  margin: 0;
  max-width: 62%;
  color: #fff;
  font: 700 clamp(30px,4vw,49px)/1.13 "Montserrat", sans-serif;
  text-wrap: balance;
}
.manifesto p { position: relative; margin: 22px 0 0; max-width: 52ch; color: rgba(255,255,255,.66); }
@media (max-width: 720px) {
  /* phone: stack the quote over the artwork instead of cropping a thin
     slice of it — the layered-glass render sits full-width below the text */
  .manifesto {
    min-height: 0;
    padding-bottom: clamp(210px, 56vw, 300px);
  }
  .manifesto::before {
    background-position: 50% 100%;
    background-size: 132% auto;
  }
  .manifesto::after {
    background: linear-gradient(180deg,
      #050409 0%,
      rgba(5,4,10,.9) 34%,
      rgba(5,4,10,.72) 62%,
      rgba(5,4,10,.3) 82%,
      rgba(5,4,10,0) 100%);
  }
  .manifesto blockquote,
  .manifesto p { max-width: none; }
}
.principles { grid-template-columns: repeat(2, 1fr); }
.principle { padding: 30px 0; border-top: 1px solid var(--line); }
.principle b { display: block; margin-bottom: 10px; color: var(--violet); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; }
.principle h3 { font-size: 25px; }
.principle p { color: var(--muted); }
/* =====================================================================
   About — "A layered approach" film-construction stack
   Namespace: .stack-section / .stack / .stack-layer
   Rides the site-wide [data-reveal] IntersectionObserver (adds .is-visible).
   The li carries the entrance (translate/fade + per-layer stagger via --i);
   the inner element carries hover, so the two transforms never collide.
   Resting state = final state, so nothing is stuck if JS/observer fail.
   ===================================================================== */
.stack-section { position: relative; overflow: hidden; }

/* ambient depth glow drifting behind the stack */
.stack-section::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -12%;
  width: 46vw;
  max-width: 620px;
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(216,79,154,.22), rgba(143,74,158,.10) 45%, transparent 70%);
  filter: blur(24px);
  pointer-events: none;
  animation: stack-float 15s ease-in-out infinite;
}
@keyframes stack-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-26px, 30px, 0) scale(1.09); }
}

.stack-grid { position: relative; z-index: 1; }

/* ---- headline: gradient ink + line-by-line rise ---- */
.stack-title { display: block; }
.stack-line {
  display: block;
  background: linear-gradient(92deg, #ffffff 0%, #f2d9ee 55%, #c6a4f2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stack-intro[data-reveal] .stack-line {
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.stack-intro[data-reveal].is-visible .stack-line { opacity: 1; transform: none; }
.stack-intro[data-reveal].is-visible .stack-line:nth-child(1) { transition-delay: .05s; }
.stack-intro[data-reveal].is-visible .stack-line:nth-child(2) { transition-delay: .14s; }
.stack-intro[data-reveal].is-visible .stack-line:nth-child(3) { transition-delay: .23s; }

/* ---- the stack ---- */
.stack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.stack-layer { position: relative; }
.stack-layer:nth-child(2) { margin-left: 5%; }
.stack-layer:nth-child(3) { margin-left: 10%; }
.stack-layer:nth-child(4) { margin-left: 15%; }

.stack-layer__inner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 21px 26px 21px 30px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(100deg, rgba(143,74,158,.24), rgba(216,79,154,.05) 58%, rgba(255,255,255,.02));
  box-shadow: 0 18px 40px -26px rgba(0,0,0,.9);
  backdrop-filter: blur(6px);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), border-color .35s ease, box-shadow .45s ease, background .45s ease;
}

/* glowing left accent bar — drawn top→bottom on reveal */
.stack-layer__inner::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--violet), var(--pink));
  box-shadow: 0 0 18px rgba(216,79,154,.55);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .6s cubic-bezier(.22,.61,.36,1), width .3s ease, box-shadow .3s ease;
}

/* one-time diagonal light sweep across the card on reveal */
.stack-layer__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.16) 48%, transparent 64%);
  transform: translateX(-130%);
  pointer-events: none;
}

.stack-layer__num {
  flex: none;
  width: 2.6ch;
  font: 800 13px/1 "Montserrat", "Inter", sans-serif;
  letter-spacing: .08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.42);
  transition: color .35s ease, -webkit-text-stroke-color .35s ease;
}
.stack-layer__body b { display: block; margin-bottom: 3px; font-size: 15.5px; letter-spacing: -.01em; }
.stack-layer__body span { color: var(--muted); font-size: 13px; }

/* ---- entrance: li slides in from the right, staggered by --i ---- */
.stack[data-reveal] .stack-layer {
  opacity: 0;
  transform: translateX(46px);
  transition: opacity .55s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.stack[data-reveal].is-visible .stack-layer {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * .12s);
}
.stack[data-reveal].is-visible .stack-layer__inner::before {
  transform: scaleY(1);
  transition-delay: calc(var(--i) * .12s + .15s);
}
.stack[data-reveal].is-visible .stack-layer__inner::after {
  animation: stack-sweep 1.1s ease-out both;
  animation-delay: calc(var(--i) * .12s + .3s);
}
@keyframes stack-sweep {
  to { transform: translateX(130%); }
}

/* ---- hover: lift toward alignment, intensify the glow ---- */
@media (hover: hover) {
  .stack-layer__inner:hover {
    transform: translateX(-8px);
    border-color: rgba(216,79,154,.5);
    background: linear-gradient(100deg, rgba(143,74,158,.36), rgba(216,79,154,.11) 58%, rgba(255,255,255,.05));
    box-shadow: 0 28px 55px -22px rgba(216,79,154,.45);
  }
  .stack-layer__inner:hover::before { width: 5px; box-shadow: 0 0 26px rgba(216,79,154,.8); }
  .stack-layer__inner:hover .stack-layer__num { color: #fff; -webkit-text-stroke-color: transparent; }
}

@media (max-width: 760px) {
  .stack-layer:nth-child(2),
  .stack-layer:nth-child(3),
  .stack-layer:nth-child(4) { margin-left: 0; }
  .stack-layer__inner { padding: 18px 20px 18px 24px; }
  .stack[data-reveal] .stack-layer { transform: translateX(28px); }
}

@media (prefers-reduced-motion: reduce) {
  .stack-section::before { animation: none; }
  .stack-intro[data-reveal] .stack-line,
  .stack[data-reveal] .stack-layer { opacity: 1; transform: none; }
  .stack-layer__inner::before { transform: scaleY(1); }
  .stack-layer__inner::after { display: none; }
}

.dark-cta { position: relative; overflow: hidden; padding: 70px 0; color: white; background: linear-gradient(135deg, #28152f, #6d2d77); }
.dark-cta__in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.dark-cta h2 { margin: 0 0 8px; font-size: 42px; }
.dark-cta p { margin: 0; color: rgba(255,255,255,.68); }

/* ---------- site footer — reference layout: brand + contact block on the
   left, three link columns on the right, legal bar underneath ---------- */
.site-footer { position: relative; overflow: hidden; padding: 72px 0 28px; color: rgba(255,255,255,.55); font-size: 14px; }
.footer-cols { display: grid; grid-template-columns: 1.7fr .8fr .8fr .8fr; gap: 48px; }

/* top divider — faint static rule + a purple light that sweeps across it
   when the footer scrolls into view. Rides the site-wide [data-reveal]
   observer (adds .is-visible); the reveal here is a hook only, the block
   itself never fades. */
.site-footer[data-reveal] { opacity: 1; transform: none; transition: none; }
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09) 12%, rgba(255,255,255,.09) 88%, transparent);
}
.site-footer::after {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 38%;
  height: 3px;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--violet), #b45cf0, transparent);
  box-shadow: 0 0 14px 2px rgba(143, 74, 158, .55);
}
.site-footer[data-reveal].is-visible::after {
  animation: footer-line-sweep 1.9s cubic-bezier(.45, .05, .25, 1) .15s forwards;
}
@keyframes footer-line-sweep {
  0%   { opacity: 0; transform: translateX(-45%); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(200%); }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer::after { display: none; }
}

.footer-brand .brand { display: inline-flex; }
.footer-brand .brand__logo { height: 30px; margin-left: 0; filter: brightness(0) invert(1); }
.footer-about { margin: 22px 0 0; max-width: 330px; line-height: 1.7; color: rgba(255,255,255,.5); }

.footer-contact { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 8px; }
.footer-contact li { color: rgba(255,255,255,.62); }
.footer-contact a { color: rgba(255,255,255,.62); text-decoration: none; transition: color .2s ease; }
.footer-contact a:hover { color: #fff; }

.footer-social-label { margin: 30px 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.footer-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.footer-social a { display: grid; place-items: center; width: 36px; height: 36px; color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.footer-social a:hover { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.footer-social svg { width: 16px; height: 16px; }

.footer-nav h3 { margin: 0 0 20px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.footer-nav a { color: rgba(255,255,255,.7); text-decoration: none; transition: color .2s ease; }
.footer-nav a:hover { color: #fff; }

.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 56px; padding-top: 24px; font-size: 12px; color: rgba(255,255,255,.4); border-top: 1px solid rgba(255,255,255,.08); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 26px; }
.footer-legal a { color: rgba(255,255,255,.5); text-decoration: none; transition: color .2s ease; }
.footer-legal a:hover { color: var(--pink); }

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ===== About UV99 ===== */
.about-uv99 {
  --au-bleed: min(5vw, 48px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 9vw, 108px) 0;
  color: #fff;
  background:
    radial-gradient(900px 520px at 4% 100%, rgba(143, 74, 158, .13), transparent 60%),
    radial-gradient(760px 420px at 100% 0%, rgba(216, 79, 154, .06), transparent 58%),
    #08070c;
}

/* ---- cinematic car background: photo layer + overlay + vignette ---- */
.about-uv99__bg {
  position: absolute;
  inset: -8% -3%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}
.about-uv99__bg-img {
  position: absolute;
  inset: 0;
  background-color: #08070c;                 /* fallback if the image is missing */
  background-image: url("/assets/images/backgrounds/about-bg-car.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.08);
  transform-origin: 50% 58%;
  will-change: transform, opacity, filter;
}
.about-uv99::after {                          /* strong-but-elegant overlay + edge vignette */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(7, 5, 12, .94) 0%,
      rgba(7, 5, 12, .8) 26%,
      rgba(7, 5, 12, .46) 55%,
      rgba(7, 5, 12, .52) 80%,
      rgba(7, 5, 12, .66) 100%),
    linear-gradient(0deg,
      rgba(6, 4, 10, .88) 0%,
      rgba(6, 4, 10, .3) 22%,
      rgba(6, 4, 10, .12) 50%,
      rgba(6, 4, 10, .42) 84%,
      rgba(6, 4, 10, .72) 100%),
    radial-gradient(125% 118% at 50% 42%, transparent 38%, rgba(3, 2, 6, .5) 72%, rgba(1, 1, 3, .92) 100%);
}
.about-uv99__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(32px, 4vw, 64px);
}
/* left column: text stacks, then the figure grows to fill the remaining
   height so its bottom edge lines up with the feature-card column */
.about-uv99__intro {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.about-uv99__eyebrow {
  margin: 0 0 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  background: linear-gradient(92deg, #a25de0, #e678c4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-uv99__title {
  margin: 0 0 22px;
  max-width: 14em;
  font-family: "Montserrat", "Inter", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #f8f6fa;
}
.about-uv99__lede {
  margin: 0;
  max-width: 54ch;
  font-size: 15.5px;
  line-height: 1.72;
  color: rgba(255, 255, 255, .58);
}
.about-uv99__lede strong { color: #cf94ec; font-weight: 700; }
.about-uv99__figure {
  flex: 1 1 auto;
  min-height: clamp(300px, 30vw, 460px);
  margin: clamp(28px, 3.5vw, 42px) 0 0;
  width: 86%;
  transform: none;
  border-radius: 16px;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.about-uv99__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.about-uv99__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.about-uv99__card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  background: rgba(255, 255, 255, .018);
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), border-color .4s ease, background-color .4s ease, box-shadow .4s ease;
}
/* left accent bar — on the featured card and on whichever card is hovered */
.about-uv99__card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #b775da, #7a44b0);
  opacity: 0;
  transition: opacity .4s ease;
}
/* pointer-tracked spotlight — JS feeds --mx / --my */
.about-uv99__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(200, 140, 235, .16), transparent 60%);
  transition: opacity .45s ease;
}
.about-uv99__card:hover::after { opacity: 1; }
.about-uv99__card > * { position: relative; z-index: 1; }
.about-uv99__card.is-highlight,
.about-uv99__card:hover {
  border-color: rgba(184, 122, 224, .72);
  background: linear-gradient(90deg, rgba(163, 95, 199, .13), rgba(163, 95, 199, .02) 62%);
  box-shadow: 0 0 0 1px rgba(163, 95, 199, .3), -6px 0 40px -10px rgba(143, 74, 158, .5), 0 22px 55px -24px rgba(143, 74, 158, .4);
}
.about-uv99__card.is-highlight::before,
.about-uv99__card:hover::before { opacity: 1; }
.about-uv99__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(163, 95, 199, .34), -6px 0 46px -10px rgba(143, 74, 158, .58), 0 28px 62px -24px rgba(143, 74, 158, .48);
}
/* while the list is hovered, the default featured card steps back */
.about-uv99__cards:hover .about-uv99__card.is-highlight:not(:hover) {
  border-color: rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .018);
  box-shadow: none;
}
.about-uv99__cards:hover .about-uv99__card.is-highlight:not(:hover)::before { opacity: 0; }
.about-uv99__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px;
  background: rgba(255, 255, 255, .03);
  color: #c79ae8;
  transition: color .4s ease, border-color .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease;
}
.about-uv99__icon svg { width: 22px; height: 22px; }
.about-uv99__card:hover .about-uv99__icon,
.about-uv99__card.is-highlight .about-uv99__icon {
  color: #e2c6f7;
  border-color: rgba(197, 130, 230, .4);
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 0 0 1px rgba(197, 130, 230, .18), 0 8px 22px -10px rgba(163, 95, 199, .6);
}
.about-uv99__card-body h3 {
  margin: 2px 0 6px;
  font-family: Inter, Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #f2eef7;
}
.about-uv99__card-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.62;
  color: rgba(255, 255, 255, .48);
}

/* Cinematic reveal — armed by JS only when motion is allowed; default = fully visible */

/* the car: enters from the background (blurred, dark, distant), drives forward and stops */
.about-uv99.is-armed .about-uv99__bg-img {
  opacity: 0;
  transform: scale(1.015);
  filter: blur(8px) saturate(.7) brightness(.5);
  transition:
    opacity 1.15s ease,
    transform 2s cubic-bezier(.16, .82, .29, 1),
    filter 1.5s ease;
}
.about-uv99.is-armed.is-inview .about-uv99__bg-img {
  opacity: 1;
  transform: scale(1.08);
  filter: blur(0) saturate(1) brightness(1);
}

.about-uv99.is-armed .about-uv99__eyebrow,
.about-uv99.is-armed .about-uv99__title,
.about-uv99.is-armed .about-uv99__lede,
.about-uv99.is-armed .about-uv99__card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .85s cubic-bezier(.22, .61, .36, 1), transform .85s cubic-bezier(.22, .61, .36, 1);
}
.about-uv99.is-armed .about-uv99__figure {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: opacity .9s ease, clip-path 1.1s cubic-bezier(.22, .61, .36, 1);
}
.about-uv99.is-armed .about-uv99__figure img {
  transform: scale(1.08);
  transition: transform 1.5s cubic-bezier(.22, .61, .36, 1);
}
/* content holds until the car has settled, then reveals over it */
.about-uv99.is-armed .about-uv99__eyebrow { transition-delay: .62s; }
.about-uv99.is-armed .about-uv99__title { transition-delay: .72s; }
.about-uv99.is-armed .about-uv99__lede { transition-delay: .82s; }
.about-uv99.is-armed .about-uv99__figure { transition-delay: .9s; }
.about-uv99.is-armed .about-uv99__card:nth-child(1) { transition-delay: .98s; }
.about-uv99.is-armed .about-uv99__card:nth-child(2) { transition-delay: 1.06s; }
.about-uv99.is-armed .about-uv99__card:nth-child(3) { transition-delay: 1.14s; }
.about-uv99.is-armed .about-uv99__card:nth-child(4) { transition-delay: 1.22s; }
.about-uv99.is-armed .about-uv99__card:nth-child(5) { transition-delay: 1.3s; }
.about-uv99.is-armed.is-inview .about-uv99__eyebrow,
.about-uv99.is-armed.is-inview .about-uv99__title,
.about-uv99.is-armed.is-inview .about-uv99__lede,
.about-uv99.is-armed.is-inview .about-uv99__card {
  opacity: 1;
  transform: none;
}
.about-uv99.is-armed.is-inview .about-uv99__figure {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}
.about-uv99.is-armed.is-inview .about-uv99__figure img { transform: scale(1); }

@media (max-width: 980px) {
  .about-uv99 { --au-bleed: 0px; }
  .about-uv99__grid { grid-template-columns: 1fr; gap: 40px; }
  .about-uv99__title { max-width: 22ch; }
  .about-uv99__lede { max-width: 62ch; }
  .about-uv99__figure { flex: none; min-height: 0; margin-left: 0; width: 100%; transform: none; }
  .about-uv99__figure img { height: auto; aspect-ratio: 16 / 10; }
  /* single column — darken more evenly so text/cards stay readable over the car */
  .about-uv99::after {
    background:
      linear-gradient(0deg,
        rgba(6, 4, 10, .9) 0%, rgba(6, 4, 10, .55) 26%,
        rgba(6, 4, 10, .4) 52%, rgba(6, 4, 10, .6) 82%, rgba(6, 4, 10, .82) 100%),
      radial-gradient(130% 120% at 50% 40%, transparent 34%, rgba(2, 1, 4, .8) 100%);
  }
  .about-uv99__bg-img { background-position: 62% center; }
}
@media (max-width: 620px) {
  .about-uv99 { padding: 62px 0; }
  .about-uv99__card { padding: 17px 18px; gap: 13px; border-radius: 12px; }
  .about-uv99__icon { width: 38px; height: 38px; }
  .about-uv99__icon svg { width: 20px; height: 20px; }
  .about-uv99__card::before { top: 10px; bottom: 10px; }
  .about-uv99__bg { inset: -5% -4%; }
}

/* tablet: tighten the simulator's two-column layout before it stacks */
@media (max-width: 1080px) and (min-width: 901px) {
  .simulator { grid-template-columns: .8fr 1.4fr; --sim-gap: clamp(24px, 3vw, 40px); }
  .sim-controls .section-title { font-size: clamp(28px, 3.6vw, 40px); }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links { position: fixed; inset: 78px 0 auto; padding: 18px 20px 28px; display: none; align-items: stretch; flex-direction: column; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 13px 16px; }
  .nav-links .nav-cta { margin: 5px 0 0; text-align: center; }
  .site-header:not(.is-stuck) .nav-links a { color: #5d5662; }
  .site-header:not(.is-stuck) .nav-links a:hover,
  .site-header:not(.is-stuck) .nav-links a[aria-current="page"] { color: var(--plum); background: rgba(143,74,158,.09); }
  .site-header:not(.is-stuck) .nav-links .nav-cta { color: white; background: var(--plum); }
  .hero__grid, .warranty-seal, .faq-layout, .contact-grid { grid-template-columns: 1fr; }
  .hero .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hero__content { max-width: none; }
  .hero__art { order: -1; min-width: 0; width: 100%; }
  .hero__art img {
    margin-inline: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
      linear-gradient(to bottom, #000 60%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
      linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-composite: intersect;
  }
  .hero__panel { max-width: 600px; }
  .grid-3, .film-grid { grid-template-columns: 1fr 1fr; }
  .film-card:last-child { grid-column: 1/-1; }
  .story-strip, .timeline { grid-template-columns: 1fr 1fr; }
  .story-strip div:nth-child(2) { border-right: 0; }
  .story-strip div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .pick-grid { grid-template-columns: 1fr; }
  .seal { margin-inline: auto; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .footer-cols > .footer-brand { grid-column: 1 / -1; }
  .product-hero__grid, .simulator { grid-template-columns: 1fr; }
  .simulator { --sim-gap: clamp(24px, 5vw, 40px); }
  .sim-controls .section-title { font-size: clamp(30px, 5vw, 40px); }
  .sim-buttons::before, .sim-buttons::after { display: none; }   /* connector only reads in two-column layout */
  .product-hero .page-hero__inner { max-width: 760px; }
  .film-sheets { min-height: 350px; max-width: 620px; }
  .film-sheet { width: 210px; height: 290px; }
  .product-list { grid-template-columns: 1fr; }
  .product-card, .product-card--premium { grid-column: auto; grid-template-columns: .8fr 1.2fr; }
}

@media (max-width: 620px) {
  :root { --wrap: min(100% - 28px, 1180px); }
  .site-header { height: 70px; }
  .nav-links { inset-block-start: 70px; }
  .brand__name { display: none; }
  .brand__logo { height: 42px; margin-left: -8px; }
  .hero { min-height: auto; margin-top: -70px; padding: 120px clamp(16px, 5vw, 24px) 0; }
  .page-hero { margin-top: -70px; padding: 135px 0 65px; }
  h1 { font-size: 44px; }
  .hero__grid { gap: 44px; }
  .spectrum { height: 220px; }
  .mini-stats, .hero__stats { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(29px, 8.2vw, 40px); overflow-wrap: break-word; }
  .hero__title .line { display: inline; }   /* let the headline reflow instead of clipping a fixed line */
  .hero__title .line + .line::before { content: " "; }
  .section { padding: 70px 0; }
  .grid-2, .grid-3, .film-grid, .principles, .form-grid { grid-template-columns: 1fr; }
  .film-card:last-child { grid-column: auto; }
  .story-strip, .timeline { grid-template-columns: 1fr; }
  .story-strip div { border-right: 0; border-bottom: 1px solid var(--line); }
  .dark-cta__in { align-items: flex-start; flex-direction: column; }
  .footer-cols { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .form { padding: 22px; }
  .manifesto { padding: 30px 30px clamp(210px, 56vw, 300px); }
  .product-hero { padding-bottom: 90px; }
  .film-sheets { min-height: 280px; }
  .film-sheet { width: 155px; height: 225px; }
  .film-sheet:nth-child(1) { left: 1%; }.film-sheet:nth-child(2) { left: 28%; }.film-sheet:nth-child(3) { left: 53%; }
  .selector-shell { margin-top: -34px; }
  .series-tabs { grid-template-columns: 1fr; }
  .product-card, .product-card--premium { grid-template-columns: 1fr; }
  .product-media { min-height: 260px; }
  /* mobile: show the whole film render instead of cropping it */
  .product-card:not(.product-card--premium) .product-media { min-height: 420px; background: #0b0910; }
  .product-card:not(.product-card--premium) .media-slot > img { object-fit: contain; padding: 16px; }
  .product-card:not(.product-card--premium):hover .media-slot > img { transform: none; }
  .sim-compare__panel { border-radius: 20px; aspect-ratio: 4 / 3; }
  .sim-compare__tag { font-size: 10px; padding: 6px 10px; }
  .sim-result b { font-size: 22px; }
}

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

/* =====================================================================
   Warranty — "What is covered"
   Premium protection emblem + coverage rows + trust bar.
   Namespace: .wcov  ·  reuses .section / .wrap / .eyebrow / .section-title
   ===================================================================== */
.wcov {
  /* Palette keyed to the UV99 +1 film sheet — a vivid electric violet.
     Stored as "r, g, b" triplets so they can drive rgba() at any alpha. */
  --v-core: 124, 58, 237;   /* #7c3aed — the film-sheet purple            */
  --v-bri:  159, 96, 255;   /* #9f60ff — lifted highlight                 */
  --v-lite: 199, 168, 255;  /* #c7a8ff — pale violet: text, hairline rings */
  --v-glint: 232, 218, 255; /* #e8daff — near-white violet spark          */

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(76px, 9vw, 122px) 0;
  color: #fff;
  background:
    radial-gradient(720px 520px at 10% 2%, rgba(var(--v-core), .26), transparent 60%),
    radial-gradient(640px 560px at 94% 98%, rgba(var(--v-bri), .14), transparent 62%),
    linear-gradient(180deg, #050505 0%, #0a0714 48%, #050505 100%);
}
/* fine hex / carbon-fibre weave, faded toward the edges */
.wcov::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z' fill='none' stroke='%23ffffff' stroke-opacity='0.06'/%3E%3C/svg%3E");
  background-size: 44px 77px;
  -webkit-mask-image: radial-gradient(125% 120% at 50% 0%, #000, transparent 78%);
  mask-image: radial-gradient(125% 120% at 50% 0%, #000, transparent 78%);
}
.wcov__ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.wcov__trail { position: absolute; height: 1px; opacity: .5; filter: blur(.4px); }
.wcov__trail--1 { top: 20%; left: -8%; width: 62%; background: linear-gradient(90deg, transparent, rgba(var(--v-bri), .65), transparent); }
.wcov__trail--2 { bottom: 24%; right: -8%; width: 52%; background: linear-gradient(90deg, transparent, rgba(var(--v-core), .6), transparent); }

.wcov__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.35fr);
  align-items: center;
  gap: clamp(36px, 6vw, 88px);
}
.wcov__grid > * { min-width: 0; }

/* ---- protection emblem ---- */
.wcov__badge-wrap { display: flex; flex-direction: column; align-items: center; gap: 26px; max-width: 100%; }
.wcov__badge { position: relative; width: min(400px, 82vw); aspect-ratio: 1; display: grid; place-items: center; }
.wcov__glow {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--v-core), .55), rgba(var(--v-core), .1) 55%, transparent 72%);
  filter: blur(26px);
  animation: wcovPulse 5.5s ease-in-out infinite;
}
.wcov__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(var(--v-lite), .28); }
.wcov__ring--outer { inset: 2%; box-shadow: 0 0 44px -8px rgba(var(--v-core), .5), inset 0 0 32px -12px rgba(var(--v-core), .55); }
.wcov__ring--mid { inset: 11%; border-color: rgba(var(--v-lite), .42); }
/* static light arc on the ring — deliberately NOT animated */
.wcov__ring--spin {
  inset: 6%;
  border: 0;
  background: conic-gradient(from 128deg, transparent 0 74%, rgba(var(--v-glint), .95) 86%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
.wcov__badge-face {
  position: relative;
  width: 66%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid rgba(var(--v-lite), .34);
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, .18), transparent 52%),
    linear-gradient(160deg, #1a1033 0%, #0b0616 70%);
  box-shadow: inset 0 2px 26px rgba(var(--v-bri), .18), 0 36px 72px -26px rgba(0, 0, 0, .85);
}
.wcov__shield { width: 34px; height: 34px; margin-bottom: 2px; color: #c7a8ff; }
.wcov__num {
  font: 700 clamp(70px, 12vw, 104px)/.8 "Montserrat", "Inter", Arial, sans-serif;
  background: linear-gradient(180deg, #fff 0%, #d9c6ff 55%, #9f60ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wcov__year { font-size: clamp(11px, 1.4vw, 13px); font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #c7a8ff; }
.wcov__stars { display: flex; gap: 5px; margin-top: 5px; color: #7c3aed; }
.wcov__stars svg { width: 12px; height: 12px; }
.wcov__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; max-width: 100%; list-style: none; }
.wcov__chips li {
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
}

/* ---- coverage copy ---- */
.wcov__content .eyebrow { color: #a970ff; }
.wcov__content .section-title { margin-bottom: 16px; color: #fff; }
.wcov__accent {
  background: linear-gradient(92deg, #8b5cf6, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wcov__content .section-lede { max-width: 52ch; color: rgba(255, 255, 255, .6); }

/* ---- coverage rows ---- */
.wcov__rows { margin: 30px 0 0; padding: 0; list-style: none; }
.wcov__row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 20px 16px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  transition: background-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.wcov__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .09); }
.wcov__icon {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  color: #b99cff;
  border: 1px solid rgba(var(--v-lite), .32);
  border-radius: 13px;
  background: rgba(var(--v-core), .12);
  transition: transform .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.wcov__icon svg { width: 24px; height: 24px; }
.wcov__row-text { min-width: 0; }
.wcov__row-title { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: #f4eef8; }
.wcov__row-desc { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .5); }
.wcov__row:hover {
  background: linear-gradient(90deg, rgba(var(--v-core), .14), rgba(var(--v-core), .02) 70%);
  box-shadow: inset 0 0 0 1px rgba(var(--v-lite), .28), -8px 0 40px -18px rgba(var(--v-core), .7);
  transform: translateX(4px);
}
.wcov__row:hover .wcov__icon {
  transform: translateX(3px) scale(1.06);
  color: #ecd6ff;
  border-color: rgba(var(--v-glint), .55);
  box-shadow: 0 0 22px -4px rgba(var(--v-core), .7);
}

/* ---- trust bar ---- */
.wcov__trust {
  margin: clamp(46px, 6vw, 74px) 0 0;
  padding: 10px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
  backdrop-filter: blur(8px);
}
.wcov__trust li { display: flex; align-items: center; gap: 14px; padding: 20px 22px; }
.wcov__trust li + li { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .08); }
.wcov__trust-icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  color: #b99cff;
  border: 1px solid rgba(var(--v-lite), .32);
  border-radius: 11px;
  background: rgba(var(--v-core), .12);
}
.wcov__trust-icon svg { width: 22px; height: 22px; }
.wcov__trust-text b { display: block; font-size: 14px; font-weight: 800; letter-spacing: .02em; color: #f2eef7; }
.wcov__trust-text span { display: block; margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .5); }

/* ---- scroll reveal (rides the site-wide [data-reveal] observer in site.js) ---- */
.wcov__badge-wrap[data-reveal] { transform: scale(.92); }
.wcov__badge-wrap[data-reveal].is-visible { transform: none; transition: opacity .8s ease, transform .9s cubic-bezier(.22, .61, .36, 1); }
.wcov__row[data-reveal] { transform: translateY(16px); }
.wcov__row[data-reveal]:nth-child(1) { transition-delay: .04s; }
.wcov__row[data-reveal]:nth-child(2) { transition-delay: .12s; }
.wcov__row[data-reveal]:nth-child(3) { transition-delay: .20s; }
.wcov__row[data-reveal]:nth-child(4) { transition-delay: .28s; }
.wcov__trust li[data-reveal]:nth-child(2) { transition-delay: .10s; }
.wcov__trust li[data-reveal]:nth-child(3) { transition-delay: .20s; }

@keyframes wcovPulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .9; transform: scale(1.05); } }

@media (max-width: 1024px) {
  .wcov__grid { gap: clamp(28px, 4vw, 52px); }
  .wcov__badge { width: min(320px, 74vw); }
}
@media (max-width: 860px) {
  .wcov__grid { grid-template-columns: 1fr; }
  .wcov__badge-wrap { order: -1; margin-left: 0; }
  .wcov__content .section-lede { max-width: none; }
}
@media (max-width: 720px) {
  .wcov__badge { width: min(260px, 66vw); }
  .wcov__row { padding: 16px 12px; gap: 14px; }
  .wcov__row:hover { transform: none; }
  .wcov__trust {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0;
    border: 0;
    background: none;
    backdrop-filter: none;
  }
  .wcov__trust li {
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
  }
  .wcov__trust li + li { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wcov__badge-wrap[data-reveal],
  .wcov__row[data-reveal],
  .wcov__trust li[data-reveal] { opacity: 1; transform: none; }
  .wcov__glow { animation: none; }
}

/* =====================================================================
   Home — "The UV99 Standard" premium specification panel
   Self-contained namespace (.std99). Deliberately NOT built on
   .section / .section--dark / .uvstd, so the global solid-black
   override never touches it. GSAP + ScrollTrigger drive the entrance
   (inline in index.html); every hover / idle state is pure CSS.
   ===================================================================== */
.std99 {
  --v: 139, 61, 255;          /* #8B3DFF — UV99 violet */
  --v-soft: 168, 120, 255;    /* lifted violet for hairlines + text */

  position: relative;
  isolation: isolate;
  padding: clamp(92px, 12vw, 168px) 0;
  color: #fff;
  background:
    radial-gradient(920px 620px at 8% -14%, rgba(var(--v), .16), transparent 58%),
    radial-gradient(760px 640px at 104% 118%, rgba(var(--v), .10), transparent 60%),
    #050506;
}
/* very subtle honeycomb weave, faded toward the lower edges */
.std99::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cg fill='none' stroke='%23a878ff' stroke-opacity='0.09'%3E%3Cpath d='M28 2 53 16.5v29L28 60 3 45.5v-29z'/%3E%3Cpath d='M28 60 53 74.5v29M28 60 3 74.5v29M28 2V-12M53 16.5 66 9M3 16.5-10 9'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 96px;
  -webkit-mask-image: radial-gradient(130% 108% at 50% -6%, #000 6%, transparent 74%);
          mask-image: radial-gradient(130% 108% at 50% -6%, #000 6%, transparent 74%);
}
.std99__inner { position: relative; z-index: 1; }

.std99__eyebrow {
  margin: 0;
  font: 700 12px/1 "Montserrat", "Inter", Arial, sans-serif;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #b98bff;
}
.std99__headline {
  margin: clamp(22px, 3vw, 36px) 0 0;
  max-width: 24ch;
  font-family: "Montserrat", "Inter", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 68px);
  line-height: 1.05;
  letter-spacing: -.028em;
  color: #fff;
}
.std99__line { display: block; overflow: hidden; padding-bottom: .04em; }
.std99__line > span { display: block; will-change: transform; }

.std99__copy {
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  max-width: 44ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.62;
  color: rgba(255, 255, 255, .56);
}

/* ---- premium spec panel ---------------------------------------------- */
.std99__panel {
  margin: clamp(46px, 6vw, 80px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;                                   /* 1px gaps read as fine dividers */
  border: 1px solid rgba(var(--v-soft), .16);
  border-radius: 20px;
  overflow: hidden;
  background-color: rgba(var(--v-soft), .15); /* shows through the gaps */
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
          backdrop-filter: blur(12px) saturate(1.08);
  box-shadow:
    0 44px 100px -44px rgba(0, 0, 0, .78),
    0 0 72px -26px rgba(var(--v), .26),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}
.std99__metric {
  position: relative;
  isolation: isolate;                        /* keep glow / sweep / z-index local */
  display: flex;
  flex-direction: column-reverse;            /* value renders above label */
  gap: 14px;
  padding: clamp(26px, 2.6vw, 42px) clamp(20px, 2vw, 32px) clamp(28px, 3vw, 46px);
}
.std99__metric::before {                      /* the glass cell fill */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(15, 11, 24, .66);
  transition: background-color .4s ease;
}
.std99__glow {                                /* purple pool behind an active metric */
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(118% 82% at 50% 100%, rgba(var(--v), .30), transparent 72%);
  transition: opacity .45s ease;
}
.std99__sweep {                               /* thin line that travels across the base */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 2px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, rgba(var(--v-soft), .85) 42%, #fff 50%, rgba(var(--v-soft), .85) 58%, transparent);
  transition: transform .5s cubic-bezier(.5, 0, .2, 1);
}
.std99__value {
  position: relative;
  z-index: 2;
  margin: 0;
  font: 700 clamp(30px, 3.6vw, 46px)/1 "Montserrat", "Inter", Arial, sans-serif;
  letter-spacing: -.02em;
  background: linear-gradient(176deg, #fff 0%, #e6daff 52%, #a878ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform-origin: left center;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.std99__label {
  position: relative;
  z-index: 2;
  font: 600 11px/1.5 "Montserrat", "Inter", Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  transition: color .4s ease;
}

/* hover + scripted sequential activation share one illuminated state */
.std99__metric:hover::before,
.std99__metric.is-active::before { background-color: rgba(23, 15, 38, .72); }
.std99__metric:hover .std99__glow,
.std99__metric.is-active .std99__glow { opacity: 1; }
.std99__metric:hover .std99__sweep,
.std99__metric.is-active .std99__sweep { transform: scaleX(1); }
.std99__metric:hover .std99__value,
.std99__metric.is-active .std99__value { transform: scale(1.06); }
.std99__metric:hover .std99__label,
.std99__metric.is-active .std99__label { color: rgba(255, 255, 255, .82); }

@media (max-width: 860px) {
  .std99__panel { grid-template-columns: repeat(2, 1fr); }   /* clean 2x2 */
}
@media (max-width: 420px) {
  .std99__metric { padding: 30px 22px 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .std99__line > span { transform: none !important; }
  .std99__value,
  .std99__sweep,
  .std99__glow,
  .std99__metric::before,
  .std99__label { transition: none; }
}

/* =====================================================================
   FAQ & CONTACT — premium hero + Question Navigator
   Scoped to .faq-hero / .faq-navigator / .faq-topic — reuses .wrap,
   .crumb, .kicker, global h1 and .button components. Not listed in the
   solid-black global override below, so its gradient renders.
   ===================================================================== */
.faq-hero {
  position: relative;
  overflow: hidden;
  margin-top: -78px;
  /* top padding matches the shared hero rhythm (films/about/warranty) so the
     breadcrumb starts at the same position on every page */
  padding: 94px 0 92px;
  color: #fff;
  background:
    radial-gradient(1100px 720px at 80% 46%, rgba(96, 42, 128, .38), transparent 62%),
    radial-gradient(880px 620px at 10% 26%, rgba(58, 24, 82, .30), transparent 60%),
    #050308;
}
.faq-hero::before {                 /* faint honeycomb + question marks, ~4% */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M30 3 58 19 58 51 30 67 2 51 2 19Z'/%3E%3Cpath d='M90 55 118 71 118 103 90 119 62 103 62 71Z'/%3E%3C/g%3E%3Cg fill='%23ffffff' font-family='Georgia, serif' font-size='22' text-anchor='middle'%3E%3Ctext x='30' y='43'%3E%3F%3C/text%3E%3Ctext x='90' y='95'%3E%3F%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size: 132px 114px;
}
.faq-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 42% 58%;
  /* top-align, not centre — keeps the breadcrumb/heading start position
     fixed regardless of unused space below, matching the other heroes */
  align-items: start;
  gap: clamp(28px, 5vw, 72px);
  min-height: min(74vh, 700px);
}
.faq-hero__copy .crumb { margin-bottom: 22px; }
.faq-hero__copy .kicker { margin-bottom: 14px; }
.faq-hero__copy h1 {
  margin: 0 0 20px;
  font-size: clamp(40px, 5.2vw, 68px);
  letter-spacing: -.03em;
}
.faq-hero__lede {
  margin: 0;
  max-width: 44ch;
  color: rgba(255, 255, 255, .72);
  font-size: 17px;
}

/* ---- navigator shell ---- */
.faq-navigator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.faq-navigator__stage {
  position: relative;
  width: min(100%, 512px);
  aspect-ratio: 1;
}
.faq-navigator__orbits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.faq-orbit-static circle { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1; }
.faq-orbit-spin { transform-box: view-box; transform-origin: 260px 260px; }
.faq-orbit-ticks {
  fill: none;
  stroke: rgba(206, 176, 244, .32);
  stroke-width: 7;
  stroke-dasharray: 1.5 14;
}
.faq-orbit-arc {
  fill: none;
  stroke: rgba(199, 125, 255, .5);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(199, 125, 255, .5));
}
.faq-route { fill: none; stroke: rgba(180, 150, 220, .2); stroke-width: 1.5; }
.faq-navigator[data-active="visibility"]   .faq-route--visibility,
.faq-navigator[data-active="installation"] .faq-route--installation,
.faq-navigator[data-active="care"]         .faq-route--care,
.faq-navigator[data-active="warranty"]     .faq-route--warranty {
  stroke: rgba(216, 172, 255, .95);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 5px rgba(199, 125, 255, .8));
}

/* ---- central optical-glass disc ---- */
.faq-navigator__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .3);
  background:
    radial-gradient(circle at 50% 34%, rgba(210, 165, 255, .22), transparent 62%),
    radial-gradient(circle at 50% 62%, rgba(28, 16, 40, .72), rgba(8, 5, 12, .92));
  box-shadow:
    inset 0 0 42px rgba(150, 100, 220, .28),
    inset 0 0 10px rgba(255, 255, 255, .16),
    0 0 60px -6px rgba(150, 90, 220, .5);
}
.faq-navigator__core::before,
.faq-navigator__core::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
}
.faq-navigator__core::before { inset: 8%; }
.faq-navigator__core::after { inset: 20%; border-color: rgba(199, 125, 255, .22); }
.faq-navigator__q {
  font-family: "Montserrat", "Inter", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 8vw, 88px);
  line-height: 1;
  color: #ecdcff;
  text-shadow: 0 0 26px rgba(180, 120, 255, .85), 0 0 10px rgba(255, 255, 255, .5);
}

/* ---- category buttons ---- */
.faq-topic {
  position: absolute;
  width: clamp(100px, 11vw, 128px);
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: 18px;
  border: 1px solid rgba(160, 140, 190, .28);
  background: rgba(12, 10, 18, .66);
  color: #fff;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.faq-topic--visibility   { top: 0;    left: 50%; transform: translateX(-50%); }
.faq-topic--installation { right: 0;  top: 50%;  transform: translateY(-50%); }
.faq-topic--care         { bottom: 0; left: 50%; transform: translateX(-50%); }
.faq-topic--warranty     { left: 0;   top: 50%;  transform: translateY(-50%); }
.faq-topic__index { font-size: 12px; letter-spacing: .12em; color: rgba(255, 255, 255, .55); }
.faq-topic__icon { width: 26px; height: 26px; color: #d9c2f5; }
.faq-topic__icon svg { width: 100%; height: 100%; }
.faq-topic__label { font-size: 14px; font-weight: 700; }
.faq-topic:hover { border-color: rgba(199, 125, 255, .5); background: rgba(20, 14, 30, .82); }
.faq-topic:focus-visible { outline: 2px solid #c77dff; outline-offset: 3px; }
.faq-topic[aria-pressed="true"] {
  background: rgba(120, 70, 180, .22);
  border-color: rgba(199, 125, 255, .75);
  box-shadow: 0 0 0 1px rgba(199, 125, 255, .32), 0 0 30px -6px rgba(160, 90, 230, .6);
}
.faq-topic[aria-pressed="true"] .faq-topic__icon {
  color: #efe0ff;
  filter: drop-shadow(0 0 8px rgba(199, 125, 255, .85));
}

.faq-navigator__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.faq-navigator__actions .button { min-height: 46px; }

@media (prefers-reduced-motion: no-preference) {
  .faq-orbit-spin { animation: faq-orbit 28s linear infinite; }
  .faq-navigator__core { animation: faq-breathe 4s ease-in-out infinite; }
  .faq-navigator[data-active="visibility"]   .faq-route--visibility,
  .faq-navigator[data-active="installation"] .faq-route--installation,
  .faq-navigator[data-active="care"]         .faq-route--care,
  .faq-navigator[data-active="warranty"]     .faq-route--warranty {
    animation: faq-route-pulse 2.8s ease-in-out infinite;
  }
  .faq-hero [data-reveal] { transition-duration: .7s; }
  .faq-navigator[data-reveal] { transition-delay: .14s; }
}
@keyframes faq-orbit { to { transform: rotate(360deg); } }
@keyframes faq-route-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes faq-breathe {
  0%, 100% {
    box-shadow: inset 0 0 42px rgba(150, 100, 220, .24), inset 0 0 10px rgba(255, 255, 255, .14), 0 0 46px -8px rgba(150, 90, 220, .4);
  }
  50% {
    box-shadow: inset 0 0 52px rgba(170, 115, 235, .34), inset 0 0 12px rgba(255, 255, 255, .2), 0 0 74px -4px rgba(165, 100, 235, .6);
  }
}

/* ---- tablet ---- */
@media (max-width: 1160px) { .faq-hero { margin-top: -70px; padding-top: 132px; } }
@media (max-width: 1080px) {
  .faq-hero__grid { grid-template-columns: 45% 55%; gap: 32px; }
  .faq-navigator__stage { width: min(100%, 430px); }
  .faq-hero__copy h1 { font-size: clamp(36px, 5vw, 52px); }
}
@media (max-width: 900px) {
  .faq-hero { padding: 120px 0 72px; }
  .faq-hero__grid { grid-template-columns: 1fr; min-height: 0; gap: 46px; }
  .faq-navigator__stage { width: min(100%, 460px); }
}

/* ---- mobile: 2x2 grid under the disc ---- */
@media (max-width: 720px) {
  .faq-navigator { width: 100%; }
  .faq-navigator__stage {
    aspect-ratio: auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 236px;
  }
  .faq-navigator__orbits {
    inset: 0 auto auto 50%;
    width: 220px;
    height: 220px;
    transform: translateX(-50%);
    overflow: hidden;
  }
  .faq-orbit-static circle:nth-of-type(3),
  .faq-orbit-ticks,
  .faq-orbit-arc,
  .faq-routes { display: none; }
  .faq-navigator__core { top: 110px; width: 132px; }
  .faq-topic {
    position: static;
    transform: none;
    width: auto;
    min-height: 44px;
  }
  .faq-navigator__actions { flex-direction: column; align-self: stretch; }
  .faq-navigator__actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-hero [data-reveal] { opacity: 1; transform: none; }
}

/* =====================================================================
   WARRANTY — premium hero (scoped .warr-hero)
   Reuses .wrap / .crumb / .kicker / global h1. Not in the solid-black
   override list below, so its gradient renders.
   ===================================================================== */
.warr-hero {
  position: relative;
  overflow: hidden;
  margin-top: -78px;
  padding: 150px 0 96px;
  color: #fff;
  background:
    radial-gradient(1050px 700px at 76% 44%, rgba(96, 42, 128, .36), transparent 62%),
    radial-gradient(820px 600px at 10% 22%, rgba(58, 24, 82, .28), transparent 60%),
    #050308;
}
.warr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M30 3 58 19 58 51 30 67 2 51 2 19Z'/%3E%3Cpath d='M90 55 118 71 118 103 90 119 62 103 62 71Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 128px 110px;
}
.warr-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  min-height: min(52vh, 460px);
}
.warr-hero__copy { max-width: 620px; }
.warr-hero__copy .crumb { margin-bottom: 22px; }
.warr-hero__copy .kicker { margin-bottom: 14px; }
.warr-hero__rule {
  display: block;
  width: 56px;
  height: 2px;
  margin: 0 0 22px;
  background: linear-gradient(90deg, #8f4a9e, #c77dff);
}
.warr-hero__copy h1 {
  margin: 0 0 20px;
  font-size: clamp(40px, 5.4vw, 72px);
  letter-spacing: -.03em;
}
.warr-hero__lede {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, .72);
  font-size: 17px;
}

@media (prefers-reduced-motion: no-preference) {
  .warr-hero [data-reveal] { transition-duration: .7s; }
}

@media (max-width: 1160px) { .warr-hero { margin-top: -70px; padding-top: 132px; } }
@media (max-width: 1024px) {
  .warr-hero__inner { gap: 44px; min-height: 0; }
  .warr-hero__copy { max-width: none; }
  .warr-hero__copy h1 { font-size: clamp(34px, 6vw, 52px); }
}
@media (max-width: 560px) {
  .warr-hero { padding: 118px 0 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .warr-hero [data-reveal] { opacity: 1; transform: none; }
}

/* =====================================================================
   WARRANTY — "Making a claim" timeline: staggered reveal, drawn
   connector line and hover lift. Rides the site-wide [data-reveal]
   IntersectionObserver (adds .is-visible). .timeline is warranty-only.
   ===================================================================== */
.section--dark .timeline { position: relative; }

/* connector that "draws" across the four steps once the row scrolls in */
.timeline::before {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 46px;
  height: 1px;
  pointer-events: none;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg,
    rgba(199, 125, 255, .05), rgba(199, 125, 255, .5) 18%,
    rgba(199, 125, 255, .5) 82%, rgba(199, 125, 255, .05));
}
.timeline[data-reveal] { opacity: 1; transform: none; transition: none; }  /* hook only, no fade */
.timeline[data-reveal].is-visible::before { animation: tl-draw 1.1s .1s cubic-bezier(.22, .61, .36, 1) forwards; }
@keyframes tl-draw {
  0%  { opacity: 0; transform: scaleX(0); }
  12% { opacity: 1; }
  100% { opacity: 1; transform: scaleX(1); }
}

.timeline article {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 44%), #0b0a0f;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.timeline article::after {                 /* top accent bar, grows with the card */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #d84f9a, #c77dff);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
  transition-delay: inherit;
}
.timeline article.is-visible::after { transform: scaleX(1); }

.timeline article::before {                 /* number badge: gradient + entrance nudge */
  background: linear-gradient(160deg, #e56aa8, #b06ff0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: inherit;
}
.timeline article.is-visible::before { opacity: 1; transform: none; }

/* staggered cascade — extends the base [data-reveal] transition */
.timeline article[data-reveal] { transition-duration: .6s; }
.timeline article[data-reveal]:nth-child(1) { transition-delay: .05s; }
.timeline article[data-reveal]:nth-child(2) { transition-delay: .16s; }
.timeline article[data-reveal]:nth-child(3) { transition-delay: .27s; }
.timeline article[data-reveal]:nth-child(4) { transition-delay: .38s; }

@media (hover: hover) {
  .timeline article:hover {
    transform: translateY(-4px);
    border-color: rgba(199, 125, 255, .55);
    box-shadow: 0 24px 50px -24px rgba(160, 90, 230, .6);
  }
  .timeline article:hover::before { filter: drop-shadow(0 0 10px rgba(199, 125, 255, .7)); }
}

@media (max-width: 900px) {
  .timeline::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline[data-reveal].is-visible::before { animation: none; opacity: 1; transform: scaleX(1); }
  .timeline article[data-reveal] { transition-delay: 0s !important; }
  .timeline article::after { transform: scaleX(1); transition: none; }
  .timeline article::before { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   ABOUT — premium hero (scoped .about-hero). Copy-forward, plain
   heading. Same environment treatment as .warr-hero; not in the
   solid-black override list below, so its gradient renders.
   ===================================================================== */
.about-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: -78px;
  /* top padding matches the shared hero rhythm (films/faq/warranty) so the
     breadcrumb starts at the same position on every page */
  padding: 94px 0 96px;
  color: #fff;
  background:
    radial-gradient(1000px 680px at 74% 42%, rgba(96, 42, 128, .34), transparent 62%),
    radial-gradient(820px 600px at 8% 20%, rgba(58, 24, 82, .28), transparent 60%),
    #050308;
}

/* Environmental car visual — bleeds off the right edge and dissolves
   into the section so the copy stays dominant (ref: brand hero). */
.about-hero__media {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: min(64%, 1040px);
  pointer-events: none;
}
.about-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 44%;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 36%, #000 100%),
    linear-gradient(0deg, transparent 0%, #000 12%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent 0%, #000 36%, #000 100%),
    linear-gradient(0deg, transparent 0%, #000 12%, #000 84%, transparent 100%);
          mask-composite: intersect;
}
.about-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #050308 0%, rgba(5, 3, 8, .52) 24%, transparent 50%),
    radial-gradient(58% 54% at 34% 40%, rgba(143, 74, 158, .3), transparent 72%),
    linear-gradient(0deg, rgba(5, 3, 8, .55), transparent 34%);
}
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M30 3 58 19 58 51 30 67 2 51 2 19Z'/%3E%3Cpath d='M90 55 118 71 118 103 90 119 62 103 62 71Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 128px 110px;
}
.about-hero__inner {
  position: relative;
  z-index: 1;
  min-height: min(62vh, 540px);
  display: flex;
  /* top-align, not centre — keeps the breadcrumb/heading start position
     fixed regardless of unused space below, matching the other heroes */
  align-items: flex-start;
}
.about-hero__copy { max-width: 640px; }
.about-hero__copy .crumb { margin-bottom: 22px; }
.about-hero__copy .kicker { margin-bottom: 14px; }
.about-hero__rule {
  display: block;
  width: 56px;
  height: 2px;
  margin: 0 0 22px;
  background: linear-gradient(90deg, #8f4a9e, #c77dff);
}
.about-hero__copy h1 {
  margin: 0 0 20px;
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.about-hero__lede {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, .72);
  font-size: 17px;
}
.about-hero__stats {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.about-hero__stats li {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}
.about-hero__stats li + li::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: #c77dff;
  box-shadow: 0 0 8px rgba(199, 125, 255, .85);
}
.about-hero__stats b {
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
}
@media (prefers-reduced-motion: no-preference) {
  .about-hero [data-reveal] { transition-duration: .7s; }
}
@media (max-width: 1160px) { .about-hero { margin-top: -70px; padding-top: 132px; } }
@media (max-width: 980px) {
  /* Copy flows from the top — no tall centred box that strands the
     text in the middle of a dark band on phones.

     The car photo used to stay position:absolute, stretched to the
     height of .about-hero__inner — but .about-hero__inner is set to
     min-height:0/display:block right above, so with nothing else
     giving .about-hero a tall box, the "canvas" the absolute image
     was drawn into collapsed to roughly the height of the text alone.
     The image was still there, just squeezed into a sliver behind the
     copy and mostly painted over by its own dark scrim — effectively
     invisible. Fix: take the image out of absolute positioning on
     mobile and lay it out as a normal block *after* the text, with
     its own aspect-ratio (not a fixed px height) so it always has a
     real, visible size regardless of how tall the copy block is. */
  .about-hero {
    display: flex;
    flex-direction: column;
  }
  .about-hero__inner { order: 1; min-height: 0; display: block; }
  .about-hero__media {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-top: 32px;
    border-radius: 18px;
    overflow: hidden;
  }
  .about-hero__media img {
    position: static;
    object-position: 58% 42%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 92%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-over;
            mask-composite: add;
    opacity: 1;
  }
  /* the image no longer sits behind any text, so the scrim only needs
     to be a soft edge vignette that blends it into the hero background,
     not a near-opaque cover protecting readability */
  .about-hero__media::after {
    background:
      linear-gradient(180deg, rgba(5, 3, 8, .5) 0%, transparent 20% 80%, rgba(5, 3, 8, .55) 100%),
      radial-gradient(65% 55% at 50% 40%, rgba(143, 74, 158, .16), transparent 75%);
  }
  .about-hero__copy { max-width: none; }
}
@media (max-width: 720px) {
  .about-hero { padding: 96px 0 52px; }
  .about-hero__inner { min-height: 0; display: block; }
  .about-hero__copy .crumb { margin-bottom: 16px; }
  .about-hero__rule { margin-bottom: 18px; }
  .about-hero__copy h1 { font-size: clamp(32px, 8.4vw, 44px); }
  .about-hero__lede { font-size: 15.5px; }
  .about-hero__stats {
    margin-top: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    letter-spacing: .1em;
  }
  .about-hero__stats li + li::before { content: none; }
}
@media (prefers-reduced-motion: reduce) {
  .about-hero [data-reveal] { opacity: 1; transform: none; }
}

/* =====================================================================
   Global override — plain solid black background on every section.
   Strips the purple gradients, hex-mesh patterns, photo layers and
   glow/vignette overlays. Text, cards, icons and images are untouched.
   ===================================================================== */
html,
body { background: #000 !important; }

.hero,
.page-hero,
.product-hero,
.hero__strip,
.section,
.section--soft,
.section--dark,
.section--glow,
.section--paths,
.about-uv99,
.dark-cta,
.uvstd,
.wcov,
.site-footer {
  background: #000 !important;
  background-image: none !important;
}

/* decorative pattern / photo / glow / vignette overlays */
.hero::before,
.page-hero::before,
.product-hero::before,
.hero__content::before,
.hero__strip::before,
.hero__strip::after,
.section--glow::before,
.section--paths::before,
.dark-cta::before,
.about-uv99__bg,
.about-uv99__bg-img,
.about-uv99::after,
.uvstd::before,
.uvstd__trail,
.wcov__trail,
.wcov__glow {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* =====================================================================
   Products page — premium rebuild
   Appended after the global black-background override on purpose so the
   dark-glass treatment of the selector, cards, simulator and proof media
   wins. Reuses .product-* / .series-* / .sim-* / .metric / .meter hooks
   that site.js already targets; adds .ph (placeholder art) and .tsim
   (the CSS/SVG tint simulator).
   ===================================================================== */

/* ---- hero ---------------------------------------------------------- */
.product-hero { position: relative; min-height: 640px; }
.product-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(680px 420px at 84% -6%, rgba(216, 79, 154, .20), transparent 62%),
    radial-gradient(760px 520px at 2% 108%, rgba(143, 74, 158, .22), transparent 60%);
}
.product-hero > .wrap { position: relative; z-index: 1; }
.product-hero .page-hero__inner p:last-child { color: rgba(255, 255, 255, .74); }

.film-sheets .media-fallback { display: none; }
.film-rays { position: absolute; inset: 0; z-index: 0; opacity: .55; pointer-events: none; }
.film-sheets.has-media .film-rays { display: none; }

/* ---- selector: series tabs as dark glass ------------------------- */
.selector-shell { margin-top: 44px; }
.series-tabs {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 20px 60px -30px rgba(143, 74, 158, .5);
  backdrop-filter: blur(10px);
}
.series-tab {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, .6);
  transition: color .3s ease, background .3s ease, transform .2s cubic-bezier(.16, 1, .3, 1);
}
.series-tab:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.series-tab:active { transform: scale(.97); }
.series-tab[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--plum), var(--violet));
  box-shadow: 0 14px 30px -12px rgba(143, 74, 158, .7);
}

/* ---- animated sliding indicator (wide screens, motion allowed) ------ */
@media (min-width: 621px) and (prefers-reduced-motion: no-preference) {
  .series-tabs { position: relative; isolation: isolate; }
  .series-tabs::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 8px;
    bottom: 8px;
    left: 8px;
    width: calc((100% - 32px) / 3);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--plum), var(--violet));
    box-shadow: 0 14px 30px -12px rgba(143, 74, 158, .7);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
  }
  .series-tabs:has(#tab-uv99[aria-selected="true"])::before { transform: translateX(0); }
  .series-tabs:has(#tab-pro[aria-selected="true"])::before  { transform: translateX(calc(100% + 8px)); }
  .series-tabs:has(#tab-plus[aria-selected="true"])::before { transform: translateX(calc(200% + 16px)); }

  /* let the sliding pill carry the highlight instead of the tab's own bg */
  .series-tab[aria-selected="true"] { background: transparent; box-shadow: none; }
  .series-tab[aria-selected="true"] { animation: series-pop .42s cubic-bezier(.34, 1.56, .64, 1); }
}
@keyframes series-pop {
  0%   { transform: scale(.94); }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ---- product cards fade + rise in when a series is chosen ---------- */
@media (prefers-reduced-motion: no-preference) {
  .product-card:not([hidden]) { animation: product-in .5s cubic-bezier(.16, 1, .3, 1) backwards; }
  .product-card:not([hidden]):nth-of-type(2) { animation-delay: .06s; }
  .product-card:not([hidden]):nth-of-type(3) { animation-delay: .12s; }
  .product-card:not([hidden]):nth-of-type(4) { animation-delay: .18s; }
}
@keyframes product-in {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ---- product cards ---------------------------------------------- */
.product-list { margin-top: 40px; }
.product-card {
  border-color: rgba(255, 255, 255, .09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 46%),
    #0f0d13;
  box-shadow: 0 30px 70px -34px rgba(143, 74, 158, .5);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--product-accent) 42%, rgba(255, 255, 255, .12));
  box-shadow: 0 46px 92px -34px color-mix(in srgb, var(--product-accent) 45%, transparent);
}
.product-card--premium { border-color: rgba(230, 148, 24, .4); }

.product-media { background: #0b0910; }
.product-media::before { content: none; }             /* drop the old CSS "glass blob" */
.product-media .media-fallback { display: none; }     /* premium art replaces the dashed hint */

.product-body { display: flex; flex-direction: column; padding: 34px; }
.product-card .badge {
  align-self: flex-start;
  color: color-mix(in srgb, var(--product-accent) 78%, #fff);
  border: 1px solid color-mix(in srgb, var(--product-accent) 38%, transparent);
  background: color-mix(in srgb, var(--product-accent) 14%, transparent);
}
.product-name { color: #fff; }
.product-copy { color: rgba(255, 255, 255, .6); }
.product-card .metric { color: rgba(255, 255, 255, .55); }
.product-card .metric b { color: #fff; }
.product-card .metric:first-of-type { margin-top: auto; padding-top: 20px; }
.product-card .meter { background: rgba(255, 255, 255, .08); }
.product-card .meter i {
  background: linear-gradient(90deg, color-mix(in srgb, var(--product-accent) 55%, #fff), var(--product-accent));
}
.product-best {
  margin: 22px 0 0;
  padding: 13px 15px;
  color: #f0d6a6;
  font-size: 12.5px;
  border-radius: 12px;
  border: 1px solid rgba(230, 148, 24, .28);
  background: rgba(230, 148, 24, .08);
}
.product-best b { color: #ffcf8a; }
.product-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .01em;
  color: color-mix(in srgb, var(--product-accent) 76%, #fff);
}
.product-cta svg { width: 15px; height: 15px; transition: transform .2s ease; }
.product-card:hover .product-cta svg { transform: translateX(4px); }

/* ---- placeholder art (auto-hidden when a real photo loads) ------ */
.ph {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: linear-gradient(160deg, #171320, #0b0910);
}
.ph__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph__tint { position: absolute; inset: 0; background: rgba(16, 12, 24, var(--tint-a, .12)); }
.ph--cool .ph__tint { background: rgba(12, 18, 30, var(--tint-a, .12)); }
.ph__chip {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 5px 9px;
  font: 800 9px/1 Inter, Arial, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(0, 0, 0, .32);
  backdrop-filter: blur(4px);
}
.media-slot.has-media .ph { display: none; }

/* product cards use real packaging renders on a black ground — fill the
   whole media panel; the render's own black ground hides the crop edges */
.product-card .media-slot > img {
  object-fit: cover;
  object-position: center;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.product-card:hover .media-slot > img { transform: scale(1.04); }

/* ---- tint simulator: CSS/SVG illustration ---------------------- */
.tsim {
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(143, 74, 158, .5);
  background: #0b0910;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 70px rgba(143, 74, 158, .2);
  isolation: isolate;
  touch-action: pan-y;
}
.tsim__stage, .tsim__after { position: absolute; inset: 0; }
.tsim__svg { width: 100%; height: 100%; display: block; }
.tsim__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.tsim__after { clip-path: inset(0 0 0 var(--tsim-pos, 50%)); }
.tsim__wash { position: absolute; inset: 0; background: rgb(var(--tsim-rgb, 18 14 26) / var(--tsim-a, .12)); }
.tsim__cut {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 16%, rgba(8, 6, 12, .62), transparent 42%);
}
.tsim__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--tsim-pos, 50%);
  z-index: 4;
  width: 3px;
  margin-left: -1.5px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 16px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.tsim__knob {
  position: absolute;
  top: 50%;
  left: var(--tsim-pos, 50%);
  z-index: 5;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  display: grid;
  place-items: center;
  color: #2a1230;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5), 0 0 0 6px rgba(255, 255, 255, .14);
  pointer-events: none;
}
.tsim__knob svg { width: 18px; height: 18px; }
.tsim__tag {
  position: absolute;
  top: 14px;
  z-index: 6;
  padding: 7px 12px;
  font: 800 11px/1 Inter, Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  border-radius: 9px;
  background: rgba(10, 8, 12, .6);
  backdrop-filter: blur(4px);
}
.tsim__tag--l { left: 14px; }
.tsim__tag--r { right: 14px; }
.tsim__range {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}
.tsim__range::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 56px; }
.tsim__range::-moz-range-thumb { width: 56px; height: 56px; border: 0; background: transparent; }
.tsim__range:focus { outline: none; }
.tsim__range:focus-visible ~ .tsim__knob {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .4), 0 0 0 6px rgba(143, 74, 158, .95);
}

/* simulator pills + readout on dark */
.sim-button {
  color: rgba(255, 255, 255, .72);
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
}
.sim-button:hover { color: #fff; }
.sim-button[aria-pressed="true"] {
  color: #fff;
  border-color: var(--violet);
  background: var(--violet);
}
.sim-result { border: 1px solid rgba(255, 255, 255, .08); }
.sim-result b { color: #e6a7d1; }
.sim-result span { color: rgba(255, 255, 255, .6); }

/* ---- proof media ---------------------------------------------- */
.media-drop {
  border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(160deg, #141019, #0b0910);
}
.media-drop .media-fallback { display: none; }
.media-drop .ph { background: transparent; }

/* proof panels: real photo + caption overlay */
.proof-panel { aspect-ratio: 16 / 10; min-height: 0; }
.proof-panel > img { object-position: center; }
.proof-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: grid;
  gap: 4px;
  padding: 60px 24px 22px;
  text-align: center;
  pointer-events: none;
  background: linear-gradient(to top, rgba(6, 4, 10, .86), rgba(6, 4, 10, .34) 52%, transparent);
}
.proof-caption strong {
  font: 800 clamp(18px, 2.1vw, 24px)/1.12 "Montserrat", Inter, Arial, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.proof-caption span {
  font: 500 13px/1.35 Inter, Arial, sans-serif;
  color: rgba(255, 255, 255, .74);
}

/* ---- choose by need ----------------------------------------- */
.pick {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 50%), #120e17;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pick h3 { color: #fff; }

/* staggered reveal + drawn accent bar + hover lift (rides site-wide [data-reveal]) */
.pick::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #d84f9a, #c77dff);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
  transition-delay: inherit;
}
.pick.is-visible::after { transform: scaleX(1); }
.pick > span {
  background: linear-gradient(160deg, #e56aa8, #b06ff0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pick[data-reveal] { transition-duration: .6s; }
.pick[data-reveal]:nth-child(1) { transition-delay: .05s; }
.pick[data-reveal]:nth-child(2) { transition-delay: .16s; }
.pick[data-reveal]:nth-child(3) { transition-delay: .27s; }
@media (hover: hover) {
  .pick:hover {
    transform: translateY(-4px);
    border-color: rgba(199, 125, 255, .55);
    box-shadow: 0 24px 50px -24px rgba(160, 90, 230, .6);
  }
  .pick:hover > span { filter: drop-shadow(0 0 10px rgba(199, 125, 255, .7)); }
}
@media (prefers-reduced-motion: reduce) {
  .pick[data-reveal] { transition-delay: 0s !important; }
  .pick::after { transform: scaleX(1); transition: none; }
}

@media (max-width: 900px) {
  .tsim__tag { font-size: 10px; padding: 6px 10px; }
  .selector-shell { margin-top: 32px; }
  .tsim { aspect-ratio: 4 / 5; background: #0b0910; }
  .tsim__img { object-fit: contain; }
}

/* =====================================================================
   Closing CTA + footer — join the site-wide scroll-reveal sequence.
   Rides the shared [data-reveal] IntersectionObserver in site.js
   (adds .is-visible). Base fade/translate comes from [data-reveal];
   these rules only stagger the footer columns so the band cascades in
   instead of the whole block appearing at once.
   ===================================================================== */
.dark-cta__in > [data-reveal] { transition-duration: .6s; }
.dark-cta__in > [data-reveal]:nth-child(2) { transition-delay: .1s; }

.footer-cols > [data-reveal] { transition-duration: .6s; }
.footer-cols > [data-reveal]:nth-child(1) { transition-delay: .04s; }
.footer-cols > [data-reveal]:nth-child(2) { transition-delay: .12s; }
.footer-cols > [data-reveal]:nth-child(3) { transition-delay: .20s; }
.footer-cols > [data-reveal]:nth-child(4) { transition-delay: .28s; }
.footer-bottom[data-reveal] { transition-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
  .dark-cta__in > [data-reveal],
  .footer-cols > [data-reveal],
  .footer-bottom[data-reveal] { transition-delay: 0s !important; }
}

/* =====================================================================
   UV99 — Interactive film experience   (films.html · #uv99-experience)
   ---------------------------------------------------------------------
   Additive, fully namespaced (.uvx / .uvx-cost). It reuses the site
   tokens in :root (colours, fonts, --radius, --wrap, .section, .wrap,
   .section-head, .card) and adds nothing global. The scripted behaviour
   lives in an inline <script> at the end of films.html.

   Runtime CSS variables set by that script per selected film:
     --uvx-accent      film accent (hex)         e.g. #8f4a9e
     --uvx-accent-rgb  same colour as "r,g,b"    e.g. 143,74,158
     --uvx-tint-rgb    film-layer tint as "r,g,b"
     --uvx-tint-a      film-layer opacity        0.06 .. ~0.30  (from VLT)
     --uvx-heat        heat rejection, 0 .. 1    (from heat %)
     --uvx-warm        cabin thermal tone, 1 hot .. 0 cool
   ===================================================================== */
.uvx {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(620px 440px at 82% 6%, rgba(230, 148, 24, .10), transparent 60%),
    radial-gradient(760px 540px at 2% 100%, rgba(143, 74, 158, .22), transparent 62%),
    #050505;
  /* sensible defaults so the section looks right before the script runs */
  --uvx-accent: #8f4a9e;
  --uvx-accent-rgb: 143, 74, 158;
  --uvx-tint-rgb: 143, 74, 158;
  --uvx-tint-a: .12;
  --uvx-heat: .3;
  --uvx-block: 0;
  --uvx-warm: 1;
}
.uvx::before {                        /* subtle honeycomb — same motif as the hero */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z' fill='%23ffffff' fill-opacity='0.06' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-size: 56px 98px;
}
.uvx > .wrap { position: relative; z-index: 1; }
.uvx [hidden] { display: none !important; }   /* keep IR rows hidden past the grid/flex display rules */
.uvx .section-title { color: #fff; }
.uvx .eyebrow { color: #c7a2ff; }
.uvx .section-lede { color: rgba(255, 255, 255, .62); }

/* ---- layout: selector row, then product · stats · demo image (right) --- */
.uvx__grid {
  display: grid;
  grid-template-columns: minmax(0, 27fr) minmax(0, 35fr) minmax(0, 38fr);
  grid-template-areas:
    "selector selector selector"
    "product  stats     viz";
  gap: 26px;
  align-items: start;
}
.uvx__selector      { grid-area: selector; }
.uvx__panel--product { grid-area: product; }
.uvx__panel--viz    { grid-area: viz; }
.uvx__panel--stats  { grid-area: stats; }

/* ---- selector: one clean centred row --------------------------------- */
.uvx__selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 4px 0 10px;
}
.uvx__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  backdrop-filter: blur(10px);
}
.uvx__btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 20px;
  color: rgba(255, 255, 255, .72);
  font: 800 13px/1 Inter, Arial, sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease,
              box-shadow .25s ease, transform .18s ease;
}
.uvx__btn:hover { color: #fff; border-color: rgba(255, 255, 255, .34); transform: translateY(-1px); }
.uvx__btn:focus-visible { outline: 2px solid #c7a2ff; outline-offset: 2px; }
.uvx__btn.is-active {
  color: #fff;
  border-color: rgba(var(--uvx-accent-rgb), .85);
  background: linear-gradient(180deg, rgba(var(--uvx-accent-rgb), .32), rgba(var(--uvx-accent-rgb), .16));
  box-shadow:
    0 0 0 1px rgba(var(--uvx-accent-rgb), .5),
    0 0 22px rgba(var(--uvx-accent-rgb), .45),
    0 18px 44px -18px rgb(var(--uvx-accent-rgb));
}
.uvx__hint { margin: 0; font-size: 12px; text-align: center; color: rgba(255, 255, 255, .42); }
.uvx__hint kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  margin: 0 1px;
  font: 600 11px/1.4 Inter, Arial, sans-serif;
  text-align: center;
  color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 5px;
}

/* ---- centre: hero demonstration card ------------------------------- */
.uvx__panel--viz {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(var(--uvx-accent-rgb), .38);
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--uvx-accent-rgb), .1), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 0 0 1px rgba(var(--uvx-accent-rgb), .12),
    0 44px 90px -44px rgba(var(--uvx-accent-rgb), .55);
  transition: border-color .5s ease, box-shadow .5s ease;
}
.uvx__scene {
  position: relative;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  aspect-ratio: 1690 / 931;
  min-height: 150px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, #0a0710 0%, #0c0913 45%, #070510 100%);
}

/* photographic scene — sun at 48 degC, film reflecting the heat away */
.uvx__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  z-index: 0;
}
.uvx__scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 5, 14, 0) 45%, rgba(7, 5, 14, .55) 100%),
    radial-gradient(120% 90% at 82% 88%, rgba(7, 5, 14, .5), transparent 55%);
}

/* swappable film layer — a scene-wide accent wash whose strength tracks
   the selected film's tint + heat-rejection custom properties */
.uvx__film {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 62% 40%,
      rgba(var(--uvx-accent-rgb), calc(.16 + var(--uvx-block) * .28)) 0,
      transparent 62%),
    linear-gradient(150deg,
      rgba(var(--uvx-tint-rgb), calc(var(--uvx-tint-a) * .5)) 0,
      rgba(var(--uvx-accent-rgb), calc(.08 + var(--uvx-heat) * .18)) 100%);
  box-shadow: inset 0 0 90px rgba(var(--uvx-accent-rgb), calc(.2 + var(--uvx-heat) * .35));
  mix-blend-mode: screen;
  transition: background .55s ease, box-shadow .55s ease;
}
.uvx__film::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-60%);
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .22) 50%, transparent 58%);
  opacity: 0;
}

/* cabin readout — glow tone tracks the modelled temperature */
.uvx__cabin {
  position: absolute;
  right: 5%;
  bottom: 6%;
  width: 45%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background:
    radial-gradient(82% 82% at 50% 32%,
      rgba(255, 150, 90, calc(.44 * var(--uvx-warm))) 0,
      rgba(122, 92, 214, calc(.30 * (1 - var(--uvx-warm)))) 55%,
      rgba(10, 8, 16, .66) 100%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .5);
  transition: background .8s ease;
  z-index: 3;
}
.uvx__temp { margin: 0; text-align: center; line-height: 1; }
.uvx__temp-value { font: 800 clamp(30px, 6vw, 42px)/1 "Montserrat", Inter, Arial, sans-serif; }
.uvx__temp-unit { margin-left: 2px; font: 700 16px/1 "Montserrat", Inter, Arial, sans-serif; color: rgba(255, 255, 255, .7); }
.uvx__temp-label {
  display: block;
  margin-top: 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.uvx__note {
  margin: 0;
  padding: 0 6px 2px;
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .38);
}

/* ---- right: live statistics — compact 2 x 2 grid --------------------- */
.uvx__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-content: start;
}
.uvx__stats li {
  display: flex;
  flex-direction: column;
  min-height: 132px;
  padding: 18px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  backdrop-filter: blur(8px);
  box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .8);
  transition: border-color .3s ease, background .3s ease;
}
.uvx__stats li.is-highlight {
  border-color: rgba(var(--uvx-accent-rgb), .5);
  background: linear-gradient(180deg, rgba(var(--uvx-accent-rgb), .16), rgba(var(--uvx-accent-rgb), .05));
}
.uvx__stats b {
  display: block;
  font: 800 clamp(26px, 2.6vw, 34px)/1 "Montserrat", Inter, Arial, sans-serif;
  letter-spacing: -.02em;
}
.uvx__stats b i { font-style: normal; font-size: .5em; margin-left: 2px; color: rgba(255, 255, 255, .6); }
.uvx__stats li > span:not([class]) {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.uvx__meter {
  display: block;
  margin-top: auto;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.uvx__meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: rgb(var(--uvx-accent-rgb)); transition: width .9s cubic-bezier(.22, .61, .36, 1); }
.uvx__stats li:last-child b { font-size: clamp(22px, 2.4vw, 28px); }
.uvx__stats li:last-child > span:not([class]) { margin-top: 8px; }

/* ---- left: product identity + specs card --------------------------- */
.uvx__panel--product {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(var(--uvx-accent-rgb), .12), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018));
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 44px 90px -46px rgba(0, 0, 0, .85);
}
.uvx__info {
  flex: 1;
  padding: 26px 24px;
  border: 0;
  border-radius: 0;
  background: none;
}
.uvx__tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 11px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgb(var(--uvx-accent-rgb));
  border: 1px solid rgba(var(--uvx-accent-rgb), .5);
  border-radius: 999px;
}
.uvx__name { margin: 0 0 6px; font-size: clamp(23px, 3vw, 29px); letter-spacing: -.02em; }
.uvx__desc { margin: 0 0 18px; color: rgba(255, 255, 255, .66); font-size: 14px; }
.uvx__specs { margin: 0; display: grid; gap: 12px; }
.uvx__specs > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.uvx__specs > div:last-child { border-bottom: 0; padding-bottom: 0; }
.uvx__specs dt { color: rgba(255, 255, 255, .55); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.uvx__specs dd { margin: 0; font: 700 18px/1 "Montserrat", Inter, Arial, sans-serif; }

/* screen-reader-only running summary of the current film */
.uvx__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---- motion: only when the visitor allows it ----------------------- */
@media (prefers-reduced-motion: no-preference) {
  .uvx__scene.is-live .uvx__film::after { animation: uvx-sheen 2.4s ease-in-out .15s 1; }
}
@keyframes uvx-pulse { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes uvx-travel {
  0%   { transform: scaleX(0); opacity: 0; }
  12%  { opacity: 1; }
  70%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes uvx-sheen { 0% { transform: translateX(-60%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(60%); opacity: 0; } }

/* ---- responsive ---------------------------------------------------- */
@media (max-width: 1080px) {
  /* tablet: selector row, then product + stats, then the demo image full-width */
  .uvx__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "selector selector"
      "product  stats"
      "viz      viz";
    gap: 24px;
  }
  .uvx__panel--viz .uvx__scene { max-width: 620px; margin-inline: auto; }
}
@media (max-width: 720px) {
  /* mobile: single column — DOM order is selector -> viz -> product -> stats */
  .uvx__grid { display: block; }
  .uvx__grid > * { margin-bottom: 22px; }
  .uvx__grid > *:last-child { margin-bottom: 0; }
  .uvx__stats { grid-template-columns: 1fr 1fr; }
  .uvx__buttons {                                /* phone: drop the pill wrapper — no stray oval around the wrapped grid */
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
  }
  .uvx__btn { flex: 1 1 42%; }                   /* stay large + easy to tap */
  .uvx__btn-dot { display: none; }               /* phone: drop the status circle */
}
@media (max-width: 420px) {
  .uvx__stats { grid-template-columns: 1fr; }
  .uvx__stats li { min-height: 0; }
}

/* =====================================================================
   "The sun is costing you every day" — four compact benefit cards.
   Rides the existing .section / .section--soft / .card / .wrap styles.
   ===================================================================== */
.uvx-cost__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.uvx-cost__card { padding: 26px 22px; }
.uvx-cost__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #d9b6f0;
  background: rgba(163, 95, 199, .14);
  border: 1px solid rgba(197, 130, 230, .3);
}
.uvx-cost__icon svg { width: 24px; height: 24px; }
.uvx-cost__card h3 { margin: 0 0 8px; font-size: 17px; }
.uvx-cost__card p { margin: 0; color: var(--muted); font-size: 13.5px; }
@media (max-width: 900px) { .uvx-cost__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .uvx-cost__grid { grid-template-columns: 1fr; } }

/* =====================================================================
   PRODUCTS HERO — cinematic premium elevation
   Appended last so it wins over both the early .product-hero rules and
   the global solid-black override. Rebuilds the right-side visual as
   optical automotive-glass samples, adds restrained studio lighting,
   atmospheric depth, refined typography and polished micro-interactions.
   Scope is limited to .product-hero (+ a :has() nav accent).
   ===================================================================== */

/* ---- stage: near-black ground + atmospheric depth ----------------- */
.product-hero {
  background: #050407 !important;
  min-height: 668px;
  isolation: isolate;
}
.product-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 720px at 70% 36%, rgba(124, 58, 237, .16), transparent 60%),
    radial-gradient(880px 620px at 16% 104%, rgba(96, 52, 150, .12), transparent 62%),
    radial-gradient(560px 460px at 92% 4%, rgba(243, 170, 44, .06), transparent 55%);
}
.product-hero__atmos {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.product-hero__gridlines {
  position: absolute;
  inset: -1px;
  opacity: .55;
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 66px 66px;
  -webkit-mask-image: radial-gradient(circle at 68% 42%, #000 8%, transparent 74%);
  mask-image: radial-gradient(circle at 68% 42%, #000 8%, transparent 74%);
}
.product-hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 120% at 50% -8%, transparent 52%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(180deg, transparent 68%, rgba(0, 0, 0, .38));
}
.product-hero > .wrap { position: relative; z-index: 1; }

/* ---- left column: typography -------------------------------------- */
.product-hero__grid > * { min-width: 0; }
.product-hero .page-hero__inner { max-width: 560px; }

.product-hero .crumb {
  margin-bottom: 22px;
  color: rgba(255, 255, 255, .4);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 11.5px;
}
.product-hero .crumb a { color: rgba(255, 255, 255, .72); transition: color .2s ease; }
.product-hero .crumb a:hover { color: #fff; }

.product-hero .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--amber);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3em;
}
.product-hero .kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(243, 170, 44, .95));
}

.product-hero__title {
  margin: 0 0 22px;
  font-family: "Montserrat", "Inter", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(42px, 5.2vw, 70px);
  line-height: 1.03;
  letter-spacing: -.032em;
  color: #fff;
}
.product-hero__title .line { display: block; overflow: hidden; }
.product-hero__title .line > span {
  display: block;
  transform: translateY(115%);
  transition: transform .95s cubic-bezier(.16, 1, .3, 1);
}
.page-hero__inner.is-visible .product-hero__title .line > span { transform: none; }
.page-hero__inner.is-visible .product-hero__title .line:nth-child(1) > span { transition-delay: .04s; }
.page-hero__inner.is-visible .product-hero__title .line:nth-child(2) > span { transition-delay: .12s; }
.page-hero__inner.is-visible .product-hero__title .line:nth-child(3) > span { transition-delay: .2s; }

.product-hero .page-hero__inner > p:not(.crumb):not(.kicker) {
  max-width: min(30rem, 100%);
  color: rgba(255, 255, 255, .58);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.72;
}

/* ---- buttons ----------------------------------------------------- */
.product-hero .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.product-hero .button {
  min-height: 52px;
  padding: 0 27px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .01em;
  transition:
    transform .25s cubic-bezier(.16, 1, .3, 1),
    box-shadow .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease;
}
.product-hero .button--light {
  color: #14101a;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 34px -18px rgba(0, 0, 0, .75);
}
.product-hero .button--light:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -18px rgba(150, 110, 225, .55), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.product-hero .button--outline {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .035);
  backdrop-filter: blur(8px);
}
.product-hero .button--outline:hover {
  transform: translateY(-3px);
  border-color: rgba(199, 168, 255, .5);
  background: rgba(199, 168, 255, .09);
  box-shadow: 0 20px 44px -22px rgba(124, 58, 237, .6);
}
.product-hero .button:active { transform: translateY(-1px); }
.product-hero .button:focus-visible { outline: 2px solid rgba(199, 168, 255, .85); outline-offset: 3px; }

/* ---- navigation accent (scoped to pages with this hero) --------- */
body:has(.product-hero) .site-header.is-stuck {
  background: rgba(7, 5, 11, .7);
  border-color: rgba(255, 255, 255, .07);
  backdrop-filter: blur(20px) saturate(1.3);
}
body:has(.product-hero) .site-header:not(.is-stuck) .nav-links a[aria-current="page"] {
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

/* ---- right column: optical glass samples ----------------------- */
.film-sheets { min-height: 470px; overflow: visible; }
.glass-stage {
  position: absolute;
  inset: 0;
  perspective: 1500px;
  transform-style: preserve-3d;
  isolation: isolate;
  --mx: 0;
  --my: 0;
}
.film-sheets.has-media .glass-stage { display: none; }

/* right column · finished product render (old.png) — let it flow at its
   natural aspect; its near-black ground blends into the dark hero */
.product-hero .film-sheets.has-media { min-height: 0; }
.product-hero .film-sheets.has-media > img {
  position: relative;
  inset: auto;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
  filter: drop-shadow(0 40px 70px rgba(0, 0, 0, .5));
}
.product-hero .film-sheets.has-media::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96%;
  aspect-ratio: 1 / .72;
  transform: translate(-50%, -50%);
  z-index: 0;
  background: radial-gradient(closest-side, rgba(133, 74, 240, .24), rgba(124, 58, 237, .06) 55%, transparent 78%);
  filter: blur(12px);
  pointer-events: none;
}

.glass-stage__glow {
  position: absolute;
  left: 52%;
  top: 46%;
  width: min(82%, 560px);
  aspect-ratio: 1 / .86;
  transform: translate3d(calc(-50% + var(--mx) * 30px), calc(-50% + var(--my) * 24px), 0);
  background: radial-gradient(closest-side, rgba(133, 74, 240, .26), rgba(124, 58, 237, .08) 54%, transparent 78%);
  filter: blur(6px);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.glass-stage__car {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92%, 560px);
  height: auto;
  opacity: .5;
  transform: translate3d(calc(-50% + var(--mx) * 14px), calc(-50% + var(--my) * 10px), 0);
  -webkit-mask-image: radial-gradient(72% 70% at 50% 46%, #000 38%, transparent 80%);
  mask-image: radial-gradient(72% 70% at 50% 46%, #000 38%, transparent 80%);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.glass-stage__specks {
  position: absolute;
  inset: -12%;
  opacity: .6;
  background-image:
    radial-gradient(1.6px 1.6px at 22% 28%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.1px 1.1px at 68% 20%, rgba(255, 255, 255, .34), transparent 60%),
    radial-gradient(1.5px 1.5px at 83% 62%, rgba(199, 168, 255, .45), transparent 60%),
    radial-gradient(1.1px 1.1px at 37% 78%, rgba(255, 255, 255, .3), transparent 60%),
    radial-gradient(1.3px 1.3px at 52% 46%, rgba(255, 255, 255, .4), transparent 60%),
    radial-gradient(1.1px 1.1px at 12% 58%, rgba(243, 170, 44, .28), transparent 60%);
  animation: speckDrift 26s ease-in-out infinite alternate;
}
@keyframes speckDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(9px, -11px, 0); }
}

.glass-stage__floor {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: min(66%, 350px);
  height: 42px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .62), transparent 72%);
  filter: blur(13px);
}

.glass-slot {
  position: absolute;
  inset: 0;
  transform: translate3d(calc(var(--mx) * var(--par, 0px)), calc(var(--my) * (var(--par, 0px) * .6)), 0);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.glass-slot--back { --par: 30px; z-index: 1; }
.glass-slot--front { --par: 26px; z-index: 2; }
.glass-slot--hero { --par: 13px; z-index: 3; }

.glass-sample {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 230px;
  height: 334px;
  border-radius: 5px 26px 5px 26px;
  transform-style: preserve-3d;
  will-change: transform;
}
.glass-sample--hero { width: 248px; height: 358px; }

.glass-sample > span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* base optical pane — thin glass with a faint smoked tint */
.glass-sample__tint {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 34%, rgba(8, 6, 12, .2) 78%),
    linear-gradient(200deg, rgba(124, 58, 237, .1), transparent 46%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -34px 60px rgba(6, 4, 10, .34),
    inset 0 0 34px rgba(160, 120, 220, .08),
    0 42px 60px -26px rgba(0, 0, 0, .6);
  backdrop-filter: blur(2px) saturate(1.05);
}
.glass-sample--hero .glass-sample__tint {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .04) 30%, rgba(6, 4, 10, .34) 82%),
    linear-gradient(200deg, rgba(124, 58, 237, .15), transparent 44%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -40px 76px rgba(4, 3, 8, .42),
    inset 0 0 40px rgba(170, 130, 235, .12),
    0 60px 90px -34px rgba(0, 0, 0, .72);
}
.glass-sample--front .glass-sample__tint {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .025) 32%, rgba(10, 7, 14, .3) 82%),
    linear-gradient(200deg, rgba(243, 170, 44, .07), transparent 44%);
}

/* soft violet / amber light refraction + internal reflection */
.glass-sample__refract {
  overflow: hidden;
  mix-blend-mode: screen;
  background:
    radial-gradient(130% 62% at 6% 0%, rgba(199, 168, 255, .32), transparent 60%),
    radial-gradient(90% 52% at 100% 100%, rgba(243, 170, 44, .14), transparent 55%);
}

/* travelling specular streak */
.glass-sample__sheen { overflow: hidden; }
.glass-sample__sheen::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -22%;
  width: 52%;
  height: 160%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28) 42%, rgba(255, 255, 255, .06) 58%, transparent);
  transform: rotate(8deg);
  filter: blur(2px);
}
.glass-sample--hero .glass-sample__sheen::before {
  animation: sheenDrift 7.5s ease-in-out infinite alternate;
}
@keyframes sheenDrift {
  from { transform: rotate(8deg) translateX(0); }
  to { transform: rotate(8deg) translateX(30px); }
}

/* delicate edge highlights (gradient hairline border) */
.glass-sample__rim {
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(150deg,
    rgba(255, 255, 255, .6),
    rgba(199, 168, 255, .28) 24%,
    transparent 46%,
    transparent 62%,
    rgba(243, 170, 44, .22) 82%,
    rgba(255, 255, 255, .42));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.glass-sample > span.glass-sample__label {
  inset: auto auto 15px 16px;
  width: auto;
  height: auto;
  border-radius: 0;
  font: 800 9px/1 Inter, Arial, sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.glass-sample--hero .glass-sample__label { color: rgba(255, 255, 255, .78); }

/* resting poses (0%/100% keyframe = reduced-motion resting state) */
.glass-sample--back { animation: glassBack 11s ease-in-out infinite; }
.glass-sample--hero { animation: glassHero 9s ease-in-out infinite; }
.glass-sample--front { animation: glassFront 13s ease-in-out infinite; animation-delay: -3s; }

@keyframes glassBack {
  0%, 100% { transform: translate(-50%, -50%) translate(-92px, -12px) rotateY(22deg) rotateZ(-5deg) scale(.8); }
  50% { transform: translate(-50%, -50%) translate(-92px, -23px) rotateY(22deg) rotateZ(-5deg) scale(.8); }
}
@keyframes glassHero {
  0%, 100% { transform: translate(-50%, -50%) translate(4px, 6px) rotateY(-13deg) rotateZ(1deg) scale(1.05); }
  50% { transform: translate(-50%, -50%) translate(4px, -7px) rotateY(-13deg) rotateZ(1deg) scale(1.05); }
}
@keyframes glassFront {
  0%, 100% { transform: translate(-50%, -50%) translate(110px, 40px) rotateY(-24deg) rotateZ(7deg) scale(.88); }
  50% { transform: translate(-50%, -50%) translate(110px, 30px) rotateY(-24deg) rotateZ(7deg) scale(.88); }
}

/* ---- responsive ------------------------------------------------- */
@media (min-width: 1440px) {
  .product-hero { min-height: 720px; }
  .glass-sample { width: 244px; height: 352px; }
  .glass-sample--hero { width: 264px; height: 380px; }
}
@media (max-width: 900px) {
  .product-hero .page-hero__inner { max-width: 640px; }
  .film-sheets { min-height: 430px; margin-top: 6px; }
  .glass-sample { width: 210px; height: 302px; }
  .glass-sample--hero { width: 226px; height: 324px; }
}
@media (max-width: 620px) {
  .product-hero { min-height: 0; }
  .product-hero__title { letter-spacing: -.028em; }
  .product-hero .kicker { flex-wrap: wrap; gap: 9px; letter-spacing: .2em; font-size: 10px; }
  .product-hero .kicker::before { display: none; }
  .film-sheets { min-height: 366px; }
  .glass-sample { width: 168px; height: 244px; }
  .glass-sample--hero { width: 186px; height: 268px; }
  @keyframes glassBack {
    0%, 100% { transform: translate(-50%, -50%) translate(-62px, -22px) rotateY(20deg) rotateZ(-5deg) scale(.82); }
    50% { transform: translate(-50%, -50%) translate(-62px, -32px) rotateY(20deg) rotateZ(-5deg) scale(.82); }
  }
  @keyframes glassFront {
    0%, 100% { transform: translate(-50%, -50%) translate(76px, 34px) rotateY(-22deg) rotateZ(7deg) scale(.9); }
    50% { transform: translate(-50%, -50%) translate(76px, 26px) rotateY(-22deg) rotateZ(7deg) scale(.9); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-hero__title .line > span { transform: none; }
  .glass-stage__specks,
  .glass-sample--hero .glass-sample__sheen::before { animation: none; }
}

/* =====================================================================
   PRODUCTS HERO · larger product render + edge-blend into the stage
   Appended last so it wins over the earlier .film-sheets.has-media rules.
   ===================================================================== */

/* Show the WHOLE render inside its column — no width blow-out, no bleed
   past the page edge. object-fit: contain keeps the full car + tubes
   visible; a tight edge feather melts the near-black ground into the
   dark hero without hiding any of the car. */
.product-hero .film-sheets.has-media {
  position: relative;
  min-height: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-hero .film-sheets.has-media > img {
  position: relative;
  inset: auto;
  width: 114%;
  max-width: 114%;
  height: auto;
  max-height: min(86vh, 760px);
  margin-right: -8%;              /* grow into the empty space on the right */
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  filter: none;
  margin-block: 0;
  margin-left: 0;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 4%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image:
    linear-gradient(to right,  transparent 0, #000 4%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.product-hero .film-sheets.has-media::after {
  width: 100%;
  background: radial-gradient(closest-side, rgba(133, 74, 240, .22), rgba(124, 58, 237, .05) 55%, transparent 80%);
}

@media (min-width: 901px) {
  .product-hero__grid { grid-template-columns: .82fr 1.18fr; gap: 32px; }
}

@media (max-width: 900px) {
  .product-hero .film-sheets.has-media > img { width: 100%; max-width: 820px; margin-right: 0; }
  .product-hero .film-sheets.has-media { max-width: 820px; margin-inline: auto; }
}

/* =====================================================================
   UV99 +1 product card · show the full-height packaging render.
   Its art (uv99-plus-one.png, ~2:3) is taller than the other packshots, so the
   shared `object-fit: cover` was clipping the tube tops and the base
   logo. `contain` on the dark media panel shows the whole render; the
   near-black ground blends the side margins into the panel.
   ===================================================================== */
.product-card--premium .product-media { min-height: 440px; background: #0b0910; }
.product-card--premium .media-slot > img {
  object-fit: contain;
  object-position: center;
  padding: 22px 12px;
}
.product-card--premium:hover .media-slot > img { transform: none; }

@media (min-width: 901px) {
  /* narrower media column → less empty space around the portrait render */
  .product-card--premium { grid-template-columns: .82fr 1.18fr; }
}
@media (max-width: 900px) {
  .product-card--premium .product-media { min-height: 380px; }
}

/* =====================================================================
   UV99 EXPERIENCE · windshield film simulator FX layer   (films.html)
   ---------------------------------------------------------------------
   Every effect lives in one inline SVG (.uvx__fx) that shares
   DEGREE.png's 1690x931 coordinate space, so alignment holds at any
   size. ONLY the nodes inside <g clip-path="url(#uvxWind)"> tint the
   glass — the car body, lights, background and side glass are untouched.

   Per-film values come straight from the existing render() config via
   CSS custom properties already set on #uv99-experience:
     --uvx-tint-a   glass darkening        (from VLT)
     --uvx-block    0..1 heat-reject power (normalised across the range)
     --uvx-accent-rgb / --uvx-warm / --uvx-heat
   GPU-friendly: animation touches opacity + transform only. Honours
   prefers-reduced-motion. No layout-affecting properties animate.
   ===================================================================== */

.uvx .uvx__film { display: none; }   /* retire the old full-scene wash; windshield-only now */

.uvx__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;                 /* above .uvx__photo (0) + vignette (1), below .uvx__cabin (3) */
  pointer-events: none;
  overflow: visible;
}

/* ---- sun source (upper-left, over the baked-in sun) ------------------ */
.uvx__sun { transform-box: fill-box; transform-origin: center; opacity: .9; }

/* ---- film tint, clipped to the windscreen -------------------------- */
.uvx__glass {
  fill: #14101a;
  fill-opacity: var(--uvx-tint-a, .12);
  transition: fill-opacity .8s cubic-bezier(.4, 0, .2, 1);
}
.uvx__glassAccent {
  fill: rgb(var(--uvx-accent-rgb, 143, 74, 158));
  fill-opacity: calc(var(--uvx-tint-a, .12) * .5);
  mix-blend-mode: overlay;
  transition: fill-opacity .8s cubic-bezier(.4, 0, .2, 1);
}

/* ---- heat + glare transmitted INTO the cabin; recedes as the film
        rejects more solar energy --------------------------------------- */
.uvx__cabinGlare {
  opacity: calc(.52 - var(--uvx-block, 0) * .42);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .8s ease;
}

/* ---- incoming solar attack — ALWAYS visible, film or not ------------ */
.uvx__rays path { opacity: .22; }
.uvx__rays--heat path { stroke-width: 3.4; stroke-dasharray: 20 16; }
.uvx__rays--uv   path { stroke-width: 1.6; stroke-dasharray: 14 14; }

/* ---- rays that hit the active film: bend up, scatter, cool to
        violet/cyan; brightness tracks the film's rejection power ------- */
.uvx__rays--refl {
  opacity: calc(.1 + var(--uvx-block, 0) * .9);
  transition: opacity .8s ease;
}
.uvx__rays--refl path { stroke-width: 2.2; opacity: 0; }

.uvx__spark circle { opacity: 0; transform-box: fill-box; transform-origin: center; }

/* ---- luminous activation edge — scans the windscreen only --------- */
.uvx__scan { opacity: 0; }
.uvx__scene.is-scanning .uvx__scan {
  animation: uvx-scan 880ms cubic-bezier(.4, 0, .2, 1) both;   /* ~0.7-1s, deliberate */
}
@keyframes uvx-scan {
  0%   { opacity: 0;   transform: translateX(300px); }
  14%  { opacity: 1; }
  86%  { opacity: .92; }
  100% { opacity: 0;   transform: translateX(1620px); }
}
/* the new tint eases in just behind that edge */
.uvx__scene.is-scanning .uvx__glass,
.uvx__scene.is-scanning .uvx__glassAccent {
  transition: fill-opacity .9s cubic-bezier(.4, 0, .2, 1) .12s;
}

/* ---- selector: violet glow + animated status dot ------------------- */
.uvx__btn { display: inline-flex; align-items: center; gap: 8px; }
.uvx__btn-dot {
  width: 7px; height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  transition: background .3s ease, box-shadow .3s ease;
}
.uvx__btn.is-active .uvx__btn-dot {
  background: #c7a2ff;
  box-shadow: 0 0 0 3px rgba(199, 162, 255, .22), 0 0 10px rgba(199, 162, 255, .85);
}
.uvx__btn.is-active {
  box-shadow:
    0 0 0 1px rgba(var(--uvx-accent-rgb), .5),
    0 0 22px rgba(var(--uvx-accent-rgb), .45),
    0 0 46px -6px rgba(139, 92, 246, .55),
    0 18px 44px -18px rgb(var(--uvx-accent-rgb));
}

/* ---- cabin panel: LIVE label + bare-glass baseline ---------------- */
.uvx__temp-base {
  display: block;
  margin-top: 3px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
}

/* ---- motion: full life only when the visitor allows it ------------ */
@media (prefers-reduced-motion: no-preference) {
  .uvx__sun             { animation: uvx-sun 6s ease-in-out infinite; }
  .uvx__rays--heat path  { animation: uvx-ray 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .26s); }
  .uvx__rays--uv path    { animation: uvx-ray 2.1s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .3s + .12s); }
  .uvx__rays--refl path  { animation: uvx-ray-up 2.9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .2s); }
  .uvx__cabinGlare       { animation: uvx-breathe 4.2s ease-in-out infinite; }
  .uvx__shimmer rect     { animation: uvx-shim 5.4s linear infinite; }
  .uvx__shimmer rect:nth-child(2) { animation-duration: 6.8s; animation-direction: reverse; }
  .uvx__shimmer rect:nth-child(3) { animation-duration: 6s; }
  .uvx__spark circle     { animation: uvx-spark 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .4s); }
}

/* ---- reduced motion: solar attack + selected film stay READABLE,
        just held still; particles & shimmer dialled right back ------- */
@media (prefers-reduced-motion: reduce) {
  .uvx__rays path      { opacity: .5; }
  .uvx__rays--refl path { opacity: calc(.2 + var(--uvx-block, 0) * .6); }
  .uvx__spark circle   { opacity: .22; }
  .uvx__shimmer        { opacity: .5; }
  .uvx__scene.is-scanning .uvx__scan { animation: none; }
}

@keyframes uvx-sun { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@keyframes uvx-ray {
  0%, 100% { opacity: .16; stroke-dashoffset: 72; }
  45%      { opacity: .8; }
}
@keyframes uvx-ray-up {
  0%, 100% { opacity: 0; }
  42%      { opacity: 1; }
}
@keyframes uvx-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes uvx-shim {
  0%   { opacity: 0;   transform: translateY(10px); }
  50%  { opacity: .1; }
  100% { opacity: 0;   transform: translateY(-16px); }
}
@keyframes uvx-spark {
  0%   { opacity: 0;   transform: translate(0, 0) scale(.6); }
  30%  { opacity: .9; }
  100% { opacity: 0;   transform: translate(-26px, -42px) scale(1); }
}


/* =====================================================================
   PRODUCTS PAGE - bespoke header + hero  (films.html only)
   ---------------------------------------------------------------------
   Self-contained "fh-" namespace. Does NOT touch the shared .site-header
   (other pages keep theirs) or any global token. Right-side composition
   reuses assets/old.png (black sedan + translucent hex optical layer +
   3 rising arrows + warm sun rays + floor reflection + UV99 packaging,
   all in one dark-ground render). Motion is CSS-only, gated by
   html.fh-anim, and fully disabled under prefers-reduced-motion.
   ===================================================================== */
.fh-header, .fh-hero {
  --fh-bg: #05050A;
  --fh-text: #F4F1F6;
  --fh-sub: #C5C0C8;
  --fh-purple: #A73BD2;
  --fh-purple-2: #7B1FB0;
  --fh-purple-deep: #5D167E;
  --fh-card-bg: rgba(17, 13, 24, .55);
  --fh-card-brd: rgba(183, 142, 232, .22);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- header ------------------------------------------------- */
.fh-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 40;
}
.fh-header__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: 94px;
  padding-inline: clamp(20px, 3.4vw, 40px);
  max-width: 1500px;
  margin-inline: auto;
}
.fh-logo { justify-self: start; display: block; margin-top: 4px; }
.fh-logo img {
  width: clamp(112px, 11vw, 140px);
  height: auto;
  filter: brightness(0) invert(1);
}
.fh-logo:focus-visible { outline: 2px solid var(--fh-purple); outline-offset: 6px; border-radius: 4px; }

.fh-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 38px);
}
.fh-nav a {
  position: relative;
  padding: 6px 2px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .005em;
  color: rgba(244, 241, 246, .82);
  transition: color .2s ease;
}
.fh-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1.5px;
  background: var(--fh-purple);
  transition: right .28s cubic-bezier(.4, 0, .2, 1);
}
.fh-nav a:hover { color: #fff; }
.fh-nav a:hover::after { right: 0; }
.fh-nav a:focus-visible { outline: 2px solid var(--fh-purple); outline-offset: 4px; border-radius: 4px; }

.fh-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--fh-purple-2), var(--fh-purple));
  box-shadow: 0 8px 26px -10px rgba(167, 59, 210, .7), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.fh-cta:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 30px -10px rgba(167, 59, 210, .8), inset 0 1px 0 rgba(255, 255, 255, .22); }
.fh-cta:active { transform: translateY(0); }
.fh-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.fh-arrow { width: 17px; height: 17px; flex: none; }

.fh-burger { display: none; }

/* ---------- hero shell ------------------------------------------- */
.fh-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* vertically centre the text/CTA/stat-card column so it lines up with the
     car artwork, which is centred independently via top:50% below */
  justify-content: center;
  /* the shared .site-header is a transparent sticky bar (78px); pull the hero
     up under it like index.html does, so the artwork bleeds behind the nav */
  margin-top: -78px;
  /* hug the content instead of forcing a near-full-viewport box — a taller
     fixed height than the text/cards need left a hollow band of empty
     background under them */
  min-height: clamp(560px, 84vh, 680px);
  /* horizontal gutter matches .wrap — min(1180px, 100% - 40px) centred —
     so the hero content lines up with "See the film do its job." below */
  padding: 94px max(20px, calc((100% - 1180px) / 2)) 48px;
  background: var(--fh-bg);
  color: var(--fh-text);
}
.fh-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fh-hero__glow { position: absolute; border-radius: 50%; }
.fh-hero__glow--violet {
  width: 900px; height: 620px;
  right: 4%; bottom: -14%;
  background: radial-gradient(closest-side, rgba(122, 40, 190, .34), rgba(93, 22, 126, .12) 46%, transparent 72%);
  filter: blur(18px);
}
.fh-hero__glow--sun {
  width: 620px; height: 500px;
  right: -10%; top: -26%;
  background: radial-gradient(closest-side, rgba(255, 176, 92, .14), rgba(255, 138, 42, .05) 42%, transparent 70%);
  filter: blur(10px);
}

/* ---------- right-side composition (old.png) ------------------- */
.fh-hero__visual {
  position: absolute;
  /* nudged right (was 7%) so the car doesn't sit under the headline/CTA text */
  right: 1%;
  top: 50%;
  width: 68%;
  max-width: 1040px;
  aspect-ratio: 1848 / 851;
  z-index: 1;
  transform: translateY(-50%) translate(calc(var(--fh-mx, 0) * 10px), calc(var(--fh-my, 0) * 6px));
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.fh-hero__car {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* the product photo is a full-bleed studio shot — feather every edge so
     its dark ground dissolves into the section instead of showing a box.
     The left fade is extended (was 9%) so the car body stays translucent
     through the zone the headline/CTA text sits over, instead of the
     solid hood/headlight showing through under the copy. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 36%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 88%, transparent 100%);
          mask-image:
    linear-gradient(to right, transparent 0, #000 36%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.fh-hero__annot {
  position: absolute;
  top: 13%;
  right: clamp(4%, 9vw, 12%);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: rgba(244, 241, 246, .92);
  white-space: nowrap;
}
.fh-hero__annot-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--fh-purple); box-shadow: 0 0 8px rgba(167, 59, 210, .9); flex: none; }
.fh-hero__annot-leader { width: 54px; height: 1px; background: linear-gradient(to right, rgba(167, 59, 210, .1), rgba(255, 255, 255, .5)); flex: none; }

/* ---------- left content ------------------------------------------- */
.fh-hero__content {
  position: relative;
  z-index: 3;
  align-self: flex-start;
  width: min(640px, 100%);
  margin-top: 24px;
}
.fh-hero__pre {
  margin: 0 0 11px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(197, 192, 200, .6);
}
.fh-hero__eyebrow {
  margin: 0 0 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fh-purple);
}
.fh-hero__headline {
  margin: 0 0 15px;
  max-width: 100%;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 4.55vw, 53px);
  line-height: 1.07;
  letter-spacing: -.018em;
  color: var(--fh-text);
}
.fh-line { display: block; overflow: hidden; }
.fh-line > span { display: block; white-space: nowrap; }
.fh-hero__body {
  margin: 0 0 18px;
  max-width: 420px;
  font-size: 16px;
  line-height: 1.58;
  color: var(--fh-sub);
}
.fh-hero__body strong { color: var(--fh-purple); font-weight: 700; }

.fh-hero__cta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.fh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 200px;
  height: 52px;
  padding: 0 24px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--fh-purple-2) 0%, var(--fh-purple) 100%);
  box-shadow: 0 14px 34px -14px rgba(167, 59, 210, .8), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.fh-btn:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 20px 40px -14px rgba(167, 59, 210, .9), inset 0 1px 0 rgba(255, 255, 255, .26); }
.fh-btn:active { transform: translateY(0); }
.fh-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.fh-link {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--fh-sub);
  transition: color .2s ease;
}
.fh-link > span { position: relative; }
.fh-link > span::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transition: right .26s ease;
}
.fh-link::after {
  content: "";
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  width: 46px;
  height: 1px;
  background: linear-gradient(to right, var(--fh-purple), rgba(167, 59, 210, .15));
}
.fh-link:hover { color: var(--fh-text); }
.fh-link:hover > span::after { right: 0; }
.fh-link:focus-visible { outline: 2px solid var(--fh-purple); outline-offset: 4px; border-radius: 3px; }

/* ---------- feature cards --------------------------------------- */
.fh-hero__cards {
  position: relative;
  z-index: 4;
  margin: clamp(18px, 3.6vh, 38px) 0 clamp(18px, 3vh, 30px);
  padding: 0;
  display: flex;
  gap: 16px;
  list-style: none;
}
.fh-card {
  width: 172px;
  min-height: 100px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 16px;
  border: 1px solid var(--fh-card-brd);
  background: var(--fh-card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.fh-card__icon { width: 26px; height: 26px; color: var(--fh-purple); }
.fh-card__icon svg { width: 100%; height: 100%; }
.fh-card__value { margin: auto 0 0; font-family: Inter, Arial, sans-serif; font-size: 30px; font-weight: 700; line-height: 1; }
.fh-card__value strong { color: var(--fh-purple); font-weight: 700; }
.fh-card__label { margin: 0; font-size: 13px; font-weight: 500; color: var(--fh-sub); }
.fh-card__label--lead { margin-top: auto; font-size: 15px; font-weight: 600; color: var(--fh-text); }
/* nudge the "3 Year Warranty" label slightly right */
.fh-card:last-child .fh-card__label--lead { margin-left: 16px; }

/* =====================================================================
   ENTRANCE MOTION - transform + opacity only, gated by html.fh-anim.
   No gate  ->  everything visible (covers no-JS + reduced-motion).
   ===================================================================== */
html.fh-anim .fh-hero__pre,
html.fh-anim .fh-hero__eyebrow,
html.fh-anim .fh-line > span,
html.fh-anim .fh-hero__body,
html.fh-anim .fh-hero__cta,
html.fh-anim .fh-hero__annot,
html.fh-anim .fh-card { opacity: 0; }
html.fh-anim .fh-hero__car { opacity: 0; }

html.fh-anim .fh-hero__pre { animation: fh-rise .6s cubic-bezier(.16, 1, .3, 1) 0s both; }
html.fh-anim .fh-hero__eyebrow { animation: fh-rise .7s cubic-bezier(.16, 1, .3, 1) .12s both; }
html.fh-anim .fh-line:nth-child(1) > span { animation: fh-rise .8s cubic-bezier(.16, 1, .3, 1) .18s both; }
html.fh-anim .fh-line:nth-child(2) > span { animation: fh-rise .8s cubic-bezier(.16, 1, .3, 1) .30s both; }
html.fh-anim .fh-line:nth-child(3) > span { animation: fh-rise .8s cubic-bezier(.16, 1, .3, 1) .42s both; }
html.fh-anim .fh-hero__body { animation: fh-rise .7s cubic-bezier(.16, 1, .3, 1) .58s both; }
html.fh-anim .fh-hero__cta { animation: fh-rise .7s cubic-bezier(.16, 1, .3, 1) .62s both; }
html.fh-anim .fh-hero__car { animation: fh-car 1.1s cubic-bezier(.22, .61, .36, 1) .15s both; }
html.fh-anim .fh-hero__annot { animation: fh-fade .8s ease .95s both; }
html.fh-anim .fh-card:nth-child(1) { animation: fh-rise .6s cubic-bezier(.16, 1, .3, 1) 1s both; }
html.fh-anim .fh-card:nth-child(2) { animation: fh-rise .6s cubic-bezier(.16, 1, .3, 1) 1.1s both; }
html.fh-anim .fh-card:nth-child(3) { animation: fh-rise .6s cubic-bezier(.16, 1, .3, 1) 1.2s both; }

@keyframes fh-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fh-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fh-car  { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  html.fh-anim .fh-hero__pre,
  html.fh-anim .fh-hero__eyebrow,
  html.fh-anim .fh-line > span,
  html.fh-anim .fh-hero__body,
  html.fh-anim .fh-hero__cta,
  html.fh-anim .fh-hero__annot,
  html.fh-anim .fh-hero__car,
  html.fh-anim .fh-card { opacity: 1; animation: none; transform: none; }
}

/* =====================================================================
   RESPONSIVE - below 1300px the hero stacks into a normal column instead
   of overlapping the car photo with the headline/CTA text — at in-between
   desktop widths there isn't room for both side by side without the car
   showing through under the copy.
   ===================================================================== */
@media (max-width: 1300px) {
  .fh-hero {
    min-height: 0;
    padding-top: 92px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
  }
  .fh-hero__content { position: static; order: 1; max-width: 560px; margin: 8px 0 0; }
  .fh-hero__visual {
    position: relative;
    order: 2;
    right: auto; top: auto; bottom: auto;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 1480 / 851;
    margin: 24px auto 0;
    transform: none;
  }
  .fh-hero__cards { order: 3; }
  .fh-hero__car {
    object-position: 32% center;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 6%, #000 74%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 7%, #000 90%, transparent 100%);
            mask-image:
      linear-gradient(to right, transparent 0, #000 6%, #000 74%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 7%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  .fh-hero__annot { top: 10%; right: 8%; }
  .fh-hero__cards {
    position: static;
    margin: 26px auto 0;
    width: 100%;
    max-width: 560px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .fh-card { width: auto; min-height: 0; }
}

@media (max-width: 1000px) {
  .fh-header__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 74px; }
  .fh-nav {
    position: fixed;
    inset: 74px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 20px 22px;
    background: rgba(8, 6, 12, .97);
    border-bottom: 1px solid var(--fh-card-brd);
    backdrop-filter: blur(16px);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .fh-header.is-open .fh-nav { opacity: 1; visibility: visible; transform: none; }
  .fh-nav a { padding: 14px 6px; font-size: 16px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
  .fh-nav a::after { display: none; }
  .fh-cta { height: 40px; padding: 0 16px; font-size: 13.5px; }
  .fh-logo { margin-right: auto; }
  .fh-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px; height: 42px;
    order: 3;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .fh-cta { order: 2; }
  .fh-burger span { display: block; width: 22px; height: 2px; margin-inline: auto; background: #fff; border-radius: 2px; transition: .2s; }
  .fh-header.is-open .fh-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .fh-header.is-open .fh-burger span:nth-child(2) { opacity: 0; }
  .fh-header.is-open .fh-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 560px) {
  .fh-hero__headline { font-size: clamp(30px, 8.6vw, 40px); }
  .fh-line > span { white-space: normal; }
  .fh-hero__body { font-size: 16.5px; }
  .fh-hero__cards { grid-template-columns: 1fr; }
  .fh-btn { width: 100%; }
  .fh-hero__cta { gap: 16px; }
  .fh-link::after { display: none; }
}

/* =====================================================================
   MOBILE POLISH — targeted fixes for phone layouts (<=900 / <=600).
   Added after all other rules so it wins without !important where
   possible. Keeps desktop untouched.
   ===================================================================== */
@media (max-width: 900px) {
  /* The cinematic hero "film strip" (.upo-strip) is purely decorative and
     collapses to an empty dark band on phones — drop it so the guard bar
     flows straight into the next section. */
  .upo-strip { display: none !important; }

  /* "The UV99 Standard" is animated in by GSAP/ScrollTrigger; on a phone the
     trigger is easy to miss and the eyebrow / headline / spec panel can stay
     invisible. Pin the readable resting state — the entrance is desktop polish
     only — and let the headline wrap naturally instead of clipping a line. */
  .std99__line { overflow: visible; }
  .std99__line > span { transform: none !important; opacity: 1 !important; }
  .std99__eyebrow,
  .std99__copy,
  .std99__panel,
  .std99 [data-reveal-value] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .std99__headline {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.16;
    max-width: none;
  }

  /* Tighten the tall desktop vertical rhythm so sections don't leave big
     black gaps between them on a phone. */
  .section { padding: 56px 0; }
  .std99 { padding: 56px 0; }
  .std99__panel { margin-top: 32px; }
  .dark-cta { padding: 52px 0; }
  .dark-cta h2 { font-size: 30px; }
}

@media (max-width: 600px) {
  /* Landing hero stat row: 3 even columns read better than a 2 + 1 wrap. */
  .upo-stats { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 14px !important; }
  .upo-stat { width: auto !important; padding: 0 !important; border-left: 0 !important; text-align: left; }
  .upo-stat:nth-child(2) { padding-left: 0 !important; border-left: 0 !important; }
  .upo-stat__value { font-size: clamp(1.05rem, 5vw, 1.35rem); }
  .upo-stat__label { font-size: 10px; }

  /* Guard-bar note was near-invisible at the clamped floor size. */
  .uv-guardbar__note { font-size: 11px; line-height: 1.6; }

  .section { padding: 48px 0; }
  .std99 { padding: 48px 0; }
}