/* ==========================================================================
   RPLAY.LT — SECTIONS
   Page-level composition. Components live in components.css; this file only
   arranges them and holds the pieces unique to one section.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   The first viewport is a stage: a procedural Los Santos horizon rendered to
   canvas, the headline sitting in front of it, and the connect console — the
   signature element — anchored at the base.
   -------------------------------------------------------------------------- */
.hero {
  --hero-dissolve: clamp(40px, 6vh, 80px);

  position: relative;
  display: grid;
  align-content: center;
  min-height: min(94svh, 940px);
  /* The bottom padding is the dissolve zone: the skyline fades out inside the
     hero rather than being cut off at its edge, so there is no boundary to
     see. Nothing is laid out down there — it is atmosphere. */
  padding-block: clamp(40px, 8vh, 96px) var(--hero-dissolve);
  overflow: hidden;
  isolation: isolate;
}

/* Content --------------------------------------------------------------- */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.hero__copy {
  display: grid;
  gap: var(--s-5);
  justify-items: start;
}

.hero__title { margin: 0; }

/* The headline is a single condensed block; the second line carries the
   accent so exactly one word on the page uses the gradient. */
.hero__title .line {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.hero__title .line--sm {
  font-size: clamp(1.5rem, 0.9rem + 2.4vw, 2.6rem);
  color: var(--text-2);
  letter-spacing: 0.01em;
}

.hero__title .line--lg { font-size: var(--fs-display); }

.hero__lead { max-width: 52ch; }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Once the buttons would wrap onto separate rows they look tidier at full
   width than staggered at their intrinsic widths. */
@media (max-width: 460px) {
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* Connect console — the signature element.
   FiveM players join by typing `connect <host>` into the F8 console, so the
   site hands them exactly that, live, with the server state attached. */
.console {
  width: min(560px, 100%);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-md);
  background: var(--glass-strong);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-family: var(--font-mono);
}

.console__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 9px var(--s-4);
  border-bottom: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.02);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.console__state {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.console__state[data-state="online"]  { color: var(--success); }
.console__state[data-state="offline"] { color: var(--danger); }
.console__state[data-state="unknown"] { color: var(--text-faint); }

.console__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
}

.console__prompt { color: var(--accent); flex: none; }

.console__cmd {
  flex: 1;
  min-width: 0;
  font-size: clamp(0.9rem, 0.82rem + 0.4vw, 1.0625rem);
  color: var(--text);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.console__cmd::-webkit-scrollbar { display: none; }

/* Caret blinks once the address has finished typing in. Purely decorative,
   so it is hidden from assistive tech and stopped under reduced motion. */
.console__caret {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--accent);
  flex: none;
  animation: rplay-blink 1.15s steps(2, start) infinite;
}

@keyframes rplay-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .console__caret { animation: none; opacity: 0.5; }
}

/* Live figures under the command line. Values stay em-dashed until the API
   answers — the page never invents a player count. */
.console__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--stroke);
}

.console__stat {
  padding: var(--s-3) var(--s-4);
  display: grid;
  gap: 2px;
}

.console__stat + .console__stat { border-left: 1px solid var(--stroke); }

.console__stat dt {
  font-size: 10px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-faint);
}

.console__stat dd {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.console__stat dd[data-empty="true"] { color: var(--text-faint); }

/* Narrow screens: tighten the console so the connect command is not clipped
   mid-address and the three labels each stay on one line. */
@media (max-width: 560px) {
  .console__row { padding: var(--s-3); gap: var(--s-2); }
  .console__cmd { font-size: 0.8125rem; }
  .console__bar { padding-inline: var(--s-3); font-size: 0.7rem; }
  .console__stat { padding: var(--s-3) var(--s-2); }
  .console__stat dt { font-size: 9px; letter-spacing: 0.05em; }
  .console__stat dd { font-size: 0.95rem; }
}

@media (max-width: 380px) {
  .console__cmd { font-size: 0.75rem; }
}

/* Hero portrait --------------------------------------------------------- */
.hero__art-mobile { display: none; }
.hero__art { display: none; }

@media (min-width: 981px) {
  .hero__art {
    position: relative;
    display: block;
    justify-self: center;
    align-self: end;
    width: min(100%, 520px);
    aspect-ratio: 2 / 3;
    margin-top: var(--header-space);
    z-index: 2;
  }

  .hero__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }
}

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: auto; padding-block: clamp(40px, 8vh, 72px) var(--section-y); }
}


/* Mobile hero artwork ---------------------------------------------------
   Desktop uses the original right-side portrait. On phones we show the same
   RPLAY artwork inside the copy flow so it remains visible without changing
   the desktop composition or sitting underneath the fixed header. */
@media (max-width: 980px) {
  .hero__art-mobile {
    display: block;
    width: min(68vw, 300px);
    margin: -4px auto 2px;
    pointer-events: none;
  }

  .hero__art-mobile img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

@media (max-width: 420px) {
  .hero__art-mobile {
    width: min(72vw, 280px);
    margin-top: -2px;
  }
}

/* ==========================================================================
   COAST — Layered Waves transition
   Transparent SVG curves sit both behind and in front of the existing Los
   Santos coast artwork. No rectangular overlay is used, so there are no hard
   corners or pasted-image seams at any viewport width.
   ========================================================================== */
:root {
  --coast-h: clamp(214px, 14vw, 238px);
  --coast-rise: clamp(24px, 1.8vw, 36px);
}

.coast {
  position: relative;
  z-index: 1;
  height: var(--coast-h);
  margin-top: calc(-1 * var(--coast-rise));
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background: transparent;
}


/* Variant 3 — refined Signal / City Approach. The geometry is deliberately
   symmetrical: one shallow signal curve, two guides converging on the city,
   and three fixed pulse nodes. Nothing crosses or fights for attention. */
.coast__signal {
  position: absolute;
  z-index: 6;
  top: 4px;
  left: 50%;
  width: min(var(--container), calc(100% - (2 * var(--gutter))));
  height: 124px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: .78;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

.coast__signal-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.coast__signal-line {
  fill: none;
  stroke: url(#signalStroke);
  stroke-width: .92;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.coast__signal-line--halo {
  stroke-width: 5;
  opacity: .08;
  filter: blur(4px);
}

/* A second, quieter arc adds depth above the main signal without creating
   another competing focal point. */
.coast__signal-line--upper {
  stroke: rgba(51,162,255,.12);
  stroke-width: .62;
  opacity: .72;
}

.coast__approach-line {
  fill: none;
  stroke-width: .68;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  opacity: .50;
}

.coast__approach-line--left { stroke: url(#approachStrokeLeft); }
.coast__approach-line--right { stroke: url(#approachStrokeRight); }

.coast__signal-mover {
  fill: #74c5ff;
  opacity: .72;
}

.coast__signal-mover--two {
  fill: #a7ddff;
  opacity: .58;
}

.coast__signal-mover--three { opacity: .64; }

.coast__signal-mark {
  position: absolute;
  left: 50%;
  top: 73px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .36em;
  color: rgba(116,197,255,.15);
  text-shadow: 0 0 14px rgba(51,162,255,.08);
  white-space: nowrap;
}

.coast__waves {
  position: absolute;
  left: 0;
  right: 0;
  background-image: url("../brand/coast-waves.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 108% 82%;
  transform: translateZ(0);
  will-change: transform;
}

.coast__waves--back {
  z-index: 1;
  top: 22%;
  bottom: 1%;
  opacity: .29;
  filter: blur(.35px) saturate(.72) brightness(.86);
  transform: translate3d(-.7%, -1px, 0) scaleY(.78);
  animation: coast-wave-back 18s ease-in-out infinite alternate;
}

.coast__scene {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 27%;
  bottom: 0;
  background-image: url("../brand/coast-scene.svg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 110% 74%;
  opacity: .50;
  filter: saturate(.66) contrast(.97) brightness(.80);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.26) 11%, #000 28%, #000 82%, rgba(0,0,0,.58) 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.26) 11%, #000 28%, #000 82%, rgba(0,0,0,.58) 94%, transparent 100%);
  transform: translateZ(0);
}

.coast__waves--front {
  z-index: 3;
  top: 25%;
  bottom: 0;
  opacity: .37;
  filter: saturate(.76) brightness(.90);
  transform: translate3d(.7%, 1px, 0) scaleY(.76);
  animation: coast-wave-front 22s ease-in-out infinite alternate;
}

.coast__particles {
  position: absolute;
  z-index: 4;
  inset: 0 4%;
  opacity: .39;
  background:
    radial-gradient(circle at 14% 52%, rgba(116,197,255,.48) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 35%, rgba(51,162,255,.34) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 61%, rgba(116,197,255,.38) 0 1px, transparent 2px),
    radial-gradient(circle at 49% 39%, rgba(51,162,255,.32) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 56%, rgba(116,197,255,.42) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 31%, rgba(51,162,255,.28) 0 1px, transparent 2px),
    radial-gradient(circle at 87% 59%, rgba(116,197,255,.40) 0 1px, transparent 2px);
  filter: drop-shadow(0 0 4px rgba(51,162,255,.12));
  animation: coast-particles 5.5s ease-in-out infinite alternate;
}

.coast::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 20%;
  right: 20%;
  bottom: 7%;
  height: 30%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 72%, rgba(51,162,255,.052), rgba(29,92,146,.018) 38%, transparent 72%);
  filter: blur(20px);
}

.coast::before { content: none; }

@keyframes coast-wave-back {
  from { transform: translate3d(-.7%, -1px, 0) scaleY(.78); }
  to   { transform: translate3d(.6%, 1px, 0) scaleY(.80); }
}

@keyframes coast-wave-front {
  from { transform: translate3d(.7%, 1px, 0) scaleY(.76); }
  to   { transform: translate3d(-.6%, -1px, 0) scaleY(.78); }
}

@keyframes coast-particles {
  from { opacity: .18; transform: translateY(1px); }
  to   { opacity: .30; transform: translateY(-1px); }
}

/* app.js marks the scene still outside the viewport. Actually pause the CSS
   work as well; previously the class changed but these infinite animations
   kept rendering off-screen. */
.coast.is-still .coast__waves--back,
.coast.is-still .coast__waves--front,
.coast.is-still .coast__particles {
  animation-play-state: paused;
  will-change: auto;
}

.coast + .section {
  position: relative;
  z-index: 2;
  margin-top: -9px;
  padding-top: clamp(23px, 1.9vw, 31px);
  background: transparent;
}

#serveris::before,
#serveris::after {
  display: none !important;
  content: none !important;
}

/* Desktop coast artwork follows the same 1200px visual column as the header
   The coast section itself stays full-width/transparent,
   but the waves, skyline, particles and glow no longer stretch edge-to-edge. */
@media (min-width: 981px) {
  .coast__waves,
  .coast__scene,
  .coast__particles {
    left: 0;
    right: 0;
    width: min(var(--container), calc(100% - (2 * var(--gutter))));
    margin-inline: auto;
  }

  .coast::after {
    left: 50%;
    right: auto;
    width: min(var(--container), calc(100% - (2 * var(--gutter))));
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .coast__waves--back,
  .coast__waves--front,
  .coast__particles { animation: none; }
  .coast__signal-movers { display: none; }
}

@media (max-width: 980px) {
  :root {
    --coast-h: clamp(178px, 24vw, 220px);
    --coast-rise: clamp(18px, 3vw, 30px);
  }

  .coast__waves {
    left: -12%;
    right: -12%;
    background-size: 108% 82%;
  }

  .coast__scene {
    left: -8%;
    right: -8%;
    top: 25%;
    background-size: 104% 68%;
    opacity: .40;
  }

  .coast + .section {
    margin-top: -8px;
    padding-top: clamp(24px, 4vw, 34px);
  }
}

@media (max-width: 560px) {
  :root {
    --coast-h: 154px;
    --coast-rise: 12px;
  }

  .coast__waves {
    left: -30%;
    right: -30%;
    background-size: 132% 84%;
  }

  .coast__waves--back { opacity: .20; }
  .coast__waves--front { opacity: .27; }

  .coast__scene {
    left: -22%;
    right: -22%;
    top: 28%;
    background-size: 122% 66%;
    opacity: .36;
  }

  .coast__particles { opacity: .24; }
  .coast + .section { margin-top: -5px; padding-top: 24px; }
}

/* --------------------------------------------------------------------------
   FEATURE GRID
   -------------------------------------------------------------------------- */
/* Three across, so five cards read as 3 + 2 rather than 4 + 1 with an orphan. */
.features { --min: 320px; }

/* --------------------------------------------------------------------------
   STEPS — a real, ordered sequence, so it is marked up as one and numbered.
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  counter-reset: step;
  list-style: none;
  padding: 0;
}

.step {
  counter-increment: step;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  padding-top: var(--s-6);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: var(--s-4);
  left: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
}

/* A hairline connector between steps, drawn only where they sit side by side. */
.step::after {
  content: "";
  position: absolute;
  top: calc(var(--s-4) + 7px);
  left: calc(100% + 1px);
  width: var(--s-4);
  height: 1px;
  background: var(--stroke-strong);
}

.step:last-child::after { display: none; }

@media (max-width: 1000px) {
  .step::after { display: none; }
}

.step h3 { margin-top: var(--s-2); }

.step p { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-loose); }

/* --------------------------------------------------------------------------
   STORE
   -------------------------------------------------------------------------- */
.store__grid { --min: 262px; margin-top: var(--s-6); }

.store__panel[hidden] { display: none; }

/* Filter row inside a store panel. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin-top: var(--s-5);
}

/* --------------------------------------------------------------------------
   PLAN CARDS (unban tiers)
   -------------------------------------------------------------------------- */
.plans { --min: 280px; }

.plan { gap: var(--s-4); }

.plan__badge { margin-bottom: var(--s-2); }

.plan__summary {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--text-muted);
}

.plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }

.plan__price {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.plan__list { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }

.plan__list li {
  display: flex;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-2);
}

.plan__list svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent); }

.plan__foot { margin-top: auto; padding-top: var(--s-4); }

/* One tier is highlighted, and only by border and a badge — no second style. */
.plan--featured { border-color: var(--stroke-accent); background: var(--accent-wash); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--s-3); max-width: 82ch; }

.faq__item {
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-out);
}

.faq__item[open] { border-color: var(--stroke-accent); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: background var(--dur-2) var(--ease-out);
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary:hover { background: var(--surface-hover); }

.faq__item summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-2) var(--ease-out);
}

.faq__item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }

.faq__answer {
  padding: 0 var(--s-5) var(--s-5);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
}

.faq__answer a { color: var(--accent); }

/* --------------------------------------------------------------------------
   COMMUNITY / DISCORD CALL TO ACTION
   -------------------------------------------------------------------------- */
.cta-panel {
  position: relative;
  display: grid;
  gap: var(--s-5);
  justify-items: center;
  text-align: center;
  padding: clamp(32px, 6vw, 72px) var(--gutter);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 130% at 50% 0%, rgba(51, 162, 255, 0.14), transparent 62%),
    var(--bg-elev-1);
  overflow: hidden;
}

.cta-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6;
}

.cta-panel h2 { margin: 0; }

.cta-panel .u-lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   CONTACT + FOOTER
   -------------------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}

@media (max-width: 820px) {
  .contact { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

.contact__email {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.5rem);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--stroke-strong);
  padding-bottom: 4px;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.contact__email:hover { color: var(--accent); border-color: var(--accent); }

.social-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.site-footer {
  border-top: 1px solid var(--stroke);
  margin-top: var(--section-y);
  padding-block: var(--s-6);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }

.site-footer a { text-decoration: none; transition: color var(--dur-2) var(--ease-out); }
.site-footer a:hover { color: var(--text); }

/* --------------------------------------------------------------------------
   PAGE HEADER — the compact hero used by secondary pages.
   -------------------------------------------------------------------------- */
/* No overflow:hidden here. Clipping this box was what cut the ambient light
   off at the header's lower edge and produced the black band. The glow instead
   reaches up past the header by --header-space and fades out on its own. */
.page-head {
  position: relative;
  padding-block: clamp(28px, 5vh, 56px) clamp(32px, 5vh, 64px);
}

.page-head::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--header-space));
  left: 0;
  right: 0;
  bottom: -30%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(64vw 46vh at 16% 8%, rgba(51, 162, 255, 0.13), transparent 66%),
    radial-gradient(46vw 34vh at 86% 0%, rgba(255, 166, 64, 0.055), transparent 62%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* A single hairline at the base of the intro, fading at both ends — the same
   motif the hero uses at its waterline, so subpages feel related to it. */
.page-head::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(51, 162, 255, 0.34) 18%, rgba(51, 162, 255, 0.34) 62%, transparent);
  opacity: 0.7;
}

.page-head__inner {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: minmax(0, 62ch) minmax(0, auto);
  align-items: end;
  column-gap: var(--s-7);
}

.page-head__inner > .crumbs,
.page-head__inner > .eyebrow,
.page-head__inner > h1,
.page-head__inner > .u-lead { grid-column: 1; }

/* Optional right-hand slot: a count, a badge, a small ambient mark. */
.page-head__aside {
  grid-column: 2;
  grid-row: 3 / span 2;
  align-self: end;
  justify-self: end;
  text-align: right;
}

@media (max-width: 900px) {
  .page-head__inner { grid-template-columns: minmax(0, 1fr); }
  .page-head__aside { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; }
}

.page-head h1 { margin: 0; }

/* Breadcrumb */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-faint);
}

.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs li { display: flex; align-items: center; gap: var(--s-2); }
.crumbs li + li::before { content: "/"; opacity: 0.5; }

/* --------------------------------------------------------------------------
   SCROLLBARS — quiet, matched to the surface palette.
   -------------------------------------------------------------------------- */
html { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: var(--r-full);
}

*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.24); background-clip: padding-box; }

/* Body scroll lock while a drawer or sheet owns the screen. */
body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   SHOWCASE CAROUSEL
   The homepage is a landing page, not the shop: it shows a handful of cars in
   a perspective showroom and sends people to the full catalogue. Cards are
   positioned by transform from their offset to the active index, so there is
   real depth rather than a row of flat tiles.
   -------------------------------------------------------------------------- */
.showcase {
  --card-w: clamp(250px, 24vw, 330px);
  --card-h: clamp(230px, 18vw, 264px);
  /* Wider than the card, so neighbours sit beside the active one instead of
     across it — overlapping titles is what made this read as clutter. */
  --spread: calc(var(--card-w) * 1.14);
  --tilt: 19deg;
  --depth: 240px;

  position: relative;
  margin-top: var(--s-7);
}

.showcase__stage {
  position: relative;
  height: var(--card-h);
  perspective: 1400px;
  perspective-origin: 50% 45%;
  touch-action: pan-y;
  cursor: grab;
  /* Cards parked off-stage are transparent but still laid out, and they would
     otherwise widen the document — a horizontal scrollbar on phones. `clip` is
     the one overflow value that may pair with a visible cross axis, so the
     active card keeps its drop shadow. */
  overflow-x: clip;
  overflow-y: visible;
}

.showcase__stage.is-dragging { cursor: grabbing; }

/* Edges fade so cards leave the stage into atmosphere, not past a hard border. */
.showcase__stage::before,
.showcase__stage::after {
  content: "";
  position: absolute;
  top: -6%;
  bottom: -6%;
  width: clamp(40px, 12vw, 180px);
  z-index: 20;
  pointer-events: none;
}

.showcase__stage::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
}

.showcase__stage::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg), transparent);
}

.showcase__track {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
}

.showcase__item {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--card-w);
  height: var(--card-h);
  margin-left: calc(var(--card-w) / -2);
  transform-origin: 50% 50%;
  transition:
    transform var(--dur-4) var(--ease-out),
    opacity var(--dur-4) var(--ease-out),
    filter var(--dur-4) var(--ease-out);
  will-change: transform, opacity;
}

/* While a drag is in progress the cards follow the finger with no easing. */
.showcase__stage.is-dragging .showcase__item { transition: none; }

.showcase__item[data-offset="0"]  { z-index: 10; }
.showcase__item[data-offset="-1"],
.showcase__item[data-offset="1"]  { z-index: 8; }
.showcase__item[data-offset="-2"],
.showcase__item[data-offset="2"]  { z-index: 6; }

.showcase__item[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
}

/* The card ---------------------------------------------------------------- */
.showcase__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
  padding: var(--s-5);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 80% at 100% 0%, var(--accent-wash), transparent 60%),
    var(--bg-elev-1);
  overflow: hidden;
  transition: border-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}

.showcase__item[data-offset="0"] .showcase__card {
  border-color: var(--stroke-accent);
  box-shadow: var(--shadow-lg);
}

/* Lit top edge, same language as .card--lit. */
.showcase__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18) 30%, rgba(255, 255, 255, 0.18) 70%, transparent);
}

/* The index, set in the display face — a quiet showroom plate. */
.showcase__index {
  position: absolute;
  right: var(--s-5);
  bottom: var(--s-5);
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.045);
  letter-spacing: -0.04em;
  pointer-events: none;
}

.showcase__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.3rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.showcase__foot {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--stroke);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.showcase__price {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Controls ---------------------------------------------------------------- */
.showcase__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.showcase__dots {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.showcase__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: width var(--dur-3) var(--ease-out), background var(--dur-3) var(--ease-out);
}

.showcase__dot[aria-selected="true"] {
  width: 26px;
  background: rgba(51, 162, 255, 0.58);
}

/* Bigger hit area than the visible dot. */
.showcase__dot::after {
  content: "";
  position: absolute;
  inset: -12px;
}

.showcase__dot { position: relative; }

@media (max-width: 720px) {
  .showcase {
    --card-w: min(76vw, 310px);
    --card-h: 252px;
    /* Slightly narrower than the card so the next one peeks in, which is the
       affordance that tells a thumb it can swipe. */
    --spread: calc(var(--card-w) * 0.88);
    --tilt: 14deg;
    --depth: 90px;
  }
  .showcase__index { font-size: 2.6rem; }
}
.showcase__badge { align-self: flex-start; }

/* --------------------------------------------------------------------------
   STAT BAND
   The live server figures as one horizontal instrument panel rather than a
   card floating beside an empty column. Cells divide with hairlines; the
   capacity meter spans the whole band underneath.
   -------------------------------------------------------------------------- */
.statband {
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.statband__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.statband__cell {
  display: grid;
  gap: 6px;
  padding: var(--s-5);
  border-right: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}

.statband__cell dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-faint);
}

.statband__cell dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--text);
}

.statband__cell dd[data-empty="true"] { color: var(--text-faint); font-weight: 400; }

/* The status cell carries the live dot, so it gets the accent treatment. */
.statband__cell--status dd { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); }

.statband__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* Capacity meter. Rendered only once a real player count has arrived — the
   page never draws a bar for a number it does not have. */
.meter {
  height: 6px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.meter__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-lo), var(--accent));
  transition: width var(--dur-4) var(--ease-out);
}

.statband__foot .meter { flex: 1 1 220px; min-width: 160px; }

@media (max-width: 640px) {
  .statband__cell { padding: var(--s-4); }
}

/* --------------------------------------------------------------------------
   STEP EXTRAS — used by the "how to start" sequence.
   -------------------------------------------------------------------------- */
.step__note {
  margin-top: auto;
  padding-top: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--warning);
}

/* The command a player actually types, inside the step that asks for it. */
.step__command {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding: 8px 8px 8px var(--s-3);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
}

.step__command code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--text);
  scrollbar-width: none;
}

.step__command code::-webkit-scrollbar { display: none; }

kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--stroke-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface-hover);
  font-family: var(--font-mono);
  font-size: 0.8em;
  line-height: 1.5;
  color: var(--text);
}

.step p a { color: var(--accent); }

/* A thin rule threading the numbers together, so four cards read as one
   sequence rather than four unrelated boxes. */
.steps--flow { position: relative; }

.steps--flow .step { padding-top: var(--s-7); }

.steps--flow .step::before {
  top: var(--s-5);
  left: var(--s-5);
}

/* The connector already exists on .step::after; here it starts at the number
   instead of the card top so the thread lines up with the digits. */
.steps--flow .step::after { top: calc(var(--s-5) + 7px); }

/* --------------------------------------------------------------------------
   JOURNEY
   The unban process is a sequence with a beginning and an end, so it is drawn
   as one continuous line with four stops rather than four detached cards.
   Horizontal on wide screens, vertical on narrow ones — same line either way.
   -------------------------------------------------------------------------- */
.journey {
  position: relative;
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: journey;
}

.journey__step {
  counter-increment: journey;
  position: relative;
  padding-top: var(--s-7);
}

/* The line itself, running through every marker. */
.journey::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--stroke-strong) 6%, var(--stroke-strong) 94%, transparent);
}

.journey__marker {
  position: absolute;
  top: 6px;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--stroke-accent);
  background: var(--bg);
  display: grid;
  place-items: center;
}

.journey__marker::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* The step number sits beside its marker in the mono face. */
.journey__step::before {
  content: counter(journey, decimal-leading-zero);
  position: absolute;
  top: 5px;
  left: 24px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.journey__step h3 { margin-bottom: var(--s-2); }

.journey__step p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
}

/* Stacked: the line turns vertical and runs down the left edge. */
@media (max-width: 760px) {
  .journey { gap: var(--s-6); }

  .journey::before {
    top: 6px;
    bottom: 6px;
    left: 7px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg,
      transparent, var(--stroke-strong) 4%, var(--stroke-strong) 96%, transparent);
  }

  .journey__step { padding-top: 0; padding-left: var(--s-7); }
  .journey__marker { top: 4px; }
  .journey__step::before { top: 3px; left: 26px; }
  .journey__step h3 { margin-top: 0; }
}

@media (max-width: 700px) {
  .coast__signal {
    top: 4px;
    height: 92px;
    width: calc(100% - (2 * var(--gutter)));
    opacity: .62;
  }

  .coast__approach-line { opacity: .34; }
  .coast__signal-line--upper { opacity: .46; }
  .coast__signal-movers { opacity: .72; }
  .coast__signal-mark { top: 54px; font-size: 7px; letter-spacing: .30em; }
}

/* ==========================================================================
   RPLAY NEWS DECK — admin driven, showroom-style carousel
   ========================================================================== */
.section--news{overflow:hidden}
.news-counter{display:inline-flex;align-items:center;justify-content:center;min-width:76px;height:38px;padding:0 14px;border:1px solid rgba(143,163,184,.17);border-radius:999px;background:#08101a;color:var(--muted);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em}
.news-carousel{--news-card-w:min(760px,66vw);--news-card-h:420px;--news-spread:clamp(300px,31vw,430px);--news-tilt:10deg;position:relative;margin-top:clamp(26px,4vw,48px);perspective:1500px}
.news-carousel__viewport{position:relative;height:var(--news-card-h);overflow:visible;touch-action:pan-y;cursor:grab;transform-style:preserve-3d}
.news-carousel__viewport.is-dragging{cursor:grabbing}
.news-carousel__track{position:absolute;inset:0;transform-style:preserve-3d}
.news-slide{position:absolute;left:50%;top:0;width:var(--news-card-w);height:var(--news-card-h);margin-left:calc(var(--news-card-w)/-2);border:1px solid rgba(143,163,184,.16);border-radius:18px;overflow:hidden;background:#08111a;transform-origin:50% 50%;transition:transform .55s cubic-bezier(.22,.74,.18,1),opacity .55s cubic-bezier(.22,.74,.18,1),border-color .22s ease;will-change:transform,opacity;cursor:pointer;box-shadow:0 24px 58px rgba(0,0,0,.22)}
.news-carousel__viewport.is-dragging .news-slide{transition:none}
.news-slide[data-offset="0"]{z-index:12;border-color:rgba(51,162,255,.38)}
.news-slide[data-offset="-1"],.news-slide[data-offset="1"]{z-index:9;border-color:rgba(143,163,184,.09);box-shadow:none}
.news-slide[data-offset="-2"],.news-slide[data-offset="2"]{z-index:6;border-color:transparent;box-shadow:none}
.news-slide[aria-hidden="true"]{pointer-events:none}

/* Ghost korteles: paliekam media preview, bet be juodo teksto/menu sluoksnio. */
.news-slide:not([data-offset="0"]) .news-slide__copy,
.news-slide:not([data-offset="0"]) .news-slide__index,
.news-slide:not([data-offset="0"]) .news-slide__video-icon{opacity:0;pointer-events:none}
.news-slide:not([data-offset="0"]) .news-slide__media::after{background:linear-gradient(90deg,rgba(5,10,16,.38),rgba(5,10,16,.28)),linear-gradient(0deg,rgba(5,10,16,.28),transparent 64%)}
.news-slide[data-offset="-1"],.news-slide[data-offset="1"]{cursor:pointer}
.news-slide[data-offset="0"]{cursor:default}
.news-slide__media{position:absolute;inset:0;background:#08111a;overflow:hidden}
.news-slide__media img,.news-slide__media video{width:100%;height:100%;object-fit:cover;display:block}
.news-slide__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,10,16,.96) 0%,rgba(5,10,16,.86) 35%,rgba(5,10,16,.38) 66%,rgba(5,10,16,.14) 100%),linear-gradient(0deg,rgba(5,10,16,.64),transparent 58%)}
.news-slide__media--empty{background:radial-gradient(circle at 72% 42%,rgba(51,162,255,.13),transparent 28%),linear-gradient(135deg,#0b1722,#07101a 70%)}
.news-slide__media--empty::before{content:"R";position:absolute;right:12%;top:50%;transform:translateY(-50%);font-family:var(--font-display);font-size:260px;line-height:1;color:rgba(51,162,255,.055)}
.news-slide__copy{position:absolute;z-index:4;left:0;top:0;bottom:0;width:min(68%,560px);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,4vw,50px)}
.news-slide__meta{display:flex;align-items:center;gap:10px;margin:0 0 13px;font-family:var(--font-mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.news-slide__meta span{color:var(--accent);font-weight:700}.news-slide__meta span::after{content:"";display:inline-block;width:3px;height:3px;margin-left:10px;border-radius:50%;background:rgba(51,162,255,.55);vertical-align:middle}
.news-slide h3{margin:0;max-width:540px;color:var(--text);font-family:var(--font-display);font-size:clamp(38px,4.4vw,66px);line-height:.96;letter-spacing:-.035em;text-wrap:balance}
.news-slide__copy>p:not(.news-slide__meta){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:520px;margin:16px 0 0;color:var(--muted);font-size:14px;line-height:1.65}
.news-slide__hint{display:inline-flex;align-items:center;gap:8px;margin-top:20px;color:#80c9f8;font-size:11px;font-weight:700}.news-slide__hint::after{content:"→"}
.news-slide__index{position:absolute;right:22px;top:18px;z-index:5;font:700 11px var(--font-mono);letter-spacing:.08em;color:rgba(238,244,251,.44)}
.news-slide__video-icon{position:absolute;right:28px;bottom:26px;z-index:5;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.19);border-radius:50%;background:rgba(5,10,16,.65);color:#fff}
.news-carousel__controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.news-carousel__dots{display:flex;align-items:center;gap:7px}
.news-carousel__dot{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.15);cursor:pointer;transition:width .22s ease,background .22s ease}.news-carousel__dot[aria-selected="true"]{width:28px;background:rgba(51,162,255,.6)}
.news-carousel__arrows{display:flex;gap:8px}.news-carousel.is-paused .news-carousel__dot[aria-selected="true"]{background:rgba(143,163,184,.5)}
.news-slide--loading{position:relative;left:auto;margin:0 auto;display:block;opacity:1;transform:none!important}.news-slide--loading .news-slide__copy{position:relative;min-height:300px;width:auto}

@media(max-width:850px){.news-carousel{--news-card-w:min(78vw,640px);--news-card-h:390px;--news-spread:calc(var(--news-card-w)*.72);--news-tilt:8deg}.news-slide__copy{width:76%}.news-slide h3{font-size:clamp(36px,7vw,58px)}.news-counter{display:none}}
@media(max-width:620px){.news-carousel{--news-card-w:min(86vw,380px);--news-card-h:420px;--news-spread:calc(var(--news-card-w)*.88);--news-tilt:6deg;margin-top:22px}.news-slide__media::after{background:linear-gradient(0deg,rgba(5,10,16,.96) 0%,rgba(5,10,16,.72) 50%,rgba(5,10,16,.1) 100%)}.news-slide__copy{width:100%;padding:24px}.news-slide h3{font-size:42px}.news-slide__copy>p:not(.news-slide__meta){font-size:13px}}
@media(prefers-reduced-motion:reduce){.news-slide{transition:none!important}}

/* ========================================================================== 
   Mobile hero header clearance v27
   The public header is fixed. On phones the hero can become taller than the
   viewport, so centering its grid lets the first eyebrow slide underneath the
   header. Start the hero below the fixed bar instead; header visuals untouched.
   ========================================================================== */
@media (max-width: 900px) {
  .hero {
    min-height: 100svh;
    align-content: start;
    padding-top: calc(var(--header-space) + 32px + env(safe-area-inset-top));
  }
}

@media (max-width: 420px) {
  .hero {
    padding-top: calc(var(--header-space) + 38px + env(safe-area-inset-top));
  }
}


/* v36 — clickable Discord support note */
.section-note--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.section-note--link:hover {
  border-color: rgba(51,162,255,.48);
  background: rgba(10,36,54,.88);
}
.section-note--link:focus-visible {
  outline: 2px solid rgba(51,162,255,.72);
  outline-offset: 3px;
}
.section-note--link > span:not(.section-note__action) {
  min-width: 0;
}
.section-note__action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
@media (max-width: 700px) {
  .section-note--link {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .section-note__action {
    width: 100%;
    margin-left: 31px;
    margin-top: 6px;
  }
}