@font-face {
  font-family: Barlow;
  src: url('./barlow-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Barlow;
  src: url('./barlow-medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
* {
  box-sizing: border-box;
}
html {
  color-scheme: light;
  background: #fafaf8;
}
body {
  margin: 0;
  padding: 24px;
  font-family: Barlow, Arial, sans-serif;
  color: #fff;
}
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 48px);
  border-radius: 24px;
  padding: 0 clamp(28px, 4.5vw, 96px) 18px;
  background: #071e46;
}
.atmosphere,
#shader,
.shader-field,
.shader-canvas,
.static-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.atmosphere {
  z-index: -2;
  background: #071e46;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 12, 42, 0.76),
    rgba(0, 16, 52, 0.35) 55%,
    rgba(0, 12, 42, 0.76)
  );
}
.header,
.intro,
.signature,
footer {
  position: relative;
  z-index: 1;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 96px;
  border-bottom: 1px solid #ffffff40;
}
.brand {
  display: block;
  width: 160px;
  height: auto;
}
.coming-soon {
  font-size: 16px;
  font-weight: 500;
  color: #e3edff;
}
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 350px);
  gap: 40px;
  padding-top: 62px;
}
h1 {
  margin: 0;
  font-size: clamp(60px, 7vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 400;
}
h1 span {
  color: #d6e7ff;
}
.audience {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: #d6e7ff;
}
.description {
  margin: 6px 0 0;
  font-size: clamp(24px, 1.9vw, 28px);
  line-height: 1.45;
  color: #eef5ff;
  font-weight: 500;
}
.signature {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex: 1;
  min-height: 260px;
  padding: 30px 24px 24px;
}
.signature img {
  width: clamp(180px, 28vw, 380px);
  max-width: 100%;
  height: auto;
}
footer {
  border-top: 1px solid #ffffff40;
  padding-top: 13px;
  font-size: 16px;
  line-height: 1.5;
  color: #e3edff;
  font-weight: 500;
}
.editorial-statement {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 70px;
  margin: 32px auto 0;
  padding: 95px 0 104px;
  max-width: 1440px;
  border-top: 1px solid #d5dcde;
  color: #192c32;
}
.editorial-statement p {
  margin: 0;
  max-width: 770px;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.editorial-statement p span {
  color: #69767a;
}
.statement-status {
  flex-shrink: 0;
  padding-bottom: 5px;
  font-size: 18px;
  font-weight: 500;
}
@media (max-width: 800px) {
  .editorial-statement {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    margin-top: 24px;
    padding: 48px 12px 56px;
  }
}
@media (min-width: 1280px) {
  .intro {
    grid-template-columns: minmax(0, 1fr) 420px;
  }
}
@media (max-width: 800px) {
  body {
    padding: 16px;
  }
  .hero {
    min-height: calc(100svh - 32px);
    padding-inline: 28px;
  }
  .header {
    min-height: 84px;
  }
  .intro {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 40px;
  }
  h1 {
    font-size: clamp(46px, 8vw, 70px);
  }
  .description {
    max-width: 450px;
    font-size: 23px;
  }
  .signature {
    min-height: 180px;
    padding-right: 0;
  }
}
@media (max-width: 480px) {
  body {
    padding: 12px;
  }
  .hero {
    min-height: calc(100svh - 24px);
    border-radius: 20px;
    padding-inline: 22px;
  }
  .brand {
    width: 130px;
  }
  .coming-soon {
    font-size: 14px;
  }
  .intro {
    padding-top: 34px;
  }
  h1 {
    font-size: clamp(37px, 10.8vw, 50px);
  }
  .audience,
  footer {
    font-size: 14px;
  }
  .description {
    font-size: 21px;
  }
  .signature {
    min-height: 150px;
  }
}

/* A live CSS field remains available if WebGPU cannot initialize. No bitmap. */
.fallback-field {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
}
.fallback-band {
  flex: 1;
  position: relative;
  overflow: hidden;
  --pointer-shift: 0px;
}
.fallback-band > div {
  position: absolute;
  inset: -45% -2px;
  background: linear-gradient(
    180deg,
    #193b78 0%,
    #28558b 24%,
    #3a77f2 44%,
    #33a5ff 55%,
    #193b78 78%,
    #071e46 100%
  );
  background-size: 100% 140%;
  transform: translateY(var(--pointer-shift));
  transition: transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
  animation: field-flow 12s ease-in-out infinite alternate;
}
.fallback-band:nth-child(2) > div {
  animation-delay: -7s;
}
.fallback-band:nth-child(3) > div {
  animation-delay: -3s;
}
.fallback-band:nth-child(4) > div {
  animation-delay: -10s;
}
.fallback-band:nth-child(5) > div {
  animation-delay: -5s;
}
.fallback-band:nth-child(6) > div {
  animation-delay: -9s;
}
@keyframes field-flow {
  from {
    background-position: 50% 0%;
  }
  to {
    background-position: 50% 100%;
  }
}
.hero[data-renderer='webgpu'] .fallback-field {
  visibility: hidden;
}
.hero:not([data-renderer='webgpu']) #shader {
  opacity: 0;
}
.hero[data-renderer='webgpu'] .fallback-band > div,
.hero[data-active='false'] .fallback-band > div {
  animation-play-state: paused;
}