@font-face { font-family: 'Satoshi'; src: url('/fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
/* brand:start — generated by scripts/brand.mjs from brand.json (npm run brand). Do not edit by hand. */
@font-face { font-family: 'Satoshi'; src: url('/fonts/satoshi-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }
:root { --display: 'Satoshi', "Arial Black", "Helvetica Neue", sans-serif; --display-weight: 900; --display-track: -0.035em; --display-scale: 1; }
/* brand:end */

:root {
  --ink: #08090f;
  --chrome: #121622;
  --paper: #f8f4f1;
  --muted: #acb3c3;
  --ember: #ff693c;
  --pink: #ff4fa3;
  --violet: #7c3cff;
  --cyan: #49d7e8;
  --line: rgba(255, 255, 255, 0.16);
  --glass: rgba(10, 12, 20, 0.62);
  --body: "Satoshi", "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
  --utility: "SFMono-Regular", Menlo, Consolas, monospace;
  --header-height: 88px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  overflow: hidden;
}

button,
input,
textarea,
select {
  color: inherit;
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 99px;
  background: var(--paper);
  color: var(--ink);
  font: 700 12px var(--utility);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.boot-screen {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  animation: splash-out 560ms cubic-bezier(.2, .8, .2, 1) 1050ms forwards;
  background:
    radial-gradient(circle at 50% 47%, rgba(124, 60, 255, 0.22), transparent 26%),
    radial-gradient(circle at 37% 54%, rgba(255, 79, 163, 0.13), transparent 18%),
    linear-gradient(145deg, #0d1020 0%, #05060a 52%, #0d0814 100%);
  transition: opacity 780ms cubic-bezier(.2, .8, .2, 1), visibility 780ms, transform 900ms cubic-bezier(.2, .8, .2, 1);
}

.boot-screen::before {
  content: "";
  position: absolute;
  inset: -15%;
  background:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255, 255, 255, 0.018) 80px),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(255, 255, 255, 0.018) 80px);
  transform: perspective(900px) rotateX(60deg) translateY(25%);
  mask-image: linear-gradient(transparent, black 35%);
}

.boot-noise,
.world-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.17;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.boot-orbit {
  position: absolute;
  width: min(65vw, 720px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  animation: boot-spin 18s linear infinite;
}

.boot-orbit::before,
.boot-orbit::after {
  content: "";
  position: absolute;
  width: 9px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 28px var(--pink);
}

.boot-orbit::before { top: 11%; left: 17%; }
.boot-orbit::after { right: 2%; bottom: 36%; background: var(--cyan); box-shadow: 0 0 28px var(--cyan); }
.boot-orbit-two { width: min(44vw, 490px); animation-direction: reverse; animation-duration: 13s; opacity: 0.65; }

@keyframes boot-spin { to { transform: rotate(360deg); } }

.boot-lockup {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.boot-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 86px;
  aspect-ratio: 1;
  margin-bottom: 22px;
  transform: rotate(-7deg);
}

.boot-mark i,
.mini-mark {
  position: absolute;
  inset: 0;
  border-radius: 25px 9px 27px 10px;
  background: linear-gradient(135deg, var(--ember), var(--pink) 48%, var(--violet));
  box-shadow: 0 18px 55px rgba(255, 79, 163, 0.28);
}

.boot-mark b {
  position: relative;
  color: #fff;
  font: 900 italic 29px/1 var(--display);
  letter-spacing: -0.12em;
  transform: translateX(-2px);
}

.boot-title {
  font: 900 clamp(35px, 6vw, 78px)/0.9 var(--display);
  letter-spacing: -0.065em;
  text-transform: uppercase;
  text-shadow: 0 3px 25px rgba(0, 0, 0, 0.45);
}

.boot-prompt {
  margin-top: 30px;
  color: #d4d7e0;
  font: 600 12px/1 var(--utility);
  letter-spacing: 0.12em;
  animation: prompt-pulse 1.8s ease-in-out infinite;
}

@keyframes prompt-pulse {
  50% { opacity: 0.4; }
}

.boot-meta {
  position: absolute;
  right: clamp(20px, 4vw, 58px);
  bottom: clamp(22px, 4vw, 48px);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font: 600 9px var(--utility);
  letter-spacing: 0.12em;
}

.boot-meta i {
  width: 35px;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
}

.boot-meta span { color: var(--cyan); }

@keyframes splash-out { to { visibility: hidden; opacity: 0; transform: scale(1.06); } }

body[data-booted="true"] .boot-screen {
  visibility: hidden;
  opacity: 0;
  transform: scale(1.08);
  pointer-events: none;
}

.console-shell {
  position: relative;
  min-height: 100dvh;
}

.world-stage,
.world-art,
.world-chrome,
.world-grain {
  position: fixed;
  inset: 0;
}

.world-stage {
  z-index: 0;
  overflow: hidden;
  background: var(--ink);
}

.world-art {
  background-position: center 46%;
  background-size: cover;
  filter: saturate(1.16) contrast(1.04);
  opacity: 0;
  transform: scale(1.045);
  transition: opacity 760ms ease, transform 7s ease-out;
}

.world-art.is-visible {
  opacity: 1;
  transform: scale(1);
}

.world-chrome {
  background:
    linear-gradient(90deg, rgba(5, 6, 11, 0.98) 0%, rgba(5, 6, 11, 0.86) 27%, rgba(5, 6, 11, 0.18) 69%, rgba(5, 6, 11, 0.5) 100%),
    linear-gradient(0deg, rgba(4, 5, 9, 0.94) 0%, transparent 38%, rgba(4, 5, 9, 0.65) 100%);
}

.world-chrome::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 72% 48%, transparent 0 23%, rgba(8, 9, 15, 0.36) 70%);
}

.world-grain { opacity: 0.14; }

.console-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) auto minmax(180px, 0.8fr);
  align-items: center;
  width: 100%;
  height: var(--header-height);
  padding: 0 clamp(24px, 3.8vw, 64px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(rgba(7, 8, 14, 0.78), rgba(7, 8, 14, 0.15));
  backdrop-filter: blur(14px);
}

.brand-lockup,
.mode-link,
.header-cta,
.rail-dot,
.library-arrows button,
.primary-action,
.text-action,
.dialog-close,
.offer-tile button,
.mobile-dock button {
  cursor: pointer;
}

.brand-lockup {
  display: flex;
  align-items: center;
  justify-self: start;
  gap: 13px;
  padding: 0;
  color: var(--paper);
  background: none;
  font-size: 15px;
}

.brand-lockup b { font-weight: 800; }

.mini-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 11px 5px 12px 5px;
  color: white;
  font: 900 italic 12px var(--display);
  letter-spacing: -0.1em;
  transform: rotate(-6deg);
}

.mode-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(5, 6, 10, 0.32);
}

.mode-link {
  position: relative;
  padding: 10px 15px;
  border-radius: 99px;
  color: rgba(255, 255, 255, 0.62);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  transition: color 180ms, background 180ms, transform 180ms;
}

.mode-link:hover { color: white; transform: translateY(-1px); }
.mode-link:is(.is-active, [aria-current="page"]) { color: white; background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.mode-link-gta:is(.is-active, [aria-current="page"]) { background: linear-gradient(135deg, rgba(255, 105, 60, 0.48), rgba(255, 79, 163, 0.38)); }

.header-cta {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: white;
  background: rgba(4, 5, 9, 0.32);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  backdrop-filter: blur(10px);
  transition: background 180ms, transform 180ms;
}

.header-cta:hover { background: rgba(255, 255, 255, 0.13); transform: translateY(-1px); }
.header-cta i { display: inline; width: auto; aspect-ratio: auto; border-radius: 0; background: none; color: inherit; font-style: normal; opacity: .85; }

.screen-rail {
  position: fixed;
  z-index: 25;
  top: 50%;
  left: clamp(24px, 3.8vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  transform: translateY(-50%);
}

.rail-player { color: rgba(255, 255, 255, 0.45); font: 600 8px var(--utility); letter-spacing: 0.1em; }

.rail-dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 50%;
  background: transparent;
  transition: transform 220ms, background 220ms, box-shadow 220ms;
}

.rail-dot span {
  position: absolute;
  top: 50%;
  left: 21px;
  width: max-content;
  color: white;
  font: 600 9px var(--utility);
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translate(5px, -50%);
  transition: opacity 160ms, transform 160ms;
  pointer-events: none;
}

.rail-dot:hover span,
.rail-dot:focus-visible span { opacity: 1; transform: translate(0, -50%); }
.rail-dot.is-active { background: white; transform: scale(1.35); box-shadow: 0 0 15px rgba(255, 255, 255, 0.58); }
.rail-line { width: 1px; height: 38px; background: linear-gradient(rgba(255,255,255,.3), transparent); }

.screen-stack {
  position: relative;
  z-index: 10;
  min-height: 100dvh;
}

.game-screen {
  position: fixed;
  z-index: 0;
  inset: var(--header-height) 0 0;
  min-height: calc(100dvh - var(--header-height));
  opacity: 0;
  transform: translateY(18px) scale(0.995);
  transition: opacity 360ms ease, transform 480ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.game-screen[hidden] { display: block; visibility: hidden; }
.game-screen.is-active { z-index: 2; visibility: visible; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.screen-inner {
  width: 100%;
  height: 100%;
  padding: clamp(38px, 5vh, 68px) clamp(34px, 7.7vw, 132px) 56px clamp(86px, 9.2vw, 158px);
}

.screen-home .screen-inner {
  padding-top: clamp(280px, 34vh, 330px);
}

.home-copy { max-width: 980px; }

.mode-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.68);
  font: 700 10px/1 var(--utility);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mode-eyebrow::before {
  content: "";
  width: 25px;
  height: 1px;
  background: currentColor;
}

.home-copy .home-title,
.section-copy h2,
.founder-copy h2,
.gta-heading h2,
.console-dialog h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  text-transform: uppercase;
}

.home-copy .home-title {
  max-width: 980px;
  font-size: clamp(44px, 5.6vw, 86px);
  line-height: 0.86;
  text-shadow: 0 9px 35px rgba(0, 0, 0, 0.4);
}

.home-description {
  max-width: 585px;
  margin: 27px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(15px, 1.35vw, 20px);
  line-height: 1.5;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.55);
}

.home-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 28px;
}

.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 180ms, box-shadow 180ms, background 180ms;
}

.primary-action:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 16px 42px rgba(0,0,0,.26); background: white; }
.primary-action > span, .primary-action > i { display: inline; width: auto; aspect-ratio: auto; border-radius: 0; color: inherit; background: none; font-size: 15px; font-style: normal; opacity: .85; }
.primary-action i { font-style: normal; }

.selection-format { color: rgba(255, 255, 255, 0.57); font: 650 9px var(--utility); letter-spacing: 0.1em; }

.library-zone {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: clamp(10px, 1.8vh, 22px);
  width: 100%;
}

.library-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 0 clamp(34px, 3.8vw, 64px) 12px clamp(86px, 9.2vw, 158px);
}

.library-heading > div:first-child { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.68); font: 700 9px var(--utility); letter-spacing: .12em; }
.library-heading b { color: white; font-weight: 600; }
.library-arrows { display: flex; gap: 6px; }
.library-arrows button { display: grid; place-items: center; width: 30px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: white; background: rgba(7,8,14,.42); backdrop-filter: blur(8px); transition: background 180ms, transform 180ms; }
.library-arrows button:hover { background: rgba(255,255,255,.15); transform: scale(1.06); }

.library-rail {
  display: flex;
  gap: 13px;
  padding: 0 clamp(34px, 3.8vw, 64px) 17px clamp(86px, 9.2vw, 158px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.library-rail::-webkit-scrollbar { display: none; }

.game-card {
  position: relative;
  flex: 0 0 clamp(152px, 12.6vw, 205px);
  aspect-ratio: 1.08 / 1;
  padding: 0;
  overflow: hidden;
  scroll-snap-align: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 17px;
  color: white;
  background: #171924;
  box-shadow: 0 9px 26px rgba(0, 0, 0, 0.22);
  text-align: left;
  transform-origin: bottom;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), border-color 200ms, box-shadow 280ms, filter 220ms;
  cursor: pointer;
}

.game-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) brightness(0.75);
  transition: filter 240ms, transform 550ms cubic-bezier(.2,.8,.2,1);
}

.game-card:hover { transform: translateY(-8px) scale(1.02); }
.game-card:hover img { filter: saturate(1.15) brightness(0.9); transform: scale(1.04); }
.game-card.is-selected { z-index: 3; border-color: rgba(255, 255, 255, 0.95); box-shadow: 0 14px 42px rgba(0,0,0,.36), 0 0 0 2px rgba(255,255,255,.2); transform: translateY(-13px) scale(1.06); }
.game-card.is-selected img { filter: saturate(1.23) brightness(1.03); transform: scale(1.035); }
.game-card-special.is-selected { border-color: var(--pink); box-shadow: 0 15px 45px rgba(0,0,0,.36), 0 0 24px rgba(255,79,163,.32); }

.card-shade,
.offer-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 5, 9, 0.95) 0%, rgba(5,5,9,.18) 62%, rgba(5,5,9,.2) 100%);
}

.card-number { position: absolute; top: 10px; right: 11px; color: rgba(255,255,255,.72); font: 600 8px var(--utility); }
.card-label { position: absolute; right: 12px; bottom: 12px; left: 12px; display: flex; flex-direction: column; gap: 3px; }
.card-label small { color: rgba(255,255,255,.65); font: 600 8px var(--utility); letter-spacing: .08em; text-transform: uppercase; }
.card-label b { font-size: 13px; line-height: 1.12; white-space: normal; overflow-wrap: break-word; }



.split-screen,
.founder-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.68fr) minmax(520px, 1.32fr);
  align-items: center;
  gap: clamp(38px, 6vw, 100px);
}

.section-copy h2,
.founder-copy h2 {
  font-size: clamp(50px, 6vw, 92px);
  line-height: 0.85;
}

.section-copy > p:not(.mode-eyebrow),
.founder-copy > p:not(.mode-eyebrow),
.gta-heading > p:not(.mode-eyebrow) {
  max-width: 510px;
  margin: 25px 0 0;
  color: rgba(255,255,255,.72);
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.55;
}

.chapter-list {
  max-width: 480px;
  margin: 35px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.chapter-list li {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  color: rgba(255,255,255,.48);
  font-size: 12px;
  transition: color 200ms, padding 200ms;
}

.chapter-list li span,
.chapter-list li i { font: 600 8px var(--utility); font-style: normal; }
.chapter-list li b { font-weight: 700; }
.chapter-list li.is-current { padding-left: 8px; color: white; }
.chapter-list li.is-current span { color: var(--cyan); }

.services-list { max-width: 560px; margin-top: 24px; }
.services-list li { align-items: start; padding: 11px 0; color: rgba(255,255,255,.92); font-size: 15px; }
.services-list li i { padding-top: 4px; text-align: right; }
.services-list li em { display: block; margin-top: 5px; color: rgba(255,255,255,.66); font-size: 13px; font-weight: 400; line-height: 1.4; font-style: normal; }
.role-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.role-chips span { padding: 3px 8px; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; color: white; font: 600 10px var(--utility); }
.role-chips span { text-transform: uppercase; }
.screen-how { overflow-y: auto; }
.screen-how .screen-inner { min-height: 100%; height: auto; }
#how-title { font-size: clamp(44px,4.8vw,74px); }

.video-deck,
.founder-film {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 28px;
  color: white;
  background: #11131b;
  box-shadow: 0 35px 80px rgba(0,0,0,.45);
  text-align: left;
  cursor: pointer;
  transform: perspective(1200px) rotateY(-2deg);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms;
}

.video-deck:hover,
.founder-film:hover { transform: perspective(1200px) rotateY(0) translateY(-5px); box-shadow: 0 42px 100px rgba(0,0,0,.54); }
.video-deck img,
.founder-film img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.12) brightness(.76); transition: filter 500ms, transform 8s ease-out; }

.video-deck::before,
.founder-film::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: radial-gradient(circle at 50%, transparent 0 35%, rgba(3,4,8,.45) 100%);
}

.video-chrome { position: absolute; z-index: 3; top: 20px; right: 22px; left: 22px; display: flex; justify-content: space-between; color: rgba(255,255,255,.78); font: 600 9px var(--utility); letter-spacing: .09em; }
.video-chrome i { font-style: normal; }
.video-play { position: absolute; z-index: 3; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 12px; transform: translate(-50%,-50%); transition: opacity 240ms, transform 240ms; }
.video-play i { display: grid; place-items: center; width: 68px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(7,8,13,.4); backdrop-filter: blur(12px); font-style: normal; }
.video-play b { font: 700 9px var(--utility); letter-spacing: .1em; text-transform: uppercase; }
.video-play { color: white; text-decoration: none; }
.video-caption { position: absolute; z-index: 3; right: 22px; bottom: 28px; left: 22px; max-width: 410px; font: 750 clamp(14px,1.4vw,20px)/1.25 var(--body); text-shadow: 0 2px 15px rgba(0,0,0,.7); }

.founder-layout { grid-template-columns: minmax(520px, 1.3fr) minmax(310px, .7fr); }
.founder-film { aspect-ratio: 16/10.8; transform: perspective(1200px) rotateY(2deg); }
.founder-film:hover { transform: perspective(1200px) rotateY(0) translateY(-5px); }
.founder-copy { padding-right: 4vw; }

.screen-gta .world-chrome { background: none; }
.gta-skyline { position: absolute; top: -8vh; right: 1vw; color: rgba(255,255,255,.08); font: 900 clamp(280px,40vw,660px)/1 var(--display); letter-spacing: -.15em; pointer-events: none; }
.gta-skyline span { background: linear-gradient(rgba(255,255,255,.12),transparent 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gta-layout { display: grid; grid-template-columns: minmax(500px,.9fr) minmax(520px,1.1fr); align-items: center; gap: clamp(30px,4vw,60px); padding-top: 30px; }
.gta-heading h2 { max-width: 640px; font-size: clamp(34px,3vw,44px); line-height: .94; }
.gta-heading h2 em { color: transparent; background: linear-gradient(100deg,var(--ember),var(--pink),#e1a0ff); background-clip: text; -webkit-background-clip: text; font-style: normal; }
.gta-heading > p:not(.mode-eyebrow) { max-width: 540px; }
.gta-logo { display: block; width: auto; height: 84px; margin-bottom: 14px; object-fit: contain; }
.gta-packs-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.offer-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(180px,1fr)); gap: 12px; max-height: 68vh; }
.offer-tile { position: relative; min-height: 190px; padding: 19px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; background: linear-gradient(145deg,rgba(26,27,39,.88),rgba(9,10,16,.7)); box-shadow: 0 18px 50px rgba(0,0,0,.25); backdrop-filter: blur(14px); transition: transform 220ms,border-color 220ms,background 220ms; cursor: pointer; }
.offer-tile:hover { z-index: 2; border-color: rgba(255,255,255,.42); transform: translateY(-4px); background: linear-gradient(145deg,rgba(38,35,53,.94),rgba(10,11,17,.8)); }
.offer-featured { grid-row: span 2; min-height: 390px; display: flex; flex-direction: column; justify-content: flex-end; }
.offer-featured img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.2); }
.offer-featured .offer-shade { z-index: 1; background: linear-gradient(0deg,rgba(8,8,13,.98) 0%,rgba(8,8,13,.92) 50%,rgba(8,8,13,.14) 100%); }
.offer-tile small,.offer-tile h3,.offer-tile p,.offer-tile button { position: relative; z-index: 2; }
.offer-tile small { color: var(--pink); font: 700 8px var(--utility); letter-spacing: .1em; }
.offer-tile h3 { margin: 10px 0 7px; font-size: clamp(17px,1.4vw,22px); line-height: 1.05; }
.offer-tile p { margin: 0; color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.45; }
.offer-tile button { position: absolute; right: 15px; bottom: 14px; display: flex; gap: 6px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 99px; color: rgba(255,255,255,.66); background: rgba(7,8,13,.48); font: 600 8px var(--utility); opacity: 0; transform: translateY(3px); transition: opacity 180ms,transform 180ms,background 180ms; }
.offer-tile:hover button,.offer-tile:focus-within button { opacity: 1; transform: translateY(0); }
.offer-tile button:hover { background: rgba(255,255,255,.14); color: white; }
.offer-tile button i { font-style: normal; }
.offer-tile:not(.offer-featured) { padding-bottom: 45px; }

.console-dialog {
  width: min(900px, calc(100vw - 40px));
  max-width: none;
  max-height: min(780px, calc(100dvh - 40px));
  padding: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 30px;
  color: var(--paper);
  background: rgba(12,14,22,.96);
  box-shadow: 0 50px 140px rgba(0,0,0,.72);
  backdrop-filter: blur(24px);
}

.console-dialog[open] { display: grid; grid-template-columns: .84fr 1.16fr; animation: dialog-in 300ms cubic-bezier(.2,.8,.2,1); }
.console-dialog::backdrop { background: rgba(3,4,8,.72); backdrop-filter: blur(12px); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.dialog-art { min-height: 520px; background-position: center; background-size: cover; }
.dialog-body { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(34px,5vw,70px); }
.dialog-close { position: absolute; z-index: 5; top: 18px; right: 18px; display: grid; place-items: center; width: 35px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; color: white; background: rgba(255,255,255,.06); font-size: 21px; }
.console-dialog h2 { font-size: clamp(43px,5vw,76px); line-height: .86; }
.dialog-body > p:not(.mode-eyebrow) { margin: 22px 0 0; color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.6; }
.dialog-actions { display: flex; align-items: center; gap: 16px; margin-top: 30px; }
.text-action { padding: 12px; color: rgba(255,255,255,.65); background: none; font-size: 11px; font-weight: 700; }
.text-action:hover { color: white; }

.consultation-dialog { width: min(1050px,calc(100vw - 40px)); }
.consultation-dialog[open] { grid-template-columns: .74fr 1.26fr; }
.consultation-art { position: relative; display: flex; align-items: flex-end; min-height: 680px; padding: 42px; overflow: hidden; background: linear-gradient(25deg,rgba(10,10,16,.2),rgba(255,79,163,.1)),url('/art/own/share-card.jpg') center/cover; }
.consultation-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(7,8,13,.82),transparent 65%); }
.consultation-art span { position: relative; z-index: 2; font: 900 clamp(48px,5vw,78px)/.82 var(--display); letter-spacing: -.08em; }
.consultation-body { overflow-y: auto; }
.consultation-body h2 { margin-bottom: 25px; }


.mobile-dock { display: none; }
.screen-announcer { position: fixed; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 1120px) {
  .console-header { grid-template-columns: 200px 1fr 145px; padding-inline: 28px; }
  .mode-link { padding-inline: 10px; }
  .screen-rail { left: 28px; }
  .screen-inner { padding-left: 80px; padding-right: 38px; }
  .split-screen,.founder-layout { gap: 35px; grid-template-columns: minmax(280px,.72fr) minmax(450px,1.28fr); }
  .gta-layout { grid-template-columns: minmax(330px,.8fr) minmax(520px,1.2fr); gap: 30px; }
  .offer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); overflow-y: auto; padding-right: 5px; }
  .offer-featured { grid-row: span 2; }
}

@media (max-height: 790px) and (min-width: 761px) {
  :root { --header-height: 74px; }
  .console-header { height: 74px; }
  .screen-inner { padding-top: 30px; padding-bottom: 42px; }
  .screen-home .screen-inner { padding-top: 248px; }
  .home-copy .home-title { font-size: clamp(48px,6vw,82px); }
  .home-description { margin-top: 18px; max-width: 520px; font-size: 15px; }
  .home-actions { margin-top: 20px; }
  .library-zone { top: 8px; }
  .game-card { flex-basis: clamp(130px,13vw,180px); }
  .video-deck,.founder-film { max-height: 62vh; }
  .chapter-list { margin-top: 20px; }
  .chapter-list li { padding-block: 11px; }
  .gta-heading h2 { font-size: clamp(34px,3vw,44px); }
  .offer-grid { max-height: 66vh; }
  .offer-tile { min-height: 155px; }
  .offer-featured { min-height: 325px; }
}

@media (max-width: 760px) {
  :root { --header-height: 68px; }
  body { overflow: hidden; }
  .boot-orbit { width: 115vw; }
  .boot-orbit-two { width: 76vw; }
  .boot-title { max-width: 320px; font-size: clamp(38px,13vw,58px); }
  .boot-prompt { font-size: 10px; }
  .boot-meta { right: 20px; bottom: max(22px,env(safe-area-inset-bottom)); }

  .console-header {
    grid-template-columns: 1fr auto;
    height: var(--header-height);
    padding: 0 17px;
  }
  .brand-lockup { font-size: 13px; }
  .mini-mark { width: 36px; height: 36px; }
  .mode-nav { justify-content: flex-start; order: 3; position: absolute; top: var(--header-height); left: 0; width: 100%; padding: 8px 14px; overflow-x: auto; border: 0; border-top: 1px solid rgba(255,255,255,.06); border-radius: 0; background: rgba(7,8,14,.75); scrollbar-width: none; }
  .mode-nav::-webkit-scrollbar { display: none; }
  .mode-link { flex: 0 0 auto; padding: 8px 12px; font-size: 10px; }
  .header-cta { padding: 9px 10px 9px 13px; }
  .screen-rail,
  .game-screen { inset: calc(var(--header-height) + 49px) 0 0; min-height: calc(100dvh - var(--header-height) - 49px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .screen-inner { height: auto; min-height: 100%; padding: 29px 18px 40px; }
  .world-chrome { background: linear-gradient(0deg,rgba(5,6,11,.96) 0%,rgba(5,6,11,.52) 65%,rgba(5,6,11,.76) 100%),linear-gradient(90deg,rgba(5,6,11,.87),rgba(5,6,11,.12)); }
  .world-art { background-position: center; }

  .screen-home { overflow-y: auto; }
  .screen-home .screen-inner { padding: 248px 20px 40px; }
  .home-copy .home-title { font-size: clamp(42px, 12vw, 58px); line-height: .86; }
  .home-description { margin-top: 18px; font-size: 14px; line-height: 1.45; }
  .home-actions { align-items: flex-start; margin-top: 19px; }
  .primary-action { min-height: 44px; padding-inline: 18px; }
  .selection-format { display: none; }
  .mode-eyebrow { margin-bottom: 15px; font-size: 8px; }
  .library-zone { right: 0; top: 6px; width: 100%; }
  .library-heading { padding: 0 19px 10px; }
  .library-arrows { display: none; }
  .library-rail { gap: 10px; padding: 0 20px 18px; }
  .game-card { flex-basis: 43vw; max-width: 180px; min-height: 176px; border-radius: 15px; }
  .game-card.is-selected { transform: translateY(-8px) scale(1.035); }

  .split-screen,.founder-layout,.gta-layout { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .section-copy h2,.founder-copy h2 { font-size: clamp(49px,15vw,68px); }
  .section-copy > p:not(.mode-eyebrow),.founder-copy > p:not(.mode-eyebrow),.gta-heading > p:not(.mode-eyebrow) { margin-top: 17px; font-size: 14px; }
  .video-deck,.founder-film { order: -1; aspect-ratio: 4/3; border-radius: 20px; transform: none; }
  .video-deck { flex: 0 0 auto; }
  .video-deck:hover,.founder-film:hover { transform: none; }
  .video-play i { width: 55px; }
  .video-caption { font-size: 14px; }
  .chapter-list { margin-top: 24px; }
  .services-list li { grid-template-columns: 23px minmax(0,1fr) auto; gap: 7px; }
  .services-list li i { max-width: 66px; }


  .founder-copy { padding: 0; }


  .gta-layout { padding-top: 27px; }
  .gta-heading h2 { font-size: clamp(29px,7.5vw,34px); }
  .gta-logo { height: 68px; }
  .offer-grid { display: flex; max-height: none; padding: 0 0 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .offer-grid::-webkit-scrollbar { display: none; }
  .offer-tile,.offer-featured { flex: 0 0 78vw; min-height: 260px; scroll-snap-align: center; }
  .offer-tile:not(.offer-featured) { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 65px; }
  .offer-tile button { right: 18px; bottom: 18px; opacity: 1; transform: none; }
  .gta-skyline { top: -2vh; font-size: 95vw; }

  .mobile-dock { position: fixed; z-index: 50; right: 10px; bottom: max(10px,env(safe-area-inset-bottom)); left: 10px; display: grid; grid-template-columns: repeat(5,1fr); padding: 7px 6px 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 19px; background: rgba(9,10,16,.84); box-shadow: 0 18px 55px rgba(0,0,0,.48); backdrop-filter: blur(20px); }
  .mobile-dock button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 4px; border-radius: 12px; color: rgba(255,255,255,.65); background: none; font: 650 8px var(--utility); text-align: center; line-height: 1.15; }
  .mobile-dock button i { display: grid; place-items: center; min-width: 27px; height: 27px; border-radius: 9px; font-style: normal; }
  .mobile-dock button.is-active { color: white; }
  .mobile-dock button.is-active i { background: linear-gradient(135deg,var(--ember),var(--pink),var(--violet)); box-shadow: 0 5px 14px rgba(255,79,163,.25); }

  .console-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 24px; }
  .console-dialog[open],.consultation-dialog[open] { display: block; overflow-y: auto; }
  .dialog-art { height: 220px; min-height: 0; }
  .dialog-body { min-height: auto; padding: 42px 24px 30px; }
  .console-dialog h2 { font-size: 48px; }
  .consultation-art { display: none; }
  .consultation-body { min-height: calc(100dvh - 20px); justify-content: flex-start; }
}

@media (max-width: 380px) {
  .home-copy .home-title { font-size: 42px; }
  .gta-layout { gap: 20px; padding-top: 19px; }
  .game-card { flex-basis: 41vw; }
  .mode-nav { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-screen { display: none; }
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .world-art { transform: none !important; }
}
.portfolio-summary { padding: clamp(90px, 12vh, 150px) clamp(24px, 9vw, 150px); }
.screen-portfolio { overflow-y: auto; }
.portfolio-summary { height: auto; min-height: 100%; }
.portfolio-summary h2 { margin: 16px 0; font-size: clamp(54px, 8vw, 130px); line-height: .82; }
.portfolio-summary > p { max-width: 480px; color: rgba(255,255,255,.68); }
.portfolio-apps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:42px; max-width:1150px; }
.portfolio-apps article { overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:#10121a; }
.portfolio-apps img,.portfolio-art-placeholder { display:block; width:100%; aspect-ratio:1.6; object-fit:cover; }
.portfolio-art-placeholder { background:linear-gradient(145deg,#282337,#10121a 60%,#0b0c14); }
.portfolio-apps small,.portfolio-apps h3 { display:block; margin:12px 14px; }
.portfolio-apps small { color:#ff8c60; font-size:10px; letter-spacing:.13em; }
.portfolio-apps h3 { font-size:23px; }
.portfolio-apps p { margin:0 14px 14px; color:rgba(255,255,255,.7); font-size:13px; line-height:1.4; }
.portfolio-apps article:nth-child(n+3) img { object-position:center top; }
@media (max-width:760px) { .portfolio-summary { padding:95px 20px 42px; } .portfolio-apps { grid-template-columns:1fr; margin-top:28px; } }
.founder-portrait { position:relative; width:min(100%,440px); max-height:min(65vh,550px); aspect-ratio:4/5; border:1px solid rgba(255,255,255,.25); border-radius:28px; overflow:hidden; transform:none; }
.founder-portrait:hover { transform:none; }
.founder-portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.portrait-corner { position:absolute; z-index:2; top:20px; left:20px; font:700 10px var(--utility); }
.founder-copy p:not(.mode-eyebrow) { max-width:470px; margin:20px 0 0; color:rgba(255,255,255,.7); font-size:16px; line-height:1.55; }
.founder-copy .founder-line { color:#fff !important; font-weight:700; }
.founder-copy .founder-placeholder { outline:1px dashed rgba(255,255,255,.55); outline-offset:5px; color:rgba(255,255,255,.85); }
.founder-portfolio { display:block; width:fit-content; margin:24px 0; color:#ff9ad7; text-decoration:none; font-weight:700; font-size:15px; }
.founder-portfolio:hover { text-decoration:underline; }
.offer-tile { cursor:default; }
.offer-tile:not(.offer-featured) { padding-bottom:19px; }
@media (max-width:760px) {
  .founder-portrait { align-self:center; max-height:none; }
  .founder-copy p:not(.mode-eyebrow) { font-size:14px; }
  .offer-tile:not(.offer-featured) { padding-bottom:24px; }
}

/* ---- Chat with us: direct booking ---- */
.consultation-topic { margin: 0 0 14px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; color: white; background: rgba(255,255,255,.06); font-size: 14px; line-height: 1.45; }
.consultation-body .booking-note { max-width: 460px; margin: 0 0 22px; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.55; }
.consultation-body .booking-tab-note { margin: 16px 0 0; color: rgba(255,255,255,.55); font: 600 10px/1.6 var(--utility); letter-spacing: .06em; }
.booking-link { width: fit-content; text-decoration: none; }

/* ---- Founder glow + story labels ---- */
.founder-portrait { box-shadow: 0 35px 80px rgba(0,0,0,.45), 0 0 110px rgba(150,120,255,.32); animation: founder-glow 4.5s ease-in-out infinite; }
@keyframes founder-glow { 50% { box-shadow: 0 35px 80px rgba(0,0,0,.45), 0 0 150px rgba(150,120,255,.5); } }
@media (prefers-reduced-motion: reduce) { .founder-portrait { animation: none; } }
.founder-film-chrome i { color: rgba(255,255,255,.5); }
.founder-story { margin: 0; color: rgba(255,255,255,.85); }

/* ---- Inquiry pills (services rows, Media & Growth) ---- */
.mode-link { white-space: nowrap; }
.inquire-action { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin-top: 10px; padding: 0 16px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; color: white; background: rgba(255,255,255,.06); font: 600 13px var(--body); cursor: pointer; transition: background 180ms, border-color 180ms, transform 180ms; }
.inquire-action:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.14); transform: translateY(-1px); }
.services-list .inquire-action { display: flex; width: fit-content; }
.services-media-link { margin: 22px 0 0; }

/* ---- Media & Growth ---- */
.screen-media { overflow-y: auto; }
.screen-media .screen-inner { min-height: 100%; height: auto; }
.media-layout { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(460px, 1.18fr); align-items: center; gap: clamp(38px, 5vw, 90px); }
.media-layout .section-copy .primary-action { margin-top: 28px; }
#media-title { font-size: clamp(44px,4.8vw,74px); }
.media-tracks { display: grid; gap: 12px; }
.media-track { padding: 18px 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; background: linear-gradient(145deg,rgba(26,27,39,.88),rgba(9,10,16,.7)); box-shadow: 0 18px 50px rgba(0,0,0,.25); backdrop-filter: blur(14px); }
.media-track small { color: var(--pink); font: 700 8px var(--utility); letter-spacing: .1em; }
.media-track h3 { margin: 10px 0 6px; font-size: clamp(18px,1.5vw,22px); line-height: 1.05; }
.media-track p { margin: 0; color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.5; }
@media (max-width: 1120px) { .media-layout { gap: 35px; grid-template-columns: minmax(280px,.8fr) minmax(400px,1.2fr); } }
@media (max-width: 760px) {
  .media-layout { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .media-track { padding: 16px 18px; }
}

/* Offer prices, invoice note and build footer */
.selection-terms { margin: 14px 0 0; color: #fff; font: 700 clamp(17px, 1.5vw, 21px) var(--display, inherit); letter-spacing: .01em; }
.selection-terms[hidden], .detail-terms[hidden], .selection-roles[hidden], .detail-includes[hidden] { display: none; }
.selection-roles { margin-top: 12px; }
.detail-includes { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; }
.detail-includes li { position: relative; padding-left: 22px; }
.detail-includes li::before { content: '✓'; position: absolute; left: 0; color: var(--pink, #ff4fa3); font-weight: 700; }
.detail-terms { margin: 10px 0 0; color: var(--pink, #ff4fa3); font-weight: 700; }
.payment-note { max-width: 560px; margin-top: 18px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; color: rgba(255,255,255,.78); background: rgba(9,10,16,.45); font-size: 14px; line-height: 1.45; }
.payment-note b, .payment-step b { color: #fff; }
.consultation-body .payment-step { margin-top: -8px; }
.build-footer { position: fixed; z-index: 40; right: clamp(16px, 2vw, 28px); bottom: 10px; color: rgba(255,255,255,.5); font: 600 10px var(--utility); letter-spacing: .06em; pointer-events: none; }
.build-footer code { font: inherit; color: rgba(255,255,255,.72); }
@media (max-width: 760px) {
  .selection-terms { margin-top: 10px; font-size: 16px; }
  .mobile-dock { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 6px); }
  .build-footer { right: 0; left: 0; bottom: 0; padding: 1px 0 max(2px, calc(env(safe-area-inset-bottom) - 12px)); background: #07080d; font-size: 8px; line-height: 12px; text-align: center; }
}

/* ---- Agent Crew design system (PR: Hire our agents) ---- */

/* Logo: Crew mark + lowercase "supakid" wordmark, generated into the HTML by scripts/brand.mjs. */
.logo { display: inline-flex; align-items: center; gap: .32em; color: #fff; line-height: 1; }
.logo-mark { display: block; width: 1.9em; height: auto; flex: none; }
.logo-word { font: var(--display-weight) 1em/1 var(--display); letter-spacing: var(--display-track); transform: scale(var(--display-scale)); transform-origin: left center; }
.logo-word-upper { text-transform: none; }
.logo-i { position: relative; display: inline-block; }
.logo-i svg { position: absolute; left: 50%; top: -.28em; width: .62em; transform: translateX(-50%); }
.logo-pill { display: inline-flex; align-items: center; gap: .32em; padding: .25em .6em .25em .3em; border-radius: 99px; background: rgba(255,255,255,.08); }
.brand-lockup { font-size: 25px; }
.boot-logo { font-size: clamp(44px, 8vw, 92px); }
.boot-logo .logo-mark { filter: drop-shadow(0 18px 40px rgba(124,77,255,.45)); }
.boot-prompt { animation: none; }
@media (max-width: 760px) { .brand-lockup { font-size: 21px; } }

/* No-JS: the home backdrop still paints. */
.no-js .world-art-a { opacity: 1; transform: none; background-image: image-set(url("/art/own/service-embedded.avif") type("image/avif"), url("/art/own/service-embedded.webp") type("image/webp"), url("/art/own/service-embedded.jpg") type("image/jpeg")); }

/* Home: one fixed H1; the rail selection only changes the preview title (an h2). */
.home-h1 { max-width: 640px; margin: 0 0 18px; color: #fff; font: var(--display-weight) clamp(19px, 1.7vw, 26px)/1.1 var(--display); letter-spacing: var(--display-track); text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.picture-fill, .game-card picture, .offer-featured picture, .founder-portrait picture { display: contents; }
.selection-terms { margin: 14px 0 0; color: #ffd93b; font: 700 clamp(16px, 1.4vw, 20px) var(--body); }
.detail-terms { margin: 12px 0 0; color: #ffd93b; font-weight: 700; }
.selection-terms[hidden], .detail-terms[hidden] { display: none; }
.portfolio-apps picture { display: block; }
.portfolio-apps img { height: auto; }

/* Services: black page, centered hero, eShop-style fan of five cards. */
.screen-how { overflow-x: hidden; overflow-y: auto; background: #07070a; }
body[data-active-screen="how"] .world-stage { visibility: hidden; }
.eshop-layout { position: relative; display: flex; flex-direction: column; align-items: center; min-height: calc(100dvh - var(--header-height)); padding: clamp(26px, 4vh, 44px) 24px 0; overflow: hidden; text-align: center; }
.eshop-hero { position: relative; z-index: 7; display: flex; flex-direction: column; align-items: center; max-width: 980px; }
.eshop-eyebrow { margin: 0 0 14px; color: var(--muted); font: 500 15px var(--body); letter-spacing: .01em; }
.eshop-eyebrow span, .eshop-eyebrow b { color: #ffd93b; }
.eshop-eyebrow span { margin-right: 8px; }
.eshop-eyebrow b { font-weight: 700; }
#how-title { max-width: 900px; margin: 0; font: var(--display-weight) clamp(42px, 4.8vw, 72px)/.98 var(--display); letter-spacing: calc(var(--display-track) - .01em); text-transform: none; text-wrap: balance; }
.eshop-sub { max-width: 610px; margin: 16px auto 0; color: #a9adbb; font: 400 17px/1.55 var(--body); }
.eshop-actions { margin-top: 18px; }
.eshop-actions .primary-action { min-height: 54px; padding-inline: 32px; font-size: 17px; font-weight: 700; }
.eshop-invoice { max-width: none; margin: 16px 0 0; padding: 0; border: 0; background: none; color: #8d91a0; font-size: 14px; }
.fan-glow { position: absolute; left: 50%; bottom: -120px; width: 900px; height: 520px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(124,77,255,.42), rgba(255,79,94,.16) 55%, transparent 75%); filter: blur(30px); pointer-events: none; }
.spark { position: absolute; z-index: 1; color: #fff; font-size: 26px; opacity: .85; text-shadow: 0 0 18px rgba(255,255,255,.6); pointer-events: none; }
.spark-a { left: 17%; top: 26%; }
.spark-b { right: 18%; top: 44%; font-size: 18px; opacity: .6; }

.eshop-fan { --fan-scale: 1; position: absolute; left: 50%; bottom: -96px; z-index: 5; width: 1180px; height: 520px; transform: translateX(-50%) scale(var(--fan-scale)); transform-origin: 50% 100%; }
.eshop-card {
  --x: 0px; --y: 0px; --r: 0deg;
  position: absolute; bottom: 0; left: 50%; z-index: 3;
  display: flex; flex-direction: column; width: 290px; height: 390px; padding: 0; overflow: hidden;
  border-radius: 38px; color: #fff; text-align: left; cursor: pointer;
  box-shadow: 0 40px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.35);
  transform: translateX(calc(-50% + var(--x))) translateY(var(--y)) rotate(var(--r));
  transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 300ms ease, filter 200ms ease;
}
.eshop-card::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 30%); }
.eshop-card picture { display: contents; }
.card-blob { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; transform: scale(1.12); transform-origin: 50% 80%; transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1); }
.eshop-card-top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; width: 100%; padding: 26px 24px 0; }
.eshop-card-top b { display: block; font: var(--display-weight) 27px/1 var(--display); letter-spacing: var(--display-track); }
.eshop-card-top small { display: block; margin-top: 8px; color: rgba(255,255,255,.84); font: 500 14px/1.3 var(--body); }
.eshop-pill { flex: none; padding: 7px 12px; border-radius: 99px; background: rgba(255,255,255,.92); color: #08090f; font: 800 12px var(--body); font-style: normal; white-space: nowrap; }
.c-yellow { background-color: #ffd93b; color: #111; }
.c-yellow .eshop-card-top small { color: rgba(0,0,0,.66); }
.c-yellow .eshop-pill { background: #111; color: #ffd93b; }
.c-red { background-color: #ff4f5e; }
.c-purple { z-index: 6; width: 370px; height: 500px; background-color: #7c4dff; }
.c-purple .eshop-card-top b { font-size: 42px; }
.c-purple .eshop-card-top small { font-size: 17px; }
.c-purple .eshop-pill { background: #ffd93b; color: #111; font-size: 13px; }
.c-mint { background-color: #19c79a; }
.c-pink { background-color: #ff3ea5; }
.f-center { --y: -6px; }
.f-inner-l { --x: -300px; --y: 40px; --r: -6deg; z-index: 4; }
.f-inner-r { --x: 300px; --y: 40px; --r: 6deg; z-index: 4; }
.f-outer-l { --x: -560px; --y: 110px; --r: -12deg; }
.f-outer-r { --x: 560px; --y: 110px; --r: 12deg; }
.eshop-card:hover, .eshop-card:focus-visible { z-index: 8; transform: translateX(calc(-50% + var(--x))) translateY(calc(var(--y) - 34px)) rotate(0deg) scale(1.045); box-shadow: 0 50px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.45); }
.eshop-card:hover .card-blob, .eshop-card:focus-visible .card-blob { transform: scale(1.16); }
.eshop-card:active { transform: translateX(calc(-50% + var(--x))) translateY(calc(var(--y) - 20px)) rotate(0deg) scale(.98); filter: brightness(.95); transition-duration: 120ms; }
.eshop-card:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.screen-how.is-active .eshop-card { animation: deal-in 760ms cubic-bezier(.34, 1.36, .64, 1) backwards; animation-delay: calc(var(--i, 0) * 80ms + 140ms); }
@keyframes deal-in { from { opacity: 0; transform: translateX(-50%) translateY(320px) rotate(0deg) scale(.86); } }

/* Who you can hire: each option is its own H2. */
.hire-section { position: relative; z-index: 6; max-width: 1180px; margin: 0 auto; padding: 72px 24px 110px; text-align: center; }
.hire-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 10px; text-align: left; }
.hire-option { display: flex; flex-direction: column; padding: 22px 22px 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 26px; background: linear-gradient(160deg, rgba(124,77,255,.22), rgba(255,255,255,.03) 60%); }
.hire-option small { color: #b9a2ff; font: 700 10px var(--utility); letter-spacing: .12em; }
.hire-option h2 { margin: 12px 0 8px; font: var(--display-weight) 24px/1.05 var(--display); letter-spacing: var(--display-track); }
.hire-option p { flex: 1; margin: 0; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.5; }
.hire-option .inquire-action { align-self: flex-start; margin-top: 16px; }
.hire-section .services-media-link { margin: 28px auto 0; }

@media (max-width: 1180px) {
  .eshop-fan { --fan-scale: .8; }
  .hire-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-height: 790px) and (min-width: 761px) {
  .eshop-fan { --fan-scale: .82; bottom: -60px; }
  #how-title { font-size: clamp(40px, 4.6vw, 66px); }
}
@media (max-width: 760px) {
  .eshop-layout { min-height: 0; padding: 26px 0 0; overflow: visible; }
  .eshop-hero { padding: 0 18px; }
  #how-title { font-size: clamp(36px, 10.5vw, 46px); }
  .eshop-sub { font-size: 15px; }
  .eshop-invoice { font-size: 13px; }
  .fan-glow, .spark { display: none; }
  .eshop-fan { position: relative; left: auto; bottom: auto; display: flex; gap: 14px; width: 100%; height: auto; margin-top: 26px; padding: 6px 10vw 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; transform: none; }
  .eshop-fan::-webkit-scrollbar { display: none; }
  .eshop-card, .c-purple { position: relative; left: auto; bottom: auto; flex: 0 0 80%; width: auto; height: 400px; scroll-snap-align: center; transform: none !important; }
  .c-purple { order: -1; }
  .c-purple .eshop-card-top b { font-size: 36px; }
  .eshop-card-top { flex-direction: column-reverse; gap: 12px; }
  .screen-how.is-active .eshop-card { animation-name: deal-in-rail; }
  .hire-section { padding: 36px 18px 40px; }
  .hire-options { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .screen-home .screen-inner { padding-top: 232px; }
  .home-h1 { margin-bottom: 10px; font-size: 17px; }
  .home-copy .mode-eyebrow { margin-bottom: 10px; }
  .home-description { margin-top: 14px; }
  .selection-roles { margin-top: 8px; }
  .selection-terms { margin-top: 8px; }
  .home-actions { margin-top: 14px; }
}
@keyframes deal-in-rail { from { opacity: 0; transform: translateY(60px); } }
@media (prefers-reduced-motion: reduce) {
  .screen-how.is-active .eshop-card { animation: none; }
  .eshop-card, .card-blob { transition: none; }
}
/* ===== v5: pick a card -> the fan rotates it to the center, the headline follows ===== */
@property --glow { syntax: '<color>'; inherits: true; initial-value: #7c4dff; }
.screen-how { --accent: #ffd93b; --glow: #7c4dff; transition: --glow calc(.8s * var(--slow, 1)) ease; }
.screen-how .eshop-eyebrow span, .screen-how .eshop-eyebrow b { color: var(--accent) !important; }
.screen-how .fan-glow { background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 50%, transparent), color-mix(in srgb, var(--glow) 18%, transparent) 55%, transparent 75%) !important; }
.screen-how .eshop-hero > * { will-change: opacity, transform; }
@media (min-width: 761px) {
  .eshop-fan > .eshop-card {
    --tx: 0px; --ty: 0px; --rot: 0deg; --lift: 0px; --sc: 1;
    width: 290px !important; height: 390px !important; z-index: 3 !important;
    transform: translateX(calc(-50% + var(--tx) + var(--shift))) translateY(calc(var(--ty) + var(--lift))) rotate(var(--rot)) scale(var(--sc)) perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) !important;
    transition: transform calc(.72s * var(--slow, 1)) cubic-bezier(.2,1.15,.3,1), width calc(.55s * var(--slow, 1)) cubic-bezier(.2,1.1,.3,1), height calc(.55s * var(--slow, 1)) cubic-bezier(.2,1.1,.3,1), box-shadow calc(.5s * var(--slow, 1)) ease, filter .3s ease, opacity calc(.22s * var(--slow, 1)) ease !important;
  }
  .eshop-fan > .eshop-card.f-center { --ty: -10px; width: 360px !important; height: 480px !important; z-index: 6 !important; box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 3px color-mix(in srgb, var(--accent) 75%, transparent), 0 0 70px color-mix(in srgb, var(--glow) 55%, transparent) !important; }
  .eshop-fan > .eshop-card.f-inner-l { --tx: -300px; --ty: 18px; --rot: -6deg; z-index: 4 !important; }
  .eshop-fan > .eshop-card.f-inner-r { --tx: 300px; --ty: 18px; --rot: 6deg; z-index: 4 !important; }
  .eshop-fan > .eshop-card.f-outer-l { --tx: -565px; --ty: 64px; --rot: -11deg; }
  .eshop-fan > .eshop-card.f-outer-r { --tx: 565px; --ty: 64px; --rot: 11deg; }
  .eshop-fan > .eshop-card.f-off-l { --tx: -880px; --ty: 320px; --rot: -28deg; opacity: 0 !important; z-index: 1 !important; }
  .eshop-fan > .eshop-card.f-off-r { --tx: 880px; --ty: 320px; --rot: 28deg; opacity: 0 !important; z-index: 1 !important; }
  .eshop-fan > .eshop-card.is-hot.f-center { --lift: -26px; --sc: 1.03; }
  .eshop-fan > .eshop-card.is-hot.f-inner-l, .eshop-fan > .eshop-card.is-hot.f-inner-r { --lift: -44px; --rot: 0deg; --sc: 1.06; z-index: 9 !important; }
  .eshop-fan > .eshop-card.is-hot.f-outer-l, .eshop-fan > .eshop-card.is-hot.f-outer-r { --lift: -70px; --rot: 0deg; --sc: 1.06; z-index: 9 !important; }
  .eshop-fan > .eshop-card.is-wrapping { transition: transform calc(.5s * var(--slow, 1)) cubic-bezier(.25,1,.4,1), width calc(.4s * var(--slow, 1)) ease, height calc(.4s * var(--slow, 1)) ease, opacity calc(.25s * var(--slow, 1)) ease !important; }
  .eshop-fan > .eshop-card .eshop-card-top b { font-size: calc(27px * var(--pg-scale, 1)) !important; transition: font-size calc(.5s * var(--slow, 1)) cubic-bezier(.2,1.1,.3,1); }
  .eshop-fan > .eshop-card.f-center .eshop-card-top b { font-size: calc(40px * var(--pg-scale, 1)) !important; }
}
@media (max-width: 760px) {
  .eshop-fan > .eshop-card { transform: scale(.93) !important; filter: brightness(.8); transition: transform .35s cubic-bezier(.2,1.1,.3,1), filter .3s ease !important; }
  .eshop-fan > .eshop-card.is-current { transform: none !important; filter: none; box-shadow: 0 24px 50px rgba(0,0,0,.5), 0 0 0 3px color-mix(in srgb, var(--accent) 75%, transparent) !important; }
}
@media (prefers-reduced-motion: reduce) { .eshop-fan > .eshop-card, .screen-how { transition: none !important; } }


.idot { position: relative; display: inline-block; }
.idot i { position: absolute; left: 50%; top: -0.06em; width: .27em; height: .25em; border-radius: 55% 55% 50% 50%; background: radial-gradient(circle at 35% 30%, #b79bff, #6a3cf5); transform: translateX(-50%); box-shadow: 0 0 0 2px #050507; }
.logo-mark-crew2 .b { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.brand-lockup:hover .logo-mark-crew2 .b1 { transform: translateY(-3px) scale(1.04); transition-delay: 0s; }
.brand-lockup:hover .logo-mark-crew2 .b2 { transform: translateY(-4px) scale(1.05); transition-delay: .05s; }
.brand-lockup:hover .logo-mark-crew2 .b3 { transform: translateY(-3px) scale(1.04); transition-delay: .1s; }
.logo-mark-crew2 .eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 5.2s infinite; }
.logo-mark-crew2 .b1 .eyes { animation-delay: .4s; } .logo-mark-crew2 .b3 .eyes { animation-delay: 1.1s; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.12); } }

/* ===== v4: socials on Content ===== */
.social-follow { margin-top: 34px; }
.social-follow > small { display: block; margin-bottom: 12px; font: 600 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.social-row { display: flex; flex-wrap: wrap; gap: 10px; max-width: 560px; }
.social-chip { --c: #fff; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(12,12,18,.62); border: 1px solid rgba(255,255,255,.14); color: #fff; text-decoration: none; backdrop-filter: blur(12px); transition: transform .3s cubic-bezier(.3,1.6,.5,1), border-color .2s, background .2s; }
.social-chip:hover { transform: translateY(-3px); border-color: var(--c); background: rgba(20,20,28,.8); }
.social-chip .si { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: grid; place-items: center; background: var(--c); transition: transform .35s cubic-bezier(.3,1.8,.5,1); }
.social-chip:hover .si { transform: rotate(-10deg) scale(1.08); }
.social-chip .si svg { width: 17px; height: 17px; }
.si-letter { font: 900 17px/1 var(--body); color: #fff; margin-top: -2px; }
.social-chip .st b { display: block; font: 700 14px/1.15 var(--body); }
.social-chip .st em { display: block; font: 500 12px/1.25 var(--body); font-style: normal; color: rgba(255,255,255,.6); }
.social-chip .sa { margin-left: 4px; font-size: 13px; color: rgba(255,255,255,.45); transition: transform .25s, color .2s; }
.social-chip:hover .sa { transform: translate(2px,-2px); color: #fff; }
.sc-ig { --c: #e1306c; } .sc-ig .si { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.sc-yt { --c: #ff0033; } .sc-fb { --c: #0866ff; } .sc-wh { --c: #fa4616; }
.sc-sk { --c: #ffd400; } .sc-sk .si-letter { color: #111; }

/* ===== v5: real platform logos on Content ===== */
.social-chip .si.si-img { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; overflow: hidden; background: none !important; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.social-chip .si.si-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.social-chip .si.si-tile-white { background: #fff !important; padding: 8px 6px; }
.social-chip.sc-fb .si.si-img { border-radius: 50%; }


/* Crew v2, same lockup in the header and splash. */
.logo-mark-crew2 .gaze { transition: transform .18s ease-out; }
.logo-crew2dot .logo-word { letter-spacing: -.055em; }
.eshop-card { --shift: 0px; --rx: 0deg; --ry: 0deg; }
.eshop-card.is-dim { filter: brightness(.75); }
.eshop-card.c-pink { background: #201b35; }
.eshop-card .card-gta { object-position: center; }
.eshop-card .gta-scrim { position: absolute; inset: 0; background: linear-gradient(#141122bb, transparent 60%); }
.eshop-card .gta-logo { position: absolute; left: 20px; bottom: 20px; z-index: 2; width: 86px; height: auto; margin: 0; }
@media (max-width: 760px) {
  .brand-lockup > .logo { display: inline-flex; }
  .brand-lockup .logo-mark { width: 40px; }
  .brand-lockup { font-size: 25px; }
  .eshop-fan > .eshop-card { scroll-snap-stop: always; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-mark-crew2 .eyes { animation: none; }
  .logo-mark-crew2 .gaze, .social-chip, .social-chip .si, .social-chip .sa { transition: none; }
}