/* Bright blue product-page direction inspired by modern Minecraft client sites. */
.f34-page {
  --f34-blue: #18bfff;
  --f34-blue-2: #4d8cff;
  --f34-deep: #071a34;
  --f34-panel: #0d284d;
  background: var(--f34-deep);
}

/* Keep the shared magbFox Toolbox header unchanged on the F34 page. */
.f34-page header {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 14px 6%;
  background-color: rgba(26, 26, 26, .98);
  border-bottom: 4px solid #000;
  backdrop-filter: none;
}

.f34-page .header-btn {
  padding: 8px 16px;
  color: #fff !important;
  background: var(--mc-green);
  border: 0;
  border-bottom: 3px solid #084311 !important;
  border-radius: 0;
}

.f34-page .f34-hero {
  min-height: 1040px;
  padding: 150px 28px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: start;
  gap: 54px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 24%, rgba(40, 182, 255, .45), transparent 34%),
    linear-gradient(145deg, #0c2e75 0%, #1152c8 48%, #183d9d 100%);
}

.f34-page .f34-hero::before {
  opacity: .2;
  filter: none;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 54px 54px;
  background-position: center;
}

.f34-page .f34-hero::after {
  background:
    radial-gradient(circle at 50% 34%, transparent 0 34%, rgba(1, 15, 48, .2) 72%),
    linear-gradient(180deg, transparent 72%, rgba(4, 20, 48, .7) 100%);
}

.f34-page .f34-copy {
  position: relative;
  z-index: 2;
  width: min(900px, 100%);
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.f34-page .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  color: #dff6ff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  letter-spacing: .08em;
}

.f34-page .f34-logo {
  width: min(185px, 48vw);
  margin: 26px 0 10px;
}

.f34-page .f34-copy h1 {
  max-width: 920px;
  font-size: clamp(3rem, 5.5vw, 5.8rem);
  line-height: 1.02;
  letter-spacing: -.055em;
}

.f34-page .f34-copy em {
  background: linear-gradient(90deg, #71e7ff, #18bfff, #83a6ff);
  background-clip: text;
}

.f34-page .f34-copy > p {
  max-width: 760px;
  margin: 24px auto;
  color: #c8dcff;
  font-size: 1.08rem;
}

.f34-page .actions,
.f34-page .facts {
  justify-content: center;
}

.f34-page .download {
  color: #0a2b69;
  background: #fff;
  box-shadow: 0 12px 28px rgba(2, 20, 70, .24);
}

.f34-page .download small {
  color: #49658f;
}

.f34-page .more {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25);
}

.f34-page .facts {
  color: #b8d5ff;
}

.f34-page .image-demo {
  z-index: 2;
  width: min(1180px, 94vw);
  height: auto;
  padding: 14px;
  background: rgba(4, 18, 49, .82);
  border: 1px solid rgba(174, 220, 255, .35);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 38px 90px rgba(2, 13, 48, .52), 0 0 80px rgba(43, 180, 255, .2);
}

.f34-page .image-demo img {
  width: 100%;
  max-height: 650px;
  margin: 0;
  border-radius: 13px 13px 0 0;
  filter: none;
  transform: none;
  animation: none;
}

.f34-page .cinematic {
  width: 100%;
  margin: 0;
  padding: 120px max(7vw, 28px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  align-items: center;
  gap: clamp(42px, 7vw, 110px);
  background: #0b2447;
  border: 0;
}

.f34-page .cinematic::after {
  display: none;
}

.f34-page .cinematic > img {
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(0,0,0,.3);
}

.f34-page .cinematic > div {
  position: static;
  width: 100%;
  max-width: 580px;
  transform: none;
}

.f34-page .cinematic span,
.f34-page .gallery-head > span {
  color: #27c8ff;
}

.f34-page .features {
  padding-top: 130px;
  background: #0d2a53;
}

.f34-page .heading > span,
.f34-page .how > div > span,
.f34-page .grid i {
  color: #31c8ff;
}

.f34-page .grid {
  border-color: rgba(153, 207, 255, .16);
}

.f34-page .grid article {
  border-color: rgba(153, 207, 255, .16);
  background: rgba(255,255,255,.035);
}

.f34-page .grid article:hover {
  background: rgba(72, 169, 255, .11);
}

.f34-page .grid p,
.f34-page .heading p,
.f34-page .how p {
  color: #9db6d7;
}

.f34-page .gallery {
  background: #081b36;
}

.f34-page .screen-frame {
  padding: 13px;
  background: #071326;
  border: 1px solid #31567f;
  border-radius: 18px;
  box-shadow: 0 35px 80px rgba(0,0,0,.35);
}

.f34-page .screen-frame img {
  border-radius: 10px;
}

.f34-page .how {
  background: #0b2447;
}

.f34-page .how li {
  background: rgba(255,255,255,.045);
  border-color: rgba(150, 205, 255, .15);
}

.f34-page .how li > b,
.f34-page .final {
  background: linear-gradient(135deg, #1a79ef, #16c3ff);
}

@media (max-width: 900px) {
  .f34-page .f34-hero {
    min-height: auto;
    padding: 125px 18px 0;
  }

  .f34-page .cinematic {
    grid-template-columns: 1fr;
    padding: 82px 24px;
  }

  .f34-page .cinematic > div {
    max-width: 680px;
  }
}

@media (max-width: 600px) {
  .f34-page .f34-copy h1 {
    font-size: clamp(2.6rem, 12vw, 4rem);
  }

  .f34-page .image-demo {
    width: 100vw;
    padding: 7px;
    border-radius: 14px 14px 0 0;
  }
}