/* =========================================================
   Nexora Media — Home
   Tokens & geometry taken from Figma: 01 · 首页 / Home (node 1:43)
   Design container is 1180px, so all px values are 1:1 CSS px.
   ========================================================= */

:root {
  /* Colour */
  --c-page: #171717;
  --c-hero-bg: #181824;
  --c-services-bg: #171721;
  --c-footer-bg: #181824;

  --c-card-from: #21202d;
  --c-card-to: #1a1929;

  --c-cap-bg: #202133; /* capability map section */
  --c-info-bg: #24253d; /* company information section */
  --c-num: #67758b; /* card index 01–04 */
  --c-lead: #8393a8; /* section lead paragraph */
  --c-term: #8693a2; /* definition list term */
  --c-card-meta: #587083; /* contact card email line */
  --c-addr: #9babbf; /* contact card address line */

  --c-text: #ffffff;
  --c-text-hero: #9daabd; /* hero sub-headline   */
  --c-text-nav: #c4cedd; /* inactive nav links  */
  --c-text-body: #8898ad; /* card body copy      */
  --c-text-mute: #9caabd; /* footer body         */
  --c-text-link: #b4c0d0; /* footer links        */
  --c-text-micro: #526176; /* footer micro labels */
  --c-accent: #6966ff;

  --c-line: rgba(255, 255, 255, 0.1);
  --c-line-soft: rgba(255, 255, 255, 0.09);
  --c-line-faint: rgba(255, 255, 255, 0.08);
  --c-line-mail: rgba(255, 255, 255, 0.12);

  /* Type */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
    Helvetica, "Segoe UI", Roboto, "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-inter:
    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
    sans-serif;

  /* Layout */
  --container: 1180px;
  --gutter: 24px;
  /* left edge of the 1180 content column, used to place the hero decorations */
  --col: calc(50% - 590px);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px; /* fixed header height */
}

body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
p {
  margin: 0;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--c-accent);
  color: #fff;
  font-size: 13px;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  padding-top: 88px; /* was the in-flow header */
  background: var(--c-hero-bg);
  overflow: hidden;
  isolation: isolate;
}

.hero__glow {
  position: absolute;
  inset: -4px 0 auto 0;
  height: 807px;
  z-index: 1;
  opacity: 0.2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 915px 350px at 50% 0%,
    rgb(88, 45, 134) 0%,
    rgb(56, 34, 85) 50%,
    rgb(40, 29, 61) 75%,
    rgb(24, 24, 36) 100%
  );
}

/* ---------- Header ---------- */
/* Lifted out of the hero and fixed to the viewport. It has to live outside the
   hero because the hero is overflow:hidden (it clips the glow and the floating
   decorations) and creates its own stacking context — a header inside it would
   be trapped there and would paint under the sections that follow. The heroes
   carry a matching padding-top instead, so every measurement is unchanged and
   the hero's glow still shows through the transparent bar. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-bottom: 1px solid var(--c-line);
  transition:
    background-color 0.28s ease,
    border-color 0.28s ease;
}

/* solid once the page has moved, so content never shows through */
.site-header.is-stuck {
  background-color: rgba(24, 24, 36, 0.97);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
@supports (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .site-header.is-stuck {
    background-color: rgba(24, 24, 36, 0.86);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
  }
}

/* 87px row + the 1px rule = the design's 88px header, so the bar's total height
   matches the heroes' padding-top exactly and the rule lands on y87 as drawn */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 87px;
}

.logo {
  font-family: var(--font-inter);
  font-size: 15px;
  font-weight: 800;
  line-height: 22.5px;
  letter-spacing: 2.85px;
  color: var(--c-text);
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 13px;
  line-height: 19.5px;
  white-space: nowrap;
}

.nav__link {
  color: var(--c-text-nav);
  transition: color 0.18s ease;
}
.nav__link:hover {
  color: var(--c-text);
}
.nav__link.is-active {
  color: var(--c-text);
  font-weight: 600;
}

/* Hamburger (mobile only) */
.nav-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.nav-toggle__bar {
  position: absolute;
  left: 9px;
  width: 22px;
  height: 1.5px;
  background: #fff;
  transition:
    transform 0.25s ease,
    opacity 0.2s ease;
}
.nav-toggle__bar:nth-child(1) {
  top: 14px;
}
.nav-toggle__bar:nth-child(2) {
  top: 19.5px;
}
.nav-toggle__bar:nth-child(3) {
  top: 25px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- Hero copy ---------- */
.hero__content {
  position: relative;
  z-index: 3;
  padding-top: 108px;
  padding-bottom: 230px;
  text-align: center;
}

.hero__title {
  max-width: 954px;
  margin-inline: auto;
  font-size: 68px;
  font-weight: 600;
  line-height: 72px;
  letter-spacing: -0.5px;
}

.hero__sub {
  margin-top: 32px;
  margin-inline: auto;
  max-width: 695px;
  font-size: 18px;
  line-height: 27.75px;
  color: var(--c-text-hero);
}

/* ---------- Floating decorations ----------
   Each .deco is the node's outer box; the image inside is the leaf,
   sized as a % of that box and rotated exactly as in Figma.
   The upper two are pinned below the header, the lower four are
   pinned above the capability strip, so they hold their relationship
   to the section as the hero grows and shrinks.
   Horizontal offsets are clamped so nothing walks off a narrow screen.
------------------------------------------------------------ */
.hero__deco {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.deco {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deco__img,
.deco__emoji {
  display: block;
  animation: float 8s ease-in-out infinite;
}

.deco__emoji {
  display: grid;
  place-items: center;
  line-height: 1;
  font-family:
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* outer boxes */
.deco--gamepad {
  left: max(calc(var(--col) - 160px), -46px);
  top: 98px;
  width: 228.5px;
  height: 228.5px;
}
.deco--person {
  left: min(calc(var(--col) + 1086px), calc(100% - 116px));
  top: 137px;
  width: 152.5px;
  height: 150.7px;
}
.deco--gift {
  left: max(calc(var(--col) - 2px), -30px);
  bottom: 127px;
  width: 148px;
  height: 166.7px;
}
.deco--trophy {
  left: calc(var(--col) + 417px);
  bottom: 124px;
  width: 115.7px;
  height: 131.8px;
}
.deco--clap {
  left: min(calc(var(--col) + 888px), calc(100% - 120px));
  bottom: 162px;
  width: 145.7px;
  height: 145px;
}
.deco--crown {
  left: min(calc(var(--col) + 1110px), calc(100% - 170px));
  bottom: 86px;
  width: 208.8px;
  height: 207.9px;
}

/* leaves — % of the outer box, rotation per Figma */
.deco--gamepad > * {
  width: 79.23%;
  height: 62.2%;
  transform: rotate(-45deg);
  object-fit: cover;
  object-position: 46% 50%;
  animation-delay: 0s;
}
.deco--person > * {
  width: 92.76%;
  height: 92.56%;
  transform: rotate(-4.74deg);
  object-fit: cover;
  animation-delay: -1.3s;
}
.deco--gift > * {
  width: 79.97%;
  height: 86.08%;
  transform: rotate(-13.19deg);
  object-fit: contain;
  animation-delay: -2.6s;
}
.deco--trophy > * {
  width: 78.9%;
  height: 85.95%;
  transform: rotate(13.81deg);
  object-fit: contain;
  object-position: 50% 33%;
  animation-delay: -3.9s;
}
.deco--clap > * {
  width: 74.43%;
  height: 73.71%;
  transform: rotate(27.67deg);
  object-fit: cover;
  animation-delay: -5.2s;
}
.deco--crown > * {
  width: 74.66%;
  height: 73.95%;
  transform: rotate(27.11deg);
  object-fit: cover;
  animation-delay: -6.5s;
}

@keyframes float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -9px;
  }
}

/* ---------- Capability strip ---------- */
.hero__strip {
  position: relative;
  z-index: 3;
  border-top: 1px solid var(--c-line-soft);
}

.capabilities {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 78px;
  font-size: 8px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 1.28px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

/* =========================================================
   SERVICES — 01 · WHAT WE DO
   ========================================================= */
.services {
  background: var(--c-services-bg);
  padding: 135px 0;
}

.section-head {
  padding-bottom: 36px;
}

.eyebrow {
  font-family: var(--font-inter);
  font-size: 9px;
  font-weight: 700;
  line-height: 13.5px;
  letter-spacing: 1.53px;
  text-transform: uppercase;
  color: var(--c-accent);
  padding-top: 6px;
  margin-bottom: 24.5px;
}

.section-title {
  font-size: 64px;
  font-weight: 600;
  line-height: 67.2px;
  letter-spacing: -0.5px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}

.card {
  position: relative;
  min-height: 330px;
  padding: 22px 30px 30px;
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background-image: linear-gradient(
    119.22deg,
    var(--c-card-from) 0%,
    var(--c-card-to) 100%
  );
  transition: filter 0.25s ease;
}
.card:hover {
  filter: brightness(1.14);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  margin-bottom: 12px;
}
.card__icon > * {
  width: 132px;
  height: 132px;
}

.card--game .card__icon > * {
  object-fit: cover;
}
.card--crm .card__icon > * {
  object-fit: contain;
}
.card--supp .card__icon > * {
  object-fit: cover;
}
.card--tech .card__icon > * {
  object-fit: cover;
}

.card__title {
  font-size: 28px;
  font-weight: 500;
  line-height: 40.5px;
  margin-bottom: 16px;
}

.card__text {
  max-width: 530px;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-text-body);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--c-footer-bg);
  padding-top: 125px;
  padding-bottom: 28px;
}

.footer__cta {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-top: 25px;
  padding-bottom: 91px;
}
.footer__cta::before {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  border-bottom: 1px solid var(--c-line);
}

.footer__title {
  font-size: 66px;
  font-weight: 400;
  line-height: 69.3px;
  letter-spacing: -0.5px;
}

.footer__mail {
  display: inline-flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  min-width: 200px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--c-line-mail);
  font-size: 14px;
  line-height: 21px;
  color: var(--c-accent);
  transition: border-color 0.2s ease;
}
.footer__mail:hover {
  border-bottom-color: var(--c-accent);
}
.footer__arrow {
  font-family: var(--font-inter);
}

.footer__grid {
  display: grid;
  /* minmax(0, …) rather than the comp's flat 353/378/252: at 12px the links
     column needs ~82px and the fixed tracks + 129px of gaps would overflow the
     1180 column by ~14px. These shrink just enough instead of overflowing. */
  grid-template-columns: minmax(0, 353px) minmax(0, 378px) minmax(0, 252px) auto;
  column-gap: 43px;
  row-gap: 52px;
  padding-top: 55px;
  padding-bottom: 48px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer__label {
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 1.28px;
  text-transform: uppercase;
  color: var(--c-text-micro);
  padding-top: 9px;
  /* 9 + 15 fills the design's 24px label box, and 14 puts the value back on
     y38 as drawn — so the column still measures the comp's 74px */
  margin-bottom: 14px;
}

.footer__col .logo {
  margin-bottom: 14px;
}

.footer__body {
  font-size: 12px;
  line-height: 18px;
  color: var(--c-text-mute);
}
.footer__body a {
  transition: color 0.18s ease;
}
.footer__body a:hover {
  color: #fff;
}

.footer__col--links {
  gap: 13px;
  white-space: nowrap;
}
.footer__col--links a {
  font-size: 12px;
  line-height: 18px;
  color: var(--c-text-link);
  transition: color 0.18s ease;
}
.footer__col--links a:hover {
  color: #fff;
}

.footer__legal {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-top: 25px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.64px;
  text-transform: uppercase;
  color: var(--c-text-micro);
}
.footer__legal::before {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 0;
  border-top: 1px solid var(--c-line-faint);
}

/* =========================================================
   ABOUT PAGE — page hero
   (Frame 3 · node 1:43 of the About file)
   ========================================================= */
.page-hero {
  position: relative;
  padding-top: 88px; /* was the in-flow header */
  background: var(--c-hero-bg);
  overflow: hidden;
  isolation: isolate;
}

.page-hero__glow {
  position: absolute;
  inset: var(--glow-top, 0) 0 auto 0;
  height: var(--glow-h, 528px);
  z-index: 1;
  opacity: 0.2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 915px var(--glow-r, 229px) at 50% 0%,
    rgb(88, 45, 134) 0%,
    rgb(56, 34, 85) 50%,
    rgb(40, 29, 61) 75%,
    rgb(24, 24, 36) 100%
  );
}

.page-hero__content {
  position: relative;
  z-index: 3;
  padding-top: 112px;
  padding-bottom: 116px;
  text-align: center;
}

.page-hero__title {
  max-width: 954px;
  margin-inline: auto;
  font-size: 68px;
  font-weight: 600;
  line-height: 72px;
  letter-spacing: -0.5px;
}

.page-hero__sub {
  margin-top: 20px;
  margin-inline: auto;
  max-width: 695px;
  font-size: 18px;
  line-height: 27.75px;
  color: var(--c-text-hero);
}

/* =========================================================
   ABOUT PAGE — capability map
   ========================================================= */
.capability {
  background: var(--c-cap-bg);
  padding: 135px 0 150px;
}

.capability__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  padding-bottom: 65px;
}

/* Figma lets this 64px line run past its 612px container (nowrap, 647px wide),
   with the lead paragraph parked to its right — so don't cap the headline. */
.capability__headline {
  min-width: 0;
}
.capability .section-title {
  white-space: nowrap;
}

.capability__lead {
  flex: none;
  width: 360px;
  font-size: 13px;
  line-height: 23.4px;
  color: var(--c-lead);
}

/* 432 / 280 / 432 with an 18px gutter = the design's 1180 column,
   the middle track fixed so the badge keeps its stadium proportion */
.capability__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr);
  gap: 18px;
}

.cap-card {
  display: flex;
  flex-direction: column;
  min-height: 270px;
  padding: 30px 31px 25px 30px;
  border-radius: 20px;
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background-image: linear-gradient(
    116.61deg,
    var(--c-card-from) 0%,
    var(--c-card-to) 100%
  );
  transition: filter 0.25s ease;
}
.cap-card:hover {
  filter: brightness(1.12);
}

.cap-card:nth-of-type(1) {
  grid-column: 1;
  grid-row: 1;
}
.cap-card:nth-of-type(2) {
  grid-column: 3;
  grid-row: 1;
}
.cap-card:nth-of-type(3) {
  grid-column: 1;
  grid-row: 2;
}
.cap-card:nth-of-type(4) {
  grid-column: 3;
  grid-row: 2;
}

.cap-card__num {
  font-family: var(--font-inter);
  font-size: 9px;
  font-weight: 400;
  line-height: 13.5px;
  color: var(--c-num);
}

.cap-card__title {
  margin-top: 94.5px;
  font-size: 28px;
  font-weight: 500;
  line-height: 40.5px;
}

.cap-card__text {
  margin-top: 6.5px;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-text-body);
}

/* centre badge — stadium, spans both rows */
.cap-badge {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  /* the extra bottom padding lifts the mark ~12px above centre, as in Figma */
  padding: 30px 31px 55px 30px;
  border-radius: 1000px;
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: radial-gradient(
    ellipse 118px 137px at 50% 50%,
    rgba(73, 70, 108, 0.29) 0%,
    rgba(50, 48, 74, 0.29) 50%,
    rgba(26, 25, 41, 0.29) 100%
  );
}

.cap-badge__mark {
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 2.08px;
  text-align: center;
  color: #fff;
}

/* =========================================================
   ABOUT PAGE — company information
   ========================================================= */
.info {
  background: var(--c-info-bg);
  padding: 140px 0;
}

.info__grid {
  display: grid;
  grid-template-columns: 480px minmax(0, 1fr);
  column-gap: 100px;
  row-gap: 60px;
  align-items: start;
}

.info__title {
  font-size: 54px;
  font-weight: 400;
  line-height: 56.7px;
  letter-spacing: -0.5px;
}

.info__note {
  margin-top: 23px;
  font-size: 13px;
  line-height: 19.5px;
  color: var(--c-text-body);
}

.info__list {
  margin: 0;
  border-top: 1px solid var(--c-line-faint);
}

.info__row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  padding: 21px 0 22px;
  border-bottom: 1px solid var(--c-line-faint);
}

.info__row dt {
  font-size: 10px;
  line-height: 15px;
  color: var(--c-term);
}

.info__row dd {
  margin: 0;
  font-size: 12px;
  line-height: 19.2px;
  color: var(--c-text);
}
.info__row dd a {
  transition: color 0.18s ease;
}
.info__row dd a:hover {
  color: var(--c-accent);
}

/* =========================================================
   SERVICES PAGE
   (03 · 服务 / Services · node 1:43)
   ========================================================= */

/* Hero band variants. --band carries the shared paddings and responsive type;
   the modifiers only set the glow geometry.
     About    (default)  388→528px tall glow, 229px vertical radius
     --tall   536px band (Services, Contact)
     --short  388px band (Privacy, and any other legal page) */
.page-hero--tall {
  --glow-top: -4px;
  --glow-h: 595px;
  --glow-r: 258px;
}
.page-hero--short {
  --glow-top: -4px;
  --glow-h: 395px;
  --glow-r: 171px;
}
.page-hero--band .page-hero__content {
  padding-top: 108px;
  padding-bottom: 120px;
}
.page-hero__sub--wide {
  max-width: 755px;
}

.services-body {
  background: var(--c-cap-bg);
}

.svc-section {
  padding: 78px 0;
}

/* Figma: copy 540px at x0, media 650px at x570 — so the media deliberately
   runs 40px past the 1180 column's right edge. minmax(0,1fr) reproduces that:
   the track is 610px and the 650px media overflows it, exactly as designed. */
.svc-row {
  display: grid;
  grid-template-columns: 540px minmax(0, 1fr);
  column-gap: 30px;
  align-items: center;
  min-height: 442px;
}

.svc-row__title {
  padding-top: 24px;
  font-size: 54px;
  font-weight: 600;
  line-height: 67.2px;
  letter-spacing: -3.2px;
}

.svc-row__text {
  padding-top: 24px;
  max-width: 570px;
  font-size: 13px;
  line-height: 23.4px;
  color: var(--c-lead);
}

.svc-row__media {
  position: relative;
  width: 650px;
  max-width: none;
  height: 433px;
}
.svc-row__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* row 02's fill is zoomed 1.2x and offset inside its box */
.svc-row--crm .svc-row__media {
  overflow: hidden;
}
.svc-row--crm .svc-row__media img {
  inset: auto;
  left: -13.66%;
  top: -9.98%;
  width: 120.1%;
  height: 120.19%;
  object-fit: fill;
}

/* the two stacked 1px lines that close the body */
.svc-rule {
  width: min(1188px, 100%);
  height: 0;
  margin-inline: auto;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

/* =========================================================
   CONTACT PAGE
   (04 · 联系 / Contact · node 0:44)
   The hero is identical to the Services page — .page-hero--tall.
   ========================================================= */
.contact {
  background: var(--c-cap-bg);
  padding: 140px 0;
}

/* 459 + 100 + 621 = the 1180 column exactly */
.contact__grid {
  display: grid;
  grid-template-columns: 459px minmax(0, 1fr);
  column-gap: 100px;
  align-items: start;
}

.contact__title {
  padding-top: 46px;
  max-width: 425px;
  font-size: 54px;
  font-weight: 600;
  line-height: 67.2px;
}

.contact__lead {
  margin-top: 7px;
  max-width: 430px;
  font-size: 13px;
  line-height: 23.4px;
  color: var(--c-lead);
}

.contact__mail {
  display: inline-flex;
  align-items: flex-start;
  margin-top: 41px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--c-line-faint);
  font-size: 14px;
  line-height: 21px;
  color: var(--c-accent);
  transition: border-color 0.2s ease;
}
.contact__mail:hover {
  border-bottom-color: var(--c-accent);
}

.contact__arrow {
  width: 34px;
  padding-left: 16px;
  font-family: var(--font-inter);
}

/* 303.5 + 14 + 303.5 = 621 */
.contact__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-content: start;
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 231px;
  /* 17px bottom (not 31) so the card lands on the designed 231px height:
     24 label + 133 heading + 24 link + 31 top + 17 bottom + 2 border = 231 */
  padding: 31px 31px 17px;
  border: 1px solid var(--c-line-faint);
  border-radius: 20px;
  background-image: linear-gradient(
    112.36deg,
    var(--c-card-from) 0%,
    var(--c-card-to) 100%
  );
  transition: filter 0.25s ease;
}
.contact-card:hover {
  filter: brightness(1.12);
}

.contact-card--wide {
  grid-column: 1 / span 2;
  min-height: 208px;
  padding: 31px;
  background-image: none;
  background-color: rgba(255, 255, 255, 0.02);
}

.contact-card__label {
  /* height stays 24 (7 + 15 fits) so the cards keep their comp heights */
  height: 24px;
  padding-top: 7px;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 1.12px;
  text-transform: uppercase;
  color: var(--c-accent);
}

.contact-card__title {
  padding: 64px 0 21px;
  max-width: 254px;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}

.contact-card__link {
  height: 24px;
  padding-top: 5px;
  font-size: 12px;
  line-height: 15px;
  color: var(--c-card-meta);
}
.contact-card__link a {
  transition: color 0.18s ease;
}
.contact-card__link a:hover {
  color: var(--c-accent);
}

.contact-card--wide .contact-card__title {
  height: 69px;
  max-width: none;
  padding: 45px 0 0;
}

.contact-card__addr {
  padding-top: 14px;
  max-width: 571px;
  font-size: 12px;
  line-height: 19.25px;
  color: var(--c-addr);
}

/* =========================================================
   LEGAL PAGES  (Privacy Policy · node 1:43 of the Privacy file)
   Generic so a Terms of Use page can reuse it verbatim.
   ========================================================= */
.legal {
  background: var(--c-cap-bg);
  padding: 100px 0;
}

/* Both legal pages put an *empty* 63px Paragraph frame between the lede and the
   first rule — that spacer is the margin-bottom here, not a real element.
   Terms' Heading 1 frame is auto (227px) so the full 63px shows. */
.legal__lede {
  padding-top: 25px;
  margin-bottom: 63px;
  max-width: 1155px;
  font-size: 54px;
  font-weight: 600;
  line-height: 67.2px;
}

/* Privacy's Heading 1 frame is a fixed 130px while its text is 1016px wide and
   wraps to 159.4px — it overflows and eats 29px of the spacer, so the comp
   renders a 34px gap there. This modifier reproduces that. */
.legal__lede--clipped {
  margin-bottom: 34px;
  max-width: 1016px;
}

.legal__section {
  border-top: 1px solid var(--c-line-faint);
  padding: 33px 0 32px;
}

.legal__heading {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}

.legal__text {
  padding-top: 15px;
  font-size: 13px;
  line-height: 23.4px;
  color: var(--c-lead);
}

/* The design's inline link carries a rgba(38,38,38,.4) underline — a light-mode
   leftover that is invisible on this background. Kept as an underline, recoloured
   to the accent so the link still reads as one. */
.legal__text a {
  color: var(--c-accent);
  border-bottom: 1px solid rgba(105, 102, 255, 0.4);
  transition: border-color 0.2s ease;
}
.legal__text a:hover {
  border-bottom-color: var(--c-accent);
}

/* =========================================================
   Scroll reveal
   ========================================================= */
.reveal {
  opacity: 0;
  translate: 0 22px;
  transition:
    opacity 0.7s ease,
    translate 0.7s cubic-bezier(0.22, 0.8, 0.28, 1);
}
.reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}
.no-js .reveal {
  opacity: 1;
  translate: none;
  transition: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* — Laptop / small desktop — */
@media (max-width: 1180px) {
  .hero__title {
    font-size: 56px;
    line-height: 62px;
  }
  .section-title {
    font-size: 52px;
    line-height: 58px;
  }
  .footer__title {
    font-size: 52px;
    line-height: 58px;
  }
  .services {
    padding: 110px 0;
  }
  .footer {
    padding-top: 104px;
  }
  .footer__grid {
    grid-template-columns: 1.1fr 1.2fr 0.9fr auto;
    column-gap: 32px;
  }
  .nav {
    gap: 24px;
  }
}

/* The footer's fixed columns (353 + 378 + 252 + 43px gaps) need ~1222px of
   viewport once the container starts getting padded, so the fluid grid has to
   start above 1180. Scoped with min-width so the ≤1023 two-up rule still wins. */
@media (min-width: 1024px) and (max-width: 1229px) {
  .footer__grid {
    grid-template-columns: 1.1fr 1.2fr 0.9fr auto;
    column-gap: 32px;
  }
}

/* — Tablet: decorations move to the four corners — */
@media (max-width: 1023px) {
  .hero__content {
    padding-top: 76px;
    padding-bottom: 190px;
  }
  .hero__title {
    font-size: 44px;
    line-height: 50px;
  }
  .hero__sub {
    font-size: 16px;
    line-height: 25px;
    margin-top: 24px;
  }

  .deco--gamepad {
    left: -40px;
    top: 92px;
    width: 150px;
    height: 150px;
  }
  .deco--person {
    left: auto;
    right: -12px;
    top: 88px;
    width: 112px;
    height: 111px;
  }
  .deco--gift {
    left: -14px;
    bottom: 116px;
    width: 104px;
    height: 117px;
  }
  .deco--crown {
    left: auto;
    right: -28px;
    bottom: 100px;
    width: 136px;
    height: 135px;
  }
  .deco--trophy,
  .deco--clap {
    display: none;
  }

  .section-title,
  .footer__title {
    font-size: 42px;
    line-height: 48px;
  }

  .card {
    min-height: 300px;
  }
  .card__title {
    font-size: 24px;
    line-height: 34px;
  }

  .footer__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding-bottom: 56px;
  }
  .footer__mail {
    min-width: 0;
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
  .footer__legal {
    flex-direction: column;
    gap: 10px;
  }
}

/* — Mobile — */
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
  }
  html {
    scroll-padding-top: 64px;
  }

  /* nav becomes a drawer */
  .nav-toggle {
    display: block;
  }
  .site-header__inner {
    height: 63px;
  } /* + 1px rule = 64 */
  .hero,
  .page-hero {
    padding-top: 64px;
  }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    /* 100% is the padding box, which excludes the 1px rule — clear it so the
       header's rule stays visible while the drawer is open */
    top: calc(100% + 1px);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: #14141f;
    border-bottom: 1px solid var(--c-line);
    font-size: 15px;
    line-height: 1;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
      max-height 0.32s ease,
      opacity 0.24s ease,
      visibility 0.24s;
  }
  .nav.is-open {
    max-height: 70vh;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
  }
  .nav__link {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .nav__link:last-child {
    border-bottom: 0;
  }

  /* hero */
  .hero__glow {
    height: 560px;
  }
  .hero__content {
    padding-top: 116px;
    padding-bottom: 128px;
  }
  .hero__title {
    font-size: 34px;
    line-height: 41px;
    letter-spacing: -0.2px;
  }
  .hero__title br {
    display: none;
  }
  .hero__sub {
    font-size: 14px;
    line-height: 22px;
    margin-top: 18px;
  }

  .deco--gamepad {
    left: -22px;
    top: 78px;
    width: 90px;
    height: 90px;
  }
  .deco--person {
    left: auto;
    right: -14px;
    top: 72px;
    width: 74px;
    height: 73px;
  }
  .deco--gift {
    left: -8px;
    bottom: 118px;
    width: 66px;
    height: 74px;
  }
  .deco--crown {
    left: auto;
    right: -18px;
    bottom: 104px;
    width: 90px;
    height: 90px;
  }

  /* capability strip → 2×2 */
  .capabilities {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    height: auto;
    padding-block: 22px;
    font-size: 8.5px;
    letter-spacing: 1.1px;
    white-space: normal;
  }
  .capabilities__item:nth-child(even) {
    text-align: right;
  }

  /* services */
  .services {
    padding: 72px 0;
  }
  .eyebrow {
    margin-bottom: 18px;
  }
  .section-title {
    font-size: 32px;
    line-height: 39px;
  }
  .section-title br {
    display: none;
  }
  .section-head {
    padding-bottom: 28px;
  }

  .cards {
    grid-template-columns: 1fr;
  }
  .card {
    min-height: 0;
    padding: 26px 22px 30px;
  }
  .card__icon,
  .card__icon > * {
    width: 92px;
    height: 92px;
  }
  .card__icon {
    margin-bottom: 14px;
  }
  .card__title {
    font-size: 21px;
    line-height: 29px;
    margin-bottom: 10px;
  }
  .card__text {
    font-size: 13.5px;
    line-height: 21px;
  }

  /* footer */
  .footer {
    padding-top: 72px;
    padding-bottom: 24px;
  }
  .footer__cta {
    padding-top: 0;
    padding-bottom: 40px;
    gap: 26px;
  }
  .footer__title {
    font-size: 32px;
    line-height: 39px;
  }
  .footer__title br {
    display: none;
  }
  .footer__mail {
    width: 100%;
    font-size: 13px;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
    padding-top: 36px;
    padding-bottom: 34px;
  }
  .footer__col--links {
    flex-direction: row;
    gap: 24px;
  }

  .footer__legal {
    padding-top: 20px;
  }
}

@media (max-width: 380px) {
  .hero__title {
    font-size: 30px;
    line-height: 37px;
  }
  .deco--gift {
    display: none;
  }
}

/* — Motion preferences — */
@media (prefers-reduced-motion: reduce) {
  .deco__img,
  .deco__emoji {
    animation: none;
  }
  .reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* =========================================================
   RESPONSIVE — About page
   ========================================================= */
@media (max-width: 1180px) {
  .page-hero__title {
    font-size: 56px;
    line-height: 62px;
  }
  .capability {
    padding: 110px 0 120px;
  }
  .info {
    padding: 110px 0;
  }
  .info__title {
    font-size: 46px;
    line-height: 50px;
  }
  .info__grid {
    grid-template-columns: 400px minmax(0, 1fr);
    column-gap: 60px;
  }
  .cap-card__title {
    margin-top: 84px;
    font-size: 24px;
    line-height: 34px;
  }
}

@media (max-width: 1023px) {
  .page-hero__content {
    padding-top: 76px;
    padding-bottom: 84px;
  }
  .page-hero__title {
    font-size: 44px;
    line-height: 50px;
  }
  .page-hero__sub {
    font-size: 16px;
    line-height: 25px;
  }

  .capability__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 40px;
  }
  .capability__lead {
    width: auto;
    max-width: 480px;
  }
  .capability .section-title {
    white-space: normal;
  }

  /* badge becomes a full-width banner above a 2 × 2 card grid */
  .capability__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cap-card:nth-of-type(1) {
    grid-column: 1;
    grid-row: 2;
  }
  .cap-card:nth-of-type(2) {
    grid-column: 2;
    grid-row: 2;
  }
  .cap-card:nth-of-type(3) {
    grid-column: 1;
    grid-row: 3;
  }
  .cap-card:nth-of-type(4) {
    grid-column: 2;
    grid-row: 3;
  }
  .cap-badge {
    grid-column: 1 / span 2;
    grid-row: 1;
    min-height: 180px;
    padding: 30px;
    background: radial-gradient(
      ellipse 320px 120px at 50% 50%,
      rgba(73, 70, 108, 0.29) 0%,
      rgba(50, 48, 74, 0.29) 50%,
      rgba(26, 25, 41, 0.29) 100%
    );
  }

  .info__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 44px;
  }
  .info__title {
    font-size: 40px;
    line-height: 45px;
  }
  .info__row {
    grid-template-columns: 170px minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .page-hero__content {
    padding-top: 56px;
    padding-bottom: 64px;
  }
  .page-hero__title {
    font-size: 34px;
    line-height: 41px;
    letter-spacing: -0.2px;
  }
  .page-hero__sub {
    font-size: 14px;
    line-height: 22px;
    margin-top: 16px;
  }

  .capability {
    padding: 72px 0 76px;
  }
  .capability__head {
    gap: 16px;
    padding-bottom: 28px;
  }

  .capability__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .cap-card {
    min-height: 0;
    padding: 24px 22px 26px;
    border-radius: 16px;
  }
  .cap-card:nth-of-type(1) {
    grid-column: 1;
    grid-row: 2;
  }
  .cap-card:nth-of-type(2) {
    grid-column: 1;
    grid-row: 3;
  }
  .cap-card:nth-of-type(3) {
    grid-column: 1;
    grid-row: 4;
  }
  .cap-card:nth-of-type(4) {
    grid-column: 1;
    grid-row: 5;
  }
  .cap-card__title {
    margin-top: 26px;
    font-size: 21px;
    line-height: 29px;
  }
  .cap-card__text {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 21px;
  }

  .cap-badge {
    grid-column: 1;
    grid-row: 1;
    min-height: 132px;
    padding: 24px;
    background: radial-gradient(
      ellipse 190px 80px at 50% 50%,
      rgba(73, 70, 108, 0.29) 0%,
      rgba(50, 48, 74, 0.29) 50%,
      rgba(26, 25, 41, 0.29) 100%
    );
  }
  .cap-badge__mark {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 1.8px;
  }

  .info {
    padding: 72px 0;
  }
  .info__grid {
    row-gap: 32px;
  }
  .info__title {
    font-size: 30px;
    line-height: 37px;
  }
  .info__title br {
    display: none;
  }
  .info__note {
    margin-top: 16px;
  }
  .info__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
    padding: 16px 0 18px;
  }
}

/* =========================================================
   RESPONSIVE — Services page
   ========================================================= */
/* The designed media overhang needs a 1180 column plus 40px of slack, i.e.
   ~1268px of viewport. Below 1280 the row goes fluid so nothing gets clipped. */
@media (max-width: 1279px) {
  .page-hero__title br {
    display: none;
  }
  .page-hero--band .page-hero__title {
    font-size: 56px;
    line-height: 62px;
  }
  .page-hero--band .page-hero__content {
    padding-top: 88px;
    padding-bottom: 96px;
  }

  .svc-section {
    padding: 64px 0;
  }
  .svc-row {
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    column-gap: 32px;
    min-height: 0;
  }
  .svc-row__title {
    font-size: 44px;
    line-height: 54px;
    letter-spacing: -2px;
  }
  .svc-row__media {
    width: 100%;
    height: auto;
    aspect-ratio: 650 / 433;
  }
  .svc-row__media img {
    position: absolute;
  }
}

@media (max-width: 1023px) {
  /* .page-hero--tall beats the shared .page-hero__title rule, so the
     smaller sizes have to be restated at this specificity */
  .page-hero--band .page-hero__title {
    font-size: 40px;
    line-height: 47px;
  }
  .page-hero--band .page-hero__content {
    padding-top: 68px;
    padding-bottom: 72px;
  }

  .svc-section {
    padding: 52px 0;
  }
  .svc-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 26px;
  }
  .svc-row__media {
    order: -1;
  }
  .svc-row__title {
    font-size: 38px;
    line-height: 46px;
    letter-spacing: -1.4px;
    padding-top: 0;
  }
  .svc-row__title br {
    display: none;
  }
  .svc-row__text {
    padding-top: 18px;
  }
}

@media (max-width: 767px) {
  .page-hero--band .page-hero__title {
    font-size: 30px;
    line-height: 38px;
  }
  .page-hero--band .page-hero__content {
    padding-top: 52px;
    padding-bottom: 56px;
  }

  .svc-section {
    padding: 40px 0;
  }
  .svc-row {
    row-gap: 20px;
  }
  .svc-row__title {
    font-size: 27px;
    line-height: 34px;
    letter-spacing: -0.6px;
  }
  .svc-row__text {
    padding-top: 14px;
    font-size: 13.5px;
    line-height: 21px;
  }
}

/* =========================================================
   RESPONSIVE — Contact page
   ========================================================= */
@media (max-width: 1180px) {
  .contact {
    padding: 110px 0;
  }
  .contact__grid {
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    column-gap: 48px;
  }
  .contact__title {
    font-size: 46px;
    line-height: 54px;
    max-width: none;
  }
}

@media (max-width: 1023px) {
  .contact {
    padding: 88px 0;
  }
  .contact__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }
  .contact__title {
    padding-top: 0;
    font-size: 42px;
    line-height: 50px;
  }
  .contact__lead {
    margin-top: 14px;
    max-width: 560px;
  }
  .contact__mail {
    margin-top: 32px;
  }
}

@media (max-width: 767px) {
  .contact {
    padding: 64px 0;
  }
  .contact__grid {
    row-gap: 36px;
  }
  .contact__title {
    font-size: 30px;
    line-height: 38px;
  }
  .contact__lead {
    margin-top: 12px;
  }
  .contact__mail {
    margin-top: 26px;
    font-size: 13px;
  }

  .contact__cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-card {
    min-height: 0;
    padding: 24px 22px 22px;
    border-radius: 16px;
  }
  .contact-card--wide {
    grid-column: 1;
    min-height: 0;
    padding: 24px 22px;
  }
  .contact-card__title {
    padding: 34px 0 16px;
    max-width: none;
    font-size: 18px;
    line-height: 25px;
  }
  .contact-card--wide .contact-card__title {
    height: auto;
    padding: 22px 0 0;
  }
  .contact-card__addr {
    padding-top: 12px;
  }
}

/* =========================================================
   RESPONSIVE — Legal pages
   ========================================================= */
@media (max-width: 1180px) {
  .legal {
    padding: 88px 0;
  }
  .legal__lede {
    font-size: 46px;
    line-height: 54px;
  }
}

@media (max-width: 1023px) {
  .legal {
    padding: 72px 0;
  }
  .legal__lede {
    font-size: 38px;
    line-height: 46px;
    margin-bottom: 34px;
  }
  .legal__lede--clipped {
    margin-bottom: 26px;
  }
}

@media (max-width: 767px) {
  .legal {
    padding: 56px 0;
  }
  .legal__lede {
    padding-top: 0;
    margin-bottom: 24px;
    font-size: 27px;
    line-height: 35px;
  }
  .legal__lede--clipped {
    margin-bottom: 20px;
  }
  .legal__section {
    padding: 26px 0 24px;
  }
  .legal__heading {
    font-size: 18px;
    line-height: 23px;
  }
  .legal__text {
    padding-top: 12px;
    font-size: 13.5px;
    line-height: 21px;
  }
}