.hero { position: relative; overflow: hidden; }

.hero__copy {
  display: grid; justify-items: center; text-align: center;
  padding-top: clamp(28px, 0.5rem + 3vw, 56px);
}
.hero__title { max-width: 11.6em; text-wrap: wrap; }
.hero__lead { max-width: 46rem; margin-top: 20px; }
.hero__cta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px;
  margin-top: 28px;
}
.hero__dl { margin-left: 12px; }
.hero__nw { white-space: nowrap; }

.hero__stage {
  --ph-w: clamp(260px, 22vw + 40px, 360px);
  --ph-h: calc(var(--ph-w) * 2.06);
  position: relative;
  height: calc(var(--ph-h) * 0.66);
  margin-top: clamp(44px, 1.5rem + 1.5vw, 56px);
  display: flex; justify-content: center;
}

.hero__phone {
  position: absolute; top: 0; left: 50%;
  width: var(--ph-w); height: var(--ph-h);
  padding: calc(var(--ph-w) * 0.034);
  border-radius: calc(var(--ph-w) * 0.165);
  background: #0b0d12;
  box-shadow: inset 0 0 0 1.5px #2b313d, inset 0 0 0 3px #0b0d12, 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  transform: translate3d(-50%, calc((0.3 - var(--p, 0.3)) * 90px), 0);
  will-change: transform;
}
.hero__phone::after {
  content: ""; position: absolute; z-index: 5;
  top: calc(var(--ph-w) * 0.058); left: 50%;
  width: calc(var(--ph-w) * 0.29); height: calc(var(--ph-w) * 0.083);
  transform: translateX(-50%); border-radius: 999px; background: #000;
}

.hero__screen {
  --u: calc(var(--ph-w) / 360);
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: calc(var(--ph-w) * 0.132);
  background:
    radial-gradient(120% 70% at 50% 18%, #1b3a7a 0%, #0e1f45 45%, #070e22 100%);
  color: #fff;
  font-family: var(--font-text);
}

.hero__status {
  position: absolute; top: calc(18 * var(--u)); left: calc(30 * var(--u)); right: calc(26 * var(--u));
  display: flex; justify-content: space-between; align-items: center;
  font-size: calc(15 * var(--u)); font-weight: 600; letter-spacing: -0.01em;
}
.hero__status-ic { display: flex; gap: calc(6 * var(--u)); align-items: center; }
.hero__status-ic svg { width: auto; height: calc(11 * var(--u)); }

.hero__clock {
  position: absolute; top: calc(54 * var(--u)); left: 0; right: 0; z-index: 1;
  display: grid; justify-items: center;
}
.hero__date { font-size: calc(17 * var(--u)); font-weight: 600; opacity: 0.85; }
.hero__time {
  margin-top: calc(-2 * var(--u));
  font-family: var(--font-display); font-weight: 600;
  font-size: calc(92 * var(--u)); line-height: 1; letter-spacing: -0.03em;
}

.hero__wall {
  position: absolute; z-index: 2; left: 50%;
  top: calc(102 * var(--u));
  width: calc(200 * var(--u)); height: auto;
  transform: translateX(-50%);
}

.hero__feed {
  position: absolute; z-index: 3;
  top: calc(234 * var(--u)); left: calc(12 * var(--u)); right: calc(12 * var(--u));
  display: grid; gap: calc(8 * var(--u));
}
.hero__note {
  display: grid; grid-template-columns: calc(38 * var(--u)) minmax(0, 1fr); gap: calc(11 * var(--u));
  align-items: start;
  padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(13 * var(--u));
  border-radius: calc(20 * var(--u));
  background: rgba(244, 246, 250, 0.93);
  color: #0b1324;
  transform-origin: 50% 0;
}
.hero__note-ic {
  width: calc(38 * var(--u)); height: calc(38 * var(--u));
  border-radius: calc(9 * var(--u)); background: #fff;
  box-shadow: inset 0 0 0 1px rgba(11, 19, 36, 0.06);
}
.hero__note-body { min-width: 0; }
.hero__note-head {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: calc(12.5 * var(--u)); line-height: 1.25; color: #5e697e;
}
.hero__note-head b { font-weight: 600; color: #3b4558; }
.hero__note-title {
  margin-top: calc(1 * var(--u));
  font-size: calc(14.5 * var(--u)); line-height: 1.3; font-weight: 700; letter-spacing: -0.005em;
  text-wrap: balance;
}
.hero__note-text {
  font-size: calc(14 * var(--u)); line-height: 1.32; color: #1e2738;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.ruch-ok .hero__note.is-new { opacity: 0; transform: translateY(calc(-14 * var(--u))) scale(0.96); }
.hero__note.is-in {
  transition: opacity var(--t-2) var(--ease-out), transform var(--t-2) var(--ease-out);
}
.hero__note.is-out {
  opacity: 0; transform: scale(0.94);
  transition: opacity 360ms var(--ease-io), transform 360ms var(--ease-io);
}

@media (max-width: 560px) {
  .hero__title { font-size: min(var(--fs-hero), calc((100vw - 40px) / 7.7)); }
  .hero__lead { font-size: 1rem; line-height: 1.5; margin-top: 16px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__dl { margin: 6px 0 0; }

  .hero {
    display: grid;
    grid-template-rows: auto auto minmax(170px, 1fr) auto;
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100svh - var(--nav-h));
  }
  .hero__copy { display: contents; }
  .hero__title, .hero__lead { grid-column: 1; justify-self: center; text-align: center; padding-inline: var(--gutter); }
  .hero__title { grid-row: 1; margin-top: 24px; }
  .hero__lead { grid-row: 2; max-width: none; }
  .hero__stage {
    --ph-w: 272px;
    grid-row: 3; height: auto; margin-top: 28px;
    clip-path: inset(-200px -200px 0 -200px);
  }
  .hero__cta {
    grid-row: 4; width: 100%; margin: 0;
    padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 560px) and (max-height: 720px) {
  .hero__title { margin-top: 14px; }
  .hero__lead { margin-top: 10px; }
  .hero__stage { margin-top: 18px; }
  .hero__cta { gap: 8px; padding-top: 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .hero__cta .btn { min-height: 46px; padding-block: 10px; }
  .hero__dl { margin: 0; min-height: 36px; }
}