/* VIAVR V7.1: quiet typography around the three-model depth composition */
.hero {
  padding-top: clamp(132px, 10vw, 160px);
  padding-bottom: 32px;
}
.hero-layout {
  grid-template-columns: minmax(0, .43fr) minmax(0, .57fr);
  column-gap: 0;
  align-items: center;
  min-height: 590px;
}
.hero-copy {
  min-width: 0;
  padding: 40px 0 55px;
}
.hero-copy > .eyebrow {
  max-width: 31em;
  margin-bottom: 25px;
  color: #bba0d0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.65;
}
.hero h1 {
  max-width: 9em;
  margin: 0;
  font-size: clamp(2.55rem, 4.75vw, 4.85rem);
  font-weight: 510;
  letter-spacing: -.048em;
  line-height: 1.06;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.hero h1 > span:first-child {
  display: block;
  max-width: 8em;
  white-space: pre-line;
}
.hero h1 .hero-accent {
  display: block;
  max-width: 13em;
  margin-top: .37em;
  color: #c6a0e5;
  font-size: .62em;
  font-weight: 450;
  line-height: 1.16;
  letter-spacing: -.035em;
}
html:lang(ru) .hero h1 > span:first-child { max-width: 7.15em; }
html:lang(ru) .hero h1 .hero-accent { white-space: nowrap; }
html:lang(en) .hero h1 > span:first-child { max-width: 6.7em; }
html:lang(es) .hero h1 > span:first-child { max-width: 7.5em; }
html:lang(zh) .hero h1 { letter-spacing: -.025em; line-height: 1.2; }
html:lang(zh) .hero h1 > span:first-child { max-width: 4.4em; }
html:lang(zh) .hero h1 .hero-accent { font-size: .56em; margin-top: .45em; letter-spacing: .01em; }
.hero-definition {
  max-width: 23.5em;
  margin-top: 27px;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.65;
  color: #bba9cc;
  letter-spacing: -.007em;
}
.hero-actions {
  margin-top: 30px;
  gap: 22px;
}
.hero-actions .button {
  min-height: 55px;
  padding: 15px 26px;
  gap: 26px;
  line-height: 1.4;
}
.hero-actions .text-link { line-height: 1.5; }
.hero-object { min-width: 0; margin-top: 0; }
.hero-object .headset-stage {
  width: 100%;
  height: clamp(490px, 62svh, 670px);
  min-height: 440px;
}
.hero-object .orbit { top: 49%; width: 91%; opacity: .65; }
.hero-object .orbit-b { width: 106%; opacity: .48; }
.hero-object .orbit-marker { top: 20%; right: 2%; color: #a58abd; }
.finish-controls {
  width: 100%;
  margin-top: -9px;
  gap: clamp(16px, 2.1vw, 30px);
}
.finish-controls button[data-finish] {
  min-height: 44px;
  padding: 5px 6px;
  gap: 10px;
  font-size: 11px;
  line-height: 1.35;
  border-radius: 18px;
  transition: color .3s, background .3s;
}
.finish-controls button[data-finish] span { display: inline; font-size: inherit; }
.finish-controls button[data-finish]:hover { color: #efe0fc; background: #d7b8f009; }
.finish-controls button[data-finish][aria-pressed="true"] { color: #f3e7fb; }
.finish-controls button[data-finish] i { flex: 0 0 auto; width: 13px; height: 13px; }
.headset-stage .headset-canvas:focus-visible {
  outline: 1px solid #d8b8ef80;
  outline-offset: -9px;
  border-radius: 28px;
}
.hero-bottom { margin-top: 24px; padding-top: 26px; }

@media (min-width: 1800px) {
  .hero h1 { font-size: 5.75rem; }
  .hero-layout { min-height: 680px; }
  .hero-object .headset-stage { height: 700px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .hero-layout { grid-template-columns: minmax(0, .43fr) minmax(0, .57fr); min-height: 520px; }
  .hero h1 { font-size: clamp(2.15rem, 4.65vw, 3.2rem); }
  .hero-copy > .eyebrow { font-size: 9px; max-width: 28em; }
  .hero-definition { font-size: 13px; max-width: 23em; }
  .hero-object .headset-stage { height: 510px; min-height: 410px; }
  .hero-actions .button { font-size: 11px; padding-inline: 21px; gap: 20px; }
  .finish-controls { gap: 16px; }
  .finish-controls button[data-finish] { font-size: 10px; gap: 8px; }
}
@media (max-width: 760px) {
  .hero { padding-top: 110px; padding-bottom: 29px; }
  .hero-layout { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-copy { padding: 18px 0 0; }
  .hero-copy > .eyebrow { font-size: 9px; letter-spacing: .12em; margin-bottom: 23px; }
  .hero h1 { font-size: clamp(2.55rem, 10.5vw, 4.4rem); max-width: 10em; line-height: 1.065; }
  .hero h1 .hero-accent { font-size: .63em; margin-top: .36em; }
  .hero-definition { max-width: 26em; margin-top: 23px; font-size: 13px; line-height: 1.65; }
  .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px 23px; margin-top: 25px; }
  .hero-actions .button { min-height: 50px; padding: 14px 22px; font-size: 11px; gap: 22px; }
  .hero-actions .text-link { font-size: 11px; }
  .hero-object { margin-top: 5px; }
  .hero-object .headset-stage { height: clamp(340px, 90vw, 480px); min-height: 330px; }
  .hero-object .orbit { width: 86%; top: 49%; }
  .hero-object .orbit-b { width: 101%; }
  .hero-object .orbit-marker { top: 20%; right: 2%; }
  .finish-controls { margin-top: -4px; gap: 24px; }
  .finish-controls button[data-finish] { padding-inline: 3px; font-size: 10px; gap: 9px; }
  .hero-bottom { margin-top: 21px; padding-top: 22px; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: clamp(2.2rem, 10.8vw, 2.55rem); }
  .hero h1 .hero-accent { font-size: .65em; }
  .hero-copy > .eyebrow { font-size: 8px; max-width: 30em; }
  .hero-definition { font-size: 12px; max-width: 25em; }
  .hero-object .headset-stage { height: 350px; min-height: 330px; }
  .finish-controls { gap: 19px; }
  .finish-controls button[data-finish] { gap: 8px; font-size: 9px; }
  .finish-controls button[data-finish] span { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .finish-controls button[data-finish] { transition: none; }
}