:root {
  --bg:        #07070F;   /* near-black base */
  --bg-2:      #0A0A1A;
  --panel:     #10132A;
  --panel-2:   #151935;
  --text:      #EAF7F3;
  --muted:     #8A93B2;
  --line:      rgba(255,255,255,0.08);

  /* Aurora / Emerald accent */
  --acc-1:     #00FF87;   /* green */
  --acc-2:     #60EFFF;   /* cyan */
  --acc:       #34E0C0;
  --bad:       #FF6B6B;
  --bad-text:  #FFB3B3;
  --acc-grad:  linear-gradient(100deg, var(--acc-1), var(--acc-2));
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1200px, 92vw); margin-inline: auto; }

.display {
  font-family: "Anton", "Inter", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  font-weight: 400;
}
.accent-text {
  background: var(--acc-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
}
.btn-primary { background: var(--acc-grad); color: #04140E; box-shadow: 0 8px 30px rgba(52,224,192,.25); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(52,224,192,.4); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--acc); color: var(--acc); }

/* ---------- NAV ---------- */
header.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  backdrop-filter: blur(14px);
  background: rgba(7,7,15,0.6);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { font-family: "Anton", sans-serif; font-size: 1.6rem; letter-spacing: 0.04em; text-transform: uppercase; }
.logo span { color: var(--acc); }
nav.links { display: flex; gap: 30px; }
nav.links a { font-size: 0.9rem; font-weight: 600; color: var(--muted); transition: color .15s; }
nav.links a:hover, nav.links a.active { color: var(--text); }
.nav-cta { display: flex; gap: 12px; align-items: center; }

/* hamburger */
.burger {
  display: none; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  position: relative; z-index: 101;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* full-screen mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bg);
  transform: translateX(100%); transition: transform .3s ease;
  padding: 96px 0 40px; overflow-y: auto; visibility: hidden;
}
.mobile-menu.open { transform: translateX(0); visibility: visible; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a { padding: 18px 2px; font-size: 1.25rem; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line); }
.mobile-menu nav a:active, .mobile-menu nav a.active { color: var(--acc); }
.mobile-menu .m-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.mobile-menu .m-cta .btn { width: 100%; justify-content: center; padding: 15px 22px; }

@media (max-width: 900px) {
  nav.links, .nav-cta { display: none; }
  .burger { display: flex; }
}

/* ---------- HERO (home) — intro video background ---------- */
.hero {
  position: relative; height: 100vh; min-height: 560px;
  display: flex; align-items: center;
  overflow: hidden;
}
/* Layer 1: the intro.mov footage, centred and filling the whole section */
.hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none;
}
/* Layer 2: Deep Space tint (site palette) — colours the video, aids legibility,
   and fades the bottom edge into the page background */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 6%, rgba(27,33,62,.42), transparent 68%),
    linear-gradient(180deg, rgba(10,10,26,.58), rgba(7,7,15,.74)),
    linear-gradient(180deg, transparent 60%, var(--bg) 100%);
}

.hero-content { position: relative; z-index: 2; padding-top: 72px; }
.eyebrow {
  display: inline-block; font-size: .8rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--acc); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; margin-bottom: 26px;
}
.hero h1, .hero .hero-slogan { font-size: clamp(3rem, 8.5vw, 8rem); max-width: 15ch; text-shadow: 0 4px 40px rgba(0,0,0,.45); }
.hero p.lead { margin: 26px 0 34px; color: var(--text); opacity: .9; font-size: clamp(1rem,1.6vw,1.25rem); max-width: 52ch; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 900px){
  /* Full-viewport hero on mobile too — min-height rather than height so longer
     copy can still push it taller. svh is the viewport with the browser chrome
     showing, so the hero does not resize as that bar hides on scroll. */
  .hero { height: auto; min-height: 100vh; min-height: 100svh; padding-block: 104px 56px; }
}
@media (max-width: 600px){
  .hero .hero-slogan.morph { font-size: clamp(2.4rem, 10.2vw, 3.6rem); }
  .hero p.lead { font-size: 1.2rem; margin: 22px 0 0; }
  .morph { min-height: 0; }
}

.scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; color: var(--muted); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; }
@media (max-width: 900px){ .scroll-hint { display: none; } }
.scroll-hint::after { content: ""; width: 1px; height: 34px; background: linear-gradient(var(--acc), transparent); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.3} 50%{opacity:1} }
@media (prefers-reduced-motion: reduce){ .hero-video { display: none; } }

/* animated gradient + faint grid — used by the sub-page heroes (.page-hero) */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 60% at 75% 20%, rgba(96,239,255,.25), transparent 60%),
    radial-gradient(50% 50% at 20% 80%, rgba(0,255,135,.20), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  animation: heroShift 14s ease-in-out infinite alternate;
}
@keyframes heroShift {
  0%   { filter: hue-rotate(0deg); background-position: 0 0; }
  100% { filter: hue-rotate(25deg); background-position: 20px 40px; }
}
.hero-grid {
  position: absolute; inset: 0; z-index: 0; opacity: .12;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 80%);
  animation: gridPan 20s linear infinite;
}
@keyframes gridPan { to { background-position: 48px 48px; } }

/* ---------- PAGE HERO (sub-pages) ---------- */
.page-hero { position: relative; padding: 168px 0 84px; overflow: hidden; }
.page-hero .hero-content { padding-top: 0; }
.page-hero h1 { font-size: clamp(2.6rem, 7vw, 6rem); max-width: 16ch; }
.page-hero p { color: var(--muted); font-size: clamp(1rem,1.6vw,1.2rem); max-width: 58ch; margin-top: 22px; line-height: 1.6; }

/* ---------- SECTION SHELL ---------- */
section { position: relative; padding: 110px 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 48px; flex-wrap: wrap; }
.sec-head .kicker { color: var(--acc); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; margin-bottom: 12px; }
.sec-head h2 { font-size: clamp(2rem, 5vw, 3.6rem); }

/* ---------- FEATURE MARQUEE ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 26px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 40px; width: max-content; animation: scrollx 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollx { to { transform: translateX(-50%); } }
.feat { font-family: "Anton", sans-serif; font-size: 1.3rem; color: var(--text); opacity: .85; letter-spacing: .04em; white-space: nowrap; text-transform: uppercase; }
.sep { color: var(--acc); font-size: 1rem; }

/* ---------- WHY IT WORKS ---------- */
.why-works { text-align: center; max-width: 820px; margin-inline: auto; }
.why-works .kicker { color: var(--acc); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; margin-bottom: 18px; }
.why-works h2 { font-size: clamp(2.2rem, 6vw, 4.4rem); margin-bottom: 22px; }
.why-works p { color: var(--muted); font-size: clamp(1rem,1.6vw,1.2rem); max-width: 52ch; margin: 0 auto 30px; line-height: 1.6; }

/* ---------- GAMES ---------- */
.game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 850px){ .game-grid { grid-template-columns: 1fr; } }
.game-card {
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 24px;
  overflow: hidden; background: var(--panel);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.game-card:hover { transform: translateY(-6px); border-color: var(--acc); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.game-art { aspect-ratio: 16/10; position: relative; border-bottom: 1px solid var(--line); overflow: hidden; }
.game-art::after { content: attr(data-name); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Anton", sans-serif; font-size: clamp(2.4rem,5vw,3.6rem); letter-spacing: .12em; color: rgba(255,255,255,.14); text-transform: uppercase; }
.game-art.plunder { background: radial-gradient(120% 120% at 30% 20%, rgba(96,239,255,.4), transparent 55%), linear-gradient(160deg, #0b3b2e, #061a3a); }
.game-art.chances { background: radial-gradient(120% 120% at 70% 20%, rgba(0,255,135,.35), transparent 55%), linear-gradient(160deg, #2a2406, #0a1a3a); }
.game-art.diver { background: radial-gradient(120% 120% at 50% 15%, rgba(96,239,255,.38), transparent 58%), linear-gradient(160deg, #04203a, #060b22); }
/* Diver's key art is square and self-contained — fit it whole rather than
   cropping the fins and the bubble off a 16:10 frame. Flat ground matches the
   artwork's own backdrop so the letterboxing is invisible. */
.showcase-art.fit { background: #030b1e; }
.showcase-art.fit img { object-fit: contain; }
.game-art.plundercrash { background: radial-gradient(120% 120% at 25% 15%, rgba(52,224,192,.34), transparent 55%), linear-gradient(160deg, #0a2f3c, #0b0a24); }
/* Neon Rush is synthwave — magenta/violet rather than the site's aurora green,
   matching the game's own palette. */
.game-art.neonrush { background: radial-gradient(120% 120% at 50% 18%, rgba(224,86,253,.34), transparent 58%), linear-gradient(160deg, #2a0a3a, #0a0420); }
.game-art.vault { background: radial-gradient(120% 120% at 45% 18%, rgba(255,196,84,.30), transparent 58%), linear-gradient(160deg, #2a2106, #0a0c1c); }
.game-info .row .play-demo { font-family: inherit; }
.game-info { padding: 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.badge { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: rgba(7,7,15,.5); border: 1px solid var(--line); color: var(--acc); }
.badge-live { color: #04140E; background: var(--acc-grad); border-color: transparent; display: inline-flex; align-items: center; gap: 6px; }
.badge-live::before { content: "●"; font-size: .55rem; }
.game-info h3 { font-family: "Anton", sans-serif; text-transform: uppercase; letter-spacing: .02em; font-size: 1.9rem; font-weight: 400; }
.game-info .quote { color: var(--text); font-style: italic; font-size: 1.02rem; }
.game-info .desc { color: var(--muted); font-size: .9rem; line-height: 1.6; }
.game-info .row { margin-top: auto; padding-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.game-info .row .btn { padding: 10px 18px; font-size: .82rem; }

/* ---------- WHY VINCO (pillars) ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px){ .pillars { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .pillars { grid-template-columns: 1fr; } }
.pillar { border: 1px solid var(--line); border-radius: 18px; padding: 28px 24px; background: var(--panel); transition: border-color .2s ease; }
.pillar:hover { border-color: var(--acc); }
.pillar h4 { font-size: 1.12rem; margin-bottom: 10px; }
.pillar p { color: var(--muted); font-size: .9rem; line-height: 1.55; }

/* ---------- FOR OPERATORS (steps) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 34px; }
@media (max-width: 760px){ .steps { grid-template-columns: 1fr; } }
.step { border: 1px solid var(--line); border-radius: 18px; padding: 30px 26px; background: var(--panel); }
.step .num { font-family: "Anton", sans-serif; font-size: 2.4rem; line-height: 1; margin-bottom: 14px;
  background: var(--acc-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.step h4 { font-size: 1.15rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.chips { display: flex; gap: 12px; flex-wrap: wrap; }
.chip { font-size: .8rem; font-weight: 600; letter-spacing: .04em; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }

/* ---------- CONTACT ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 44px; }
@media (max-width: 700px){ .contact-grid { grid-template-columns: 1fr; } }
.contact-card { border: 1px solid var(--line); border-radius: 20px; padding: 32px; background: var(--panel); transition: border-color .2s ease; }
.contact-card:hover { border-color: var(--acc); }
.contact-card h4 { font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.contact-card a, .contact-card p { font-size: 1.15rem; color: var(--text); line-height: 1.5; }
.contact-card a:hover { color: var(--acc); }

/* ---------- EXPANDABLE DEMO MODAL (bento-grid morph) ---------- */
.demo-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(3,4,10,0); transition: background .3s ease;
}
.demo-overlay.open { background: rgba(3,4,10,.72); backdrop-filter: blur(4px); }
.demo-modal {
  width: min(500px, 92vw); max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  background: var(--panel); border: 1px solid var(--acc); border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6); will-change: transform, opacity; transform-origin: top left;
}
.demo-close {
  position: absolute; top: 10px; right: 14px; z-index: 4;
  width: 38px; height: 38px; cursor: pointer;
  background: transparent; border: 0; color: var(--muted);
  font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: color .2s ease, transform .2s ease;
}
.demo-close:hover { color: var(--text); transform: scale(1.08); }
/* animated GIF preview — the game itself launches full-size in a new tab */
.demo-art { position: relative; aspect-ratio: 16/10; border-bottom: 1px solid var(--line); overflow: hidden; flex: none; background: var(--panel-2); }
.demo-art::after { content: attr(data-name); position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Anton", sans-serif; font-size: clamp(2.4rem,6vw,4rem); letter-spacing: .12em; color: rgba(255,255,255,.14); text-transform: uppercase; }
.demo-gif { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.demo-art.diver { background: #030b1e; }
.demo-art.diver .demo-gif { object-fit: contain; }
.demo-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.demo-body h3 { font-family: "Anton", sans-serif; text-transform: uppercase; letter-spacing: .02em; font-size: 1.8rem; font-weight: 400; }
.demo-body .quote { color: var(--text); font-style: italic; font-size: 1.02rem; }
.demo-body .desc { color: var(--muted); font-size: .9rem; line-height: 1.6; }
.demo-body .row { padding-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- CONTACT FORM ---------- */
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 720px; }
@media (max-width: 620px){ .contact-form { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea {
  font-family: "Inter", sans-serif; font-size: .98rem; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  outline: none; transition: border-color .2s ease, box-shadow .2s ease; width: 100%;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(138,147,178,.6); }
.field input:focus, .field textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(52,224,192,.14); }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-note { color: var(--muted); font-size: .85rem; }
.form-note a { color: var(--acc); }
.form-status { grid-column: 1 / -1; color: var(--acc); font-size: .92rem; font-weight: 600; min-height: 1.2em; }

/* Contact page — two-column: intro left, form card right */
.contact-hero { position: relative; overflow: hidden; padding: 168px 0 100px; }
.contact-grid2 { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px){ .contact-grid2 { grid-template-columns: 1fr; gap: 34px; } }
.contact-intro .c-eyebrow { color: var(--acc); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; margin-bottom: 18px; }
.contact-intro h1 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); margin-bottom: 20px; }
.contact-intro .c-lead { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6; max-width: 44ch; margin-bottom: 28px; }
.contact-email { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-weight: 600; font-size: .95rem; transition: border-color .2s ease, color .2s ease; }
.contact-email:hover { border-color: var(--acc); color: var(--acc); }
.contact-email svg { color: var(--acc); flex: none; }
.contact-card { background: linear-gradient(140deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: 24px; padding: 32px; }
.contact-card .contact-form { max-width: none; }
.contact-card .form-actions { flex-direction: column; align-items: stretch; gap: 14px; }
.contact-card .form-actions .btn-primary { width: 100%; justify-content: center; padding: 15px 22px; }
@media (max-width: 560px){ .contact-card { padding: 24px; } }

/* ---------- FAQ ACCORDION ---------- */
.faq-list { list-style: none; width: min(840px, 100%); margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq-q {
  width: 100%; display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 18px 52px 18px 58px; position: relative;
  background: transparent; border: 0; border-left: 6px solid var(--line);
  color: var(--muted); font-family: "Inter", sans-serif; font-size: 1.02rem; font-weight: 600;
  text-align: left; cursor: pointer; outline: none;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.faq-q:hover { color: var(--text); background: rgba(255,255,255,.02); border-left-color: var(--acc); }
.faq-q:focus-visible { color: var(--text); border-left-color: var(--acc); }
.faq-item.open .faq-q { color: var(--text); background: rgba(52,224,192,.06); border-left-color: var(--acc); font-weight: 700; }
.faq-icon {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  font-size: 26px; line-height: 1; font-weight: 400; color: var(--muted);
  transition: color .2s ease, font-size .2s ease;
}
.faq-item.open .faq-icon { color: var(--acc); font-size: 34px; }
.faq-chevron {
  position: absolute; right: 22px; width: 9px; height: 9px;
  border-top: 3px solid var(--muted); border-right: 3px solid var(--muted);
  transform: rotate(133deg); transition: transform .25s ease, border-color .25s ease;
}
.faq-item.open .faq-chevron { transform: rotate(-44deg); border-color: var(--acc); }
.faq-a {
  display: grid; grid-template-rows: 0fr; border-left: 6px solid var(--line);
  transition: grid-template-rows .3s ease, border-color .3s ease, background .3s ease;
}
.faq-item.open .faq-a { grid-template-rows: 1fr; border-left-color: var(--acc); background: rgba(52,224,192,.04); }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p { padding: 2px 24px 24px 58px; color: var(--muted); font-size: .96rem; line-height: 1.65; max-width: 66ch; }
@media (min-width: 768px){ .faq-q, .faq-a { border-left-width: 10px; } }
@media (prefers-reduced-motion: reduce){
  .faq-q, .faq-a, .faq-icon, .faq-chevron { transition: none; }
  .hero-bg, .hero-grid, .marquee-track { animation: none; }
}

/* ---------- CTA BAND ---------- */
.cta-band { text-align:center; background: linear-gradient(140deg, var(--panel), var(--panel-2)); border:1px solid var(--line); border-radius:28px; padding: 64px 32px; position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset:0; background: radial-gradient(60% 120% at 50% 0%, rgba(52,224,192,.18), transparent 60%); }
.cta-band h2 { font-size: clamp(2rem,5vw,3.4rem); position:relative; }
.cta-band p { color: var(--muted); margin: 16px auto 28px; max-width: 46ch; position:relative; }

/* ---------- FOOTER ---------- */
footer { border-top: 1px solid var(--line); padding: 64px 0 34px; background: var(--bg-2); }
.foot-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
@media (max-width: 800px){ .foot-grid{ grid-template-columns: 1fr 1fr;} }
footer h5 { font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
footer ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
footer ul a { color: var(--text); opacity:.8; font-size:.9rem; }
footer ul a:hover { color: var(--acc); opacity:1; }
.foot-bottom { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; }
.foot-brand p { color:var(--muted); font-size:.9rem; margin-top:14px; max-width: 40ch; }

/* ================= ABOUT — Progressive Blur (Skiper41-style) ================= */
/* Long-form reading column */
.about-read { width: min(760px, 92vw); margin: 0 auto; padding: 300px 0 200px; position: relative; z-index: 1; }
@media (max-width: 900px){ .about-read { padding: 210px 0 150px; } }
.about-read .eyebrow-c { color: var(--acc); letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; font-weight: 700; margin-bottom: 20px; }
.about-read h1 { font-family: "Anton", sans-serif; text-transform: uppercase; letter-spacing: .02em; line-height: 1.02; font-weight: 400; font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom: 24px; }
.about-read h2 { font-family: "Anton", sans-serif; text-transform: uppercase; letter-spacing: .02em; font-weight: 400; font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin: 60px 0 16px; }
.about-read p { color: var(--muted); font-size: 1.12rem; line-height: 1.75; margin-bottom: 20px; }
.about-read p.lead-1 { color: var(--text); opacity: .95; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.6; margin-bottom: 8px; }
.about-read strong { color: var(--text); font-weight: 600; }
.about-read a.inline { color: var(--acc); }
.about-read ul { list-style: none; margin: 6px 0 24px; display: flex; flex-direction: column; gap: 12px; }
.about-read ul li { color: var(--muted); font-size: 1.05rem; line-height: 1.6; padding-left: 24px; position: relative; }
.about-read ul li::before { content: "✦"; position: absolute; left: 0; top: 1px; color: var(--acc); font-size: .85em; }
.about-read .about-cta { margin-top: 40px; }

/* Fixed progressive-blur bands: content stays sharp in the middle, blurs + fades
   into the background at the top and bottom edges as it scrolls behind them. */
.pblur { position: fixed; left: 0; right: 0; height: 190px; pointer-events: none; z-index: 90; opacity: 0; transition: opacity .25s ease; }
.pblur.top { top: 72px; --dir: to top; }        /* sits just under the fixed nav */
.pblur.bottom { bottom: 0; --dir: to bottom; }
.pblur > div { position: absolute; inset: 0; }
/* blur increases toward the outer edge (100% of the gradient) */
.pblur .l1 { backdrop-filter: blur(0.6px);  -webkit-backdrop-filter: blur(0.6px);
  -webkit-mask-image: linear-gradient(var(--dir), #000 0%, #000 20%, transparent 35%);
          mask-image: linear-gradient(var(--dir), #000 0%, #000 20%, transparent 35%); }
.pblur .l2 { backdrop-filter: blur(1.5px);  -webkit-backdrop-filter: blur(1.5px);
  -webkit-mask-image: linear-gradient(var(--dir), transparent 15%, #000 25%, #000 40%, transparent 52%);
          mask-image: linear-gradient(var(--dir), transparent 15%, #000 25%, #000 40%, transparent 52%); }
.pblur .l3 { backdrop-filter: blur(3px);    -webkit-backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(var(--dir), transparent 30%, #000 42%, #000 56%, transparent 66%);
          mask-image: linear-gradient(var(--dir), transparent 30%, #000 42%, #000 56%, transparent 66%); }
.pblur .l4 { backdrop-filter: blur(6px);    -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(var(--dir), transparent 45%, #000 57%, #000 72%, transparent 80%);
          mask-image: linear-gradient(var(--dir), transparent 45%, #000 57%, #000 72%, transparent 80%); }
.pblur .l5 { backdrop-filter: blur(12px);   -webkit-backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(var(--dir), transparent 60%, #000 72%, #000 86%, transparent 93%);
          mask-image: linear-gradient(var(--dir), transparent 60%, #000 72%, #000 86%, transparent 93%); }
.pblur .l6 { backdrop-filter: blur(24px);   -webkit-backdrop-filter: blur(24px);
  -webkit-mask-image: linear-gradient(var(--dir), transparent 75%, #000 88%, #000 100%);
          mask-image: linear-gradient(var(--dir), transparent 75%, #000 88%, #000 100%); }
/* colour fade into the page background at the very edge */
.pblur .tint { background: linear-gradient(var(--dir), transparent 42%, var(--bg) 100%); backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 900px){ .pblur { height: 140px; } }
@media (prefers-reduced-motion: reduce){ .pblur > div { backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ================= LEGAL PAGES — uniform-size document + Skiper89 scroll-progress ring ================= */
/* Official documents: every piece of text is the same size; headings differ by weight only. */
.legal { width: min(820px, 92vw); margin: 0 auto; padding: 132px 0 130px; }
.legal .doc-eyebrow { color: var(--acc); letter-spacing: .2em; text-transform: uppercase; font-size: 1.02rem; font-weight: 700; margin-bottom: 12px; }
.legal h1 { font-size: 1.02rem; font-weight: 700; color: var(--text); line-height: 1.7; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.legal .updated { color: var(--muted); font-size: 1.02rem; line-height: 1.7; margin-bottom: 30px; }
.legal h2 { font-size: 1.02rem; font-weight: 700; color: var(--text); line-height: 1.7; margin: 28px 0 6px; }
.legal p, .legal li { font-size: 1.02rem; line-height: 1.7; color: var(--muted); }
.legal p { margin-bottom: 14px; }
.legal ul, .legal ol { margin: 0 0 14px 22px; display: flex; flex-direction: column; gap: 8px; }
.legal a.inline { color: var(--acc); }
.legal strong { color: var(--text); font-weight: 600; }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 30px 0; }

/* Circular scroll-progress ring (fills as you read; click = back to top) */
.scroll-ring {
  position: fixed; right: 24px; bottom: 24px; z-index: 95;
  width: 54px; height: 54px; border-radius: 999px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(7,7,15,.72); border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .2s ease, border-color .2s ease;
}
.scroll-ring:hover { transform: translateY(-2px); border-color: var(--acc); }
.scroll-ring svg.ring { position: absolute; inset: 0; width: 54px; height: 54px; transform: rotate(-90deg); }
.scroll-ring .track { stroke: rgba(255,255,255,.12); }
.scroll-ring .bar { stroke: var(--acc); stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.scroll-ring .arrow { position: relative; z-index: 1; width: 18px; height: 18px; color: var(--acc); }
@media (max-width: 560px){ .scroll-ring { right: 16px; bottom: 16px; } }

/* Footer social links — emerald brand icon + label (SmartSoft-style) */
.social-link { display: inline-flex; align-items: center; gap: 10px; }
.social-ic { width: 17px; height: 17px; color: var(--acc); flex: none; transition: transform .15s ease; }
footer ul a.social-link:hover .social-ic { transform: translateY(-1px); }

/* ================= NAV — Games dropdown ================= */
/* Desktop hover dropdown */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-item.has-drop > a { display: inline-flex; align-items: center; gap: 6px; }
.drop-caret { transition: transform .2s ease; opacity: .8; }
.nav-item.has-drop:hover .drop-caret, .nav-item.has-drop:focus-within .drop-caret { transform: rotate(180deg); }
.nav-drop {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 4px);
  min-width: 340px; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px;
  background: rgba(10,10,26,.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 120;
}
.nav-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-item.has-drop:hover .nav-drop, .nav-item.has-drop:focus-within .nav-drop {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 8px);
}
.nav-drop a { padding: 9px 12px; border-radius: 9px; font-size: .86rem; font-weight: 600; color: var(--muted); white-space: nowrap; transition: background .15s ease, color .15s ease; }
.nav-drop a:hover { background: rgba(52,224,192,.1); color: var(--acc); }

/* Mobile accordion inside the hamburger menu */
.m-drop { border-bottom: 1px solid var(--line); }
.m-drop-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 2px; font-family: inherit; font-size: 1.25rem; font-weight: 600; color: var(--text);
  background: transparent; border: 0; cursor: pointer; text-align: left;
}
.m-drop-trigger .caret { transition: transform .25s ease; color: var(--muted); }
.m-drop.open .m-drop-trigger { color: var(--acc); }
.m-drop.open .m-drop-trigger .caret { transform: rotate(180deg); color: var(--acc); }
.m-drop-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.m-drop.open .m-drop-panel { grid-template-rows: 1fr; }
.m-drop-inner { overflow: hidden; }
.mobile-menu .m-drop-panel a { display: block; padding: 12px 2px 12px 28px; font-size: 1.05rem; font-weight: 500; color: var(--muted); border-top: 1px solid var(--line); border-bottom: 0; }
.mobile-menu .m-drop-panel a:active { color: var(--acc); }

/* Games page — 3 cards per row (symmetric gutters via the centred .wrap) */
.game-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px){ .game-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .game-grid.cols-3 { grid-template-columns: 1fr; } }

/* Upcoming ("Coming soon") game cards */
.game-art.soon { background: radial-gradient(120% 120% at 50% 12%, rgba(52,224,192,.12), transparent 55%), linear-gradient(160deg, #141834, #0a0c1c); }
.badge-soon { color: var(--muted); border-color: var(--line); background: rgba(255,255,255,.03); }
.game-card.soon .game-info .desc { margin-bottom: 4px; }

/* Games page — category filter tabs */
.game-filters { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
/* Card header row: game name left, "Play the demo" right (symmetric via .game-info padding) */
.game-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.game-head h3 { margin: 0; }
.game-head .play-demo { padding: 9px 16px; font-size: .78rem; }
.game-filter {
  padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); font-family: inherit; font-weight: 600;
  font-size: .9rem; letter-spacing: .02em; cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.game-filter:hover { color: var(--text); border-color: var(--acc); }
.game-filter.active { background: var(--acc-grad); color: #04140E; border-color: transparent; box-shadow: 0 8px 24px rgba(52,224,192,.22); }

/* ================= FEATURE CAROUSEL (cult-ui port) + game page ================= */
.game-page-hero { position: relative; overflow: hidden; padding: 150px 0 40px; }
.game-page-hero .back-link { display: inline-block; color: var(--muted); font-weight: 600; font-size: .9rem; margin-bottom: 18px; transition: color .2s ease; }
.game-page-hero .back-link:hover { color: var(--acc); }
.game-feature { padding-top: 30px; padding-bottom: 16px; }
.game-gallery { padding: 8px 0 40px; }

.feature-carousel { position: relative; width: 100%; border-radius: 26px; --x: 50%; --y: 50%; }
/* mouse-tracking emerald glow border */
.feature-carousel::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: 27px; z-index: 0; opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(600px circle at var(--x) var(--y), var(--acc-1), var(--acc-2) 22%, rgba(52,224,192,.25) 38%, transparent 60%);
}
.feature-carousel:hover::before { opacity: .55; }
.fc-body {
  position: relative; z-index: 1; border-radius: 26px; overflow: hidden;
  border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--panel-2));
  min-height: 540px; padding: 42px;
}
.fc-head { position: relative; z-index: 2; width: min(50%, 420px); pointer-events: none; }
.fc-title { font-family: "Anton", sans-serif; text-transform: uppercase; letter-spacing: .02em; font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 10px; }
.fc-desc { color: var(--muted); font-size: 1.02rem; line-height: 1.6; max-width: 44ch; }

.fc-stage { position: absolute; inset: 0; z-index: 1; }
.fc-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.fc-slide.active { opacity: 1; visibility: visible; }
.fc-img {
  position: absolute; aspect-ratio: 16/10; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 120% at 30% 15%, rgba(96,239,255,.16), transparent 55%), linear-gradient(160deg, #161a34, #0b0e20);
  display: flex; align-items: center; justify-content: center;
}
.fc-img::after { content: attr(data-label); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.28); font-weight: 700; }
.fc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* per-layout placement */
.fc-slide[data-layout="two"] .fc-img.a { left: 4%;  top: 33%; width: 46%; }
.fc-slide[data-layout="two"] .fc-img.b { left: 50%; top: 44%; width: 48%; }
.fc-slide[data-layout="overlap"] .fc-img.a { left: 7%;  top: 32%; width: 50%; }
.fc-slide[data-layout="overlap"] .fc-img.b { left: 45%; top: 47%; width: 42%; box-shadow: -20px 20px 50px rgba(0,0,0,.4); }
.fc-slide[data-layout="single"] .fc-img.a { left: 6%;  top: 35%; width: 88%; }
.fc-slide[data-layout="final"] .fc-img.a  { left: 15%; top: 33%; width: 70%; }
/* enter animations */
@keyframes fcFadeScale { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes fcSlideL { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes fcSlideR { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.fc-slide.active .fc-img { animation: fcFadeScale .5s cubic-bezier(.22,1,.36,1) both; }
.fc-slide.active .fc-img.b { animation-delay: .1s; }
.fc-slide.active[data-layout="two"] .fc-img.a { animation-name: fcSlideL; }
.fc-slide.active[data-layout="two"] .fc-img.b { animation-name: fcSlideR; }

/* step pills */
.fc-steps { position: absolute; top: 42px; right: 42px; z-index: 6; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; max-width: 48%; padding: 0; list-style: none; }
@media (max-width: 640px){
  .fc-steps { position: absolute; top: auto; bottom: 18px; left: 0; right: 0; max-width: none; justify-content: center; margin-top: 0; padding: 0 12px; }
  .fc-head { width: 100%; }
}
.fc-step { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.05); cursor: pointer; transition: transform .3s ease, background .3s ease; }
.fc-step .fc-dot { width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; background: rgba(255,255,255,.1); color: var(--acc); }
.fc-step .fc-name { font-size: .85rem; font-weight: 600; color: var(--muted); transition: color .3s ease; }
.fc-step.done { background: rgba(52,224,192,.14); }
.fc-step.done .fc-dot { background: var(--acc-grad); color: #04140E; }
.fc-step.active { transform: scale(1.06); background: rgba(52,224,192,.12); }
.fc-step.active .fc-name { color: var(--acc); }
/* full-card click target to advance (below steps, above the rest) */
.fc-advance { position: absolute; inset: 0; z-index: 5; background: transparent; border: 0; cursor: pointer; }
@media (max-width: 640px){
  .fc-body { min-height: 460px; padding: 26px; }
  .fc-head { width: 100%; }
}

/* Game card cover images */
.game-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; display: block; }
.game-art:has(.game-cover)::after { display: none; }

/* ================= SKIPER34 — sticky stacking image cards ================= */
.sticky-stack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8vh; padding: 8vh 16px 10vh; }
.ss-hint { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); text-align: center; z-index: 1; }
.ss-hint span { position: relative; display: inline-block; max-width: 14ch; font-size: .72rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); opacity: .6; }
.ss-hint span::after { content: ""; position: absolute; left: 50%; top: calc(100% + 6px); width: 1px; height: 60px; background: linear-gradient(var(--muted), transparent); }
.sticky-card {
  position: sticky; top: 10vh; height: 80vh; width: 100%; max-width: 56rem;
  border-radius: 28px; overflow: hidden; border: 1px solid var(--line);
  transform-origin: center center; will-change: transform; background: var(--panel);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.sticky-media {
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.25);
  display: flex; align-items: center; justify-content: center; will-change: transform;
  background: radial-gradient(120% 120% at 30% 18%, rgba(96,239,255,.18), transparent 55%), linear-gradient(160deg, #12213a, #0a0e20);
}
.sticky-media::after { content: attr(data-label); font-family: "Anton", sans-serif; font-size: clamp(1.6rem,4vw,2.6rem); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.16); }
.sticky-media.m2 { background: radial-gradient(120% 120% at 70% 18%, rgba(0,255,135,.16), transparent 55%), linear-gradient(160deg, #0b3b2e, #061a3a); }
.sticky-media.m3 { background: radial-gradient(120% 120% at 40% 20%, rgba(52,224,192,.18), transparent 55%), linear-gradient(160deg, #101a3a, #0a0e20); }
.sticky-media.m4 { background: radial-gradient(120% 120% at 60% 20%, rgba(96,239,255,.2), transparent 55%), linear-gradient(160deg, #1a1030, #08123a); }
.sticky-media.m5 { background: radial-gradient(120% 120% at 30% 25%, rgba(0,255,135,.14), transparent 55%), linear-gradient(160deg, #142a1a, #0a0e20); }
@media (prefers-reduced-motion: reduce){
  .sticky-stack { padding: 60px 16px; gap: 20px; }
  .sticky-card { position: static; height: auto; aspect-ratio: 16/9; transform: none !important; }
  .sticky-media { transform: none !important; }
}

/* ================= GAME PAGE — SmartSoft-style sections (own content) ================= */
/* Awards */
.award-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 700px){ .award-grid { grid-template-columns: 1fr; } }
.award-card { display: flex; gap: 18px; align-items: flex-start; border: 1px solid var(--line); border-radius: 18px; padding: 26px; background: var(--panel); transition: border-color .2s ease; }
.award-card:hover { border-color: var(--acc); }
.award-card .medal { width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--acc-grad); color: #04140E; display: flex; align-items: center; justify-content: center; }
.award-card .yr { color: var(--acc); font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.award-card h4 { font-size: 1.1rem; margin-bottom: 6px; }
.award-card p { color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* Game showcase */
.showcase { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
@media (max-width: 860px){ .showcase { grid-template-columns: 1fr; gap: 32px; } }
.showcase-art { aspect-ratio: 4/5; border-radius: 24px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(120% 120% at 30% 15%, rgba(96,239,255,.16), transparent 55%), linear-gradient(160deg, #12213a, #0a0e20); }
.showcase-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-info .kicker { color: var(--acc); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; margin-bottom: 12px; }
.showcase-info h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 14px; }
.showcase-info .quote { color: var(--text); font-style: italic; font-size: 1.1rem; margin-bottom: 14px; }
.showcase-desc { color: var(--muted); font-size: 1rem; line-height: 1.65; margin-bottom: 22px; }
.showcase-info .chips { margin-bottom: 20px; }
.licence { color: var(--muted); font-size: .88rem; padding: 12px 16px; border: 1px dashed var(--line); border-radius: 12px; display: inline-block; }
.licence strong { color: var(--text); }
.spec-list { margin-top: 24px; display: grid; gap: 0; }
.spec { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
@media (max-width: 560px){ .spec { grid-template-columns: 1fr; gap: 4px; } }
.spec-k { color: var(--text); font-weight: 600; font-size: .95rem; }
.spec-v { color: var(--muted); font-size: .92rem; line-height: 1.5; }

/* Engagement tools */
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px){ .tools-grid { grid-template-columns: 1fr; } }
.tool-card { border: 1px solid var(--line); border-radius: 18px; padding: 30px 26px; background: var(--panel); transition: border-color .2s ease, transform .2s ease; }
.tool-card:hover { border-color: var(--acc); transform: translateY(-4px); }
.tool-card h4 { font-family: "Anton", sans-serif; text-transform: uppercase; letter-spacing: .04em; font-weight: 400; font-size: 1.3rem; margin-bottom: 10px; }
.tool-card p { color: var(--muted); font-size: .92rem; line-height: 1.6; }

/* Responsive solutions band */
.responsive-band { text-align: center; background: linear-gradient(140deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: 28px; padding: 64px 32px; position: relative; overflow: hidden; }
.responsive-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% 0%, rgba(52,224,192,.16), transparent 60%); }
.responsive-band .kicker { position: relative; color: var(--acc); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; margin-bottom: 14px; }
.responsive-band h2 { position: relative; font-size: clamp(2rem, 5vw, 3.4rem); }
.responsive-band p { position: relative; color: var(--muted); max-width: 54ch; margin: 16px auto 28px; line-height: 1.6; }
.responsive-band .btn { position: relative; }

/* Homepage marquee — game logo (left) + title (right) */
.feat-game { display: inline-flex; align-items: center; gap: 14px; }
.feat-logo { height: 48px; width: auto; max-width: 84px; object-fit: contain; display: block; flex: none; }
.feat-name { font-family: "Anton", sans-serif; font-size: 1.35rem; color: var(--text); opacity: .9; letter-spacing: .04em; white-space: nowrap; text-transform: uppercase; }
@media (max-width: 640px){ .feat-logo { height: 38px; } .feat-name { font-size: 1.1rem; } }

/* ================= HERO MORPH TEXT — two two-line headlines that morph ================= */
.hero .hero-slogan.morph { font-size: clamp(2.6rem, 7.2vw, 7rem); max-width: none; line-height: .98; }
.morph { position: relative; display: grid; }
.morph .morph-word {
  grid-column: 1; grid-row: 1;               /* stack both states in one cell */
  opacity: 0; transform-origin: 0 50%; will-change: opacity, filter, transform;
  animation: morphPair var(--morph-total, 7s) ease infinite;
}
.morph .morph-word:nth-child(2) { animation-delay: 3.5s; }  /* half of --morph-total */
@keyframes morphPair {
  0%   { opacity: 0; filter: blur(12px); transform: scale(.96); }
  6%   { opacity: 1; filter: blur(0);    transform: scale(1); }
  44%  { opacity: 1; filter: blur(0);    transform: scale(1); }
  50%  { opacity: 0; filter: blur(12px); transform: scale(1.04); }
  100% { opacity: 0; filter: blur(12px); transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce){
  .morph .morph-word { animation: none; }
  .morph .morph-word:nth-child(1) { opacity: 1; }
}

/* ================= HOMEPAGE GAME CAROUSEL (Skiper54-style) ================= */
.game-carousel { position: relative; }
.gc-track {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; cursor: grab;
  padding: 10px 2px 16px;
}
.gc-track::-webkit-scrollbar { display: none; }
.gc-track.dragging { scroll-snap-type: none; scroll-behavior: auto; }
.gc-track.dragging, .gc-track.dragging .game-card { cursor: grabbing; }
.game-card { cursor: pointer; }
.gc-slide {
  flex: 0 0 calc((100% - 44px) / 3);   /* 3 across (2 gaps of 22px) */
  scroll-snap-align: center;
  scroll-snap-stop: always;            /* one card per flick — never skip past one */
  transition: transform .35s ease, opacity .35s ease;
  transform: scale(.92); opacity: .68;
}
/* Finite track: the ends have nothing to centre against, so they sit flush
   rather than dragging blank space into view. */
.gc-slide:first-child { scroll-snap-align: start; }
.gc-slide:last-child { scroll-snap-align: end; }
.gc-slide.active { transform: scale(1); opacity: 1; }
.gc-slide .game-card { height: 100%; }
@media (max-width: 900px){ .gc-slide { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 600px){ .gc-slide { flex-basis: 86%; } }

/* controls */
.gc-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; }
.gc-arrow {
  width: 46px; height: 46px; border-radius: 999px; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); color: var(--text);
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .15s ease;
}
.gc-arrow:hover { color: var(--acc); border-color: var(--acc); transform: translateY(-2px); }
.gc-arrow[disabled] { opacity: .3; cursor: default; pointer-events: none; }
.gc-dots { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 60%; }
.gc-dot { width: 8px; height: 8px; border-radius: 999px; cursor: pointer; border: 0; background: rgba(255,255,255,.18); transition: background .2s ease, width .2s ease; }
.gc-dot.active { background: var(--acc); width: 22px; }
@media (prefers-reduced-motion: reduce){ .gc-track { scroll-behavior: auto; } .gc-slide { transition: none; } }

/* Showcase art placeholder (games without a cover yet) */
.showcase-art { position: relative; }
.showcase-art[data-name]::after {
  content: attr(data-name); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: "Anton", sans-serif; font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.14);
}
.showcase-art[data-name]:has(img)::after { display: none; }
/* Wide source art (game screenshots) — letterbox instead of a hard portrait crop */
.showcase-art.wide { background: var(--panel-2); }
.showcase-art.wide img { object-fit: contain; }
.showcase-art.landscape { aspect-ratio: 16/9; align-self: center; }
/* Neon Rush's key art is a wide synthwave scene — letterbox it on a ground
   sampled from the artwork rather than cropping the title off. */
.showcase-art.neonrush { background: #06021a; }

/* ================= "Double" line-hover (Vengeance UI) on nav + footer links ================= */
nav.links a, footer .foot-grid ul a {
  position: relative; display: inline-flex; width: fit-content; white-space: nowrap;
}
nav.links a::before, nav.links a::after,
footer .foot-grid ul a::before, footer .foot-grid ul a::after {
  content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 1px;
  background: currentColor; pointer-events: none;
  transform: scaleX(0); transition: transform .3s cubic-bezier(.7, 0, .2, 1);
}
/* top line grows from the left */
nav.links a::before, footer .foot-grid ul a::before { transform-origin: 100% 50%; }
nav.links a:hover::before, nav.links a:focus-visible::before,
footer .foot-grid ul a:hover::before, footer .foot-grid ul a:focus-visible::before {
  transform: scaleX(1); transform-origin: 0% 50%; transition-timing-function: cubic-bezier(.4, 1, .8, 1);
}
/* second line, 4px lower, grows from the right */
nav.links a::after, footer .foot-grid ul a::after { top: calc(100% + 4px); transform-origin: 0% 50%; }
nav.links a:hover::after, nav.links a:focus-visible::after,
footer .foot-grid ul a:hover::after, footer .foot-grid ul a:focus-visible::after {
  transform: scaleX(1); transform-origin: 100% 50%; transition-timing-function: cubic-bezier(.4, 1, .8, 1);
}

/* Covers are never cropped: show the whole image, fill the spare space with a blurred copy */
.game-art:has(.game-cover) { aspect-ratio: 16/9; }
.game-art .game-cover { object-fit: cover; }
.game-art:has(.game-cover)::before { content: ""; position: absolute; inset: -24px; background: var(--cover) center/cover no-repeat; filter: blur(22px) brightness(.5); z-index: 0; }
.showcase-art:has(img), .showcase-art.landscape { aspect-ratio: auto; align-self: center; }
.showcase-art:has(img) img { height: auto; object-fit: contain; }

/* ================= SEO — crawlable game cards, page H1s, demo label, 18+ note ================= */
/* The card title is a real link stretched over the whole card; script.js turns a plain
   click into the demo popup, while crawlers, middle-click and ctrl/cmd-click follow the href. */
.game-card { position: relative; }
.card-link { color: inherit; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-link:focus-visible { outline: none; }
.game-card:has(.card-link:focus-visible) { outline: 2px solid var(--acc); outline-offset: 3px; }
.game-card .play-demo { position: relative; z-index: 2; }
.sec-head h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
.showcase-info h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 14px; }
.demo-note { align-self: center; color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.showcase-info .row .demo-note { margin-left: 14px; }
.foot-18 { max-width: 62ch; }
.foot-18 strong { color: var(--text); margin-right: 4px; }

/* ================= Game pages (Phase 2) — how it works, features, operators, FAQ, more games ================= */
.gp-sec { padding: 72px 0; }
.gp-sec .sec-head { margin-bottom: 32px; }
.step h3 { font-size: 1.15rem; margin-bottom: 8px; }
.tool-card h3 { font-family: "Anton", sans-serif; text-transform: uppercase; letter-spacing: .04em; font-weight: 400; font-size: 1.3rem; margin-bottom: 10px; }
.gp-lead { color: var(--muted); max-width: 62ch; line-height: 1.65; margin-bottom: 28px; }
.gp-cta { margin-top: 28px; }
@media (max-width: 860px){ .gp-sec { padding: 56px 0; } }

/* ================= Landing pages (Phase 3) — prose, data tables, link rows, verifier ================= */
.page-hero .kicker { position: relative; color: var(--acc); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; margin-bottom: 14px; }
.page-hero h1, .page-hero p { position: relative; }
.page-hero h1 { max-width: 18ch; }
.prose { max-width: 70ch; }
.prose p { color: var(--muted); line-height: 1.7; margin-bottom: 16px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); }
.prose a, .post-body a, .faq-a a, .data-table a, .gp-links a, .tool-card a { color: var(--acc); }
.prose a:hover, .faq-a a:hover, .data-table a:hover, .gp-links a:hover, .tool-card a:hover { text-decoration: underline; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.steps + .prose, .prose + .game-grid, .steps + .game-grid { margin-top: 28px; }
.gp-links { color: var(--muted); font-size: .92rem; line-height: 1.8; margin: 0 0 24px; }
.table-wrap + .gp-links, .prose + .gp-links { margin: 24px 0 0; }
.sec-head + .gp-links { margin-top: -16px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.data-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.data-table th, .data-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.data-table thead th { color: var(--muted); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 600; }
.data-table tbody th { color: var(--text); font-weight: 600; }
.data-table td { color: var(--muted); }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.field select {
  font-family: "Inter", sans-serif; font-size: .98rem; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; outline: none; width: 100%;
}
.field select:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(52,224,192,.14); }
.verifier { max-width: 760px; }
.pf-result { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--panel); color: var(--muted); }
.pf-result.ok { border-color: var(--acc); }
.pf-result.bad { border-color: var(--bad); color: var(--bad-text); }
.pf-result .pf-k { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; }
.pf-result .pf-v { font-family: "Anton", sans-serif; font-size: 2.4rem; color: var(--text); line-height: 1.1; }
.pf-result .pf-hash { font-size: .9rem; }
.foot-grid { grid-template-columns: 1.4fr repeat(4, 1fr); }
@media (max-width: 1000px){ .foot-grid { grid-template-columns: 1fr 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 800px){ .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ================= Glossary (Phase 4) ================= */
.term-card { display: block; }
.term-card h2 { font-family: "Anton", sans-serif; text-transform: uppercase; letter-spacing: .04em; font-weight: 400; font-size: 1.3rem; margin-bottom: 10px; color: var(--text); }
.page-hero .kicker a { color: inherit; }
.page-hero .kicker a:hover { text-decoration: underline; }
.example-box { max-width: 70ch; margin: 28px 0; padding: 22px 24px; border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: 14px; background: var(--panel); }
.example-box .kicker { color: var(--acc); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .75rem; margin-bottom: 8px; }
.example-box p { color: var(--text); line-height: 1.65; }

/* ================= Blog posts (Phase 4) ================= */
.post { padding: 150px 0 40px; }
.post-head { max-width: 820px; margin-bottom: 36px; }
.post-head .kicker { color: var(--acc); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; margin-bottom: 14px; }
.post-head .kicker a { color: inherit; }
.post-head h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); line-height: 1; }
.post-meta { color: var(--muted); font-size: .88rem; margin-top: 18px; }
.post-body { max-width: 760px; }
.post-body h2 { font-family: "Anton", sans-serif; text-transform: uppercase; letter-spacing: .02em; font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--text); margin: 44px 0 14px; line-height: 1.1; }
.post-body h3 { font-size: 1.08rem; color: var(--text); margin: 26px 0 8px; }
.post-body ul, .post-body ol { color: var(--muted); line-height: 1.7; margin: 0 0 16px 22px; }
.post-body li { margin-bottom: 6px; }
.post-body li strong { color: var(--text); }
.post-body .table-wrap { margin: 20px 0 24px; }
@media (max-width: 760px){ .post { padding-top: 120px; } }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0 0 14px; padding: 0; font-size: .8rem; font-weight: 600; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--muted); }
.crumbs a { color: var(--acc); }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--text); }
.related { padding-top: 24px; }

/* ================= Language switcher (EN / ES / PT / FR) ================= */
.lang-switch { display: flex; align-items: center; gap: 2px; }
.lang-switch a { font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); padding: 6px 7px; border-radius: 8px; transition: color .15s ease, background-color .15s ease; }
.lang-switch a:hover { color: var(--text); }
.lang-switch a[aria-current="page"] { color: var(--acc); }
.lang-switch a:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.nav-cta .lang-switch { margin-right: 6px; }
.mobile-menu .lang-switch-m { gap: 8px; margin-top: 22px; }
.mobile-menu .lang-switch-m a { font-size: .9rem; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; }
.mobile-menu .lang-switch-m a[aria-current="page"] { border-color: var(--acc); }
@media (max-width: 1080px) and (min-width: 901px) { nav.links { gap: 22px; } .nav-cta .lang-switch a { padding: 6px 5px; } }

/* Small "EN" marker on links to pages that only exist in English (shown on localized pages) */
.en-tag { display: inline-block; margin-left: .35em; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; font-size: .62em; font-weight: 700; letter-spacing: .06em; line-height: 1.6; color: var(--muted); vertical-align: .15em; text-transform: uppercase; }

/* Visually hidden but read by screen readers and crawlers (homepage H1 behind the rotating slogans) */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }