/* Full-width surfaces with centered, readable content on wide displays. */
.frame {
  max-width: none;
  border-inline: 0;
}
.header-inner { border-inline: 0; }
.frame-cross { display: none; }

@media (min-width: 1200px) {
  :root {
    --content-width: 1440px;
    --page-gutter: max(64px, calc((100vw - var(--content-width)) / 2));
  }
  .header-inner {
    max-width: none;
    padding-inline: var(--page-gutter);
  }
  .hero {
    min-height: 780px;
    padding-top: 96px;
    padding-inline: var(--page-gutter);
  }
  .hero-content { max-width: min(760px, 57%); }
  .hero h1 { font-size: 84px; letter-spacing: -5px; }
  .hero h1 .muted-title { white-space: nowrap; }
  .hero-bottom, .section, .principle-strip, .footer { padding-inline: var(--page-gutter); }
  .section::before { left: var(--page-gutter); right: var(--page-gutter); }
  .logo-stage { right: var(--page-gutter); }
  .hero-glow { right: calc(var(--page-gutter) - 130px); }
  .light-beam { right: calc(var(--page-gutter) - 220px); }
  .light-beam.beam-two { right: calc(var(--page-gutter) - 320px); }
  .perspective-grid { right: calc(var(--page-gutter) - 150px); }
  .community-watermark { right: calc(var(--page-gutter) - 120px); }
  .mini-dashboard { left: 50%; margin-left: -157px; }
  .mini-terminal { left: 50%; margin-left: -150px; }
}

@media (min-width: 1440px) {
  .hero h1 { font-size: 98px; letter-spacing: -5.8px; }
  .hero-description { font-size: 15px; }
  .section { padding-block: 88px; }
  .section h2 { font-size: 52px; }
  .community h2 { font-size: 68px; }
  .section-intro > p, .about-content p { font-size: 13px; }
  .about-content .about-lead { font-size: 21px; }
  .project-art { height: 260px; }
  .mini-dashboard { top: 50px; }
  .mini-terminal { top: 45px; }
  .network { top: 15px; }
  .project-info p, .process-card p { font-size: 12px; }
}

@media (min-width: 1600px) {
  .hero { min-height: 860px; padding-top: 112px; }
  .hero h1 { font-size: 104px; }
  .hero-description { font-size: 16px; }
  .logo-stage { width: 760px; height: 760px; top: 48px; }
  .hero-logo { width: 1400px; left: -320px; top: -195px; }
  .orbit-one { width: 670px; height: 670px; }
  .orbit-two { width: 790px; height: 790px; }
  .section { padding-block: 100px; }
  .section-intro > p, .about-content p { font-size: 14px; }
  .about-content .about-lead { font-size: 22px; }
  .process-card p { font-size: 13px; min-height: 100px; }
}

@media (min-width: 2200px) {
  :root {
    --content-width: 1600px;
    --page-gutter: max(88px, calc((100vw - var(--content-width)) / 2));
  }
  .hero { min-height: 920px; padding-top: 132px; }
  .hero-content { max-width: min(820px, 57%); }
  .hero h1 { font-size: 112px; }
  .logo-stage { width: 820px; height: 820px; top: 40px; }
  .hero-logo { width: 1520px; left: -345px; top: -208px; }
  .orbit-one { width: 720px; height: 720px; }
  .orbit-two { width: 880px; height: 880px; }
}

@media (max-width: 380px) {
  html[lang="en"] .hero h1 { font-size: clamp(38px, 11.5vw, 42px); }
}

@media (max-width: 600px) {
  .project-tabs { flex-wrap: wrap; row-gap: 6px; }
}