@charset "UTF-8";

:root {
  --ink: #061112;
  --ink-deep: #020708;
  --petrol: #0a2527;
  --petrol-light: #133b3c;
  --sand: #f0e4cc;
  --sand-muted: #b9b09f;
  --gold: #efb84f;
  --gold-bright: #ffd67e;
  --rust: #b95e2b;
  --turquoise: #47c2bd;
  --white: #fffdf7;
  --line: rgba(240, 228, 204, .14);
  --container: 1240px;
  --radius: 22px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; scroll-behavior: smooth; scrollbar-color: var(--gold) var(--ink-deep); background: var(--ink); }
body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-width: 320px;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  background: var(--ink);
  color: var(--sand);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main, header, footer, section { max-width: 100vw; }
main { overflow-x: clip; }
body.menu-open, body.modal-open { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
img { max-width: 100%; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 999; padding: 10px 16px; background: var(--gold); color: var(--ink); font-weight: 800; }
.skip-link:focus { top: 16px; }
.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
.section { position: relative; padding: 132px 0; }

.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .038;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
.cursor-glow { position: fixed; z-index: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; background: radial-gradient(circle, rgba(71,194,189,.07), transparent 68%); pointer-events: none; transform: translate3d(-999px,-999px,0); }

.kicker, .eyebrow { color: var(--gold); font-size: .72rem; font-weight: 900; letter-spacing: .23em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; color: #e5dac4; }
.eyebrow span { width: 38px; height: 1px; background: var(--gold); box-shadow: 0 0 12px rgba(239,184,79,.5); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Arial Black", "Segoe UI Black", sans-serif; text-transform: uppercase; letter-spacing: -.055em; line-height: .98; }
h2 { margin-bottom: 24px; color: var(--white); font-size: clamp(2.6rem, 5.2vw, 5rem); }
h3 { color: var(--white); }
p { color: var(--sand-muted); }

.button {
  --btn-bg: transparent; --btn-color: var(--white); --btn-border: rgba(255,255,255,.16);
  position: relative; display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 11px; padding: 0 24px; overflow: hidden;
  border: 1px solid var(--btn-border); border-radius: 10px; background: var(--btn-bg); color: var(--btn-color); cursor: pointer;
  font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; transition: transform .35s var(--ease), border-color .35s, background .35s, color .35s;
}
.button::before { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 15%, rgba(255,255,255,.24) 50%, transparent 85%); content: ""; transform: translateX(-130%); transition: transform .65s var(--ease); }
.button:hover::before { transform: translateX(130%); }
.button:hover { transform: translateY(-3px); }
.button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button--small { min-height: 40px; padding: 0 17px; font-size: .64rem; }
.button--large { min-height: 60px; padding: 0 29px; }
.button--gold { --btn-bg: var(--gold); --btn-color: #13100a; --btn-border: var(--gold); box-shadow: 0 12px 44px rgba(239,184,79,.16); }
.button--gold:hover { --btn-bg: var(--gold-bright); }
.button--ghost { --btn-bg: rgba(255,255,255,.045); }
.button--line:hover { --btn-bg: rgba(255,255,255,.08); --btn-border: var(--gold); }
.button--light { --btn-bg: var(--white); --btn-color: var(--ink); --btn-border: var(--white); }
.button--dark { --btn-bg: var(--ink); --btn-color: var(--white); --btn-border: var(--ink); }

.site-header { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; padding: 18px 24px; transition: padding .4s var(--ease), background .4s; }
.site-header.is-scrolled { padding-top: 10px; }
.nav-shell { width: min(1360px, 100%); min-height: 60px; margin: auto; padding: 0 14px 0 19px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(3,11,12,.7); box-shadow: 0 16px 60px rgba(0,0,0,.18); backdrop-filter: blur(22px) saturate(130%); }
.is-scrolled .nav-shell { background: rgba(3,11,12,.93); box-shadow: 0 20px 65px rgba(0,0,0,.38); }
.nav-brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; color: var(--white); font-family: "Arial Black", sans-serif; font-size: .95rem; letter-spacing: -.04em; }
.nav-brand b { color: var(--gold); }
.nav-brand__mark { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(239,184,79,.38); border-radius: 50%; color: var(--gold); }
.nav-brand__mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.desktop-nav { display: flex; align-items: center; gap: clamp(15px, 1.7vw, 28px); }
.desktop-nav a { position: relative; padding: 22px 0; color: #b6b5ad; font-size: .69rem; font-weight: 700; letter-spacing: .04em; transition: color .25s; }
.desktop-nav a::after { position: absolute; right: 0; bottom: 13px; left: 0; height: 2px; background: var(--gold); content: ""; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.desktop-nav a:hover, .desktop-nav a.is-active { color: var(--white); }
.desktop-nav a:hover::after, .desktop-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav-actions { display: flex; align-items: center; gap: 9px; }
.sound-toggle { width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; cursor: pointer; }
.sound-toggle span { width: 2px; height: 11px; background: #d4cdbf; animation: equalizer .9s ease-in-out infinite alternate; animation-play-state: paused; }
.sound-toggle span:nth-child(2) { height: 18px; animation-delay: -.3s; }.sound-toggle span:nth-child(3) { height: 8px; animation-delay: -.6s; }
.sound-toggle[aria-pressed="true"] span { animation-play-state: running; }
@keyframes equalizer { to { height: 4px; } }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: transparent; }
.menu-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mobile-nav { display: none; }

.hero { position: relative; min-height: 950px; height: 100svh; overflow: hidden; background: #071314; }
.hero__media, .hero__shade, .hero__sun { position: absolute; inset: -3%; }
.hero__media { background: url('/assets/game/gtav-official.jpg') 53% center / cover no-repeat; filter: sepia(.12) saturate(.88) brightness(.72); transform: scale(1.045); will-change: transform; }
.hero__shade { inset: 0; background: linear-gradient(90deg, rgba(2,8,9,.99) 0%, rgba(2,8,9,.88) 31%, rgba(2,8,9,.32) 61%, rgba(2,8,9,.12) 100%), linear-gradient(0deg, var(--ink) 0%, transparent 22%, rgba(126,73,24,.14) 100%); }
.hero__shade::after { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 72% 30%, transparent 0, rgba(0,0,0,.08) 34%, rgba(0,0,0,.38) 100%); }
.hero__sun { inset: auto; top: 19%; right: 26%; width: 105px; height: 105px; border-radius: 50%; background: rgba(255,205,102,.14); filter: blur(4px); box-shadow: 0 0 90px 45px rgba(255,173,53,.09); }
.hero__content { position: relative; z-index: 2; min-height: 100%; display: flex; align-items: center; padding-top: 88px; }
.hero__copy { width: min(670px, 57%); }
.hero__logo { width: 220px; height: 152px; margin: -19px 0 5px; object-fit: contain; object-position: center; filter: drop-shadow(0 16px 32px rgba(0,0,0,.5)); transform: scale(1.35); transform-origin: left center; }
.hero h1 { margin: 0 0 23px; color: var(--white); font-size: clamp(3.7rem, 6.35vw, 6.7rem); }
.hero h1 em { color: var(--gold); font-style: normal; text-shadow: 0 8px 40px rgba(239,184,79,.2); }
.hero__copy > p { width: min(590px, 100%); margin-bottom: 33px; color: #c7c2b7; font-size: 1.04rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__trust { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 21px; color: #9ba8a4; font-size: .71rem; letter-spacing: .06em; text-transform: uppercase; }
.hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust svg { width: 17px; height: 17px; fill: none; stroke: var(--turquoise); stroke-width: 1.8; }
.server-ribbon { position: absolute; right: 3.2vw; bottom: 7vh; z-index: 4; min-width: 380px; padding: 14px 18px; display: flex; align-items: center; gap: 15px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(4,14,15,.76); backdrop-filter: blur(16px); }
.server-ribbon__index { color: var(--gold); font-family: "Arial Black"; font-size: 1.8rem; }
.server-ribbon small { display: block; color: #8a9794; font-size: .59rem; letter-spacing: .15em; }.server-ribbon strong { display: block; color: var(--white); font-size: .78rem; text-transform: uppercase; }
.status-pill { margin-left: auto; padding: 7px 10px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(239,184,79,.26); border-radius: 99px; color: #ddc895; font-size: .59rem; letter-spacing: .08em; text-transform: uppercase; }
.status-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.scroll-cue { position: absolute; bottom: 38px; left: 50%; z-index: 4; display: flex; align-items: center; gap: 10px; color: #a8ada7; font-size: .55rem; letter-spacing: .22em; transform: translateX(-50%) rotate(90deg); transform-origin: center; }
.scroll-cue span { width: 42px; height: 1px; overflow: hidden; background: rgba(255,255,255,.2); }
.scroll-cue span::after { width: 50%; height: 100%; display: block; background: var(--gold); content: ""; animation: scrollLine 1.8s var(--ease) infinite; }
@keyframes scrollLine { from { transform: translateX(-100%); } to { transform: translateX(220%); } }

.manifest { overflow: hidden; background: var(--ink); }
.manifest__word { position: absolute; top: 30px; left: 50%; color: rgba(255,255,255,.018); font-family: "Arial Black"; font-size: 20vw; line-height: 1; transform: translateX(-50%); white-space: nowrap; user-select: none; }
.section-heading { position: relative; display: grid; grid-template-columns: 1.2fr .75fr; align-items: end; gap: 8%; margin-bottom: 72px; }
.section-heading h2 { max-width: 760px; margin-top: 14px; margin-bottom: 0; }
.section-heading > p { margin: 0 0 9px; font-size: 1rem; }
.section-heading--center { display: block; width: min(770px, 100%); margin-inline: auto; text-align: center; }
.section-heading--center h2 { margin: 14px auto 20px; }.section-heading--center p { width: min(600px,100%); margin-inline: auto; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; perspective: 1200px; }
.pillar { position: relative; min-height: 365px; padding: 34px 31px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.014)); transform-style: preserve-3d; transition: border-color .4s, background .4s, transform .18s ease-out; }
.pillar::before { position: absolute; inset: 0; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(239,184,79,.13), transparent 35%); content: ""; opacity: 0; transition: opacity .35s; }
.pillar:hover { border-color: rgba(239,184,79,.42); background: linear-gradient(145deg, rgba(239,184,79,.08), rgba(255,255,255,.015)); }.pillar:hover::before { opacity: 1; }
.pillar__number { color: rgba(255,255,255,.18); font-family: "Arial Black"; font-size: .72rem; letter-spacing: .14em; }
.pillar__icon { width: 64px; height: 64px; margin: 49px 0 32px; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 14px rgba(239,184,79,.15)); transform: translateZ(26px); }
.pillar h3 { margin-bottom: 13px; font-size: 1.45rem; }.pillar p { margin: 0; font-size: .9rem; }.pillar__line { position: absolute; right: 31px; bottom: 0; left: 31px; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); transform: scaleX(.18); transform-origin: left; transition: transform .5s var(--ease); }.pillar:hover .pillar__line { transform: scaleX(1); }

.world { min-height: 900px; overflow: hidden; background: #030a0b; }
.world__backdrop { position: absolute; inset: 0; opacity: .26; background: linear-gradient(90deg, transparent, rgba(3,10,11,.5) 50%, #030a0b 88%), url('/assets/game/gtav-official.jpg') 42% center / cover; filter: sepia(.16) saturate(.7); }
.world__backdrop::after { position: absolute; inset: 0; background: linear-gradient(0deg,#030a0b,transparent 25%,transparent 75%,#030a0b), radial-gradient(circle at 40% 50%, transparent, #030a0b 80%); content: ""; }
.world__layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .8fr; align-items: center; gap: 9%; }
.world__visual { position: relative; min-height: 560px; border: 1px solid rgba(239,184,79,.28); background: url('/assets/game/gtav-official.jpg') 48% center / cover; box-shadow: 0 35px 100px rgba(0,0,0,.45); clip-path: polygon(0 5%, 93% 0, 100% 91%, 8% 100%); }
.world__visual::after { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(6,17,18,.5), transparent 45%, rgba(239,184,79,.08)); content: ""; }
.world__frame { position: absolute; z-index: 2; inset: 32px; border: 1px solid rgba(255,255,255,.18); }
.world__coordinates { position: absolute; top: 18px; left: 18px; color: rgba(255,255,255,.72); font-family: monospace; font-size: .64rem; letter-spacing: .14em; }
.world__seal { position: absolute; right: -39px; bottom: 58px; z-index: 3; width: 125px; height: 125px; display: grid; place-content: center; border: 1px solid rgba(239,184,79,.38); border-radius: 50%; background: rgba(5,18,19,.9); color: var(--gold); text-align: center; backdrop-filter: blur(10px); }
.world__seal svg { width: 39px; height: 39px; margin: 0 auto 6px; fill: none; stroke: currentColor; stroke-width: 1.1; }.world__seal span { font-size: .52rem; font-weight: 900; letter-spacing: .12em; line-height: 1.3; }
.world__copy h2 { margin-top: 15px; font-size: clamp(2.8rem, 4.8vw, 4.7rem); }.world__copy > p { font-size: .98rem; }
.feature-list { margin: 42px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.feature-list li { padding: 19px 0; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); }
.feature-list li > span { width: 33px; height: 33px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(239,184,79,.35); border-radius: 50%; color: var(--gold); font-family: monospace; font-size: .68rem; }
.feature-list strong, .feature-list small { display: block; }.feature-list strong { color: var(--white); font-size: .78rem; text-transform: uppercase; }.feature-list small { color: #899996; font-size: .74rem; }

.journey { background: #071415; }
.journey__track { position: absolute; top: 422px; left: 16%; width: 68%; height: 1px; background: linear-gradient(90deg, transparent, rgba(239,184,79,.3), transparent); }.journey__track span { display: block; width: 11px; height: 11px; margin: -5px auto; border: 2px solid var(--gold); border-radius: 50%; background: var(--ink); box-shadow: 0 0 18px var(--gold); }
.journey__steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.journey-card { min-height: 365px; padding: 35px 30px 30px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.025); text-align: center; transition: transform .45s var(--ease), border-color .4s; }
.journey-card:hover { border-color: rgba(239,184,79,.38); transform: translateY(-9px); }
.journey-card__icon { width: 82px; height: 82px; margin: 0 auto 28px; display: grid; place-items: center; border: 1px solid rgba(239,184,79,.3); border-radius: 50%; background: rgba(239,184,79,.045); color: var(--gold); }
.journey-card__icon svg { width: 39px; height: 39px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.journey-card__step { color: var(--gold); font-family: monospace; font-size: .62rem; letter-spacing: .17em; }.journey-card h3 { margin: 10px 0 12px; font-size: 1.25rem; }.journey-card p { min-height: 68px; font-size: .84rem; }
.text-action { padding: 0 0 4px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid rgba(239,184,79,.45); background: none; color: var(--sand); cursor: pointer; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.text-action svg { width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-width: 1.5; transition: transform .25s; }.text-action:hover svg { transform: translateX(4px); }
.launcher-panel { min-height: 470px; margin-top: 86px; padding: 62px 7%; display: grid; grid-template-columns: .84fr 1fr; align-items: center; gap: 8%; overflow: hidden; border: 1px solid rgba(239,184,79,.23); border-radius: 30px; background: radial-gradient(circle at 78% 36%, rgba(40,104,103,.35), transparent 38%), linear-gradient(135deg,#0c2829,#061112); }
.launcher-panel__copy h3 { margin: 14px 0 20px; font-size: clamp(2.4rem,4vw,4.3rem); }.launcher-panel__copy p { margin-bottom: 28px; }
.device-scene { position: relative; min-height: 340px; perspective: 900px; transform-style: preserve-3d; }
.device { position: absolute; top: 18px; left: 50%; width: min(410px,90%); transform: translateX(-50%) rotateY(-13deg) rotateX(5deg) rotateZ(2deg); transform-style: preserve-3d; filter: drop-shadow(0 40px 38px rgba(0,0,0,.5)); }
.device__screen { aspect-ratio: 16/10; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 8px solid #111; border-radius: 15px 15px 6px 6px; background: linear-gradient(rgba(4,16,17,.24),rgba(4,16,17,.72)), url('/assets/game/gtav-official.jpg') 54% center / cover; color: var(--white); box-shadow: inset 0 0 0 1px #444; }
.device__screen span { font-family: "Arial Black"; font-size: clamp(2.1rem,5vw,4rem); line-height: 1; letter-spacing: -.08em; text-shadow: 0 5px 25px #000; }.device__screen small { color: var(--gold); font-weight: 900; letter-spacing: .36em; }
.device__base { position: relative; height: 23px; margin: 0 -8%; border-radius: 2px 2px 18px 18px; background: linear-gradient(#8f938e,#333937 45%,#111); transform: rotateX(-41deg); transform-origin: top; }.device__base i { position: absolute; top: 3px; left: 42%; width: 16%; height: 6px; border-radius: 0 0 6px 6px; background: #131716; }
.device-scene__cactus { position: absolute; right: 2%; bottom: 0; width: 84px; height: 130px; fill: none; stroke: rgba(239,184,79,.25); stroke-width: 1; }

.community { min-height: 820px; display: flex; align-items: center; overflow: hidden; background: #030a0b; }
.community__art { position: absolute; inset: 0; background: linear-gradient(90deg,#030a0b 0%,rgba(3,10,11,.96) 29%,transparent 68%), linear-gradient(0deg,#030a0b,transparent 20%,transparent 79%,#030a0b), url('/assets/game/gtav-official.jpg') center / cover no-repeat; }
.community__art::after { position: absolute; inset: 0; background: linear-gradient(90deg,transparent 27%,rgba(3,10,11,.5) 54%,rgba(3,10,11,.9) 100%),radial-gradient(circle at 74% 43%,transparent 18%,rgba(3,10,11,.16) 54%,#030a0b 100%); content: ""; }
.community__keyart { position: absolute; top: 9%; right: 1%; z-index: 1; width: min(58vw,828px); height: auto; object-fit: contain; mix-blend-mode: screen; opacity: 1; filter: saturate(1.1) contrast(1.18) brightness(.95) drop-shadow(0 35px 35px rgba(0,0,0,.55)); -webkit-mask-image: radial-gradient(ellipse 72% 72% at 55% 52%,#000 63%,transparent 100%); mask-image: radial-gradient(ellipse 72% 72% at 55% 52%,#000 63%,transparent 100%); }
.community__content { position: relative; z-index: 2; }.community__copy { width: min(570px,46%); }
.community__copy h2 { margin-top: 15px; font-size: clamp(3rem,5.4vw,5.5rem); }.community__copy > p { font-size: 1rem; }
.community__actions { margin-top: 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }.community__note { color: #7c8d89; font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; }

.store { overflow: hidden; background: linear-gradient(135deg,#103335,#071617 58%,#060e0f); }
.store::before { position: absolute; top: -40%; right: -15%; width: 650px; height: 650px; border: 1px solid rgba(239,184,79,.06); border-radius: 50%; content: ""; box-shadow: 0 0 0 90px rgba(239,184,79,.025),0 0 0 180px rgba(239,184,79,.018); }
.store__layout { position: relative; display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 9%; }.store__copy h2 { margin-top: 15px; font-size: clamp(3rem,5.5vw,5.5rem); }.store__copy p { max-width: 650px; }.store__copy .button { margin-top: 16px; }
.store__status { position: relative; aspect-ratio: 1; width: min(420px,100%); margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(239,184,79,.15); border-radius: 50%; background: radial-gradient(circle,rgba(239,184,79,.09),transparent 62%); text-align: center; }
.store__status > svg { width: 72px; height: 72px; margin-bottom: 20px; fill: none; stroke: var(--gold); stroke-width: 1.1; }.store__status > span { color: var(--gold); font-size: .59rem; letter-spacing: .25em; }.store__status strong { color: var(--white); font-family: "Arial Black"; font-size: 1.75rem; text-transform: uppercase; }.store__status small { width: 220px; margin-top: 9px; color: #82918e; font-size: .69rem; }
.store__orbit { position: absolute; inset: -24px; border: 1px solid rgba(239,184,79,.12); border-radius: 50%; animation: orbit 14s linear infinite; }.store__orbit::after { position: absolute; top: 50%; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 15px var(--gold); content: ""; }.store__orbit--two { inset: 34px; border-style: dashed; animation-direction: reverse; animation-duration: 20s; }
@keyframes orbit { to { transform: rotate(360deg); } }

.rules { background: #060e0f; }.rules__grid { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.rule { position: relative; min-height: 225px; padding: 35px 34px 38px 100px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .35s; }.rule:hover { background: rgba(239,184,79,.035); }.rule b { position: absolute; top: 41px; left: 34px; color: var(--gold); font-family: monospace; font-size: .7rem; }.rule h3 { margin: 0 0 15px; font-size: 1.25rem; }.rule p { margin: 0; font-size: .86rem; }

.faq { background: #081719; }.faq__layout { display: grid; grid-template-columns: .55fr 1fr; gap: 10%; }.faq__intro { position: sticky; top: 150px; align-self: start; }.faq__intro h2 { margin-top: 15px; }.faq__intro p { max-width: 380px; }.faq__mark { width: 140px; height: 160px; margin-top: 50px; fill: none; stroke: rgba(239,184,79,.13); stroke-width: 1; }
.accordion { border-top: 1px solid var(--line); }.accordion__item { border-bottom: 1px solid var(--line); }.accordion__item > button { width: 100%; padding: 25px 3px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border: 0; background: none; color: var(--white); cursor: pointer; text-align: left; font-size: .85rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }.accordion__item > button svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--gold); stroke-width: 1.6; transition: transform .35s; }.accordion__item > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.accordion__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }.accordion__answer > p { min-height: 0; margin: 0; overflow: hidden; }.accordion__item.is-open .accordion__answer { grid-template-rows: 1fr; }.accordion__item.is-open .accordion__answer > p { padding: 0 50px 28px 3px; }

.final-cta { position: relative; min-height: 610px; padding: 130px 0; display: grid; place-items: center; overflow: hidden; background: var(--gold); color: var(--ink); text-align: center; }
.final-cta::before, .final-cta::after { position: absolute; bottom: -10px; width: 40%; height: 45%; background: var(--petrol); content: ""; opacity: .95; }.final-cta::before { left: -5%; clip-path: polygon(0 45%,20% 53%,38% 20%,58% 48%,75% 15%,100% 67%,100% 100%,0 100%); }.final-cta::after { right: -5%; clip-path: polygon(0 65%,20% 38%,35% 54%,56% 16%,70% 46%,90% 26%,100% 44%,100% 100%,0 100%); }
.final-cta__sun { position: absolute; top: 70px; left: 50%; width: 300px; height: 300px; border: 1px solid rgba(7,26,27,.12); border-radius: 50%; transform: translateX(-50%); box-shadow: 0 0 0 50px rgba(7,26,27,.025),0 0 0 100px rgba(7,26,27,.018); }
.final-cta .container { position: relative; z-index: 2; }.final-cta__icon { width: 60px; height: 60px; margin: 0 auto 24px; fill: none; stroke: var(--ink); stroke-width: 1.7; }.final-cta .kicker { color: rgba(7,26,27,.7); }.final-cta h2 { max-width: 900px; margin: 16px auto 35px; color: var(--ink); font-size: clamp(3rem,6.5vw,6.5rem); }

.site-footer { position: relative; background: #020707; }.footer__top { padding: 84px 0 70px; display: grid; grid-template-columns: 1.5fr .7fr .7fr 1fr; gap: 6%; }.footer__brand p { max-width: 300px; margin: 24px 0 0; font-size: .82rem; }.footer__links, .footer__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }.footer__links strong, .footer__contact > strong { margin-bottom: 8px; color: var(--gold); font-size: .64rem; letter-spacing: .17em; text-transform: uppercase; }.footer__links a, .footer__links button { padding: 0; border: 0; background: none; color: #88928f; cursor: pointer; font-size: .76rem; }.footer__links a:hover, .footer__links button:hover { color: var(--white); }
.footer__social { padding: 0; display: flex; align-items: center; gap: 12px; border: 0; background: none; color: var(--white); cursor: pointer; text-align: left; }.footer__social svg { width: 39px; height: 39px; padding: 8px; border: 1px solid var(--line); border-radius: 50%; fill: none; stroke: var(--gold); stroke-width: 1.5; }.footer__social span { font-size: .75rem; font-weight: 800; text-transform: uppercase; }.footer__social small { color: #74817f; font-size: .58rem; letter-spacing: .07em; }
.footer__bottom { min-height: 74px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.08); color: #59625f; font-size: .59rem; font-weight: 800; letter-spacing: .12em; }

.maintenance-modal { position: fixed; width: min(510px,calc(100% - 30px)); padding: 56px 48px 43px; overflow: hidden; border: 1px solid rgba(239,184,79,.35); border-radius: 26px; background: #071719; color: var(--sand); box-shadow: 0 45px 140px rgba(0,0,0,.75); text-align: center; }
.maintenance-modal::backdrop { background: rgba(1,6,7,.82); backdrop-filter: blur(10px); }.maintenance-modal[open] { animation: modalIn .45s var(--ease); }@keyframes modalIn { from { opacity:0; transform:scale(.92) translateY(25px); } }
.modal__glow { position: absolute; top: -150px; left: 50%; width: 320px; height: 260px; border-radius: 50%; background: rgba(239,184,79,.13); filter: blur(55px); transform: translateX(-50%); }.modal__close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }.modal__close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.modal__icon { position: relative; width: 78px; height: 78px; margin: 0 auto 27px; display: grid; place-items: center; border: 1px solid rgba(239,184,79,.3); border-radius: 50%; background: rgba(239,184,79,.07); color: var(--gold); }.modal__icon svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.3; }.maintenance-modal h2 { position: relative; margin: 12px 0 15px; font-size: 2.35rem; }.maintenance-modal p { position: relative; }.modal__status { width: max-content; max-width: 100%; margin: 25px auto; padding: 8px 13px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 99px; color: #9da9a5; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }.modal__status span { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 13px var(--gold); }
.toast { position: fixed; right: 88px; bottom: 22px; z-index: 110; padding: 10px 14px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(71,194,189,.25); border-radius: 10px; background: rgba(4,16,17,.9); color: #aab6b2; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(12px); transform: translateY(100px); opacity: 0; transition: .5s var(--ease); }.toast.is-visible { transform: none; opacity: 1; }.toast svg { width: 16px; height: 16px; fill: none; stroke: var(--turquoise); stroke-width: 1.8; }
.discord-fab { position: fixed; right: 20px; bottom: 20px; z-index: 109; width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid rgba(255,214,126,.45); border-radius: 18px; background: var(--gold); color: #11100c; box-shadow: 0 16px 45px rgba(0,0,0,.45),0 0 0 5px rgba(239,184,79,.08); transition: transform .35s var(--ease),border-radius .35s; }
.discord-fab:hover { border-radius: 50%; transform: translateY(-5px) rotate(-3deg); }.discord-fab svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }.discord-fab span { position: absolute; right: 68px; width: max-content; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: rgba(3,11,12,.94); color: var(--white); font-size: .57rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateX(8px); pointer-events: none; transition: .25s; }.discord-fab:hover span { opacity: 1; transform: none; }

.reveal { opacity: 0; transform: translateY(35px); transition: opacity .85s var(--ease), transform .85s var(--ease); }.reveal.is-visible { opacity: 1; transform: none; }.no-js .reveal { opacity: 1; transform: none; }

@media (max-width: 1150px) {
  .desktop-nav { display: none; }.menu-toggle { display: grid; }.sound-toggle { display: none; }
  .mobile-nav { position: fixed; top: 94px; right: 24px; left: 24px; padding: 24px; display: grid; gap: 3px; border: 1px solid var(--line); border-radius: 18px; background: rgba(3,11,12,.98); box-shadow: 0 30px 80px rgba(0,0,0,.5); transform: translateY(-15px) scale(.98); transform-origin: top; opacity: 0; visibility: hidden; transition: .35s var(--ease); }
  .mobile-nav.is-open { transform: none; opacity: 1; visibility: visible; }.mobile-nav a { padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,.06); font-family: "Arial Black"; font-size: .85rem; text-transform: uppercase; }.mobile-nav .button { margin-top: 14px; }
  .hero__copy { width: 68%; }.server-ribbon { right: 24px; }
  .world__layout { grid-template-columns: .95fr .85fr; gap: 7%; }.world__visual { min-height: 500px; }
}

@media (max-width: 860px) {
  .section { padding: 92px 0; }.container { width: min(100% - 34px,var(--container)); }
  .nav-actions .button { display: none; }.site-header { padding: 12px; }.nav-shell { min-height: 55px; }.mobile-nav { top: 80px; right: 12px; left: 12px; }
  .hero { min-height: 820px; }.hero__media { background-position: 67% center; }.hero__shade { background: linear-gradient(90deg,rgba(2,8,9,.94),rgba(2,8,9,.52) 75%,rgba(2,8,9,.32)),linear-gradient(0deg,var(--ink),transparent 35%); }.hero__copy { width: 84%; }.hero__logo { width: 180px; height: 130px; }.hero h1 { font-size: clamp(3.25rem,10vw,5.4rem); }.server-ribbon { bottom: 34px; left: 17px; right: 17px; min-width: 0; }.scroll-cue { display: none; }
  .section-heading { display: block; }.section-heading > p { max-width: 600px; margin-top: 25px; }.pillars { grid-template-columns: 1fr; }.pillar { min-height: 290px; }.pillar__icon { margin: 30px 0 22px; }
  .world__layout { grid-template-columns: 1fr; }.world__visual { min-height: 480px; margin-bottom: 70px; }.world__seal { right: 10px; }
  .journey__steps { grid-template-columns: 1fr; }.journey__track { display: none; }.journey-card { min-height: 330px; }.launcher-panel { grid-template-columns: 1fr; padding: 48px 35px; }.device-scene { margin-top: 35px; }
  .community { min-height: 960px; align-items: flex-end; }.community__art { background: linear-gradient(0deg,#030a0b 0%,rgba(3,10,11,.98) 34%,transparent 66%),linear-gradient(90deg,rgba(3,10,11,.35),transparent),url('/assets/game/gtav-official.jpg') center / cover no-repeat; }.community__keyart { top: 2%; right: -12%; width: 125%; opacity: .83; }.community__copy { width: 100%; padding-bottom: 70px; }
  .store__layout { grid-template-columns: 1fr; }.store__status { margin-top: 80px; }
  .faq__layout { grid-template-columns: 1fr; }.faq__intro { position: static; }.faq__mark { display: none; }.accordion { margin-top: 45px; }
  .footer__top { grid-template-columns: 1fr 1fr; }.footer__brand { grid-column: 1/-1; }
}

@media (max-width: 560px) {
  .container { width: calc(100% - 28px); }.section { padding: 78px 0; }.site-header { padding: 8px; }.nav-shell { padding-left: 12px; }.nav-brand { font-size: .82rem; }.nav-brand__mark { width: 31px; height: 31px; }
  .hero { min-height: 830px; }.hero__content { align-items: flex-start; padding-top: 145px; }.hero__copy { width: 100%; }.hero__media { background-position: 72% center; opacity: .84; }.hero__shade { background: linear-gradient(90deg,rgba(2,8,9,.93),rgba(2,8,9,.36)),linear-gradient(0deg,var(--ink) 0%,rgba(2,8,9,.3) 50%,rgba(2,8,9,.32)); }.hero__logo { width: 140px; height: 102px; margin-bottom: 8px; transform: scale(1.32); }.hero h1 { font-size: clamp(2.85rem,13vw,4rem); }.hero__copy > p { font-size: .88rem; }.hero__actions { display: grid; grid-template-columns: 1fr; }.hero__actions .button { width: 100%; }.hero__trust { display: none; }
  .server-ribbon { padding: 10px 12px; gap: 10px; }.server-ribbon__index { font-size: 1.25rem; }.status-pill { padding: 6px 8px; font-size: .5rem; }.server-ribbon small { display: none; }
  h2 { font-size: clamp(2.35rem,12vw,3.45rem); }.section-heading { margin-bottom: 45px; }.pillar { padding: 27px 24px; }
  .world__visual { min-height: 370px; }.world__frame { inset: 18px; }.world__seal { width: 95px; height: 95px; }.world__seal svg { width: 29px; height: 29px; }
  .launcher-panel { padding: 39px 22px; }.launcher-panel__copy h3 { font-size: 2.55rem; }.device-scene { min-height: 260px; }.device { width: 94%; }
  .community { min-height: 840px; }.community__art { background-size: cover; background-position: 69% 7%; }.community__keyart { top: 5%; right: -31%; width: 160%; }.community__copy h2 { font-size: 3.1rem; }
  .store__status { width: 90%; }.rules__grid { grid-template-columns: 1fr; }.rule { padding: 31px 24px 31px 76px; }.rule b { left: 24px; top: 36px; }
  .accordion__item > button { font-size: .75rem; }.final-cta { min-height: 550px; }.final-cta h2 { font-size: 3.2rem; }
  .footer__top { grid-template-columns: 1fr; gap: 38px; }.footer__brand { grid-column: auto; }.footer__bottom { padding: 22px 0; display: block; }.footer__bottom span { display: block; margin: 5px 0; }
  .maintenance-modal { padding: 52px 24px 35px; }.maintenance-modal h2 { font-size: 2rem; }.toast { right: 76px; bottom: 13px; }.discord-fab { right: 13px; bottom: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}