/* Figma 30:677 — 1920 × 1080 composition, with the existing dark HUD treatment. */
.hero {
  --hero-inset:14px;
  --hero-footer-height:max(22.5%,calc(136px + var(--hero-inset)));
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) var(--hero-footer-height);
  container-type:inline-size;
  position:relative;
  isolation:isolate;
  width:100%;
  height:100svh;
  min-height:420px;
  background:#080b10;
  overflow:hidden
}

.hero .art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
  z-index:-3
}

.hero-shade {
  position:absolute;
  left:0;
  width:100%;
  pointer-events:none;
  mix-blend-mode:multiply;
  z-index:-2
}

.hero-shade-bottom {
  bottom:0;
  height:55%;
  mix-blend-mode:normal;
  background:linear-gradient(to top,#080b10e6 0%,#080b1099 28%,#080b1040 62%,#080b1000 100%)
}

.hero-shade-top {
  top:0;
  height:31.2963%;
  transform:scaleX(-1)
}

/* The perimeter occupies only the scene grid area; the lower panel has its own frame. */
.hero-perimeter {
  position:absolute;
  grid-column:1/2;
  grid-row:1/2;
  inset:var(--hero-inset);
  width:calc(100% - 2 * var(--hero-inset));
  height:calc(100% - 2 * var(--hero-inset));
  z-index:3;
  pointer-events:none;
  stroke:#c5c8cf;
  stroke-width:.8;
  opacity:.65
}

.hero-bottom-frame {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  stroke:#c5c8cf;
  stroke-width:.9;
  opacity:.85
}

.hero-perimeter path,.hero-bottom-frame path {
  vector-effect:non-scaling-stroke
}

.hero .nav {
  position:absolute;
  top:calc(var(--hero-inset) + 10px);
  left:50%;
  transform:translateX(-50%);
  width:max(58.3854%,min(92%,850px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  z-index:5;
  font:400 clamp(10px,.833334cqw,16px)/2 "Golos Text",sans-serif;
  text-transform:uppercase
}

.hero .nav a {
  display:flex;
  align-items:center;
  min-height:32px;
  white-space:nowrap
}

.hero-partners {
  position:absolute;
  top:max(64px,8svh);
  left:50%;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  width:47.0833%;
  padding:0;
  min-height:5.463svh
}

/* Non-interactive panels use small markers, reserving moving lines for controls. */
.hero-date-panel::before,.hero .countdown::before,.hero-partners::before {
  content:'';
  position:absolute;
  inset:14px;
  pointer-events:none;
  background:var(--panel-marks)
}

.hero-partners::before {
  inset:0 -12px
}

.hero-partner {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:10px 0
}

.hero-partner+.hero-partner::before {
  content:'';
  position:absolute;
  left:0;
  top:25%;
  height:50%;
  border-left:1px solid #b9bdc42e
}

.hero-partner img {
  display:block;
  height:auto;
  max-height:3.6svh;
  object-fit:contain
}

.hero-partner .hero-zaslon {
  width:61%;
  max-height:none;
  transform:none
}

.hero-litres {
  width:59.613%
}

.hero-roscosmos {
  width:80.786%
}

.hero-minpromtorg {
  width:59.203%
}

.hero-identity {
  container-type:inline-size;
  position:absolute;
  top:27.7833%;
  left:50%;
  transform:translateX(-50%);
  width:min(47.0833%,83.7037svh);
  aspect-ratio:904/389
}

.hero-identity h1 {
  margin:0;
  font-size:inherit;
  line-height:0
}

.hero-identity h1 img {
  display:block;
  width:100%;
  height:auto
}

.hero-caption {
  position:absolute;
  left:30.2555%;
  top:73.5%;
  font:400 3.9492cqw/1.14286 "Golos Text",sans-serif;
  text-transform:uppercase;
  white-space:nowrap
}

.brand-hud {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  stroke:#b8bdc6;
  stroke-width:.8;
  opacity:.85;
  pointer-events:none
}

/* Side circuits meet the existing brand frame; their outer ends follow the viewport. */
.hud-wing {
  position:absolute;
  top:0;
  height:100%;
  stroke:#b8bdc6;
  stroke-width:.8;
  opacity:.85;
  pointer-events:none;
  overflow:visible
}

.hud-wing-left {
  right:94.2478%;
  width:calc((100vw - 100%)/2 + 5.7522% - 28px)
}

.hud-wing-right {
  left:97.7876%;
  width:calc((100vw - 100%)/2 + 2.2124% - 28px)
}

.hud-accent {
  stroke:var(--orange)
}

.hud-dot {
  fill:var(--orange);
  stroke:none
}

.hero-bottom {
  position:absolute;
  inset:auto var(--hero-inset) var(--hero-inset);
  display:grid;
  grid-template-columns:28% 38% 34%;
  height:calc(var(--hero-footer-height) - var(--hero-inset));
  min-height:100px;
  z-index:2
}

.hero-date-panel {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:min(.52cqw,1svh);
  min-width:0;
  padding:24px 4.1667cqw
}

.hero-date-panel>p {
  font-size:clamp(11px,1.04cqw,20px);
  line-height:1.5;
  text-transform:uppercase;
  color:#b8bdc6
}

.hero-date-panel>p::before {
  content:'';
  display:inline-block;
  width:4px;
  height:4px;
  margin-right:8px;
  background:var(--orange);
  vertical-align:middle
}

.hero .event-date {
  font:300 min(2.60416cqw,4.6svh)/1.08 Unbounded,sans-serif;
  text-transform:uppercase;
  white-space:nowrap
}

.hero .event-date span {
  display:block
}

.hero .event-date small {
  font:400 .33em/1.5 "Golos Text",sans-serif;
  vertical-align:middle;
  color:#b8bdc6
}

.hero .countdown {
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:center;
  gap:1cqw;
  padding:20px 2.4cqw;
  font-variant-numeric:tabular-nums;
  text-align:center;
  text-transform:uppercase
}

.hero .countdown>div {
  min-width:0;
  position:relative
}

.hero .countdown>div+div::before {
  content:'';
  position:absolute;
  left:-.5cqw;
  bottom:5%;
  height:48%;
  border-left:1px solid #aeb4bf30
}

.hero .countdown span {
  display:block;
  font:400 clamp(11px,1.04cqw,20px)/1 "Golos Text",sans-serif;
  color:#b8bdc6
}

.hero .countdown strong {
  display:block;
  margin-top:.41667cqw;
  font:300 min(4.18cqw,7.5svh)/1 Unbounded,sans-serif;
}

.stream-slot {
  display:flex;
  min-width:0;
  position:relative;
  z-index:2;
  padding:24px 18px 32px;
}

.stream {
  width:100%;
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:24px 18px;
  border:0;
  background:var(--orange);
  color:#18100e;
  font:500 clamp(10px,1.05cqw,21px)/1.4 Unbounded,sans-serif;
  text-transform:uppercase;
  white-space:nowrap
}

.menu-toggle {
  display:none;
  align-items:center;
  justify-content:center;
  min-width:48px;
  min-height:44px;
  border:1px solid #ffffff65;
  background:#090c13ed;
  color:#fff;
  font:400 12px/1 "Golos Text",sans-serif;
  text-transform:uppercase
}

.menu-icon {
  width:17px;
  height:12px;
  border-block:1px solid currentColor;
  position:relative
}

.menu-icon::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:5px;
  border-top:1px solid currentColor
}

.menu-toggle[aria-expanded="true"] .menu-icon {
  transform:rotate(90deg)
}

@media(min-width:768px) and (max-width:1100px) {
  .hero .nav {
    gap:12px
  }
  .hero-partners {
    top:64px;
    width:60%;
    min-height:42px
  }
  .hero-partner img {
    max-height:28px
  }
  .hero-date-panel {
    padding-inline:3cqw
  }
  .stream {
    font-size:clamp(10px,1cqw,12px);
    padding-inline:12px
  }
}

@media(max-width:767px) {
  .hero {
    --hero-inset:10px;
    height:auto;
    min-height:100svh;
    grid-template-rows:auto minmax(0,1fr) auto
  }
  .hero-perimeter {
    grid-row:1/3;
  }
  .hero .art {
    height:100%;
    object-position:53% center
  }
  .hero-shade-top {
    height:260px
  }
  .menu-toggle {
    display:flex;
    position:absolute;
    right:20px;
    top:16px;
    z-index:6
  }
  .hero .nav-main {
    display:none;
    position:absolute;
    inset:72px 20px auto;
    transform:none;
    width:auto;
    padding:12px;
    background:#0b1019f5;
    border:1px solid #ffffff40;
    z-index:5;
    font-size:13px;
    line-height:1.5;
    box-shadow:0 16px 40px #0008
  }
  .hero .nav-main.is-open {
    display:block
  }
  .hero .nav a {
    padding:12px;
    min-height:44px;
    white-space:normal
  }
  .hero-partners {
    grid-column:1;
    grid-row:1;
    position:relative;
    inset:auto;
    transform:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:calc(100% - 80px);
    max-width:420px;
    min-height:0;
    margin:84px auto 0
  }
  .hero-partner {
    padding:14px 10px;
    min-height:50px
  }
  .hero-partner:nth-child(3)::before {
    display:none
  }
  .hero-partner:nth-child(-n+2) {
    border-bottom:1px solid #b9bdc42e
  }
  .hero-partner img {
    max-height:27px;
    max-width:100%
  }
  .hero-partner .hero-zaslon {
    width:107px;
    transform:none
  }
  .hero-litres {
    width:104px
  }
  .hero-roscosmos {
    width:134px
  }
  .hero-minpromtorg {
    width:104px
  }
  .hero-identity {
    grid-column:1;
    grid-row:2;
    align-self:center;
    position:relative;
    inset:auto;
    transform:none;
    width:calc(100% - 24px);
    max-width:560px;
    margin:clamp(44px,9svh,100px) auto clamp(64px,11svh,120px)
  }
  .hero-caption {
    font-size:3.9492cqw
  }
  .brand-hud {
    stroke-width:1.3
  }
  .hud-wing {
    display:none
  }
  .hero-identity::before,.hero-identity::after {
    content:'';
    position:absolute;
    top:-24px;
    bottom:-24px;
    width:12px;
    border-color:#b8bdc666;
    border-style:solid;
    pointer-events:none
  }
  .hero-identity::before {
    left:0;
    border:0;
    background:var(--panel-marks)
  }
  .hero-identity::after {
    right:0;
    border:0;
    background:var(--panel-marks)
  }
  .hero-bottom {
    grid-column:1;
    grid-row:3;
    position:relative;
    inset:auto;
    margin:auto var(--hero-inset) var(--hero-inset);
    height:auto;
    min-height:0;
    grid-template-columns:1fr
  }
  .hero-date-panel {
    padding:24px 20px;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:12px
  }
  .hero-date-panel>p {
    max-width:110px;
    font-size:10px;
    line-height:1.6
  }
  .hero .event-date {
    font-size:clamp(18px,5.4cqw,22px);
    line-height:1.2;
  }
  .hero .event-date small {
    font-size:10px
  }
  .hero .event-date span {
    margin-top:4px
  }
  .hero .countdown {
    min-height:128px;
    padding:24px 20px;
    gap:14px;
  }
  .hero .countdown span {
    font-size:9px
  }
  .hero .countdown strong {
    font-size:clamp(28px,8cqw,48px);
    margin-top:12px
  }
  .hero .countdown>div+div::before {
    left:-7px
  }
  .stream {
    clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
    min-height:88px;
    padding:24px;
    font-size:clamp(11px,3cqw,15px);
    white-space:normal
  }
  dialog {
    padding:24px;
    max-width:calc(100vw - 32px)
  }
  dialog h2 {
    font-size:20px;
    overflow-wrap:anywhere
  }
}

/* One actual button moves to the viewport, retaining its player and keyboard state. */
.stream.is-docked {
  position:fixed;
  z-index:25;
  left:50%;
  bottom:max(16px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  box-shadow:0 8px 32px #0006;
}
.stream:is(.is-docked,.is-settled) {
  width:min(340px,calc(100vw - 32px));
  min-height:56px;
  height:56px;
  padding:16px 20px;
  font-size:11px;
}
.stream-destination {
  display:flex;
  justify-content:center;
  min-height:56px;
  margin:40px auto 0;
}
@media(max-width:767px) {
  .hero-date-panel { order:0; }
  .stream-slot { order:1; padding:12px; }
  .hero .countdown { order:2; }
}