:root {
  color-scheme: dark;
  --ink: #f7f8ff;
  --muted: rgba(235, 238, 255, .68);
  --line: rgba(235, 238, 255, .18);
  --ease: cubic-bezier(.2, .84, .18, 1);
  --liquid-radius: 120px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}

.intro,
.info-screen,
.interaction-screen,
.tv-screen,
.contact-screen,
.stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  pointer-events: none;
}

.intro,
.info-screen,
.interaction-screen,
.tv-screen,
.contact-screen {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 980ms var(--ease),
    filter 980ms var(--ease),
    transform 980ms var(--ease);
}

body[data-screen="intro"] .intro,
body[data-screen="info"] .info-screen,
body[data-screen="interaction"] .interaction-screen,
body[data-screen="tv"] .tv-screen,
body[data-screen="contact"] .contact-screen {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}

body[data-screen="slideshow"] .stage {
  pointer-events: auto;
}

body:not([data-screen="interaction"]) .interaction-screen,
body:not([data-screen="interaction"]) .interaction-screen * {
  pointer-events: none !important;
}

body:not([data-screen="slideshow"]) .stage,
body:not([data-screen="slideshow"]) .stage * {
  pointer-events: none !important;
}

.intro {
  transform: translate3d(0, -8vh, 0) scale(.96);
}

body:not([data-screen="intro"]) .intro {
  opacity: 0;
  filter: blur(22px);
  transform: translate3d(0, -18vh, 0) scale(.92) rotateX(12deg);
  pointer-events: none;
}

.intro-logo {
  position: relative;
  z-index: 2;
  display: block;
  width: min(58vw, 680px);
  text-decoration: none;
  color: var(--ink);
  transform: translate3d(var(--logo-parallax-x, 0px), var(--logo-parallax-y, 0px), 0);
  opacity: 1;
  filter:
    drop-shadow(var(--logo-shadow-x, 0px) var(--logo-shadow-y, 18px) 22px rgba(0, 0, 0, .72))
    drop-shadow(calc(var(--logo-shadow-x, 0px) * .55) calc(var(--logo-shadow-y, 18px) * .55) 54px rgba(0, 0, 0, .42))
    drop-shadow(calc(var(--logo-shadow-x, 0px) * -.35) calc(var(--logo-shadow-y, 18px) * -.25) 24px rgba(255, 255, 255, .16));
  transition:
    transform 220ms ease-out,
    opacity 1050ms var(--ease),
    filter 1050ms var(--ease);
  will-change: transform, opacity, filter;
}

.intro-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.intro-liquid {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .9;
  filter: saturate(1.16) contrast(1.08);
  transition:
    opacity 1050ms var(--ease),
    filter 1050ms var(--ease),
    transform 1050ms var(--ease);
}

body:not([data-screen="intro"]) .intro-liquid {
  opacity: 0;
  filter: blur(18px);
  transform: translate3d(0, -18vh, 0) scale(.94);
}

body:not([data-screen="intro"]) .intro-logo {
  transform: translate3d(0, -26vh, 0) scale(.74) rotateX(16deg);
  opacity: 0;
  filter: blur(20px);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 38px;
  width: 1px;
  height: 54px;
  overflow: hidden;
  background: rgba(255, 255, 255, .18);
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity 700ms var(--ease), filter 700ms var(--ease);
}

body:not([data-screen="intro"]) .scroll-cue {
  opacity: 0;
  filter: blur(10px);
}

.site-header {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 80;
  width: 100px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 11px;
  overflow: visible;
  border: 1px solid rgba(247, 248, 255, .10);
  border-radius: 999px;
  background: rgba(0, 0, 0, .34);
  color: var(--ink);
  opacity: 0;
  filter: blur(12px);
  pointer-events: none;
  transform: translate3d(-50%, -18px, 0);
  transition:
    opacity 560ms var(--ease),
    filter 560ms var(--ease),
    transform 560ms var(--ease),
    width 680ms cubic-bezier(.16, .86, .18, 1),
    padding 680ms cubic-bezier(.16, .86, .18, 1),
    background 220ms ease;
}

body:not([data-screen="intro"]) .site-header {
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
}

body:not([data-screen="intro"]) .site-header:hover {
  width: min(700px, calc(100vw - 48px));
  padding: 0 12px;
  background: rgba(0, 0, 0, .58);
}

.site-brand,
.site-nav a,
.services-menu button {
  color: var(--ink);
  text-decoration: none;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-width: 78px;
  font-size: 13px;
  font-weight: 850;
}

.site-brand img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: invert(1);
}

.site-brand span {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
  transition:
    opacity 220ms ease,
    filter 220ms ease,
    transform 220ms ease;
}

.site-header:hover .site-brand span {
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(-8px, 0, 0);
}

.site-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  filter: blur(12px);
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(.96);
  transition:
    max-width 680ms cubic-bezier(.16, .86, .18, 1),
    opacity 260ms ease,
    filter 260ms ease,
    transform 260ms ease;
}

.site-header:hover .site-nav {
  max-width: 720px;
  overflow: visible;
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition:
    max-width 680ms cubic-bezier(.16, .86, .18, 1),
    opacity 360ms ease 120ms,
    filter 360ms ease 120ms,
    transform 360ms ease 120ms;
}

.site-nav > * {
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 5px, 0);
  transition:
    opacity 320ms ease,
    filter 320ms ease,
    transform 320ms ease;
}

.site-header:hover .site-nav > * {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

.site-header:hover .site-nav > :nth-child(1) {
  transition-delay: 120ms;
}

.site-header:hover .site-nav > :nth-child(2) {
  transition-delay: 160ms;
}

.site-header:hover .site-nav > :nth-child(3) {
  transition-delay: 200ms;
}

.site-header:hover .site-nav > :nth-child(4) {
  transition-delay: 240ms;
}

.site-header:hover .site-nav > :nth-child(5) {
  transition-delay: 280ms;
}

.site-nav a,
.services-menu button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 9px 12px;
  color: rgba(247, 248, 255, .68);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.site-nav a:hover,
.services-menu:hover button,
.services-menu button:focus-visible {
  color: var(--ink);
  background: rgba(255, 255, 255, .08);
}

.services-menu {
  position: relative;
}

.services-menu::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 100%;
  height: 12px;
}

.services-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  right: auto;
  min-width: 250px;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(247, 248, 255, .10);
  border-radius: 10px;
  background: rgba(0, 0, 0, .72);
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
  transform: translate3d(-50%, -8px, 0);
  transition:
    opacity 220ms ease,
    filter 220ms ease,
    transform 220ms ease;
}

.services-menu:hover .services-dropdown {
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
}

.services-dropdown a {
  border-radius: 7px;
  padding: 10px 11px;
  white-space: nowrap;
}

.scroll-cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, #fff, transparent);
  animation: scrollCue 1600ms var(--ease) infinite;
}

@keyframes scrollCue {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

.info-screen {
  padding: clamp(28px, 7vw, 110px);
  transform: translate3d(0, 9vh, 0) scale(.985);
}

.info-screen::before,
.info-screen::after {
  content: "";
  position: absolute;
  inset: -28%;
  z-index: -2;
  opacity: .58;
  filter: blur(84px) saturate(1.12);
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 119, 70, .32), transparent 30%),
    radial-gradient(circle at 74% 22%, rgba(47, 167, 255, .30), transparent 33%),
    radial-gradient(circle at 52% 78%, rgba(185, 72, 255, .22), transparent 36%),
    radial-gradient(circle at 86% 72%, rgba(255, 183, 71, .18), transparent 28%),
    #000;
  background-size: 120% 120%, 118% 118%, 126% 126%, 116% 116%, auto;
  animation: infoDrift 11s ease-in-out infinite alternate;
  will-change: transform, background-position;
}

.info-screen::after {
  z-index: -1;
  opacity: .28;
  filter: blur(42px);
  background:
    linear-gradient(118deg, transparent 0 16%, rgba(255, 255, 255, .07), transparent 44% 100%),
    radial-gradient(circle at 42% 52%, rgba(255, 255, 255, .09), transparent 34%),
    radial-gradient(circle at 68% 38%, rgba(44, 169, 255, .10), transparent 30%);
  background-size: 170% 170%, 130% 130%, 140% 140%;
  animation-duration: 8s;
  animation-direction: alternate-reverse;
}

.info-orbit {
  position: absolute;
  inset: auto 10vw 12vh auto;
  width: min(42vw, 520px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  opacity: .36;
  filter: blur(.2px);
}

.info-orbit::before,
.info-orbit::after {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
}

.info-orbit::after {
  inset: 34%;
}

.info-vertex {
  position: absolute;
  right: clamp(-36px, 2vw, 40px);
  top: 50%;
  width: min(64vw, 900px);
  height: min(76vh, 760px);
  opacity: .86;
  filter: saturate(.85);
  transform: translate3d(0, -50%, 0);
  pointer-events: auto;
  z-index: 2;
}

.info-content {
  position: relative;
  z-index: 3;
  pointer-events: none;
  width: min(940px, 100%);
  justify-self: start;
  opacity: 0;
  filter: blur(24px);
  transform: translate3d(-54px, 38px, 0);
  transition:
    opacity 1050ms var(--ease),
    filter 1050ms var(--ease),
    transform 1050ms var(--ease);
}

body[data-screen="info"] .info-content {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

.info-content h1 {
  max-width: 760px;
  margin: 0 0 clamp(24px, 4vw, 42px);
  font-size: clamp(38px, 6vw, 86px);
  line-height: .98;
  letter-spacing: 0;
  font-weight: 850;
}

.info-content p {
  max-width: 760px;
  margin: 0 0 18px;
  color: rgba(247, 248, 255, .72);
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1.45;
  font-weight: 500;
}

.interaction-screen {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 14% 78%, rgba(72, 151, 255, .16), transparent 32%),
    radial-gradient(circle at 86% 76%, rgba(178, 116, 255, .14), transparent 34%),
    linear-gradient(180deg, #02050a 0%, #050811 52%, #010204 100%);
  padding: clamp(22px, 4vw, 68px);
  align-content: start;
}

.interaction-screen::before,
.interaction-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background:
    linear-gradient(90deg, rgba(91, 167, 255, .14), transparent 34% 66%, rgba(198, 143, 255, .14)),
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .055), transparent 32%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 86%, transparent 100%);
}

.interaction-screen::after {
  opacity: .16;
  background:
    radial-gradient(ellipse at 18% 76%, rgba(77, 162, 255, .28), transparent 27%),
    radial-gradient(ellipse at 82% 78%, rgba(190, 144, 255, .24), transparent 29%);
  filter: blur(36px);
}

.interaction-heading {
  display: none;
}

body[data-screen="interaction"] .interaction-heading {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

.interaction-heading h1 {
  margin: 0;
  color: rgba(247, 248, 255, .96);
  font-size: clamp(38px, 4.5vw, 68px);
  line-height: .96;
  font-weight: 850;
  letter-spacing: 0;
}

.interaction-heading p {
  max-width: 440px;
  margin: 18px auto 0;
  color: rgba(247, 248, 255, .58);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.45;
  font-weight: 650;
}

.interaction-options {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  overflow: hidden;
}

.interaction-card {
  position: relative;
  flex: 1 1 20%;
  min-width: 0;
  height: 100%;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: clamp(28px, 4.4vw, 78px);
  outline: 0;
  isolation: isolate;
  overflow: hidden;
  opacity: 0;
  filter: blur(24px);
  transform: translate3d(0, 38px, 0) scale(.98);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0));
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .035);
  transition:
    flex-basis 920ms cubic-bezier(.19, 1, .22, 1),
    flex-grow 920ms cubic-bezier(.19, 1, .22, 1),
    opacity 820ms ease,
    filter 920ms ease,
    transform 920ms cubic-bezier(.19, 1, .22, 1),
    background 920ms ease;
}

body[data-screen="interaction"] .interaction-card {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.interaction-card::before {
  content: "";
  position: absolute;
  inset: 32vh -9vw -26vh;
  z-index: 0;
  border: 1px solid var(--card-line, rgba(118, 177, 255, .24));
  border-radius: 50%;
  opacity: .08;
  transform: scale(1);
  transition:
    opacity 520ms ease,
    transform 760ms var(--ease);
}

.interaction-card--infographic::before {
  display: none;
}

.interaction-card--game {
  --card-line: rgba(91, 167, 255, .26);
  --card-glow: rgba(91, 167, 255, .22);
}

.interaction-card--particles {
  --card-line: rgba(196, 146, 255, .26);
  --card-glow: rgba(196, 146, 255, .20);
}

.interaction-card--mirror {
  --card-line: rgba(255, 255, 255, .20);
  --card-glow: rgba(255, 255, 255, .14);
}

.interaction-card--product {
  --card-line: rgba(255, 141, 82, .24);
  --card-glow: rgba(255, 141, 82, .18);
}

.interaction-card--infographic {
  --card-line: rgba(88, 193, 255, .24);
  --card-glow: rgba(88, 193, 255, .16);
}

.interaction-card--game::before {
  --card-line: rgba(91, 167, 255, .30);
}

.interaction-card--particles::before {
  --card-line: rgba(196, 146, 255, .32);
}

.interaction-visual {
  position: absolute;
  inset: 42% 0 0;
  z-index: 1;
  opacity: .22;
  display: grid;
  place-items: end center;
  pointer-events: none;
  transition:
    opacity 760ms ease,
    filter 760ms ease,
    transform 980ms cubic-bezier(.16, 1, .24, 1),
    inset 980ms cubic-bezier(.16, 1, .24, 1);
}

.interaction-visual::before {
  content: "";
  position: absolute;
  inset: 10% 6% 0;
  background:
    radial-gradient(circle at 50% 78%, var(--card-glow), transparent 28%),
    linear-gradient(180deg, transparent, rgba(255, 255, 255, .035));
  mask-image: radial-gradient(ellipse at 50% 82%, #000 0 26%, transparent 70%);
}

.interaction-visual img {
  position: relative;
  z-index: 1;
  width: min(42vw, 520px);
  max-width: 92%;
  max-height: 70%;
  object-fit: contain;
  filter: saturate(.82) contrast(1.05) drop-shadow(0 24px 34px rgba(0, 0, 0, .46));
  opacity: .82;
}

.interaction-card--game .interaction-visual,
.interaction-card--particles .interaction-visual {
  background:
    radial-gradient(circle at 50% 76%, var(--card-glow), transparent 22%),
    linear-gradient(180deg, transparent, rgba(255, 255, 255, .025));
  mask-image: radial-gradient(ellipse at 50% 84%, #000 0 22%, transparent 68%);
}

.interaction-card--infographic .interaction-visual {
  inset: 36% 8% 8%;
  align-items: end;
  justify-items: center;
}

.interaction-card--infographic .interaction-visual i {
  display: block;
  width: min(20vw, 230px);
  height: 12px;
  border-radius: 999px;
  background: rgba(247, 248, 255, .22);
  box-shadow: 0 0 32px rgba(88, 193, 255, .12);
}

.interaction-card--infographic .interaction-visual i:nth-child(2) {
  width: min(16vw, 184px);
  opacity: .72;
}

.interaction-card--infographic .interaction-visual i:nth-child(3) {
  width: min(11vw, 130px);
  opacity: .48;
}

.interaction-card--mirror .interaction-visual,
.interaction-card--product .interaction-visual,
.interaction-card--infographic .interaction-visual {
  display: none;
}

.interaction-demo {
  position: absolute;
  top: 44vh;
  bottom: 3vh;
  z-index: 1;
  left: clamp(440px, 36vw, 610px);
  right: clamp(18px, 4vw, 80px);
  width: auto;
  height: auto;
  min-width: min(520px, 34vw);
  opacity: .14;
  filter: blur(0);
  pointer-events: none;
  transition:
    opacity 760ms ease,
    filter 760ms ease,
    transform 980ms cubic-bezier(.16, 1, .24, 1),
    clip-path 980ms cubic-bezier(.16, 1, .24, 1);
}

.interaction-card--mirror .interaction-demo {
  top: 42vh;
  bottom: 2vh;
}

.interaction-card--product .interaction-demo,
.interaction-card--infographic .interaction-demo {
  top: 44vh;
  bottom: 2vh;
}

.interaction-card--infographic .interaction-demo {
  top: 34vh;
  bottom: 4vh;
  left: clamp(340px, 30vw, 500px);
  right: clamp(12px, 3vw, 56px);
  min-width: min(700px, 44vw);
}

.interaction-card.is-open .interaction-demo {
  opacity: .82;
  filter: blur(0);
  transform: scale(1.02);
}

.interaction-card--game .interaction-demo,
.interaction-card--particles .interaction-demo {
  transform-origin: center center;
  clip-path: inset(0 72% 0 0);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 88%, transparent 100%);
}

.interaction-card--game.is-open .interaction-demo,
.interaction-card--particles.is-open .interaction-demo {
  clip-path: inset(0 0 0 0);
}

.interaction-copy {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(260px, 14vw);
  color: rgba(247, 248, 255, .94);
  text-align: center;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition:
    left 900ms cubic-bezier(.19, 1, .22, 1),
    top 900ms cubic-bezier(.19, 1, .22, 1),
    width 760ms cubic-bezier(.19, 1, .22, 1),
    opacity 900ms ease,
    filter 900ms ease,
    transform 900ms cubic-bezier(.19, 1, .22, 1);
}

.interaction-copy h2 {
  margin: 0;
  font-size: clamp(22px, 2.25vw, 38px);
  line-height: .96;
  letter-spacing: 0;
  font-weight: 850;
  transition:
    opacity 780ms ease,
    filter 780ms ease,
    transform 780ms cubic-bezier(.19, 1, .22, 1);
}

.interaction-copy span {
  display: block;
  width: 34px;
  height: 2px;
  margin: 26px auto 22px;
  background: currentColor;
  opacity: .72;
  transition:
    opacity 720ms ease,
    filter 720ms ease,
    transform 720ms cubic-bezier(.19, 1, .22, 1);
}

.interaction-short,
.interaction-more {
  margin: 0;
  color: rgba(247, 248, 255, .66);
  font-size: clamp(13px, .98vw, 16px);
  line-height: 1.5;
  font-weight: 650;
  transition:
    opacity 780ms ease,
    filter 780ms ease,
    transform 780ms cubic-bezier(.19, 1, .22, 1);
}

.interaction-more {
  max-height: 0;
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 16px, 0);
  transition:
    max-height 720ms cubic-bezier(.19, 1, .22, 1),
    opacity 860ms ease,
    filter 860ms ease,
    transform 780ms cubic-bezier(.19, 1, .22, 1);
}

.interaction-options.has-open .interaction-card {
  flex-basis: 7%;
  flex-grow: 1;
  opacity: .36;
  filter: blur(.6px);
  transform: translate3d(0, 0, 0) scale(.975);
}

.interaction-options.has-open .interaction-card.is-open {
  flex-basis: 72%;
  flex-grow: 0;
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.interaction-options.has-open .interaction-card:not(.is-open) .interaction-copy {
  left: 50%;
  top: 50%;
  width: min(140px, 7vw);
  opacity: .32;
  filter: blur(2.4px);
  transform: translate3d(-50%, -50%, 0) scale(.96);
}

.interaction-options.has-open .interaction-card:not(.is-open) .interaction-short,
.interaction-options.has-open .interaction-card:not(.is-open) .interaction-more,
.interaction-options.has-open .interaction-card:not(.is-open) .interaction-copy span {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  filter: blur(8px);
}

.interaction-options.has-open .interaction-card:not(.is-open) .interaction-copy h2 {
  opacity: .66;
  filter: blur(.8px);
  transform: translate3d(0, 8px, 0) scale(.98);
}

.interaction-card.is-open::before {
  opacity: .22;
  transform: scale(1.025);
}

.interaction-card.is-open .interaction-visual {
  opacity: .50;
  filter: saturate(1.08);
  transform: scale(1.025);
  top: 37vh;
  right: clamp(42px, 7vw, 120px);
  bottom: 7vh;
  left: clamp(440px, 36vw, 610px);
}

.interaction-card--mirror.is-open .interaction-visual,
.interaction-card--product.is-open .interaction-visual,
.interaction-card--infographic.is-open .interaction-visual {
  opacity: 0;
  transform: scale(.96);
}

.interaction-card.is-open .interaction-copy {
  left: clamp(58px, 6vw, 112px);
  top: 50%;
  width: min(370px, 25vw);
  opacity: 1;
  filter: blur(0);
  text-align: left;
  transform: translate3d(0, -22%, 0) scale(1);
}

.interaction-card.is-open .interaction-copy span {
  margin-left: 0;
  margin-right: 0;
}

.interaction-card.is-open .interaction-copy h2,
.interaction-card.is-open .interaction-short,
.interaction-card.is-open .interaction-more,
.interaction-card.is-open .interaction-copy span {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.interaction-card.is-open .interaction-more {
  max-height: 160px;
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 12px, 0);
}

.interaction-options.has-open .interaction-card.is-closing {
  flex-basis: 18%;
  flex-grow: 1;
  opacity: .24;
  filter: blur(5px);
  transform: translate3d(0, 10px, 0) scale(.955);
}

.interaction-card.is-closing .interaction-demo,
.interaction-card.is-closing .interaction-visual {
  opacity: 0;
  filter: blur(18px);
  transform: scale(.94);
}

.interaction-card.is-closing .interaction-copy {
  left: 50%;
  top: 50%;
  width: min(140px, 7vw);
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(-50%, -50%, 0) scale(.92);
}

.interaction-card.is-closing .interaction-copy h2,
.interaction-card.is-closing .interaction-short,
.interaction-card.is-closing .interaction-more,
.interaction-card.is-closing .interaction-copy span {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 18px, 0) scale(.96);
}

.tv-screen {
  grid-template-columns: minmax(220px, .72fr) minmax(360px, 1.34fr) minmax(210px, .66fr);
  gap: clamp(22px, 4vw, 64px);
  padding: clamp(28px, 7vw, 110px);
  transform: translate3d(0, 9vh, 0) scale(.985);
}

.tv-screen.is-hidden-section {
  display: none;
}

/* Rebuilt developments section */
.services-shell {
  position: absolute;
  inset: clamp(62px, 9vh, 96px) clamp(22px, 5vw, 78px) clamp(24px, 5vh, 58px);
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 42px);
  opacity: 0;
  filter: blur(18px);
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 900ms var(--ease),
    filter 900ms var(--ease),
    transform 900ms var(--ease);
}

body[data-screen="interaction"] .services-shell {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

.service-tabs {
  align-self: center;
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(247, 248, 255, .10);
  border-radius: 22px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 80px rgba(0, 0, 0, .28);
}

.service-tab {
  min-height: 46px;
  border: 0;
  border-radius: 16px;
  padding: 10px 14px;
  color: rgba(247, 248, 255, .54);
  background: transparent;
  font: 850 13px/1.15 inherit;
  text-align: left;
  cursor: pointer;
  transition:
    color 320ms ease,
    background 320ms ease,
    transform 420ms var(--ease),
    filter 420ms ease;
}

.service-tab:hover,
.service-tab.is-active {
  color: rgba(247, 248, 255, .96);
  background: rgba(255, 255, 255, .10);
  filter: blur(0);
}

.service-tab.is-active {
  transform: translateX(4px);
}

.services-shell .interaction-options {
  position: relative;
  inset: auto;
  z-index: 1;
  display: block;
  overflow: hidden;
  min-height: 0;
}

.services-shell .interaction-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(250px, .42fr) minmax(0, .86fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: center;
  justify-items: stretch;
  padding: clamp(18px, 3vw, 48px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: blur(22px);
  transform: translate3d(34px, 0, 0) scale(.985);
  background: linear-gradient(120deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0));
  border: 1px solid rgba(247, 248, 255, .055);
  border-radius: 28px;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .04);
  transition:
    opacity 520ms cubic-bezier(.16, 1, .24, 1),
    visibility 520ms cubic-bezier(.16, 1, .24, 1),
    filter 560ms cubic-bezier(.16, 1, .24, 1),
    transform 640ms cubic-bezier(.16, 1, .24, 1);
}

.services-shell .interaction-card.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.services-shell .interaction-card.is-exiting {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
  filter: blur(18px);
  transform: translate3d(-22px, -8px, 0) scale(.982);
  transition-duration: 140ms;
}

.services-shell .interaction-card.is-entering {
  animation: servicePageIn 620ms cubic-bezier(.16, 1, .24, 1) both;
}

@keyframes servicePageIn {
  0% {
    opacity: 0;
    filter: blur(24px);
    transform: translate3d(32px, 18px, 0) scale(.985);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.services-shell .interaction-card::before,
.services-shell .interaction-card::after,
.services-shell .interaction-visual {
  display: none;
}

.services-shell .interaction-copy {
  position: relative;
  left: auto;
  top: auto;
  z-index: 3;
  width: min(390px, 100%);
  color: rgba(247, 248, 255, .94);
  text-align: left;
  transform: none;
}

.service-kicker {
  margin: 0 0 14px;
  color: rgba(247, 248, 255, .42);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  text-transform: uppercase;
}

.services-shell .interaction-copy h2 {
  margin: 0;
  font-size: clamp(38px, 5.2vw, 86px);
  line-height: .9;
  font-weight: 850;
}

.services-shell .interaction-copy span {
  display: block;
  width: 44px;
  height: 2px;
  margin: 24px 0 22px;
  background: currentColor;
  opacity: .66;
}

.services-shell .interaction-short,
.services-shell .interaction-more {
  max-height: none;
  margin: 0;
  opacity: 1;
  filter: none;
  transform: none;
  color: rgba(247, 248, 255, .66);
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.55;
  font-weight: 700;
}

.services-shell .interaction-more {
  margin-top: 16px;
  color: rgba(247, 248, 255, .78);
}

.service-demo-frame {
  position: relative;
  width: 100%;
  min-height: min(58vh, 560px);
  height: clamp(360px, 58vh, 620px);
  border: 1px solid rgba(247, 248, 255, .08);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 72%, rgba(88, 193, 255, .12), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.service-demo-frame .interaction-demo,
.services-shell .interaction-card--mirror .interaction-demo,
.services-shell .interaction-card--product .interaction-demo,
.services-shell .interaction-card--infographic .interaction-demo,
.services-shell .interaction-card--game .interaction-demo,
.services-shell .interaction-card--particles .interaction-demo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  opacity: 1;
  filter: none;
  transform: none;
  clip-path: none;
  mask-image: none;
  pointer-events: none;
}

.services-shell .interaction-card--game .interaction-demo,
.services-shell .interaction-card--particles .interaction-demo {
  clip-path: none;
  mask-image: none;
}

.services-shell .interaction-card--infographic .service-demo-frame {
  background: #f4f1ea;
}

@media (max-width: 980px) {
  .services-shell {
    inset: 72px 18px 22px;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
  }

  .service-tabs {
    align-self: start;
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding: 8px;
    border-radius: 18px;
    scrollbar-width: none;
  }

  .service-tabs::-webkit-scrollbar {
    display: none;
  }

  .service-tab {
    flex: 0 0 auto;
    min-height: 40px;
    white-space: nowrap;
    text-align: center;
  }

  .service-tab.is-active {
    transform: translateY(-1px);
  }

  .services-shell .interaction-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 18px;
    padding: 20px;
    align-items: stretch;
  }

  .services-shell .interaction-copy {
    width: min(620px, 100%);
    margin: 0 auto;
    text-align: center;
  }

  .services-shell .interaction-copy h2 {
    font-size: clamp(30px, 8vw, 56px);
  }

  .services-shell .interaction-copy span {
    margin: 16px auto 14px;
  }

  .services-shell .interaction-short {
    font-size: 14px;
  }

  .services-shell .interaction-more {
    display: none;
  }

  .service-demo-frame {
    min-height: 300px;
    height: min(52vh, 520px);
  }
}

@media (max-width: 560px) {
  body:not([data-screen="intro"]) .site-header:hover {
    width: min(390px, calc(100vw - 20px));
    min-height: 50px;
    border-radius: 999px;
    padding: 6px 8px;
  }

  .site-header:hover .site-brand {
    position: static;
    left: auto;
    top: auto;
    transform: none;
  }

  .site-header:hover .site-brand img {
    width: 22px;
    height: 22px;
  }

  .site-header:hover .site-nav {
    top: auto;
    max-width: none;
  }

  .site-nav a,
  .services-menu button {
    min-width: 0;
    padding: 7px 7px;
    font-size: 11px;
  }

  .services-dropdown {
    top: 58px;
  }

  .services-shell {
    inset: 70px 12px 14px;
  }

  .services-shell .interaction-card {
    padding: 16px;
    border-radius: 22px;
  }

  .service-demo-frame {
    min-height: 260px;
    height: min(46vh, 420px);
    border-radius: 18px;
  }
}

@media (max-width: 390px) {
  body:not([data-screen="intro"]) .site-header:hover {
    min-height: 86px;
    align-items: flex-start;
    border-radius: 18px;
    padding: 9px 10px;
  }

  .site-header:hover .site-brand {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
  }

  .site-header:hover .site-nav {
    margin-top: 30px;
    flex-wrap: wrap;
    gap: 5px;
  }

  .site-nav a,
  .services-menu button {
    min-width: 86px;
    padding: 8px 9px;
    font-size: 11px;
  }

  .services-dropdown {
    top: 82px;
  }
}

.tv-screen::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  opacity: .82;
  filter: blur(74px) saturate(1.18);
  background:
    radial-gradient(circle at 18% 32%, rgba(255, 112, 38, .36), transparent 29%),
    radial-gradient(circle at 78% 28%, rgba(88, 193, 255, .38), transparent 34%),
    radial-gradient(circle at 58% 78%, rgba(45, 136, 255, .24), transparent 36%),
    radial-gradient(circle at 86% 66%, rgba(255, 179, 54, .20), transparent 28%);
  background-size: 124% 124%, 118% 118%, 132% 132%, 112% 112%, auto;
  animation: tvGradientDrift 12s ease-in-out infinite alternate;
  will-change: transform, background-position;
  pointer-events: none;
}

.tv-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 66% 46%, rgba(255, 255, 255, .09), transparent 32%),
    linear-gradient(180deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, .46) 82%);
  pointer-events: none;
}

.tv-description,
.tv-copy,
.tv-visual {
  position: relative;
  z-index: 2;
  opacity: 0;
  filter: blur(22px);
  transition:
    opacity 1050ms var(--ease),
    filter 1050ms var(--ease),
    transform 1050ms var(--ease);
}

.tv-copy {
  justify-self: start;
  align-self: center;
  transform: translate3d(56px, 22px, 0);
}

.tv-copy h2 {
  margin: 0;
  max-width: 280px;
  font-size: clamp(28px, 3.2vw, 54px);
  line-height: .96;
  letter-spacing: 0;
  font-weight: 850;
}

.tv-description {
  justify-self: end;
  align-self: center;
  width: min(280px, 100%);
  transform: translate3d(-56px, 22px, 0);
}

.tv-description p {
  margin: 0;
  color: rgba(247, 248, 255, .68);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.62;
  font-weight: 500;
}

.tv-copy.is-roulette-active,
.tv-description.is-roulette-active {
  transform-origin: var(--tv-roulette-origin, center center);
}

.tv-copy.is-roulette-active > h2,
.tv-description.is-roulette-active > p {
  visibility: hidden;
}

.tv-roulette-layer {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  transform-origin: var(--tv-roulette-origin, center center);
  will-change: transform, opacity, filter;
  visibility: visible;
}

.tv-copy .tv-roulette-layer {
  max-width: 280px;
  font-size: clamp(28px, 3.2vw, 54px);
  line-height: .96;
  letter-spacing: 0;
  font-weight: 850;
}

.tv-description .tv-roulette-layer {
  color: rgba(247, 248, 255, .68);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.62;
  font-weight: 500;
}

.tv-roulette-layer--old {
  animation: tvRouletteOld 820ms var(--ease) both;
}

.tv-roulette-layer--new {
  animation: tvRouletteNew 820ms var(--ease) both;
}

.tv-description.is-roulette-active {
  --tv-roulette-origin: calc(100% + clamp(120px, 18vw, 260px)) 50%;
}

.tv-copy.is-roulette-active {
  --tv-roulette-origin: calc(clamp(120px, 18vw, 260px) * -1) 50%;
}

.tv-visual {
  position: relative;
  width: min(48vw, 760px);
  aspect-ratio: 16 / 9;
  justify-self: center;
  align-self: center;
  overflow: hidden;
  border-radius: 4px;
  transform: translate3d(0, 34px, 0) scale(.96);
}

.tv-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border: 12px solid #111;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .16),
    inset 0 0 0 5px rgba(0, 0, 0, .78),
    0 0 0 1px rgba(255, 255, 255, .14),
    0 30px 58px rgba(0, 0, 0, .72),
    0 0 42px rgba(88, 193, 255, .08);
  pointer-events: none;
}

.tv-visual::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -6%;
  z-index: 1;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35) 48%, transparent 72%);
  filter: blur(16px);
  opacity: .82;
  pointer-events: none;
}

.tv-visual img {
  display: none;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 32px 34px rgba(0, 0, 0, .62))
    drop-shadow(0 0 40px rgba(255, 255, 255, .08));
}

.tv-game {
  position: absolute;
  left: 12px;
  top: 12px;
  right: -20px;
  bottom: -2px;
  z-index: 2;
  overflow: hidden;
  border-radius: 1px;
  background:
    radial-gradient(circle at 50% 18%, rgba(88, 193, 255, .22), transparent 34%),
    linear-gradient(180deg, #07101a, #020305 62%, #000);
  pointer-events: none;
  cursor: crosshair;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .035),
    inset 0 0 36px rgba(0, 0, 0, .58);
}

body[data-screen="tv"] .tv-game {
  pointer-events: auto;
}

.target-game {
  position: relative;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
}

.product-3d-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.tv-game.is-product-3d .product-3d-canvas {
  display: block;
}

.game-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #fff;
  font-size: clamp(16px, 1.8vw, 28px);
  line-height: 1.1;
  font-weight: 850;
  text-align: center;
  letter-spacing: 0;
  text-shadow: 0 18px 38px rgba(0, 0, 0, .78);
  background: radial-gradient(circle at center, rgba(0, 0, 0, .06), rgba(0, 0, 0, .38));
  opacity: 1;
  transition: opacity 360ms ease, filter 360ms ease;
  pointer-events: none;
}

.tv-game.is-playing .game-overlay {
  opacity: 0;
  filter: blur(10px);
}

.tv-game.is-reactive .game-overlay {
  opacity: 0;
  filter: blur(14px);
}

.tv-game.is-passive-mode .game-overlay {
  opacity: 0;
  filter: blur(14px);
}

.tv-game.is-product-3d .game-overlay {
  opacity: 0;
  filter: blur(14px);
}

.tv-game::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

.tv-game.is-switching::after {
  animation: tvModeBlackout 720ms var(--ease) both;
}

body[data-screen="tv"] .tv-description,
body[data-screen="tv"] .tv-copy,
body[data-screen="tv"] .tv-visual {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

@keyframes infoDrift {
  0% {
    background-position: 0% 30%, 100% 20%, 45% 100%, 80% 70%, center;
    transform: translate3d(-4%, -3%, 0) scale(1);
  }
  50% {
    background-position: 42% 52%, 58% 34%, 66% 64%, 38% 42%, center;
  }
  100% {
    background-position: 100% 72%, 8% 68%, 28% 14%, 18% 22%, center;
    transform: translate3d(4%, 3%, 0) scale(1.08);
  }
}

@keyframes tvGradientDrift {
  0% {
    background-position: 0% 28%, 100% 20%, 54% 100%, 80% 72%, center;
    transform: translate3d(-3%, -2%, 0) scale(1);
  }
  50% {
    background-position: 36% 48%, 62% 34%, 74% 62%, 38% 40%, center;
  }
  100% {
    background-position: 100% 70%, 6% 66%, 28% 12%, 18% 24%, center;
    transform: translate3d(3%, 2%, 0) scale(1.07);
  }
}

@keyframes tvRouletteOld {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  48% {
    opacity: .34;
    filter: blur(10px);
  }
  100% {
    opacity: 0;
    filter: blur(24px);
    transform: translate3d(-22px, -118px, 0) rotate(-96deg);
  }
}

@keyframes tvRouletteNew {
  0% {
    opacity: 0;
    filter: blur(24px);
    transform: translate3d(22px, 118px, 0) rotate(96deg);
  }
  52% {
    opacity: .72;
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@keyframes tvModeBlackout {
  0% {
    opacity: 0;
  }
  38% {
    opacity: 1;
  }
  62% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.contact-screen {
  grid-template-columns: minmax(280px, .8fr) minmax(360px, 1fr);
  grid-template-rows: 1fr auto;
  gap: clamp(28px, 6vw, 92px);
  padding: clamp(28px, 7vw, 110px);
  transform: translate3d(0, 9vh, 0) scale(.985);
}

.contact-screen::before {
  content: "";
  position: absolute;
  inset: -24%;
  z-index: -2;
  opacity: .56;
  filter: blur(82px) saturate(1.14);
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 112, 38, .30), transparent 31%),
    radial-gradient(circle at 78% 24%, rgba(88, 193, 255, .28), transparent 34%),
    radial-gradient(circle at 58% 78%, rgba(124, 72, 255, .18), transparent 36%),
    #000;
  background-size: 126% 126%, 118% 118%, 132% 132%, auto;
  animation: tvGradientDrift 13s ease-in-out infinite alternate;
}

.contact-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .66));
  pointer-events: none;
}

.contact-copy,
.contact-form {
  position: relative;
  z-index: 2;
  opacity: 0;
  filter: blur(22px);
  transition:
    opacity 1050ms var(--ease),
    filter 1050ms var(--ease),
    transform 1050ms var(--ease);
}

.contact-copy {
  justify-self: end;
  align-self: center;
  max-width: 520px;
  transform: translate3d(-58px, 24px, 0);
}

.contact-copy h2 {
  margin: 0 0 20px;
  font-size: clamp(54px, 7vw, 112px);
  line-height: .9;
  letter-spacing: 0;
  font-weight: 850;
}

.contact-copy p {
  margin: 0;
  color: rgba(247, 248, 255, .68);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.5;
  font-weight: 500;
}

.contact-form {
  align-self: center;
  width: min(520px, 100%);
  display: grid;
  gap: 16px;
  transform: translate3d(58px, 24px, 0);
}

.contact-form label {
  display: grid;
  gap: 8px;
}

.contact-form span {
  color: rgba(247, 248, 255, .62);
  font-size: 13px;
  font-weight: 800;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(247, 248, 255, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  color: var(--ink);
  font: inherit;
  padding: 14px 15px;
  outline: none;
  transition: border-color 220ms ease, background 220ms ease;
}

.contact-form textarea {
  resize: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(88, 193, 255, .58);
  background: rgba(255, 255, 255, .10);
}

.contact-form input.is-invalid,
.contact-form textarea.is-invalid {
  border-color: rgba(255, 112, 112, .72);
  background: rgba(255, 82, 82, .08);
}

.contact-status {
  min-height: 20px;
  margin: -2px 0 0;
  color: rgba(247, 248, 255, .62);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.contact-status:empty {
  display: none;
}

.contact-status[data-type="pending"] {
  color: rgba(88, 193, 255, .82);
}

.contact-status[data-type="success"] {
  color: rgba(126, 235, 171, .88);
}

.contact-status[data-type="error"] {
  color: rgba(255, 132, 132, .9);
}

.contact-form button {
  justify-self: start;
  border: 1px solid rgba(247, 248, 255, .22);
  border-radius: 8px;
  background: #f7f8ff;
  color: #050505;
  padding: 14px 24px;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  transition: transform 220ms ease, background 220ms ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  background: #fff;
}

.contact-form button:disabled {
  cursor: not-allowed;
  opacity: .58;
  transform: none;
}

body[data-screen="contact"] .contact-copy,
body[data-screen="contact"] .contact-form {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

.contact-footer {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
  width: 100%;
  padding-top: clamp(18px, 3vw, 34px);
  border-top: 1px solid rgba(247, 248, 255, .12);
  color: rgba(247, 248, 255, .68);
  opacity: 0;
  filter: blur(18px);
  transform: translate3d(0, 34px, 0);
  transition:
    opacity 1050ms var(--ease),
    filter 1050ms var(--ease),
    transform 1050ms var(--ease);
}

.contact-footer img {
  display: block;
  width: min(150px, 24vw);
  height: auto;
}

.contact-footer p {
  margin: 0;
  max-width: 620px;
  font-size: clamp(11px, .85vw, 13px);
  line-height: 1.45;
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .08em;
}

body[data-screen="contact"] .contact-footer {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

.stage {
  overflow: hidden;
  background: #000;
  isolation: isolate;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 10vh, 0) scale(.985);
  transition:
    opacity 1150ms var(--ease),
    transform 1150ms var(--ease);
}

body[data-screen="slideshow"] .stage {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.stage::before {
  display: none;
}

.stage::after {
  display: none;
}

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  padding: 0 clamp(24px, 8vw, 150px);
  opacity: 0;
  filter: blur(16px);
  transform: translate3d(0, -34px, 0);
  transition:
    opacity 900ms var(--ease),
    filter 900ms var(--ease),
    transform 900ms var(--ease);
}

.brand,
.nav a,
.details-link {
  color: var(--ink);
  text-decoration: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 10px 30px rgba(0, 0, 0, .44);
}

.brand img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
  filter: invert(1);
}

.nav {
  display: flex;
  gap: clamp(24px, 4vw, 48px);
  color: var(--muted);
  font-weight: 600;
}

.nav a {
  color: var(--muted);
  transition: color 260ms ease;
}

.nav a:hover {
  color: var(--ink);
}

.product-copy {
  position: absolute;
  z-index: 6;
  left: clamp(28px, 12vw, 154px);
  top: 25vh;
  width: min(370px, calc(100vw - 56px));
  text-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  opacity: 0;
  filter: blur(22px);
  transform: translate3d(-56px, 44px, 0);
  transition:
    opacity 1100ms var(--ease),
    filter 1100ms var(--ease),
    transform 1100ms var(--ease);
}

.eyebrow {
  margin: 0 0 6px;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.1;
  letter-spacing: 0;
  font-weight: 500;
}

.product-copy h1 {
  margin: 0 0 18px;
  font-size: clamp(56px, 5.3vw, 86px);
  line-height: .92;
  letter-spacing: 0;
  font-weight: 800;
}

.product-copy p:not(.eyebrow) {
  margin: 0;
  color: rgba(243, 246, 255, .76);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
}

.details-link {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 28px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 2px solid rgba(247, 248, 255, .8);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 12px 28px rgba(0, 0, 0, .44);
  cursor: pointer;
}

.details-link::after {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(1px) rotate(45deg);
}

.tech-video {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 82px);
  background: rgba(0, 0, 0, .74);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: blur(18px);
  transition:
    opacity 520ms var(--ease),
    visibility 520ms var(--ease),
    filter 520ms var(--ease);
}

.tech-video.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  filter: blur(0);
}

.tech-video__panel {
  position: relative;
  width: min(1040px, 86vw);
  height: min(620px, 70vh);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: clamp(18px, 2.4vw, 34px);
  border: 1px solid rgba(247, 248, 255, .18);
  background: linear-gradient(135deg, rgba(13, 16, 24, .92), rgba(0, 0, 0, .96));
  box-shadow: 0 42px 120px rgba(0, 0, 0, .72);
  overflow: hidden;
  transform: translate3d(0, 28px, 0) scale(.97);
  transition: transform 560ms var(--ease);
}

.tech-video.is-open .tech-video__panel {
  transform: translate3d(0, 0, 0) scale(1);
}

.tech-video__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(247, 248, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
}

.tech-video__close::before,
.tech-video__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 2px;
  background: rgba(247, 248, 255, .92);
  transform: translate(-50%, -50%) rotate(45deg);
}

.tech-video__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.tech-video__media {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 58%, var(--glow, rgba(88, 193, 255, .28)), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0));
}

.tech-video__media video {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: contain;
  background: #000;
  display: block;
}

.tech-video__media img {
  width: min(86%, 720px);
  max-height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 36px 54px rgba(0, 0, 0, .62));
  animation: techVideoFloat 5.8s cubic-bezier(.45, 0, .22, 1) infinite alternate;
}

.tech-video__media.has-video img,
.tech-video__media.has-video span,
.tech-video__media.has-video i {
  display: none;
}

.tech-video__media span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0 18%, rgba(255, 255, 255, .22) 48%, transparent 78%);
  mix-blend-mode: screen;
  opacity: .38;
  transform: translateX(-110%);
  animation: techVideoSweep 2.6s ease-in-out infinite;
}

.tech-video__media i {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 9%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247, 248, 255, .62), transparent);
  opacity: .42;
  animation: techVideoPulse 1.8s ease-in-out infinite;
}

.tech-video__copy {
  display: none;
}

.tech-video__copy p {
  margin: 0 0 14px;
  color: rgba(247, 248, 255, .58);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.tech-video__copy h2 {
  margin: 0;
  color: rgba(247, 248, 255, .96);
  font-size: clamp(34px, 4.4vw, 68px);
  line-height: .95;
}

.tech-video__copy small {
  display: block;
  margin-top: 20px;
  color: rgba(247, 248, 255, .66);
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.5;
  font-weight: 650;
}

@keyframes techVideoFloat {
  from {
    transform: translate3d(-2.2%, 1.8%, 0) scale(1);
  }
  to {
    transform: translate3d(2.4%, -2.2%, 0) scale(1.045);
  }
}

@keyframes techVideoSweep {
  0%,
  28% {
    transform: translateX(-110%);
  }
  72%,
  100% {
    transform: translateX(110%);
  }
}

@keyframes techVideoPulse {
  0%,
  100% {
    opacity: .22;
    transform: scaleX(.72);
  }
  50% {
    opacity: .64;
    transform: scaleX(1);
  }
}

.product-scene {
  position: absolute;
  inset: 0;
  z-index: 3;
  perspective: 1400px;
  opacity: 0;
  filter: blur(20px);
  transform: translate3d(0, 64px, 0) scale(.96);
  pointer-events: none;
  transition:
    opacity 1200ms var(--ease),
    filter 1200ms var(--ease),
    transform 1200ms var(--ease);
}

.product-scene::after {
  display: none;
}

.product-scene::before {
  content: "";
  position: absolute;
  left: 36%;
  right: 5%;
  bottom: 7%;
  height: 30%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .34) 38%, transparent 68%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
  filter: blur(5px);
  transform: rotateX(66deg) skewX(-8deg);
  transform-origin: center bottom;
  opacity: .9;
  transition:
    left 1300ms var(--ease),
    right 1300ms var(--ease),
    height 1300ms var(--ease),
    opacity 1300ms var(--ease),
    transform 1300ms var(--ease);
}

.product-item {
  position: absolute;
  top: 50%;
  left: 58%;
  width: min(45vw, 620px);
  aspect-ratio: 1;
  --active-transform: translate3d(-50%, -50%, 230px) scale(1.03) rotateY(-4deg);
  --next-transform: translate3d(28%, -45%, -190px) scale(.64) rotateY(-12deg);
  --far-transform: translate3d(78%, -43%, -330px) scale(.43) rotateY(-16deg);
  --prev-transform: translate3d(-112%, -46%, -230px) scale(.54) rotateY(12deg);
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  transition:
    transform 1450ms var(--ease),
    filter 1450ms var(--ease),
    opacity 1180ms var(--ease);
  transform-style: preserve-3d;
  will-change: transform, filter, opacity;
}

.product-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: 0;
  width: 58%;
  height: 12%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, .72), rgba(0, 0, 0, .32) 48%, transparent 72%);
  filter: blur(18px);
  transform: translateX(-50%) rotateX(62deg);
  transform-origin: center;
  transition:
    width 1450ms var(--ease),
    height 1450ms var(--ease),
    opacity 1450ms var(--ease),
    filter 1450ms var(--ease);
}

.product-item img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transform: translate3d(0, 0, 0);
  transform-origin: center center;
  filter:
    drop-shadow(0 24px 28px rgba(0, 0, 0, .34))
    drop-shadow(0 0 32px rgba(255, 255, 255, .08));
  will-change: transform;
}

.product-item.is-active img[src*="tech-totem"] {
  opacity: 1;
  filter:
    saturate(1.08)
    contrast(1.12)
    drop-shadow(0 26px 30px rgba(0, 0, 0, .44))
    drop-shadow(0 0 22px rgba(255, 214, 148, .14));
}

.product-item.is-active {
  z-index: 5;
  opacity: 1;
  filter: blur(0);
  transform: var(--active-transform);
}

.product-item.is-active::after {
  width: 70%;
  height: 14%;
  opacity: .9;
  filter: blur(18px);
}

.product-item.is-active[data-motion="glide"] img {
  animation: imageGlide 1320ms var(--ease) both;
}

.product-item.is-active[data-motion="lift"] img {
  animation: imageLift 1360ms var(--ease) both;
}

.product-item.is-active[data-motion="turn"] img {
  animation: imageTurn 1380ms var(--ease) both;
}

.product-item.is-active[data-motion="focus"] img {
  animation: imageFocus 1420ms var(--ease) both;
}

.product-item.is-active[data-motion="lift"]::after {
  animation: shadowLift 1360ms var(--ease) both;
}

.product-item.is-active[data-motion="turn"]::after {
  animation: shadowTurn 1380ms var(--ease) both;
}

.product-item.is-next {
  z-index: 3;
  opacity: .52;
  filter: blur(14px) saturate(.72);
  transform: var(--next-transform);
}

.product-item.is-next::after {
  width: 54%;
  height: 10%;
  opacity: .42;
  filter: blur(18px);
}

.product-item.is-far {
  z-index: 2;
  opacity: .22;
  filter: blur(24px) saturate(.48);
  transform: var(--far-transform);
}

.product-item.is-far::after {
  width: 42%;
  height: 8%;
  opacity: .22;
  filter: blur(20px);
}

.product-item.is-prev {
  z-index: 1;
  opacity: 0;
  filter: blur(20px);
  transform: var(--prev-transform);
}

.product-item.is-prev::after {
  opacity: 0;
}

.stage[data-motion="glide"] .product-scene::before {
  left: 34%;
  right: 4%;
  height: 31%;
  opacity: .9;
}

.stage[data-motion="lift"] .product-scene::before {
  left: 42%;
  right: 12%;
  height: 26%;
  opacity: .82;
  transform: rotateX(68deg) skewX(-3deg) translateY(10px);
}

.stage[data-motion="turn"] .product-scene::before {
  left: 38%;
  right: 7%;
  height: 33%;
  opacity: .88;
  transform: rotateX(64deg) skewX(5deg) translateX(18px);
}

.stage[data-motion="focus"] .product-scene::before {
  left: 31%;
  right: 11%;
  height: 29%;
  opacity: .78;
  transform: rotateX(67deg) skewX(-10deg) scaleX(.92);
}

@keyframes imageGlide {
  0% {
    transform: translate3d(-22px, 0, 0) rotateY(8deg);
  }
  62% {
    transform: translate3d(6px, 0, 34px) rotateY(-3deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotateY(0);
  }
}

@keyframes imageLift {
  0% {
    transform: translate3d(0, 34px, 0) rotateX(5deg);
  }
  68% {
    transform: translate3d(0, -8px, 28px) rotateX(0deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotateX(0deg);
  }
}

@keyframes imageTurn {
  0% {
    transform: translate3d(18px, 0, 0) rotateY(-12deg);
  }
  58% {
    transform: translate3d(-5px, 0, 32px) rotateY(4deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotateY(0);
  }
}

@keyframes imageFocus {
  0% {
    transform: translate3d(0, 0, -36px) scale(.94);
  }
  72% {
    transform: translate3d(0, 0, 24px) scale(1.018);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes shadowLift {
  0% {
    opacity: .24;
    width: 46%;
    transform: translateX(-50%) rotateX(62deg) scaleX(.72);
  }
  68% {
    opacity: .95;
    width: 74%;
    transform: translateX(-50%) rotateX(62deg) scaleX(1.04);
  }
  100% {
    opacity: .9;
    width: 70%;
    transform: translateX(-50%) rotateX(62deg) scaleX(1);
  }
}

@keyframes shadowTurn {
  0% {
    transform: translateX(-46%) rotateX(62deg) scaleX(.76);
  }
  58% {
    transform: translateX(-52%) rotateX(62deg) scaleX(1.08);
  }
  100% {
    transform: translateX(-50%) rotateX(62deg) scaleX(1);
  }
}

.controls {
  position: absolute;
  z-index: 80;
  left: clamp(28px, 12vw, 154px);
  right: clamp(28px, 12vw, 154px);
  bottom: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
  opacity: 0;
  filter: blur(14px);
  transform: translate3d(0, 44px, 0);
  transition:
    opacity 900ms var(--ease),
    filter 900ms var(--ease),
    transform 900ms var(--ease);
}

.arrow {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(247, 248, 255, .32);
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  z-index: 82;
  pointer-events: auto;
  transition: transform 260ms ease, background 260ms ease, border-color 260ms ease;
}

.arrow:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .16);
  border-color: rgba(247, 248, 255, .68);
}

.arrow span {
  width: 12px;
  height: 12px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg) translate(2px, -2px);
}

.arrow--next span {
  transform: rotate(225deg) translate(2px, -2px);
}

.counter {
  position: absolute;
  left: 58px;
  right: 58px;
  bottom: 21px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
}

.counter i {
  height: 2px;
  background: linear-gradient(90deg, var(--ink), rgba(247, 248, 255, .14));
}

.product-dots {
  position: absolute;
  z-index: 70;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  opacity: 0;
  filter: blur(12px);
  transition:
    opacity 900ms var(--ease),
    filter 900ms var(--ease),
    bottom 900ms var(--ease);
}

body[data-screen="slideshow"] .topbar,
body[data-screen="slideshow"] .product-copy,
body[data-screen="slideshow"] .product-scene,
body[data-screen="slideshow"] .controls,
body[data-screen="slideshow"] .product-dots {
  opacity: 1;
  filter: blur(0);
}

body[data-screen="slideshow"] .topbar,
body[data-screen="slideshow"] .product-copy,
body[data-screen="slideshow"] .product-scene,
body[data-screen="slideshow"] .controls {
  transform: translate3d(0, 0, 0) scale(1);
}

body:not([data-screen="slideshow"]) .topbar {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, -48px, 0);
}

body:not([data-screen="slideshow"]) .product-copy {
  opacity: 0;
  filter: blur(22px);
  transform: translate3d(-72px, -26px, 0);
}

body:not([data-screen="slideshow"]) .product-scene {
  opacity: 0;
  filter: blur(24px);
  transform: translate3d(72px, 28px, 0) scale(.98);
}

body:not([data-screen="slideshow"]) .controls,
body:not([data-screen="slideshow"]) .product-dots {
  opacity: 0;
  filter: blur(14px);
}

.product-dot {
  width: 9px;
  height: 9px;
  border: 1px solid rgba(247, 248, 255, .38);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  padding: 0;
  cursor: pointer;
}

.product-dot.is-active {
  background: var(--ink);
}

.product-copy.is-changing {
  animation: copyChange 880ms var(--ease) both;
}

@keyframes copyChange {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  40% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1120px) {
  .site-header {
    top: 12px;
    left: 50%;
    width: 104px;
    height: auto;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 10px;
  }

  body:not([data-screen="intro"]) .site-header:hover {
    width: min(420px, calc(100vw - 32px));
    min-height: 50px;
    border-radius: 999px;
    padding: 6px 10px;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    background: rgba(0, 0, 0, .68);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .34);
  }

  .site-brand {
    min-width: 78px;
    justify-content: center;
    z-index: 2;
  }

  .site-header:hover .site-brand {
    position: static;
    left: auto;
    top: auto;
    width: 30px;
    min-width: 30px;
    flex: 0 0 30px;
    transform: none;
  }

  .site-header:hover .site-brand span {
    position: absolute;
    width: 0;
    overflow: hidden;
  }

  .site-nav {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    gap: 2px;
    white-space: nowrap;
    transform: none;
  }

  .site-header:hover .site-nav {
    width: 100%;
    max-width: none;
    transform: none;
  }

  .site-nav > * {
    flex: 0 0 auto;
  }

  .site-nav a,
  .services-menu button {
    padding: 8px 8px;
    font-size: 11.5px;
    line-height: 1;
    text-align: center;
  }

  .services-dropdown {
    position: fixed;
    top: 58px;
    left: 50%;
    right: auto;
    width: min(310px, calc(100vw - 28px));
    min-width: 0;
    transform: translate3d(-50%, -8px, 0);
  }

  .services-menu:hover .services-dropdown {
    transform: translate3d(-50%, 0, 0);
  }

  .services-dropdown a {
    white-space: normal;
    text-align: center;
  }

  .info-screen,
  .interaction-screen,
  .tv-screen,
  .contact-screen {
    padding: 26px;
  }

  .info-screen {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 24px;
  }

  .info-vertex {
    right: -10vw;
    top: auto;
    bottom: 7vh;
    width: 112vw;
    height: 42vh;
    opacity: .30;
    transform: none;
  }

  .info-content h1 {
    font-size: clamp(36px, 11vw, 58px);
  }

  .info-content p {
    font-size: 16px;
  }

  .interaction-heading {
    display: none;
  }

  .interaction-options {
    display: flex;
    flex-direction: column;
    inset: 64px 0 0;
    overflow: hidden;
  }

  .interaction-card {
    position: relative;
    flex: 1 1 20%;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 18px 24px;
    align-items: center;
    justify-items: center;
    border-top: 1px solid rgba(247, 248, 255, .045);
    background: linear-gradient(90deg, rgba(255, 255, 255, .026), rgba(255, 255, 255, 0));
    cursor: pointer;
  }

  .interaction-card::before {
    inset: 18% -30% -42%;
    opacity: .05;
  }

  .interaction-copy {
    left: 50%;
    top: 50%;
    width: min(420px, 78vw);
    text-align: center;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }

  .interaction-copy h2 {
    font-size: clamp(22px, 8vw, 34px);
  }

  .interaction-copy span {
    margin: 16px auto 14px;
  }

  .interaction-short {
    font-size: 13px;
    line-height: 1.4;
  }

  .interaction-more {
    font-size: 13px;
    line-height: 1.42;
  }

  .interaction-card.is-open .interaction-copy {
    left: 50%;
    right: auto;
    top: clamp(22px, 5vh, 42px);
    width: min(560px, 86vw);
    text-align: center;
    transform: translate3d(-50%, 0, 0) scale(1);
  }

  .interaction-card.is-open .interaction-copy span {
    margin-left: auto;
    margin-right: auto;
  }

  .interaction-options.has-open .interaction-card {
    flex: 0 1 11%;
    opacity: .36;
    filter: blur(.8px);
    transform: translate3d(0, 0, 0) scale(.985);
  }

  .interaction-options.has-open .interaction-card.is-open {
    flex: 1 1 64%;
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }

  .interaction-options.has-open .interaction-card:not(.is-open) {
    transform: translate3d(0, 0, 0) scale(.985);
  }

  .interaction-options.has-open .interaction-card:not(.is-open) .interaction-copy {
    left: 50%;
    top: 50%;
    width: min(300px, 74vw);
    opacity: .56;
    filter: blur(1px);
    transform: translate3d(-50%, -50%, 0) scale(.94);
  }

  .interaction-options.has-open .interaction-card:not(.is-open) .interaction-copy h2 {
    font-size: clamp(16px, 5.3vw, 24px);
  }

  .interaction-options.has-open .interaction-card:not(.is-open) .interaction-short,
  .interaction-options.has-open .interaction-card:not(.is-open) .interaction-more,
  .interaction-options.has-open .interaction-card:not(.is-open) .interaction-copy span {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
  }

  .interaction-demo {
    left: 5vw;
    right: 5vw;
    top: 168px;
    bottom: 22px;
    width: auto;
    height: auto;
    min-width: 0;
    opacity: 0;
    transform: scale(.98);
    clip-path: none;
    mask-image: none;
  }

  .interaction-card.is-open .interaction-demo {
    opacity: .82;
    transform: translateX(-50%) scale(1);
  }

  .interaction-card--game .interaction-demo,
  .interaction-card--particles .interaction-demo,
  .interaction-card--mirror .interaction-demo,
  .interaction-card--product .interaction-demo,
  .interaction-card--infographic .interaction-demo {
    --demo-top: clamp(210px, 28vh, 260px);
    --demo-bottom: clamp(22px, 4vh, 40px);
    left: 50%;
    right: auto;
    top: var(--demo-top);
    bottom: auto;
    width: min(760px, 88vw);
    height: calc(100% - var(--demo-top) - var(--demo-bottom));
    min-width: 0;
    clip-path: none;
    mask-image: none;
  }

  .interaction-card--mirror.is-open .interaction-demo {
    --demo-top: clamp(210px, 28vh, 260px);
    --demo-bottom: clamp(22px, 4vh, 40px);
    left: 50%;
    right: auto;
    top: var(--demo-top);
    bottom: auto;
    width: min(760px, 88vw);
    height: calc(100% - var(--demo-top) - var(--demo-bottom));
    transform: translateX(-50%) scale(1);
  }

  .interaction-card--product.is-open .interaction-demo,
  .interaction-card--infographic.is-open .interaction-demo {
    top: var(--demo-top);
    transform: translateX(-50%) scale(1);
  }

  .interaction-card.is-open .interaction-more {
    max-height: 110px;
  }

  @media (max-width: 680px) {
    .interaction-card.is-open .interaction-copy {
      left: 20px;
      right: 20px;
      top: 18px;
      width: auto;
    }

    .interaction-card--game .interaction-demo,
    .interaction-card--particles .interaction-demo,
    .interaction-card--mirror .interaction-demo,
    .interaction-card--product .interaction-demo,
    .interaction-card--infographic .interaction-demo,
    .interaction-card--mirror.is-open .interaction-demo,
    .interaction-card--product.is-open .interaction-demo,
    .interaction-card--infographic.is-open .interaction-demo {
      left: 18px;
      right: 18px;
      top: 154px;
      bottom: auto;
      width: auto;
      height: calc(100% - 172px);
      transform: scale(1);
    }
  }

  .tv-screen {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 28px;
  }

  .contact-screen {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-content: center;
    gap: 28px;
  }

  .contact-copy {
    justify-self: start;
    max-width: 100%;
  }

  .contact-copy h2 {
    font-size: clamp(44px, 14vw, 72px);
  }

  .contact-form button {
    justify-self: stretch;
  }

  .contact-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .contact-footer img {
    width: min(150px, 54vw);
  }

  .contact-footer p {
    text-align: left;
  }

  .tv-description {
    justify-self: start;
    width: min(520px, 100%);
    text-align: center;
  }

  .tv-copy {
    justify-self: center;
    text-align: center;
  }

  .tv-copy h2 {
    max-width: none;
  }

  .tv-copy .tv-roulette-layer {
    max-width: none;
  }

  .tv-visual {
    width: min(94vw, 620px);
    justify-self: center;
    order: -1;
  }

  .topbar {
    padding: 0 24px;
  }

  .nav {
    gap: 18px;
    font-size: 14px;
  }

  .product-copy {
    top: 14vh;
    left: 24px;
  }

  .product-copy h1 {
    font-size: clamp(46px, 13vw, 68px);
  }

  .product-item {
    left: 58%;
    top: 58%;
    width: 78vw;
  }

  .controls {
    left: 24px;
    right: 24px;
  }

  .product-dots {
    bottom: 96px;
  }
}

@media (max-width: 560px) {
  body:not([data-screen="intro"]) .site-header:hover {
    width: min(390px, calc(100vw - 20px));
    min-height: 50px;
    border-radius: 999px;
    padding: 6px 8px;
  }

  .site-header:hover .site-brand {
    position: static;
    left: auto;
    top: auto;
    transform: none;
  }

  .site-header:hover .site-nav {
    top: auto;
    max-width: none;
  }

  .site-nav a,
  .services-menu button {
    min-width: 0;
    padding: 7px 7px;
    font-size: 11px;
  }

  .services-dropdown {
    top: 58px;
  }
}

@media (max-width: 390px) {
  body:not([data-screen="intro"]) .site-header:hover {
    min-height: 86px;
    align-items: flex-start;
    border-radius: 18px;
    padding: 9px 10px;
  }

  .site-header:hover .site-brand {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
  }

  .site-header:hover .site-nav {
    margin-top: 30px;
    flex-wrap: wrap;
    gap: 5px;
  }

  .site-nav a,
  .services-menu button {
    min-width: 86px;
    padding: 8px 9px;
    font-size: 11px;
  }

  .services-dropdown {
    top: 82px;
  }
}

/* Final service-page overrides: keep the rebuilt section stable over legacy responsive rules. */
.services-shell .interaction-options {
  position: relative;
  inset: auto;
  display: block;
  overflow: hidden;
}

.services-shell .interaction-card {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
}

.services-shell .interaction-card:not(.is-active) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.services-shell .interaction-card.is-exiting {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

.services-shell .interaction-card:not(.is-active):not(.is-exiting) .interaction-copy,
.services-shell .interaction-card:not(.is-active):not(.is-exiting) .service-demo-frame {
  opacity: 0;
  visibility: hidden;
}

.services-shell .interaction-card.is-active {
  pointer-events: auto;
}

.services-shell .interaction-copy {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  width: min(390px, 100%);
  transform: none;
}

.services-shell .interaction-card .interaction-demo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  opacity: 1;
  transform: none;
  clip-path: none;
  mask-image: none;
}

.css-product-camera {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  pointer-events: none;
  perspective: 1100px;
  --cam-x: 0deg;
  --cam-y: -18deg;
  --cam-float: 0px;
}

.camera-rig {
  position: relative;
  width: min(76%, 720px);
  aspect-ratio: 1.65;
  transform-style: preserve-3d;
  transform: translateY(var(--cam-float)) rotateX(var(--cam-x)) rotateY(var(--cam-y));
  transition: transform 180ms ease-out;
}

.camera-shadow {
  position: absolute;
  left: 18%;
  right: 12%;
  bottom: 5%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(97, 128, 172, .34), rgba(0, 0, 0, 0) 68%);
  filter: blur(18px);
  transform: translateZ(-160px) rotateX(78deg);
}

.camera-body,
.camera-lens,
.lens-ring,
.camera-face,
.camera-grip,
.camera-prism,
.camera-hotshoe,
.camera-button {
  position: absolute;
  transform-style: preserve-3d;
}

.camera-body {
  left: 16%;
  top: 30%;
  width: 36%;
  height: 34%;
  transform: translateZ(0);
}

.camera-face {
  border-radius: 12px;
  background: linear-gradient(135deg, #303a48, #121820 68%, #080b10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -18px 34px rgba(0,0,0,.38);
}

.camera-face--front {
  inset: 0;
  transform: translateZ(46px);
}

.camera-face--right {
  width: 28%;
  height: 100%;
  right: -14%;
  top: 0;
  background: linear-gradient(90deg, #414d5e, #141922);
  transform: rotateY(90deg) translateZ(36px);
}

.camera-face--top {
  left: 4%;
  top: -24%;
  width: 78%;
  height: 30%;
  background: linear-gradient(180deg, #3f4a59, #161c25);
  transform: rotateX(82deg) translateZ(23px);
}

.camera-grip {
  left: -15%;
  top: 4%;
  width: 25%;
  height: 98%;
  border-radius: 16px;
  background: repeating-linear-gradient(90deg, #0b0e13 0 7px, #18202a 8px 10px);
  box-shadow: inset -14px 0 24px rgba(0,0,0,.55);
  transform: translateZ(58px);
}

.camera-prism {
  left: 40%;
  top: -35%;
  width: 28%;
  height: 38%;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(135deg, #384351, #10151c);
  transform: translateZ(58px) skewX(-6deg);
}

.camera-hotshoe {
  left: 48%;
  top: -56%;
  width: 15%;
  height: 22%;
  border-radius: 6px;
  background: #111720;
  transform: translateZ(66px);
}

.camera-button {
  top: -12%;
  width: 17%;
  height: 13%;
  border-radius: 999px;
  background: linear-gradient(135deg, #636d7b, #222a35);
  transform: translateZ(72px);
}

.camera-button--left { left: 6%; }
.camera-button--right { right: -6%; }

.camera-brand,
.camera-alpha {
  position: absolute;
  z-index: 3;
  color: rgba(247,248,255,.92);
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: 0 8px 20px rgba(0,0,0,.45);
  transform: translateZ(76px);
}

.camera-brand {
  left: 43%;
  top: 42%;
  font-size: clamp(26px, 4.2vw, 54px);
}

.camera-alpha {
  left: 74%;
  top: 62%;
  font-size: clamp(16px, 2vw, 26px);
}

.camera-lens {
  left: 45%;
  top: 33%;
  width: 44%;
  height: 36%;
  transform: translateZ(88px);
}

.lens-ring {
  top: 50%;
  border-radius: 50%;
  translate: 0 -50%;
  box-shadow: inset 10px 0 18px rgba(255,255,255,.08), inset -18px 0 34px rgba(0,0,0,.78), 0 18px 42px rgba(0,0,0,.42);
}

.lens-ring--back {
  left: 0;
  width: 44%;
  height: 86%;
  background: linear-gradient(90deg, #303946, #0a0d12);
}

.lens-ring--mid {
  left: 22%;
  width: 52%;
  height: 108%;
  background: linear-gradient(90deg, #151b24, #2d3541 45%, #07090d);
}

.lens-ring--front {
  left: 50%;
  width: 46%;
  height: 116%;
  background: radial-gradient(circle at 42% 38%, #303946, #090b10 68%);
  border: 2px solid rgba(255,255,255,.08);
}

.lens-glass {
  position: absolute;
  left: 65%;
  top: 50%;
  width: 23%;
  height: 64%;
  translate: 0 -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 34%, rgba(255,255,255,.95) 0 5%, transparent 8%),
    radial-gradient(circle at 58% 42%, rgba(255,255,255,.80) 0 3%, transparent 6%),
    radial-gradient(circle at 46% 50%, #2d8fb4, #10394c 46%, #030609 78%);
  border: 2px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 24px rgba(86, 193, 255, .24), 0 0 26px rgba(88, 193, 255, .13);
}

.camera-label {
  position: absolute;
  color: #f7f8ff;
  font-size: clamp(11px, 1.4vw, 17px);
  font-weight: 850;
  line-height: 1.15;
  text-shadow: 0 8px 24px rgba(0,0,0,.65);
}

.camera-label::after {
  content: "";
  position: absolute;
  top: 54%;
  height: 2px;
  width: clamp(80px, 11vw, 150px);
  background: rgba(247,248,255,.54);
  transform-origin: left center;
}

.camera-label span {
  display: block;
  margin-top: 4px;
  color: rgba(247,248,255,.65);
  font-size: .62em;
}

.camera-label--lens {
  left: 14%;
  top: 14%;
}

.camera-label--lens::after {
  left: 105%;
  transform: rotate(19deg);
}

.camera-label--body {
  right: 4%;
  top: 15%;
  text-align: right;
}

.camera-label--body::after {
  right: 105%;
  transform: rotate(158deg);
}

@media (max-width: 980px) {
  .services-shell .interaction-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .services-shell .interaction-copy {
    width: min(620px, 100%);
    margin: 0 auto;
    text-align: center;
  }

  .services-shell .interaction-copy span {
    margin-left: auto;
    margin-right: auto;
  }

  .services-shell .service-demo-frame {
    min-height: 300px;
    height: min(52vh, 520px);
  }
}

/* Scroll-only developments: no tab selector, no numeric development labels. */
.services-shell {
  grid-template-columns: 1fr;
}

.service-tabs,
.service-kicker {
  display: none !important;
}

.services-shell .interaction-options {
  height: 100%;
}

@media (max-width: 980px) {
  .services-shell {
    grid-template-rows: minmax(0, 1fr);
  }
}

/* Final typography and polish pass */
.info-content h1,
.product-copy h1,
.contact-copy h2,
.services-shell .interaction-copy h2,
.tv-copy h2 {
  font-size: clamp(34px, 4.6vw, 68px);
}

.product-copy h1 {
  font-size: clamp(44px, 4.8vw, 72px);
}

.services-shell .interaction-copy h2 {
  font-size: clamp(34px, 4vw, 64px);
}

.contact-copy h2 {
  font-size: clamp(42px, 5.6vw, 82px);
}

.info-content p,
.contact-copy p,
.services-shell .interaction-short,
.services-shell .interaction-more,
.product-copy p:not(.eyebrow) {
  font-size: clamp(14px, 1.05vw, 17px);
}

.tech-video {
  position: fixed;
  z-index: 10000;
}

.tech-video__panel {
  width: min(1040px, calc(100vw - 48px));
  height: min(640px, calc(100vh - 72px));
}

.details-link {
  position: relative;
  z-index: 160;
  pointer-events: auto;
}

@media (max-width: 760px) {
  .info-content h1,
  .product-copy h1,
  .contact-copy h2,
  .services-shell .interaction-copy h2,
  .tv-copy h2 {
    font-size: clamp(30px, 9vw, 44px);
  }

  .contact-screen {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 18px;
    padding: 76px 18px 22px;
  }

  .contact-copy {
    justify-self: stretch;
    align-self: end;
    max-width: none;
  }

  .contact-copy h2 {
    margin-bottom: 10px;
    font-size: clamp(34px, 11vw, 48px);
  }

  .contact-copy p {
    font-size: 14px;
    line-height: 1.35;
  }

  .contact-form {
    width: 100%;
    gap: 9px;
  }

  .contact-form label {
    gap: 5px;
  }

  .contact-form span {
    font-size: 11px;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 10px 12px;
    font-size: 14px;
  }

  .contact-form textarea {
    min-height: 88px;
  }

  .contact-form button {
    padding: 11px 18px;
  }

  .contact-footer {
    gap: 10px;
    font-size: 10px;
  }

  .contact-footer img {
    width: 24px;
    height: 24px;
  }

  .tech-video {
    padding: 14px;
  }

  .tech-video__panel {
    width: calc(100vw - 28px);
    height: min(72vh, 560px);
    padding: 12px;
  }

  .tech-video__media video {
    min-height: 0;
  }
}