:root {
  --platform-ink: #101722;
  --platform-deep: #07111f;
  --platform-blue: var(--fz-blue, #2f62ff);
  --platform-blue-soft: #8eb7ff;
  --platform-paper: #f4f6f8;
  --platform-line: #d7dee7;
  --platform-muted: #5c6877;
}

.platform-vnext {
  overflow-x: clip;
  color: var(--platform-ink);
  background: #fff;
}

.platform-vnext .shell {
  width: min(1180px, calc(100% - 48px));
}

.platform-vnext h1,
.platform-vnext h2,
.platform-vnext h3,
.platform-vnext p {
  letter-spacing: 0;
}

.platform-vnext .platform-eyebrow {
  margin: 0 0 16px;
  color: var(--platform-blue);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 900;
}

.platform-hero {
  position: relative;
  height: min(760px, calc(100svh - 108px));
  min-height: 660px;
  overflow: hidden;
  color: #fff;
  background: var(--platform-deep);
}

.platform-hero-media,
.platform-hero-media img,
.platform-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.platform-hero-media img {
  object-fit: cover;
  object-position: center 46%;
}

.platform-hero-shade {
  background:
    linear-gradient(90deg, rgb(3 10 20 / 96%) 0%, rgb(3 10 20 / 76%) 42%, rgb(3 10 20 / 18%) 76%),
    linear-gradient(0deg, rgb(3 10 20 / 86%) 0%, transparent 46%);
}

.platform-hero-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: clamp(58px, 8vh, 82px) 24px;
}

.platform-hero-copy {
  max-width: 720px;
}

.platform-hero .platform-eyebrow {
  color: var(--platform-blue-soft);
}

.platform-hero h1 {
  margin: 0;
  font-size: clamp(58px, 6.3vw, 84px);
  line-height: 0.98;
  font-weight: 920;
}

.platform-hero-lead {
  max-width: 650px;
  margin: 24px 0 0;
  color: rgb(255 255 255 / 78%);
  font-size: 17px;
  line-height: 1.7;
}

.platform-screen-hero .platform-hero-arena {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.platform-screen-hero .platform-hero-media {
  opacity: .28;
  filter: saturate(.72) contrast(1.08);
}

.platform-screen-hero .platform-hero-media img {
  object-position: center;
  transform: scale(1.04);
}

.platform-screen-hero .platform-hero-shade {
  z-index: 2;
  background:
    linear-gradient(90deg, rgb(3 10 20 / 98%) 0%, rgb(3 10 20 / 91%) 32%, rgb(3 10 20 / 30%) 64%, rgb(3 10 20 / 66%) 100%),
    linear-gradient(0deg, rgb(3 10 20 / 98%) 0%, transparent 43%);
}

.platform-screen-hero .platform-hero-inner {
  z-index: 4;
  pointer-events: none;
}

.platform-screen-hero .platform-hero-copy {
  position: relative;
  z-index: 5;
  max-width: 570px;
  pointer-events: auto;
}

.platform-screen-hero .platform-product-jump {
  pointer-events: auto;
}

.platform-screen-hero .platform-hero-lead {
  max-width: 440px;
}

.platform-screen-hero .platform-hero-copy h1 {
  font-size: clamp(50px, 5.5vw, 74px);
  line-height: 1.02;
}

.screen-hero-rig {
  position: absolute;
  z-index: 3;
  top: clamp(44px, 7vh, 72px);
  right: max(3vw, calc((100vw - 1320px) / 2));
  width: min(57vw, 820px);
}

.screen-hero-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgb(157 203 255 / 40%);
  border-radius: 5px;
  background: #07152a;
  box-shadow:
    0 34px 80px rgb(0 0 0 / 52%),
    0 0 0 8px rgb(8 22 42 / 72%);
  transform: none;
}

.screen-hero-frame::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(105deg, rgb(255 255 255 / 12%), transparent 25%, transparent 72%, rgb(255 255 255 / 5%)),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 2%) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
}

.screen-hero-topbar {
  position: absolute;
  z-index: 8;
  top: 0;
  right: 0;
  left: 0;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  color: #dbe9ff;
  background: rgb(4 14 30 / 82%);
  border-bottom: 1px solid rgb(255 255 255 / 13%);
  font-size: 10px;
  font-weight: 900;
}

.screen-hero-topbar b {
  color: #fff;
  font-size: 10px;
  letter-spacing: 0;
}

.screen-hero-game,
.screen-hero-scene {
  position: absolute;
  inset: 0;
}

.screen-hero-game {
  overflow: hidden;
}

.screen-hero-scene {
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 420ms ease, transform 700ms cubic-bezier(.2, .76, .22, 1);
}

.platform-screen-hero[data-screen-hero-mode="kids"] .screen-hero-scene.is-kids,
.platform-screen-hero[data-screen-hero-mode="adult"] .screen-hero-scene.is-adult {
  opacity: 1;
  transform: scale(1);
}

.screen-hero-scene.is-kids {
  background:
    radial-gradient(circle at 74% 33%, rgb(255 241 132 / 42%), transparent 15%),
    linear-gradient(180deg, #35a6e8 0 56%, #1c9a63 56% 100%);
}

.screen-hero-scene.is-kids::before {
  position: absolute;
  right: -8%;
  bottom: -32%;
  left: -8%;
  height: 65%;
  content: "";
  border-radius: 50% 50% 0 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 74px, rgb(255 255 255 / 12%) 74px 77px),
    #13834f;
}

.kids-cloud {
  position: absolute;
  top: 19%;
  width: 76px;
  height: 22px;
  border-radius: 20px;
  opacity: .72;
  background: #fff;
  box-shadow: 20px -10px 0 2px #fff, 42px 0 0 -3px #fff;
}

.kids-cloud.is-one { left: 10%; }
.kids-cloud.is-two { top: 27%; right: 14%; transform: scale(.72); }

.kids-target {
  position: absolute;
  z-index: 2;
  top: 40%;
  width: clamp(70px, 8vw, 106px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 3px solid rgb(255 255 255 / 86%);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgb(1 32 62 / 24%);
  transform: translate(-50%, -50%);
  transition: transform 360ms ease, box-shadow 360ms ease;
}

.kids-target i {
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(255 255 255 / 88%);
  box-shadow: inset 0 0 0 8px rgb(255 255 255 / 24%);
}

.kids-target b {
  position: absolute;
  bottom: -28px;
  color: #fff;
  font-size: 10px;
  text-shadow: 0 2px 6px rgb(0 0 0 / 32%);
}

.kids-target.is-coral { left: 24%; background: #ff5f65; }
.kids-target.is-yellow { left: 68%; background: #ffc72c; }
.kids-target.is-aqua { left: 88%; top: 63%; background: #25c9dd; }

.platform-screen-hero[data-screen-hero-mode="kids"][data-screen-hero-phase="brief"] .kids-target.is-active {
  animation: screen-hero-target-pulse 900ms ease-in-out infinite alternate;
}

.platform-screen-hero[data-screen-hero-mode="kids"][data-screen-hero-phase="result"] .kids-target.is-active {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 0 0 14px rgb(255 255 255 / 16%), 0 0 46px rgb(255 233 103 / 74%);
}

.screen-hero-scene.is-adult {
  background:
    radial-gradient(circle at 82% 46%, rgb(35 129 255 / 28%), transparent 20%),
    linear-gradient(145deg, #071325 0%, #092a36 48%, #071a25 100%);
}

.adult-grid {
  position: absolute;
  inset: 18% 7% 8%;
  transform: perspective(480px) rotateX(59deg);
  transform-origin: center bottom;
  background:
    linear-gradient(90deg, transparent 49.7%, rgb(112 220 255 / 30%) 49.7% 50.3%, transparent 50.3%),
    repeating-linear-gradient(90deg, rgb(112 220 255 / 15%) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(0deg, rgb(112 220 255 / 16%) 0 1px, transparent 1px 18%);
}

.adult-route {
  position: absolute;
  z-index: 2;
  left: 21%;
  bottom: 25%;
  width: 55%;
  height: 2px;
  opacity: .42;
  background: linear-gradient(90deg, #59e5ff, #84ffb7);
  box-shadow: 0 0 12px #42dcff;
  transform: rotate(-14deg) scaleX(.18);
  transform-origin: left center;
  transition: transform 900ms cubic-bezier(.2, .72, .22, 1), opacity 300ms ease;
}

.platform-screen-hero[data-screen-hero-mode="adult"] .adult-route {
  transform: rotate(-14deg) scaleX(1);
}

.adult-gate {
  position: absolute;
  z-index: 3;
  width: clamp(62px, 7vw, 96px);
  height: clamp(76px, 8.5vw, 116px);
  display: grid;
  place-items: center;
  border: 3px solid #60dfff;
  border-bottom: 0;
  color: #dffaff;
  box-shadow: inset 0 0 22px rgb(47 193 255 / 14%), 0 0 18px rgb(47 193 255 / 28%);
  transform: translate(-50%, -50%);
}

.adult-gate b {
  font-size: clamp(20px, 2.6vw, 34px);
}

.adult-gate.is-one { left: 25%; top: 65%; transform: translate(-50%, -50%) scale(.72); }
.adult-gate.is-two { left: 51%; top: 51%; transform: translate(-50%, -50%) scale(.86); }
.adult-gate.is-three { left: 80%; top: 37%; border-color: #8fffbe; color: #dfffea; }

.platform-screen-hero[data-screen-hero-mode="adult"][data-screen-hero-phase="brief"] .adult-gate.is-three {
  animation: screen-hero-gate-pulse 850ms ease-in-out infinite alternate;
}

.platform-screen-hero[data-screen-hero-mode="adult"][data-screen-hero-phase="result"] .adult-gate.is-three {
  box-shadow: inset 0 0 28px rgb(80 255 159 / 30%), 0 0 34px rgb(80 255 159 / 66%);
}

.screen-hero-ball {
  position: absolute;
  z-index: 6;
  top: 88%;
  left: 51%;
  width: clamp(34px, 4.4vw, 62px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: url("../assets/home-first-strike/football-256.webp") center / contain no-repeat;
  filter: drop-shadow(0 12px 12px rgb(0 0 0 / 52%));
  transform: translate(-50%, -50%) scale(1.15) rotate(0deg);
  transition:
    top 980ms cubic-bezier(.18, .72, .2, 1),
    left 980ms cubic-bezier(.18, .72, .2, 1),
    transform 980ms cubic-bezier(.18, .72, .2, 1),
    opacity 100ms ease;
}

.platform-screen-hero[data-screen-hero-phase="action"] .screen-hero-ball,
.platform-screen-hero[data-screen-hero-phase="result"] .screen-hero-ball {
  opacity: 1;
}

.platform-screen-hero[data-screen-hero-mode="kids"][data-screen-hero-phase="action"] .screen-hero-ball,
.platform-screen-hero[data-screen-hero-mode="kids"][data-screen-hero-phase="result"] .screen-hero-ball {
  top: 40%;
  left: 68%;
  transform: translate(-50%, -50%) scale(.52) rotate(330deg);
}

.platform-screen-hero[data-screen-hero-mode="adult"][data-screen-hero-phase="action"] .screen-hero-ball,
.platform-screen-hero[data-screen-hero-mode="adult"][data-screen-hero-phase="result"] .screen-hero-ball {
  top: 44%;
  left: 80%;
  transform: translate(-50%, -50%) scale(.5) rotate(320deg);
}

.screen-hero-impact {
  position: absolute;
  z-index: 5;
  width: 68px;
  aspect-ratio: 1;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
}

.platform-screen-hero[data-screen-hero-mode="kids"] .screen-hero-impact { top: 40%; left: 68%; }
.platform-screen-hero[data-screen-hero-mode="adult"] .screen-hero-impact { top: 44%; left: 80%; }

.platform-screen-hero[data-screen-hero-phase="result"] .screen-hero-impact {
  animation: screen-hero-impact 850ms ease-out both;
}

.screen-hero-prompt {
  position: absolute;
  z-index: 7;
  right: 18px;
  bottom: 18px;
  width: min(310px, calc(100% - 36px));
  padding: 14px 16px 15px;
  border-left: 3px solid #62cfff;
  color: #fff;
  background: rgb(3 11 23 / 88%);
  box-shadow: 0 14px 30px rgb(0 0 0 / 26%);
}

.screen-hero-prompt small,
.screen-hero-prompt strong {
  display: block;
}

.screen-hero-prompt small {
  color: #8edbff;
  font-size: 9px;
  font-weight: 900;
}

.screen-hero-prompt strong {
  margin-top: 5px;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.32;
}

.screen-hero-prompt.is-entering {
  animation: screen-hero-prompt-in 420ms cubic-bezier(.2, .74, .22, 1) both;
}

.screen-hero-floor {
  position: relative;
  width: 88%;
  height: 86px;
  margin: -7px auto 0;
  overflow: hidden;
  opacity: .72;
  background:
    repeating-linear-gradient(90deg, rgb(87 173 255 / 12%) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(0deg, rgb(87 173 255 / 12%) 0 1px, transparent 1px 24%);
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  transform: perspective(260px) rotateX(58deg);
  transform-origin: center top;
}

.screen-hero-floor span,
.screen-hero-floor i {
  display: none;
}

@keyframes screen-hero-target-pulse {
  to { transform: translate(-50%, -50%) scale(1.09); box-shadow: 0 0 0 12px rgb(255 255 255 / 13%), 0 0 36px rgb(255 233 103 / 58%); }
}

@keyframes screen-hero-gate-pulse {
  to { box-shadow: inset 0 0 28px rgb(80 255 159 / 28%), 0 0 32px rgb(80 255 159 / 58%); }
}

@keyframes screen-hero-impact {
  0% { opacity: .92; transform: translate(-50%, -50%) scale(.22); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.35); }
}

@keyframes screen-hero-prompt-in {
  from { opacity: .2; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Premium SCREEN game art. The hero motion enhances finished game scenes rather than drawing the game with CSS. */
.platform-screen-hero[data-screen-hero-mode="kids"] {
  --hero-ball-x: 50%;
  --hero-ball-y: 71%;
  --hero-trail-x: 50%;
  --hero-trail-y: 88%;
  --hero-trail-width: 18%;
  --hero-trail-angle: -90deg;
  --hero-impact-color: 192 255 47;
}

.platform-screen-hero[data-screen-hero-mode="adult"] {
  --hero-ball-x: 75%;
  --hero-ball-y: 52%;
  --hero-trail-x: 50%;
  --hero-trail-y: 88%;
  --hero-trail-width: 42%;
  --hero-trail-angle: -48deg;
  --hero-impact-color: 203 255 31;
}

.screen-hero-game::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(2 8 20 / 24%), transparent 25%, transparent 70%, rgb(2 8 20 / 36%)),
    linear-gradient(90deg, rgb(2 8 20 / 12%), transparent 18%, transparent 82%, rgb(2 8 20 / 12%));
}

.screen-hero-scene.is-kids,
.screen-hero-scene.is-adult {
  margin: 0;
  background: #03122a;
}

.screen-hero-scene.is-kids::before,
.screen-hero-scene.is-adult::before {
  display: none;
}

.screen-hero-scene img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.02);
  transition:
    transform 1650ms cubic-bezier(.18, .72, .2, 1),
    filter 500ms ease;
}

.platform-screen-hero[data-screen-hero-phase="action"] .screen-hero-scene img {
  transform: scale(1.075);
  filter: saturate(1.08) contrast(1.04);
}

.platform-screen-hero[data-screen-hero-phase="result"] .screen-hero-scene img {
  transform: scale(1.105);
  filter: saturate(1.14) contrast(1.06) brightness(1.03);
}

.screen-hero-flight-trail {
  position: absolute;
  z-index: 5;
  top: var(--hero-trail-y);
  left: var(--hero-trail-x);
  width: var(--hero-trail-width);
  height: 8px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgb(134 221 255 / 48%) 30%, #fff 100%);
  box-shadow: 0 0 18px rgb(69 188 255 / 62%);
  transform: rotate(var(--hero-trail-angle)) scaleX(.08);
  transform-origin: left center;
}

.platform-screen-hero[data-screen-hero-phase="action"] .screen-hero-flight-trail {
  animation: screen-hero-trail 920ms cubic-bezier(.16, .75, .18, 1) both;
}

.screen-hero-ball {
  top: 88%;
  left: 50%;
  z-index: 7;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.22) rotate(0deg);
}

.platform-screen-hero[data-screen-hero-mode="kids"][data-screen-hero-phase="action"] .screen-hero-ball,
.platform-screen-hero[data-screen-hero-mode="kids"][data-screen-hero-phase="result"] .screen-hero-ball,
.platform-screen-hero[data-screen-hero-mode="adult"][data-screen-hero-phase="action"] .screen-hero-ball,
.platform-screen-hero[data-screen-hero-mode="adult"][data-screen-hero-phase="result"] .screen-hero-ball {
  top: var(--hero-ball-y);
  left: var(--hero-ball-x);
  opacity: 1;
  transform: translate(-50%, -50%) scale(.58) rotate(340deg);
}

.screen-hero-impact {
  top: var(--hero-ball-y) !important;
  left: var(--hero-ball-x) !important;
  z-index: 6;
  width: clamp(70px, 8vw, 116px);
  border-color: rgb(var(--hero-impact-color) / 92%);
  box-shadow:
    0 0 0 10px rgb(var(--hero-impact-color) / 12%),
    0 0 46px rgb(var(--hero-impact-color) / 62%);
}

.screen-hero-flare {
  position: absolute;
  z-index: 5;
  top: var(--hero-ball-y);
  left: var(--hero-ball-x);
  width: clamp(90px, 12vw, 170px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgb(255 255 255 / 74%) 0 4%, rgb(var(--hero-impact-color) / 46%) 10%, transparent 68%);
  transform: translate(-50%, -50%) scale(.25);
}

.platform-screen-hero[data-screen-hero-phase="result"] .screen-hero-flare {
  animation: screen-hero-flare 1100ms ease-out both;
}

.screen-hero-modes {
  position: absolute;
  z-index: 9;
  top: 1px;
  left: 50%;
  display: flex;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 3px;
  color: rgb(255 255 255 / 54%);
  background: rgb(2 9 21 / 76%);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
}

.screen-hero-modes button {
  min-height: 48px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  font-size: 8px;
  font-weight: 900;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: color 300ms ease, background-color 300ms ease;
}

.screen-hero-modes button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #8edbff;
  outline-offset: -3px;
}

.screen-hero-modes button[aria-pressed="true"] {
  color: #fff;
  background: var(--platform-blue);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%);
}

@keyframes screen-hero-trail {
  0% { opacity: 0; transform: rotate(var(--hero-trail-angle)) scaleX(.08); }
  18% { opacity: .9; }
  100% { opacity: 0; transform: rotate(var(--hero-trail-angle)) scaleX(1); }
}

@keyframes screen-hero-flare {
  0% { opacity: .95; transform: translate(-50%, -50%) scale(.25); }
  60% { opacity: .55; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

.platform-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.platform-vnext .btn {
  min-height: 48px;
  padding-inline: 22px;
  border-radius: 4px;
  font-weight: 850;
}

.platform-product-jump {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgb(255 255 255 / 28%);
  border-bottom: 1px solid rgb(255 255 255 / 18%);
}

.platform-product-jump a {
  min-width: 0;
  min-height: 88px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 14px 18px;
  border-right: 1px solid rgb(255 255 255 / 18%);
  color: #fff;
}

.platform-product-jump a:last-child {
  border-right: 0;
}

.platform-product-jump a:hover,
.platform-product-jump a:focus-visible {
  background: rgb(255 255 255 / 8%);
}

.platform-product-jump span {
  color: var(--platform-blue-soft);
  font-size: 11px;
  font-weight: 900;
}

.platform-product-jump strong {
  font-size: 18px;
  line-height: 1.15;
}

.platform-product-jump small {
  color: rgb(255 255 255 / 58%);
  font-size: 11px;
}

.platform-products {
  padding-top: 110px;
  background: #fff;
}

.platform-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  gap: 64px;
  align-items: end;
  margin-bottom: 54px;
}

.platform-section-head.is-compact {
  margin-bottom: 44px;
}

.platform-section-head h2,
.platform-operation h2,
.platform-final h2 {
  margin: 0;
  font-size: clamp(42px, 4.5vw, 62px);
  line-height: 1.05;
  font-weight: 880;
  text-wrap: balance;
}

.platform-section-head > p,
.platform-operation-copy > p:not(.platform-eyebrow, .platform-product-name),
.platform-final-grid > div > p:last-child {
  margin: 0;
  color: var(--platform-muted);
  font-size: 16px;
  line-height: 1.72;
}

.platform-product-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: -14px 0 92px;
  border-top: 1px solid #cfd7df;
  border-bottom: 1px solid #cfd7df;
}

.platform-product-map a {
  min-width: 0;
  min-height: 246px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  color: #111a27;
  border-left: 1px solid #cfd7df;
  background: #fff;
}

.platform-product-map a:last-child {
  border-right: 1px solid #cfd7df;
}

.platform-product-map a.is-software {
  color: #fff;
  border-color: #142d4c;
  background: #071a31;
}

.platform-product-map span,
.platform-product-map em {
  color: #1756ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.platform-product-map .is-software span,
.platform-product-map .is-software em {
  color: #8eb7ff;
}

.platform-product-map strong {
  margin-top: 26px;
  font-size: 24px;
  line-height: 1.2;
}

.platform-product-map p {
  margin: 12px 0 24px;
  color: #687583;
  font-size: 13px;
  line-height: 1.6;
}

.platform-product-map .is-software p {
  color: rgba(255, 255, 255, 0.64);
}

.platform-product-map em {
  margin-top: auto;
}

.platform-hardware-heading {
  margin: 0 0 36px;
  padding-top: 22px;
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr) minmax(240px, 0.64fr);
  gap: 36px;
  align-items: end;
  border-top: 2px solid #111a27;
}

.platform-hardware-heading span {
  color: #1756ff;
  font-size: 10px;
  font-weight: 900;
}

.platform-hardware-heading strong {
  font-size: 26px;
}

.platform-hardware-heading p {
  margin: 0;
  color: #687583;
  font-size: 13px;
  line-height: 1.6;
}

.platform-product-catalog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.platform-catalog-card {
  scroll-margin-top: 88px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cad3dd;
  border-radius: 4px;
  background: #fff;
}

.platform-catalog-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid #d4dce5;
  background: #101822;
}

.platform-catalog-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.platform-catalog-media.is-screen-launcher-premium img {
  object-position: center;
}

.platform-catalog-media.is-product-shot {
  background: #eef1f3;
}

.platform-catalog-media.is-product-shot img {
  object-position: center;
}

.platform-catalog-media figcaption,
.platform-option-rail figure figcaption {
  position: absolute;
  z-index: 4;
  right: 10px;
  bottom: 10px;
  padding: 6px 8px;
  border-radius: 2px;
  color: rgb(255 255 255 / 82%);
  background: rgb(3 10 20 / 84%);
  font-size: 10px;
}

.platform-catalog-copy {
  padding: 26px 24px 28px;
}

.platform-catalog-copy h3 {
  margin: 0;
  font-size: clamp(25px, 2.3vw, 34px);
  line-height: 1.08;
  font-weight: 880;
}

.platform-catalog-copy > p:not(.platform-product-number) {
  min-height: 66px;
  margin: 14px 0 0;
  color: var(--platform-muted);
  font-size: 14px;
  line-height: 1.62;
}

.platform-catalog-copy dl {
  margin: 22px 0 0;
  border-top: 1px solid #d8dfe7;
}

.platform-catalog-copy dl > div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid #e1e6ec;
}

.platform-catalog-addon {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 16px 0 0 !important;
  padding: 10px;
  border: 1px solid #d8e0e8;
  border-radius: 3px;
  color: #26364a;
  background: #f5f7f9;
  line-height: 1.25 !important;
}

.platform-catalog-addon figure {
  width: 84px;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  background: #02060d;
}

.platform-catalog-addon figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 54% 55%;
  transform: scale(1.05);
}

.platform-catalog-addon > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.platform-catalog-addon span {
  color: #1756ff;
  font-size: 9px;
  font-weight: 900;
}

.platform-catalog-addon strong {
  font-size: 15px;
  font-weight: 900;
}

.platform-catalog-addon p {
  margin: 0 !important;
  color: #4f5d6c !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.platform-catalog-addon small {
  color: #7b8795;
  font-size: 9px;
  font-weight: 700;
}

.platform-catalog-copy dt,
.platform-catalog-copy dd {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}

.platform-catalog-copy dt {
  color: #8a97a6;
  font-weight: 800;
}

.platform-catalog-copy dd {
  color: #263548;
  font-weight: 720;
}

.platform-option-rail {
  scroll-margin-top: 88px;
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  min-height: 380px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 4px;
  color: #fff;
  background: var(--platform-deep);
}

.platform-option-rail > figure {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #020813;
}

.platform-option-rail > figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(1.24) translateY(-7%);
  transform-origin: center;
}

.platform-option-rail > div {
  align-self: center;
  padding: clamp(34px, 5vw, 64px);
}

.platform-option-rail h3 {
  margin: 0;
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1;
  font-weight: 880;
}

.platform-option-rail > div > p:not(.platform-product-number) {
  max-width: 620px;
  margin: 18px 0 0;
  color: rgb(255 255 255 / 68%);
  font-size: 15px;
  line-height: 1.72;
}

.platform-option-rail ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 30px 0 0;
  padding: 0;
  border-top: 1px solid rgb(255 255 255 / 18%);
  border-bottom: 1px solid rgb(255 255 255 / 18%);
  list-style: none;
}

.platform-option-rail li {
  padding: 14px 12px;
  border-right: 1px solid rgb(255 255 255 / 18%);
  color: rgb(255 255 255 / 74%);
  font-size: 11px;
  font-weight: 760;
}

.platform-option-rail li:first-child {
  padding-left: 0;
}

.platform-option-rail li:last-child {
  border-right: 0;
}

.platform-product-band {
  scroll-margin-top: 80px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(350px, 0.82fr);
  gap: clamp(48px, 7vw, 94px);
  align-items: center;
  padding: 82px 0;
  border-top: 1px solid var(--platform-line);
}

.platform-product-band.is-dark {
  color: #fff;
  border-color: rgb(255 255 255 / 20%);
  background: var(--platform-deep);
  box-shadow: 0 0 0 100vmax var(--platform-deep);
  clip-path: inset(0 -100vmax);
}

.platform-product-band.is-reverse .platform-product-media {
  order: 2;
}

.platform-product-band.is-reverse .platform-product-copy {
  order: 1;
}

.platform-product-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 3px;
  background: #101822;
}

.platform-product-media > a {
  display: block;
  width: 100%;
  height: 100%;
}

.platform-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease;
}

.platform-product-media:hover img {
  transform: scale(1.018);
}

.platform-product-media.is-product-shot {
  background: #eef1f3;
}

.platform-product-media.is-product-shot img {
  object-fit: contain;
}

.platform-motiontap-media img {
  object-position: center 46%;
}

.platform-product-media figcaption {
  position: absolute;
  z-index: 4;
  right: 10px;
  bottom: 10px;
  padding: 7px 9px;
  border-radius: 2px;
  color: rgb(255 255 255 / 78%);
  background: rgb(3 10 20 / 84%);
  font-size: 11px;
}

.platform-screen-demo > a {
  position: relative;
  z-index: 1;
}

.screen-demo-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.screen-demo-surface {
  position: absolute;
  top: 15%;
  left: 21%;
  width: 68%;
  height: 47%;
}

.screen-demo-target,
.screen-demo-impact {
  position: absolute;
  width: clamp(34px, 5.2vw, 58px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
}

.screen-demo-target {
  border: 2px solid rgb(197 233 255 / 88%);
  background: rgb(17 97 184 / 34%);
  box-shadow:
    0 0 0 7px rgb(37 137 233 / 13%),
    0 0 24px rgb(66 166 255 / 60%);
  transition: opacity 240ms ease, transform 420ms ease, background-color 220ms ease;
}

.screen-demo-target::before,
.screen-demo-target::after {
  position: absolute;
  content: "";
  background: rgb(226 247 255 / 90%);
}

.screen-demo-target::before {
  top: 50%;
  left: 16%;
  right: 16%;
  height: 1px;
}

.screen-demo-target::after {
  top: 16%;
  bottom: 16%;
  left: 50%;
  width: 1px;
}

.screen-demo-target.is-left {
  top: 38%;
  left: 22%;
}

.screen-demo-target.is-right {
  top: 35%;
  left: 82%;
}

.screen-demo-impact {
  top: var(--screen-target-y, 35%);
  left: var(--screen-target-x, 82%);
  border: 2px solid rgb(255 255 255 / 90%);
  box-shadow: 0 0 26px rgb(78 201 255 / 75%);
}

.screen-demo-ball {
  position: absolute;
  top: 68%;
  left: 52%;
  width: clamp(28px, 5vw, 58px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: url("../assets/home-first-strike/football-256.webp") center / contain no-repeat;
  filter: drop-shadow(0 8px 9px rgb(2 8 20 / 46%));
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  transition:
    top 900ms cubic-bezier(.2, .68, .22, 1),
    left 900ms cubic-bezier(.2, .68, .22, 1),
    opacity 120ms ease,
    transform 900ms cubic-bezier(.2, .68, .22, 1);
}

.screen-demo-caption {
  position: absolute;
  z-index: 3;
  left: 14px;
  bottom: 14px;
  width: min(330px, calc(100% - 190px));
  padding: 12px 14px 13px;
  border-left: 3px solid #36a8ff;
  color: #fff;
  background: rgb(3 10 20 / 88%);
  box-shadow: 0 10px 30px rgb(1 8 18 / 24%);
}

.screen-demo-caption small,
.screen-demo-caption strong {
  display: block;
}

.screen-demo-caption small {
  color: #8ed2ff;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 900;
}

.screen-demo-caption strong {
  margin-top: 5px;
  font-size: clamp(14px, 1.45vw, 18px);
  line-height: 1.32;
  font-weight: 850;
}

.platform-screen-demo[data-screen-demo-round="left"] {
  --screen-target-x: 22%;
  --screen-target-y: 38%;
  --screen-ball-x: 36%;
  --screen-ball-y: 33%;
}

.platform-screen-demo[data-screen-demo-round="right"] {
  --screen-target-x: 82%;
  --screen-target-y: 35%;
  --screen-ball-x: 77%;
  --screen-ball-y: 31%;
}

.platform-screen-demo[data-screen-demo-state="mission"][data-screen-demo-round="left"] .screen-demo-target.is-left,
.platform-screen-demo[data-screen-demo-state="mission"][data-screen-demo-round="right"] .screen-demo-target.is-right,
.platform-screen-demo[data-screen-demo-state="execute"][data-screen-demo-round="left"] .screen-demo-target.is-left,
.platform-screen-demo[data-screen-demo-state="execute"][data-screen-demo-round="right"] .screen-demo-target.is-right,
.platform-screen-demo[data-screen-demo-state="result"][data-screen-demo-round="left"] .screen-demo-target.is-left,
.platform-screen-demo[data-screen-demo-state="result"][data-screen-demo-round="right"] .screen-demo-target.is-right {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.platform-screen-demo[data-screen-demo-state="mission"] .screen-demo-target {
  animation: screen-target-breathe 1.25s ease-in-out infinite alternate;
}

.platform-screen-demo[data-screen-demo-state="execute"] .screen-demo-ball,
.platform-screen-demo[data-screen-demo-state="result"] .screen-demo-ball {
  top: var(--screen-ball-y);
  left: var(--screen-ball-x);
  opacity: 1;
  transform: translate(-50%, -50%) rotate(310deg) scale(.68);
}

.platform-screen-demo[data-screen-demo-state="result"] .screen-demo-target {
  border-color: #c8ffdf;
  background: rgb(24 173 95 / 48%);
  box-shadow:
    0 0 0 9px rgb(72 232 142 / 14%),
    0 0 26px rgb(72 232 142 / 65%);
}

.platform-screen-demo[data-screen-demo-state="result"] .screen-demo-impact {
  animation: screen-impact 760ms ease-out both;
}

.platform-screen-demo[data-screen-demo-state="next"] .screen-demo-target {
  opacity: .25;
  transform: translate(-50%, -50%) scale(.82);
}

.platform-screen-demo[data-screen-demo-state="static"] .screen-demo-target.is-right {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.screen-demo-caption.is-entering {
  animation: screen-caption-enter 420ms cubic-bezier(.2, .75, .25, 1) both;
}

@keyframes screen-target-breathe {
  to { transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes screen-impact {
  0% { opacity: .92; transform: translate(-50%, -50%) scale(.35); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.25); }
}

@keyframes screen-caption-enter {
  0% { opacity: .25; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.platform-product-number {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--platform-blue);
  font-size: 11px;
  font-weight: 900;
}

.is-dark .platform-product-number {
  color: var(--platform-blue-soft);
}

.platform-product-number span {
  color: #9aa7b6;
}

.platform-product-copy h3 {
  margin: 0;
  color: inherit;
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1.03;
  font-weight: 880;
}

.platform-product-name {
  margin: 20px 0 0;
  color: var(--platform-blue);
  font-size: 14px;
  font-weight: 900;
}

.is-dark .platform-product-name {
  color: var(--platform-blue-soft);
}

.platform-product-copy > p:not(.platform-product-number, .platform-product-name) {
  margin: 18px 0 0;
  color: var(--platform-muted);
  font-size: 15px;
  line-height: 1.72;
}

.is-dark .platform-product-copy > p:not(.platform-product-number, .platform-product-name) {
  color: rgb(255 255 255 / 62%);
}

.platform-product-copy dl {
  margin: 28px 0 0;
  border-top: 1px solid var(--platform-line);
}

.is-dark .platform-product-copy dl {
  border-color: rgb(255 255 255 / 18%);
}

.platform-product-copy dl > div {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--platform-line);
}

.is-dark .platform-product-copy dl > div {
  border-color: rgb(255 255 255 / 18%);
}

.platform-product-copy dt {
  color: #7a8796;
  font-size: 11px;
  font-weight: 800;
}

.platform-product-copy dd {
  margin: 0;
  font-size: 13px;
  font-weight: 750;
}

.platform-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  color: var(--platform-blue);
  font-size: 14px;
  font-weight: 900;
}

.is-dark .platform-text-link {
  color: #fff;
}

.platform-text-link span {
  transition: transform 180ms ease;
}

.platform-text-link:hover span {
  transform: translateX(4px);
}

.platform-disclosure {
  margin: 0;
  padding: 24px 0 86px;
  border-top: 1px solid var(--platform-line);
  color: #768596;
  font-size: 11px;
  line-height: 1.65;
}

.platform-configurations {
  padding: 100px 0;
  background: var(--platform-paper);
}

.platform-configuration-list {
  border-top: 1px solid #aeb9c5;
}

.platform-configuration-list > article {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  min-height: 126px;
  padding: 20px 0;
  border-bottom: 1px solid #cbd3dc;
}

.platform-configuration-list > article > span {
  color: #96a1ae;
  font-size: 12px;
  font-weight: 900;
}

.platform-configuration-list > article > div {
  display: grid;
  gap: 5px;
}

.platform-configuration-list small {
  color: var(--platform-blue);
  font-size: 11px;
  font-weight: 900;
}

.platform-configuration-list strong {
  font-size: 24px;
  line-height: 1.2;
}

.platform-configuration-list p {
  color: var(--platform-muted);
  font-size: 13px;
}

.platform-configuration-list em {
  min-width: 90px;
  padding: 8px 10px;
  border: 1px solid #bdc7d2;
  border-radius: 3px;
  color: #405064;
  text-align: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.platform-guide-panel {
  scroll-margin-top: 90px;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(42px, 6vw, 78px);
  align-items: start;
  margin-top: 44px;
  padding: clamp(30px, 4vw, 54px);
  color: #fff;
  background: var(--platform-deep);
}

.platform-guide-panel figure {
  display: grid;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 3px;
  background: #0d2038;
  box-shadow: 0 24px 50px rgb(1 8 18 / 32%);
}

.platform-guide-cover {
  overflow: hidden;
  aspect-ratio: 1200 / 812;
}

.platform-guide-panel figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.platform-guide-panel figure figcaption {
  padding: 10px 12px;
  border-top: 1px solid rgb(255 255 255 / 14%);
  color: rgb(255 255 255 / 62%);
  font-size: 10px;
  font-weight: 750;
}

.platform-guide-panel .platform-eyebrow {
  color: var(--platform-blue-soft);
}

.platform-guide-panel h3 {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.06;
  font-weight: 880;
}

.platform-guide-panel > div > p:not(.platform-eyebrow) {
  max-width: 520px;
  margin: 20px 0 0;
  color: rgb(255 255 255 / 66%);
  font-size: 15px;
  line-height: 1.7;
}

.platform-guide-panel ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.platform-guide-panel li {
  padding: 8px 10px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 3px;
  color: rgb(255 255 255 / 78%);
  font-size: 11px;
  font-weight: 760;
}

.platform-guide-panel .btn-dark {
  margin-top: 28px;
  color: var(--platform-deep);
  background: #fff;
}

.platform-adoption {
  scroll-margin-top: 80px;
  padding: 104px 0;
  color: #fff;
  background: var(--platform-deep);
}

.platform-adoption .platform-eyebrow {
  color: var(--platform-blue-soft);
}

.platform-adoption .platform-section-head > p {
  color: rgb(255 255 255 / 62%);
}

.platform-adoption-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgb(255 255 255 / 24%);
  border-bottom: 1px solid rgb(255 255 255 / 24%);
}

.platform-adoption-list article {
  min-width: 0;
  padding: 34px 28px 30px;
  border-right: 1px solid rgb(255 255 255 / 18%);
}

.platform-adoption-list article:last-child {
  border-right: 0;
}

.platform-adoption-list span {
  color: var(--platform-blue-soft);
  font-size: 11px;
  font-weight: 900;
}

.platform-adoption-list h3 {
  margin: 18px 0 8px;
  color: #fff;
  font-size: 28px;
  line-height: 1.1;
}

.platform-adoption-list article > p {
  min-height: 48px;
  margin: 0;
  color: rgb(255 255 255 / 58%);
  font-size: 13px;
  line-height: 1.6;
}

.platform-adoption-list dl {
  margin: 24px 0 0;
}

.platform-adoption-list dl > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgb(255 255 255 / 16%);
}

.platform-adoption-list dt {
  color: rgb(255 255 255 / 42%);
  font-size: 11px;
  font-weight: 800;
}

.platform-adoption-list dd {
  margin: 0;
  color: rgb(255 255 255 / 82%);
  font-size: 12px;
  line-height: 1.55;
}

.platform-adoption-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 28px;
}

.platform-adoption-action p {
  margin: 0;
  color: rgb(255 255 255 / 62%);
  font-size: 14px;
}

.platform-adoption .btn-dark {
  color: var(--platform-deep);
  background: #fff;
}

.platform-operation {
  scroll-margin-top: 80px;
  padding: 108px 0;
  background: #fff;
}

.platform-operation-grid {
  display: grid;
  grid-template-columns: minmax(330px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(56px, 7vw, 96px);
  align-items: center;
}

.platform-operation-copy > p:not(.platform-eyebrow, .platform-product-name) {
  margin-top: 18px;
}

.platform-operation-copy ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 24px 0 0;
  padding: 0;
}

.platform-operation-copy li {
  padding: 8px 10px;
  border: 1px solid var(--platform-line);
  border-radius: 3px;
  color: #425165;
  font-size: 11px;
  font-weight: 750;
}

.platform-software-ui {
  overflow: hidden;
  border: 1px solid #d4dce6;
  border-radius: 5px;
  color: var(--platform-ink);
  background: #fff;
  box-shadow: 0 26px 70px rgb(24 39 61 / 12%);
  font-size: 10px;
}

.platform-software-ui > header {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #e4e9ef;
}

.platform-software-ui > header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.platform-software-ui > header b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: #fff;
  background: var(--platform-deep);
}

.platform-software-ui > header span {
  display: grid;
  gap: 2px;
}

.platform-software-ui > header small,
.platform-software-body section li small {
  color: #7b8794;
}

.platform-software-ui > header em,
.platform-software-body section li em {
  padding: 6px 8px;
  border-radius: 3px;
  color: var(--platform-blue);
  background: #edf2ff;
  font-style: normal;
  font-weight: 800;
}

.platform-software-body {
  min-height: 430px;
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
}

.platform-software-body aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 13px;
  border-right: 1px solid #172b43;
  color: rgb(255 255 255 / 56%);
  background: #081a2e;
}

.platform-software-body aside strong {
  color: #fff;
}

.platform-software-members {
  display: grid;
  gap: 3px;
  margin-top: auto;
}

.platform-software-members small {
  color: rgb(255 255 255 / 38%);
}

.platform-software-members b {
  color: #fff;
  font-size: 18px;
}

.platform-software-members em {
  margin-left: 2px;
  font-size: 9px;
  font-style: normal;
}

.platform-software-main {
  min-width: 0;
  padding: 14px;
  background: #f7f9fc;
}

.platform-software-top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #dfe5ec;
  background: #fff;
}

.platform-software-top > span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px;
  border-right: 1px solid #e2e7ed;
}

.platform-software-top > span:last-child {
  border-right: 0;
}

.platform-software-top small {
  color: #7b8794;
}

.platform-software-top strong {
  overflow: hidden;
  font-size: clamp(15px, 1.5vw, 21px);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.platform-software-top em {
  margin-left: 2px;
  font-size: 11px;
  font-style: normal;
}

.platform-software-top b {
  color: #788594;
  font-size: 8px;
  font-weight: 650;
}

.platform-software-top .is-alert strong {
  color: #d85b19;
}

.platform-software-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 10px;
  margin-top: 10px;
}

.platform-software-schedule,
.platform-software-rail > section {
  border: 1px solid #dfe5ec;
  background: #fff;
}

.platform-software-schedule > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px;
  border-bottom: 1px solid #e4e9ef;
}

.platform-software-schedule > header > div {
  display: grid;
  gap: 2px;
}

.platform-software-schedule > header small,
.platform-software-schedule > header span {
  color: #788594;
}

.platform-software-schedule > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.platform-software-schedule article {
  min-width: 0;
  min-height: 245px;
  padding: 8px;
  border-right: 1px solid #e4e9ef;
}

.platform-software-schedule article:last-child {
  border-right: 0;
}

.platform-software-schedule article > header {
  display: flex;
  justify-content: space-between;
  color: #637183;
}

.platform-software-schedule article.is-today > header {
  color: var(--platform-blue);
}

.platform-software-schedule article p {
  display: grid;
  gap: 3px;
  margin: 8px 0 0;
  padding: 8px 6px;
  border-left: 2px solid #2a74e5;
  background: #f0f5ff;
}

.platform-software-schedule article.is-today p {
  border-color: #34a06d;
  background: #eff9f4;
}

.platform-software-schedule time,
.platform-software-schedule article p small {
  color: #6f7c8a;
  font-size: 8px;
}

.platform-software-schedule article p strong {
  overflow: hidden;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.platform-software-rail {
  display: grid;
  gap: 10px;
  align-content: start;
}

.platform-software-rail > section {
  padding: 11px;
}

.platform-software-rail section > header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 9px;
}

.platform-software-rail section > header small {
  color: #788594;
}

.platform-software-rail section > b {
  font-size: 17px;
}

.platform-software-rail ol {
  display: flex;
  height: 55px;
  align-items: end;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  border-bottom: 1px solid #dce3eb;
  list-style: none;
}

.platform-software-rail ol li {
  flex: 1;
  height: var(--value);
  min-height: 5px;
  background: #2976e8;
}

.platform-software-rail section > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.platform-software-rail section > div span {
  display: grid;
  gap: 4px;
  padding: 7px 3px;
  border-right: 1px solid #e4e9ef;
  text-align: center;
}

.platform-software-rail section > div span:last-child {
  border-right: 0;
}

.platform-software-rail section > div small {
  color: #788594;
}

.platform-software-ui > p {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid #e4e9ef;
  color: #7b8794;
  font-size: 11px;
}

.platform-final {
  padding: 96px 0;
  color: #fff;
  background: var(--platform-deep);
}

.platform-final .platform-eyebrow {
  color: var(--platform-blue-soft);
}

.platform-final-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 76px;
  align-items: center;
}

.platform-final-grid > div > p:last-child {
  margin-top: 18px;
  color: rgb(255 255 255 / 60%);
}

.platform-final-paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid rgb(255 255 255 / 22%);
}

.platform-final-paths a {
  position: relative;
  min-height: 190px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 26px;
  border-right: 1px solid rgb(255 255 255 / 20%);
  border-bottom: 1px solid rgb(255 255 255 / 20%);
  color: #fff;
}

.platform-final-paths a:nth-child(2) {
  border-right: 0;
}

.platform-final-paths a:hover,
.platform-final-paths a:focus-visible {
  background: rgb(255 255 255 / 7%);
}

.platform-final-paths span {
  color: var(--platform-blue-soft);
  font-size: 11px;
  font-weight: 900;
}

.platform-final-paths strong {
  font-size: 18px;
}

.platform-final-paths small {
  max-width: 230px;
  color: rgb(255 255 255 / 58%);
  line-height: 1.5;
}

.platform-final-paths b {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 18px;
}

@media (max-width: 900px) {
  .platform-vnext .shell {
    width: min(100% - 36px, 720px);
  }

  .platform-hero-shade {
    background:
      linear-gradient(0deg, rgb(3 10 20 / 97%) 0%, rgb(3 10 20 / 72%) 72%, rgb(3 10 20 / 36%) 100%),
      linear-gradient(90deg, rgb(3 10 20 / 76%), transparent 84%);
  }

  .platform-section-head,
  .platform-operation-grid,
  .platform-final-grid,
  .platform-guide-panel {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .platform-guide-panel figure {
    width: min(560px, 100%);
    justify-self: center;
  }

  .platform-guide-panel > div {
    width: min(560px, 100%);
    justify-self: center;
  }

  .platform-product-catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-catalog-card:nth-child(3) {
    grid-column: 1 / -1;
  }

  .platform-option-rail {
    grid-template-columns: minmax(240px, 0.82fr) minmax(0, 1.18fr);
  }

  .platform-product-band {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .platform-product-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-product-map a:nth-child(n + 3) {
    border-top: 1px solid #cfd7df;
  }

  .platform-hardware-heading {
    grid-template-columns: 1fr 1fr;
  }

  .platform-hardware-heading span {
    grid-column: 1 / -1;
  }

  .platform-adoption-list {
    grid-template-columns: 1fr;
  }

  .platform-adoption-list article {
    border-right: 0;
    border-bottom: 1px solid rgb(255 255 255 / 18%);
  }

  .platform-adoption-list article:last-child {
    border-bottom: 0;
  }

  .platform-product-band.is-reverse .platform-product-media,
  .platform-product-band.is-reverse .platform-product-copy {
    order: initial;
  }
}

@media (max-width: 600px) {
  .platform-vnext .shell {
    width: calc(100% - 32px);
  }

  .platform-hero {
    height: calc(100svh - 112px);
    min-height: 660px;
    max-height: 760px;
  }

  .platform-hero-media img {
    object-position: 39% center;
  }

  .platform-hero-inner {
    padding-block: 46px 16px;
  }

  .platform-hero h1 {
    font-size: 46px;
    line-height: 1;
  }

  .platform-hero-lead {
    max-width: 350px;
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.62;
  }

  .platform-actions {
    width: 100%;
    margin-top: 20px;
  }

  .platform-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .platform-product-jump {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-product-jump a {
    min-height: 70px;
    padding: 10px;
    border-bottom: 1px solid rgb(255 255 255 / 18%);
  }

  .platform-product-jump a:nth-child(2) {
    border-right: 0;
  }

  .platform-product-jump strong {
    font-size: 14px;
  }

  .platform-product-jump small {
    display: none;
  }

  .platform-products {
    padding-top: 72px;
  }

  .platform-product-map {
    grid-template-columns: 1fr;
    margin-bottom: 64px;
  }

  .platform-product-catalog {
    grid-template-columns: 1fr;
  }

  .platform-catalog-card:nth-child(3) {
    grid-column: auto;
  }

  .platform-catalog-media {
    aspect-ratio: 16 / 10;
  }

  .platform-catalog-copy {
    padding: 23px 20px 25px;
  }

  .platform-catalog-copy > p:not(.platform-product-number) {
    min-height: 0;
  }

  .platform-option-rail {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .platform-option-rail > figure {
    aspect-ratio: 16 / 11;
  }

  .platform-option-rail > figure img {
    transform: scale(1.34) translateY(-8%);
  }

  .platform-option-rail > div {
    padding: 30px 22px 34px;
  }

  .platform-option-rail ul {
    grid-template-columns: 1fr;
  }

  .platform-option-rail li,
  .platform-option-rail li:first-child {
    padding: 11px 0;
    border-right: 0;
    border-bottom: 1px solid rgb(255 255 255 / 14%);
  }

  .platform-option-rail li:last-child {
    border-bottom: 0;
  }

  .platform-product-map a {
    min-height: 0;
    padding: 22px 20px;
    border-right: 1px solid #cfd7df;
    border-bottom: 1px solid #cfd7df;
  }

  .platform-product-map strong {
    margin-top: 16px;
    font-size: 22px;
  }

  .platform-product-map p {
    margin-bottom: 16px;
  }

  .platform-hardware-heading {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .platform-hardware-heading span {
    grid-column: auto;
  }

  .platform-section-head {
    margin-bottom: 32px;
  }

  .platform-section-head h2,
  .platform-operation h2,
  .platform-final h2 {
    font-size: 36px;
    line-height: 1.08;
  }

  .platform-section-head > p,
  .platform-operation-copy > p:not(.platform-eyebrow, .platform-product-name),
  .platform-final-grid > div > p:last-child {
    font-size: 14px;
  }

  .platform-product-band {
    padding: 54px 0;
  }

  .platform-product-media {
    aspect-ratio: 4 / 3;
  }

  .screen-demo-surface {
    top: 19%;
    left: 16%;
    width: 76%;
    height: 42%;
  }

  .screen-demo-caption {
    left: 10px;
    bottom: 10px;
    width: calc(100% - 20px);
    padding: 10px 11px 11px;
  }

  .screen-demo-caption strong {
    max-width: none;
    font-size: 14px;
  }

  .platform-screen-demo figcaption {
    top: 10px;
    right: 10px;
    bottom: auto;
    padding: 5px 7px;
    color: rgb(255 255 255 / 72%);
    background: rgb(3 10 20 / 74%);
    font-size: 9px;
  }

  .screen-demo-ball {
    top: 67%;
    width: 36px;
  }

  .platform-product-copy h3 {
    font-size: 36px;
  }

  .platform-product-copy > p:not(.platform-product-number, .platform-product-name) {
    font-size: 14px;
  }

  .platform-product-copy dl > div {
    grid-template-columns: 104px 1fr;
  }

  .platform-disclosure {
    padding-bottom: 64px;
  }

  .platform-configurations,
  .platform-operation,
  .platform-adoption {
    padding: 72px 0;
  }

  .platform-adoption-list article {
    padding: 28px 0;
  }

  .platform-adoption-list article > p {
    min-height: 0;
  }

  .platform-adoption-action {
    align-items: stretch;
    flex-direction: column;
  }

  .platform-adoption-action .btn {
    width: 100%;
    justify-content: center;
  }

  .platform-configuration-list > article {
    grid-template-columns: 32px 1fr;
    gap: 12px;
    min-height: 132px;
  }

  .platform-configuration-list strong {
    font-size: 19px;
  }

  .platform-configuration-list em {
    grid-column: 2;
    width: max-content;
    min-width: 0;
  }

  .platform-guide-panel {
    margin-top: 48px;
    padding: 22px;
  }

  .platform-guide-panel h3 {
    font-size: 32px;
  }

  .platform-guide-panel > div > p:not(.platform-eyebrow) {
    font-size: 14px;
  }

  .platform-guide-panel .btn {
    width: 100%;
    justify-content: center;
  }

  .platform-software-body {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .platform-software-body aside {
    display: none;
  }

  .platform-software-main {
    padding: 14px;
  }

  .platform-software-top {
    grid-template-columns: 1fr 1fr;
  }

  .platform-software-top > span {
    border-right: 1px solid #e2e7ed;
    border-bottom: 1px solid #e2e7ed;
  }

  .platform-software-top > span:nth-child(2n) {
    border-right: 0;
  }

  .platform-software-top > span:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .platform-software-grid {
    grid-template-columns: 1fr;
  }

  .platform-software-schedule > div {
    grid-template-columns: 1fr 1fr;
  }

  .platform-software-schedule article:first-child {
    display: none;
  }

  .platform-software-rail {
    grid-template-columns: 1fr 1fr;
  }

  .platform-final {
    padding: 72px 0;
  }

  .platform-final-paths {
    grid-template-columns: 1fr;
  }

  .platform-final-paths a {
    min-height: 142px;
    padding: 22px 0;
    border-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen-demo-target,
  .screen-demo-ball,
  .screen-demo-caption {
    animation: none !important;
    transition: none !important;
  }
}

/* Actual SCREEN content reel. Source footage is captured from FootballZon game builds. */
.screen-hero-reel {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  opacity: 0;
  object-fit: cover;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.screen-hero-reel img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.platform-screen-hero[data-screen-hero-mode="preschool"] .screen-hero-reel.is-game,
.platform-screen-hero[data-screen-hero-mode="elementary"] .screen-hero-reel.is-elementary-premium,
.platform-screen-hero[data-screen-hero-mode="adult"] .screen-hero-reel.is-adult {
  opacity: 1;
}

.screen-hero-reel.is-elementary-premium {
  overflow: hidden;
  background: #07111f;
}

.screen-hero-reel.is-elementary-premium > img {
  transform: scale(1.015);
  filter: saturate(.92) contrast(1.05) brightness(.82);
}

.elementary-game-ui {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgb(2 9 22 / 34%), transparent 32%),
    radial-gradient(circle at 50% 55%, transparent 0 34%, rgb(1 7 18 / 22%) 82%);
}

.elementary-game-score {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 13px;
  padding: 9px 12px;
  color: #fff;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 3px;
  background: rgb(2 10 24 / 76%);
  box-shadow: 0 10px 28px rgb(0 0 0 / 24%);
  backdrop-filter: blur(10px);
}

.elementary-game-score span {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 6px;
}

.elementary-game-score small,
.elementary-game-score b {
  color: rgb(207 226 255 / 66%);
  font-size: 7px;
  font-weight: 900;
}

.elementary-game-score strong {
  font-size: 17px;
  line-height: 1;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.elementary-game-score b {
  padding-inline: 10px;
  border-inline: 1px solid rgb(255 255 255 / 14%);
}

.elementary-shot-zones {
  position: absolute;
  top: 40%;
  left: 24%;
  width: 52%;
  height: 28%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.elementary-shot-zones i {
  border: 1px solid rgb(154 202 255 / 18%);
  background: rgb(49 111 190 / 5%);
}

.elementary-shot-zones i.is-target {
  border-color: rgb(83 173 255 / 78%);
  background: rgb(51 145 255 / 12%);
  box-shadow: inset 0 0 24px rgb(43 144 255 / 14%), 0 0 18px rgb(70 164 255 / 24%);
}

.elementary-shot-guide {
  position: absolute;
  right: 8%;
  top: 31%;
  padding: 7px 10px;
  color: #dcecff;
  border-left: 2px solid #4fa5ff;
  background: rgb(3 13 30 / 72%);
  font-size: 9px;
  font-weight: 850;
}

.elementary-shot-ball,
.elementary-shot-trail,
.elementary-shot-impact,
.elementary-goal-result {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.elementary-shot-ball {
  z-index: 5;
  top: 104%;
  left: 34%;
  width: clamp(28px, 4vw, 52px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: url("../assets/home-first-strike/football-256.webp") center / contain no-repeat;
  filter: drop-shadow(0 9px 8px rgb(0 0 0 / 48%));
  transform: translate(-50%, -50%) scale(1.12);
}

.elementary-shot-trail {
  z-index: 4;
  top: 104%;
  left: 34%;
  width: 50%;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(173 223 255 / 70%), #fff);
  box-shadow: 0 0 18px rgb(72 170 255 / 64%);
  transform: rotate(-40deg) scaleX(.04);
  transform-origin: left center;
}

.elementary-shot-impact {
  z-index: 4;
  top: 45%;
  left: 69%;
  width: clamp(64px, 8vw, 104px);
  aspect-ratio: 1;
  border: 2px solid rgb(157 218 255 / 94%);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgb(69 162 255 / 14%), 0 0 42px rgb(69 162 255 / 72%);
  transform: translate(-50%, -50%) scale(.2);
}

.elementary-goal-result {
  z-index: 6;
  top: 56%;
  left: 50%;
  display: grid;
  justify-items: center;
  color: #fff;
  text-shadow: 0 4px 20px rgb(0 0 0 / 66%), 0 0 32px rgb(60 162 255 / 72%);
  transform: translate(-50%, -50%) scale(.74);
}

.elementary-goal-result small {
  color: #83c8ff;
  font-size: 8px;
  font-weight: 950;
}

.elementary-goal-result strong {
  font-size: clamp(34px, 5.8vw, 66px);
  line-height: .95;
  font-weight: 950;
}

.is-elementary-premium.is-running .elementary-shot-zones i.is-target {
  animation: elementary-target-pulse 4.8s ease-in-out infinite;
}

.is-elementary-premium.is-running .elementary-shot-ball {
  animation: elementary-ball-flight 4.8s cubic-bezier(.2, .68, .18, 1) infinite;
}

.is-elementary-premium.is-running .elementary-shot-trail {
  animation: elementary-ball-trail 4.8s ease-out infinite;
}

.is-elementary-premium.is-running .elementary-shot-impact {
  animation: elementary-impact 4.8s ease-out infinite;
}

.is-elementary-premium.is-running .elementary-goal-result {
  animation: elementary-result 4.8s cubic-bezier(.16, .78, .2, 1) infinite;
}

@keyframes elementary-target-pulse {
  0%, 12%, 88%, 100% { opacity: .45; }
  18%, 42% { opacity: 1; border-color: rgb(114 194 255 / 100%); box-shadow: inset 0 0 28px rgb(43 144 255 / 22%), 0 0 30px rgb(70 164 255 / 42%); }
}

@keyframes elementary-ball-flight {
  0%, 27% { top: 104%; left: 34%; opacity: 0; transform: translate(-50%, -50%) scale(1.18) rotate(0deg); }
  31% { opacity: 1; }
  49% { top: 45%; left: 69%; opacity: 1; transform: translate(-50%, -50%) scale(.48) rotate(330deg); }
  54%, 100% { top: 45%; left: 69%; opacity: 0; transform: translate(-50%, -50%) scale(.42) rotate(360deg); }
}

@keyframes elementary-ball-trail {
  0%, 27% { opacity: 0; transform: rotate(-40deg) scaleX(.04); }
  32% { opacity: .9; }
  49% { opacity: .76; transform: rotate(-40deg) scaleX(1); }
  56%, 100% { opacity: 0; transform: rotate(-40deg) scaleX(1); }
}

@keyframes elementary-impact {
  0%, 47% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  51% { opacity: .95; }
  63%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}

@keyframes elementary-result {
  0%, 49% { opacity: 0; transform: translate(-50%, -50%) scale(.74); }
  56%, 76% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  84%, 100% { opacity: 0; transform: translate(-50%, -55%) scale(1.04); }
}

/* Elementary SCREEN: scan, third-player run, and pass through the line. */
.is-elementary-premium > img {
  filter: saturate(.9) contrast(1.08) brightness(.72);
}

.elementary-pass-scene {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgb(1 8 21 / 30%), transparent 38%),
    linear-gradient(90deg, rgb(2 8 20 / 18%), transparent 20% 80%, rgb(2 8 20 / 20%));
}

.is-elementary-premium .elementary-pass-player,
.is-elementary-premium .elementary-pass-defender {
  position: absolute;
  z-index: 4;
  display: block;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  will-change: top, left, transform, opacity;
}

.is-elementary-premium .elementary-pass-defender {
  top: 49%;
  width: clamp(62px, 13.5%, 132px);
  opacity: .88;
  filter: saturate(.72) contrast(1.08) drop-shadow(0 14px 16px rgb(0 0 0 / 36%));
  transform: translate(-50%, -50%) scale(.82);
}

.elementary-pass-defender.is-left { left: 29%; }
.elementary-pass-defender.is-center { left: 50%; }
.elementary-pass-defender.is-right { left: 71%; }

.is-elementary-premium .elementary-pass-player {
  width: clamp(66px, 14%, 142px);
  opacity: .96;
  filter: saturate(.96) contrast(1.06) drop-shadow(0 15px 18px rgb(0 0 0 / 38%));
  transform: translate(-50%, -50%) scale(.78);
}

.elementary-pass-player.is-check {
  z-index: 5;
  top: 64%;
  left: 42%;
  transform: translate(-50%, -50%) scale(.94);
}

.elementary-pass-player.is-runner {
  top: 38%;
  left: 69%;
  transform: translate(-50%, -50%) scale(.64);
}

.elementary-pass-player.is-support {
  top: 46%;
  left: 82%;
  transform: translate(-50%, -50%) scale(.5);
  opacity: .72;
}

.elementary-defensive-line,
.elementary-pass-ball {
  position: absolute;
  z-index: 3;
  display: block;
  pointer-events: none;
}

.elementary-defensive-line {
  top: 56%;
  left: 20%;
  width: 61%;
  height: 1px;
  opacity: .34;
  background: linear-gradient(90deg, transparent, rgb(179 211 238 / 76%) 12% 88%, transparent);
  box-shadow: 0 0 12px rgb(87 180 255 / 22%);
}

.elementary-pass-ball {
  z-index: 9;
  top: 79%;
  left: 43%;
  width: clamp(20px, 3.2vw, 38px);
  aspect-ratio: 1;
  opacity: .9;
  border-radius: 50%;
  background: url("../assets/home-first-strike/football-256.webp") center / contain no-repeat;
  filter: drop-shadow(0 8px 7px rgb(0 0 0 / 48%));
  transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}

.elementary-pass-phases {
  position: absolute;
  z-index: 10;
  top: 16px;
  left: 18px;
  display: flex;
  gap: 7px;
}

.elementary-pass-phases span {
  min-width: 48px;
  padding: 6px 8px;
  color: rgb(223 238 255 / 44%);
  border-top: 2px solid rgb(166 211 255 / 20%);
  background: rgb(2 10 24 / 42%);
  font-size: 7px;
  font-weight: 950;
  text-align: center;
  transition: color 180ms ease;
}

.is-elementary-premium.is-running .elementary-pass-player.is-check {
  animation: elementary-check-run 6.8s cubic-bezier(.32, .04, .18, 1) infinite;
}

.is-elementary-premium.is-running .elementary-pass-player.is-runner {
  animation: elementary-blindside-run 6.8s cubic-bezier(.24, .06, .2, 1) infinite;
}

.is-elementary-premium.is-running .elementary-pass-player.is-support {
  animation: elementary-support-run 6.8s ease-in-out infinite;
}

.is-elementary-premium.is-running .elementary-pass-defender.is-center {
  animation: elementary-defender-step 6.8s cubic-bezier(.32, .04, .18, 1) infinite;
}

.is-elementary-premium.is-running .elementary-pass-ball {
  animation: elementary-through-ball 6.8s cubic-bezier(.24, .7, .18, 1) infinite;
}

.is-elementary-premium.is-running .elementary-pass-phases span:nth-child(1) { animation: elementary-phase-scan 6.8s ease infinite; }
.is-elementary-premium.is-running .elementary-pass-phases span:nth-child(2) { animation: elementary-phase-run 6.8s ease infinite; }
.is-elementary-premium.is-running .elementary-pass-phases span:nth-child(3) { animation: elementary-phase-pass 6.8s ease infinite; }

@keyframes elementary-check-run {
  0%, 12% { top: 55%; left: 34%; opacity: .62; transform: translate(-50%, -50%) scale(.72); }
  34%, 84% { top: 64%; left: 42%; opacity: .98; transform: translate(-50%, -50%) scale(.94); }
  94%, 100% { top: 64%; left: 42%; opacity: 0; transform: translate(-50%, -50%) scale(.94); }
}

@keyframes elementary-blindside-run {
  0%, 18% { top: 53%; left: 49%; opacity: .44; transform: translate(-50%, -50%) scale(.76); }
  51%, 86% { top: 38%; left: 69%; opacity: .98; transform: translate(-50%, -50%) scale(.64); }
  95%, 100% { top: 38%; left: 69%; opacity: 0; transform: translate(-50%, -50%) scale(.64); }
}

@keyframes elementary-support-run {
  0%, 26% { top: 51%; left: 78%; opacity: .36; transform: translate(-50%, -50%) scale(.46); }
  54%, 88% { top: 46%; left: 82%; opacity: .72; transform: translate(-50%, -50%) scale(.5); }
  96%, 100% { opacity: 0; }
}

@keyframes elementary-defender-step {
  0%, 15% { top: 49%; left: 50%; transform: translate(-50%, -50%) scale(.82); }
  36%, 86% { top: 57%; left: 52%; transform: translate(-50%, -50%) scale(.94); }
  96%, 100% { opacity: 0; }
}

@keyframes elementary-through-ball {
  0%, 55% { top: 79%; left: 43%; opacity: 0; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); }
  58% { opacity: 1; }
  75% { top: 38%; left: 76%; opacity: 1; transform: translate(-50%, -50%) scale(.62) rotate(300deg); }
  82%, 100% { top: 38%; left: 76%; opacity: 0; transform: translate(-50%, -50%) scale(.56) rotate(340deg); }
}

@keyframes elementary-phase-scan {
  0%, 26% { color: #fff; border-top-color: #35cfff; background: rgb(3 24 43 / 78%); }
  34%, 100% { color: rgb(223 238 255 / 40%); border-top-color: rgb(166 211 255 / 18%); background: rgb(2 10 24 / 42%); }
}

@keyframes elementary-phase-run {
  0%, 22%, 54%, 100% { color: rgb(223 238 255 / 40%); border-top-color: rgb(166 211 255 / 18%); background: rgb(2 10 24 / 42%); }
  30%, 48% { color: #fff; border-top-color: #35cfff; background: rgb(3 24 43 / 78%); }
}

@keyframes elementary-phase-pass {
  0%, 48%, 86%, 100% { color: rgb(223 238 255 / 40%); border-top-color: rgb(166 211 255 / 18%); background: rgb(2 10 24 / 42%); }
  58%, 80% { color: #fff; border-top-color: #35cfff; background: rgb(3 24 43 / 78%); }
}

.platform-screen-hero[data-screen-hero-mode="preschool"] {
  --screen-game-accent: 110 205 101;
}

.platform-screen-hero[data-screen-hero-mode="elementary"] {
  --screen-game-accent: 79 165 255;
}

.platform-screen-hero[data-screen-hero-mode="adult"] {
  --screen-game-accent: 80 166 255;
}

.screen-game-scrim {
  z-index: 3;
  background: linear-gradient(180deg, rgb(2 8 18 / 9%) 0%, transparent 48%, rgb(2 8 18 / 68%) 100%);
  backdrop-filter: none;
}

.screen-game-identity {
  position: absolute;
  z-index: 8;
  top: 58px;
  left: 18px;
  max-width: min(330px, calc(100% - 36px));
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  color: #fff;
  background: rgb(2 10 22 / 78%);
  box-shadow: 0 12px 28px rgb(0 0 0 / 22%);
  backdrop-filter: blur(10px);
}

.screen-game-identity span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgb(var(--screen-game-accent) / 100%);
  font-size: 8px;
  font-weight: 900;
}

.screen-game-identity span i {
  width: 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.screen-game-identity strong {
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.1;
}

.screen-game-identity small {
  color: rgb(255 255 255 / 72%);
  font-size: 11px;
  line-height: 1.45;
}

.screen-hero-prompt {
  z-index: 9;
  border-left-color: rgb(var(--screen-game-accent) / 100%);
}

.screen-hero-prompt small {
  color: rgb(var(--screen-game-accent) / 100%);
}

.screen-hero-modes {
  z-index: 11;
}

.screen-hero-modes button {
  min-width: 84px;
  font-size: 10px;
}

.platform-vnext .btn-kakao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #fee500;
  color: #171717;
  background: #fee500;
}

.platform-vnext .btn-kakao:hover,
.platform-vnext .btn-kakao:focus-visible {
  border-color: #f4dc00;
  color: #171717;
  background: #f4dc00;
}

.platform-vnext .btn-kakao img {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px;
  flex: 0 0 auto;
  object-fit: contain;
}

.platform-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.platform-guide-panel .platform-guide-actions .btn {
  margin-top: 0;
}

@media (max-width: 600px) {
  .screen-game-identity {
    display: none;
  }

  .screen-hero-modes {
    top: 32px;
    width: 100%;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .screen-hero-modes button {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: 5px;
    font-size: 9px;
  }

  .screen-hero-prompt {
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    padding: 9px 10px 10px;
  }

  .screen-hero-prompt small {
    font-size: 8px;
  }

  .screen-hero-prompt strong {
    font-size: 11px;
  }

  .platform-guide-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .platform-guide-actions .btn-kakao {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  .screen-hero-reel {
    transition: none;
  }
}

@media (max-width: 600px) {
  .platform-product-jump {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .platform-product-jump a:nth-child(2) {
    border-right: 1px solid rgb(255 255 255 / 18%);
  }

  .platform-catalog-addon {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 11px;
  }

  .platform-catalog-addon figure {
    width: 72px;
  }

  .platform-catalog-addon strong {
    font-size: 14px;
  }

  .platform-catalog-addon p {
    font-size: 10px !important;
  }
}

@media (max-width: 360px) {
  .platform-hero h1 {
    font-size: 41px;
  }

  .platform-product-jump strong {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-vnext *,
  .platform-vnext *::before,
  .platform-vnext *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (max-width: 900px) {
  .platform-screen-hero {
    height: 920px;
    min-height: 920px;
  }

  .screen-hero-rig {
    top: 32px;
    right: auto;
    left: 50%;
    width: min(720px, calc(100% - 36px));
    transform: translateX(-50%);
  }

  .screen-hero-frame {
    transform: none;
  }

  .platform-screen-hero .platform-hero-inner {
    padding-top: 474px;
  }

  .platform-screen-hero .platform-hero-copy {
    max-width: 620px;
  }

  .platform-screen-hero .platform-hero-lead {
    max-width: 620px;
  }

  .platform-screen-hero .platform-hero-copy h1 {
    font-size: 52px;
  }
}

@media (max-width: 600px) {
  .platform-screen-hero {
    height: 780px;
    min-height: 780px;
    max-height: none;
  }

  .platform-screen-hero .platform-hero-media {
    opacity: .18;
  }

  .platform-screen-hero .platform-hero-shade {
    background:
      linear-gradient(0deg, rgb(3 10 20 / 99%) 0%, rgb(3 10 20 / 92%) 61%, rgb(3 10 20 / 52%) 100%);
  }

  .screen-hero-rig {
    top: 22px;
    width: calc(100% - 32px);
  }

  .screen-hero-frame {
    box-shadow: 0 22px 50px rgb(0 0 0 / 48%), 0 0 0 5px rgb(8 22 42 / 74%);
  }

  .screen-hero-topbar {
    height: 32px;
    padding: 0 10px;
    font-size: 8px;
  }

  .screen-hero-topbar b {
    font-size: 8px;
  }

  .screen-hero-topbar > span,
  .screen-hero-topbar > b {
    visibility: hidden;
  }

  .kids-target {
    width: clamp(48px, 15vw, 62px);
    border-width: 2px;
  }

  .kids-target b {
    bottom: -20px;
    font-size: 7px;
  }

  .adult-gate {
    width: clamp(42px, 13vw, 54px);
    height: clamp(52px, 16vw, 68px);
    border-width: 2px;
  }

  .adult-gate b {
    font-size: 16px;
  }

  .screen-hero-ball {
    width: 35px;
  }

  .screen-hero-impact {
    width: 46px;
  }

  .screen-hero-prompt {
    right: 9px;
    bottom: 7px;
    width: min(170px, calc(100% - 18px));
    padding: 8px 9px 9px;
  }

  .screen-hero-prompt small {
    font-size: 7px;
  }

  .screen-hero-prompt strong {
    margin-top: 3px;
    font-size: 10px;
  }

  .screen-hero-modes {
    top: 1px;
    left: 50%;
  }

  .screen-hero-modes button {
    min-height: 44px;
    padding-inline: 8px;
    font-size: 9px;
  }

  .screen-hero-floor {
    height: 48px;
  }

  .platform-screen-hero .platform-hero-inner {
    padding-top: 292px;
    padding-bottom: 14px;
  }

  .platform-screen-hero .platform-hero-copy h1 {
    font-size: 34px;
    line-height: 1.05;
  }

  .platform-screen-hero .platform-hero-lead {
    max-width: 100%;
    font-size: 13px;
    line-height: 1.58;
  }
}

@media (max-width: 360px) {
  .platform-screen-hero .platform-hero-copy h1 {
    font-size: 31px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen-hero-scene,
  .screen-hero-ball,
  .screen-hero-flight-trail,
  .screen-hero-flare,
  .adult-route,
  .kids-target,
  .adult-gate,
  .screen-hero-impact,
  .screen-hero-prompt {
    animation: none !important;
    transition: none !important;
  }
}

.platform-mobile-cta {
  display: none;
}

@media (max-width: 720px) {
  body.platform-vnext {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .platform-guide-panel {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  body.page-cta-ready .platform-mobile-cta {
    position: fixed;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    z-index: 72;
    display: block;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    background: rgba(4, 15, 31, 0.94);
    box-shadow: 0 12px 34px rgba(4, 15, 31, 0.28);
    backdrop-filter: blur(14px);
  }

  .platform-mobile-cta a {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #1756ff;
    color: #fff;
    font-size: 15px;
    font-weight: 850;
    text-decoration: none;
  }

  body.lead-modal-lock .platform-mobile-cta {
    display: none;
  }
}

/* Resilient SCREEN hero motion: every mode keeps a readable animated state without relying on video playback. */
.preschool-reaction-layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}

.platform-screen-hero[data-screen-hero-mode="preschool"] .preschool-reaction-layer {
  opacity: 1;
}

.preschool-target {
  position: absolute;
  width: clamp(38px, 5.2vw, 68px);
  aspect-ratio: 1;
  border: 2px solid rgb(255 255 255 / 66%);
  border-radius: 50%;
  opacity: .38;
  box-shadow: 0 0 0 0 rgb(178 241 255 / 0%);
  transform: translate(-50%, -50%) scale(.82);
}

.preschool-target::before,
.preschool-target::after {
  position: absolute;
  inset: 50% auto auto 50%;
  content: "";
  background: rgb(255 255 255 / 72%);
  transform: translate(-50%, -50%);
}

.preschool-target::before { width: 34%; height: 1px; }
.preschool-target::after { width: 1px; height: 34%; }
.preschool-target.is-one { left: 17%; top: 56%; }
.preschool-target.is-two { left: 35%; top: 55%; }
.preschool-target.is-three { left: 52%; top: 56%; }
.preschool-target.is-four { left: 69%; top: 55%; }
.preschool-target.is-five { left: 87%; top: 57%; }

.preschool-target.is-hit {
  animation: preschool-target-confirm 1050ms cubic-bezier(.18, .78, .2, 1) both;
}

.preschool-reaction-badge {
  position: absolute;
  top: 58px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  text-shadow: 0 2px 10px rgb(0 0 0 / 72%);
}

.preschool-reaction-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b9e874;
  box-shadow: 0 0 12px rgb(185 232 116 / 80%);
  animation: preschool-live-pulse 1.2s ease-in-out infinite alternate;
}

.elementary-scan-ring {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 68%;
  width: clamp(74px, 11vw, 136px);
  aspect-ratio: 1;
  border: 1px solid rgb(112 188 255 / 68%);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.35);
}

.elementary-choice {
  position: absolute;
  z-index: 5;
  top: 46%;
  width: clamp(42px, 6vw, 76px);
  aspect-ratio: 1.32;
  border: 1px solid rgb(124 191 255 / 44%);
  opacity: .18;
  transform: translate(-50%, -50%) scale(.92);
}

.elementary-choice.is-left { left: 30%; }
.elementary-choice.is-center { left: 50%; }
.elementary-choice.is-right { left: 70%; }

.platform-screen-hero[data-screen-hero-mode="elementary"] .elementary-scan-ring {
  animation: elementary-scan-pulse 7.2s ease-out infinite;
}

.platform-screen-hero[data-screen-hero-mode="elementary"] .elementary-choice {
  animation: elementary-choice-read 7.2s ease-in-out infinite;
}

.platform-screen-hero[data-screen-hero-mode="elementary"] .elementary-choice.is-center { animation-delay: 120ms; }
.platform-screen-hero[data-screen-hero-mode="elementary"] .elementary-choice.is-right { animation-delay: 240ms; }

.platform-screen-hero[data-screen-hero-mode="elementary"] .is-elementary-premium > img {
  animation: elementary-match-camera 7.2s ease-in-out infinite;
}

.platform-screen-hero[data-screen-hero-mode="elementary"] .elementary-match-ball {
  animation: elementary-match-pass 7.2s cubic-bezier(.2, .7, .18, 1) infinite;
}

.platform-screen-hero[data-screen-hero-mode="elementary"] .elementary-match-impact {
  animation: elementary-match-impact 7.2s ease-out infinite;
}

.platform-screen-hero[data-screen-hero-mode="elementary"] .elementary-match-result {
  animation: elementary-match-result 7.2s ease-out infinite;
}

.score-grid-demo::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  border: 1px solid rgb(134 222 255 / 28%);
  box-shadow: inset 0 0 42px rgb(38 146 185 / 11%);
  pointer-events: none;
}

@keyframes preschool-target-confirm {
  0% { opacity: .38; transform: translate(-50%, -50%) scale(.82); box-shadow: 0 0 0 0 rgb(178 241 255 / 0%); }
  38% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 10px rgb(178 241 255 / 16%), 0 0 28px rgb(178 241 255 / 82%); }
  100% { opacity: .42; transform: translate(-50%, -50%) scale(.9); box-shadow: 0 0 0 18px rgb(178 241 255 / 0%); }
}

@keyframes preschool-live-pulse {
  to { opacity: .54; transform: scale(.78); }
}

@keyframes elementary-scan-pulse {
  0%, 8% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  24% { opacity: .72; }
  42%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.3); }
}

@keyframes elementary-choice-read {
  0%, 12%, 70%, 100% { opacity: .18; border-color: rgb(124 191 255 / 38%); }
  24%, 42% { opacity: .82; border-color: rgb(154 214 255 / 92%); box-shadow: 0 0 18px rgb(62 157 255 / 28%); }
}

@media (prefers-reduced-motion: reduce) {
  .preschool-target,
  .preschool-reaction-badge i,
  .elementary-scan-ring,
  .elementary-choice {
    animation: none !important;
  }
}

/* SCORE GRID R6.9 is a native 3:1 screen build. Keep its geometry exact. */
.score-grid-demo {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #050709;
}

.score-grid-demo-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  display: block;
  border: 0;
  background: #050709;
  pointer-events: none;
}

.platform-screen-hero[data-screen-hero-mode="adult"] .screen-game-scrim,
.platform-screen-hero[data-screen-hero-mode="adult"] .screen-game-identity,
.platform-screen-hero[data-screen-hero-mode="adult"] .screen-hero-prompt,
.platform-screen-hero[data-screen-hero-mode="adult"] .screen-game-shot {
  display: none;
}

@media (max-width: 720px) {
  .score-grid-demo-frame {
    width: 100%;
    max-width: none;
  }
}

/* SCREEN hero game loop: one readable rule, one strike, one reward. */
.platform-screen-hero[data-screen-hero-mode="kids"] {
  --screen-game-accent: 200 255 53;
  --screen-game-accent-2: 67 214 255;
}

.platform-screen-hero[data-screen-hero-mode="adult"] {
  --screen-game-accent: 67 214 255;
  --screen-game-accent-2: 200 255 53;
}

.screen-game-scrim {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 56%, rgb(4 18 40 / 8%) 0 20%, rgb(2 9 23 / 58%) 66%),
    linear-gradient(180deg, rgb(1 8 20 / 58%) 0%, rgb(1 10 24 / 18%) 42%, rgb(1 8 20 / 68%) 100%);
  backdrop-filter: saturate(.82);
}

.screen-game-ui {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}

.screen-game-hud {
  position: absolute;
  z-index: 8;
  top: 56px;
  right: 18px;
  left: 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 18px;
  color: #fff;
  text-shadow: 0 2px 12px rgb(0 0 0 / 72%);
}

.screen-game-hud > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.screen-game-hud > span:last-child {
  align-items: flex-end;
}

.screen-game-hud small {
  color: rgb(var(--screen-game-accent) / 92%);
  font-size: 9px;
  font-weight: 950;
}

.screen-game-hud strong {
  font-size: clamp(12px, 1.4vw, 17px);
  font-weight: 950;
  line-height: 1;
}

.screen-game-hud .screen-game-score {
  align-items: center;
  padding: 0 22px 7px;
  border-bottom: 2px solid rgb(var(--screen-game-accent) / 92%);
}

.screen-game-hud .screen-game-score strong {
  font-size: clamp(26px, 3.7vw, 46px);
  font-variant-numeric: tabular-nums;
}

.screen-game-board {
  --screen-game-cell: clamp(28px, 7vw, 52px);
  --screen-game-gap: clamp(2px, .45vw, 6px);
  --screen-game-pad: clamp(4px, .8vw, 10px);
  position: absolute;
  z-index: 2;
  top: 59%;
  left: 50%;
  width: calc(var(--screen-game-cell) * 9 + var(--screen-game-gap) * 8 + var(--screen-game-pad) * 2 + 2px);
  height: calc(var(--screen-game-cell) * 3 + var(--screen-game-gap) * 2 + var(--screen-game-pad) * 2 + 2px);
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--screen-game-gap);
  padding: var(--screen-game-pad);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 5px;
  background: rgb(2 11 27 / 72%);
  box-shadow:
    0 24px 54px rgb(0 0 0 / 46%),
    inset 0 0 34px rgb(var(--screen-game-accent) / 7%),
    0 0 0 5px rgb(4 19 42 / 42%);
  backdrop-filter: blur(9px);
  transform: translate(-50%, -50%);
}

.screen-game-board i {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(159 198 238 / 30%);
  border-radius: 4px;
  color: rgb(224 239 255 / 66%);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 7%), transparent 42%),
    rgb(8 28 55 / 78%);
  box-shadow: inset 0 0 16px rgb(80 156 255 / 7%);
  font-style: normal;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, opacity 360ms ease, transform 520ms cubic-bezier(.18, .76, .2, 1), box-shadow 180ms ease;
}

.screen-game-board i::before,
.screen-game-board i::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.screen-game-board i::before {
  inset: 14%;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 50%;
}

.screen-game-board i::after {
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .36;
  background: currentColor;
  box-shadow: 0 0 20px currentColor;
}

.screen-game-board i b {
  position: relative;
  z-index: 1;
  font-size: clamp(10px, 1.5vw, 19px);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 8px rgb(0 0 0 / 42%);
}

.platform-screen-hero[data-screen-hero-mode="kids"] .screen-game-board i {
  opacity: .1;
  color: rgb(120 164 210 / 28%);
  background: rgb(8 28 55 / 38%);
}

.platform-screen-hero[data-screen-hero-mode="kids"] .screen-game-board i::before,
.platform-screen-hero[data-screen-hero-mode="kids"] .screen-game-board i::after {
  opacity: 0;
}

.platform-screen-hero[data-screen-hero-mode="kids"] .screen-game-board i.is-castle {
  opacity: 1;
  border-color: rgb(255 125 136 / 82%);
  color: #ff6577;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 20%), transparent 38%),
    linear-gradient(160deg, #e73955, #9d1739);
  box-shadow: inset 0 0 16px rgb(255 255 255 / 10%), 0 0 18px rgb(255 69 102 / 25%);
}

.platform-screen-hero[data-screen-hero-mode="kids"] .screen-game-board i.is-castle::before {
  inset: 11%;
  opacity: .72;
  border-radius: 2px;
  border-color: rgb(255 255 255 / 20%);
}

.platform-screen-hero[data-screen-hero-mode="kids"] .screen-game-board i.is-castle::after {
  width: 18%;
  opacity: .4;
  background: #ffd7dc;
  box-shadow: 0 0 13px #ff9eaa;
}

.platform-screen-hero[data-screen-hero-mode="kids"] .screen-game-board i.is-collapsed {
  opacity: 0;
  transform: translateY(145%) rotate(12deg) scale(.66);
}

.platform-screen-hero[data-screen-hero-mode="kids"] .screen-game-board i.is-collapsed.is-impact {
  animation: castle-block-down 720ms cubic-bezier(.16, .76, .2, 1) both;
}

.screen-game-board i.is-target {
  z-index: 2;
  border-color: rgb(var(--screen-game-accent) / 100%);
  color: #fff;
  background: rgb(var(--screen-game-accent) / 18%);
  box-shadow:
    inset 0 0 24px rgb(var(--screen-game-accent) / 22%),
    0 0 0 3px rgb(var(--screen-game-accent) / 13%),
    0 0 28px rgb(var(--screen-game-accent) / 56%);
  animation: screen-game-target 740ms ease-in-out infinite alternate;
}

.platform-screen-hero[data-screen-hero-mode="kids"] .screen-game-board i.is-target {
  opacity: 1;
  border-color: #ecff72;
  color: #f4ff95;
  background: linear-gradient(145deg, #e8ff55, #80bd18);
  box-shadow: inset 0 0 22px rgb(255 255 255 / 30%), 0 0 0 3px rgb(213 255 53 / 18%), 0 0 34px rgb(213 255 53 / 72%);
}

.platform-screen-hero[data-screen-hero-mode="kids"] .screen-game-board i.is-target::before,
.platform-screen-hero[data-screen-hero-mode="kids"] .screen-game-board i.is-target::after {
  opacity: .72;
}

.screen-game-board i.is-hit {
  border-color: rgb(var(--screen-game-accent) / 100%);
  color: #061427;
  background: rgb(var(--screen-game-accent) / 94%);
  box-shadow: 0 0 24px rgb(var(--screen-game-accent) / 42%);
}

.screen-game-board i.is-impact {
  animation: screen-game-cell-hit 620ms cubic-bezier(.18, .74, .22, 1) both;
}

.screen-game-line {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 122%;
  height: 7px;
  border-radius: 99px;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 26px rgb(var(--screen-game-accent) / 90%);
  transform: translate(-50%, -50%) rotate(45deg) scaleX(.12);
  transition: opacity 220ms ease, transform 620ms cubic-bezier(.18, .74, .22, 1);
}

.platform-screen-hero[data-screen-hero-mode="kids"][data-screen-hero-phase="result"] .screen-game-line {
  display: none;
}

.platform-screen-hero[data-screen-hero-mode="adult"][data-screen-hero-phase="result"] .screen-game-line {
  opacity: .92;
  transform: translate(-50%, -50%) rotate(-45deg) scaleX(1);
}

.screen-game-announcer {
  position: absolute;
  z-index: 12;
  top: 54%;
  left: 50%;
  display: grid;
  place-items: center;
  opacity: 0;
  color: #fff;
  text-align: center;
  text-shadow: 0 4px 22px rgb(0 0 0 / 72%), 0 0 30px rgb(var(--screen-game-accent) / 74%);
  transform: translate(-50%, -50%) scale(.72);
}

.screen-game-announcer small {
  color: rgb(var(--screen-game-accent) / 100%);
  font-size: 10px;
  font-weight: 950;
}

.screen-game-announcer strong {
  margin-top: 3px;
  font-size: clamp(32px, 5.8vw, 58px);
  line-height: .94;
  font-weight: 950;
}

.platform-screen-hero[data-screen-hero-phase="result"] .screen-game-announcer {
  animation: screen-game-announcer 1500ms cubic-bezier(.15, .84, .2, 1) both;
}

.screen-game-combo {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: #fff;
  text-shadow: 0 2px 12px rgb(0 0 0 / 78%);
}

.screen-game-combo span {
  color: rgb(var(--screen-game-accent) / 88%);
  font-size: 8px;
  font-weight: 950;
}

.screen-game-combo strong {
  font-size: 22px;
  font-weight: 950;
}

.platform-hero-note {
  max-width: 620px;
  margin: 14px 0 0;
  color: rgb(229 239 252 / 62%);
  font-size: 12px;
  line-height: 1.5;
}

.platform-screen-hero[data-screen-hero-phase="impact"] .screen-game-score strong,
.platform-screen-hero[data-screen-hero-phase="impact"] .screen-game-combo strong {
  animation: screen-game-number 520ms cubic-bezier(.18, .76, .2, 1) both;
}

.screen-hero-prompt {
  right: auto;
  bottom: 16px;
  left: 18px;
  width: min(270px, calc(100% - 36px));
  border-left-color: rgb(var(--screen-game-accent) / 100%);
  background: rgb(2 10 24 / 82%);
}

.screen-hero-prompt small {
  color: rgb(var(--screen-game-accent) / 100%);
}

.screen-hero-scene img {
  filter: brightness(.68) saturate(.82) contrast(1.08);
}

.platform-screen-hero[data-screen-hero-phase="action"] .screen-hero-scene img,
.platform-screen-hero[data-screen-hero-phase="impact"] .screen-hero-scene img,
.platform-screen-hero[data-screen-hero-phase="result"] .screen-hero-scene img {
  filter: brightness(.72) saturate(.94) contrast(1.1);
}

.platform-screen-hero[data-screen-hero-phase="action"] .screen-hero-ball,
.platform-screen-hero[data-screen-hero-phase="impact"] .screen-hero-ball,
.platform-screen-hero[data-screen-hero-phase="result"] .screen-hero-ball {
  top: var(--hero-ball-y);
  left: var(--hero-ball-x);
  z-index: 11;
  opacity: 1;
  transform: translate(-50%, -50%) scale(.46) rotate(340deg);
}

.platform-screen-hero[data-screen-hero-phase="impact"] .screen-hero-impact {
  animation: screen-hero-impact 760ms ease-out both;
}

.platform-screen-hero[data-screen-hero-phase="impact"] .screen-hero-flare {
  animation: screen-hero-flare 900ms ease-out both;
}

@keyframes screen-game-target {
  to { transform: scale(1.06); box-shadow: inset 0 0 28px rgb(var(--screen-game-accent) / 28%), 0 0 0 5px rgb(var(--screen-game-accent) / 13%), 0 0 36px rgb(var(--screen-game-accent) / 72%); }
}

@keyframes screen-game-cell-hit {
  0% { transform: scale(.78); filter: brightness(2.2); }
  52% { transform: scale(1.13); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes castle-block-down {
  0% { opacity: 1; transform: none; filter: brightness(2.2); }
  26% { opacity: 1; transform: scale(1.12); filter: brightness(1.45); }
  100% { opacity: 0; transform: translateY(145%) rotate(12deg) scale(.66); filter: brightness(.7); }
}

@keyframes screen-game-announcer {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.68); }
  18%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -56%) scale(1.04); }
}

@keyframes screen-game-number {
  0% { transform: translateY(8px) scale(.78); opacity: .3; }
  60% { transform: translateY(-2px) scale(1.16); }
  100% { transform: none; opacity: 1; }
}

@media (max-width: 600px) {
  .screen-game-hud {
    top: 47px;
    right: 8px;
    left: 8px;
    gap: 6px;
  }

  .screen-game-hud small {
    font-size: 6px;
  }

  .screen-game-hud strong {
    font-size: 8px;
  }

  .screen-game-hud .screen-game-score {
    padding: 0 9px 3px;
  }

  .screen-game-hud .screen-game-score strong {
    font-size: 17px;
  }

  .screen-game-board {
    top: 59%;
    box-shadow: 0 12px 30px rgb(0 0 0 / 48%), 0 0 0 3px rgb(4 19 42 / 44%);
  }

  .screen-game-board i b {
    font-size: 7px;
  }

  .screen-game-board i::before {
    inset: 17%;
  }

  .screen-game-line {
    height: 4px;
  }

  .screen-game-announcer {
    top: 57%;
  }

  .screen-game-announcer small {
    font-size: 6px;
  }

  .screen-game-announcer strong {
    font-size: 24px;
  }

  .screen-game-combo {
    right: 7px;
    bottom: 6px;
    gap: 4px;
  }

  .screen-game-combo span {
    font-size: 6px;
  }

  .screen-game-combo strong {
    font-size: 14px;
  }

  .screen-hero-prompt {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen-game-board i,
  .screen-game-line,
  .screen-game-announcer,
  .screen-game-score strong,
  .screen-game-combo strong {
    animation: none !important;
    transition: none !important;
  }

  .platform-screen-hero[data-screen-hero-mode="kids"] .screen-game-board i.is-collapsed.is-impact {
    opacity: 0;
    transform: translateY(145%) rotate(12deg) scale(.66);
  }

  .platform-screen-hero[data-screen-hero-phase="result"] .screen-game-announcer {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* Keep the confirmed game reel above the retired prototype declarations. */
.platform-screen-hero .screen-game-scrim {
  z-index: 3;
  background: linear-gradient(180deg, rgb(2 8 18 / 9%) 0%, transparent 48%, rgb(2 8 18 / 68%) 100%);
  backdrop-filter: none;
}

.screen-game-shot {
  --shot-x: 17%;
  --shot-y: 56%;
  --shot-length: 280px;
  --shot-angle: -2rad;
  position: absolute;
  z-index: 7;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.screen-game-shot-ball,
.screen-game-shot-impact,
.screen-game-shot-trail {
  position: absolute;
  display: block;
  opacity: 0;
  pointer-events: none;
}

.screen-game-shot-ball {
  top: 104%;
  left: 37%;
  width: clamp(27px, 3.8vw, 48px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: url("../assets/home-first-strike/football-256.webp") center / contain no-repeat;
  filter: drop-shadow(0 10px 9px rgb(0 0 0 / 44%));
  transform: translate(-50%, -50%) scale(1.12) rotate(0deg);
}

.screen-game-shot-trail {
  top: 104%;
  left: 37%;
  width: var(--shot-length);
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 78%) 76%, rgb(117 217 255 / 92%));
  box-shadow: 0 0 16px rgb(97 204 255 / 62%);
  transform: rotate(var(--shot-angle)) scaleX(.04);
  transform-origin: left center;
}

.screen-game-shot-impact {
  top: var(--shot-y);
  left: var(--shot-x);
  width: clamp(48px, 7vw, 82px);
  aspect-ratio: 1;
  border: 2px solid rgb(255 255 255 / 92%);
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgb(var(--screen-game-accent) / 18%), 0 0 28px rgb(var(--screen-game-accent) / 72%);
  transform: translate(-50%, -50%) scale(.2);
}

.screen-game-shot.is-flying .screen-game-shot-ball {
  animation: preschool-ball-flight 920ms cubic-bezier(.2, .68, .18, 1) both;
}

.screen-game-shot.is-flying .screen-game-shot-trail {
  animation: preschool-ball-trail 760ms cubic-bezier(.18, .72, .2, 1) both;
}

.screen-game-shot.is-flying .screen-game-shot-impact {
  animation: preschool-ball-impact 470ms 650ms ease-out both;
}

@keyframes preschool-ball-flight {
  0% { top: 104%; left: 37%; opacity: 0; transform: translate(-50%, -50%) scale(1.16) rotate(0deg); }
  10% { opacity: 1; }
  76% { top: var(--shot-y); left: var(--shot-x); opacity: 1; transform: translate(-50%, -50%) scale(.56) rotate(310deg); }
  88% { top: var(--shot-y); left: var(--shot-x); opacity: 1; transform: translate(-50%, -50%) scale(.48) rotate(340deg); }
  100% { top: var(--shot-y); left: var(--shot-x); opacity: 0; transform: translate(-50%, -50%) scale(.44) rotate(360deg); }
}

@keyframes preschool-ball-trail {
  0% { opacity: 0; transform: rotate(var(--shot-angle)) scaleX(.04); }
  16% { opacity: .9; }
  78% { opacity: .72; transform: rotate(var(--shot-angle)) scaleX(1); }
  100% { opacity: 0; transform: rotate(var(--shot-angle)) scaleX(1); }
}

@keyframes preschool-ball-impact {
  0% { opacity: .95; transform: translate(-50%, -50%) scale(.2); }
  58% { opacity: .7; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

.platform-screen-hero .screen-hero-prompt {
  right: auto;
  bottom: 16px;
  left: 18px;
  width: min(330px, calc(100% - 36px));
  border-left-color: rgb(var(--screen-game-accent) / 100%);
  background: rgb(2 10 24 / 84%);
}

.platform-screen-hero .screen-hero-prompt small {
  color: rgb(var(--screen-game-accent) / 100%);
}

.platform-screen-hero .screen-hero-modes button {
  min-width: 84px;
  font-size: 10px;
}

/* Elementary: a single realistic match scene. The lane is never prescribed. */
.screen-hero-reel.is-elementary-premium > img {
  filter: saturate(1.02) contrast(1.05) brightness(.94);
  transform: scale(1.01);
  transform-origin: 56% 64%;
}

.elementary-match-layer,
.adult-score-layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.elementary-match-layer {
  background:
    linear-gradient(180deg, rgb(2 8 18 / 14%), transparent 34%),
    linear-gradient(0deg, rgb(2 8 18 / 20%), transparent 34%);
}

.elementary-match-hud,
.adult-score-hud {
  position: absolute;
  top: 58px;
  right: 18px;
  z-index: 4;
  display: grid;
  justify-items: end;
  gap: 3px;
  color: #fff;
  text-align: right;
  text-shadow: 0 4px 18px rgb(0 0 0 / 74%);
}

.elementary-match-hud span,
.adult-score-hud span,
.adult-score-hud small {
  color: #76baff;
  font-size: 8px;
  font-weight: 900;
}

.elementary-match-hud b {
  font-size: clamp(17px, 2.1vw, 25px);
  line-height: 1;
}

.elementary-match-ball,
.adult-score-ball {
  position: absolute;
  z-index: 7;
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  background: url("../assets/home-first-strike/football-256.webp") center / contain no-repeat;
  filter: drop-shadow(0 10px 9px rgb(0 0 0 / 52%));
  pointer-events: none;
}

.elementary-match-ball {
  --elementary-ball-start-y: 78%;
  top: var(--elementary-ball-start-y);
  left: 50%;
  width: clamp(36px, 5vw, 64px);
  opacity: 1;
  filter: drop-shadow(0 12px 9px rgb(0 0 0 / 66%)) drop-shadow(0 0 7px rgb(255 255 255 / 30%));
  transform: translate(-50%, -50%);
}

.elementary-match-impact {
  position: absolute;
  z-index: 6;
  top: 49%;
  left: 30%;
  width: clamp(44px, 7vw, 80px);
  aspect-ratio: 1;
  border: 2px solid rgb(117 190 255 / 92%);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 0 8px rgb(80 165 255 / 12%), 0 0 30px rgb(80 165 255 / 64%);
  transform: translate(-50%, -50%) scale(.25);
}

.elementary-match-result {
  position: absolute;
  z-index: 8;
  top: 31%;
  left: 30%;
  display: grid;
  gap: 2px;
  color: #fff;
  opacity: 0;
  text-shadow: 0 4px 18px rgb(0 0 0 / 78%);
  transform: translate(-50%, 10px);
}

.elementary-match-result small {
  color: #76baff;
  font-size: 7px;
  font-weight: 950;
}

.elementary-match-result strong {
  font-size: clamp(13px, 1.7vw, 21px);
  line-height: 1;
}

.is-elementary-premium.is-running > img {
  animation: elementary-match-camera 7.2s ease-in-out infinite;
}

.is-elementary-premium.is-running .elementary-match-ball {
  animation: elementary-match-pass 7.2s cubic-bezier(.2, .7, .18, 1) infinite;
}

.is-elementary-premium.is-running .elementary-match-impact {
  animation: elementary-match-impact 7.2s ease-out infinite;
}

.is-elementary-premium.is-running .elementary-match-result {
  animation: elementary-match-result 7.2s ease-out infinite;
}

@keyframes elementary-match-camera {
  0%, 20% { transform: scale(1.01) translate3d(0, 0, 0); }
  48%, 72% { transform: scale(1.045) translate3d(.4%, -.2%, 0); }
  92%, 100% { transform: scale(1.01) translate3d(0, 0, 0); }
}

@keyframes elementary-match-pass {
  0%, 43% { top: var(--elementary-ball-start-y); left: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  47% { opacity: 1; }
  63% { top: 49%; left: 30%; opacity: 1; transform: translate(-50%, -50%) scale(.62) rotate(-320deg); }
  68%, 88% { top: 49%; left: 30%; opacity: 0; transform: translate(-50%, -50%) scale(.56) rotate(-360deg); }
  94%, 100% { top: var(--elementary-ball-start-y); left: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

@keyframes elementary-match-impact {
  0%, 61% { opacity: 0; transform: translate(-50%, -50%) scale(.25); }
  65% { opacity: .95; }
  76%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.38); }
}

@keyframes elementary-match-result {
  0%, 64% { opacity: 0; transform: translate(-50%, 10px); }
  69%, 82% { opacity: 1; transform: translate(-50%, 0); }
  89%, 100% { opacity: 0; transform: translate(-50%, -6px); }
}

/* Adult: nine visible scoring zones, with feedback only after contact. */
.screen-hero-reel.is-adult {
  overflow: hidden;
  background: #020914;
}

.screen-hero-reel.is-adult > img {
  filter: saturate(.94) contrast(1.08) brightness(.98);
  transform: scale(1.01);
  transform-origin: 50% 58%;
}

.adult-score-layer {
  --adult-hit-x: 17.6%;
  --adult-hit-y: 39.7%;
  background: linear-gradient(180deg, rgb(1 7 17 / 20%), transparent 48%, rgb(1 7 17 / 32%));
}

.adult-score-hud strong {
  font-size: clamp(20px, 3vw, 36px);
  line-height: .9;
  font-variant-numeric: tabular-nums;
}

.adult-score-total {
  position: relative;
  display: block;
  width: 3.2em;
  height: .95em;
}

.adult-score-total b {
  position: absolute;
  top: 0;
  right: 0;
  line-height: .9;
}

.adult-score-total b:last-child {
  opacity: 0;
}

.adult-score-hud small {
  color: rgb(255 255 255 / 58%);
}

.adult-score-grid {
  position: absolute;
  z-index: 4;
  top: 34.5%;
  left: 9.5%;
  width: 81%;
  height: 31%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 2%;
  background: rgb(5 17 33 / 5%);
}

.adult-score-grid i {
  position: relative;
  display: grid;
  place-items: center;
  background: transparent;
  transition: background 180ms ease;
}

.adult-score-grid b {
  position: relative;
  display: grid;
  place-items: center;
  min-width: clamp(28px, 3.3vw, 46px);
  aspect-ratio: 1;
  color: rgb(221 235 249 / 82%);
  border: 2px solid rgb(202 223 244 / 44%);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(29 72 112 / 42%) 0 26%, rgb(3 13 26 / 74%) 28% 100%);
  box-shadow: inset 0 0 18px rgb(98 162 219 / 14%), 0 0 0 5px rgb(83 157 226 / 6%);
  font-size: clamp(8px, 1vw, 12px);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.adult-score-grid b::before,
.adult-score-grid b::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.adult-score-grid b::before {
  inset: -7px;
  border: 1px solid rgb(108 182 248 / 20%);
  box-shadow: 0 0 18px rgb(60 151 237 / 8%);
}

.adult-score-grid b::after {
  inset: 20%;
  border: 1px solid rgb(228 241 255 / 26%);
}

.adult-score-grid .is-max b {
  color: #fff;
  border-color: rgb(107 190 255 / 76%);
  background: radial-gradient(circle, rgb(48 143 226 / 60%) 0 26%, rgb(3 20 39 / 82%) 28% 100%);
  box-shadow: inset 0 0 20px rgb(60 158 244 / 24%), 0 0 0 5px rgb(83 157 226 / 10%), 0 0 18px rgb(48 146 235 / 18%);
}

.adult-score-grid .is-high b {
  color: rgb(234 245 255 / 94%);
  border-color: rgb(145 200 247 / 56%);
}

.adult-score-grid .is-low b {
  color: rgb(200 216 232 / 68%);
  border-color: rgb(166 193 218 / 28%);
  background: radial-gradient(circle, rgb(19 46 72 / 34%) 0 26%, rgb(3 13 26 / 68%) 28% 100%);
}

.adult-score-ball {
  top: 84%;
  left: 50%;
  width: clamp(26px, 4vw, 48px);
  transform: translate(-50%, -50%);
}

.adult-score-impact {
  position: absolute;
  z-index: 7;
  top: var(--adult-hit-y);
  left: var(--adult-hit-x);
  width: clamp(42px, 6.5vw, 76px);
  aspect-ratio: 1;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 0 8px rgb(61 160 255 / 16%), 0 0 34px rgb(61 160 255 / 72%);
  transform: translate(-50%, -50%) scale(.2);
}

.adult-score-impact i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 74%;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, rgb(64 164 255 / 0%));
  transform-origin: 50% 0;
}

.adult-score-impact i:nth-child(1) { transform: rotate(32deg); }
.adult-score-impact i:nth-child(2) { transform: rotate(118deg); }
.adult-score-impact i:nth-child(3) { transform: rotate(208deg); }
.adult-score-impact i:nth-child(4) { transform: rotate(298deg); }

.adult-score-result {
  position: absolute;
  z-index: 8;
  top: 52%;
  left: var(--adult-hit-x);
  color: #fff;
  opacity: 0;
  font-size: clamp(24px, 4.2vw, 50px);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgb(62 161 255 / 82%);
  transform: translate(-50%, 10px);
}

.adult-score-streak {
  position: absolute;
  z-index: 8;
  right: 18px;
  bottom: 18px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  gap: 2px 8px;
  padding: 9px 11px;
  color: #fff;
  border: 1px solid rgb(123 184 239 / 24%);
  background: rgb(2 11 24 / 72%);
  box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
  backdrop-filter: blur(8px);
}

.adult-score-streak > span {
  color: #72baff;
  font-size: 7px;
  font-weight: 950;
}

.adult-score-streak > strong {
  grid-row: span 2;
  font-size: clamp(18px, 2.3vw, 28px);
  line-height: .9;
}

.adult-score-streak small {
  display: flex;
  gap: 3px;
}

.adult-score-streak small i {
  width: 12px;
  height: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 16%);
}

.adult-score-streak small i:nth-child(-n + 3) {
  background: #4ca7ff;
  box-shadow: 0 0 8px rgb(76 167 255 / 62%);
}

.screen-hero-reel.is-adult.is-running > img {
  animation: adult-score-camera 6.4s ease-in-out infinite;
}

.screen-hero-reel.is-adult.is-running .adult-score-ball {
  animation: adult-score-shot 6.4s cubic-bezier(.2, .72, .18, 1) infinite;
}

.screen-hero-reel.is-adult.is-running .adult-score-grid i:first-child b {
  animation: adult-score-zone 6.4s ease-out infinite;
}

.screen-hero-reel.is-adult.is-running .adult-score-impact {
  animation: adult-score-impact 6.4s ease-out infinite;
}

.screen-hero-reel.is-adult.is-running .adult-score-result {
  animation: adult-score-result 6.4s ease-out infinite;
}

.screen-hero-reel.is-adult.is-running .adult-score-grid i:not(:first-child) b {
  animation: adult-target-idle 3.8s ease-in-out infinite alternate;
}

.screen-hero-reel.is-adult.is-running .adult-score-grid i:nth-child(2n) b { animation-delay: -1.1s; }
.screen-hero-reel.is-adult.is-running .adult-score-grid i:nth-child(3n) b { animation-delay: -2.2s; }

.screen-hero-reel.is-adult.is-running .adult-score-total b:first-child {
  animation: adult-score-before 6.4s ease-out infinite;
}

.screen-hero-reel.is-adult.is-running .adult-score-total b:last-child {
  animation: adult-score-after 6.4s ease-out infinite;
}

@keyframes adult-score-camera {
  0%, 25% { transform: scale(1.01); }
  58%, 78% { transform: scale(1.035); }
  94%, 100% { transform: scale(1.01); }
}

@keyframes adult-score-shot {
  0%, 38% { top: 84%; left: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  42% { opacity: 1; }
  58% { top: var(--adult-hit-y); left: var(--adult-hit-x); opacity: 1; transform: translate(-50%, -50%) scale(.53) rotate(-340deg); }
  63%, 88% { top: var(--adult-hit-y); left: var(--adult-hit-x); opacity: 0; transform: translate(-50%, -50%) scale(.48) rotate(-380deg); }
  95%, 100% { top: 84%; left: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

@keyframes adult-score-zone {
  0%, 56% { color: #fff; border-color: rgb(107 190 255 / 76%); background: radial-gradient(circle, rgb(48 143 226 / 60%) 0 26%, rgb(3 20 39 / 82%) 28% 100%); box-shadow: inset 0 0 20px rgb(60 158 244 / 24%), 0 0 0 5px rgb(83 157 226 / 10%), 0 0 18px rgb(48 146 235 / 18%); }
  60%, 77% { color: #07111f; border-color: #fff; background: #fff; box-shadow: inset 0 0 26px rgb(88 177 255 / 72%), 0 0 0 8px rgb(72 169 255 / 20%), 0 0 34px rgb(53 161 255 / 92%); }
  86%, 100% { color: #fff; border-color: rgb(107 190 255 / 76%); background: radial-gradient(circle, rgb(48 143 226 / 60%) 0 26%, rgb(3 20 39 / 82%) 28% 100%); box-shadow: inset 0 0 20px rgb(60 158 244 / 24%), 0 0 0 5px rgb(83 157 226 / 10%), 0 0 18px rgb(48 146 235 / 18%); }
}

@keyframes adult-target-idle {
  from { transform: scale(.97); filter: brightness(.86); }
  to { transform: scale(1.03); filter: brightness(1.12); }
}

@keyframes adult-score-impact {
  0%, 57% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  61% { opacity: .96; }
  74%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

@keyframes adult-score-result {
  0%, 59% { opacity: 0; transform: translate(-50%, 10px); }
  64%, 80% { opacity: 1; transform: translate(-50%, 0); }
  88%, 100% { opacity: 0; transform: translate(-50%, -8px); }
}

@keyframes adult-score-before {
  0%, 59% { opacity: 1; transform: translateY(0); }
  64%, 90% { opacity: 0; transform: translateY(-8px); }
  96%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes adult-score-after {
  0%, 61% { opacity: 0; transform: translateY(8px); }
  66%, 89% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(-8px); }
}

@media (max-width: 600px) {
  .platform-screen-hero .screen-hero-prompt {
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    display: block;
    padding: 9px 10px 10px;
  }

  .platform-screen-hero .screen-hero-modes {
    top: 32px;
    width: 100%;
  }

  .platform-screen-hero .screen-hero-modes button {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: 5px;
    font-size: 9px;
  }

  .screen-game-shot-ball {
    width: 28px;
  }

  .screen-game-shot-trail {
    height: 5px;
  }

  .elementary-pass-phases {
    display: none;
  }

  .is-elementary-premium .elementary-pass-player {
    width: clamp(54px, 15.5%, 76px);
  }

  .is-elementary-premium .elementary-pass-defender {
    width: clamp(50px, 14.5%, 70px);
  }

  .elementary-match-hud,
  .adult-score-hud {
    top: 64px;
    right: 10px;
  }

  .elementary-match-hud span,
  .adult-score-hud span,
  .adult-score-hud small {
    font-size: 6px;
  }

  .adult-score-grid {
    top: 34%;
    height: 32%;
  }

  .adult-score-grid b {
    min-width: 22px;
    font-size: 6px;
  }

  .adult-score-grid b::before {
    inset: -4px;
  }

  .adult-score-layer {
    --adult-hit-y: 39.3%;
  }

  .adult-score-streak {
    display: none;
  }

  .elementary-match-ball {
    --elementary-ball-start-y: 66%;
    width: 40px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .screen-game-shot {
    display: none;
  }

  .elementary-shot-ball,
  .elementary-shot-trail,
  .elementary-shot-impact,
  .elementary-goal-result,
  .elementary-shot-zones i,
  .elementary-pass-player,
  .elementary-pass-defender,
  .elementary-pass-ball,
  .elementary-pass-phases span {
    animation: none !important;
  }

  .is-elementary-premium > img,
  .elementary-match-ball,
  .elementary-match-impact,
  .elementary-match-result,
  .screen-hero-reel.is-adult > img,
  .adult-score-ball,
  .adult-score-grid i,
  .adult-score-grid b,
  .adult-score-impact,
  .adult-score-result,
  .adult-score-total b {
    animation: none !important;
  }
}

@media (max-width: 720px) {
  body.page-cta-ready .platform-mobile-cta {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 8px;
  }

  .platform-mobile-cta a.is-kakao {
    display: flex;
    gap: 7px;
    color: #171717;
    background: #fee500;
  }

  .platform-mobile-cta a.is-kakao img {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    object-fit: contain;
  }
}