:root {
  --ink: #f2f1ed;
  --muted: #8b8c91;
  --line: rgba(255, 255, 255, 0.12);
  --accent: #ff4a20;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #0b0c0e; }
body { color: var(--ink); font-family: Arial, Helvetica, sans-serif; overflow-x: hidden; }
button { font: inherit; }

.shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 66% 42%, color-mix(in srgb, var(--accent) 9%, transparent) 0, transparent 34%),
    linear-gradient(130deg, #0b0c0e 0%, #141519 47%, #0a0b0d 100%);
}

.topbar {
  height: 76px; padding: 0 4.5vw; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 16px; }
.brand-mark { font-size: 25px; font-weight: 700; letter-spacing: -2px; }
.brand-rule { width: 36px; height: 1px; background: var(--accent); }
.brand-copy, .status { color: #9b9ca1; font-size: 10px; letter-spacing: .2em; }
.status { display: flex; align-items: center; gap: 9px; }
.status span { width: 6px; height: 6px; background: #75f094; border-radius: 50%; box-shadow: 0 0 14px #75f094; }

.product-stage {
  min-height: calc(100vh - 184px); display: grid;
  grid-template-columns: minmax(250px, .85fr) minmax(420px, 1.65fr) minmax(190px, .55fr);
  align-items: center; gap: 20px; padding: 34px 4.5vw 24px;
}
.copy-block { z-index: 3; }
.eyebrow { color: var(--accent); font-size: 11px; letter-spacing: .28em; margin: 0 0 18px; }
h1 { font-size: clamp(58px, 7.5vw, 124px); line-height: .82; letter-spacing: -.065em; margin: 0; }
.subhead { margin: 24px 0 0; font-size: 15px; letter-spacing: .08em; }
.intro { max-width: 345px; color: var(--muted); font-size: 13px; line-height: 1.65; margin: 18px 0 30px; }

.variant-switch { display: inline-flex; border: 1px solid var(--line); padding: 4px; border-radius: 999px; background: rgba(255,255,255,.025); }
.variant-switch button { color: #8b8c91; background: transparent; border: 0; padding: 10px 16px; border-radius: 999px; letter-spacing: .16em; font-size: 10px; cursor: pointer; display: flex; align-items: center; gap: 9px; }
.variant-switch button.active { color: white; background: rgba(255,255,255,.09); }
.swatch { width: 8px; height: 8px; border-radius: 50%; display: block; }
.swatch.concept { background: #ff4a20; }
.swatch.licorne { background: #563080; }

.viewer-wrap { height: min(72vh, 760px); min-height: 510px; position: relative; display: grid; place-items: center; }
model-viewer { width: 100%; height: 100%; background: transparent; --poster-color: transparent; --progress-bar-color: var(--accent); --progress-bar-height: 2px; }
.loading { position: absolute; color: #7d7e82; font-size: 10px; letter-spacing: .25em; }
.loading.hidden { display: none; }
.drag-cue { position: absolute; bottom: 4%; color: #898a8e; font-size: 9px; letter-spacing: .22em; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.drag-cue span { color: var(--accent); font-size: 17px; }

.controls { justify-self: end; align-self: end; padding-bottom: 8vh; }
.controls button { cursor: pointer; color: white; background: transparent; border: 1px solid var(--line); border-radius: 999px; height: 43px; padding: 0 18px; display: flex; align-items: center; gap: 10px; font-size: 9px; letter-spacing: .18em; }
.controls p { color: #6f7075; font-size: 10px; line-height: 1.7; margin-top: 14px; }
.pause-icon { display: block; width: 8px; height: 10px; border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.play-icon { display: block; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--accent); }

.specs { min-height: 108px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 4.5vw; }
.specs > div { display: flex; gap: 16px; align-items: center; border-right: 1px solid var(--line); padding: 20px 24px; }
.specs > div:last-child { border-right: 0; }
.specs span { color: var(--accent); font: 10px monospace; }
.specs p { color: #74757a; font-size: 10px; letter-spacing: .08em; margin: 0; }
.specs strong { display: block; color: #dddde0; font-size: 12px; margin-top: 7px; font-weight: 500; }

@media (max-width: 940px) {
  .product-stage { grid-template-columns: 1fr; padding-top: 48px; }
  .copy-block { text-align: center; }
  .intro { margin-left: auto; margin-right: auto; }
  .viewer-wrap { height: 62vh; min-height: 460px; margin-top: -38px; }
  .controls { justify-self: center; align-self: center; padding: 0 0 22px; text-align: center; }
  .controls button { margin: auto; }
  .specs { grid-template-columns: repeat(2, 1fr); }
  .specs > div:nth-child(2) { border-right: 0; }
  .specs > div { border-bottom: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .topbar { padding: 0 22px; }
  .status { display: none; }
  .product-stage { padding-left: 22px; padding-right: 22px; }
  h1 { font-size: 64px; }
  .viewer-wrap { min-height: 410px; }
  .specs { margin: 0 22px; grid-template-columns: 1fr; }
  .specs > div { border-right: 0; }
}