/* DisplayMode — landing page prototype
   Dark, quiet, Apple-like. System font stack renders SF Pro on macOS. */

:root {
  --bg: #000;
  --bg-2: #0b0b0d;
  --bg-3: #141416;
  --fg: #f5f5f7;
  --fg-2: #a1a1a6;
  --fg-3: #6e6e73;
  --line: rgba(255,255,255,.10);
  --accent: #2997ff;
  --green: #34c759;
  --amber: #ff9f0a;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.3,.64,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Inter, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.47;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, p { margin: 0; }
img, svg { display: block; }

/* ---------- typography ---------- */
.display {
  font-size: clamp(44px, 7.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.headline {
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.eyebrow {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent);
  margin-bottom: 14px;
}
.lede {
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.38;
  color: var(--fg-2);
  max-width: 640px;
  margin-top: 22px;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.lede--tight { margin-left: auto; margin-right: auto; }
.accent { color: var(--accent); }
.fine { color: var(--fg-3); font-size: 14px; margin-top: 18px; }
.hint { color: var(--fg); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  padding: 13px 24px; border-radius: 999px;
  font-weight: 500; font-size: 17px;
  transition: transform .25s var(--ease-out), background .25s;
}
.btn:hover { background: #4aa8ff; transform: translateY(-1px); }
.btn--small { padding: 6px 14px; font-size: 13px; }
.btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,.25); }
.btn--ghost:hover { background: rgba(255,255,255,.06); }
.link-arrow { color: var(--accent); font-size: 17px; }
.link-arrow::after { content: " ›"; }
.link-arrow:hover { text-decoration: underline; }
.cta-row { display: flex; gap: 26px; align-items: center; margin-top: 34px; flex-wrap: wrap; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0,0,0,.6);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  height: 48px; display: flex; align-items: center; gap: 28px;
}
.nav__brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; }
.dm-icon { width: 26px; height: 8px; color: var(--fg); }
.nav__links { display: flex; gap: 26px; margin-left: auto; font-size: 13px; color: var(--fg-2); }
.nav__links a:hover { color: var(--fg); }
@media (max-width: 720px) { .nav__links { display: none; } .nav__inner .btn { margin-left: auto; } }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.hero {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(64px, 10vh, 120px) var(--pad) 40px;
  text-align: center;
}
.hero__copy { max-width: 820px; margin: 0 auto; }
.hero__copy .lede { margin-left: auto; margin-right: auto; }
.hero__stage { margin-top: clamp(48px, 8vh, 96px); position: relative; }
.stage-caption { text-align: center; color: var(--fg-3); font-size: 15px; margin-top: 26px; min-height: 1.5em; transition: opacity .4s; }

/* ---------- monitor component ---------- */
.monitor { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; user-select: none; }
.monitor__bezel {
  background: linear-gradient(180deg, #2a2a2e, #101012);
  border-radius: 18px; padding: 9px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08);
}
.monitor__panel {
  position: relative; aspect-ratio: 32 / 9; border-radius: 10px; overflow: hidden;
  background: #000;
}
.monitor__stand { display: flex; justify-content: center; }
.monitor__stand span {
  display: block; width: 18%; height: 18px;
  background: linear-gradient(180deg, #17171a, #0a0a0b);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.monitor--hero .monitor__bezel { box-shadow: 0 40px 120px rgba(41,151,255,.14), 0 30px 80px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08); }

/* virtual screen inside the panel */
.vscreen {
  position: absolute; overflow: hidden;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  opacity: var(--o, 1);
  background: var(--wall);
  background-size: cover; background-position: center;
}
.vscreen.anim { transition: left .9s var(--ease-spring), top .9s var(--ease-spring), width .9s var(--ease-spring), height .9s var(--ease-spring), opacity .6s; }
.vscreen__bar {
  position: absolute; left: 0; right: 0; top: 0; height: 5.2%;
  background: rgba(20,20,24,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; padding: 0 1.5%; gap: 1.2%;
  font-size: clamp(5px, .9vw, 9px); color: rgba(255,255,255,.85);
}
.vscreen__bar i { display: block; height: 32%; border-radius: 2px; background: rgba(255,255,255,.75); }
.vscreen__bar .apple { width: 1.2%; height: 46%; border-radius: 50% 50% 45% 45%; }
.vscreen__bar .app { width: 5%; background: rgba(255,255,255,.95); }
.vscreen__bar .t { width: 3.5%; background: rgba(255,255,255,.5); }
.vscreen__bar .spacer { flex: 1; background: none; }
.vscreen__bar .dm { width: 3.2%; height: 40%; border-radius: 2px; border: 1px solid rgba(255,255,255,.8); background: none; position: relative; }
.vscreen__bar .dm::before, .vscreen__bar .dm::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.8); }
.vscreen__bar .dm::before { left: 25%; } .vscreen__bar .dm::after { left: 75%; }
.vscreen__bar .dm.on { border-color: var(--green); box-shadow: 0 0 6px rgba(52,199,89,.6); }
.vscreen__bar .dm.on::before, .vscreen__bar .dm.on::after { background: var(--green); }
.vscreen__bar .clock { width: 4%; background: rgba(255,255,255,.5); }

/* mock windows inside a screen */
.win {
  position: absolute; border-radius: 4.5%/8%; overflow: hidden;
  background: rgba(28,28,30,.92); box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
  left: calc(var(--wx) * 1%); top: calc(var(--wy) * 1%); width: calc(var(--ww) * 1%); height: calc(var(--wh) * 1%);
  transition: left .8s var(--ease-spring), top .8s var(--ease-spring), width .8s var(--ease-spring), height .8s var(--ease-spring), opacity .4s;
}
.win__bar { height: 9%; min-height: 6px; background: rgba(50,50,54,.9); display: flex; align-items: center; gap: 3px; padding-left: 4px; }
.win__bar i { width: 5px; height: 5px; border-radius: 50%; display: block; }
.win__bar i:nth-child(1) { background: #ff5f57; } .win__bar i:nth-child(2) { background: #febc2e; } .win__bar i:nth-child(3) { background: #28c840; }
.win__body { position: absolute; inset: 9% 0 0; padding: 6% 5%; display: grid; gap: 4%; align-content: start; }
.win__body i { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.14); }
.win--code .win__body i:nth-child(odd) { width: 70%; background: rgba(41,151,255,.45); }
.win--code .win__body i:nth-child(even) { width: 45%; background: rgba(255,255,255,.18); }
.win--code .win__body i:nth-child(3n) { width: 85%; background: rgba(255,159,10,.4); }
.win--slides .win__body { padding: 8% 8%; }
.win--slides .win__body i:first-child { height: 8px; width: 60%; background: rgba(255,255,255,.7); }
.win--slides .win__body i { width: 90%; background: rgba(255,255,255,.22); }
.win--slides .win__body i:last-child { height: 34%; width: 100%; border-radius: 4px; background: linear-gradient(135deg, rgba(41,151,255,.5), rgba(175,82,222,.5)); }
.win--chat .win__body i { border-radius: 8px; height: 9%; }
.win--chat .win__body i:nth-child(odd) { width: 55%; background: rgba(255,255,255,.14); }
.win--chat .win__body i:nth-child(even) { width: 48%; margin-left: auto; background: rgba(41,151,255,.6); }
.win--call { background: #101012; }
.win--call .win__body { padding: 4%; grid-template-columns: 1fr 1fr; gap: 4%; align-content: stretch; }
.win--call .win__body i { height: auto; border-radius: 6px; background: linear-gradient(160deg, #3a3a44, #1b1b20); position: relative; }
.win--call .win__body i::after { content: ""; position: absolute; left: 50%; top: 40%; width: 22%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(255,255,255,.22); }
.win--full { --wx: 0; --wy: 5.2; --ww: 100; --wh: 94.8; border-radius: 0; }

/* dividers */
.divider {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  left: calc(var(--dx) * 1%);
  background: rgba(0,0,0,.9);
  transition: left .9s var(--ease-spring), opacity .4s;
  opacity: var(--o, 1);
}
.divider--h { left: 0; right: 0; width: auto; height: 2px; margin: -1px 0 0; top: calc(var(--dy) * 1%); }
.divider.no-anim { transition: none; }

/* drag handles */
.handle {
  position: absolute; top: 0; bottom: 0; width: 22px; margin-left: -11px;
  left: calc(var(--dx) * 1%); cursor: col-resize; z-index: 5;
  touch-action: none;
}
.handle::before {
  content: ""; position: absolute; top: 44%; bottom: 44%; left: 50%; width: 4px; margin-left: -2px;
  border-radius: 4px; background: rgba(255,255,255,.55);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.handle:hover::before, .handle.is-active::before { background: var(--accent); transform: scaleX(1.6); box-shadow: 0 0 14px rgba(41,151,255,.8); }
.handle.anim { transition: left .9s var(--ease-spring); }
.ghost { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; left: calc(var(--dx) * 1%); background: rgba(41,151,255,.9); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 4; }
.ghost.show { opacity: 1; }

/* cursor overlay */
.cursor { position: absolute; z-index: 20; left: 60%; top: 60%; pointer-events: none; transition: left .8s var(--ease-io), top .8s var(--ease-io), transform .12s; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.cursor.click { transform: scale(.85); }
.cursor.hidden { opacity: 0; }

/* the app's menu mock */
.dm-menu {
  position: absolute; z-index: 15; right: 2.6%; top: 6%; min-width: 26%;
  background: rgba(40,40,44,.78); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  border-radius: 8px; padding: 4px; box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.18);
  font-size: clamp(7px, 1.05vw, 12px); color: #fff;
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .18s, transform .2s var(--ease-out);
  pointer-events: none;
}
.dm-menu.show { opacity: 1; transform: none; }
.dm-menu__item { padding: .5em .9em; border-radius: 5px; display: flex; align-items: center; gap: .6em; }
.dm-menu__item--primary { font-weight: 600; }
.dm-menu__item.hl { background: var(--accent); }
.dm-menu__dot { width: .7em; height: .7em; border-radius: 50%; background: var(--fg-3); }
.dm-menu__item.hl .dm-menu__dot { background: #fff; }
.dm-menu__chev { margin-left: auto; opacity: .6; }
.dm-menu__sep { height: 1px; background: rgba(255,255,255,.15); margin: 3px 8px; }

/* keep-this-layout card */
.keep-card {
  position: absolute; z-index: 15; left: 50%; top: 50%; transform: translate(-50%,-40%) scale(.96);
  display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px;
  background: rgba(30,30,34,.82); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.18);
  font-size: clamp(8px, 1.15vw, 13px); opacity: 0; transition: opacity .25s, transform .3s var(--ease-out); pointer-events: none; white-space: nowrap;
}
.keep-card.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.keep-card__ring { position: relative; width: 2.8em; height: 2.8em; }
.keep-card__ring svg { width: 100%; height: 100%; }
.keep-card__ring span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; font-size: .95em; }
.keep-card__text { display: flex; flex-direction: column; gap: 2px; }
.keep-card__text span { color: var(--fg-2); font-size: .9em; }
.keep-card__text em { font-style: normal; color: var(--fg); }
.keep-card__btn { background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: .5em 1.2em; font-weight: 600; font-size: 1em; margin-left: 6px; }
.keep-card__btn.pressed { filter: brightness(.8); }

/* ---------- layouts section (autoplaying morph) ---------- */
.scrub { max-width: var(--maxw); margin: 0 auto; padding: clamp(80px, 14vh, 160px) var(--pad) 0; }
.scrub__sticky { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3vh, 40px); }
.scrub__head { text-align: center; max-width: 860px; }
.scrub__head .headline { transition: opacity .3s; }
.scrub__stage { width: 100%; display: flex; align-items: center; justify-content: center; }
.monitor--wide { max-width: 1000px; }
.monitor--scrub { width: var(--mw, 100%); margin: 0; }
.monitor--scrub .monitor__panel { aspect-ratio: var(--ar, 32 / 9); }
.monitor--scrub .monitor__stand span { width: clamp(60px, 18%, 180px); }
.scrub__steps { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(6px, 2vw, 32px); justify-content: center; flex-wrap: wrap; }
.scrub__steps li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 12px; color: var(--fg-3); transition: color .3s, background .3s; font-size: 13px; cursor: pointer; }
.scrub__steps li:hover { color: var(--fg-2); }
.scrub__steps li b { font-weight: 600; color: inherit; font-size: 15px; }
.scrub__steps li.is-active { color: var(--fg); background: rgba(255,255,255,.06); }
.scrub__steps li.is-active b { color: var(--fg); }

/* ---------- generic section ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(80px, 14vh, 160px) var(--pad) 0; }
.section__head { text-align: center; max-width: 860px; margin: 0 auto clamp(36px, 6vh, 64px); }

/* drag */
.drag-readout { display: flex; max-width: 1000px; margin: 14px auto 0; padding: 0 9px; }
.drag-readout div { text-align: center; color: var(--fg-2); font-variant-numeric: tabular-nums; font-size: 14px; transition: flex .9s var(--ease-spring); }
.drag-readout b { color: var(--fg); font-weight: 600; font-size: 16px; }
.drag-readout span { margin-left: 3px; }
.drag-readout.live div { transition: none; }
.preset-row { display: flex; gap: 10px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.preset-row button { background: rgba(255,255,255,.06); color: var(--fg-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 14px; cursor: pointer; transition: background .2s, color .2s; }
.preset-row button:hover, .preset-row button.is-active { background: rgba(255,255,255,.14); color: var(--fg); }

/* share */
.platforms { list-style: none; padding: 0; margin: 26px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.platforms li { color: var(--fg); font-size: 15px; font-weight: 500; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.section__head .fine { margin-top: 14px; }
.share-stage { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 900px) { .share-stage { grid-template-columns: 1fr 240px; } }
.vscreen.sharing { box-shadow: inset 0 0 0 3px var(--green); }
.vscreen .share-pill { position: absolute; left: 50%; bottom: 8%; transform: translate(-50%, 8px); background: rgba(52,199,89,.95); color: #062b10; font-weight: 600; font-size: clamp(6px, .9vw, 11px); padding: .35em .9em; border-radius: 999px; opacity: 0; transition: opacity .3s, transform .3s var(--ease-out); z-index: 3; }
.vscreen.sharing .share-pill { opacity: 1; transform: translate(-50%, 0); }
.picker {
  position: absolute; z-index: 15; left: 50%; top: 50%; transform: translate(-50%,-44%) scale(.97);
  width: 44%; background: rgba(30,30,34,.85); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
  border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.18);
  padding: 3% 3% 2.5%; font-size: clamp(7px, 1.05vw, 12px); opacity: 0; transition: opacity .25s, transform .3s var(--ease-out); pointer-events: none;
}
.picker.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.picker__title { font-weight: 600; margin-bottom: 1em; font-size: 1.1em; }
.picker__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; }
.picker__grid button { background: rgba(255,255,255,.05); border: 1.5px solid transparent; border-radius: 8px; padding: 6% 6% 8%; color: var(--fg-2); display: flex; flex-direction: column; gap: .7em; align-items: stretch; font-size: 1em; pointer-events: none; transition: border-color .2s, background .2s, color .2s; }
.picker__grid button.hl { border-color: var(--accent); background: rgba(41,151,255,.14); color: var(--fg); }
.thumb { display: block; aspect-ratio: 16/9; border-radius: 4px; }
.thumb--1 { background: linear-gradient(135deg, #1c2f6b, #6a3cb5); }
.thumb--2 { background: linear-gradient(135deg, #ff7a45, #b13c9a); }
.thumb--3 { background: linear-gradient(135deg, #0f7a7a, #2fbf8f); }
.picker__foot { display: flex; justify-content: flex-end; margin-top: 1.2em; }
.picker__foot b { background: var(--accent); color: #fff; padding: .45em 1.3em; border-radius: 6px; font-weight: 600; transition: filter .15s; }
.picker__foot b.pressed { filter: brightness(.75); }
.viewer { border-radius: 14px; overflow: hidden; background: #1c1c1e; box-shadow: 0 0 0 1px var(--line), 0 20px 50px rgba(0,0,0,.5); opacity: .35; transform: scale(.98); transition: opacity .5s, transform .5s var(--ease-out); }
.viewer.live { opacity: 1; transform: none; }
.viewer__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #2a2a2e; font-size: 12px; color: var(--fg-2); }
.viewer__bar span { width: 10px; height: 10px; border-radius: 50%; background: #48484d; }
.viewer__bar em { font-style: normal; margin-left: auto; }
.viewer__screen { aspect-ratio: 16/9; background: #000; position: relative; overflow: hidden; }
.viewer__screen .vscreen { position: absolute; inset: 0; width: 100%; height: 100%; left: 0; top: 0; }
.viewer__screen .placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-3); font-size: 13px; }

/* spaces */
.vscreen__stage { position: absolute; inset: 0; display: flex; width: 200%; transition: transform .8s var(--ease-io); }
.vscreen__stage > div { position: relative; width: 50%; height: 100%; background: var(--wall2, var(--wall)); background-size: cover; }
.vscreen__stage > div:first-child { background: none; }
.vscreen__stage.next { transform: translateX(-50%); }
.fingers { position: absolute; z-index: 12; display: flex; gap: 4px; pointer-events: none; opacity: 0; transition: opacity .25s, left .8s var(--ease-io); }
.fingers i { width: clamp(10px, 1.6vw, 18px); height: clamp(10px, 1.6vw, 18px); border-radius: 50%; background: rgba(255,255,255,.35); box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); }
.fingers.show { opacity: 1; }


/* strain */
.strain-stage { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.load { width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 10px; }
.load__bars { height: 64px; display: flex; align-items: flex-end; gap: 3px; padding: 0 2px; border-bottom: 1px solid var(--line); }
.load__bars i { flex: 1; display: block; height: 10%; border-radius: 2px 2px 0 0; background: var(--c, var(--fg-3)); transition: height .28s var(--ease-out), background .5s; }
.load__row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--fg-3); }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--fg-2); font-weight: 500; transition: color .3s; }
.status-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); transition: background .3s; }
.status-pill.paused i { background: #8e8e93; } .status-pill.starting i { background: var(--amber); }
.hud {
  position: absolute; z-index: 15; left: 50%; bottom: 9%; transform: translate(-50%, 8px);
  max-width: 70%; padding: .7em 1.1em; border-radius: 12px; text-align: center;
  background: rgba(30,30,34,.85); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 16px 50px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.18);
  font-size: clamp(8px, 1.15vw, 13px); font-weight: 500; opacity: 0; transition: opacity .3s, transform .35s var(--ease-out); pointer-events: none;
}
.hud.show { opacity: 1; transform: translate(-50%, 0); }

/* bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.card { grid-column: span 2; background: var(--bg-3); border-radius: var(--radius); padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; }
.card--wide { grid-column: span 3; }
.card h3 { font-size: 21px; letter-spacing: -0.015em; line-height: 1.2; margin-top: 10px; }
.card p { color: var(--fg-2); font-size: 15px; line-height: 1.45; }
.card__art { height: 120px; border-radius: 14px; background: var(--bg-2); display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; }
@media (max-width: 900px) { .card, .card--wide { grid-column: span 3; } }
@media (max-width: 600px) { .card, .card--wide { grid-column: span 6; } }

.art-film { flex-direction: column; gap: 10px; }
.art-film__player { width: 46%; aspect-ratio: 16/9; border-radius: 6px; background: #000; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.art-film__player span { width: 0; height: 0; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
.art-film__split { display: flex; gap: 3px; width: 46%; }
.art-film__split i { flex: 1; height: 6px; border-radius: 2px; background: var(--green); animation: filmsplit 4s infinite; }
.art-film__split i:nth-child(2) { animation-delay: .15s; } .art-film__split i:nth-child(3) { animation-delay: .3s; }
@keyframes filmsplit { 0%, 35% { opacity: 1; transform: scaleX(1); } 45%, 75% { opacity: .2; transform: scaleX(.3); } 85%, 100% { opacity: 1; transform: scaleX(1); } }
.art-keys kbd { font-family: inherit; background: #2a2a2e; color: var(--fg); border-radius: 8px; padding: 10px 14px; min-width: 42px; text-align: center; box-shadow: 0 2px 0 #000, inset 0 0 0 1px rgba(255,255,255,.1); font-size: 17px; }
.art-keys kbd:last-child { background: var(--accent); }
.art-panic__key { background: #2a2a2e; color: var(--fg); border-radius: 12px; padding: 14px 26px; font-size: 18px; box-shadow: 0 3px 0 #000, inset 0 0 0 1px rgba(255,255,255,.1); animation: press 3s infinite; }
@keyframes press { 0%, 80%, 100% { transform: translateY(0); } 85% { transform: translateY(3px); box-shadow: 0 0 0 #000; } }
.art-profiles i { width: 54px; height: 20px; border-radius: 4px; border: 1.5px solid var(--fg-2); position: relative; }
.art-profiles i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 33%; width: 1.5px; background: var(--fg-2); }
.art-profiles i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 66%; width: 1.5px; background: var(--fg-2); }
.art-profiles i:nth-child(2) { border-color: var(--green); } .art-profiles i:nth-child(2)::before, .art-profiles i:nth-child(2)::after { background: var(--green); }
.art-profiles i:nth-child(3)::after { display: none; } .art-profiles i:nth-child(3)::before { left: 50%; }
.art-status .dm-icon { width: 72px; height: 22px; animation: statuscolor 6s infinite; }
@keyframes statuscolor { 0%, 30% { color: #8e8e93; } 40%, 45% { color: var(--amber); } 55%, 100% { color: var(--green); } }
.art-lang { flex-wrap: wrap; gap: 8px 14px; padding: 0 20px; font-size: 14px; color: var(--fg-2); }
.art-zones i { flex: 1; height: 60%; border-radius: 6px; background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.25); margin: 0 4px; }
.art-zones i:nth-child(2) { background: rgba(41,151,255,.18); border-color: var(--accent); }

/* privacy */
.section--privacy { text-align: center; }
.facts { list-style: none; padding: 0; margin: 0 auto; max-width: 760px; display: grid; gap: 10px; text-align: left; }
.facts li { background: var(--bg-3); border-radius: 16px; padding: 20px 24px; display: grid; gap: 4px; }
.facts b { font-size: 18px; letter-spacing: -0.01em; }
.facts span { color: var(--fg-2); font-size: 15px; }

/* pricing */
.plans { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 820px; margin: 0 auto; }
@media (min-width: 720px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { background: var(--bg-3); border-radius: var(--radius); padding: 34px 32px; display: flex; flex-direction: column; gap: 10px; }
.plan h3 { font-size: 20px; }
.plan__price b { font-size: 46px; letter-spacing: -0.03em; font-weight: 700; }
.plan__price span { color: var(--fg-2); margin-left: 8px; }
.plan__alt { color: var(--fg-3); font-size: 14px; }
.plan ul { list-style: none; padding: 0; margin: 12px 0 22px; display: grid; gap: 8px; color: var(--fg-2); font-size: 15px; }
.plan li::before { content: "✓  "; color: var(--green); }
.plan .btn { margin-top: auto; }

/* footer */
.footer { margin-top: clamp(80px, 14vh, 160px); border-top: 1px solid var(--line); padding: 36px 0 48px; color: var(--fg-3); font-size: 13px; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; }
.footer__brand { display: flex; align-items: center; gap: 8px; color: var(--fg-2); font-weight: 600; }
.footer nav { display: flex; gap: 22px; }
.footer nav a:hover { color: var(--fg); }
.footer p { flex-basis: 100%; }
.footer__legal { line-height: 1.6; }
.pricing__refunds { text-align: center; margin-top: 22px; font-size: 15px; }
.lang-switch { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.lang-switch select { background: var(--bg-3); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; }
[dir="rtl"] .lang-switch { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav__links { margin-left: 0; margin-right: auto; }
[dir="rtl"] .dm-menu { right: auto; left: 2.6%; transform-origin: top left; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .vscreen.anim, .divider, .win, .cursor, .handle.anim, .vscreen__stage { transition: none; }
  .art-film__split i, .art-panic__key, .art-status .dm-icon { animation: none; }
}

/* legal pages */
.legal { max-width: 720px; margin: 0 auto; padding: clamp(48px, 8vh, 96px) var(--pad) 80px; }
.legal h1 { font-size: clamp(32px, 4.5vw, 48px); letter-spacing: -0.025em; line-height: 1.08; margin-bottom: 10px; }
.legal .meta { color: var(--fg-3); font-size: 14px; margin-bottom: 40px; }
.legal h2 { font-size: 22px; letter-spacing: -0.015em; margin: 40px 0 10px; }
.legal p, .legal li { color: var(--fg-2); font-size: 17px; line-height: 1.55; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 22px; margin: 10px 0; display: grid; gap: 6px; }
.legal strong { color: var(--fg); font-weight: 600; }
.legal .note { border-left: 2px solid var(--amber); padding: 10px 16px; background: rgba(255,159,10,.06); border-radius: 0 10px 10px 0; font-size: 15px; }
.legal a { color: var(--accent); }