/* ============================================================
   ROCKWOOD — Landing
   ============================================================ */

/* ---- Ambient background ---------------------------------- */
.bg { position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; overflow: hidden; }
.bg__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: saturate(0.9) brightness(0.82);
  transition: opacity 1.4s var(--ease-cinematic);
}
.bg__video.is-ready { opacity: 0.42; }
/* Deep-space tint so the video recedes behind the content */
.bg__tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(5,7,13,0.35) 0%, transparent 55%),
    linear-gradient(180deg, rgba(5,7,13,0.55) 0%, rgba(5,7,13,0.72) 100%);
}
#starfield { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s var(--ease-cinematic); }
#starfield.is-ready { opacity: 1; }
.bg__fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, #101a30 0%, transparent 55%),
    radial-gradient(90% 60% at 85% 20%, rgba(10,61,98,0.35) 0%, transparent 60%),
    linear-gradient(180deg, var(--space-800) 0%, var(--space-900) 100%);
}
.bg__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ---- NAV -------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
  z-index: var(--z-nav);
  display: flex; align-items: center;
  transition: background var(--dur-mid) var(--ease-cinematic),
              border-color var(--dur-mid), backdrop-filter var(--dur-mid);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(5, 7, 13, 0.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--hairline);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }

.brand { display: inline-flex; align-items: center; gap: 0.6em; }
.brand__mark { filter: drop-shadow(0 0 10px rgba(127,212,255,0.25)); }
.brand__text {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.45rem; letter-spacing: 0.02em;
}
/* Logo wordmark: silver → rose-gold transition (overrides the plain chrome) */
.brand .brand__text.metallic {
  background-image: linear-gradient(150deg,
    #f6f7fa 0%, #d8dce2 24%, #cbb6b0 46%,
    #e7b6ab 62%, #b76e79 82%, #edc8bd 100%);
}

.nav__menu { display: flex; gap: 0.25rem; margin-left: auto; margin-right: 1rem; }
.nav__item { position: relative; }
.nav__trigger {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.6em 0.9em; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--text-mid); letter-spacing: 0.04em;
  transition: color var(--dur-fast);
}
.nav__trigger:hover, .nav__item.is-open .nav__trigger { color: var(--text-hi); }
.caret { font-size: 0.7em; transition: transform var(--dur-fast) var(--ease-precise); color: var(--signal); }
.nav__item.is-open .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 260px;
  background: rgba(10, 14, 26, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 0.6rem;
  box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-cinematic),
              transform var(--dur-fast) var(--ease-cinematic),
              visibility var(--dur-fast);
}
.nav__item.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown--wide {
  position: fixed; top: calc(var(--nav-h) + 6px); right: 1rem; left: auto;
  width: min(940px, calc(100vw - 2rem));
  max-height: calc(100vh - var(--nav-h) - 1.5rem); overflow-y: auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.2rem 1rem;
  align-content: start;
  z-index: var(--z-overlay);
}
.dropdown--wide .dd-link { padding-block: 0.4rem; }

/* Product image preview — a frameless thumbnail that fades in right beside
   the hovered/focused link, on whichever side of it has room. No card,
   no background, no border — just the photo (with its own drop shadow). */
.dd-preview {
  position: absolute; top: 0; left: 0;
  width: 240px;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  opacity: 0; pointer-events: none; z-index: 5;
  transform: translateY(-50%) scale(0.97);
  transition: opacity 0.55s var(--ease-cinematic),
              transform 0.55s var(--ease-cinematic);
}
.dd-preview.is-right { transform: translateY(-50%) scale(0.97) translateX(5px); }
.dd-preview.is-left  { transform: translateY(-50%) scale(0.97) translateX(-5px); }
.dd-preview.is-visible.is-right { transform: translateY(-50%) scale(1) translateX(0); }
.dd-preview.is-visible.is-left  { transform: translateY(-50%) scale(1) translateX(0); }
.dd-preview.is-visible { opacity: 1; }
.dd-preview__stage {
  display: flex; align-items: center; justify-content: center;
  padding: 0.9rem;
}
.dd-preview img {
  max-width: 100%; max-height: 190px; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.65));
}
.dd-preview__name {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  color: var(--text-hi); text-align: center; line-height: 1.3;
}
.dd-preview__code { font-size: var(--fs-readout); color: var(--text-lo); letter-spacing: 0.14em; }

/* Spotlight: while a preview is showing, the rest of the menu dims so the
   hovered/focused item and its photo stand out. */
.dropdown--wide.has-preview .dd-link { opacity: 0.38; }
.dropdown--wide.has-preview .dd-link.is-focused { opacity: 1; }

.dd-group__label {
  display: block; padding: 0.5rem 0.7rem 0.3rem;
  font-family: var(--font-mono); font-size: var(--fs-readout);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-lo);
}
.dd-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0.7rem; border-radius: var(--r-sm);
  color: var(--text-mid);
  transition: background var(--dur-fast), color var(--dur-fast), opacity 0.3s var(--ease-cinematic);
}
.dd-link:hover { background: rgba(127,212,255,0.08); color: var(--text-hi); }
.dd-link small { font-family: var(--font-mono); font-size: var(--fs-readout); color: var(--text-lo); }
.dd-link .dd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent, var(--signal)); flex: none; align-self: center; }
.dd-link__name { display: inline-flex; align-items: center; gap: 0.6em; }

.nav__right { display: flex; align-items: center; gap: 0.75rem; }
.nav__parent { padding: 0.6em 1em; font-size: var(--fs-sm); }

.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; }
.nav__burger span { width: 22px; height: 2px; background: var(--text-hi); transition: transform var(--dur-fast), opacity var(--dur-fast); }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---- Mobile drawer --------------------------------------- */
.drawer {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: calc(var(--z-nav) - 1);
  background: rgba(4, 6, 12, 0.97); backdrop-filter: blur(16px);
  padding: 2rem var(--gutter); overflow-y: auto;
  animation: drawerIn var(--dur-mid) var(--ease-cinematic);
}
@keyframes drawerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.drawer__nav { display: flex; flex-direction: column; gap: 0.25rem; }
.drawer__h { margin-top: 1.4rem; }
.drawer a { padding: 0.7rem 0; font-size: 1.15rem; color: var(--text-hi); font-family: var(--font-display); border-bottom: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; }
.drawer a .dd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--signal)); }

/* ---- HERO ------------------------------------------------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--nav-h);
  overflow: hidden;
}
/* Hero-only cinematic video, layered over the ambient page background */
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero__bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.6s var(--ease-cinematic);
}
.hero__bg-video.is-ready { opacity: 0.55; }
/* Darken toward the copy side and the edges so the wordmark stays legible */
.hero__bg-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5,7,13,0.9) 0%, rgba(5,7,13,0.6) 42%, rgba(5,7,13,0.25) 100%),
    linear-gradient(180deg, rgba(5,7,13,0.7) 0%, transparent 30%, transparent 62%, rgba(5,7,13,0.85) 100%);
}
.hero__inner {
  position: relative; z-index: var(--z-content);
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  align-items: center; gap: clamp(1.5rem, 4vw, 4rem);
}
.hero__copy { min-width: 0; container-type: inline-size; }
/* Baseline cap; a fit script (below) refines this to the exact column width
   once the display font has loaded, so the wordmark never clips the product. */
.hero__copy .hero__line { font-size: min(var(--fs-hero), 15cqw); white-space: nowrap; }
.hero__eyebrow { margin-bottom: 1.5rem; }

/* ---- Hero product (9500 4K Pro) --------------------------- */
.hero__media {
  position: relative; margin: 0;
  display: grid; place-items: center;
  justify-self: end;
}
/* Soft cool light pool that lifts the tower off the dark scene */
.hero__media::before {
  content: ""; position: absolute; z-index: 0;
  width: 82%; aspect-ratio: 1; top: 44%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgba(127,212,255,0.20) 0%,
    rgba(96,128,178,0.10) 42%,
    transparent 72%);
  filter: blur(10px);
  animation: heroGlow 7s var(--ease-cinematic) infinite;
}
/* Grounding shadow beneath the wheels */
.hero__media::after {
  content: ""; position: absolute; z-index: 0;
  left: 50%; bottom: 3%; transform: translateX(-50%);
  width: 62%; height: 26px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,0.55), transparent 75%);
  filter: blur(6px);
}
.hero__product {
  position: relative; z-index: 1;
  width: auto; max-width: 100%;
  max-height: min(78vh, 660px);
  filter: drop-shadow(0 30px 45px rgba(0,0,0,0.5));
  animation: heroFloat 8s var(--ease-cinematic) infinite;
}
.hero__product-tag {
  position: relative; z-index: 1;
  margin-top: -0.4rem;
  font-size: clamp(0.9rem, 1vw, 1.05rem);
  color: var(--text-mid); letter-spacing: 0.26em;
}
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes heroGlow  { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } }
.hero__title { margin: 0; }
.hero__line {
  display: block; font-size: var(--fs-hero);
  letter-spacing: -0.04em; line-height: 0.9;
  background-size: 220% 220%;
  animation: sheen 9s ease-in-out infinite;
}
@keyframes sheen { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero__tag { margin-top: 1.1rem; color: var(--signal); letter-spacing: 0.3em; }
.hero__promise { margin-top: 1.6rem; }
.hero__actions { margin-top: 2.4rem; display: flex; gap: 1rem; flex-wrap: wrap; }

.hero__readouts {
  position: absolute; bottom: 2.2rem; left: 0; right: 0; z-index: var(--z-content);
  display: flex; gap: 2.4rem; flex-wrap: wrap;
  padding-inline: var(--gutter);
  color: var(--text-mid);
}
.hero__readouts .readout {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: clamp(0.9rem, 1vw, 1.05rem);
  letter-spacing: 0.26em;
  color: var(--text-mid);
}
.hero__readouts .readout::before { content: "+"; color: var(--signal); }

.hero__scroll {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 7px; z-index: var(--z-content);
}
@media (max-width: 900px) { .hero__scroll { display: none; } }
.hero__scroll-dot { width: 4px; height: 8px; border-radius: 2px; background: var(--signal); animation: scrolldot 1.8s var(--ease-cinematic) infinite; }
@keyframes scrolldot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---- SPECIALTY SECTIONS ---------------------------------- */
.spec {
  position: relative; z-index: var(--z-content);
  padding: clamp(5rem, 14vh, 11rem) 0;
  border-top: 1px solid var(--hairline);
}
.spec::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 60% at 78% 40%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 70%);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-cinematic);
}
.spec.is-active::before { opacity: 1; }
.spec__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }

.spec__index { display: block; color: var(--accent); margin-bottom: 1.1rem; opacity: 0.9; }
.spec__name { font-size: var(--fs-h1); margin: 0.4rem 0 0.8rem; }
.spec__name .dot { color: var(--accent); }
.spec__headline { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: var(--text-hi); margin-bottom: 1rem; letter-spacing: -0.01em; }
.spec__blurb { margin-bottom: 1.6rem; }
.spec__parent {
  display: inline-flex; align-items: center; gap: 0.5em; color: var(--text-lo);
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 0.5em 0.9em; transition: color var(--dur-fast), border-color var(--dur-fast);
}
.spec__parent:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

/* Specialty action row (WhatsApp + parent link) */
.spec__actions { display: flex; align-items: center; gap: 0.8rem 1rem; flex-wrap: wrap; }

/* Product cluster — revealed on scroll-active or hover */
.spec__products { display: flex; flex-direction: column; gap: 0.7rem; }
.pcard {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: rgba(14, 20, 36, 0.5); backdrop-filter: blur(6px);
  overflow: hidden;
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-mid) var(--ease-cinematic),
              transform var(--dur-mid) var(--ease-cinematic),
              border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.pcard__row { display: flex; align-items: stretch; }

/* Hover-reveal spec drawer — the card opens into a compact preview: the
   product on an accent light-pool, beside its promise and two key readings.
   The panel height animates via grid-template-rows, so it fits its content
   exactly with no magic numbers. */
.pcard__preview {
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--dur-mid) var(--ease-cinematic),
              opacity var(--dur-fast) ease;
}
.pcard--has-thumb:hover .pcard__preview,
.pcard--has-thumb:focus-within .pcard__preview { grid-template-rows: 1fr; opacity: 1; }
.pcard__preview-wrap { overflow: hidden; min-height: 0; }
.pcard__preview-in {
  display: grid; grid-template-columns: minmax(0, 8.75rem) minmax(0, 1fr);
  gap: 1.35rem; align-items: center;
  padding: 1.15rem 1.35rem 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 20%, var(--hairline));
  background: linear-gradient(180deg, rgba(9, 13, 24, 0.5), rgba(4, 7, 14, 0.62));
  transform: translateY(9px);
  transition: transform var(--dur-mid) var(--ease-cinematic);
}
.pcard--has-thumb:hover .pcard__preview-in,
.pcard--has-thumb:focus-within .pcard__preview-in { transform: none; }

/* Product on a soft accent light-pool, grounded with a drop shadow */
.pcard__preview-media { position: relative; display: grid; place-items: center; min-height: 130px; }
.pcard__preview-media::before {
  content: ""; position: absolute; z-index: 0;
  width: 100%; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 24%, transparent), transparent 72%);
  filter: blur(8px);
}
.pcard__thumb {
  position: relative; z-index: 1;
  display: block; max-width: 100%; max-height: 136px; width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.6));
}

/* Promise + instrument-style readouts */
.pcard__preview-tag {
  display: block; font-family: var(--font-display); font-weight: 600;
  color: var(--text-hi); font-size: 1.02rem; line-height: 1.28; letter-spacing: -0.01em;
}
.pcard__preview-specs { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.85rem 0 1rem; }
.pcard__spec { display: grid; grid-template-columns: 6.2em 1fr; gap: 0.7rem; align-items: baseline; }
.pcard__spec-k {
  font-family: var(--font-mono); font-size: var(--fs-readout);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.pcard__spec-v { font-family: var(--font-mono); font-size: var(--fs-readout); color: var(--text-mid); line-height: 1.4; }
.pcard__preview-cta {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono); font-size: var(--fs-readout);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.pcard__preview-arr { transition: transform var(--dur-fast) var(--ease-precise); }
.pcard__preview-in:hover .pcard__preview-arr { transform: translateX(4px); }
.spec.is-active .pcard, .spec:hover .pcard, .spec:focus-within .pcard { opacity: 1; transform: none; }
.spec.is-active .pcard { transition-delay: calc(var(--i, 0) * 90ms); }
/* Hover: subtle magnify — the card zooms in and lifts above its neighbours */
.pcard:hover, .pcard:focus-within {
  transform: scale(1.035);
  z-index: 2;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 24px 55px -26px #000, 0 0 34px -16px var(--accent);
  transition: transform var(--dur-fast) cubic-bezier(0.22, 1.15, 0.36, 1),
              border-color var(--dur-fast) var(--ease-precise),
              box-shadow var(--dur-fast) var(--ease-precise);
}

.pcard__main {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  padding: 1.1rem 1.1rem 1.1rem 1.3rem;
  transition: background var(--dur-fast);
}
.pcard__main:hover { background: rgba(20, 28, 48, 0.55); }
.pcard__text { min-width: 0; }
.pcard__glyph {
  width: 42px; height: 42px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 55%, #0a0e1a), #0a0e1a);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: inset 0 0 14px -6px var(--accent);
}
.pcard__glyph span { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px -1px var(--accent); }
.pcard__name { font-family: var(--font-display); font-weight: 600; color: var(--text-hi); font-size: 1.02rem; }
.pcard__meta { display: block; font-family: var(--font-mono); font-size: var(--fs-readout); color: var(--text-lo); letter-spacing: 0.14em; margin-top: 2px; }
.pcard__arrow { color: var(--accent); font-size: 1.1rem; transition: transform var(--dur-fast) var(--ease-precise); }
.pcard__main:hover .pcard__arrow { transform: translateX(4px); }

/* "Coming soon" pill — for products without a released image/datasheet */
.pcard__soon {
  flex: none; align-self: center; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--fs-readout);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mid);
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 0.3em 0.7em; background: rgba(255, 255, 255, 0.03);
}
.pcard--soon .pcard__glyph { opacity: 0.5; }
.pcard--soon .pcard__name { color: var(--text-mid); }

/* Inline WhatsApp enquiry control on each product card — quiet by default */
.pcard__wa {
  flex: none; width: 52px;
  display: grid; place-items: center;
  color: var(--text-lo);
  border-left: 1px solid var(--hairline);
  background: transparent;
  transition: background var(--dur-fast) var(--ease-precise), color var(--dur-fast);
}
.pcard:hover .pcard__wa { color: var(--wa-soft); }
.pcard__wa:hover, .pcard__wa:focus-visible { background: rgba(37, 211, 102, 0.12); color: var(--wa); }

/* ---- Specialty showcase --------------------------------- */
/* Panels with a flagship image show it by default, then reveal the
   product buttons on hover/focus (swap back). */
.spec__panel { position: relative; }
.spec__panel.has-showcase { min-height: 500px; }
.spec__panel.has-showcase .spec__products {
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease-cinematic);
}
.spec__panel.has-showcase:hover .spec__products,
.spec__panel.has-showcase:focus-within .spec__products { opacity: 1; pointer-events: auto; }

.spec__showcase {
  position: absolute; inset: 0; margin: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.7rem; text-align: center;
  opacity: 1; transition: opacity var(--dur-mid) var(--ease-cinematic);
}
.spec__panel.has-showcase:hover .spec__showcase,
.spec__panel.has-showcase:focus-within .spec__showcase { opacity: 0; pointer-events: none; }
/* cool light pool behind the tower, echoing the hero treatment */
.spec__showcase::before {
  content: ""; position: absolute; z-index: 0;
  width: 68%; aspect-ratio: 1; top: 45%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 72%);
  filter: blur(16px);
}
.spec__showcase img {
  position: relative; z-index: 1;
  max-height: min(66vh, 560px); max-width: 94%; width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.55));
}
/* Video showcase — a framed, looping clip in place of the still */
.spec__showcase video {
  position: relative; z-index: 1;
  max-height: min(62vh, 520px); max-width: 94%; width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.7);
}
.spec__showcase-tag { position: relative; z-index: 1; color: var(--text-lo); letter-spacing: 0.2em; }
.spec__showcase-hint {
  position: relative; z-index: 1;
  color: var(--accent); letter-spacing: 0.16em; opacity: 0.72;
}

/* WhatsApp button — green metallic with the same sheen-sweep + lift + glow
   as .btn--metal (base .btn already transitions background-position). */
.btn--wa {
  color: #04120a;
  background: linear-gradient(150deg, #8be9b6 0%, #25d366 34%, #159b48 58%, #5fdd94 82%, #22c25c 100%);
  background-size: 200% 200%;
  background-position: 0% 0%;
}
.btn--wa svg { flex: none; color: #04120a; }
.btn--wa:hover {
  background-position: 100% 100%;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.8), 0 0 40px -6px rgba(37, 211, 102, 0.5);
}

/* ---- STORY ----------------------------------------------- */
.story { position: relative; z-index: var(--z-content); padding: clamp(6rem, 16vh, 12rem) 0; border-top: 1px solid var(--hairline); }
.story { overflow: hidden; }
.story__inner { position: relative; z-index: 1; max-width: 1000px; }
.story__copy { max-width: 640px; margin-bottom: 3rem; }
.story__title { font-size: var(--fs-h1); margin: 0.8rem 0 1.4rem; }
.story__lede { margin-bottom: 0; }

/* PCB visual — a soft, borderless layer that sits behind the copy and fades up on scroll */
.story__media {
  margin: 0; pointer-events: none;
  position: absolute; z-index: 0;
  top: 50%; right: -4%;
  width: min(56%, 720px);
  transform: translate(0, calc(-50% + 36px));
  opacity: 0;
  transition: opacity 1.3s var(--ease, ease), transform 1.3s var(--ease, ease);
  will-change: opacity, transform;
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 55% 50%, #000 38%, transparent 76%);
          mask-image: radial-gradient(ellipse 72% 68% at 55% 50%, #000 38%, transparent 76%);
}
.story__media.is-in { opacity: 0.5; transform: translate(0, -50%); }
.story__pcb { display: block; width: 100%; height: auto; }
.story__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.story__cell { background: rgba(10,14,26,0.6); padding: 1.8rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.story__cell::before, .story__cell::after { display: none; }
.story__stat { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }

/* ---- CTA ------------------------------------------------- */
.cta { position: relative; z-index: var(--z-content); padding: clamp(5rem, 12vh, 9rem) 0; border-top: 1px solid var(--hairline); text-align: center; }
.cta__inner { max-width: 720px; margin-inline: auto; }
.cta__title { font-size: var(--fs-h2); margin-bottom: 1rem; }
.cta__actions { margin-top: 2.2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---- FOOTER ---------------------------------------------- */
.footer { position: relative; z-index: var(--z-content); background: rgba(4,6,12,0.9); border-top: 1px solid var(--hairline); padding-top: 4rem; }
.footer__inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 2.5rem; padding-bottom: 3rem; }
.footer__tag { margin: 1rem 0; color: var(--signal); }
.footer__certs { display: flex; gap: 0.5rem; }
.chip { font-family: var(--font-mono); font-size: var(--fs-readout); letter-spacing: 0.1em; color: var(--text-mid); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 0.35em 0.8em; }
.footer__h { margin-bottom: 1.1rem; }
.footer__col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__col a, .footer__contact address { color: var(--text-mid); font-size: var(--fs-sm); transition: color var(--dur-fast); font-style: normal; line-height: 1.9; }
.footer__col a:hover { color: var(--signal); }
.footer__base { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem 0 2rem; border-top: 1px solid var(--hairline); flex-wrap: wrap; }
.footer__social { display: flex; gap: 1.2rem; }
.footer__social a { font-family: var(--font-mono); font-size: var(--fs-readout); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-lo); transition: color var(--dur-fast); }
.footer__social a:hover { color: var(--signal); }

/* ---- Responsive ------------------------------------------ */
@media (max-width: 900px) {
  .nav__menu, .nav__parent { display: none; }
  .nav__burger { display: flex; }
  .spec__inner { grid-template-columns: 1fr; gap: 2rem; }
  .story__media { width: min(74%, 460px); right: -12%; }
  .story__media.is-in { opacity: 0.32; }
  .story__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .pcard { opacity: 1; transform: none; }  /* touch: always visible */
  /* No hover on touch — drop the showcase swap and just list the products */
  .spec__panel.has-showcase { min-height: 0; }
  .spec__showcase { display: none; }
  .spec__panel.has-showcase .spec__products { opacity: 1; pointer-events: auto; }
  /* Hero stacks; product sits below the copy at a calmer size */
  .hero { min-height: auto; padding-block: calc(var(--nav-h) + 2rem) 6rem; }
  .hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero__media { order: 2; justify-self: center; }
  .hero__product { max-height: 46vh; }
}
@media (max-width: 560px) {
  .story__grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .hero__readouts { gap: 1rem; }
  .footer__base { justify-content: flex-start; }
}

/* ---- Reduced motion -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__line { animation: none; }
  .hero__scroll-dot { animation: none; }
  .hero__product, .hero__media::before { animation: none; }
  .pcard { opacity: 1 !important; transform: none !important; }
  .story__media { opacity: 0.5; transform: translate(0, -50%); transition: none; }
  #starfield { display: none; }
  *, *::before, *::after { transition-duration: 0.001s !important; }
}

/* ---- THE TOWER IN MOTION --------------------------------- */
.reel {
  position: relative; z-index: var(--z-content);
  padding: clamp(5rem, 13vh, 10rem) 0;
  border-top: 1px solid var(--hairline);
}
.reel__head { max-width: 720px; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.reel__title { font-size: var(--fs-h2); margin: 0.9rem 0 1.2rem; }
.reel__lede { margin: 0; }

/* Video stage — a lit rectangle, not a bezel: hairline, reticle ticks and a
   pool of signal light behind it, matching the product staging elsewhere. */
.reel__main { margin: 0 0 clamp(2rem, 5vh, 3.5rem); }
.reel__stage {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;                     /* reserves space: no layout shift */
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: linear-gradient(160deg, rgba(20,28,48,0.55), rgba(6,8,14,0.6));
  box-shadow: var(--shadow-lift);
}
.reel__stage::before, .reel__stage::after {
  width: 16px; height: 16px; z-index: 2;
  border-color: color-mix(in srgb, var(--signal) 55%, transparent);
}
.reel__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-cinematic);
}
.reel__video.is-ready { opacity: 1; }
/* light pool, echoing the hero and specialty showcases */
.reel__main .reel__stage { box-shadow: var(--shadow-lift), 0 0 80px -30px var(--signal-glow); }
.reel__cap { display: block; margin-top: 0.9rem; color: var(--text-lo); }

/* Pause control — moving content must be stoppable (WCAG 2.2.2) */
.reel__toggle {
  position: absolute; right: 0.9rem; bottom: 0.9rem; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.45em 0.8em; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--fs-readout);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-hi);
  background: rgba(5, 8, 14, 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hairline-strong);
  opacity: 0.55;
  transition: opacity var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.reel__stage:hover .reel__toggle,
.reel__toggle:focus-visible { opacity: 1; border-color: var(--signal); color: var(--signal); }

/* Second row: finishes reel beside its copy */
.reel__split {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.reel__side { margin: 0; }
.reel__subtitle { font-size: var(--fs-h3); margin-bottom: 1rem; }
.reel__copy p { max-width: 46ch; margin-bottom: 1.6rem; }
.reel__notes { display: flex; flex-direction: column; gap: 0.7rem; }
.reel__notes li { display: flex; align-items: center; gap: 0.7em; color: var(--text-mid); }
.reel__notes li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 10px -1px var(--signal); flex: none;
}

@media (max-width: 900px) {
  .reel__split { grid-template-columns: 1fr; gap: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reel__video { opacity: 1; transition: none; }
}

/* Pause chip stays compact, but its tap target must not be. Extend the hit
   area past the visual pill, and keep it fully visible where hover does not
   exist (touch), since it is the only way to stop the loop. */
.reel__toggle { position: absolute; }
.reel__toggle::after {
  content: ""; position: absolute; inset: -8px; border-radius: inherit;
}
@media (hover: none) {
  .reel__toggle { opacity: 1; }
}