@font-face {
  font-family: Vazirmatn;
  src: url('./assets/fonts/Vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Anton;
  src: url('./assets/fonts/Anton-gk.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  font-family: Vazirmatn, sans-serif;
  color: #f2f1ee;
  background: #070b14;
  --ink: #171c20;
  --paper: #f2f1ee;
  --muted: #a3b4c0;
  --line: rgba(222, 234, 245, .24);
  --accent: #b7f4ee;
  --focus: #6de2de;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --hairline-plate: transparent;
  --hairline-hi: currentColor;
  --hairline-edge: currentColor;
  --hairline-mid: #8a959d;
  --hairline-lo: #4f5b63;
  --hairline-stroke: .85;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; scrollbar-color: #4a6068 #070b14; scrollbar-width: thin; }
body { margin: 0; overflow-x: clip; font-synthesis: none; text-rendering: optimizeLegibility; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; text-underline-offset: .22em; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
button:disabled { opacity: .42; cursor: not-allowed; }
::selection { background: #ef493d; color: #fff; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #070b14; }
::-webkit-scrollbar-thumb { background: #4a6068; border: 2px solid #070b14; border-radius: 8px; }
.shell { width: min(1240px, 90%); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip-link { position: fixed; top: -80px; right: 20px; z-index: 200; background: var(--paper); color: var(--ink); padding: 12px 18px; }
.skip-link:focus { top: 10px; }
.lucide { width: 18px; height: 18px; display: block; flex-shrink: 0; stroke-width: 1.35; }

/* One fine-line control language, on light paper and dark stages. */
.hair-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid rgba(23, 28, 32, .32);
  background: transparent;
  color: var(--ink);
  min-height: 46px;
  min-width: 44px;
  padding: 10px 20px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  transition: background .22s var(--ease-out), border-color .22s var(--ease-out), color .22s var(--ease-out);
}
.hair-button::before, .hair-button::after {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  width: 6px;
  height: 6px;
  border-left: 1px solid currentColor;
  border-top: 1px solid currentColor;
  opacity: .85;
  pointer-events: none;
}
.hair-button::after { inset: auto -1px -1px auto; transform: rotate(180deg); }
.hair-button:not(:disabled):hover { background: rgba(152, 169, 169, .12); border-color: currentColor; }
.hair-button:not(:disabled):active { background: rgba(152, 169, 169, .23); }
.hair-button.light { color: #ecf4f5; border-color: var(--line); }
.hair-button.icon-only { width: 46px; height: 46px; min-height: 46px; padding: 0; }
.hair-symbol { display: block; width: 38px; height: 28px; overflow: hidden; --hairline-plate: transparent; }
.hair-symbol > svg { height: 34px !important; width: 42px !important; margin-top: -4px; }
.motion-toggle {
  position: fixed;
  z-index: 80;
  left: 24px;
  bottom: 22px;
  background: #101b25f2;
  color: #eef5f7;
  border-color: #607780;
  padding: 10px 14px;
  font-size: 11px;
}
.motion-toggle .lucide { width: 15px; height: 15px; }
.motion-toggle[aria-pressed=false] { color: #b7f4ee; border-color: #85b1b0; }

/* The paper tear remains the lead moment. */
.tear-section { height: 270svh; position: relative; background: var(--paper); }
.tear-stage { height: 100svh; min-height: 600px; position: sticky; top: 0; overflow: hidden; background: #07111a; color: var(--paper); }
.hero-topbar {
  position: absolute;
  inset: 0 0 auto;
  padding-inline: 4%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  height: 94px;
  z-index: 6;
  color: var(--ink);
  background: var(--paper);
  border-bottom: 1px solid #171c2012;
}
.brand { display: inline-flex; align-items: center; min-height: 44px; font: 400 29px/1 Anton, sans-serif; letter-spacing: .01em; }
.brand span { color: inherit; margin-left: 4px; }
.draft-mark { font-size: 12px; color: inherit; opacity: .8; }
.hero-topbar .hair-button { font-size: 12px; color: inherit; border-color: #171c204d; }
.tear-art { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.tear-art svg { display: block; width: 100%; height: 100%; }
.reveal-underlay { position: absolute; inset: 0; overflow: hidden; background: #07111a; }
.device-ground { position: absolute; height: 10px; border-radius: 50%; background: var(--led, #58dcca); filter: blur(11px); opacity: .58; pointer-events: none; z-index: 1; }
.google-ground { left: 41%; right: 41%; bottom: 32%; opacity: calc(var(--tear-reveal, 0) * .6); }
.huawei-ground { left: 31%; right: 31%; bottom: 7%; --led: #65cde9; }
.google-stage { position: absolute; inset: 14% 18% 27%; z-index: 2; pointer-events: auto; }
.google-stage, .huawei-stage, .device-tile { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.google-stage[data-dragging=true], .huawei-stage[data-dragging=true], .device-tile[data-dragging=true], #dialog-stage[data-dragging=true] { cursor: grabbing; }
.model-fallback { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; pointer-events: none; }
.model-fallback.is-hidden, [data-model-ready=true] > .model-fallback { visibility: hidden; }
.google-stage canvas, .huawei-stage canvas { position: absolute; inset: 0; display: block; }
.reveal-kicker { position: absolute; top: 17%; left: 50%; transform: translateX(-50%); font: 500 11px/1.5 Vazirmatn, sans-serif; letter-spacing: .19em; color: #c0dcdf; white-space: nowrap; pointer-events: none; }
.reveal-copy { position: absolute; bottom: 7%; left: 5%; right: 5%; z-index: 3; text-align: center; opacity: var(--tear-reveal, 0); transform: translateY(calc(30px * (1 - var(--tear-reveal, 0)))); }
.reveal-copy p { font-size: 14px; line-height: 2; margin: 0 0 20px; color: #b5d3d5; }
.reveal-copy strong { display: inline-block; margin-top: 3px; font-size: 24px; font-weight: 600; color: #fff; }
.scroll-hint { position: absolute; z-index: 5; bottom: 6%; left: 5%; right: 5%; text-align: center; color: #545e60; font-size: 12px; line-height: 1.8; opacity: calc(1 - var(--tear-open, 0) * 3); pointer-events: none; }
.scroll-hint span { display: block; margin-top: 10px; font-size: 26px; font-weight: 200; }
.model-hint {
  position: absolute;
  inset: auto 8px 4px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: #bfdddd;
  font-size: 11px;
  line-height: 1.8;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-out);
}
.model-hint .lucide { width: 14px; height: 14px; }
[data-model-ready=true] > .model-hint { opacity: .8; }
[data-dragging=true] > .model-hint { opacity: 0; }

/* Devices float above a compact LED reflection; no surrounding frame or halo. */
.lamp-section { position: relative; min-height: 105svh; background: #050c1b; overflow: hidden; padding: 110px 0 100px; }
.lamp-rig { height: 240px; position: relative; width: min(900px, 100%); margin-inline: auto; }
.lamp-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 6%; align-items: center; position: relative; z-index: 3; margin-top: -45px; }
.lamp-copy { padding: 12px 0 0 24px; }
.eyebrow { font-size: 12px; line-height: 1.8; color: #b2cbd0; display: block; margin-bottom: 18px; }
.lamp-copy h2 { font: 700 clamp(38px, 4.6vw, 70px)/1.1 Vazirmatn, sans-serif; letter-spacing: -.035em; text-align: right; margin: 0 0 28px; color: #f3f6f6; }
.lamp-copy h2 span { display: inline-block; margin-top: 6px; font-weight: 350; font-size: .63em; letter-spacing: .01em; color: #8acbd1; }
.lamp-copy > p { font-size: 15px; color: #b2c1ce; line-height: 2.1; max-width: 440px; margin: 0; }
.lamp-details { display: flex; flex-wrap: wrap; margin: 30px 0 32px; gap: 13px; font-size: 12px; line-height: 1.6; color: #a4bdc7; }
.lamp-details span + span { border-right: 1px solid #5c879962; padding-right: 13px; }
.lamp-device { height: 530px; position: relative; direction: ltr; }
.huawei-stage { position: absolute; inset: -8% -8% 7%; z-index: 2; }
.huawei-stage .model-hint { bottom: -25px; }

.section-intro { text-align: center; position: relative; z-index: 3; }
.section-intro h2 { font-size: clamp(34px, 4vw, 58px); font-weight: 700; line-height: 1.5; letter-spacing: -.035em; text-wrap: balance; margin: 0 0 12px; }
.section-intro > p { font-size: 15px; line-height: 1.9; color: var(--muted); margin: 0; }
.games-section { padding: 128px 0 108px; background: #070b14; overflow: hidden; position: relative; }
.game-marquees { margin-top: 60px; direction: ltr; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.game-track { display: flex; width: max-content; animation: game-flow 42s linear infinite; }
.game-track.reverse { animation-direction: reverse; margin-top: 6px; animation-duration: 49s; }
.game-group { display: flex; flex-shrink: 0; }
.game-logo { height: 140px; width: 300px; display: grid; place-items: center; position: relative; border-top: 1px solid #9babb321; border-bottom: 1px solid #9babb321; border-right: 1px solid #9babb321; background: radial-gradient(ellipse at 50% 60%, var(--wash), transparent 67%); }
.game-wordmark { display: block; width: 190px; height: 65px; background: var(--brand); mask-image: var(--logo); mask-size: contain; mask-position: center; mask-repeat: no-repeat; }
.game-logo.apex-legends .game-wordmark { width: 125px; height: 77px; }
.game-marquees:hover .game-track { animation-play-state: paused; }
@keyframes game-flow { to { transform: translateX(-50%); } }

/* Source screenshots are cropped only by the window; full originals open on click. */
.reviews-section { padding: 80px 0 84px; background: #080c15; overflow: hidden; }
.reviews-viewport { height: 670px; position: relative; margin-top: 24px; overflow: hidden; mask-image: linear-gradient(transparent, #000 15%, #000 83%, transparent); }
.review-columns { position: absolute; top: -120px; left: 50%; width: 1220px; height: 1000px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; gap: 18px; transform: translateX(-50%) perspective(1400px) rotateX(15deg) rotateY(-10deg) rotateZ(10deg); transform-origin: 50% 0; direction: ltr; }
.review-track { animation: review-flow var(--duration, 110s) linear infinite; will-change: transform; }
.review-track.reverse { animation-direction: reverse; }
.review-track:hover, .review-track:focus-within { animation-play-state: paused; }
.review-group { display: grid; gap: 18px; padding-bottom: 18px; }
.review-card { display: block; width: 100%; height: 295px; padding: 15px; border: 1px solid #42545f; background: #101a24; color: #edf4f7; text-align: right; direction: rtl; overflow: hidden; position: relative; border-radius: 12px; transition: border-color .2s, background .2s; }
.review-card::after { content: ''; position: absolute; width: 7px; height: 7px; top: 8px; left: 8px; border-top: 1px solid #93b5bb; border-left: 1px solid #93b5bb; pointer-events: none; }
.review-card:hover { border-color: #9bc9ce; background: #15232d; }
.review-card:active { border-color: #e3fcfc; }
.review-card:focus-visible { outline-offset: -4px; }
.review-person { display: flex; gap: 10px; align-items: center; font-size: 12px; margin-bottom: 12px; }
.review-person small { display: block; font-size: 11px; color: #a8bfc7; margin-top: 3px; }
.review-avatar { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #263f46; position: relative; display: grid; place-items: center; font: 500 11px/1 Vazirmatn, sans-serif; color: #cfedeb; }
.review-avatar img { position: absolute; max-width: none; height: auto; }
.review-window { height: 215px; width: 100%; overflow: hidden; border-radius: 4px; background: #17222e; position: relative; }
.review-window > img { display: block; width: 100%; height: auto; max-width: none; transform: translateY(var(--crop-y)); transform-origin: top left; }
.reviews-bottom { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 30px; font-size: 12px; line-height: 1.8; color: #a9bfc7; }
.review-hint { font-size: 12px; }
.reviews-bottom .hair-button { font-size: 12px; }
@keyframes review-flow { to { transform: translateY(-50%); } }

/* No transforms on these ancestors: the gallery uses one fixed WebGL canvas. */
.products-section { position: relative; isolation: isolate; background: #080c14; padding: 122px 0 92px; overflow: clip; }
.infinite-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.catalog-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 46px; position: relative; z-index: 3; }
.catalog-heading h2 { font-size: clamp(31px, 3.5vw, 52px); font-weight: 650; line-height: 1.5; margin: 0; letter-spacing: -.035em; text-wrap: balance; }
.catalog-heading p { font-size: 13px; line-height: 2; color: #a6bdc8; max-width: 255px; margin: 0 0 6px; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; position: relative; isolation: isolate; }
.device-tile { min-width: 0; position: relative; border: 0; background: transparent; color: white; padding: 0; aspect-ratio: .87; border-radius: 0; }
.model-slot { position: absolute; inset: 0 0 15%; z-index: 1; }
.model-slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .65; pointer-events: none; }
.model-slot[data-model-ready=true] > img { visibility: hidden; }
.led-pool { position: absolute; bottom: 23%; left: 25%; right: 25%; height: 8px; border-radius: 50%; background: var(--led); filter: blur(10px); opacity: .48; z-index: 0; animation: led-breathe 4s ease-in-out infinite alternate; animation-delay: var(--phase); transition: opacity .3s var(--ease-out); pointer-events: none; }
.device-tile:hover .led-pool, .device-tile:focus-visible .led-pool { opacity: .75; }
.device-caption { position: absolute; bottom: 6%; left: 5%; right: 5%; display: flex; align-items: center; justify-content: center; gap: 10px; z-index: 3; color: #b3c6cf; transition: color .25s var(--ease-out); pointer-events: none; }
.device-caption b { font: 500 12px/1.6 Vazirmatn, sans-serif; }
.device-caption .lucide { width: 14px; height: 14px; color: #9cdbd2; opacity: .55; transition: opacity .25s; }
.device-tile:hover .device-caption, .device-tile:focus-visible .device-caption { color: #f0fbfd; }
.device-tile:hover .device-caption .lucide, .device-tile:focus-visible .device-caption .lucide { opacity: 1; }
.catalog-note { font-size: 12px; line-height: 1.9; text-align: center; color: #9cb5c1; margin-top: 56px; position: relative; z-index: 3; }
@keyframes led-breathe { to { opacity: .62; } }
.footer { padding: 44px 0 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #66768140; }
.footer > span { font: 400 26px/1.2 Anton, sans-serif; letter-spacing: .015em; }
.footer p { font-size: 12px; line-height: 1.9; color: #a0b2bf; }
.footer .hair-button { font-size: 12px; }

/* An enlarged product inspection space, with controls kept clear of the model. */
.product-dialog {
  width: min(1280px, 96vw);
  max-width: none;
  max-height: calc(100dvh - 36px);
  margin: auto;
  padding: 0;
  border: 1px solid #809d9d;
  background: var(--paper);
  color: #19292c;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #7b9598 #f2f1ee;
  color-scheme: light;
  --focus: #15696b;
}
.product-dialog::backdrop, .review-dialog::backdrop { background: #01060de8; backdrop-filter: blur(6px); }
.dialog-header { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 18px; font-size: 13px; padding: 15px 24px; border-bottom: 1px solid #b8c5c3; background: var(--paper); }
.dialog-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr); align-items: stretch; gap: 32px; direction: ltr; padding: 24px; }
.dialog-scene { position: relative; background: #d8e1dd; min-width: 0; height: clamp(480px, 65dvh, 650px); overflow: hidden; }
.dialog-scene > img, #dialog-stage { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dialog-scene > img { pointer-events: none; }
.dialog-scene > img.is-hidden { visibility: hidden; }
#dialog-stage { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
#dialog-stage:focus-visible { outline-offset: -5px; }
#dialog-stage canvas { display: block; width: 100%; height: 100%; }
#dialog-loading { position: absolute; bottom: 79px; left: 10%; right: 10%; font-size: 12px; line-height: 1.8; text-align: center; direction: rtl; color: #395d60; pointer-events: none; }
.dialog-stage-hint { position: absolute; top: 17px; left: 18px; right: 18px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: #425f60; font-size: 11px; line-height: 1.8; text-align: center; direction: rtl; pointer-events: none; }
.dialog-stage-hint .lucide { width: 15px; height: 15px; }
.dialog-toolbar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4; display: flex; gap: 8px; direction: ltr; }
.dialog-toolbar .hair-button { background: #eef3edeb; border-color: #7e979780; }
.dialog-toolbar .hair-button:not(:disabled):hover { background: #fff; }
#dialog-reset { position: static; }
.dialog-info { direction: rtl; align-self: center; min-width: 0; padding: 8px 6px; }
.dialog-info .eyebrow { color: #48666a; margin-bottom: 12px; font-size: 12px; }
.dialog-info h2 { font: 650 clamp(26px, 2.5vw, 36px)/1.3 Vazirmatn, sans-serif; letter-spacing: -.025em; text-align: right; overflow-wrap: anywhere; text-wrap: balance; margin: 0 0 22px; }
.dialog-info > p { font-size: 14px; line-height: 2; color: #4e6568; margin: 0; }
.dialog-price { font-size: 13px; line-height: 1.8; margin: 28px 0 3px; font-variant-numeric: tabular-nums; }
.dialog-price b { font-size: 30px; font-weight: 650; letter-spacing: -.025em; }
.dialog-info small { display: block; font-size: 11px; line-height: 1.8; color: #526c70; }
.dialog-navigation { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 10px; margin-top: 32px; padding-top: 22px; border-top: 1px solid #bdc9c6; }
#dialog-counter { text-align: center; font-size: 12px; line-height: 1.8; color: #526c70; font-variant-numeric: tabular-nums; }
.dialog-info > .hair-button { display: flex; margin-top: 18px; width: 100%; }
.review-dialog { width: min(800px, 94vw); max-height: 94dvh; padding: 0 18px 18px; background: #0c1720; color: #edf3f4; border: 1px solid #6b8791; overscroll-behavior: contain; }
.review-dialog-header { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 13px; background: #0c1720; padding: 14px 0; margin-bottom: 4px; z-index: 2; }
#review-media img { display: block; max-width: 100%; height: auto; margin: auto; }
#review-media video { max-width: 100%; max-height: 78dvh; display: block; margin: auto; }
#review-navigation { margin: 0 0 18px; padding: 12px 0 16px; border-top: 0; border-bottom: 1px solid #58717c80; }
#review-counter { text-align: center; color: #c2d6df; font-size: 12px; font-variant-numeric: tabular-nums; }
body[data-motion=paused] .game-track, body[data-motion=paused] .review-track, body[data-motion=paused] .led-pool { animation-play-state: paused; }
#games[data-in-view=false] .game-track, #reviews[data-in-view=false] .review-track { animation-play-state: paused; }

@media (min-width: 1500px) {
  .shell { width: min(1400px, 88%); }
  .lamp-device { height: 590px; }
  .product-grid { gap: 36px 24px; }
}
@media (max-width: 1000px) {
  .dialog-layout { grid-template-columns: minmax(0, 1.5fr) minmax(245px, 1fr); gap: 22px; padding: 20px; }
  .dialog-scene { height: 500px; }
  .dialog-info h2 { font-size: 28px; }
  .dialog-info > p { font-size: 13px; }
}
@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lamp-copy h2 { font-size: 48px; }
  .lamp-device { height: 440px; }
  .review-columns { width: 1100px; }
  .google-stage { inset: 15% 7% 28%; }
  .lamp-section { padding-top: 80px; }
  .lamp-layout { margin-top: -65px; gap: 3%; }
  .lamp-copy { padding-left: 0; }
  .lamp-copy > p { font-size: 14px; }
  .lamp-details { font-size: 11px; gap: 10px; }
  .lamp-details span + span { padding-right: 10px; }
}
@media (max-width: 700px) {
  .product-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .dialog-header { padding: 11px 16px; font-size: 12px; }
  .dialog-layout { display: flex; flex-direction: column; gap: 22px; padding: 14px; }
  .dialog-scene { width: 100%; height: clamp(350px, 52svh, 460px); flex-shrink: 0; }
  .dialog-info { padding: 0 8px 12px; width: 100%; }
  .dialog-info h2 { font-size: 29px; margin-bottom: 16px; }
  .dialog-info > p { font-size: 14px; }
  .dialog-price { margin-top: 20px; }
  .dialog-navigation { margin-top: 25px; padding-top: 20px; }
  .dialog-stage-hint { top: 12px; font-size: 11px; }
  .dialog-toolbar { bottom: 12px; }
  .dialog-info > .hair-button { margin-top: 16px; }
}
@media (max-width: 600px) {
  .shell { width: 90%; }
  .hero-topbar { height: 80px; inset-inline: 0; padding-inline: 5%; gap: 12px; }
  .hero-topbar .draft-mark { font-size: 11px; }
  .hero-topbar .hair-button { padding: 9px 11px; gap: 7px; font-size: 11px; }
  .hero-topbar .hair-symbol { width: 29px; height: 24px; }
  .brand { font-size: 26px; }
  .tear-section { height: 255svh; }
  .tear-stage { min-height: 580px; }
  .google-stage { inset: 23% -4% 30%; }
  .google-ground { left: 33%; right: 33%; bottom: 34%; height: 7px; filter: blur(8px); }
  .reveal-kicker { top: 22%; font-size: 11px; letter-spacing: .12em; }
  .reveal-copy { bottom: 8%; }
  .reveal-copy p { font-size: 13px; margin-bottom: 16px; }
  .reveal-copy strong { font-size: 21px; }
  .reveal-copy .hair-button { font-size: 12px; }
  .scroll-hint { font-size: 11px; bottom: 8%; }
  .motion-toggle { left: 12px; bottom: 12px; padding: 10px 12px; gap: 8px; font-size: 11px; }
  .model-hint { font-size: 11px; bottom: 0; }
  .lamp-section { padding: 76px 0 74px; min-height: auto; }
  .lamp-rig { height: 190px; }
  .lamp-layout { display: flex; flex-direction: column-reverse; margin-top: -75px; gap: 24px; }
  .lamp-device { width: 100%; height: 405px; }
  .huawei-stage { inset: -7% -5% 7%; }
  .lamp-copy { padding: 12px 0 0; width: 100%; text-align: center; }
  .lamp-copy h2 { text-align: center; font-size: 46px; margin-bottom: 21px; }
  .lamp-copy h2 span { font-size: .62em; }
  .lamp-copy > p { font-size: 14px; line-height: 2; margin-inline: auto; }
  .lamp-details { justify-content: center; gap: 10px; margin: 24px 0 26px; font-size: 11px; }
  .lamp-details span + span { padding-right: 10px; }
  .lamp-copy .hair-button { font-size: 12px; }
  .section-intro h2 { font-size: 35px; }
  .section-intro > p { font-size: 14px; }
  .games-section { padding: 82px 0 74px; }
  .game-marquees { margin-top: 36px; }
  .game-logo { height: 110px; width: 220px; }
  .game-wordmark { width: 147px; height: 48px; }
  .game-logo.apex-legends .game-wordmark { width: 95px; height: 59px; }
  .reviews-section { padding: 64px 0 58px; }
  .reviews-viewport { height: 560px; margin-top: 28px; }
  .review-columns { width: 890px; gap: 12px; transform: translateX(-50%) perspective(1200px) rotateX(13deg) rotateY(-10deg) rotateZ(9deg); }
  .review-group { gap: 12px; padding-bottom: 12px; }
  .review-card { height: 255px; padding: 11px; }
  .review-person { font-size: 11px; gap: 7px; margin-bottom: 8px; }
  .review-person small { font-size: 11px; }
  .review-window { height: 187px; }
  .review-avatar { width: 29px; height: 29px; }
  .reviews-bottom { gap: 18px; margin-top: 16px; font-size: 11px; }
  .review-hint { width: 100%; text-align: center; font-size: 11px; }
  .products-section { padding: 82px 0 52px; }
  .catalog-heading { display: block; margin-bottom: 24px; }
  .catalog-heading h2 { font-size: 34px; }
  .catalog-heading p { font-size: 13px; max-width: none; margin: 14px 0 0; }
  .catalog-heading p br { display: none; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 5px; width: 94%; }
  .device-tile { aspect-ratio: .75; }
  .model-slot { inset: 0 0 17%; }
  .device-caption { bottom: 6%; gap: 6px; left: 6%; right: 6%; }
  .device-caption b { font-size: 11px; }
  .device-caption .lucide { width: 12px; height: 12px; }
  .led-pool { bottom: 24%; left: 25%; right: 25%; height: 6px; filter: blur(8px); }
  .catalog-note { font-size: 11px; margin-top: 34px; }
  .footer { padding: 34px 0 84px; flex-wrap: wrap; gap: 23px; }
  .footer p { font-size: 11px; order: 3; width: 100%; margin: 0; }
  .footer > span { font-size: 23px; }
  .footer .hair-button { font-size: 11px; padding: 10px 13px; }
  .review-dialog { padding: 0 12px 12px; }
  .review-dialog-header { font-size: 12px; }
}
@media (max-width: 360px) {
  .hero-topbar .draft-mark { max-width: 70px; text-align: center; line-height: 1.6; }
  .hero-topbar .hair-button { padding-inline: 9px; }
  .lamp-copy h2 { font-size: 40px; }
  .lamp-details { font-size: 11px; gap: 8px; }
  .lamp-details span + span { padding-right: 8px; }
  .section-intro h2, .catalog-heading h2 { font-size: 31px; }
  .device-caption b { font-size: 11px; }
  .dialog-scene { height: 350px; }
}
@media (max-height: 650px) and (min-width: 701px) {
  .dialog-scene { height: 430px; min-height: 0; }
  .dialog-layout { gap: 24px; }
  .dialog-info h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .review-track { transform: none !important; }
}
.scroll-hint .lucide{margin-inline:auto;transform:rotate(-45deg)}
.home-store-link { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:44px 0; margin-block:36px 80px; border-top:1px solid #63828d59; border-bottom:1px solid #63828d59; }
.home-store-link h2 { margin:0 0 10px; font-size:30px; font-weight:650; letter-spacing:-.025em; }
.home-store-link p { margin:0; color:#a9c0cb; font-size:14px; line-height:2; }
.home-store-link .hair-button { flex-shrink:0; }
@media(max-width:700px) { .home-store-link { align-items:flex-start; flex-direction:column; gap:23px; padding:32px 0; margin-block:20px 45px; }.home-store-link h2 { font-size:27px; }.home-store-link p { font-size:13px; } }