:root {
  --platform-ink: #24145f;
  --platform-violet: #2b176c;
  --platform-purple: #7046cb;
  --platform-pink: #f5b5e8;
  --platform-lilac: #eee8ff;
  --platform-paper: #fff;
  --platform-mist: #f7f5fb;
  --platform-text: #423d56;
  --platform-line: #e5e0ee;
}

body { color: var(--platform-ink); background: var(--platform-paper); font-family: "Nata Sans", Arial, sans-serif; }
body > .gaming-hero__header {
  position: absolute; z-index: 20; inset: 0 0 auto; width: 100%; min-height: 118px;
  padding: 10px max(32px, calc((100vw - 1440px) / 2)); margin: 0;
  background: #fff; box-shadow: 0 8px 28px rgb(36 20 95 / 8%);
}
.platforms-page { padding-top: 142px; color: var(--platform-ink); font-family: "Nata Sans", Arial, sans-serif; }
.platforms-page *, .platforms-page *::before, .platforms-page *::after { box-sizing: border-box; }
.platforms-wrap { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.platforms-page section { position: relative; padding-block: clamp(64px, 8vw, 112px); }
.platforms-page h1, .platforms-page h2, .platforms-page h3, .platforms-page p { margin-top: 0; }
.platforms-page h1, .platforms-page h2 { color: var(--platform-ink); letter-spacing: -.045em; }
.platforms-page h1 { max-width: 760px; margin-bottom: 24px; font-size: clamp(48px, 6vw, 78px); line-height: 1.03; }
.platforms-page h2 { margin-bottom: 20px; font-size: clamp(34px, 4vw, 52px); line-height: 1.1; }
.platforms-page h3 { margin-bottom: 12px; font-size: 21px; line-height: 1.25; }
.platforms-page p, .platforms-page li { color: var(--platform-text); font-size: 16px; line-height: 1.7; }
.platforms-eyebrow { margin-bottom: 16px; color: #7e4bd0 !important; font-size: 12px !important; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.platforms-hero { min-height: 570px; padding-block: 88px 38px !important; background: radial-gradient(circle at 84% 24%, #e7d9ff 0, transparent 30%), linear-gradient(115deg, #f8f5ff 0%, #fff 72%); }
.platforms-hero__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .65fr); align-items: center; gap: 64px; }
.platforms-hero__copy { max-width: 760px; }
.platforms-lede { max-width: 650px; margin-bottom: 30px; font-size: 18px !important; }
.platforms-button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 12px; padding: 13px 22px; border: 0; border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.platforms-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(36 20 95 / 18%); }
.platforms-button--light { background-color: #281765; color: #fff; }
.platforms-button--bright { background-color: #ffc1ec; color: #24145f; }
.platforms-hero__note { min-height: 300px; padding: 42px 34px; border-radius: 30px; background: #2b176c; color: #fff; box-shadow: 0 25px 60px rgb(43 23 108 / 18%); }
.platforms-hero__quote { position: relative; z-index: 1; margin: 70px 0 24px; color: #fff !important; font-size: 21px !important; line-height: 1.45 !important; }
.platforms-orbit { position: absolute; top: 26px; right: 30px; color: #f5b5e8; font-size: 14px; font-weight: 700; }
.platforms-hero__caption { color: #d6c9ff; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.platforms-hero__footer { display: flex; width: min(1200px, calc(100% - 64px)); justify-content: space-between; margin: 60px auto 0; color: #766c92; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.platforms-intro { display: grid; grid-template-columns: .65fr 1.5fr 1fr; align-items: start; gap: 48px; }
.platforms-section-index { color: #8b6be0; font-size: 13px; font-weight: 800; }
.platforms-section-index span { display: block; margin-top: 10px; color: #928ba4; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.platforms-intro__body p, .platforms-intro__aside { max-width: 620px; }
.platforms-intro__aside { padding-top: 48px; }
.platforms-points { background: var(--platform-mist); }
.platforms-section-heading { max-width: 690px; margin-bottom: 36px; }
.platforms-point-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.platforms-point-card { min-height: 255px; padding: 26px 22px; border: 1px solid var(--platform-line); border-radius: 20px; background: #fff; }
.platforms-point-card:nth-child(even) { transform: translateY(18px); }
.platforms-card-number { display: inline-grid; width: 36px; height: 36px; margin-bottom: 25px; place-items: center; border-radius: 50%; background: #eee8ff; color: #6840c1; font-size: 12px; font-weight: 800; }
.platforms-point-card p { margin-bottom: 0; font-size: 14px; }
.platforms-device { overflow: hidden; background: #f2ecff; }
.platforms-device__layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; }
.platforms-device__visual { position: relative; min-height: 360px; }
.platforms-device-shape { position: absolute; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; border: 8px solid #2b176c; background: linear-gradient(145deg, #fff, #e4d5ff); box-shadow: 0 24px 45px rgb(43 23 108 / 16%); }
.platforms-device-shape span { color: #79649f; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.platforms-device-shape i { display: block; width: 70%; height: 8px; border-radius: 10px; background: #d5c4ff; }
.platforms-device-shape--screen { top: 24px; left: 6%; width: 75%; height: 250px; border-radius: 18px; }
.platforms-device-shape--phone { right: 4%; bottom: 0; width: 118px; height: 220px; border-width: 7px; border-radius: 25px; background: linear-gradient(160deg,#f8d6f1,#fff); }
.platforms-device-dot { position: absolute; width: 20px; height: 20px; border: 5px solid #fff; border-radius: 50%; background: #f0a9dd; }
.platforms-device-dot--one { top: 4px; right: 16%; }.platforms-device-dot--two { bottom: 58px; left: 2%; background: #a68bf5; }
.platforms-device__copy { max-width: 520px; }
.platforms-check-list, .platforms-access__list { display: grid; gap: 10px; padding: 0; list-style: none; }
.platforms-check-list li::before { content: "✓"; margin-right: 12px; color: #7844cf; font-weight: 800; }
.platforms-compare { background: #fff; }
.platforms-section-heading--row { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 36px; }
.platforms-section-heading--row > p { max-width: 360px; }
.platforms-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 22px; }
.platforms-filter__button { min-height: 42px; padding: 9px 17px; border: 1px solid #dcd5ea; border-radius: 999px; background-color: #fff; color: #38276a; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.platforms-filter__button.is-active { border-color: #281765; background-color: #281765 !important; color: #fff; }
.platforms-filter__button:focus-visible, .platforms-button:focus-visible, .platforms-text-link:focus-visible { outline: 3px solid #cb5bdd; outline-offset: 3px; }
.platforms-table { overflow: hidden; border: 1px solid var(--platform-line); border-radius: 18px; }
.platforms-table__row { display: grid; grid-template-columns: .7fr 1.45fr 1.25fr; gap: 20px; padding: 19px 22px; border-top: 1px solid var(--platform-line); }
.platforms-table__row:first-child { border-top: 0; }
.platforms-table__row > * { color: var(--platform-text); font-size: 14px; line-height: 1.5; }
.platforms-table__row--head { background: #f4f0fc; }
.platforms-table__row--head > * { color: var(--platform-ink); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.platforms-filter-status { min-height: 24px; margin: 14px 0 0; color: #716987 !important; font-size: 13px !important; }
.platforms-content { background: #2b176c; }
.platforms-content h2, .platforms-content p { color: #fff; }
.platforms-content__layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 64px; }
.platforms-content__copy > p:not(.platforms-eyebrow) { color: #e3dcf5; }
.platforms-text-link { display: inline-flex; gap: 12px; margin-top: 14px; color: #ffc1ec; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.platforms-content__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.platforms-content-tile { min-height: 160px; padding: 22px; border-radius: 18px; }
.platforms-content-tile > span { display: block; margin-bottom: 18px; font-size: 11px; font-weight: 800; }
.platforms-content-tile h3 { margin-bottom: 6px; color: #24145f; }
.platforms-content-tile p { margin-bottom: 0; color: #51456a; font-size: 13px; }
.platforms-content-tile--purple { background: #dfd1ff; }.platforms-content-tile--pink { background: #f5b5e8; }.platforms-content-tile--blue { grid-column: 1 / -1; min-height: 125px; background: #cfeaf5; }
.platforms-ux { background: #f7f5fb; }
.platforms-ux__layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; }
.platforms-ux__heading { max-width: 430px; }
.platforms-ux__details > p { max-width: 620px; }
.platforms-ux__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 38px; }
.platforms-ux__steps > div { padding: 18px; border-top: 2px solid #a580e6; background: #fff; }
.platforms-ux__steps span { display: block; margin-bottom: 20px; color: #9c7bd4; font-size: 12px; font-weight: 800; }
.platforms-ux__steps strong { color: #2b176c; }.platforms-ux__steps p { margin: 6px 0 0; font-size: 12px; }
.platforms-performance { background: #fff; }
.platforms-performance__layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 72px; }
.platforms-performance__copy { max-width: 520px; }
.platforms-performance__signals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.platforms-signal { display: flex; min-height: 165px; flex-direction: column; justify-content: flex-end; padding: 18px; border-radius: 18px; background: #f0eaff; }
.platforms-signal:nth-child(2) { background: #fbe4f5; }.platforms-signal:nth-child(3) { background: #e2f3fa; }
.platforms-signal__mark { margin-bottom: auto; color: #7544ca; font-size: 28px; }
.platforms-signal strong { color: #281765; }.platforms-signal small { margin-top: 6px; color: #716987; }
.platforms-access { background: #faf8ff; }
.platforms-access__layout { display: grid; grid-template-columns: 180px 1.3fr .8fr; align-items: center; gap: 48px; }
.platforms-access__icon { position: relative; display: grid; width: 150px; height: 150px; place-items: center; border-radius: 42% 58% 62% 38%; background: #e7dcff; color: #432687; }
.platforms-access__icon span { font-size: 48px; font-weight: 800; letter-spacing: -.08em; }.platforms-access__icon i, .platforms-access__icon b { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #ec8bd3; }.platforms-access__icon i { top: 8px; right: 3px; }.platforms-access__icon b { bottom: 8px; left: 2px; background: #9b7be3; }
.platforms-access__list { margin: 0; }.platforms-access__list li { padding: 11px 0; border-bottom: 1px solid #e4deef; font-size: 14px; }
.platforms-check { background: linear-gradient(110deg,#f6f2ff,#fff); }
.platforms-check__layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: center; }
.platforms-check__intro { max-width: 400px; }
.platforms-checklist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.platforms-checklist li { display: flex; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid #e0d9ed; color: #3e3656; }
.platforms-checklist li span { color: #a47ce3; font-size: 12px; font-weight: 800; }
.platforms-faq { background: #fff; }
.platforms-faq__layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; }
.platforms-faq__intro { max-width: 390px; }
.platforms-faq__items { display: block; }
.platforms-faq-item { border-bottom: 1px solid #e4dfec; }
.platforms-faq-item summary { padding: 20px 30px 20px 0; color: #281765; font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; }
.platforms-faq-item summary::-webkit-details-marker { display: none; }
.platforms-faq-item summary::after { float: right; content: "+"; color: #7949cf; font-size: 22px; }
.platforms-faq-item[open] summary::after { content: "−"; }.platforms-faq-item p { max-width: 680px; padding-right: 24px; font-size: 14px; }
.platforms-next { padding-top: 32px !important; }
.platforms-next__panel { align-items: center; justify-content: space-between; gap: 36px; padding: 50px 56px; border-radius: 28px; background: #2b176c; }
.platforms-next__panel h2, .platforms-next__panel p { color: #fff; }.platforms-next__panel h2 { max-width: 650px; margin-bottom: 12px; }.platforms-next__panel p { margin-bottom: 0; color: #dfd6f5; }
.platforms-page a { transition: color .18s ease, background-color .18s ease; }
.platforms-page a:hover { color: #8a4bca; }
.platforms-button--light:hover { color: #fff !important; background-color: #5d38b1; }
.platforms-button--bright:hover { color: #24145f !important; background-color: #f5b5e8; }

@media (max-width: 850px) {
  body > .gaming-hero__header { min-height: 100px; padding-inline: 24px; }
  .platforms-page { padding-top: 122px; }
  .platforms-wrap, .platforms-hero__footer { width: min(100% - 48px, 680px); }
  .platforms-hero__grid, .platforms-device__layout, .platforms-content__layout, .platforms-ux__layout, .platforms-performance__layout, .platforms-check__layout, .platforms-faq__layout { grid-template-columns: 1fr; gap: 38px; }
  .platforms-hero { min-height: auto; }.platforms-hero__note { min-height: 235px; }.platforms-hero__quote { margin-top: 54px; }
  .platforms-intro { grid-template-columns: 1fr 2fr; gap: 24px; }.platforms-intro__aside { grid-column: 2; padding-top: 0; }
  .platforms-point-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.platforms-point-card:nth-child(even) { transform: none; }
  .platforms-device__visual { max-width: 520px; width: 100%; }
  .platforms-access__layout { grid-template-columns: 130px 1fr; gap: 26px; }.platforms-access__icon { width: 120px; height: 120px; }.platforms-access__list { grid-column: 2; }
  .platforms-section-heading--row { align-items: start; flex-direction: column; gap: 0; }
}
@media (max-width: 560px) {
  body > .gaming-hero__header { min-height: 92px; padding: 8px 18px; }
  .platforms-page { padding-top: 110px; }
  .platforms-page section { padding-block: 58px; }
  .platforms-wrap, .platforms-hero__footer { width: calc(100% - 36px); }
  .platforms-hero { padding-block: 50px 28px !important; }
  .platforms-page h1 { font-size: clamp(42px, 12vw, 58px); }.platforms-page h2 { font-size: 34px; }
  .platforms-lede { font-size: 16px !important; }.platforms-hero__note { min-height: 220px; padding: 28px; }.platforms-hero__quote { margin-top: 54px; font-size: 18px !important; }
  .platforms-hero__footer { margin-top: 34px; }
  .platforms-intro { grid-template-columns: 1fr; gap: 18px; }.platforms-intro__aside { grid-column: auto; }
  .platforms-point-grid, .platforms-content__tiles, .platforms-ux__steps, .platforms-performance__signals { grid-template-columns: 1fr; }
  .platforms-point-card { min-height: 0; }.platforms-card-number { margin-bottom: 14px; }
  .platforms-device__visual { min-height: 280px; }.platforms-device-shape--screen { height: 205px; }.platforms-device-shape--phone { width: 92px; height: 176px; }
  .platforms-content-tile, .platforms-content-tile--blue { grid-column: auto; min-height: 145px; }
  .platforms-ux__steps > div { min-height: 130px; }
  .platforms-signal { min-height: 125px; }
  .platforms-access__layout { grid-template-columns: 1fr; }.platforms-access__list { grid-column: auto; }
  .platforms-table { border-radius: 12px; }.platforms-table__row { grid-template-columns: .72fr 1.28fr; gap: 10px; padding: 14px; }.platforms-table__row > :last-child { grid-column: 2; }.platforms-table__row--head > :last-child { display: none; }
  .platforms-next__panel { align-items: flex-start; flex-direction: column; padding: 32px 25px; }
}