/* ============================================================================
   KAALATERAL ROLEPLAY - STOREFRONT STYLES
   Dark tactical UI: deep red primary, rose secondary, corner-bracket cards.
   ========================================================================== */

:root {
  /* neutrals carry a warm red tint so nothing reads blue */
  --bg:            #0a0708;
  --bg-alt:        #100b0d;
  --surface:       #171113;
  --surface-2:     #1f1719;
  --line:          #2e2124;
  --line-soft:     #221819;

  --text:          #f4eaea;
  --text-dim:      #b3a2a4;
  --text-faint:    #857376;

  /* primary - deep red */
  --red:           #d92b2b;
  --red-bright:    #ff5c4d;
  --red-deep:      #7a1414;
  --red-glow:      rgba(217, 43, 43, .35);

  /* secondary - rose, for tags, code, focus rings and hover glows */
  --ember:         #ff7a7a;
  --ember-dim:     #a33636;
  --ember-glow:    rgba(255, 122, 122, .32);

  /* errors - kept lighter and pinker so they stay distinct from the brand red */
  --danger:        #ff9a9a;
  --danger-bg:     #2a1216;

  --radius:        12px;
  --radius-sm:     8px;
  --shadow:        0 20px 50px rgba(0, 0, 0, .55);
  --wrap:          1140px;

  --font:          "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display:  "Chakra Petch", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:     ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

/* The browser's own [hidden] rule is display:none, which loses to any author
   rule that sets display - .btn being inline-flex, for one. Without this,
   `el.hidden = true` silently does nothing to those elements. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.15;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
}
p { margin: 0; }
a { color: inherit; }

code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: rgba(255, 122, 122, .09);
  border: 1px solid rgba(255, 122, 122, .22);
  border-radius: 4px;
  padding: .12em .45em;
  color: var(--ember);
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 800px; }
.wrap--wide { max-width: 1380px; }   /* used where a 4-across grid needs room */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--red); color: #fff; padding: 10px 18px;
  font-weight: 700; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* eyebrow / micro-label used above section titles */
.eyebrow {
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--red);
}

/* ============================================================================
   BUTTONS
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px;
  font-family: var(--font-display);
  font-size: .92rem; font-weight: 600;
  /* Explicit, because a <button> does not inherit the page's line-height the
     way an <a> does. Without it the dropdown toggles came out 5px shorter than
     the link-based buttons sitting beside them. */
  line-height: 1.2;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  isolation: isolate;
  transition: transform .14s cubic-bezier(.2, .8, .3, 1),
              box-shadow .2s ease, border-color .2s ease,
              background-color .2s ease, color .2s ease, opacity .2s ease;
}

.btn svg { width: 17px; height: 17px; flex: none; }

/* light sweep on hover */
.btn::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .38) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .6s cubic-bezier(.3, .7, .3, 1);
}
.btn:hover:not(:disabled)::after { transform: translateX(120%); }

.btn:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }

.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* --- primary (red) --- */
.btn--primary {
  background: linear-gradient(140deg, var(--red-bright) 0%, var(--red) 55%, #a81f1f 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 6px 20px rgba(217, 43, 43, .22);
}
.btn--primary:hover:not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 10px 30px var(--red-glow);
  transform: translateY(-2px);
}

/* --- ghost (outline, fills on hover) --- */
.btn--ghost {
  background: rgba(255, 255, 255, .02);
  color: var(--text);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.btn--ghost::after {
  background: linear-gradient(110deg, transparent 20%, rgba(255, 122, 122, .16) 50%, transparent 80%);
}
.btn--ghost:hover:not(:disabled) {
  color: #fff;
  border-color: var(--ember-dim);
  background: rgba(255, 122, 122, .07);
  box-shadow: 0 8px 24px rgba(255, 122, 122, .14);
  transform: translateY(-2px);
}

/* --- sizes --- */
.btn--lg { padding: 15px 30px; font-size: 1rem; letter-spacing: .1em; }

/* Square icon-only button. `align-self: stretch` makes it exactly as tall as
   the buttons beside it, so it keeps matching if their padding ever changes. */
.btn--icon {
  padding: 0; width: 46px; align-self: stretch;
  border-color: var(--line-soft); background: transparent;
}
.btn--icon:hover:not(:disabled) { border-color: var(--line); background: rgba(255, 255, 255, .05); }
.btn__emoji { font-size: 1.05rem; line-height: 1; filter: saturate(.9); }
.btn--sm { padding: 9px 16px; font-size: .82rem; }

/* --- buy button on a package card --- */
.btn--buy { width: 100%; margin-top: auto; }

/* --- busy / loading state --- */
.btn.is-busy { pointer-events: none; }
.btn.is-busy::before {
  content: "";
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, .28);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn--ghost.is-busy::before { border-color: rgba(255, 255, 255, .2); border-top-color: currentColor; }

/* ============================================================================
   HEADER
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 40;
  /* Near-opaque instead of a translucent backdrop-filter blur. A sticky
     blurred header re-blurs everything behind it on every scroll frame, which
     is the single most expensive thing a page like this can do. On a near-black
     palette the difference is barely visible. */
  background: rgba(10, 7, 8, .97);
  border-bottom: 1px solid var(--line-soft);
}
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--red-deep) 25%, var(--ember-dim) 75%, transparent);
  opacity: .5;
}
/* Full-bleed: capped at a fixed width the bar reads as a small island on a
   wide monitor. It now spans the viewport, so the brand sits hard left and the
   buttons hard right however wide the screen is. */
.site-header .wrap { max-width: none; padding: 0 40px; }
.site-header__inner { display: flex; align-items: center; gap: 26px; min-height: 94px; }

/* Staff bar: three columns with equal outer tracks, so the nav sits dead centre
   in the bar rather than centred in whatever space the brand and button leave
   over - which, with one short link, looked noticeably off. */
.site-header__inner--staff {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.site-header__inner--staff .brand { min-width: 0; }
.site-header__inner--staff .nav { margin: 0; justify-content: center; }
.site-header__inner--staff .site-header__actions { margin: 0; justify-self: end; }

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand__home { display: flex; text-decoration: none; }
.brand__title { text-decoration: none; }
.brand__logo {
  width: 58px; height: 58px; object-fit: contain;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 3px;
}
.brand__text { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; }

/* the wordmark - reads as a title, not a label */
.brand__title {
  font-family: var(--font-display);
  font-size: 1.62rem; font-weight: 700;
  letter-spacing: .045em; text-transform: uppercase;
  white-space: nowrap;            /* never let the server name wrap */
  background: linear-gradient(100deg, #ffffff 42%, var(--red-bright));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* tagline + live counters, all on one small line under the wordmark */
.brand__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px;
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.brand__meta > .is-first-visible::before { content: none; }
.brand__meta > * + *::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px; margin-right: 9px; vertical-align: middle;
  border-radius: 50%; background: currentColor; opacity: .45;
}

/* --- "Our network" dropdown --- */

.dropdown { position: relative; }
.dropdown__toggle { gap: 8px; }

/* the two marks that say what "Connect" means, before you open it */
.connect__marks { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.dropdown__mark { display: block; }
.dropdown__mark--discord { width: 15px; height: 15px; }
.dropdown__mark--fivem   { width: 13px; height: 13px; }  /* taller glyph, so smaller */
.dropdown__menu--connect { min-width: 306px; }

/* --- account control --- */
.account.is-signed-in .dropdown__toggle { border-color: var(--ember-dim); }
.account [data-account-label] { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }

.dropdown__empty {
  padding: 10px 12px;
  color: var(--text-faint); font-size: .78rem; line-height: 1.5;
}

.account__who {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}
.account__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); flex: none;
}
.account__names { display: grid; gap: 1px; min-width: 0; }
.account__names strong {
  font-family: var(--font-display); font-size: .9rem; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account__names small { font-size: .74rem; color: var(--text-faint); }
.account__badge {
  margin-left: auto; flex: none;
  padding: 3px 9px;
  font-family: var(--font-display);
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red-bright);
  background: rgba(217, 43, 43, .1);
  border: 1px solid rgba(217, 43, 43, .3);
  border-radius: 999px;
}
.account__emoji { font-size: .95rem; line-height: 1; }

/* the sign-out and unlink rows are buttons, not links */
.dropdown__menu button.dropdown__item {
  width: 100%; text-align: left;
  font: inherit; background: none; border: 0; cursor: pointer;
}
.dropdown__menu--connect .dropdown__icon--fallback { color: var(--text-dim); }
.dropdown__menu--connect .dropdown__item:hover .dropdown__icon--fallback { color: var(--red-bright); }
/* no lift on the menu button - it sits still while its menu is open */
.dropdown__toggle:hover:not(:disabled) { transform: none; }
.btn__icon { width: 16px; height: 16px; flex: none; }
.dropdown__chevron {
  width: 13px; height: 13px; flex: none;
  transition: transform .2s ease;
}
.dropdown.is-open .dropdown__chevron { transform: rotate(180deg); }

.dropdown__menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 320px; padding: 7px;
  display: grid; gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.dropdown__item {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px;
  padding: 9px 11px;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background .16s ease;
}
.dropdown__text { display: grid; gap: 1px; min-width: 0; }
.dropdown__icon {
  width: 34px; height: 34px; flex: none;
  object-fit: contain;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
}
/* no artwork for this server yet - show a Discord mark instead */
.dropdown__icon--fallback {
  display: grid; place-items: center;
  color: var(--text-faint);
}
.dropdown__icon--fallback svg { width: 18px; height: 18px; }
/* background-COLOR, not the `background` shorthand. The shorthand also resets
   background-size and background-position, and being more specific than
   .dropdown__item--banner it won on hover - snapping the artwork from
   cover/center to its natural size at the top-left corner. That is the zoom. */
.dropdown__item:hover { background-color: rgba(217, 43, 43, .13); }

/* --- banner card: the server's own artwork fills the row --- */
.dropdown__item--banner {
  position: relative; overflow: hidden;
  grid-template-columns: 1fr;          /* no icon column - the art is the row */
  align-content: center;
  min-height: 70px;
  padding: 12px 16px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
}
/* Scrim fades left to right: the label sits on solid dark, while the artwork
   stays readable on the right. Two of these banners carry their own wordmark,
   so covering the whole image would just hide the branding twice over. */
.dropdown__item--banner::before {
  content: "";
  position: absolute; inset: 0;
  /* Subdued at rest - the artwork reads as texture behind the label rather
     than competing with it - then lifts on hover. */
  background: linear-gradient(90deg,
    rgba(8, 5, 6, .95) 0%, rgba(8, 5, 6, .80) 42%, rgba(8, 5, 6, .48) 100%);
  transition: opacity .2s ease;
}
.dropdown__item--banner > * { position: relative; z-index: 1; }
.dropdown__item--banner:hover { background-color: transparent; }
/* The artwork stays exactly as it is on hover - no brightening, no scaling.
   Feedback comes from the border and the label instead, so nothing behind the
   text appears to shift or grow. */
.dropdown__item--banner:hover { border-color: var(--red); }
.dropdown__item--banner .dropdown__label { font-size: .95rem; }
.dropdown__item--banner .dropdown__note { color: var(--text-dim); }
.dropdown__item:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }
.dropdown__label {
  font-family: var(--font-display);
  font-size: .89rem; font-weight: 600; color: var(--text);
}
.dropdown__item:hover .dropdown__label { color: var(--red-bright); }
.dropdown__note { font-size: .75rem; color: var(--text-faint); }

@media (max-width: 1220px) {
  /* the bar is centred on its own row down here, so anchor the menu left */
  .dropdown__menu { right: auto; left: 0; }
}

/* marks the staff side of the site in place of the store's live counters */
.brand__badge {
  padding: 3px 9px;
  font-size: .62rem; letter-spacing: .16em;
  color: var(--red-bright);
  background: rgba(217, 43, 43, .1);
  border: 1px solid rgba(217, 43, 43, .3);
  border-radius: 999px;
}
.brand__meta > .brand__badge::before { content: none; }

/* --- social icons under the wordmark --- */
.socials { display: inline-flex; align-items: center; gap: 3px; }
.social {
  display: grid; place-items: center;
  /* kept close to the cap height of the text beside it, so the row reads as
     one straight line rather than a tall icon next to small caps */
  width: 20px; height: 20px;
  color: var(--text-faint);
  border-radius: 5px;
  transition: color .18s ease, background .18s ease, transform .14s ease;
}
/* Optical sizing, twice over.

   1. Each brand mark fills its 24x24 viewBox by a different amount - TikTok's
      ink is ~99% of the height, Discord's ~76%, YouTube's ~71% - so one shared
      size makes them look staggered even though the boxes line up exactly.
      These sizes give all three the same ink height.
   2. That ink height is matched to the CAP height of the text beside it, not
      to its line box, and nudged up to sit on the same optical centre. Centring
      on the line box puts the icons visibly low, because a line box extends
      below the baseline and capitals do not. */
.social svg { display: block; transform: translateY(-0.5px); }
.social--tiktok  svg { width: 9px;    height: 9px; }
.social--discord svg { width: 11.5px; height: 11.5px; }
.social--youtube svg { width: 12.5px; height: 12.5px; }

/* no URL configured yet - visible, but clearly not a link */
.social--unset { opacity: .32; cursor: default; }
.social--unset:hover { background: none; transform: none; color: var(--text-faint); }
.btn.is-unset { opacity: .4; cursor: default; pointer-events: none; }
.social:hover { background: rgba(255, 255, 255, .06); transform: translateY(-1px); }
/* each mark lights up in its own brand colour */
.social--discord:hover { color: #7e8cff; }
.social--tiktok:hover  { color: #ff4f7b; }
.social--youtube:hover { color: #ff4d4d; }
.social:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

.stat { display: inline-flex; align-items: center; }
.stat[hidden] { display: none; }
.stat b { color: var(--text-dim); font-weight: 700; margin-right: .4em; }
.stat__dot {
  width: 6px; height: 6px; margin-right: 6px; border-radius: 50%;
  background: #47d16c;
  box-shadow: 0 0 7px rgba(71, 209, 108, .75);
  animation: pulse 2.6s ease-in-out infinite;
}
.stat__dot--discord {
  background: var(--ember);
  box-shadow: 0 0 7px var(--ember-glow);
  animation: none;
}

/* auto margins both sides: the links centre in whatever space is left between
   the brand and the buttons, rather than bunching against the buttons */
.nav { display: flex; gap: 1px; margin: 0 auto; }
.nav a {
  position: relative;
  padding: 11px 16px;
  font-family: var(--font-display);
  font-size: .97rem; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
  white-space: nowrap;            /* "Donator cars" stays on one line */
  border-radius: 6px;
  transition: color .18s ease;
}
.nav a::after {
  content: "";
  position: absolute; left: 16px; right: 16px; bottom: 3px; height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { transform: scaleX(1); }

/* active page: colour and rule only - no filled chip, it reads cleaner */
.nav a.is-active { color: var(--red-bright); }
.nav a.is-active::after { transform: scaleX(1); }

.site-header__actions { display: flex; gap: 8px; margin-left: auto; flex: none; }
.nav + .site-header__actions { margin-left: 0; }

/* header buttons sit smaller than body buttons */
.site-header__actions .btn {
  padding: 13px 22px;
  font-size: .9rem; letter-spacing: .07em;
}

/* ============================================================================
   BANNER / NOTICES
   ========================================================================== */

.banner {
  margin-top: 18px; padding: 13px 18px;
  background: var(--danger-bg);
  border: 1px solid rgba(255, 107, 107, .32);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  color: #ffc9c9; font-size: .92rem;
}

.notice {
  grid-column: 1 / -1;
  padding: 26px; text-align: center;
  color: var(--text-dim);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.notice--error {
  text-align: left;
  border: 1px solid rgba(255, 107, 107, .35);
  border-left: 3px solid var(--danger);
  background: var(--danger-bg);
  color: #ffc9c9;
}

/* ============================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative; overflow: hidden;
  padding: 104px 0 88px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
  /* Server artwork sits behind the hero, heavily dimmed so it reads as
     atmosphere. It carries its own wordmark, so it must stay well back of the
     headline rather than competing with it. */
  background:
    radial-gradient(760px 380px at 50% -10%, rgba(217, 43, 43, .16), transparent 70%),
    linear-gradient(180deg, rgba(10, 7, 8, .82) 0%, rgba(10, 7, 8, .93) 55%, var(--bg-alt) 100%),
    url("../images/web/banner-1920.jpg") center / cover no-repeat,
    linear-gradient(180deg, var(--bg), var(--bg-alt));
}
/* smaller screens get a smaller file - no point shipping 1920px to a phone */
@media (max-width: 1200px) {
  .hero { background-image:
    radial-gradient(760px 380px at 50% -10%, rgba(217, 43, 43, .16), transparent 70%),
    linear-gradient(180deg, rgba(10, 7, 8, .82) 0%, rgba(10, 7, 8, .93) 55%, var(--bg-alt) 100%),
    url("../images/web/banner-1200.jpg"),
    linear-gradient(180deg, var(--bg), var(--bg-alt)); }
}
@media (max-width: 760px) {
  .hero { background-image:
    radial-gradient(760px 380px at 50% -10%, rgba(217, 43, 43, .16), transparent 70%),
    linear-gradient(180deg, rgba(10, 7, 8, .84) 0%, rgba(10, 7, 8, .94) 55%, var(--bg-alt) 100%),
    url("../images/web/banner-760.jpg"),
    linear-gradient(180deg, var(--bg), var(--bg-alt)); }
}
.hero__inner { position: relative; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px; margin-bottom: 22px;
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--red-bright);
  background: rgba(217, 43, 43, .07);
  border: 1px solid rgba(217, 43, 43, .25);
  border-radius: 999px;
}
.hero__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  animation: pulse 2.4s ease-in-out infinite;
}

.hero__title {
  font-size: clamp(3.2rem, 10vw, 6rem);
  letter-spacing: -.03em;
  background: linear-gradient(175deg, #ffffff 20%, var(--red-bright) 62%, var(--red-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* no drop-shadow filter here - a 40px blur over text this large is costly to
     rasterise, and the hero already has a radial glow behind it */
}
.hero__sub {
  max-width: 650px; margin: 22px auto 0;
  color: var(--text-dim); font-size: 1.08rem;
}
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }

.hero__trust {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 32px;
  color: var(--text-faint); font-size: .84rem;
}
.hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ember); box-shadow: 0 0 8px var(--ember-glow);
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================================
   PAGE HERO  (compact hero used on every page except home)
   ========================================================================== */

.pagehero {
  position: relative; overflow: hidden;
  padding: 76px 0 60px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(620px 260px at 50% -20%, rgba(217, 43, 43, .13), transparent 70%),
    linear-gradient(180deg, var(--bg), var(--bg-alt));
}.pagehero__inner { position: relative; }
.pagehero .eyebrow { display: block; margin-bottom: 14px; }
.pagehero h1 {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  letter-spacing: -.02em;
  background: linear-gradient(175deg, #ffffff 25%, var(--red-bright) 75%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pagehero p { max-width: 640px; margin: 18px auto 0; color: var(--text-dim); }

/* jump links for a page that carries several sections */
.jumpnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 26px; }
.jumpnav a {
  padding: 9px 17px;
  font-family: var(--font-display);
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.jumpnav a:hover {
  color: #fff; border-color: var(--red); background: rgba(217, 43, 43, .12);
}
.jumpnav a:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* sections land clear of the sticky header when jumped to */
#ranks-section, #cars-section, #shop, #about { scroll-margin-top: 110px; }

/* ============================================================================
   HOME TILES
   ========================================================================== */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 20px;
}

.tile {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px 26px;
  text-decoration: none;
  background: linear-gradient(180deg, var(--surface), var(--bg-alt));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1),
              border-color .22s ease, box-shadow .22s ease;
}
.tile::after {
  content: "";
  position: absolute; top: -1px; right: -1px;
  width: 16px; height: 16px;
  border: 1px solid var(--red-deep);
  border-left: 0; border-bottom: 0;
  border-radius: 0 var(--radius) 0 0;
  opacity: .5;
  transition: opacity .22s ease, width .22s ease, height .22s ease;
}
.tile:hover {
  transform: translateY(-5px);
  border-color: rgba(217, 43, 43, .42);
  box-shadow: var(--shadow);
}
.tile:hover::after { opacity: 1; width: 24px; height: 24px; }

.tile__title { font-size: 1.25rem; }
.tile__body { margin-top: 10px; color: var(--text-dim); font-size: .93rem; }
.tile__go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--red);
  transition: gap .2s ease;
}
.tile__go::after {
  content: ""; width: 7px; height: 7px;
  border: solid currentColor; border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg);
}
.tile:hover .tile__go { gap: 13px; color: var(--red-bright); }

/* ============================================================================
   OFFICIAL STORE NOTICE
   ========================================================================== */

/* Block, not flex: a flex container would split the <strong> and the text that
   follows it into two separate columns. */
.official {
  position: relative;
  max-width: 620px; margin: 26px auto 0;
  padding: 13px 18px 13px 46px;
  text-align: left;
  color: var(--text-dim); font-size: .88rem; line-height: 1.5;
  background: rgba(217, 43, 43, .06);
  border: 1px solid rgba(217, 43, 43, .22);
  border-radius: var(--radius-sm);
}
.official::before {
  content: "";
  position: absolute; left: 17px; top: 15px;
  width: 17px; height: 17px;
  background-color: var(--red-bright);
  /* shield tick */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5.5v6c0 4.6 3.2 8.9 8 10.5 4.8-1.6 8-5.9 8-10.5v-6z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='m8.6 11.8 2.4 2.4 4.4-4.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5.5v6c0 4.6 3.2 8.9 8 10.5 4.8-1.6 8-5.9 8-10.5v-6z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='m8.6 11.8 2.4 2.4 4.4-4.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.official strong { color: var(--text); font-weight: 600; }
.official--wide { max-width: 760px; margin-bottom: 30px; }

/* ============================================================================
   SECTIONS
   ========================================================================== */

.section { padding: 88px 0; }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line-soft); }

.section__head { max-width: 680px; margin: 0 auto 46px; text-align: center; }
.section__head h2 { font-size: clamp(1.9rem, 4.2vw, 2.5rem); }
.section__head .eyebrow { display: block; margin-bottom: 14px; }
.section__head p { margin-top: 14px; color: var(--text-dim); }

.section__foot { margin-top: 36px; text-align: center; color: var(--text-faint); font-size: .88rem; }
.section__foot a { color: var(--red); text-decoration: none; border-bottom: 1px solid rgba(217, 43, 43, .35); }
.section__foot a:hover { color: var(--red-bright); }

/* ============================================================================
   PACKAGE CARDS
   ========================================================================== */

.packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 24px;
  max-width: 820px; margin: 0 auto;
}

.pack {
  position: relative;
  display: flex; flex-direction: column;
  padding: 34px 28px 28px;
  text-align: center;
  background:
    radial-gradient(420px 220px at 50% 0%, rgba(217, 43, 43, .07), transparent 70%),
    linear-gradient(180deg, var(--surface), var(--bg-alt));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1),
              border-color .22s ease, box-shadow .22s ease;
}
/* corner brackets */
.pack::before, .pack::after {
  content: "";
  position: absolute; width: 16px; height: 16px;
  border: 1px solid var(--red-deep);
  opacity: .55;
  transition: opacity .22s ease, width .22s ease, height .22s ease;
}
.pack::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: var(--radius) 0 0 0; }
.pack::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 var(--radius) 0; }
.pack:hover::before, .pack:hover::after { opacity: 1; width: 24px; height: 24px; }

.pack:hover {
  transform: translateY(-5px);
  border-color: rgba(217, 43, 43, .4);
  box-shadow: var(--shadow), 0 0 32px rgba(217, 43, 43, .1);
}

.pack--best {
  border-color: rgba(217, 43, 43, .55);
  box-shadow: 0 0 0 1px rgba(217, 43, 43, .12), var(--shadow);
}

.pack__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 6px 16px;
  font-family: var(--font-display);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: #fff; white-space: nowrap;
  background: linear-gradient(140deg, var(--red-bright), var(--red));
  border-radius: 999px;
  box-shadow: 0 4px 18px var(--red-glow);
}

.pack__img {
  width: 84px; height: 84px; object-fit: contain;
  margin: 4px auto 16px;
  filter: drop-shadow(0 6px 18px rgba(217, 43, 43, .3));
}
.pack__name { font-size: 1.65rem; letter-spacing: .01em; }
.pack__tagline {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint);
}

.pack__price { margin: 20px 0 16px; }
.pack__amount {
  display: block;
  font-family: var(--font-display);
  font-size: 2.3rem; font-weight: 700;
  color: var(--red-bright);
  text-shadow: 0 0 30px rgba(217, 43, 43, .28);
}
.pack__rate { display: block; margin-top: 5px; color: var(--text-faint); font-size: .8rem; }

/* --- quantity stepper --- */
.qty {
  display: flex; align-items: center; justify-content: center; gap: 0;
  width: max-content; margin: 0 auto 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.qty__btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font: 700 1.2rem/1 var(--font-display);
  color: var(--text-dim);
  background: transparent; border: 0; border-radius: 50%;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
.qty__btn:hover:not(:disabled) { background: rgba(217, 43, 43, .14); color: var(--red-bright); }
.qty__btn:active:not(:disabled) { transform: scale(.9); }
.qty__btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
.qty__btn:disabled { opacity: .3; cursor: not-allowed; }

.qty__value {
  min-width: 42px;
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.qty__label {
  display: block;
  font-family: var(--font-display);
  font-size: .62rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.pack__perks {
  list-style: none; margin: 0 0 24px; padding: 20px 0 0;
  border-top: 1px solid var(--line-soft);
  text-align: left; display: grid; gap: 11px;
}
.pack__perks li {
  position: relative; padding-left: 28px;
  color: var(--text-dim); font-size: .92rem;
}
.pack__perks li::before {
  content: "";
  position: absolute; left: 0; top: .3em;
  width: 16px; height: 16px; border-radius: 4px;
  background: rgba(217, 43, 43, .12);
  border: 1px solid rgba(217, 43, 43, .3);
}
.pack__perks li::after {
  content: "";
  position: absolute; left: 5px; top: .55em;
  width: 5px; height: 8px;
  border: solid var(--red-bright);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.pack__redeem { margin-top: 15px; color: var(--text-faint); font-size: .79rem; }

/* ============================================================================
   CATEGORY BLOCKS  (one per Tebex category: Coins, ranks, vehicles, ...)
   ========================================================================== */

.catblock + .catblock { margin-top: 64px; }

.catblock__head {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 26px;
}
/* rules on both sides so the heading sits centred over the cards */
.catblock__head::before,
.catblock__head::after {
  content: ""; flex: 1; height: 1px;
}
.catblock__head::before { background: linear-gradient(90deg, transparent, var(--line)); }
.catblock__head::after  { background: linear-gradient(90deg, var(--line), transparent); }
.catblock__title {
  font-size: 1.3rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.catblock__count {
  padding: 4px 11px;
  font-family: var(--font-display);
  font-size: .7rem; font-weight: 600; letter-spacing: .12em;
  color: var(--red); white-space: nowrap;
  background: rgba(217, 43, 43, .08);
  border: 1px solid rgba(217, 43, 43, .24);
  border-radius: 999px;
}
.catblock__desc {
  max-width: 680px; margin: -14px auto 26px;
  color: var(--text-dim); font-size: .95rem; text-align: center;
}
.catblock__desc p { margin: 0; }
.catblock__desc p + p { margin-top: 8px; }

/* ============================================================================
   VIP RANKS
   ========================================================================== */

.ranks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  align-items: start;
}

.rank {
  --accent: var(--red);
  --accent-soft: rgba(217, 43, 43, .12);
  position: relative;
  display: flex; flex-direction: column;
  padding: 0;                    /* the header band bleeds to the card edges */
  background: linear-gradient(180deg, var(--surface), var(--bg-alt));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1),
              border-color .22s ease, box-shadow .22s ease;
}
/* accent strip along the top edge */
.rank::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: var(--radius) var(--radius) 0 0;
}
.rank:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

/* Tier accents are the real colour of each name - the metal or the stone -
   rather than the site red. Set per rank via `accent` in config.js. */
.rank--bronze   { --accent: #cd8340; --accent-soft: rgba(205, 131, 64, .16); }
.rank--silver   { --accent: #c6d0dd; --accent-soft: rgba(198, 208, 221, .14); }
.rank--gold     { --accent: #eab73c; --accent-soft: rgba(234, 183, 60, .16); }
.rank--platinum { --accent: #7cc7ee; --accent-soft: rgba(124, 199, 238, .16); }
.rank--diamond  { --accent: #4a7fd4; --accent-soft: rgba(74, 127, 212, .18); }

/* spares, in the site palette, for any tier that is not a metal */
.rank--scarlet  { --accent: var(--red-bright); --accent-soft: rgba(255, 92, 77, .14); }
.rank--ember    { --accent: var(--ember); --accent-soft: rgba(255, 122, 122, .12); }

/* ============================================================================
   RANK DECK  (the grid above, upgraded by JS into a flick-through stack)
   ========================================================================== */

.ranks--deck {
  --deck-gap: 78;               /* % of card width between neighbours - read by JS */
  position: relative;
  grid-template-columns: 1fr;   /* every card shares one cell */
  overflow-x: clip;             /* side cards must not widen the page */
  overflow-y: visible;          /* ...but the "most popular" badge still overhangs */

  /* The clip above used to slice the outermost cards off with a hard vertical
     edge, which looked broken. Fading them out instead makes the boundary read
     as depth. Static, so it costs nothing to keep. */
  -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%);
  padding-block: 20px 6px;
  /* no dragging any more - the deck advances on its own */
  cursor: default;
  -webkit-user-select: none; user-select: none;
}
.ranks--deck:focus-visible {
  outline: 2px solid var(--ember); outline-offset: 10px; border-radius: var(--radius);
}

.ranks--deck .rank {
  grid-area: 1 / 1;
  /* 340 rather than 360: with five cards the pair two-deep has to fit inside
     the wide container, or the mask eats them */
  width: min(340px, 100%);
  justify-self: center;
  transition: transform .45s cubic-bezier(.22, .85, .28, 1),
              opacity .35s ease, box-shadow .3s ease;
}
/* while a finger or mouse is down the cards must track it exactly, not ease */
.ranks--deck.is-dragging .rank { transition: none; }

.ranks--deck .rank:not(.is-active) { pointer-events: none; }
.ranks--deck .rank.is-active {
  box-shadow: var(--shadow), 0 0 46px var(--accent-soft);
}

/* --- deck controls --- */

.deck__controls {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 30px;
}

.deck__btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease,
              background .18s ease, transform .14s ease;
}
.deck__btn svg { width: 20px; height: 20px; }
.deck__btn:hover {
  color: #fff; border-color: var(--red);
  background: rgba(217, 43, 43, .14);
  transform: translateY(-2px);
}
.deck__btn:active { transform: translateY(0) scale(.94); }
.deck__btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* one icon at a time - pause while running, play once stopped */
.deck__btn .deck__play { display: none; }
.deck__controls.is-paused .deck__pause { display: none; }
.deck__controls.is-paused .deck__play { display: block; }
.deck__controls.is-paused .deck__btn { color: var(--red-bright); border-color: var(--ember-dim); }

@media (max-width: 760px) {
  .ranks--deck { --deck-gap: 52; }
  .ranks--deck .rank { width: min(320px, 86%); }
}

.rank--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow); }

.rank__badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 5px 14px;
  font-family: var(--font-display);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  /* dark text - silver, gold and light blue accents cannot carry white */
  color: #12100f; white-space: nowrap;
  background: var(--accent);
  border-radius: 999px;
}

/* each tier's own header band, tinted with its accent */
.rank__head {
  padding: 26px 26px 20px;
  background:
    linear-gradient(180deg, var(--accent-soft), transparent 88%),
    linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 40%);
  border-bottom: 1px solid var(--line-soft);
  border-radius: var(--radius) var(--radius) 0 0;
}

.rank__body {
  display: flex; flex-direction: column; flex: 1;
  padding: 22px 26px 26px;
}

.rank__name {
  font-size: 1.45rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
}

.rank__cost {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.rank__cost small {
  display: block; margin-top: 2px;
  font-size: .66rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
}

.rank__perks {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; gap: 11px;
}
.rank__perks li {
  position: relative; padding-left: 24px;
  color: var(--text-dim); font-size: .92rem;
}
.rank__perks li::before {
  content: "";
  position: absolute; left: 2px; top: .52em;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-soft);
}

.rank__cta { margin-top: auto; width: 100%; }

.ranks__note {
  margin-top: 26px; text-align: center;
  color: var(--text-faint); font-size: .86rem;
}

/* ============================================================================
   TABS  (donator car rotation switcher)
   ========================================================================== */

.tabs {
  display: inline-flex; gap: 4px;
  padding: 5px;
  margin: 0 auto 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.tab {
  position: relative;
  padding: 10px 24px;
  font-family: var(--font-display);
  font-size: .84rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim);
  background: transparent; border: 0; border-radius: 999px;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.tab:hover { color: var(--text); }
.tab:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.tab[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(140deg, var(--red-bright), var(--red));
  box-shadow: 0 4px 16px var(--red-glow);
}

.tabs-wrap { text-align: center; }

.rotation__meta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-bottom: 34px;
  color: var(--text-faint); font-size: .84rem;
}
.rotation__meta::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ember); box-shadow: 0 0 9px var(--ember-glow);
  animation: pulse 2.4s ease-in-out infinite;
}

/* ============================================================================
   DONATOR CARS
   ========================================================================== */

.cars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.car {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--surface), var(--bg-alt));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1),
              border-color .22s ease, box-shadow .22s ease;
}
.car:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 122, 122, .34);
  box-shadow: var(--shadow), 0 0 34px rgba(255, 122, 122, .1);
}

.car__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(420px 180px at 50% 120%, rgba(255, 122, 122, .14), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--bg));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.car__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s cubic-bezier(.2, .8, .3, 1);
}
.car:hover .car__img { transform: scale(1.05); }

/* placeholder shown when a car has no image yet */
.car__ph {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: 10px;
  align-content: center;
  color: var(--text-faint);
}
.car__ph svg { width: 58px; height: 58px; opacity: .45; }
.car__ph span {
  font-family: var(--font-display);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
}

.car__flag {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 12px;
  font-family: var(--font-display);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(140deg, var(--red-bright), var(--red));
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.car__flag--ember {
  color: #3d0a0a;
  background: linear-gradient(140deg, #ffb3b3, var(--ember));
}

.car__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.car__name { font-size: 1.2rem; }
.car__make {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
}
.car__note { margin-top: 12px; color: var(--text-dim); font-size: .9rem; }

.car__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.tag {
  padding: 4px 10px;
  font-family: var(--font-display);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ember);
  background: rgba(255, 122, 122, .08);
  border: 1px solid rgba(255, 122, 122, .22);
  border-radius: 5px;
}

.car__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.car__cost {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 700;
  color: var(--red-bright);
  font-variant-numeric: tabular-nums;
}
.car__cost small {
  display: block;
  font-size: .66rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint);
}

/* ============================================================================
   FACTS
   ========================================================================== */

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

.fact {
  position: relative;
  padding: 30px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .22s ease, transform .22s ease;
}
.fact::before {
  content: "";
  position: absolute; top: 0; left: 26px; right: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember-dim), transparent);
  opacity: 0; transition: opacity .25s ease;
}
.fact:hover { border-color: rgba(255, 122, 122, .3); transform: translateY(-3px); }
.fact:hover::before { opacity: 1; }

.fact__icon {
  width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: 11px;
  background-color: rgba(255, 122, 122, .09);
  border: 1px solid rgba(255, 122, 122, .24);
  background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
}
.fact__icon[data-icon="account"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a7a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.fact__icon[data-icon="shop"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a7a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18l-1.5 11a2 2 0 0 1-2 2H6.5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M8 9V6a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
.fact__icon[data-icon="server"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a7a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='2'/%3E%3Crect x='3' y='13' width='18' height='7' rx='2'/%3E%3Cpath d='M7 8h.01M7 17h.01'/%3E%3C/svg%3E");
}
.fact__title { font-size: 1.12rem; }
.fact__body { margin-top: 10px; color: var(--text-dim); font-size: .93rem; }

/* ============================================================================
   COIN SHOP LIST
   ========================================================================== */

/* All four groups sit on one row on a desktop, then halve, then stack.
   minmax(0, 1fr) rather than auto-fit so the count is predictable - auto-fit
   was giving three across and dropping the fourth onto a lonely second row. */
.shop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;   /* equal-height cards - ragged bottoms read as broken */
}
@media (max-width: 1240px) { .shop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .shop { grid-template-columns: 1fr; } }
.shop__group {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.shop__group-title {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(90deg, var(--surface-2), transparent);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--red);
}
.shop__group-title::before {
  content: ""; width: 3px; height: 15px; border-radius: 2px;
  background: var(--red); box-shadow: 0 0 10px var(--red-glow);
}

.shop__list { list-style: none; margin: 0; padding: 4px 0; }
.shop__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  transition: background .16s ease;
}
.shop__row:last-child { border-bottom: 0; }
.shop__row:hover { background: rgba(255, 255, 255, .022); }

.shop__name { font-size: .92rem; font-weight: 500; text-wrap: pretty; }
.shop__note { display: block; margin-top: 3px; color: var(--text-faint); font-size: .83rem; font-weight: 400; }
.shop__cost { flex: none; white-space: nowrap; color: var(--text-faint); font-size: .8rem; }
.shop__cost span {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  color: var(--red-bright);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   STEPS
   ========================================================================== */

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 18px;
}
.step {
  position: relative;
  padding: 26px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 15px;
  border-radius: 9px;
  background: rgba(217, 43, 43, .1);
  border: 1px solid rgba(217, 43, 43, .3);
  color: var(--red-bright);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
}
.step p { color: var(--text-dim); font-size: .93rem; }

/* ============================================================================
   FAQ
   ========================================================================== */

.faq__item {
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .2s ease;
}
.faq__item:hover { border-color: rgba(255, 122, 122, .25); }
.faq__item[open] { border-color: rgba(217, 43, 43, .32); }

.faq__item summary {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 17px 20px;
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none;
  width: 9px; height: 9px; margin-top: 6px;
  border: solid var(--red);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform .22s ease;
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__answer { padding: 0 20px 18px; color: var(--text-dim); font-size: .93rem; }

/* ============================================================================
   FOOTER
   ========================================================================== */

.site-footer { padding: 56px 0 40px; background: var(--bg-alt); border-top: 1px solid var(--line-soft); }
.site-footer__inner { display: grid; gap: 26px; justify-items: center; text-align: center; }
.site-footer__brand {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  /* wide enough for the slogan to sit on one line - at 480px it broke after
     "that" and left "echo." stranded on a line of its own */
  max-width: 720px;
}
.site-footer__brand strong { font-family: var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.site-footer__brand p {
  margin-top: 6px; color: var(--text-faint); font-size: .88rem;
  text-wrap: pretty;              /* no orphan if it ever does wrap */
}
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.site-footer__links a {
  font-family: var(--font-display);
  font-size: .84rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
}
.site-footer__links a:hover { color: var(--red-bright); }
.site-footer__legal {
  width: 100%; padding-top: 22px; border-top: 1px solid var(--line-soft);
  color: var(--text-faint); font-size: .81rem;
}

/* ============================================================================
   SWEEPING COLOUR GRADE
   Shared by the wordmark and the big page titles. The gradient is far wider
   than the text and slides, so a light sheen travels across the letters.
   Declared late so it wins over the flat gradients set on each of these.
   ========================================================================== */

.brand__title,
.hero__title,
.pagehero h1 {
  /* Two layers, both clipped to the text:
       1. a narrow highlight that sweeps across, then parks off-screen
       2. the static base gradient underneath, which is the resting look

     Why not just animate one gradient slowly? `background-clip: text` forces a
     re-raster of the glyphs on every frame, and at a slow speed the position
     moves a fraction of a pixel per frame, so Chrome snaps it to whole pixels.
     That reads as flicker, not motion - and it is worse without a GPU.

     Sweeping quickly and then resting fixes both: the movement is several
     pixels per frame while it runs, and between sweeps nothing repaints. */
  background-image:
    linear-gradient(100deg,
      transparent 38%,
      rgba(255, 255, 255, .92) 50%,
      transparent 62%),
    linear-gradient(175deg,
      #ffffff 18%,
      var(--red-bright) 62%,
      var(--red) 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 260% center, center;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;   /* steadier than `color` alone here */
  animation: shine 9s linear infinite;
}

/* the wordmark is on screen constantly - let it rest for longer between sweeps */
.brand__title { animation-duration: 16s; }

/* the sweep runs left to right over the first fifth, then parks for the rest */
@keyframes shine {
  0%   { background-position: 260% center, center; }
  20%  { background-position: -60% center, center; }
  100% { background-position: -60% center, center; }
}

/* ============================================================================
   STAFF HANDBOOK
   ========================================================================== */

.gate {
  max-width: 520px; margin: 0 auto; padding: 40px 32px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.gate__icon {
  width: 54px; height: 54px; margin: 0 auto 22px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5c4d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7.6a4 4 0 0 1 8 0v2.9'/%3E%3C/svg%3E")
    center / 26px 26px no-repeat,
    rgba(217, 43, 43, .08);
  border: 1px solid rgba(217, 43, 43, .28);
}
.gate__title { font-size: 1.35rem; }
.gate__body { margin: 12px auto 26px; max-width: 420px; color: var(--text-dim); font-size: .95rem; }

.staffbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 30px; padding: 13px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.staffbar__who { color: var(--text-dim); font-size: .9rem; }
.staffbar__who strong { color: var(--text); }

.staffnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.staffnav a {
  padding: 7px 14px;
  font-family: var(--font-display);
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.staffnav a:hover { color: #fff; border-color: var(--red); background: rgba(217, 43, 43, .1); }

.doc {
  padding: 28px 0;
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 110px;     /* clears the sticky header when jumped to */
}
.doc:first-child { border-top: 0; padding-top: 6px; }
.doc__title { font-size: 1.3rem; color: var(--red-bright); }
.doc__summary {
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint);
}
.doc__body { margin-top: 16px; color: var(--text-dim); font-size: .96rem; }
.doc__body p + p, .doc__body ul, .doc__body ol { margin-top: 12px; }
.doc__body ul, .doc__body ol { padding-left: 20px; display: grid; gap: 8px; }
.doc__body li::marker { color: var(--red); }
.doc__body strong { color: var(--text); }

/* ============================================================================
   OVERLAY
   ========================================================================== */

.overlay {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 24px;
  background: rgba(7, 4, 5, .96);
}
.overlay[hidden] { display: none; }
.overlay__card {
  max-width: 400px; text-align: center;
  padding: 40px 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.overlay__card h2 { margin-top: 22px; font-size: 1.3rem; }
.overlay__card p { margin-top: 10px; color: var(--text-dim); font-size: .93rem; }

.spinner {
  width: 40px; height: 40px; margin: 0 auto;
  border: 3px solid var(--line);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================================
   SUCCESS PAGE
   ========================================================================== */

.success { padding: 120px 0 90px; text-align: center; }
.success__mark {
  width: 78px; height: 78px; margin: 0 auto 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(217, 43, 43, .1);
  border: 1px solid rgba(217, 43, 43, .35);
  box-shadow: 0 0 40px rgba(217, 43, 43, .18);
  color: var(--red-bright); font-size: 2rem;
}
.success h1 { font-size: clamp(2.1rem, 5vw, 3rem); }
.success__sub { max-width: 560px; margin: 16px auto 0; color: var(--text-dim); }
.success__card {
  max-width: 580px; margin: 38px auto 0; text-align: left;
  padding: 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.success__card h2 { margin-bottom: 20px; font-size: 1.15rem; }
.success__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */

/* nav drops to its own scrollable row rather than disappearing */
@media (max-width: 1220px) {
  .site-header .wrap { padding: 0 24px; }
  .site-header__inner { flex-wrap: wrap; min-height: 0; padding-block: 12px; row-gap: 8px; gap: 14px; }
  .nav {
    order: 3; width: 100%; margin: 0; gap: 2px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  /* must out-specify the `.nav + .site-header__actions` reset above,
     or the buttons bunch up against the brand instead of sitting right */
  .nav + .site-header__actions { margin-left: auto; }
}

/* on a phone the ghost button is the first thing to go - Discord is still in
   the footer, and Connect is the one that matters */
@media (max-width: 560px) {
  .site-header__actions [data-cfg-discord] { display: none; }
  .site-header__actions .btn { padding: 9px 13px; font-size: .74rem; }
}

@media (max-width: 620px) {
  .wrap { padding: 0 18px; }
  .hero { padding: 68px 0 58px; }
  .section { padding: 62px 0; }
  .site-header__inner { min-height: 66px; gap: 10px; }
  .brand__tagline { display: none; }   /* keep the live counts, drop the tagline */
  .shop__row { flex-direction: column; gap: 4px; }
  .shop__cost { align-self: flex-start; }
  .btn--lg { padding: 13px 22px; font-size: .9rem; }
  .hero__actions .btn, .success__actions .btn { flex: 1 1 100%; }
  .pack { padding: 30px 22px 24px; }
}

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

  /* Deliberate exception: without this the rank cards teleport between
     positions instead of sliding, which looks broken rather than calm. Kept
     short, and the pause button stops the carousel outright. */
  .ranks--deck .rank { transition-duration: .3s !important; }
}