body.dc-page {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.dc-main {
  height: 100vh;
  height: 100dvh;
  padding: 24px;
  display: grid;
  place-items: center;
}

.dc-start, .dc-stage { grid-area: 1 / 1; }

.dc-stage[hidden], .dc-rotate[hidden] { display: none; }

.dc-stage {
  width: 100%; height: 100%;
  border-radius: 28px;
  background: #0d0d0d;
  animation: dc-stage-in .45s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes dc-stage-in {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}

.dc-stage { display: grid; place-items: center; padding: clamp(12px, 3vh, 24px); }
.dc-figures {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(8px, 2.4vh, 30px);
  color: #fff; text-align: center;
}

.dc-intro {
  font-size: min(clamp(14px, 1.5vw, 20px), 3.6vh); font-weight: 400;
  color: rgba(255, 255, 255, .62); letter-spacing: -.01em;
}
.dc-fig { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dc-num {
  font-size: min(clamp(34px, 6.4vw, 88px), 11vh); font-weight: 600;
  line-height: 1; letter-spacing: -.03em;

  font-variant-numeric: tabular-nums;
}
.dc-lbl {
  font-size: min(clamp(12px, 1.3vw, 17px), 3.2vh); font-weight: 400;
  color: rgba(255, 255, 255, .7); letter-spacing: -.005em;
}

.dc-figures.is-live .dc-intro,
.dc-figures.is-live .dc-fig { animation: dc-fig-in .5s cubic-bezier(.22,.61,.36,1) both; }
.dc-figures.is-live .dc-fig:nth-of-type(1) { animation-delay: .25s; }
.dc-figures.is-live .dc-fig:nth-of-type(2) { animation-delay: .85s; }
.dc-figures.is-live .dc-fig:nth-of-type(3) { animation-delay: 1.45s; }
@keyframes dc-fig-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.dc-page .ao-nav {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 40px 40px 0 40px;
}

.ao-nav-mini .ao-nav-inner {
  margin-left: auto; margin-right: 0;

  max-width: none;
  width: 56px; height: 56px;

  padding: 0 56px 0 0;
  gap: 18px;
  overflow: hidden;
  transition: width .4s cubic-bezier(.22, .61, .36, 1),
              padding .4s cubic-bezier(.22, .61, .36, 1);
}

.ao-nav-mini.is-wide .ao-nav-inner { width: 100%; padding: 0 56px 0 24px; }

.ao-nav-toggle {
  position: absolute; top: 0; right: 0; z-index: 2;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0;
  color: var(--text); cursor: pointer;
}
.ao-nav-toggle svg { width: 20px; height: 20px; }
.ao-nav-toggle .ic-close { display: none; }
.ao-nav-mini.is-wide .ao-nav-toggle .ic-menu { display: none; }
.ao-nav-mini.is-wide .ao-nav-toggle .ic-close { display: block; }

.ao-nav-mini .ao-logo,
.ao-nav-mini .ao-nav-links,
.ao-nav-mini .ao-nav-actions {
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.ao-nav-mini.is-wide .ao-logo,
.ao-nav-mini.is-wide .ao-nav-links,
.ao-nav-mini.is-wide .ao-nav-actions {
  opacity: 1; pointer-events: auto; transition-delay: .16s;
}

.ao-nav-mini .ao-burger { display: none; }

.dc-rotate {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; align-content: center; gap: 26px;
  padding: 32px;
  background: #0d0d0d; color: #fff;
  text-align: center;
}
.dc-rot-ic { width: min(38vw, 150px); height: auto; color: #fff; }

.dc-rot-phone {
  transform-box: view-box;
  transform-origin: 32px 32px;
  animation: dc-tilt 2.6s ease-in-out infinite;
}
@keyframes dc-tilt {
  0%, 18%   { transform: rotate(0deg); }
  42%, 78%  { transform: rotate(-90deg); }
  100%      { transform: rotate(0deg); }
}
.dc-rot-arc { opacity: .55; }
.dc-rot-txt { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }

@media (max-width: 860px) {
  .dc-main { padding: 14px; }
  .dc-stage { border-radius: 20px; }
  .dc-page .ao-nav { padding: 26px 26px 0 26px; }

  .ao-nav-mini .ao-nav-inner { gap: 12px; }
  .ao-nav-mini .ao-nav-links { display: flex; }
  .ao-nav-mini .ao-nav-actions .ao-btn { display: inline-flex; }
  .ao-nav-mini .ao-nav-mobile-cta { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .dc-main { padding: 12px; }
  .dc-page .ao-nav { padding: 22px 22px 0 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-stage { animation: none; }

  .dc-figures.is-live .dc-intro,
  .dc-figures.is-live .dc-fig { animation: dc-fade-in .3s ease both; }
  @keyframes dc-fade-in { from { opacity: 0; } to { opacity: 1; } }

  .dc-rot-phone { animation: none; transform: rotate(-90deg); }
}