/* OXQL product presentation. Dimensions follow the 92.5 x 42.2 x 9 mm enclosure.
   Page chrome uses the shared tokens; the 3D device keeps its own fixed
   "material" colours (--dev-*) because the object looks the same on cream and dark. */
:root {
  --dev-body: #22282c; --dev-line: #555d64;
  --dev-edge-a: #252a2e; --dev-edge-b: #30363a; --dev-side-a: #252a2d; --dev-side-b: #151a1e;
  --dev-port: #05080b; --dev-metal: #a3a7a5; --dev-metal-dark: #626a70;
}
.ox-hero { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 32px; padding-top: 80px; padding-bottom: 64px; min-height: 620px; }
.ox-hero h1, .ox-case-intro h1 { font-size: clamp(32px, 6.4vw, 72px); font-weight: 400; line-height: 1.08; white-space: pre-line; letter-spacing: -0.03em; }
.ox-lead { color: var(--body); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; max-width: 58ch; margin-top: 20px; }
.ox-hero .btn-row, .ox-cta .btn-row { margin-top: 28px; }
.ox-dot { color: var(--primary-text); }
.ox-hero .subhead { margin-top: 18px; }

/* Viewer: a soft pool of light on cream, a warm glow on dark */
.ox-viewer { min-width: 0; padding: 18px 0; position: relative; background: radial-gradient(ellipse at 50% 46%, var(--surface-strong), transparent 68%); }
.ox-stage { height: 340px; width: 100%; position: relative; perspective: 1100px; cursor: grab; touch-action: pan-y; user-select: none; outline-offset: 3px; border-radius: var(--r-xl); }
.ox-stage::after { content: ""; position: absolute; left: 50%; bottom: 34px; width: 62%; height: 26px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ink) 22%, transparent), transparent 70%); filter: blur(8px); pointer-events: none; }
.ox-stage:active { cursor: grabbing; }
.ox-model { --w: 370px; --h: 168.8px; --d: 36px; width: var(--w); height: var(--h); position: absolute; left: 50%; top: 50%; margin-left: -185px; margin-top: -84.4px; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(-24deg); z-index: 1; }
.ox-face { position: absolute; backface-visibility: hidden; border: 1px solid var(--dev-line); background: var(--dev-body); }
.ox-front, .ox-back { width: var(--w); height: var(--h); border-radius: 6px; background-size: 100% 100%; border: 0; }
.ox-front { background-image: url('../assets/products/oxql-front.svg'); transform: translateZ(18px); }
.ox-back { background-image: url('../assets/products/oxql-back.svg'); transform: rotateY(180deg) translateZ(18px); }
.ox-top, .ox-bottom { width: var(--w); height: var(--d); left: 0; top: 66.4px; background: repeating-linear-gradient(0deg, var(--dev-edge-a) 0px, var(--dev-edge-a) 2px, var(--dev-edge-b) 3px); }
.ox-top { transform-style: preserve-3d; transform: rotateX(90deg) translateZ(84.4px); }
.ox-bottom { transform: rotateX(-90deg) translateZ(84.4px); }
.ox-left, .ox-right { width: var(--d); height: var(--h); left: 167px; top: 0; background: linear-gradient(90deg, var(--dev-side-a), var(--dev-side-b)); }
.ox-left { transform: rotateY(-90deg) translateZ(185px); }
.ox-right { transform: rotateY(90deg) translateZ(185px); }
.ox-usbc { position: absolute; left: 62%; top: 11px; width: 34px; height: 13px; border: 2px solid var(--dev-metal); border-radius: 7px; background: var(--dev-port); box-shadow: 0 0 0 2px #111; }
.ox-usbc:after { content: ''; position: absolute; left: 5px; right: 5px; top: 4px; border-top: 2px solid #555; }
.ox-switch { position: absolute; top: 10px; width: 22px; height: 14px; background: var(--dev-port); border: 2px solid var(--dev-metal-dark); border-radius: 2px; box-shadow: inset 0 3px 3px #020304; transform-style: preserve-3d; }
.ox-switch--program { left: 65%; }
.ox-switch--program b { position: absolute; left: 6px; top: 4px; width: 6px; height: 4px; background: #555e66; border: 1px solid #78828a; box-shadow: 0 0 3px #020304; }
.ox-switch--power { left: 77%; }
/* Solid 12 x 4 x 4 px actuator: side walls join the cap to the opening. */
.ox-switch--power b { position: absolute; left: 3px; top: 3px; width: 12px; height: 4px; background: #151d23; transform-style: preserve-3d; }
.ox-switch--power b span { position: absolute; display: block; left: 0; top: 0; background: #35424a; border: .5px solid #68767f; }
.ox-switch-bar__cap { width: 12px; height: 4px; transform: translateZ(4px); background: repeating-linear-gradient(90deg, #687780 0px, #687780 1px, #45535c 1px, #45535c 3px) !important; }
.ox-switch-bar__front, .ox-switch-bar__back { width: 12px; height: 4px; transform-origin: top; transform: rotateX(90deg); }
.ox-switch--power b .ox-switch-bar__front { top: 4px; }
.ox-switch-bar__left, .ox-switch-bar__right { width: 4px; height: 4px; transform-origin: left; transform: rotateY(-90deg); }
.ox-switch--power b .ox-switch-bar__right { left: 12px; }
.ox-magnet { position: absolute; top: 13px; left: 10px; width: 15px; height: 61px; border-radius: 9px; background: #111; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; border: 1px solid #525252; }
.ox-magnet b { width: 6px; height: 6px; background: #c9ac6c; border-radius: 50%; }
.ox-magnet b:first-child, .ox-magnet b:last-child { width: 10px; height: 10px; background: #c6bc9e; }
.ox-sd { position: absolute; left: 12px; top: 93px; width: 9px; height: 55px; border: 1px solid #42484c; background: var(--dev-port); }

.ox-controls { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.ox-controls button { background: var(--surface-card); border: 1px solid var(--hairline-strong); border-radius: var(--r-md); padding: 0 14px; min-height: 36px; color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; }
.ox-controls button:hover { background: var(--surface-hover); }
.ox-caption { color: var(--muted); font-size: 13px; line-height: 1.7; }
.ox-viewer > .ox-caption { text-align: center; margin: 14px auto 0; max-width: 46ch; padding-inline: 12px; }

.ox-stats { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding-block: 28px; gap: 24px; margin: 0; }
.ox-stats dd { margin: 0; font-size: clamp(18px, 2vw, 26px); letter-spacing: -0.02em; font-weight: 500; color: var(--ink); }
.ox-stats dt { font-size: 13px; color: var(--muted); margin-top: 8px; }
.ox-section { padding-block: var(--s-section); }
.ox-section > .ox-lead { margin-bottom: 36px; }
.ox-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.ox-card { border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 28px; background: var(--surface-card); }
.ox-number { font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--muted); display: block; margin-bottom: 40px; }
.ox-card h3 { font-size: 22px; line-height: 1.25; margin-bottom: 14px; }
.ox-card p { font-size: 15px; line-height: 1.7; color: var(--body); }
.ox-band { background: var(--canvas-soft); border-block: 1px solid var(--hairline); }
.ox-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.ox-gallery figure { min-width: 0; margin: 0; }
.ox-gallery a { display: block; border-radius: var(--r-lg); border: 1px solid var(--hairline); overflow: hidden; background: var(--surface-strong); }
.ox-gallery img { width: 100%; height: auto; aspect-ratio: 1.25; object-fit: cover; transition: transform .3s; }
.ox-gallery a:hover img { transform: scale(1.03); }
.ox-gallery figcaption { font-size: 13px; color: var(--muted); padding-top: 14px; }
.ox-specs { margin-top: 40px; }
.ox-specs > div { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; border-bottom: 1px solid var(--hairline); padding: 22px 0; }
.ox-specs dt { color: var(--ink); font-weight: 500; }
.ox-specs dd { margin: 0; line-height: 1.7; }
.ox-cta { border-top: 1px solid var(--hairline); }
.ox-case-intro { padding-top: 96px; padding-bottom: 64px; }
.ox-case-intro .ox-lead { max-width: 60ch; }
.ox-case-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 32px; }
.ox-case-nav a { border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); padding: 8px 16px; font-size: 14px; color: var(--ink); background: var(--surface-card); text-decoration: none; }
.ox-case-nav a:hover { background: var(--surface-hover); }
.ox-case { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; border-top: 1px solid var(--hairline); padding: 56px 0; scroll-margin-top: 80px; }
.ox-case h2 { font-size: clamp(26px, 3vw, 36px); max-width: 15ch; line-height: 1.16; }
.ox-case > div > p:not(.eyebrow) { color: var(--body); line-height: 1.75; }
.ox-case .ox-flow { padding: 16px 20px; background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); margin-block: 22px; font-size: 14px; color: var(--ink) !important; }
#specs, #photos { scroll-margin-top: 80px; }
.ox-stage:focus-visible, .ox-controls button:focus-visible, .ox-case-nav a:focus-visible { outline: 2px solid var(--focus); }
@media (min-width: 769px) and (max-width: 1050px) { .ox-model { scale: .83; } .ox-hero { gap: 16px; } .ox-card { padding: 22px; } }
@media (max-width: 768px) {
  .ox-hero { grid-template-columns: 1fr; gap: 10px; padding-top: 48px; padding-bottom: 40px; min-height: 0; }
  .ox-stage { height: 280px; } .ox-model { scale: .85; }
  .ox-stats { grid-template-columns: 1fr 1fr; gap: 26px; } .ox-stats dd { font-size: 18px; }
  .ox-section { padding-block: 56px; }
  .ox-grid { grid-template-columns: 1fr; } .ox-number { margin-bottom: 22px; }
  .ox-gallery { grid-template-columns: 1fr; } .ox-gallery img { aspect-ratio: 16/9; }
  .ox-case { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; } .ox-case h2 { max-width: 24ch; }
  .ox-case-intro { padding-top: 48px; padding-bottom: 40px; }
  .ox-specs > div { grid-template-columns: 1fr; gap: 8px; }
  .ox-viewer { padding-bottom: 12px; }
}
@media (max-width: 1023px) and (min-width: 769px) { .ox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .ox-model { scale: .68; } .ox-stage { height: 240px; } .ox-stats { grid-template-columns: 1fr; } .ox-controls { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ox-gallery img { transition: none; } }