:root {
  --red: #f21f26;
  --ink: #30353a;
  --muted: #50565c;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { overflow: hidden; background: #eef0f1; color: var(--ink); }
img { display: block; max-width: 100%; }

.page,
.desktop-stage,
.mobile-stage { min-height: 100svh; }

.desktop-stage {
  position: relative;
  overflow: hidden;
  background: #f2f3f4;
}

.desktop-scene {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, calc(100svh * 1.776833));
  max-width: none;
  aspect-ratio: 1672 / 941;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.mobile-stage { display: none; }

@media (max-width: 820px), (max-aspect-ratio: 4 / 5) {
  body { overflow-y: auto; }
  .desktop-stage { display: none; }

  .mobile-stage {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 24px 18px 105px;
    background:
      radial-gradient(circle at 50% 38%, #fff 0 30%, rgba(255,255,255,.92) 58%, rgba(238,240,241,.98) 100%),
      linear-gradient(145deg, #fff, #eef0f1);
  }

  .mobile-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .35;
    background-image:
      linear-gradient(rgba(48,53,58,.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(48,53,58,.08) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(circle at center, transparent 0 42%, #000 82%);
    mask-image: radial-gradient(circle at center, transparent 0 42%, #000 82%);
  }

  .mobile-content {
    position: relative;
    z-index: 3;
    width: min(100%, 620px);
    text-align: center;
  }

  .mobile-logo {
    width: min(84vw, 460px);
    margin: 0 auto 14px;
    filter: drop-shadow(0 16px 24px rgba(30,35,40,.07));
  }

  .construction-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 3px auto 22px;
    color: var(--red);
    font-size: clamp(.67rem, 2.6vw, .84rem);
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .construction-label > span {
    width: clamp(18px, 7vw, 45px);
    height: 1px;
    background: currentColor;
  }

  .construction-label svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-content h1 {
    margin: 0;
    font-size: clamp(2.25rem, 10.6vw, 4.7rem);
    line-height: 1.02;
    letter-spacing: -.045em;
  }

  .mobile-message {
    max-width: 560px;
    margin: .48em auto 0;
    color: var(--muted);
    font-size: clamp(1.1rem, 4.5vw, 1.75rem);
    line-height: 1.28;
  }

  .bolt-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 28px 0 20px;
    color: var(--red);
  }

  .bolt-divider span {
    width: clamp(42px, 16vw, 90px);
    height: 1px;
    background: currentColor;
  }

  .bolt-divider svg {
    width: 22px;
    height: 34px;
    fill: currentColor;
  }

  .values {
    display: flex;
    justify-content: center;
    max-width: 520px;
    margin: 0 auto;
  }

  .value {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    width: 33.333%;
    font-size: clamp(.7rem, 3vw, .92rem);
    font-weight: 600;
  }

  .value + .value::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    width: 1px;
    height: 72%;
    background: rgba(48,53,58,.15);
  }

  .value-icon {
    display: grid;
    place-items: center;
    width: clamp(52px, 15vw, 68px);
    aspect-ratio: 1;
    border: 1px solid rgba(48,53,58,.08);
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    box-shadow: 0 10px 23px rgba(30,35,40,.12);
  }

  .value-icon svg {
    width: 52%;
    height: 52%;
    fill: none;
    stroke: var(--red);
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-blueprint {
    position: absolute;
    width: 260px;
    aspect-ratio: 1;
    opacity: .12;
    border: 1px solid #8d949a;
    background:
      repeating-linear-gradient(0deg, transparent 0 22px, rgba(90,98,105,.55) 23px),
      repeating-linear-gradient(90deg, transparent 0 22px, rgba(90,98,105,.55) 23px);
  }

  .mobile-blueprint::before {
    content: "";
    position: absolute;
    inset: 18% 15% 25% 22%;
    border: 1px solid #8d949a;
    border-radius: 45% 10% 35% 8%;
  }

  .mobile-blueprint-left { left: -175px; top: 36%; transform: rotate(15deg); }
  .mobile-blueprint-right { right: -185px; top: 32%; transform: rotate(-13deg); }

  .mobile-watermark {
    position: absolute;
    top: 4%;
    right: -12px;
    width: 125px;
    fill: none;
    stroke: #7f878d;
    stroke-width: 17;
    stroke-linejoin: round;
    opacity: .055;
  }

  .mobile-shelf {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height: 46px;
    border-top: 3px solid rgba(255,255,255,.96);
    border-bottom: 2px solid var(--red);
    background: linear-gradient(#fff, #e5e7e8);
    box-shadow: 0 15px 25px rgba(30,35,40,.28);
  }
}

@media (max-width: 390px) {
  .construction-label > span,
  .construction-label svg:last-of-type { display: none; }
  .mobile-stage { padding-inline: 14px; }
  .value + .value::before { display: none; }
}