/* =====================================================================
   UV99+1 — Advanced UV Protection. Extra Cooling.
   Standalone cinematic product page.  HTML + CSS + JS (GSAP optional).
   ---------------------------------------------------------------------
   Editing map:
     :root ............ palette, spacing, type scale
     .upo-rail ........ fixed left navigation rail
     .upo-watermark ... giant vertical brand mark
     .upo-hero ........ hero shell (stage + content)
     .upo-stage ....... the cinematic composition (photoreal render + float + light sweep)
     .upo-hero__content  right-aligned editorial column
     .upo-strip ....... bottom film strip
     .upo-section ..... scroll sections (technology / performance)
     .upo-cta ......... closing call to action
   ===================================================================== */

:root {
  --bg:            #05060b;
  --bg-2:          #0a0b13;
  --ink:           #f4f5f8;
  --ink-soft:      rgba(255, 255, 255, .62);
  --ink-faint:     rgba(255, 255, 255, .38);
  --line:          rgba(255, 255, 255, .12);

  --amber:         #ff7a34;
  --amber-soft:    #ffa05a;
  --blue:          #57a4ff;
  --blue-soft:     #8ec2ff;
  --violet:        #6d28d9;
  --violet-deep:   #4c1d95;

  --rail-w:        clamp(116px, 10vw, 168px);
  --edge:          clamp(18px, 3.4vw, 52px);
  --strip-h:       clamp(112px, 14vh, 168px);
  /* shared left edge for every section's text column — matches the
     centered .upo-section (max-width: 1180px) content start exactly,
     so the hero can align to it too despite being absolutely positioned */
  --content-x:     calc((100vw - min(100vw, 1180px)) / 2 + var(--edge));

  --font:          'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --h1:            clamp(2.2rem, 4.1vw, 3.5rem);
  --h2:            clamp(1.9rem, 3.4vw, 3rem);
  --ease:          cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.upo {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* fixed ambient lighting behind everything */
body.upo::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38vw 40vw at 39% 33%, rgba(255, 122, 45, .18), transparent 60%),
    radial-gradient(40vw 46vw at 52% 40%, rgba(60, 120, 255, .16), transparent 63%),
    radial-gradient(82vw 62vw at 50% 118%, rgba(42, 26, 78, .58), transparent 72%),
    var(--bg);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* overflow clipping lives here, not on body — overflow-x:hidden on body
   is a known trigger for fixed-position elements (the rail/logo) to
   misbehave or vanish mid-scroll on mobile Safari */
main { position: relative; z-index: 1; overflow-x: hidden; }

.upo-skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 10px 16px;
  background: #fff;
  color: #000;
  border-radius: 6px;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.upo-skip:focus { transform: none; }

/* ============================================================
   LEFT NAV RAIL
   ============================================================ */
.upo-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--rail-w);
  padding: clamp(22px, 3vw, 34px) 0 clamp(22px, 3vw, 34px) clamp(16px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.upo-rail__logo {
  width: clamp(74px, 6vw, 96px);
  color: #fff;
}
.upo-rail__logo img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.upo-rail__nav {
  margin-top: clamp(38px, 7vh, 74px);
  display: flex;
  flex-direction: column;
  gap: clamp(13px, 1.7vh, 19px);
}

.upo-rail__nav a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--ink-faint);
  transition: color .3s ease;
}
.upo-rail__nav a:hover { color: var(--ink-soft); }
.upo-rail__nav a.is-active { color: #fff; }
.upo-rail__nav a.is-active::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  width: 11px;
  height: 2px;
  background: var(--violet);
  transform: translateY(-50%);
  box-shadow: 0 0 10px rgba(139, 92, 246, .8);
}

.upo-rail__menu {
  display: none;
  margin-top: clamp(30px, 5vh, 44px);
  width: 46px;
  height: 46px;
  place-content: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease;
}
.upo-rail__menu:hover { border-color: rgba(255, 255, 255, .55); }
.upo-rail__menu span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: #fff;
  transition: transform .3s ease, opacity .3s ease;
}

/* lower-left supporting copy — sits at strip height, tied to the rail */
.upo-rail__note {
  margin: auto 0 0;
  padding-right: 10px;
  font-size: clamp(11px, .82vw, 13px);
  font-weight: 400;
  line-height: 1.42;
  color: rgba(255, 255, 255, .82);
}

/* ============================================================
   GIANT VERTICAL WATERMARK
   ============================================================ */
.upo-watermark {
  position: absolute;
  left: clamp(-14px, -0.9vw, -6px);
  bottom: clamp(88px, 15vh, 168px);   /* clears the rail note below it */
  z-index: 3;                 /* above the stage render, below the text column */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 700;
  font-size: clamp(58px, 10.5vw, 140px);
  line-height: .78;
  letter-spacing: -.05em;
  pointer-events: none;
  user-select: none;
}
.upo-watermark span:first-child {
  color: rgba(76, 29, 149, .45);
  -webkit-text-stroke: 1.2px rgba(76, 29, 149, .7);
}
.upo-watermark span:last-child {
  color: rgba(76, 29, 149, .75);
  font-size: .5em;
}

/* ============================================================
   HERO SHELL
   ============================================================ */
.upo-hero {
  position: relative;
  z-index: 1;
  min-height: 86vh;             /* upper hero — the bottom strip is the other 14vh */
  padding: 0 var(--edge) 0 var(--rail-w);
  overflow: hidden;
}
/* keep the composition tight on very tall / portrait displays */
@media (min-height: 1180px) and (min-width: 901px) {
  .upo-hero { min-height: 820px; }
}

.upo-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* soft hand-off into the bottom media strip — no hard cut */
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}

.upo-hero__content {
  position: absolute;
  z-index: 6;
  right: var(--edge);
  top: 9%;
  bottom: 5%;                    /* pulls the block slightly up from full-down */
  height: max-content;
  margin-block: auto;            /* vertical centering without transform (GSAP-safe) */
  width: min(430px, 33vw);
}
/* video hero: copy shares the same left edge as every section below it */
body.upo .upo-hero__content {
  right: auto;
  left: var(--content-x);
}
/* video hero, desktop: the background clip is a dolly-in shot (car grows from a
   speck to filling most of the frame — see CAR_STOPPED_AT in script.js) and the
   hero copy is timed to reveal only once it's parked on its final, closest frame.
   Measured on that resting frame, the car's leading edge sits at ~32% of the
   frame width; --upo-hero-car-x below is that measurement rounded down for a
   safety margin. Because the video is object-fit:cover and, at real desktop
   aspect ratios, scales to the viewport width with no horizontal crop, the same
   percentage holds at any viewport width — so the copy column is derived from
   it directly (not from fixed per-breakpoint pixel guesses) and stays clear of
   the car at 1366/1440/1536px and beyond. Promoting the column to a real flex
   item (instead of position:absolute + a hand-tuned left offset) is what keeps
   it anchored correctly as the viewport changes, per grid/flex over fixed
   positioning. */
@media (min-width: 901px) {
  body.upo .upo-hero {
    display: flex;
    align-items: center;
  }
  body.upo .upo-hero__content {
    --upo-hero-car-x: 30vw;
    position: static;
    height: auto;
    margin-block: 0;
    width: auto;
    max-width: min(440px, calc(var(--upo-hero-car-x) - var(--rail-w) - 32px));
  }
  /* the CTA pill is white-space:nowrap and won't shrink with the column on
     its own — below ~1150px the safe column gets narrower than the button's
     natural width, so without this it quietly overflows the boundary we just
     computed and creeps toward the car. Letting it wrap is the fallback that
     keeps the guarantee absolute at every width, not just the named ones. */
  body.upo .upo-hero__actions .upo-btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}
/* ---- headline ---- */
.upo-hero__headline {
  margin: 0 0 0 -16px;
  font-weight: 600;
  font-size: var(--h1);
  line-height: .99;
  letter-spacing: -.03em;
  text-align: left;
}
.upo-hero__headline .line {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;
}
.upo-hero__headline .line > span { display: block; }

/* UV99+1 hero headline: purple, no glow, over the video stage. */
body.upo .upo-hero__headline {
  color: var(--violet);
  transform: translateY(-14px);
  /* the safe-width column can get narrower than one word ("Advanced",
     "Protection.") near the 901px floor; .line's overflow:hidden (needed
     for the slide-up reveal) would otherwise clip that overflow invisibly
     instead of wrapping it */
  overflow-wrap: break-word;
}
/* UV99+1 page only (id is unique to pages/uv99-plus-one.html) — smaller headline */
#hero-headline {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
}

/* ---- lede ---- */
.upo-hero__lede {
  position: relative;
  margin: clamp(26px, 3.4vw, 40px) 0 0 -16px;
  padding-top: 20px;
  max-width: 38ch;
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
  font-weight: 700;
  color: var(--ink-soft);
}
.upo-hero__lede::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 2px;
  background: var(--violet);
  box-shadow: 0 0 12px rgba(139, 92, 246, .55);
}

/* UV99+1 hero lede: black text over the video stage. */
body.upo .upo-hero__lede {
  color: #0b0c10;
}

/* ---- actions ---- */
.upo-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(26px, 3vw, 38px);
}

.upo-btn {
  --pad: 15px 26px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: var(--pad);
  border-radius: 40px;
  background: linear-gradient(118deg, var(--violet-deep), var(--violet));
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 22px 46px -16px rgba(76, 29, 149, .65), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: box-shadow .35s ease, filter .35s ease;
}
.upo-btn:hover { box-shadow: 0 26px 54px -14px rgba(123, 63, 228, .8); filter: brightness(1.06); }
.upo-btn__arrow {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  color: #fff;
  transition: transform .3s var(--ease);
}
.upo-btn:hover .upo-btn__arrow { transform: translateX(3px); }
.upo-btn--lg { --pad: 18px 32px; font-size: 15px; }

.upo-textlink {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  padding-bottom: 3px;
  transition: color .3s ease, border-color .3s ease;
}
.upo-textlink:hover { color: #fff; border-color: #fff; }

/* ---- hero stats bar — lives below the hero, never over the video ---- */
.upo-hero-stats {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(28px, 4.5vw, 48px) var(--edge);
  background: var(--bg);
  transform: translateY(-24px);
}
/* ---- stats ---- */
.upo-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 3vw, 32px);
  margin: 0;
}
.upo-stat {
  min-width: 0;
  padding: 0 clamp(12px, 1.5vw, 22px);
  border-left: 1px solid var(--line);
  text-align: center;
}
.upo-stat:first-child { padding-left: 0; border-left: 0; }
.upo-stat__value {
  margin: 0;
  font-size: clamp(1.55rem, 2.3vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.upo-stat:nth-child(1) .upo-stat__value { color: var(--amber); }
.upo-stat:nth-child(2) .upo-stat__value { color: var(--blue); }
.upo-stat:nth-child(3) .upo-stat__value { color: #b98bff; }
.upo-stat:nth-child(4) .upo-stat__value { color: var(--amber-soft); }
.upo-stat__label {
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.35;
}

/* four columns in one row is too tight on phones — the value's min font
   size plus a long label word ("Transmission") forces the row past the
   viewport edge instead of wrapping, so drop to a 2x2 grid instead */
@media (max-width: 640px) {
  .upo-stats { grid-template-columns: repeat(2, 1fr); row-gap: clamp(20px, 5vw, 28px); }
  .upo-stat:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ============================================================
   CINEMATIC STAGE — layered (Reference Image 1)
   ------------------------------------------------------------
   .upo-stage__plate  rendered energy sphere + glass + platform (no box)
   .upo-stage__spark  drifting embers on the orange side
   .upo-stage__glow   platform light that slowly breathes
   .upo-stage__sweep  restrained light pass
   .upo-product       crisp CSS/SVG UV99+1 box, stood on the platform
   ============================================================ */
.upo-stage__scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  will-change: transform, opacity;
}

/* non-visual wrapper: owns the centre-left positioning + ambient float, so the
   ring layer inside can be rotated on its own transform without clobbering it */
.upo-stage__frame {
  position: absolute;
  top: 44%;
  left: 50%;
  --sx: -56%;                 /* pull sphere + platform to centre-left */
  width: min(1480px, 120%);
  aspect-ratio: 1376 / 768;   /* matches the render, so children can size in % */
  transform: translate(var(--sx), -50%);
  will-change: transform;
}
/* the video plate has no orb mask to window it down, so it needs the frame
   to just fill the stage instead of the oversized/offset box the mask relied on */
body.upo .upo-stage__frame {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  transform: none;
  /* the ambient "upo-float" keyframes translate by var(--sx)/±50% of the
     frame's own box — fine for the old small offset orb box, but this frame
     is now the full stage, so that same animation would drag most of the
     video off-screen. Not needed for a full-bleed video anyway. */
  animation: none;
}

.upo-stage__plate,
.upo-stage__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body.upo .upo-stage__plate {
  object-fit: cover;
  -webkit-mask-image: none;
  mask-image: none;
}

/* base render — everything except the orb (the orb disc is punched out) */
.upo-stage__plate {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 88%, transparent 100%),
    radial-gradient(19% 34% at 36% 39%, transparent 74%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 88%, transparent 100%),
    radial-gradient(19% 34% at 36% 39%, transparent 74%, #000 100%);
  mask-composite: intersect;
}

/* the circular energy orb layer — isolated from the base plate by the disc mask.
   Held static (no rotation) so the vortex reads as a fixed background element. */
.upo-stage__ring {
  z-index: 2;
  transform-origin: 36% 39%;
  -webkit-mask-image: radial-gradient(19% 34% at 36% 39%, #000 74%, transparent 100%);
  mask-image: radial-gradient(19% 34% at 36% 39%, #000 74%, transparent 100%);
}

.upo-stage__spark {
  position: absolute;
  left: 8%;
  top: 18%;
  width: 34%;
  height: 50%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(2px 2px at 20% 18%, #ffc98c, transparent 60%),
    radial-gradient(1.6px 1.6px at 8% 42%, #ff9a4d, transparent 60%),
    radial-gradient(2.2px 2.2px at 30% 60%, #ffd9ab, transparent 60%),
    radial-gradient(1.5px 1.5px at 14% 74%, #ff8a3a, transparent 60%),
    radial-gradient(1.8px 1.8px at 40% 34%, #ffb877, transparent 60%),
    radial-gradient(1.4px 1.4px at 4% 60%, #ff7d2f, transparent 60%),
    radial-gradient(2px 2px at 26% 88%, #ffcf9a, transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 66%, #ff9550, transparent 60%);
  filter: drop-shadow(0 0 6px rgba(255, 140, 60, .6));
  opacity: .9;
}

.upo-stage__glow {
  position: absolute;
  left: 49%;                  /* platform centre within the render */
  bottom: 12%;
  z-index: 3;
  width: 54%;
  height: 13%;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(150, 92, 240, .4), rgba(70, 120, 230, .16) 55%, transparent 78%);
  filter: blur(16px);
}
/* this "platform light" glow was built to sit under the static product
   render — over the real video it just reads as a stray purple smear */
body.upo .upo-stage__glow { display: none; }

/* rotating turntable highlight — sits over the platform in the render (Reference Image 2).
   A conic sheen inside a squashed-ellipse clip: the base platform photo stays put
   (heavy lower base = visually stable) while purple / blue / faint-amber light
   streaks sweep around, so the disc reads as a premium showroom turntable. */
.upo-stage__turntable {
  position: absolute;
  left: 49%;                  /* platform centre within the render — matches .upo-stage__glow */
  bottom: 8%;
  z-index: 3;                 /* above the energy orb (z2), below the product (z4) */
  width: 47%;
  height: 16%;
  transform: translateX(-50%);
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .5;
  transition: opacity .4s ease;
  -webkit-mask: radial-gradient(closest-side, #000 58%, rgba(0, 0, 0, .45) 80%, transparent 100%);
  mask: radial-gradient(closest-side, #000 58%, rgba(0, 0, 0, .45) 80%, transparent 100%);
}
/* same reasoning as .upo-stage__glow above — this sheen was tuned to sit on
   the static platform render, not screen-blend over real video footage */
body.upo .upo-stage__turntable { display: none; }
.upo-stage__turntable-spin {
  position: absolute;
  inset: -45%;                /* oversized so rotation never exposes a straight edge */
  border-radius: 50%;
  will-change: transform;
  background: conic-gradient(from 0deg,
    rgba(150, 105, 255, 0)   0deg,
    rgba(170, 120, 255, .55) 24deg,
    rgba(120, 165, 255, .12) 58deg,
    rgba(120, 165, 255, 0)   96deg,
    rgba(255, 150, 95, .30)  150deg,
    rgba(255, 150, 95, 0)    196deg,
    rgba(120, 165, 255, .34) 262deg,
    rgba(160, 110, 255, .5)  312deg,
    rgba(150, 105, 255, 0)   360deg);
}

.upo-stage__sweep {
  position: absolute;
  inset: 0;
  z-index: 5;                 /* crosses the product box too */
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  background: linear-gradient(101deg,
    transparent 40%,
    rgba(176, 202, 255, .05) 47%,
    rgba(214, 228, 255, .12) 50%,
    rgba(176, 202, 255, .05) 53%,
    transparent 62%);
}

/* ---- product box ---- */
/* positioning wrapper: centres the card on the platform in the render's own
   coordinate space, so it stays centred at every breakpoint (no pixel offsets) */
.upo-product-slot {
  position: absolute;
  left: 39%;                  /* centred over the podium / visual showcase area */
  bottom: 19%;
  z-index: 4;
  --slot-w: min(29vw, 408px); /* single size source — breakpoints override this var */
  width: var(--slot-w);
  transform: translateX(-50%);
}
/* .upo-product        — perspective host + GSAP intro target (opacity / yPercent)
   .upo-product__par   — pointer-parallax tilt (JS sets transform; nothing else touches it)
   .upo-product__lift  — vertical float + fixed downward tilt so the lid reads
   .upo-product__box   — continuous Y-axis spin; real 3D cuboid (front/back/left/right/top) */
.upo-product {
  position: relative;
  width: 100%;
  --w: var(--slot-w);
  --h: calc(var(--w) * 94 / 70);
  --d: calc(var(--w) * 0.2);  /* package depth */
  height: var(--h);
  perspective: 1300px;
  perspective-origin: 50% 42%;
  will-change: transform;
}
.upo-product__par {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .4s var(--ease);
}
.upo-product__lift {
  position: absolute;
  inset: 0;
  transform: rotateX(-5deg);
  transform-style: preserve-3d;
}
.upo-product__box {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
/* product photograph — replaces the procedural 3D package on the landing hero */
.upo-product__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 26px 52px rgba(0, 0, 0, .55));
  /* NEW.png is shot with the front tube already vertical — no counter-rotation,
     so the front tube stands dead straight (the rear keeps its baked-in lean). */
}
.upo-product__face {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--w);
  height: var(--h);
  margin-top: calc(var(--h) / -2);
  margin-left: calc(var(--w) / -2);
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(158deg, #8b44e2 0%, #5825b2 52%, #331a72 100%);
  /* blue rim on one edge, violet on the other — realistic package rim lighting */
  box-shadow:
    inset 3px 0 12px rgba(90, 170, 255, .26),
    inset -3px 0 14px rgba(180, 95, 255, .30),
    inset 0 0 60px rgba(255, 255, 255, .07),
    inset 0 -70px 90px rgba(0, 0, 0, .38);
}
.upo-product__face--front {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16% 12% 12%;
  backface-visibility: hidden;
  transform: translateZ(calc(var(--d) / 2));
}
.upo-product__face--back {
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  background: linear-gradient(202deg, #7d3ace 0%, #4a1f9c 55%, #2b1568 100%);
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
}
.upo-product__face--right {
  width: var(--d);
  margin-left: calc(var(--d) / -2);
  background: linear-gradient(#3b2080, #180b46);
  transform: translateX(calc(var(--w) / 2)) rotateY(90deg);
}
.upo-product__face--left {
  width: var(--d);
  margin-left: calc(var(--d) / -2);
  background: linear-gradient(#180b46, #3b2080);
  transform: translateX(calc(var(--w) / -2)) rotateY(-90deg);
}
.upo-product__face--top {
  height: var(--d);
  margin-top: calc(var(--d) / -2);
  background: linear-gradient(180deg, #6a34c4, #3a1d84);
  transform: translateY(calc(var(--h) / -2)) rotateX(90deg);
}
.upo-product__face::before {          /* hex technical pattern — every face */
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.16'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5z'/%3E%3Cpath d='M0 15l12.98-7.5V0M0 15v2.3M0 15l12.98 7.5M28 15l-13-7.5V0M28 15v2.3M28 15l-13 7.5M13.99 41v8M0 33.5L13.99 41M28 33.5L13.99 41'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 32px 56px;
}
.upo-product__face--front::after {   /* gloss sweep — front only */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, .15) 50%, transparent 60%);
}
.upo-product__shadow {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 82%;
  height: 12%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .58), rgba(0, 0, 0, .26) 55%, transparent 78%);
  filter: blur(7px);
  z-index: -1;
  pointer-events: none;
}
.upo-product__logo { position: relative; width: 70%; height: auto; }
.upo-product__logo--ghost { width: 58%; opacity: .22; }
.upo-product__plus {
  position: relative;
  margin-top: 5%;
  font-weight: 700;
  font-size: clamp(15px, 1.8vw, 25px);
  letter-spacing: .05em;
  color: #fff;
}
.upo-product__copy {
  position: absolute;
  left: 12%;
  right: 30%;
  bottom: 15%;
  font-size: clamp(8px, .8vw, 10.5px);
  line-height: 1.5;
  color: rgba(255, 255, 255, .84);
}
.upo-product__shield {
  position: absolute;
  right: 10%;
  bottom: 10%;
  width: 20%;
  max-width: 42px;
  height: auto;
  opacity: .92;
}
/* soft violet pool on the glossy disc — reads as the product's reflection without
   a mirrored rectangle that would fight the spin */
.upo-product__reflection {
  position: absolute;
  left: 50%;
  top: 95%;
  width: 92%;
  height: 34%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 28%, rgba(123, 58, 208, .4), rgba(123, 58, 208, .12) 46%, transparent 72%);
  filter: blur(6px);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000, transparent 80%);
  mask: linear-gradient(#000, transparent 80%);
}

@media (prefers-reduced-motion: no-preference) {
  .upo-stage__frame          { animation: upo-float 10s var(--ease) infinite alternate; }
  .upo-stage__glow           { animation: upo-glow-pulse 5.5s ease-in-out infinite; }
  .upo-stage__spark          { animation: upo-spark-drift 9s ease-in-out infinite alternate; }
  .upo-stage__sweep          { animation: upo-sweep 13s ease-in-out 2s infinite; }
  /* podium sheen held at a fixed angle — the disc reflection should read as
     still light on glass, not a spinning turntable */
  .upo-stage__turntable-spin { animation: none; transform: rotate(-24deg); }
  .upo-product__lift         { animation: upo-box-float 3.5s ease-in-out infinite alternate; }
  .upo-product__box          { animation: upo-spin 16s linear infinite; }
  .upo-product__photo        { animation: upo-photo-turn 12s ease-in-out infinite alternate; }
  .upo-product__shadow       { animation: upo-contact 8s ease-in-out infinite alternate; }

  /* JS adds .is-paused when the hero scrolls out of view or the tab is hidden */
  .upo-hero.is-paused .upo-stage__frame,
  .upo-hero.is-paused .upo-stage__glow,
  .upo-hero.is-paused .upo-stage__spark,
  .upo-hero.is-paused .upo-stage__sweep,
  .upo-hero.is-paused .upo-stage__turntable-spin,
  .upo-hero.is-paused .upo-product__lift,
  .upo-hero.is-paused .upo-product__box,
  .upo-hero.is-paused .upo-product__photo,
  .upo-hero.is-paused .upo-product__shadow { animation-play-state: paused; }

  /* pointer hover over the visual: gently quicker box, brighter podium sheen.
     Only animation-duration / opacity change — no stop, no reversal. */
  .upo-hero:hover .upo-product__box          { animation-duration: 12s; }
  .upo-hero:hover .upo-stage__turntable      { opacity: .56; }
}
@keyframes upo-float {
  from { transform: translate(var(--sx), calc(-50% - 5px)); }
  to   { transform: translate(var(--sx), calc(-50% + 5px)); }
}
@keyframes upo-box-float {          /* ~5px vertical float, tilt held constant */
  from { transform: translateY(-5px) rotateX(-5deg); }
  to   { transform: translateY(4px)  rotateX(-5deg); }
}
@keyframes upo-spin {              /* product: full 360° about Y */
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
@keyframes upo-photo-turn {        /* flat packshot: gentle 3D showcase sway about Y */
  from { transform: rotateY(-16deg); }
  to   { transform: rotateY(16deg); }
}
@keyframes upo-contact {          /* contact shadow breathes across each half-turn */
  from { transform: translateX(-50%) scaleX(.93); opacity: .78; }
  to   { transform: translateX(-50%) scaleX(1.05); opacity: 1; }
}
@keyframes upo-glow-pulse {
  0%, 100% { opacity: .5; }
  50%      { opacity: .95; }
}
@keyframes upo-spark-drift {
  from { transform: translate(0, 5px);   opacity: .65; }
  to   { transform: translate(-6px, -7px); opacity: 1; }
}
@keyframes upo-sweep {
  0%   { transform: translateX(-24%); opacity: 0; }
  10%  { opacity: .8; }
  34%  { opacity: 0; }
  100% { transform: translateX(24%); opacity: 0; }
}

/* ============================================================
   BOTTOM MEDIA STRIP  (continuation of the hero, ~14vh)
   ============================================================ */
.upo-strip {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: var(--rail-w) 1fr 1.04fr;
  gap: 1px;
  height: var(--strip-h);
  background: rgba(255, 255, 255, .07);   /* shows through the 1px gaps as dividers */
}
/* left cell — visually continues the navigation rail */
.upo-strip__rail {
  background: linear-gradient(180deg, #07070d, #05050a);
}
.upo-strip__panel {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--bg-2);
}
.upo-strip__panel figcaption {
  position: absolute;
  left: 18px;
  bottom: 13px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
/* centre — close-up of nano-ceramic film: purple hexagonal matrix */
.upo-strip__panel--film {
  background: radial-gradient(140% 180% at 22% 0%, rgba(120, 70, 210, .34), transparent 58%), #0c0918;
}
.upo-strip__tex {
  position: absolute;
  inset: -20%;
  transform: rotate(-8deg);
  opacity: .6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%23b98bff' stroke-opacity='0.5'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 26px 46px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 78%, transparent);
  mask: linear-gradient(90deg, transparent, #000 30%, #000 78%, transparent);
}
/* right — layered automotive glass edges lit by cyan/blue */
.upo-strip__panel--edge {
  background: linear-gradient(100deg, #08131a 0%, #0d2830 55%, #071319 100%);
}
.upo-strip__rim {
  position: absolute;
  right: 12%;
  top: -12%;
  bottom: -12%;
  width: 46%;
  transform: skewX(-14deg);
  background:
    linear-gradient(90deg, transparent 0%, rgba(120, 240, 255, .0) 40%, rgba(120, 240, 255, .5) 74%, rgba(190, 250, 255, .92) 86%, rgba(120, 240, 255, .3) 92%, transparent 100%);
  box-shadow: -18px 0 30px -8px rgba(90, 210, 255, .35), 14px 0 26px -10px rgba(90, 210, 255, .3);
  filter: blur(.6px);
}
.upo-strip__rim::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-46%);
  background: linear-gradient(90deg, transparent 60%, rgba(150, 245, 255, .55) 84%, transparent 96%);
}

/* ============================================================
   SCROLL SECTIONS
   ============================================================ */
.upo-section {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(90px, 15vh, 170px) var(--edge);
}
.upo-kicker {
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-soft);
}
.upo-section__title {
  margin: 0;
  font-size: var(--h2);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.upo-section__copy {
  margin: 26px 0 0;
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
}

/* ---- glazing architecture: brand lockup ---- */
.upo-lockup {
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.upo-lockup__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 16px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  font-family: "Montserrat", var(--font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
}
.upo-lockup__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .25);
}
.upo-lockup__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-soft);
}

/* ---- proof-point cards ---- */
/* Center the compact card group with matching column widths. */
.upo-specs {
  grid-column: 1 / -1;
  grid-row: 4;
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 14px);
}
.upo-specs li {
  position: relative;
  text-align: center;
  padding: 28px 22px 26px;
  background: linear-gradient(165deg, #10121d 0%, #07080e 65%);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.upo-specs li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--accent);
  opacity: .8;
}
.upo-specs li::after {
  content: "";
  position: absolute;
  top: -60%;
  left: 50%;
  width: 130%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--accent), transparent 72%);
  opacity: 0;
  filter: blur(18px);
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.upo-specs li:nth-child(1) { --accent: var(--amber); }
.upo-specs li:nth-child(2) { --accent: var(--blue); }
.upo-specs li:nth-child(3) { --accent: var(--violet); }
.upo-specs li:nth-child(4) { --accent: var(--amber-soft); }
.upo-specs li:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .6);
}
.upo-specs li:hover::after { opacity: .16; }
.upo-specs b {
  position: relative;
  display: block;
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--accent);
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}
.upo-specs b i { font-style: normal; font-size: .5em; color: var(--ink-faint); margin-left: 2px; }
/* count-up number inside a spec value — opt out of the label span styling */
.upo-specs b .upo-num { display: inline; margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.upo-specs span {
  position: relative;
  display: block;
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .03em;
  color: var(--ink-faint);
}

/* ---- glazing architecture: 12-col grid — copy+cards / diagram / layer nav ---- */
.upo-tech {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(48px, 5vw, 72px);
  row-gap: clamp(36px, 5vw, 56px);
  max-width: 1180px;
  margin-inline: auto;
  padding-block: clamp(110px, 12vh, 170px);
}
.upo-tech__lede {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
}
.upo-tech__copy { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
.upo-tech__copy .upo-lockup { margin: 22px 0 0; }

/* ---- exploded-view diagram + static layer callouts ---- */
.upo-tech__visual {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}
.upo-layers {
  position: relative;
  z-index: 0;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  flex: 0 0 auto;
}
.upo-layers__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
}
.upo-layers__glow {
  position: absolute;
  inset: -12%;
  z-index: 0;
  background:
    radial-gradient(46% 46% at 50% 42%, rgba(87, 164, 255, .30), transparent 68%),
    radial-gradient(52% 52% at 54% 62%, rgba(109, 40, 217, .26), transparent 70%);
  filter: blur(46px);
  opacity: .55;
  pointer-events: none;
}
.upo-layers__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .upo-layers__img { animation: upo-layers-float 7s ease-in-out infinite alternate; }
}
@keyframes upo-layers-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-12px); }
}

/* A shared number column and equal rows keep every layer label aligned. */
.upo-layer-callouts {
  position: relative;
  z-index: 2;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.upo-layer-callout {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: baseline;
  column-gap: 12px;
  line-height: 1.5;
}
.upo-layer-callout__num {
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #b98bff;
}
.upo-layer-callout__name {
  min-width: 0;
  font-size: clamp(10px, .85vw, 12px);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink);
  white-space: normal;
  text-wrap: pretty;
}

@media (min-width: 1025px) {
  .upo-tech__visual .upo-layers {
    max-width: 1000px;
    margin-inline: 0;
  }
}

@media (max-width: 1024px) {
  .upo-tech {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .upo-tech__lede,
  .upo-tech__copy,
  .upo-tech__visual,
  .upo-specs {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .upo-tech__visual { justify-content: flex-start; }
  .upo-layers { width: 100%; }
}

@media (max-width: 640px) {
  .upo-tech { padding-inline: 24px; }
  .upo-tech .upo-section__title { font-size: clamp(42px, 10vw, 52px); }
  /* Stack the legend below the diagram when two columns no longer fit. */
  .upo-layers {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .upo-layer-callouts {
    width: 100%;
    max-width: 280px;
    justify-self: center;
  }
  .upo-specs { grid-template-columns: 1fr; }
  .upo-specs li { padding: 18px 16px 16px; }
  .upo-specs b { font-size: clamp(1.05rem, 5vw, 1.3rem); }
  .upo-specs span { margin-top: 8px; font-size: 11px; }
}

@media (max-width: 480px) {
  .upo-layers__frame { max-width: 340px; justify-self: center; }
}

/* ---- architecture: feature grid ---- */
.upo-arch { border-top: 1px solid rgba(255, 255, 255, .06); }
.upo-arch .upo-section__title { text-transform: uppercase; }
.upo-arch__lede {
  margin: 22px 0 0;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 600;
  color: var(--ink);
}
.upo-features {
  list-style: none;
  margin: clamp(40px, 5vw, 60px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 20px);
}
.upo-features li {
  position: relative;
  padding: 30px 26px 28px;
  background: linear-gradient(165deg, #10121d 0%, #07080e 65%);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.upo-features li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--accent);
  opacity: .8;
}
.upo-features li:nth-child(1) { --accent: var(--violet); }
.upo-features li:nth-child(2) { --accent: var(--blue); }
.upo-features li:nth-child(3) { --accent: var(--amber); }
.upo-features li:nth-child(4) { --accent: var(--violet-deep); }
.upo-features li:nth-child(5) { --accent: var(--blue-soft); }
.upo-features li:nth-child(6) { --accent: var(--amber-soft); }
.upo-features li:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .6);
}
.upo-features h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
}
.upo-features p {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* ---- UVA400 shield: spectrum + glass diagram ---- */
.upo-uva {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  column-gap: clamp(40px, 4vw, 64px);
  row-gap: clamp(32px, 5vw, 48px);
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.upo-uva__copy { grid-column: 1 / span 4; min-width: 0; }
.upo-uva__kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.upo-uva__kicker-num { color: var(--blue-soft); }
.upo-uva__kicker-divider { flex: 0 0 auto; width: 1px; height: 12px; background: rgba(255, 255, 255, .25); }
.upo-uva__figure {
  margin: 0 0 4px;
  font-family: "Montserrat", var(--font);
  font-weight: 800;
  font-size: clamp(58px, 7vw, 100px);
  line-height: .9;
  letter-spacing: -.02em;
}
.upo-uva__figure span {
  background: linear-gradient(90deg, #b98bff, #57a4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.upo-uva__figure i {
  font-style: normal;
  font-size: .32em;
  font-weight: 700;
  margin-left: 6px;
  color: var(--ink-soft);
}
.upo-uva__title {
  margin: 8px 0 14px;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}

.upo-uva__spectrum {
  grid-column: 5 / span 8;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 14px;
}
.upo-uva__bands { display: contents; }
.upo-uva__band { grid-row: 1; }
.upo-uva__band b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
}
.upo-uva__band span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--ink-faint);
}
.upo-uva__bar {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  height: clamp(44px, 5vw, 60px);
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(90deg,
    #0d0c1f 0%, #241f52 20%, #2f4fb0 42%, #35c2c9 62%, #f2b23c 82%, #ff5b3c 100%);
}
.upo-uva__wave { position: absolute; inset: 0 25% 0 0; height: 100%; }
.upo-uva__marker {
  position: absolute;
  left: 75%;
  top: -8px;
  bottom: -8px;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, .8);
}
.upo-uva__marker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(255, 255, 255, .9);
}
.upo-uva__shield {
  grid-column: 1 / -1;
  grid-row: 3;
  position: relative;
  padding-top: 16px;
}
.upo-uva__shield-arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 75%;
  height: 1px;
  background: rgba(255, 255, 255, .3);
}
.upo-uva__shield-arrow::before,
.upo-uva__shield-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid rgba(255, 255, 255, .5);
  border-right: 1px solid rgba(255, 255, 255, .5);
}
.upo-uva__shield-arrow::before { left: 0; transform: translateY(-50%) rotate(-135deg); }
.upo-uva__shield-arrow::after { right: 25%; transform: translateY(-50%) rotate(45deg); }
.upo-uva__shield-label {
  margin: 22px 0 0;
  width: 75%;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.upo-uva__shield-sub {
  margin: 8px 0 0;
  width: 75%;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #b98bff;
}
.upo-uva__shield-sub span { color: var(--ink-faint); font-weight: 500; }

.upo-uva__banner {
  grid-column: 1 / -1;
  margin: clamp(8px, 2vw, 24px) 0 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg);
}
.upo-uva__banner img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1024px) {
  .upo-uva { grid-template-columns: 1fr; }
  .upo-uva__copy,
  .upo-uva__spectrum,
  .upo-uva__banner {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .upo-uva { padding-inline: 24px; }
  .upo-uva__banner { border-radius: 14px; }
}

/* ============================================================
   MOBILE QUICK-GLANCE SUMMARY — poster-style recap, phones only
   ============================================================ */
.upo-mobile-summary { display: none; }

@media (max-width: 640px) {
  .upo-mobile-summary {
    display: block;
    position: relative;
    z-index: 3;
    padding: clamp(48px, 12vw, 72px) var(--edge);
    border-top: 1px solid rgba(255, 255, 255, .06);
  }
  .upo-mobile-summary__title {
    margin: 14px 0 0;
    font-family: "Montserrat", var(--font);
    font-weight: 700;
    font-size: clamp(1.6rem, 7vw, 2.1rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--violet);
  }
  .upo-mobile-summary__lede {
    margin: 16px 0 0;
    max-width: 46ch;
    color: var(--ink-soft);
    font-size: .95rem;
  }
  .upo-mobile-summary__list {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
  }
  .upo-mobile-summary__list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: linear-gradient(165deg, #10121d 0%, #07080e 65%);
    border: 1px solid var(--line);
    border-radius: 16px;
  }
  .upo-mobile-summary__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(109, 40, 217, .16);
    border: 1px solid rgba(139, 92, 246, .3);
    color: var(--violet);
  }
  .upo-mobile-summary__icon svg { width: 19px; height: 19px; }
  .upo-mobile-summary__list h3 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--ink);
  }
  .upo-mobile-summary__list p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-faint);
  }
  .upo-mobile-summary__banner {
    margin: 26px 0 0;
    padding: 18px 20px;
    border-radius: 16px;
    background: linear-gradient(120deg, var(--violet-deep), var(--violet));
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.5;
    letter-spacing: .01em;
    text-align: center;
  }
}

.upo-section--perf { border-top: 1px solid rgba(255, 255, 255, .06); }
.upo-perf {
  margin-top: clamp(44px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 54px) clamp(40px, 7vw, 90px);
  opacity: 0;
  visibility: hidden;
}
.upo-perf__item {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  padding: clamp(30px, 3.6vw, 44px) clamp(20px, 2.6vw, 34px) clamp(26px, 3vw, 36px);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 65%);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .4s ease, background .4s ease;
}
/* soft ambient spotlight, contained inside the card */
.upo-perf__item::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -34%;
  left: 50%;
  width: clamp(200px, 22vw, 300px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, .32), rgba(87, 164, 255, .16) 55%, transparent 75%);
  filter: blur(26px);
  opacity: .85;
  pointer-events: none;
}
.upo-perf__item:hover {
  border-color: rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 65%);
}
.upo-perf__num {
  display: block;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-shadow: 0 0 28px rgba(139, 92, 246, .45), 0 0 60px rgba(87, 164, 255, .18);
}
.upo-perf__label {
  margin: 12px 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}
.upo-perf__bar {
  position: relative;
  width: min(100%, 420px);
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
  overflow: visible;
}
.upo-perf__bar i {
  position: relative;
  display: block;
  height: 100%;
  width: var(--v);
  border-radius: 3px;
  background: linear-gradient(90deg, var(--amber), var(--blue));
  box-shadow: 0 0 16px rgba(87, 164, 255, .55), 0 0 6px rgba(255, 122, 52, .5);
  transform-origin: left;
}
/* bright glowing tip at the leading edge of the fill */
.upo-perf__bar i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: translate(50%, -50%);
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, .85), 0 0 22px 6px rgba(87, 164, 255, .6);
}

/* ============================================================
   CLOSING CTA
   ============================================================ */
.upo-cta {
  position: relative;
  z-index: 3;
  padding: clamp(100px, 20vh, 220px) var(--edge);
  text-align: center;
  background:
    radial-gradient(50vw 40vw at 50% 0%, rgba(123, 63, 228, .22), transparent 68%);
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.upo-cta__inner { max-width: 720px; margin: 0 auto; }
.upo-cta h2 {
  margin: 0;
  font-size: var(--h2);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.upo-cta p {
  margin: 20px auto 40px;
  max-width: 46ch;
  color: var(--ink-soft);
}

/* ---- site footer (shared layout, matches the rest of the site) ---- */
.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.site-footer {
  position: relative;
  z-index: 3;
  overflow: hidden;
  padding: 72px 0 28px;
  color: rgba(255, 255, 255, .55);
  font-size: 14px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
/* purple light that sweeps across the top divider once, the same
   treatment the shared site footer uses elsewhere (styles.css) —
   triggered by adding .is-swept from script.js's footer ScrollTrigger,
   since this page's reveal system doesn't use the main site's
   [data-reveal].is-visible observer */
.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.is-swept::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-cols { display: grid; grid-template-columns: 1.5fr .7fr .7fr .7fr .7fr; gap: 48px; }

.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(--violet); }

@media (max-width: 900px) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .footer-cols > .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .footer-cols { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ============================================================
   MOBILE NAV OVERLAY
   ============================================================ */
body.upo.menu-open { overflow: hidden; }
@media (max-width: 900px) {
  .upo-rail__nav {
    position: fixed;
    inset: 0;
    z-index: 39;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    background: rgba(5, 6, 11, .96);
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
  }
  body.upo.menu-open .upo-rail__nav { opacity: 1; pointer-events: auto; }
  .upo-rail__nav a { font-size: 22px; }
  .upo-rail__nav a.is-active::before { display: none; }
  body.upo.menu-open .upo-rail__menu span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  body.upo.menu-open .upo-rail__menu span:nth-child(2) { opacity: 0; }
  body.upo.menu-open .upo-rail__menu span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .upo-hero__content { width: min(360px, 33vw); }
  .upo-stage__frame { --sx: -52%; top: 43%; width: min(1280px, 134%); }
  .upo-product-slot { --slot-w: min(31vw, 364px); }
}

@media (max-width: 900px) {
  :root { --rail-w: 0px; --strip-h: clamp(148px, 20vh, 200px); }

  .upo-rail {
    inset: 0 0 auto 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 16px var(--edge);
    background: linear-gradient(#05060b 40%, rgba(5, 6, 11, 0));
  }
  .upo-rail::after { display: none; }
  .upo-rail__logo { width: 66px; }
  .upo-rail__menu { display: grid; margin: 0; width: 40px; height: 40px; }
  .upo-rail__note { display: none; }

  .upo-hero {
    padding: 92px 0 36px;
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .upo-stage {
    position: relative;
    inset: auto;
    height: clamp(320px, 46vh, 440px);
    order: 1;
  }
  /* phones: show the whole car frame instead of cropping its sides to
     fill a shorter, more square box (cover crops width to fill height) */
  body.upo .upo-stage__plate { object-fit: contain; }
  .upo-hero__content {
    position: static;
    height: auto;
    margin-block: 0;
    width: 100%;
    padding-inline: var(--edge);
    order: 2;
  }
  .upo-hero__headline { text-align: left; }
  /* phones: the copy now sits below the video on the plain dark page
     background, not over the bright sky, so it needs its light color back */
  body.upo .upo-hero__lede { color: var(--ink-soft); }
  .upo-stage__frame {
    --sx: -50%;
    top: 50%;
    width: auto;
    height: 118%;
  }
  .upo-product-slot { bottom: 20%; --slot-w: min(55vw, 300px); }

  /* phones: calmer box, shallower depth, lighter ember load */
  .upo-product { --d: calc(var(--w) * 0.16); perspective: 900px; }
  .upo-product__box { animation-duration: 26s; }
  .upo-stage__spark { opacity: .5; }

  .upo-watermark {
    display: none;
  }

  .upo-strip {
    grid-template-columns: 1fr 1fr;
    height: var(--strip-h);
  }
  .upo-strip__rail { display: none; }
  .upo-strip__panel { min-height: 0; }

  .upo-perf { grid-template-columns: 1fr; }
  .upo-features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .upo-hero__actions { flex-direction: column; align-items: flex-start; gap: 18px; }
  .upo-strip { grid-template-columns: 1fr 1fr; }
  .upo-features { grid-template-columns: 1fr; }
}

/* ============================================================
   ANIMATION GATE  (only while JS/GSAP will drive the reveal)
   ============================================================ */
html.upo-anim [data-animate] { opacity: 0; }
html.upo-anim .upo-hero__headline .line > span { opacity: 0; }
html.upo-anim [data-reveal] { opacity: 0; }
/* decorative stage accents the JS intro fades in as a distinct beat */
html.upo-anim .upo-stage__glow,
html.upo-anim .upo-stage__turntable,
html.upo-anim .upo-stage__spark { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
  [data-animate], [data-reveal],
  .upo-hero__headline .line > span { opacity: 1 !important; }
  /* energy ring stays in its static starting position */
  .upo-stage__ring { animation: none; transform: none; }

  /* no continuous rotation — present the package at a static three-quarter
     angle with all lighting / reflections intact */
  .upo-stage__turntable-spin { animation: none !important; transform: rotate(-24deg) !important; }
  .upo-stage__turntable { opacity: .4; }
  .upo-product__lift  { animation: none !important; transform: rotateX(-6deg); }
  .upo-product__box   { animation: none !important; transform: rotateY(-26deg); }
  .upo-product__photo { animation: none !important; transform: rotateY(-12deg); }
  .upo-product__shadow { animation: none !important; transform: translateX(-50%) scaleX(1); opacity: .9; }
}

/* =====================================================================
   Global override — plain solid black background on every section.
   Strips the page-wide ambient wash, section gradients and hex
   patterns. Hero render, product card, text and specs are untouched.
   ===================================================================== */
html,
body.upo,
.upo-hero,
.upo-strip,
.upo-strip__rail,
.upo-strip__panel,
.upo-strip__panel--film,
.upo-strip__panel--edge,
.upo-section,
.upo-section--perf,
.upo-cta {
  background: #000 !important;
  background-image: none !important;
}

body.upo::before,
.upo-strip__tex,
.upo-strip__rim,
.upo-strip__rim::after {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* all headings: Montserrat Bold (kept last so it wins over earlier weight rules) */
h1, h2, h3, h4, h5, h6,
.upo-hero__headline, .upo-section__title, .upo-cta h2 {
  font-family: "Montserrat", var(--font);
  font-weight: 700;
}

/* =====================================================================
   MOBILE POLISH
   ===================================================================== */
@media (max-width: 900px) {
  /* The decorative bottom "film strip" has no visible texture on phones
     (its backgrounds are stripped to solid black) — it only adds an empty
     band under the hero. Remove it on small screens. */
  .upo-strip { display: none !important; }

  /* trim the deep desktop section padding so scroll sections sit closer */
  .upo-section { padding: clamp(56px, 11vh, 96px) var(--edge); }
  .upo-cta { padding-block: clamp(56px, 11vh, 96px); }
}