/* ==========================================================================
   DS LAB — Delphisonic Product Showroom
   Design tokens sourced from delphisonic.com brand palette + PRD Section 6.
   ========================================================================== */

:root {
  /* Brand */
  --teal-700: #00786f;
  --teal-600: #009a93;
  --teal-500: #14b3ab;
  --teal-100: #e3f4f2;
  --blue-600: #007090;
  /* Pushed from a visible navy toward near-black — Raycast/Linear-style dark
     mode reads as premium/confident because it's almost black, not "dark
     blue navy." A whisper of blue undertone keeps it ours, not generic. */
  --navy-900: #080d12;
  --navy-800: #10171e;
  --slate-600: #4d5e76;
  --slate-400: #7c8aa0;
  --ink-900: #17212b;
  --mint-500: #00d094;
  --alert-500: #eb5a3e;

  /* Surfaces */
  --bg: #ffffff;
  --bg-alt: #f5f7f8;
  --bg-dark: var(--navy-900);
  --border: #e2e6e8;
  --border-dark: #223a4f;

  /* Type — three fonts, three jobs, never mixed: a bold geometric display
     face carries the hero/story moments at real graphic scale, a monospace
     carries the instrument-nameplate proof (specs, labels, tags), a neutral
     grotesk carries body copy and UI chrome. Space Grotesk + Space Mono share
     a family lineage for a coherent technical voice; Inter stays out of the
     way for long-form text. */
  --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Space Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --font-display: "Space Grotesk", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Motion standard — PRD 6.3 */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-hover: 180ms;
  --dur-move: 700ms;

  /* Layout — a tighter, more deliberate radius than a generic soft-SaaS
     rounding; cards/tags/media frames read as instrument panels, not pillows.
     Primary buttons keep their own pill shape from .btn, independent of
     these tokens. */
  --container: 1180px;
  --radius: 6px;
  --radius-sm: 4px;
  --ribbon-h: 52px;
  --shadow-card: 0 1px 2px rgba(12, 38, 58, 0.06), 0 4px 16px rgba(12, 38, 58, 0.06);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
table { border-collapse: collapse; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Layout helpers ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section--tight { padding: 48px 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); color: #eef3f6; position: relative; }
/* Film-grain overlay — a flat digital dark surface reads as generic SaaS;
   a hair of noise reads as a physical material. Non-interactive, sits over
   everything (real grain does too), tuned low enough to stay a texture, not
   visible static. */
.section--dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  opacity: 0.05; mix-blend-mode: overlay; background-size: 200px 200px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iMyIgc3RpdGNoVGlsZXM9InN0aXRjaCIgcmVzdWx0PSJub2lzZSIvPjxmZUNvbG9yTWF0cml4IGluPSJub2lzZSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMSAgMCAwIDAgMCAxICAwIDAgMCAwIDEgIDAgMCAwIDAuNSAwIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+");
}
.section--dark .muted { color: #9fb2c2; }
.grid-2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 12px; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-600);
}
.section--dark .eyebrow { color: var(--teal-500); }
h1 { font-family: var(--font-display); font-size: clamp(32px, 4vw, 46px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
/* Poster-scale hero headline — used sparingly, where the product itself is
   about to occupy the screen right below it. Not a global h1 change: most
   headings on this site are still reference-density, not billboard-density.
   Pushed to genuine graphic scale (not just "a bit bigger than h1") — the
   headline is a design element in its own right, not a caption. */
.hero-display { font-family: var(--font-display); font-size: clamp(44px, 8vw, 104px); line-height: 1.0; letter-spacing: -0.02em; font-weight: 600; }
.hero-display .accent { color: var(--teal-500); }
h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: 19px; font-weight: 700; }
.lede { font-size: 18px; color: var(--slate-600); line-height: 1.6; }
.section--dark .lede { color: #c3d1db; }
.muted { color: var(--slate-600); }
.small { font-size: 13px; }
.mono { font-family: var(--font-mono); }

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; gap: 32px; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 48px 0; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; letter-spacing: -0.005em;
  transition: transform var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--teal-600); color: #fff; }
.btn-primary:hover { background: var(--teal-700); }
.btn-outline { border: 1.5px solid var(--border); color: var(--ink-900); }
.btn-outline:hover { border-color: var(--teal-600); color: var(--teal-700); }
.section--dark .btn-outline { border-color: var(--border-dark); color: #eef3f6; }
.section--dark .btn-outline:hover { border-color: var(--teal-500); }
.btn-ghost { color: var(--teal-700); font-weight: 700; }
.btn-ghost::after { content: "→"; margin-left: 4px; transition: transform var(--dur-hover) var(--ease); display: inline-block; }
.btn-ghost:hover::after { transform: translateX(3px); }
.section--dark .btn-ghost { color: var(--teal-500); }

/* ---------- Site header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--navy-900);
  border-bottom: 1px solid var(--border-dark);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 22px; width: auto; }
.brand-lab {
  color: #eef3f6; font-weight: 700; font-size: 13px; letter-spacing: 0.14em;
  border-left: 1px solid var(--border-dark); padding-left: 10px; text-transform: uppercase;
}
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a {
  color: #c3d1db; font-size: 14px; font-weight: 600; transition: color var(--dur-hover) var(--ease);
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: #fff; }
.main-nav .btn-primary { padding: 9px 16px; font-size: 13px; }
.nav-toggle { display: none; }
@media (max-width: 780px) {
  .main-nav { position: fixed; inset: 64px 0 0 0; background: var(--navy-900); flex-direction: column; align-items: flex-start; padding: 24px; gap: 20px; transform: translateX(100%); transition: transform var(--dur-move) var(--ease); }
  .main-nav.is-open { transform: translateX(0); }
  .nav-toggle { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; color: #fff; }
}

/* ---------- Ecosystem Ribbon + mini-nav (PRD Section 2) ---------- */
.ribbon-block { position: sticky; top: 64px; z-index: 50; background: #fff; border-bottom: 1px solid var(--border); }
.ribbon {
  display: flex; align-items: center; gap: 6px; height: 34px;
  overflow-x: auto; scrollbar-width: none;
}
.ribbon::-webkit-scrollbar { display: none; }
.ribbon .container { display: flex; align-items: center; gap: 6px; height: 100%; width: 100%; }
.ribbon-node {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: var(--slate-400);
  transition: transform var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
  position: relative; flex: none;
}
.ribbon-node .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ribbon-node:hover { transform: scale(1.06); color: var(--teal-700); background: var(--teal-100); }
.ribbon-node[aria-current="true"] { color: var(--teal-700); background: var(--teal-100); }
.ribbon-arrow {
  font-size: 13px; flex: none;
  background: linear-gradient(90deg, var(--border) 0%, var(--border) 42%, var(--teal-500) 50%, var(--border) 58%, var(--border) 100%);
  background-size: 320% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ribbon-flow 4.5s linear infinite;
}
.ribbon-arrow:nth-of-type(4n+1) { animation-delay: -1.1s; }
.ribbon-arrow:nth-of-type(4n+2) { animation-delay: -2.2s; }
.ribbon-arrow:nth-of-type(4n+3) { animation-delay: -3.3s; }
@keyframes ribbon-flow {
  0% { background-position: 220% 0; }
  100% { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ribbon-arrow { animation: none; background: none; color: var(--border); }
}
.ribbon-node .tip {
  position: absolute; top: 130%; left: 50%; transform: translateX(-50%) translateY(-4px);
  background: var(--navy-900); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap;
  padding: 6px 10px; border-radius: 6px; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.ribbon-node:hover .tip { opacity: 1; transform: translateX(-50%) translateY(0); }

.mini-nav { height: 38px; border-top: 1px solid var(--border); background: var(--bg-alt); }
.mini-nav .container { display: flex; gap: 22px; height: 100%; align-items: center; overflow-x: auto; }
.mini-nav a { font-size: 12.5px; font-weight: 700; color: var(--slate-600); flex: none; transition: color var(--dur-hover) var(--ease); }
.mini-nav a:hover, .mini-nav a.is-active { color: var(--teal-700); }

@media (max-width: 780px) {
  .ribbon-block { top: 64px; }
  /* Label stays visible — the ribbon already scrolls horizontally (see .ribbon
     overflow-x: auto above), so there's no space reason to hide it, and hiding
     it removed the only way to identify each node: the .tip elaboration is
     hover-only and was never reachable on touch, so with the label gone too,
     mobile visitors (and screen readers, since display:none is excluded from
     the accessible name) saw nothing but an unlabeled row of colored dots. */
  .ribbon-node { padding: 6px 10px; }
  .ribbon-node .tip { display: none; }
}

/* ---------- Home hero schema ---------- */
.home-hero { padding: 88px 0 56px; text-align: center; position: relative; overflow: hidden; }
.home-hero.section--dark {
  background:
    linear-gradient(150deg, var(--navy-900), #0d151c);
}
.home-hero.section--dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 34px);
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 28%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse 80% 65% at 50% 28%, #000, transparent 72%);
}
.home-hero.section--dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 22%, rgba(0, 154, 147, 0.28), transparent 65%);
  animation: glow-breathe 5.5s ease-in-out infinite;
}

/* ---------- The First Listening: the cursor reveals a hidden signal ----------
   A waveform sits nearly invisible across the hero until the visitor's own
   cursor passes near it — a soft circle of visibility follows the pointer,
   as if it were a sensor moving across the machine. Content is never gated
   behind this; it's a delight layer, not a requirement. Fine-pointer devices
   only — touch has no hover to "listen" with, and reduced-motion gets a
   single still reveal point instead of one that follows the cursor. */
.listening-layer {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  --mx: 50%; --my: 90px;
  -webkit-mask-image: radial-gradient(circle 190px at var(--mx) var(--my), #000 0%, transparent 72%);
  mask-image: radial-gradient(circle 190px at var(--mx) var(--my), #000 0%, transparent 72%);
}
.listening-layer svg {
  width: 100%; height: 100%; display: block;
}
.listening-layer path {
  fill: none; stroke: var(--teal-500); stroke-width: 1.4; opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
  .listening-layer { -webkit-mask-image: radial-gradient(circle 190px at 50% 90px, #000 0%, transparent 72%); mask-image: radial-gradient(circle 190px at 50% 90px, #000 0%, transparent 72%); }
}
@media (prefers-reduced-motion: reduce) { .home-hero.section--dark::after { animation: none; } }
.home-hero .container { position: relative; z-index: 1; }
.home-hero h1 { max-width: 760px; margin: 0 auto 16px; }
.home-hero .lede { max-width: 620px; margin: 0 auto 36px; }
.schema {
  display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap;
  margin: 40px auto 0; max-width: 980px; position: relative;
}
.schema-node {
  display: flex; flex-direction: column; align-items: center; gap: 10px; width: 150px;
  padding: 18px 10px; border-radius: var(--radius); border: 1.5px solid var(--border);
  position: relative; z-index: 1;
  transition: transform var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}
.schema-node:hover { transform: translateY(-3px); border-color: var(--teal-600); box-shadow: var(--shadow-card); }
.section--dark .schema-node {
  border-color: var(--border-dark);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(3px);
}
.section--dark .schema-node:hover {
  border-color: var(--teal-500);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(20, 179, 171, 0.3);
}
.section--dark .schema-node .ico { background: rgba(0, 154, 147, 0.18); color: var(--teal-500); }
.section--dark .schema-node.is-machine .ico, .section--dark .schema-node.is-team .ico { background: rgba(255, 255, 255, 0.06); color: #9fb2c2; }
.section--dark .schema-node span.role { color: #9fb2c2; }
.schema-node:not(.is-machine):not(.is-team) .ico { animation: pulse 2.6s infinite; }
@media (prefers-reduced-motion: reduce) { .schema-node:not(.is-machine):not(.is-team) .ico { animation: none; } }

/* Traveling data pulse, ambient fallback for viewports too small for the scroll-driven Journey below */
@media (max-width: 900px) {
  .schema-spine-dot {
    position: absolute; top: 40px; left: 2%; width: 8px; height: 8px; margin-left: -4px;
    border-radius: 50%; background: var(--teal-500); z-index: 0; pointer-events: none; opacity: 0;
    box-shadow: 0 0 10px 3px rgba(20, 179, 171, 0.65);
    animation: spine-travel 5.5s linear infinite;
  }
  .schema-spine-dot:nth-child(2) { animation-delay: -1.8s; }
  .schema-spine-dot:nth-child(3) { animation-delay: -3.6s; }
}
@keyframes spine-travel {
  0% { left: 2%; opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { left: 98%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .schema-spine-dot { display: none; } }

/* ---------- The Journey: scroll-scrubbed signal, Machine to Team ----------
   Desktop + motion-ok only. Smaller viewports and prefers-reduced-motion get the
   always-on ambient spine-dot above instead of a pinned scroll sequence. */
.journey-track, .journey-caption { display: none; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  #journey.is-scrollable { position: relative; height: 230vh; padding: 0; }
  #journey.is-scrollable .home-hero__stage {
    position: sticky; top: 64px; min-height: calc(100vh - 64px); box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center; padding: 88px 0 56px;
  }
  .journey-track {
    display: block; position: absolute; top: 40px; left: 0; right: 0; height: 2px; z-index: 0; pointer-events: none;
  }
  .journey-fill {
    position: absolute; top: -1px; left: 0; height: 2px; width: 0%;
    background: var(--teal-500); box-shadow: 0 0 8px 1px rgba(20, 179, 171, 0.6);
  }
  .journey-traveler {
    position: absolute; top: -12px; left: 0%; width: 26px; height: 26px; margin-left: -13px;
    border-radius: 50%; background: var(--navy-900); border: 1.5px solid var(--teal-500);
    box-shadow: 0 0 14px 3px rgba(20, 179, 171, 0.55);
    display: flex; align-items: center; justify-content: center; color: var(--teal-500);
  }
  .jt-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 200ms var(--ease); }
  .journey-traveler[data-leg="wave"] .jt-icon--wave,
  .journey-traveler[data-leg="packet"] .jt-icon--packet,
  .journey-traveler[data-leg="radio"] .jt-icon--radio,
  .journey-traveler[data-leg="alert"] .jt-icon--alert { opacity: 1; }
  .journey-caption {
    display: block; text-align: center; margin-top: 22px; font-family: var(--font-mono); font-size: 12.5px;
    letter-spacing: 0.03em; color: var(--teal-500); min-height: 16px;
  }
  .schema-node.is-hit { animation: node-hit 650ms var(--ease); }
  @keyframes node-hit {
    0% { box-shadow: 0 0 0 0 rgba(20, 179, 171, 0.5); }
    40% { box-shadow: 0 0 0 10px rgba(20, 179, 171, 0); border-color: var(--teal-500); }
    100% { box-shadow: 0 0 0 0 rgba(20, 179, 171, 0); }
  }
}
.schema-node { animation: schema-in 550ms var(--ease) both; }
.schema-node:nth-of-type(1) { animation-delay: 0ms; }
.schema-node:nth-of-type(2) { animation-delay: 90ms; }
.schema-node:nth-of-type(3) { animation-delay: 180ms; }
.schema-node:nth-of-type(4) { animation-delay: 270ms; }
.schema-node:nth-of-type(5) { animation-delay: 360ms; }
@keyframes schema-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .schema-node { animation: none; } }
.schema-node .ico, .product-card__ico {
  width: 44px; height: 44px; border-radius: 50%; background: var(--teal-100); color: var(--teal-700);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.schema-node strong { font-size: 14px; }
.schema-node span.role { font-size: 12px; color: var(--slate-600); }
.schema-node.is-machine .ico, .schema-node.is-team .ico { background: var(--bg-alt); color: var(--slate-600); }
.schema-arrow {
  font-size: 20px; flex: none;
  background: linear-gradient(90deg, var(--border) 0%, var(--border) 42%, var(--teal-500) 50%, var(--border) 58%, var(--border) 100%);
  background-size: 320% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ribbon-flow 4.5s linear infinite;
}
.schema-arrow:nth-of-type(4n+1) { animation-delay: -1.1s; }
.schema-arrow:nth-of-type(4n+2) { animation-delay: -2.2s; }
.schema-arrow:nth-of-type(4n+3) { animation-delay: -3.3s; }
.schema-flow { stroke: var(--border); }
@media (prefers-reduced-motion: reduce) {
  .schema-arrow { animation: none; background: none; color: var(--border); }
}
@media (max-width: 900px) {
  .schema { gap: 8px; }
  .schema-arrow { transform: rotate(90deg); }
}

/* ---------- Product entry cards (home) ---------- */
.product-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product-card {
  border: 1.5px solid var(--border); border-radius: var(--radius); padding: 28px; background: #fff;
  transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
  display: flex; flex-direction: column; gap: 14px;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--teal-600); }
.product-card .tag { font-size: 12px; font-weight: 700; color: var(--teal-700); text-transform: uppercase; letter-spacing: 0.06em; }
.product-card p { color: var(--slate-600); font-size: 14.5px; }
@media (max-width: 900px) { .product-cards { grid-template-columns: 1fr; } }

/* ---------- Hero (product pages) ---------- */
.product-hero { padding: 56px 0; }
.product-hero.section--dark { background: linear-gradient(150deg, var(--navy-900), #0d151c); }
.product-hero .grid-2 { grid-template-columns: 0.95fr 1.15fr; }
.hero-media {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 34px),
    #08151f;
  display: flex; align-items: center; justify-content: center; min-height: 380px;
}
.hero-media { perspective: 1100px; }
.hero-media img {
  position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain;
  animation: hero-reveal 900ms var(--ease) both, stage-drift 9s ease-in-out 900ms infinite;
}
@keyframes hero-reveal {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes stage-drift {
  0%, 100% { transform: rotate3d(0, 1, 0, -2.5deg) rotate3d(1, 0, 0, 1deg) scale(1); }
  50% { transform: rotate3d(0, 1, 0, 2.5deg) rotate3d(1, 0, 0, -1deg) scale(1.015); }
}
@keyframes glow-breathe {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media img { animation: none; }
}
@media (max-width: 900px) {
  .product-hero .grid-2 { grid-template-columns: 1fr; }
}

/* The product occupies the screen — same stage (grid, glow, drift) as before,
   just no longer boxed into half a grid column beside a paragraph. */
.hero-media--full { max-width: 720px; margin: 40px auto 0; min-height: 460px; }
@media (max-width: 780px) { .hero-media--full { min-height: 320px; } }

/* The reveal is scroll-driven on desktop, same technique as Apple/Ray-Ban
   product pages: pin the stage, tie rotation + explode to how far the visitor
   has scrolled through a tall track, release once the sequence completes.
   Mobile and prefers-reduced-motion get the plain static hero underneath —
   same JS state (rotation/explode), just driven by drag + the button instead
   of scroll, never a second, different experience bolted on. */
.sensor-reveal { margin-top: 40px; }
.sensor-reveal__caption {
  font-family: var(--font-mono);
  text-align: center; margin-top: 18px; font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate-400);
  opacity: 0; transition: opacity 300ms ease;
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .sensor-reveal.is-scrollable { position: relative; height: 260vh; margin-top: 0; }
  .sensor-reveal.is-scrollable .sensor-reveal__stage {
    position: sticky; top: 72px; min-height: calc(100vh - 72px);
    display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;
  }
  .sensor-reveal.is-scrollable .sensor-reveal__caption { opacity: 1; }
  .sensor-reveal.is-scrollable .sensor-stage__hint,
  .sensor-reveal.is-scrollable .sensor-explode-btn { display: none; }
}

/* DS-Track AIR hero: a real, interactive digital twin — not a photo, not a fake
   render. Drag rotates it; "Open it up" answers the one question a static photo
   never can — how does something this small know so much. */
/* Widened from 720px — the product should feel like it's taking over the
   screen (Linear/Apple's "the visual is expansive, not a boxed-in card"),
   not sitting in a neatly contained card with visible margin either side. */
.sensor-stage {
  width: 100%; max-width: 980px; margin: 40px auto 0; min-height: 520px; flex-direction: column;
  cursor: grab; touch-action: none;
}
.sensor-stage.is-dragging { cursor: grabbing; }
/* Trails the pointer only inside .sensor-stage zones (see main.js) — additive
   to the native grab/grabbing cursor, not a replacement for it. */
.magnetic-cursor {
  position: fixed; top: 0; left: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--teal-500); pointer-events: none; z-index: 999;
  transform: translate(-50%, -50%); opacity: 0; mix-blend-mode: difference;
  transition: opacity 200ms var(--ease);
}
.magnetic-cursor.is-active { opacity: 1; }
.sensor-stage__fallback { display: none; position: relative; z-index: 1; max-width: 320px; margin: 0 auto; }
.sensor-stage.webgl-failed .sensor-stage__fallback { display: block; }
.sensor-stage.webgl-failed canvas { display: none; }
.sensor-stage__hint {
  font-family: var(--font-mono);
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: #9fb2c2; opacity: 0.8; pointer-events: none; z-index: 2; margin: 0;
}
.sensor-labels {
  position: absolute; top: 24px; right: 24px; z-index: 2; display: flex; flex-direction: column; gap: 16px;
  max-width: 210px; pointer-events: none; text-align: right;
}
.sensor-label { font-family: var(--font-mono); opacity: 0; transform: translateX(8px); transition: opacity 400ms ease, transform 400ms ease; font-size: 12.5px; color: #cdd8e2; }
.sensor-label strong { display: block; color: #fff; font-size: 13px; margin-bottom: 2px; }
.sensor-stage.is-exploded .sensor-label { opacity: 1; transform: translateX(0); }
.sensor-stage__controls { position: absolute; bottom: 16px; right: 16px; z-index: 2; display: flex; gap: 8px; }
.sensor-explode-btn {
  background: rgba(8, 21, 31, 0.7); border-color: rgba(255, 255, 255, 0.3); color: #fff;
  font-size: 13px; padding: 8px 16px;
}
.sensor-explode-btn:hover { border-color: var(--teal-500); }
.sensor-stage.webgl-failed .sensor-stage__hint,
.sensor-stage.webgl-failed .sensor-stage__controls,
.sensor-stage.webgl-failed .sensor-labels { display: none; }
.sensor-stage canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}

/* One hero visual, not two boxes bolted side by side — it opens on the real
   photo (full-bleed, no crop-in-a-card awkwardness), then dissolves into the
   digital twin the moment the visitor engages (drag, scroll, or a short
   timed reveal if they just sit and look). The "real thing" / "digital twin"
   badges crossfade in the same spot, so the honesty label always matches
   what's actually on screen. */
/* Specificity note: this is a descendant of `.hero-media`, so the generic
   `.hero-media img` rule (with its own hero-reveal animation, which ends by
   pinning opacity to 1 — CSS animations beat plain declarations regardless
   of selector specificity) would otherwise permanently override the opacity
   toggle below. #sensorStage-scoped selector cancels that animation here. */
#sensorStage .sensor-stage__real-reveal {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  z-index: 1; transition: opacity 900ms var(--ease); animation: none;
}
.sensor-stage.is-twin-revealed .sensor-stage__real-reveal { opacity: 0; pointer-events: none; }
#sensorStage .sensor-stage__twin-badge { opacity: 0; transition: opacity 500ms var(--ease); }
#sensorStage.is-twin-revealed .sensor-stage__twin-badge { opacity: 1; }
#sensorStage .sensor-stage__real-badge { transition: opacity 500ms var(--ease); }
#sensorStage.is-twin-revealed .sensor-stage__real-badge { opacity: 0; }
@media (max-width: 780px) {
  .sensor-stage { min-height: 340px; }
  .sensor-labels { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: none; margin-top: 16px; text-align: center; }
  .sensor-label { text-align: center; }
  .sensor-stage__hint { display: none; }
}

.sensor-stage--demo { min-height: 340px; max-width: none; margin-left: 0; margin-right: 0; }
@media (max-width: 780px) { .sensor-stage--demo { min-height: 260px; } }

/* ---------- Hero stage variants — each product gets its own presentation, not a repeated panel ---------- */
/* DS Hub AIR: source photo is a small flat catalog cutout. Feather it into the stage rather than
   showing its flat backdrop, and let it become the origin point of an outward wireless-uplink pulse —
   the visual is standing in for the product's actual job (getting data off the site), not decoration. */
.hero-media--hub img {
  max-width: 230px; margin: 0 auto;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 52%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 52%, #000 58%, transparent 100%);
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.55));
}
.signal-rings { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.signal-rings span {
  position: absolute; width: 90px; height: 90px; border-radius: 50%;
  border: 1px solid rgba(20, 179, 171, 0.45);
  animation: ring-expand 3.2s ease-out infinite;
}
.signal-rings span:nth-child(2) { animation-delay: 1.07s; }
.signal-rings span:nth-child(3) { animation-delay: 2.14s; }
@keyframes ring-expand {
  0% { width: 90px; height: 90px; opacity: 0.55; }
  100% { width: 360px; height: 360px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .signal-rings span { animation: none; opacity: 0; } }

/* Technology page hero: the sensor's own circular face becomes the viewport.
   A once-per-rotation defect is physically periodic — so instead of a bar chart,
   the vibration signature is traced around a circle, and a slow sweep (one lap = one
   shaft revolution) flares every time it crosses the same point. Show the physics first;
   labels only fade in once the shape has already told the story. */
.reveal-stage { max-width: 460px; margin: 0 auto; flex-direction: column; }
.reveal-lens { position: relative; width: 260px; height: 260px; margin: 0 auto; }
.reveal-lens svg { width: 100%; height: 100%; overflow: visible; }
.reveal-lens__ring { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.reveal-lens__trace { fill: none; stroke: var(--teal-500); stroke-width: 2; opacity: 0.9; }
.reveal-lens__sweep {
  stroke: var(--teal-500); stroke-width: 2; stroke-linecap: round; opacity: 0.8;
  transform-origin: 110px 110px; transform-box: view-box;
  animation: reveal-sweep-rotate 5s linear infinite; animation-play-state: paused;
}
.reveal-stage.is-revealed .reveal-lens__sweep { animation-play-state: running; }
@keyframes reveal-sweep-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.reveal-lens__hot-arc {
  fill: var(--alert-500); opacity: 0.3; transform-box: fill-box; transform-origin: center;
  animation: reveal-hot-pulse 5s ease-in-out infinite; animation-play-state: paused;
}
.reveal-stage.is-revealed .reveal-lens__hot-arc { animation-play-state: running; }
@keyframes reveal-hot-pulse {
  0%, 48% { opacity: 0.3; transform: scale(1); filter: drop-shadow(0 0 0 rgba(235, 90, 62, 0)); }
  55.6% { opacity: 1; transform: scale(1.6); filter: drop-shadow(0 0 10px rgba(235, 90, 62, 0.85)); }
  63%, 100% { opacity: 0.3; transform: scale(1); filter: drop-shadow(0 0 0 rgba(235, 90, 62, 0)); }
}
.reveal-lens__caption {
  margin-top: 18px; text-align: center; font-size: 12px; font-weight: 700;
  letter-spacing: 0.03em; color: #9fb2c2; opacity: 0; transition: opacity 900ms ease 1100ms;
}
.reveal-stage.is-revealed .reveal-lens__caption { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal-lens__sweep { display: none; }
  .reveal-lens__hot-arc { animation: none; opacity: 1; transform: none; filter: drop-shadow(0 0 8px rgba(235, 90, 62, 0.6)); }
  .reveal-lens__caption { opacity: 1; transition: none; }
}
@media (max-width: 480px) { .reveal-lens { width: 210px; height: 210px; } }

/* DS Insight hero: the real screen IS the product — full-bleed, glowing, staged
   like a physical object rather than boxed into a text/image column. */
.insight-stage { position: relative; max-width: 1180px; margin: 48px auto 0; padding: 0 24px; }
.insight-stage::before {
  content: ""; position: absolute; inset: -60px 24px 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 28%, rgba(20, 179, 171, 0.24), transparent 72%);
}
.insight-stage img {
  position: relative; z-index: 1; width: 100%; display: block; border-radius: 14px;
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
@media (max-width: 780px) { .insight-stage { margin-top: 32px; } }
.spec-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
/* Solid-fill tag, not a soft outlined pill — the instrument-nameplate motif
   applied to the hero spec chips. */
.spec-chip { font-family: var(--font-sans); background: var(--navy-800); border-radius: var(--radius-sm); padding: 7px 14px; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: #eef3f6; }
.hero-ctas { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* ---------- Feature cards ---------- */
.feature-card { padding: 22px; border-radius: var(--radius); background: var(--bg-alt); border: 1px solid var(--border); }
.feature-card h3 { margin-bottom: 6px; font-size: 16px; }
.feature-card p { font-size: 14px; color: var(--slate-600); line-height: 1.55; }
.feature-card .n { color: var(--teal-600); font-weight: 800; font-size: 13px; margin-bottom: 10px; display: block; }

/* ---------- Quiet moment (rest section) ---------- */
.quiet-stat {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 52px); font-weight: 500; line-height: 1.32;
  letter-spacing: -0.01em; color: var(--slate-600); font-variant-numeric: tabular-nums;
}
.quiet-stat .accent { color: var(--ink-900); font-weight: 700; }

/* ---------- Tab panel transitions ---------- */
.panel-fade-in { animation: panel-fade-in 320ms var(--ease) both; }
@keyframes panel-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Timeline (sequential step-by-step process) ---------- */
.timeline { max-width: 720px; }
.timeline-step {
  display: flex; gap: 24px;
  opacity: 0; transform: translateX(-10px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.timeline-step.is-visible { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .timeline-step { opacity: 1; transform: none; transition: none; }
}
.timeline-step__marker { flex: none; display: flex; flex-direction: column; align-items: center; }
.timeline-step__dot {
  width: 40px; height: 40px; border-radius: 50%; background: var(--teal-100); color: var(--teal-700);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: none;
}
.timeline-step__line { width: 2px; flex: 1; background: var(--border); margin: 6px 0; min-height: 24px; }
.timeline-step:last-child .timeline-step__line { display: none; }
.timeline-step__body { padding-bottom: 34px; }
.timeline-step:last-child .timeline-step__body { padding-bottom: 0; }
.timeline-step__body h3 { margin-bottom: 6px; }
.timeline-step__body p { font-size: 14.5px; color: var(--slate-600); line-height: 1.6; max-width: 560px; }
.section--dark .timeline-step__dot { background: rgba(0,154,147,0.18); color: var(--teal-500); }
.section--dark .timeline-step__line { background: var(--border-dark); }
.section--dark .timeline-step__body p { color: #c3d1db; }

/* ---------- Illustrative badge ---------- */
.illustrative-badge {
  font-family: var(--font-mono);
  position: absolute; top: 10px; right: 10px; background: rgba(12,38,58,0.85); color: #fff;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--radius-sm); z-index: 2;
}
.media-frame { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }

/* ---------- Interactive Demo shell ---------- */
.demo-shell { border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow-card); }
.demo-shell__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 12px; }
.demo-shell__body { padding: 28px; }

/* Watch the Story autoplay (DS Insight Role Switch) */
.watch-story-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid var(--teal-600); color: var(--teal-700); font-size: 13px; font-weight: 700; background: #fff;
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.watch-story-btn:hover { background: var(--teal-600); color: #fff; }
.watch-story-btn:disabled { opacity: 0.55; pointer-events: none; }

/* Tab groups (Scenario Selector / Role Switch) */
.tab-group { display: flex; gap: 6px; flex-wrap: wrap; }
.tab-btn {
  padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--slate-600);
  border: 1.5px solid var(--border); transition: all var(--dur-hover) var(--ease);
}
.tab-btn:hover { border-color: var(--teal-600); color: var(--teal-700); }
.tab-btn[aria-selected="true"] { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }

/* Evidence toggle */
.evidence-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sound-toggle {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--border); color: var(--slate-600); font-size: 13px; font-weight: 700;
  transition: border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}
.sound-toggle:hover { border-color: var(--teal-600); color: var(--teal-700); }
.sound-toggle.is-playing { border-color: var(--teal-600); color: var(--teal-700); background: var(--teal-100); }
.sound-toggle svg { flex: none; }
.evidence-toggle { display: inline-flex; border: 1.5px solid var(--border); border-radius: 999px; padding: 3px; }
.evidence-toggle button { padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--slate-600); transition: all var(--dur-hover) var(--ease); }
.evidence-toggle button[aria-pressed="true"].healthy { background: var(--mint-500); color: #063a2c; }
.evidence-toggle button[aria-pressed="true"].faulty { background: var(--alert-500); color: #3a0e05; }

/* Fault Timeline Scrubber */
.evidence-scrub { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.scrub-play {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--teal-700);
  transition: border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}
.scrub-play svg { margin-left: 2px; }
.scrub-play:hover { border-color: var(--teal-600); background: var(--teal-100); }
.scrub-play:disabled { opacity: 0.5; pointer-events: none; }
.scrub-range {
  flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; outline: none;
  background: linear-gradient(90deg, var(--mint-500) 0%, var(--mint-500) var(--scrub-pct, 0%), var(--border) var(--scrub-pct, 0%), var(--alert-500) 100%);
}
.scrub-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  border: 2px solid var(--teal-700); cursor: pointer; box-shadow: var(--shadow-card);
}
.scrub-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--teal-700); cursor: pointer; }
.scrub-label { flex: none; font-size: 12.5px; font-weight: 700; color: var(--slate-600); width: 100px; text-align: right; }
.evidence-scrub-svg rect { transition: y 60ms linear, height 60ms linear; }
.evidence-scrub-svg rect.is-peak { animation: spike-pulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
@media (prefers-reduced-motion: reduce) {
  .evidence-scrub-svg rect { transition: none; }
  .evidence-scrub-svg rect.is-peak { animation: none; }
}

/* Scrub track with a fixed threshold marker — the drag itself is the
   instrument, no separate reduced-motion mode needed since the marker's
   position is stated in the caption text either way. */
.scrub-range-wrap { position: relative; flex: 1; display: flex; align-items: center; }
.scrub-range-wrap .scrub-range { width: 100%; }
.scrub-threshold-marker {
  position: absolute; top: -14px; width: 2px; height: 16px; background: var(--slate-400);
  transform: translateX(-50%); pointer-events: none;
}
.scrub-threshold-marker::after {
  content: "Threshold"; position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em; color: var(--slate-600); white-space: nowrap;
}

.evidence-panel { display: grid; grid-template-columns: 1fr 1.3fr; gap: 28px; align-items: center; }
.evidence-visual { border-radius: var(--radius-sm); background: var(--bg-alt); border: 1px solid var(--border); padding: 20px; min-height: 220px; display: flex; align-items: center; justify-content: center; position: relative; }
.evidence-visual rect[fill="#eb5a3e"] {
  transform-box: fill-box; transform-origin: bottom; animation: spike-pulse 1.6s ease-in-out infinite;
}
@keyframes spike-pulse {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.86); opacity: 0.82; }
}
@media (prefers-reduced-motion: reduce) { .evidence-visual rect[fill="#eb5a3e"] { animation: none; } }
.evidence-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 999px; margin-bottom: 14px; }
.evidence-status.healthy { background: #e2f8ef; color: #067a54; }
.evidence-status.faulty { background: #fdeae5; color: #b8391f; }
.evidence-status .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.evidence-status.faulty .dot { animation: soft-pulse 1.8s ease-in-out infinite; }
@keyframes soft-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
@media (max-width: 780px) { .evidence-panel { grid-template-columns: 1fr; } }

/* Accordion (IT Q&A, Specifications) */
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-item:first-child { border-top: 1px solid var(--border); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 4px; font-weight: 700; font-size: 15.5px; text-align: left;
}
.accordion-trigger .plus { font-size: 20px; color: var(--teal-600); transition: transform var(--dur-hover) var(--ease); flex: none; }
.accordion-trigger[aria-expanded="true"] .plus { transform: rotate(45deg); }
.accordion-trigger__label { display: flex; align-items: baseline; gap: 10px; }
.accordion-trigger__index { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--teal-600); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height var(--dur-move) var(--ease); }
.accordion-panel__inner { padding: 0 4px 22px; color: var(--slate-600); font-size: 14.5px; line-height: 1.65; }

/* Spec table — monospace, tabular figures: reads as an instrument nameplate,
   not a generic content table. */
.spec-table { font-family: var(--font-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.spec-table tr { border-bottom: 1px solid var(--border); }
.spec-table th, .spec-table td { text-align: left; padding: 11px 14px; vertical-align: top; }
.spec-table th { width: 38%; color: var(--slate-600); font-weight: 500; }
.spec-table td { font-weight: 600; }
.spec-table tbody tr:nth-child(odd) { background: var(--bg-alt); }
.spec-group-title { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal-700); margin: 22px 0 8px; }
.spec-group-title:first-child { margin-top: 0; }

/* Bearing Anatomy Hotspot (Technology) */
.bearing-explorer { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.bearing-diagram { flex: none; margin: 0 auto; }
.bearing-diagram svg { display: block; }
.bd-part { fill: var(--slate-400); transition: fill 150ms var(--ease); cursor: pointer; }
.bd-cut { fill: #fff; pointer-events: none; }
.bd-cage { fill: none; stroke: var(--slate-400); stroke-width: 1.5; stroke-dasharray: 3 4; transition: stroke 150ms var(--ease); pointer-events: all; }
.bd-part.is-active { fill: var(--teal-600); }
.bd-part.is-active.bd-cage { fill: none; stroke: var(--teal-600); }
.bearing-explorer__side { flex: 1; min-width: 260px; }
.bearing-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.bd-legend-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--border);
  font-size: 12.5px; font-weight: 700; color: var(--slate-600); transition: all var(--dur-hover) var(--ease);
}
.bd-legend-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--slate-400); flex: none; transition: background var(--dur-hover) var(--ease); }
.bd-legend-item em { font-style: normal; color: var(--teal-700); font-weight: 800; margin-left: 5px; }
.bd-legend-item:hover, .bd-legend-item.is-active { border-color: var(--teal-600); color: var(--teal-700); background: var(--teal-100); }
.bd-legend-item.is-active .dot { background: var(--teal-600); }
.spec-table tr[data-part] { cursor: pointer; transition: background 150ms var(--ease); }
.spec-table tr[data-part].is-active { background: var(--teal-100); }
@media (max-width: 780px) { .bearing-explorer { flex-direction: column; align-items: center; } .bearing-explorer__side { width: 100%; } }

/* Live Kinematic Frequency Explorer (Technology) */
.freq-explorer { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; padding: 24px; }
.freq-explorer__controls { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.freq-explorer__controls label { font-size: 13px; font-weight: 700; color: var(--slate-600); flex: none; }
.freq-explorer__controls input[type="range"] {
  flex: 1; min-width: 160px; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px;
  background: var(--border); outline: none;
}
.freq-explorer__controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  border: 2px solid var(--teal-700); cursor: pointer; box-shadow: var(--shadow-card);
}
.freq-explorer__controls input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--teal-700); cursor: pointer; }
.freq-explorer__controls output { font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; color: var(--teal-700); flex: none; min-width: 130px; text-align: right; }
.freq-rows { display: flex; flex-direction: column; gap: 13px; }
.freq-row { display: grid; grid-template-columns: 130px 1fr 74px; align-items: center; gap: 12px; }
.freq-row__label { font-size: 13px; font-weight: 700; }
.freq-row__label small { display: block; font-weight: 500; color: var(--slate-600); font-size: 11px; }
.freq-row__track { position: relative; height: 6px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border); }
.freq-row__dot {
  position: absolute; top: 50%; left: 0%; width: 12px; height: 12px; border-radius: 50%; background: var(--teal-600);
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--teal-600); transform: translate(-50%, -50%);
  transition: left 120ms linear;
}
.freq-row__val { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--slate-600); text-align: right; }
@media (prefers-reduced-motion: reduce) { .freq-row__dot { transition: none; } }
@media (max-width: 640px) { .freq-row { grid-template-columns: 96px 1fr 58px; gap: 8px; } }

/* Hotspot */
.hotspot-frame { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.hotspot {
  position: absolute; width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal-600); border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(0,154,147,0.5);
  animation: pulse 2.2s infinite;
  transition: background var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.hotspot:hover, .hotspot:focus-visible {
  background: var(--mint-500);
  box-shadow: 0 0 0 6px rgba(0, 208, 148, 0.28), 0 0 14px 2px rgba(0, 208, 148, 0.55);
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,154,147,0.45); }
  70% { box-shadow: 0 0 0 12px rgba(0,154,147,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,154,147,0); }
}
.hotspot-card {
  position: absolute; width: 230px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card); padding: 14px; font-size: 13px; opacity: 0; visibility: hidden;
  transform: translateY(6px); transition: opacity var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); z-index: 5;
}
.hotspot-card.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.hotspot-card strong { display: block; margin-bottom: 4px; font-size: 13.5px; }

/* Network Resilience Stress-Test (DS Hub AIR) */
.resilience-demo { margin-top: 20px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-alt); }
.resilience-row { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.resilience-node {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--slate-600);
  padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--border); flex: none;
}
.resilience-node .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-600); }
.resilience-link { flex: 1; height: 2px; background: var(--teal-500); position: relative; min-width: 24px; transition: background 300ms var(--ease); }
.resilience-link::after {
  content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-500);
  animation: resilience-flow 1.6s linear infinite; box-shadow: 0 0 6px 1px rgba(20, 179, 171, 0.6);
}
@keyframes resilience-flow { 0% { left: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 96%; opacity: 0; } }
.resilience-link.is-down { background: repeating-linear-gradient(90deg, var(--alert-500) 0 6px, transparent 6px 10px); }
.resilience-link.is-down::after { display: none; }
@media (prefers-reduced-motion: reduce) { .resilience-link::after { animation: none; opacity: 0; } }
.resilience-status { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.resilience-buffer { font-family: var(--font-mono); font-size: 12.5px; color: var(--slate-600); }

/* Works with */
.works-with-card { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1.5px solid var(--border); border-radius: var(--radius); transition: border-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); }
.works-with-card:hover { border-color: var(--teal-600); transform: translateY(-2px); }
.works-with-card .ico { width: 46px; height: 46px; border-radius: 10px; background: var(--teal-100); color: var(--teal-700); display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }

/* CTA band */
.cta-band { text-align: center; padding: 64px 0; }
.cta-band .btn-primary { padding: 15px 30px; font-size: 16px; }

/* Fault mode / capability cards */
.chip-card {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; align-items: center; gap: 10px;
  transition: border-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.chip-card:hover { border-color: var(--teal-600); transform: translateY(-2px); }
.chip-card .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal-600); flex: none; }
.chip-card strong { display: block; font-size: 14px; }
.chip-card span { font-size: 12.5px; color: var(--slate-600); }
.section--dark .chip-card { border-color: var(--border-dark); }
.section--dark .chip-card span { color: #9fb2c2; }
.section--dark .chip-card .dot { background: var(--teal-500); }

/* Dashboard card primitive — used only for the homepage's cost comparison now;
   the DS Insight role-switch mockups this was originally built for were
   removed in favor of the real product screen. */
.dash-mock { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); padding: 20px; }
.dash-mock__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.dash-mock__title { font-weight: 800; font-size: 15px; }
.dash-mock__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.dash-tile { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.dash-tile .label { font-size: 11.5px; color: var(--slate-600); text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; }
.dash-tile .value { font-size: 22px; font-weight: 800; margin-top: 4px; }
.dash-tile .value.alert { color: var(--alert-500); }
.dash-tile .value.ok { color: var(--teal-700); }
.dash-alarm { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px; font-size: 13.5px; }
.dash-alarm .sev { width: 8px; height: 8px; border-radius: 50%; flex: none; animation: soft-pulse 1.8s ease-in-out infinite; }
.dash-alarm .sev.high { background: var(--alert-500); }
.dash-alarm .sev.med { background: #e0a415; }
.dash-cta { margin-top: 14px; padding: 12px 14px; background: var(--navy-900); color: #fff; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 700; }

/* Arrival strip (DS Insight hero) — the page opens on the resolved decision,
   using the same Motor M-114 / BPFO alert the Operator panel shows further
   down, so the hero pays off what the rest of the page then explains. */
.arrival-alert { max-width: 560px; margin: 0 auto 30px; animation: arrival-settle 700ms var(--ease) both; }
.arrival-alert__eyebrow { display: block; text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fb2c2; margin-bottom: 10px; }
.arrival-alert__card { background: rgba(255, 255, 255, 0.06); border-color: var(--border-dark); color: #eef3f6; }
@keyframes arrival-settle {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .arrival-alert { animation: none; } }

/* Downloads */
.download-card {
  display: flex; gap: 20px; align-items: center; padding: 24px; border: 1.5px solid var(--border); border-radius: var(--radius);
  transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.download-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--teal-600); }
.download-cover {
  width: 90px; height: 116px; border-radius: 6px; flex: none; position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 10px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 10px),
    linear-gradient(165deg, var(--navy-900), #0d151c);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: #fff; font-size: 11px; font-weight: 800; text-align: center; padding: 8px; line-height: 1.4;
}
.download-cover::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--teal-500); }
/* Mono document-tag treatment — matches .illustrative-badge's mono/uppercase
   language elsewhere on the page, instead of plain stacked text. */
.download-cover__ext { font-family: var(--font-mono); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: #fff; }
.download-cover__name { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #9fb2c2; }
@media (max-width: 640px) { .download-card { flex-direction: column; align-items: flex-start; } }

/* Footer */
.site-footer { background: var(--navy-900); color: #9fb2c2; padding: 48px 0 28px; }
.site-footer a { color: #c3d1db; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid var(--border-dark); margin-bottom: 20px; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h4 { color: #fff; font-size: 13px; margin-bottom: 12px; }
.footer-col ul { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.footer-bottom { display: flex; justify-content: space-between; font-size: 12.5px; flex-wrap: wrap; gap: 8px; }

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
[data-reveal] { opacity: 1; }