/* =========================================================
   Līvzeme Lomuspēle — main site styles (assets/lz/lz.css)
   Base: rockstargames design system (ArtDeco type, 8px grid,
   pill buttons, navy gradient backdrop) with Līvzeme lime.
   ========================================================= */

@font-face { font-family: "ArtDecoRegular"; src: url("fonts/ArtDecoRegular-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ArtDecoMedium"; src: url("fonts/ArtDecoMedium-500.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "ArtDecoBold"; src: url("fonts/ArtDecoBold-700.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "ArtDecoCondensedBold"; src: url("fonts/ArtDecoCondensedBold-700.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "ArtDecoCondensedHeavy"; src: url("fonts/ArtDecoCondensedHeavy-900.woff") format("woff"); font-weight: 900; font-display: swap; }

:root {
  /* brand */
  --lime: #c1ff00;
  --lime-deep: #8fbf00;
  --gold: #fcaf17;           /* rockstar yellow-500 */
  --amber: #b07400;          /* rockstar accent */
  --blue: #406faf;           /* rockstar blue-900 */
  --blue-2: #5882bc;

  /* rockstar navy backdrop (from the loader screen) */
  --navy-1: #1f1e33;
  --navy-2: #161527;
  --navy-3: #0c0d1a;
  --ink: #111117;
  --black: #000000;

  /* greys */
  --g-200: #eaeaea;
  --g-300: #d8d8d8;
  --g-400: #b2b2b2;
  --g-500: #919191;
  --g-600: #6d6d6d;
  --g-700: #464646;
  --g-800: #2d2d2d;
  --g-850: #212121;
  --white: #fdfdfd;

  /* gradients (VI-style two-tone text fills) */
  --grad-brand: linear-gradient(90deg, #c1ff00 0%, #e4f86a 45%, #fcaf17 100%);
  --grad-law: linear-gradient(90deg, #ccd9eb 0%, #5882bc 60%, #406faf 100%);
  --grad-sunset: linear-gradient(90deg, #fcaf17 0%, #ff8a5c 50%, #e85d9a 100%);
  --grad-under: linear-gradient(90deg, #c1ff00 0%, #96eab8 100%);
  --grad-night: linear-gradient(180deg, var(--navy-1) 0%, var(--navy-2) 45%, var(--navy-3) 100%);

  --ease: cubic-bezier(.65,.05,.36,1);
  --ease-out: cubic-bezier(.455,.03,.515,.955);
  --radius: 32px;
  --container: 1439.98px;

  --f-display: "ArtDecoCondensedHeavy", "ArtDecoBold", Impact, sans-serif;
  --f-cond: "ArtDecoCondensedBold", "ArtDecoBold", sans-serif;
  --f-heading: "ArtDecoBold", "ArtDecoMedium", sans-serif;
  --f-body: "ArtDecoMedium", "ArtDecoRegular", system-ui, sans-serif;
  --f-mono: "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--navy-3);
  background-image: var(--grad-night);
  background-attachment: fixed;
  color: var(--white);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--lime); color: var(--black); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 8px; }

/* film grain over everything — subtle */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 8001; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .container { padding: 0 48px; } }
@media (min-width: 1440px) { .container { padding: 0 80px; } }

/* ---------- Type ---------- */
.display {
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  line-height: .86; letter-spacing: -.005em;
}
.grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-law { background: var(--grad-law); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-sunset { background: var(--grad-sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-under { background: var(--grad-under); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow {
  font-family: var(--f-heading); font-size: 13px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--g-400); display: inline-flex; align-items: center; gap: 16px;
}
.eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--lime); }
.lead { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.5; color: var(--g-300); }
.muted { color: var(--g-500); }

/* ---------- Buttons (pill, Rockstar style) ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px; padding: 0 32px; border-radius: 1000px;
  font-family: var(--f-heading); font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; isolation: isolate;
  transition: color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  transform: translateY(101%); transition: transform .5s var(--ease);
}
.btn:hover::before { transform: none; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primary { background: var(--lime); color: var(--black); }
.btn-primary::before { background: var(--white); }
.btn-ghost { border: 2px solid #fdfdfd59; color: var(--white); }
.btn-ghost::before { background: var(--white); }
.btn-ghost:hover { color: var(--black); border-color: var(--white); }
.btn-dark { background: var(--black); color: var(--lime); }
.btn-dark::before { background: var(--navy-1); }
.btn-sm { height: 40px; padding: 0 24px; font-size: 12px; }

.play {
  display: inline-flex; align-items: center; gap: 16px; font-family: var(--f-heading);
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
}
.play i {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid #fdfdfd59; transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.play i svg { width: 16px; height: 16px; margin-left: 4px; }
.play:hover i { background: var(--lime); border-color: var(--lime); color: var(--black); }

/* ---------- Loader / start screen ---------- */
.loader {
  position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center;
  background: var(--grad-night);
  transition: clip-path 1s var(--ease);
  clip-path: inset(0 0 0 0);
}
.loader.out { clip-path: inset(0 0 100% 0); }
.loader-inner { display: grid; justify-items: center; gap: 40px; }
.loader-logo { width: 120px; height: auto; overflow: visible; }
.loader-logo path {
  fill: transparent; stroke: var(--lime); stroke-width: 6;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation: draw 2.2s var(--ease) forwards;
}
.loader-logo path + path { animation-delay: .4s; }
.loader.filled .loader-logo path { fill: var(--lime); transition: fill .8s var(--ease); }
.loader.filled .loader-logo { filter: drop-shadow(0 0 24px #c1ff0099); transition: filter .8s var(--ease); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.loader-word {
  font-family: var(--f-heading); font-size: 14px; letter-spacing: .8em; text-indent: .8em;
  text-transform: uppercase; color: var(--g-400); opacity: 0; transform: translateY(8px);
  transition: opacity .7s var(--ease) .2s, transform .7s var(--ease) .2s;
}
.loader.filled .loader-word { opacity: 1; transform: none; }
.loader-bar { width: 160px; height: 2px; background: #fdfdfd1f; overflow: hidden; border-radius: 1000px; }
.loader-bar span { display: block; height: 100%; width: 0; background: var(--lime); transition: width .4s var(--ease); }
.loader.quick .loader-word, .loader.quick .loader-bar { display: none; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 110;
  transition: transform .5s var(--ease), background-color .5s var(--ease);
}
.header.hide { transform: translateY(-100%); }
.header.solid { background: linear-gradient(180deg, #0c0d1ae6, #0c0d1a00); }
.header-inner { display: flex; align-items: center; gap: 24px; height: 88px; }
.brand { display: flex; align-items: center; }
.brand img { height: 40px; width: auto; }
.header-links { display: none; gap: 8px; margin: 0 auto; }
.header-links a {
  position: relative; padding: 8px 16px; font-family: var(--f-heading); font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--g-300); transition: color .3s var(--ease);
}
.header-links a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; background: var(--lime);
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
}
.header-links a:hover, .header-links a.active { color: var(--white); }
.header-links a:hover::after, .header-links a.active::after { transform: scaleX(1); transform-origin: left; }
.header-cta { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.header-cta .btn { display: none; }
.menu-btn {
  height: 48px; padding: 0 24px 0 16px; border-radius: 1000px; border: 2px solid #fdfdfd59;
  display: inline-flex; align-items: center; gap: 16px; font-family: var(--f-heading);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; transition: border-color .3s var(--ease);
}
.menu-btn:hover { border-color: var(--lime); }
.menu-btn .bars { width: 16px; display: grid; gap: 4px; }
.menu-btn .bars i { height: 2px; background: currentColor; border-radius: 2px; transition: transform .4s var(--ease); }
@media (min-width: 1024px) {
  .header-links { display: flex; }
  .header-cta .btn { display: inline-flex; }
}

/* ---------- Full-screen menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 8002; background: var(--navy-3);
  display: grid; grid-template-rows: auto 1fr auto;
  clip-path: inset(0 0 100% 0); transition: clip-path .75s var(--ease); visibility: hidden;
}
.menu.open { clip-path: inset(0 0 0 0); visibility: visible; }
.menu-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.menu-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transform: scale(1.08); transition: opacity .7s var(--ease), transform 1.3s var(--ease);
}
.menu-bg img.on { opacity: .35; transform: scale(1); }
.menu-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy-3) 20%, #0c0d1a99 60%, #0c0d1a33); }
.menu-top { display: flex; align-items: center; height: 88px; }
.menu-top .menu-btn { margin-left: auto; }
.menu-list { align-self: center; display: grid; gap: 8px; counter-reset: m; }
.menu-list a {
  counter-increment: m; display: flex; align-items: baseline; gap: 24px;
  font-family: var(--f-display); text-transform: uppercase; line-height: .95;
  font-size: clamp(48px, 9vw, 120px); color: #fdfdfd40;
  transform: translateY(40px); opacity: 0;
  transition: color .3s var(--ease), transform .7s var(--ease), opacity .7s var(--ease);
}
.menu-list a::before { content: "0" counter(m); font-family: var(--f-heading); font-size: 14px; letter-spacing: .1em; color: var(--lime); transform: translateY(-1.6em); }
.menu.open .menu-list a { transform: none; opacity: 1; }
.menu-list a:hover, .menu-list a.active { color: var(--white); }
.menu-list a.active::after { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--lime); align-self: center; }
.menu-foot { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding: 32px 0; border-top: 1px solid #fdfdfd1f; color: var(--g-500); font-size: 13px; }
.menu-foot .socials { display: flex; gap: 8px; }

.socials a {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid #fdfdfd33; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.socials a:hover { background: var(--lime); color: var(--black); border-color: var(--lime); }
.socials svg { width: 18px; height: 18px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: end;
  overflow: hidden; isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 115%; object-fit: cover; will-change: transform; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, #c1ff0026 0%, #c1ff0000 70%),
    linear-gradient(180deg, #0c0d1a99 0%, #0c0d1a00 30%, #0c0d1a00 55%, var(--navy-3) 100%);
}
.hero-center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.hero-logo { width: clamp(160px, 22vw, 320px); filter: drop-shadow(0 0 48px #c1ff0080); }
.hero-bottom { padding-bottom: 64px; display: grid; gap: 32px; justify-items: center; text-align: center; }
.hero-title { font-size: clamp(56px, 11vw, 176px); }
.hero-sub { font-family: var(--f-heading); font-size: clamp(14px, 1.4vw, 18px); letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; }

.page-hero { min-height: 88svh; }
.page-hero .hero-bottom { justify-items: start; text-align: left; }
.page-hero .hero-title { font-size: clamp(64px, 13vw, 216px); }

/* ---------- Sections ---------- */
.section { position: relative; padding: 128px 0; }
.section-sm { padding: 80px 0; }
.section-head { display: grid; gap: 24px; margin-bottom: 64px; }
.section-head h2 { font-size: clamp(48px, 8vw, 128px); }
@media (min-width: 1024px) {
  .section-head.split { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 80px; }
}

/* statement text — big centered lines that light up on scroll */
.statement { max-width: 1200px; margin: 0 auto; text-align: center; }
.statement p {
  font-family: var(--f-heading); text-transform: uppercase; font-size: clamp(28px, 4vw, 56px); line-height: 1.12;
}
.statement .w { color: #fdfdfd26; transition: color .4s var(--ease); }
.statement .w.on { color: var(--white); }
.statement .w.hl.on { color: var(--lime); }

/* ---------- Image frames with scroll-grow ---------- */
.frame { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--g-850); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.frame:hover img { transform: scale(1.04); }
.grow { clip-path: inset(var(--inset, 12%) round var(--radius)); will-change: clip-path; }

/* ---------- Character / faction rows (VI "people") ---------- */
.people { display: grid; gap: 24px; }
@media (min-width: 1024px) { .people { grid-template-columns: repeat(3, 1fr); } }
.person {
  position: relative; display: block; aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; isolation: isolate;
  background: var(--g-850);
}
.person img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.3s var(--ease); }
.person::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0c0d1a00 40%, #0c0d1af2 100%); }
.person:hover img { transform: scale(1.06); }
.person-body { position: absolute; inset: auto 0 0 0; padding: 32px; display: grid; gap: 8px; }
.person-body h3 { font-size: clamp(48px, 5vw, 80px); }
.person-body p { color: var(--g-300); max-width: 360px; }
.person-tag {
  position: absolute; top: 24px; left: 24px; padding: 8px 16px; border-radius: 1000px; background: #0c0d1acc;
  font-family: var(--f-heading); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
}
.person .arrow {
  position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lime); color: var(--black); transform: scale(0) rotate(-45deg); transition: transform .5s var(--ease);
}
.person:hover .arrow { transform: scale(1) rotate(0); }
.person .arrow svg { width: 18px; height: 18px; }

/* ---------- Story blocks (pasaule page) ---------- */
.story { display: grid; gap: 48px; align-items: center; }
.story + .story { margin-top: 160px; }
.story-media { aspect-ratio: 4/5; }
.story-copy { display: grid; gap: 24px; align-content: start; }
.story-copy h2 { font-size: clamp(64px, 9vw, 152px); }
.story-copy blockquote {
  font-family: var(--f-heading); font-size: clamp(20px, 2vw, 28px); line-height: 1.3; text-transform: uppercase;
  border-left: 2px solid var(--lime); padding-left: 24px;
}
.story-copy p { color: var(--g-400); max-width: 560px; }
.story-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.story-thumbs .frame { aspect-ratio: 1; border-radius: 16px; cursor: zoom-in; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #fdfdfd1f; margin-top: 8px; }
.facts div { padding: 16px 16px 0 0; }
.facts b { display: block; font-family: var(--f-display); font-size: 40px; line-height: 1; color: var(--white); }
.facts span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--g-500); }
@media (min-width: 1024px) {
  .story { grid-template-columns: 1fr 1fr; gap: 96px; }
  .story.flip .story-media { order: 2; }
}

/* ---------- Feature list (big rows) ---------- */
.rows { border-top: 1px solid #fdfdfd1f; }
.row {
  position: relative; display: grid; gap: 16px; padding: 40px 0; border-bottom: 1px solid #fdfdfd1f;
  align-items: center; overflow: hidden;
}
.row-n { font-family: var(--f-heading); font-size: 14px; color: var(--lime); letter-spacing: .1em; }
.row h3 { font-family: var(--f-display); font-size: clamp(40px, 5vw, 80px); line-height: .9; text-transform: uppercase; transition: transform .5s var(--ease), color .5s var(--ease); }
.row p { color: var(--g-400); max-width: 480px; }
.row:hover h3 { transform: translateX(16px); color: var(--lime); }
.row-img {
  position: absolute; right: 0; top: 50%; width: 320px; aspect-ratio: 16/10; border-radius: 24px; overflow: hidden;
  transform: translate(40px, -50%) rotate(4deg); opacity: 0; pointer-events: none;
  transition: transform .7s var(--ease), opacity .5s var(--ease);
}
.row-img img { width: 100%; height: 100%; object-fit: cover; }
.row:hover .row-img { opacity: 1; transform: translate(0, -50%) rotate(0); }
@media (min-width: 1024px) {
  .row { grid-template-columns: 80px 1.2fr 1fr 360px; gap: 32px; }
}
@media (max-width: 1023.98px) { .row-img { display: none; } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); border-block: 1px solid #fdfdfd1f; }
.stats > div { padding: 40px 16px; border-right: 1px solid #fdfdfd1f; }
.stats > div:nth-child(2n) { border-right: 0; }
.stats b { display: flex; align-items: center; gap: 16px; font-family: var(--f-display); font-size: clamp(48px, 5vw, 80px); line-height: 1; }
.stats span { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--g-500); }
.live-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 16px var(--lime); animation: pulse 2.15s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.6); opacity: .5; } }
@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stats > div { padding: 48px 32px; }
  .stats > div:nth-child(2n) { border-right: 1px solid #fdfdfd1f; }
  .stats > div:last-child { border-right: 0; }
}

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; padding: 32px 0; border-block: 1px solid #fdfdfd1f; }
.marquee-track { display: flex; gap: 48px; width: max-content; animation: marquee 48s linear infinite; align-items: center; }
.marquee span { font-family: var(--f-display); font-size: clamp(56px, 7vw, 104px); line-height: 1; text-transform: uppercase; white-space: nowrap; }
.marquee .o { color: transparent; -webkit-text-stroke: 2px #fdfdfd40; }
.marquee img { height: 56px; width: auto; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Video / trailer block ---------- */
.trailer { position: relative; aspect-ratio: 16/9; border-radius: 40px; overflow: hidden; isolation: isolate; display: grid; place-items: center; }
.trailer > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.3s var(--ease); }
.trailer::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, #0c0d1a33, #0c0d1acc); }
.trailer:hover > img { transform: scale(1.04); }
.trailer .play i { width: 96px; height: 96px; background: var(--lime); color: var(--black); border: 0; }
.trailer .play i svg { width: 24px; height: 24px; }
.trailer-label { position: absolute; left: 40px; bottom: 32px; text-align: left; }
.trailer-label b { display: block; font-family: var(--f-display); font-size: clamp(32px, 4vw, 64px); line-height: 1; text-transform: uppercase; }

/* ---------- Lightbox / modal ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 8002; background: #000000eb; display: grid; place-items: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img, .lightbox video { max-height: 85vh; width: auto; border-radius: 24px; box-shadow: 0 0 2px #00000059, 0 16px 56px #00000059; }
.lightbox video { width: min(90vw, 85vh); }
.lightbox .close { position: absolute; top: 24px; right: 24px; }

/* ---------- Accordion (rules / FAQ) ---------- */
.acc { border-top: 1px solid #fdfdfd1f; }
.acc-item { border-bottom: 1px solid #fdfdfd1f; }
.acc-head {
  width: 100%; display: grid; grid-template-columns: 64px 1fr 48px; gap: 16px; align-items: center;
  padding: 32px 0; text-align: left;
}
.acc-head .n { font-family: var(--f-heading); color: var(--lime); font-size: 14px; letter-spacing: .1em; }
.acc-head h3 { font-family: var(--f-display); font-size: clamp(32px, 3.4vw, 56px); line-height: .95; text-transform: uppercase; transition: color .3s var(--ease); }
.acc-head:hover h3 { color: var(--lime); }
.acc-head .pm { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fdfdfd33; position: relative; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.acc-head .pm::before, .acc-head .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: currentColor; transition: transform .4s var(--ease); }
.acc-head .pm::after { transform: rotate(90deg); }
.acc-item.open .pm { background: var(--lime); border-color: var(--lime); color: var(--black); }
.acc-item.open .pm::after { transform: rotate(0); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-body ol, .acc-body .txt { padding: 0 0 40px 80px; color: var(--g-300); display: grid; gap: 16px; max-width: 960px; }
.acc-body ol { list-style: none; counter-reset: r; }
.acc-body li { counter-increment: r; display: grid; grid-template-columns: 56px 1fr; gap: 8px; }
.acc-body li::before { content: attr(data-p) "." counter(r); font-family: var(--f-mono); font-size: 14px; color: var(--g-500); padding-top: 2px; }
.acc-body li b { color: var(--white); font-weight: 500; }
.acc-item.hidden { display: none; }
@media (max-width: 767.98px) {
  .acc-head { grid-template-columns: 40px 1fr 48px; }
  .acc-body ol, .acc-body .txt { padding-left: 0; }
}

/* ---------- Inputs ---------- */
.search {
  display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 24px; border-radius: 1000px;
  border: 2px solid #fdfdfd33; transition: border-color .3s var(--ease); max-width: 560px;
}
.search:focus-within { border-color: var(--lime); }
.search svg { width: 20px; height: 20px; color: var(--g-500); flex: none; }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--white); font: inherit; font-size: 16px; }
.search input::placeholder { color: var(--g-600); }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  height: 40px; padding: 0 24px; border-radius: 1000px; border: 2px solid #fdfdfd33;
  font-family: var(--f-heading); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.tab:hover { border-color: var(--lime); }
.tab.on { background: var(--lime); border-color: var(--lime); color: var(--black); }

/* ---------- Connect card ---------- */
.connect {
  display: grid; gap: 24px; padding: 40px; border-radius: 40px; background: var(--black);
  border: 1px solid #fdfdfd1f; position: relative; overflow: hidden; isolation: isolate;
}
.connect::before { content: ""; position: absolute; width: 480px; height: 480px; right: -160px; top: -160px; z-index: -1; background: radial-gradient(circle, #c1ff0040, #c1ff0000 70%); }
.connect code {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 16px 16px 24px; border-radius: 1000px;
  background: var(--g-850); font-family: var(--f-mono); font-size: 16px; color: var(--lime); overflow: hidden;
}
.connect code span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 24px; counter-reset: s; }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  counter-increment: s; position: relative; padding: 40px 32px; border-radius: var(--radius);
  background: #fdfdfd0a; border: 1px solid #fdfdfd1f; display: grid; gap: 16px; align-content: start; min-height: 360px;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.step:hover { border-color: var(--lime); transform: translateY(-8px); }
.step::before { content: "0" counter(s); font-family: var(--f-display); font-size: 120px; line-height: .8; }
.step:nth-child(1)::before { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step:nth-child(2)::before { background: var(--grad-law); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step:nth-child(3)::before { background: var(--grad-sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step h3 { font-family: var(--f-heading); font-size: 24px; text-transform: uppercase; letter-spacing: .04em; margin-top: auto; }
.step p { color: var(--g-400); }
.step .btn { justify-self: start; margin-top: 8px; }

/* ---------- Big CTA ---------- */
.cta {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 40px; min-height: 640px;
  display: grid; place-items: center; text-align: center; padding: 96px 24px;
}
.cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0c0d1a66, #0c0d1ae6), radial-gradient(ellipse at center, #c1ff0033, #c1ff0000 60%); }
.cta-inner { display: grid; gap: 32px; justify-items: center; }
.cta h2 { font-size: clamp(64px, 12vw, 200px); }

/* ---------- Footer ---------- */
.footer { margin-top: 128px; padding: 96px 0 40px; background: var(--black); position: relative; overflow: hidden; }
.footer-big {
  font-family: var(--f-display); text-transform: uppercase; line-height: .8; font-size: 22.5vw;
  color: transparent; -webkit-text-stroke: 1px #fdfdfd1f; white-space: nowrap; text-align: center;
  margin-top: 80px; user-select: none;
}
.footer-grid { display: grid; gap: 48px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer h4 { font-family: var(--f-heading); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--g-600); margin-bottom: 24px; }
.footer ul { list-style: none; display: grid; gap: 8px; }
.footer ul a { color: var(--g-300); transition: color .3s var(--ease); }
.footer ul a:hover { color: var(--lime); }
.footer-brand img { height: 56px; width: auto; }
.footer-brand p { color: var(--g-500); margin: 24px 0; max-width: 360px; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; padding-top: 32px; margin-top: 40px; border-top: 1px solid #fdfdfd1f; color: var(--g-600); font-size: 13px; }

/* ---------- Reveal ---------- */
.rv { opacity: 0; transform: translateY(48px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.split-line { display: block; overflow: hidden; padding: .2em 0 .1em; margin: -.2em 0 -.1em; }
.split-line > span { display: block; transform: translateY(140%); transition: transform 1s var(--ease); }
.in .split-line > span, .split-line.in > span { transform: none; }

.toast {
  position: fixed; left: 50%; bottom: 32px; z-index: 99999; transform: translate(-50%, 160%);
  padding: 16px 24px; border-radius: 1000px; background: var(--lime); color: var(--black);
  font-family: var(--f-heading); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  transition: transform .5s var(--ease), visibility .5s; box-shadow: 0 0 16px #00000073; visibility: hidden;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
  .split-line > span { transform: none; }
  .grow { clip-path: none; }
  .loader-logo path { stroke-dashoffset: 0; }
}

/* =========================================================
   Main-site additions
   ========================================================= */

/* ---------- Header: login state ---------- */
.user-chip {
  display: none; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 4px; border-radius: 1000px;
  background: #fdfdfd0f; border: 1px solid #fdfdfd1f; font-size: 13px; color: var(--g-300); max-width: 240px;
}
.user-chip img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.user-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1280px) { .user-chip { display: inline-flex; } }
.btn-discord { background: var(--white); color: var(--black); }
.btn-discord::before { background: var(--lime); }
.btn-discord i { font-size: 16px; }
.menu-auth { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Hero carousel (VI key-art style) ---------- */
.hero-slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.3s var(--ease); }
.hero-slide.on { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform: scale(1.12); }
.hero-slide.on img { animation: kenburns 12s linear forwards; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 0% 50%, var(--glow-l, #c1ff0033), transparent 70%),
              radial-gradient(ellipse 50% 60% at 100% 50%, var(--glow-r, #c1ff001f), transparent 70%); }
.hero-pager { display: flex; gap: 8px; }
.hero-pager button { width: 64px; height: 24px; display: grid; align-items: center; }
.hero-pager button i { display: block; height: 2px; background: #fdfdfd40; border-radius: 1000px; overflow: hidden; }
.hero-pager button i::after { content: ""; display: block; height: 100%; width: var(--p, 0%); background: var(--lime); }

/* ---------- Countdown (release date) ---------- */
.countdown { display: flex; gap: 24px; justify-content: center; align-items: flex-start; }
.countdown div { display: grid; justify-items: center; gap: 8px; min-width: 72px; }
.countdown b { font-family: var(--f-display); font-size: clamp(40px, 5vw, 72px); line-height: .9; font-variant-numeric: tabular-nums; }
.countdown span { font-family: var(--f-heading); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--g-400); }
.countdown .sep { font-family: var(--f-display); font-size: clamp(40px, 5vw, 72px); line-height: .9; color: #fdfdfd40; min-width: 0; }
.release-date { font-family: var(--f-heading); font-size: clamp(14px, 1.3vw, 16px); letter-spacing: .4em; text-indent: .4em; text-transform: uppercase; }

.dates { display: grid; gap: 16px; }
@media (min-width: 768px) { .dates { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .dates { grid-template-columns: repeat(4, 1fr); } }
.date-card { padding: 32px; border-radius: var(--radius); border: 1px solid #fdfdfd1f; background: #fdfdfd08; display: grid; gap: 16px; align-content: space-between; min-height: 200px; }
.date-card.main { border-color: var(--lime); background: #c1ff000d; }
.date-card small { font-family: var(--f-heading); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--g-500); }
.date-card b { font-family: var(--f-display); font-size: 40px; line-height: .95; text-transform: uppercase; }
.date-card.main b { color: var(--lime); }
.date-card.reserve b { color: var(--g-400); }

/* ---------- Signal strip ---------- */
.signal { display: grid; grid-template-columns: repeat(2, 1fr); border-block: 1px solid #fdfdfd1f; }
.signal > div { padding: 32px 16px; border-right: 1px solid #fdfdfd1f; display: grid; gap: 8px; }
.signal > div:nth-child(2n) { border-right: 0; }
.signal span { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--g-500); font-family: var(--f-heading); }
.signal b { font-family: var(--f-display); font-size: clamp(28px, 2.6vw, 40px); line-height: 1; text-transform: uppercase; }
@media (min-width: 1024px) {
  .signal { grid-template-columns: repeat(4, 1fr); }
  .signal > div { padding: 40px 32px; }
  .signal > div:nth-child(2n) { border-right: 1px solid #fdfdfd1f; }
  .signal > div:last-child { border-right: 0; }
}

/* ---------- Sneak peak cards / entries ---------- */
.sneak-cards { display: grid; gap: 24px; }
@media (min-width: 1024px) { .sneak-cards { grid-template-columns: 1.4fr 1fr 1fr; } }
.sneak-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; isolation: isolate; background: var(--g-850); }
.sneak-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.3s var(--ease); }
.sneak-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0c0d1a00 35%, #0c0d1af2 100%); }
.sneak-card:hover img { transform: scale(1.05); }
.sneak-card .body { position: absolute; inset: auto 0 0 0; padding: 32px; display: grid; gap: 8px; }
.sneak-card h3 { font-family: var(--f-display); font-size: clamp(36px, 3.4vw, 56px); line-height: .9; text-transform: uppercase; }
.sneak-card p { color: var(--g-300); font-size: 15px; max-width: 420px; }
.sneak-card time { font-family: var(--f-mono); font-size: 12px; color: var(--lime); }
.sneak-card .arrow {
  position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lime); color: var(--black); transform: scale(0) rotate(-45deg); transition: transform .5s var(--ease);
}
.sneak-card:hover .arrow { transform: scale(1) rotate(0); }
.sneak-card .arrow svg { width: 18px; height: 18px; }

.sneak-entry { display: grid; gap: 48px; align-items: center; scroll-margin-top: 120px; }
.sneak-entry + .sneak-entry { margin-top: 160px; }
.sneak-entry .copy { display: grid; gap: 24px; align-content: start; }
.sneak-entry h2 { font-size: clamp(56px, 7vw, 120px); }
.sneak-entry ul { list-style: none; display: grid; gap: 16px; border-top: 1px solid #fdfdfd1f; padding-top: 24px; }
.sneak-entry li { display: grid; grid-template-columns: 24px 1fr; gap: 16px; color: var(--g-300); }
.sneak-entry li::before { content: ""; width: 8px; height: 8px; margin: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.sneak-entry time { font-family: var(--f-mono); font-size: 13px; color: var(--lime); }
@media (min-width: 1024px) {
  .sneak-entry { grid-template-columns: 1.3fr 1fr; gap: 80px; }
  .sneak-entry.flip .media { order: 2; }
}

/* ---------- Media slider ---------- */
.slider { display: grid; gap: 16px; }
.slider-view { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: var(--g-850); }
.slider-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 1.3s var(--ease); cursor: zoom-in; }
.slider-view img.on { opacity: 1; transform: none; }
.slider-nav { display: flex; align-items: center; gap: 8px; }
.slider-nav .count { font-family: var(--f-mono); font-size: 13px; color: var(--g-500); margin-right: auto; }
.slider-nav button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fdfdfd33; display: grid; place-items: center; transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease); }
.slider-nav button:hover { background: var(--lime); border-color: var(--lime); color: var(--black); }
.slider-nav button svg { width: 16px; height: 16px; }

/* ---------- Whitelist panel ---------- */
.wl { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1024px) { .wl { grid-template-columns: 1fr 1.2fr; gap: 80px; } }
.wl-panel { position: relative; overflow: hidden; isolation: isolate; padding: 40px; border-radius: 40px; background: var(--black); border: 1px solid #fdfdfd1f; display: grid; gap: 24px; }
.wl-panel::before { content: ""; position: absolute; width: 480px; height: 480px; right: -200px; top: -200px; z-index: -1; background: radial-gradient(circle, #c1ff0033, transparent 65%); }
.wl-panel h2 { font-family: var(--f-display); font-size: clamp(40px, 4vw, 64px); line-height: .9; text-transform: uppercase; }
.wl-panel > p { color: var(--g-400); }
.wl-profile { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 1000px; background: #fdfdfd0a; border: 1px solid #fdfdfd1f; }
.wl-profile img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--lime); background: var(--g-850); }
.wl-profile strong { display: block; font-family: var(--f-heading); font-size: 18px; }
.wl-profile span { font-size: 13px; color: var(--g-500); }
.wl-security { padding: 24px; border-radius: 24px; border: 1px solid #fcaf1747; background: #fcaf1714; }
.wl-security strong { display: block; font-family: var(--f-heading); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.wl-security p { margin-top: 8px; color: var(--g-300); font-size: 15px; }
.wl-loading { display: inline-flex; align-items: center; gap: 16px; color: var(--g-400); font-family: var(--f-heading); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.wl-checks { display: grid; gap: 8px; }
.wl-check { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; padding: 16px; border-radius: 24px; border: 1px solid #fdfdfd1f; background: #fdfdfd08; }
.wl-check i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; }
.wl-check.ok i { background: #c1ff001f; color: var(--lime); }
.wl-check.bad i { background: #e85d5d1f; color: #ff8f8f; }
.wl-check strong { display: block; font-family: var(--f-heading); font-size: 15px; padding-top: 8px; }
.wl-check .msg { display: block; margin-top: 4px; color: var(--g-500); font-size: 14px; }
.wl-alert { padding: 16px 24px; border-radius: 24px; border: 1px solid #e85d5d59; background: #e85d5d1a; color: #ffd0d6; }
.wl-alert.info { border-color: #c1ff0047; background: #c1ff0014; color: #e8f7c8; }
.wl-rules { display: grid; grid-template-columns: 24px 1fr; gap: 16px; align-items: start; color: var(--g-200); cursor: pointer; }
.wl-rules input { width: 24px; height: 24px; accent-color: var(--lime); margin-top: 2px; }
.wl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-actions .btn[disabled] { background: var(--g-800); color: var(--g-600); pointer-events: none; }
.wl-success { padding: 24px; border-radius: 24px; border: 1px solid #c1ff0047; background: #c1ff000f; display: grid; gap: 16px; }
.wl-success h3 { font-family: var(--f-display); font-size: 40px; line-height: .9; text-transform: uppercase; color: var(--lime); }
.wl-success ul { list-style: none; display: grid; gap: 8px; color: var(--g-300); }
.wl-success li::before { content: "— "; color: var(--lime); }
.wl-success p { color: var(--g-400); }
.wl-steps { display: grid; border-top: 1px solid #fdfdfd1f; }
.wl-steps > div { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid #fdfdfd1f; }
.wl-steps b { font-family: var(--f-display); font-size: 40px; line-height: .9; color: var(--lime); }
.wl-steps h3 { font-family: var(--f-heading); font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }
.wl-steps p { color: var(--g-500); font-size: 15px; margin-top: 4px; }
[hidden] { display: none !important; }

@media (max-width: 599px) {
  .countdown { gap: 8px; }
  .countdown div { min-width: 56px; }
  .countdown .sep { display: none; }
  .wl-panel { padding: 24px; border-radius: 32px; }
}

/* 4-step process */
@media (min-width: 768px) { .steps-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .steps-4 { grid-template-columns: repeat(4, 1fr); } }
.step:nth-child(4)::before { background: var(--grad-under); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step .btn { margin-top: 8px; }

/* Gradient text: give accents (Ā Ē Ī Ū) room above the glyph box so they get painted too */
.grad, .grad-law, .grad-sunset, .grad-under, .tg { padding-top: .22em; margin-top: -.22em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
span.grad, span.grad-law, span.grad-sunset, span.grad-under, span.tg { margin-top: 0; }

@media (max-width: 599px) {
  .hero-scroll { display: none; }
  .hero-pager button { width: 40px; }
}

/* Headline mask: the first line keeps its accent room inside the heading, so it can't overlap the label above */
.rv-lines > .split-line:first-child { margin-top: 0; }

/* Image-free CTA: logo glow instead of a photo */
.cta-plain { background: var(--black); border: 1px solid #fdfdfd1f; }
.cta-plain::after { background: radial-gradient(ellipse 60% 70% at 50% 40%, #c1ff0029, #c1ff0000 70%); }
.cta-plain::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 720px; height: 900px; transform: translate(-50%, -50%);
  background: url("img/logo.svg") center / contain no-repeat; opacity: .05;
}

/* Big glowing mark for image-free heroes and the menu */
.hero-mark { position: absolute; z-index: -1; right: -6%; top: 50%; height: 130%; transform: translateY(-50%); pointer-events: none; }
.hero-mark img { height: 100%; width: auto; opacity: .1; filter: drop-shadow(0 0 80px #c1ff0099); }
.hero-mark::before { content: ""; position: absolute; inset: 10% 0; background: radial-gradient(circle, #c1ff0026, transparent 60%); }
@media (max-width: 767px) { .hero-mark { right: -40%; height: 90%; } }
.menu-mark { display: grid; place-items: center end; padding-right: 4%; }
.menu-mark img { position: static !important; width: auto !important; height: 90% !important; opacity: .08 !important; transform: none !important; filter: drop-shadow(0 0 80px #c1ff00); }

/* Left-aligned page hero over a photo: darken the text side */
.hero-shade-l .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0c0d1ae6 0%, #0c0d1a99 40%, #0c0d1a00 75%); }

/* One hero image: slow endless zoom in and out */
.hero-slides.single .hero-slide.on img { animation: heroZoom 20s ease-in-out infinite alternate; }
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .hero-slides.single .hero-slide.on img { animation: none; transform: none; } }