/* ============================================================
   VELOCITY - Site layout & shell (nav, footer, section rhythm,
   scroll-reveal, generic accordion). Agents build ON TOP of this.
   ============================================================ */

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
@media (max-width: 620px) { .container { padding: 0 20px; } }

/* ONE uniform vertical step for every section. The page used to breathe unevenly
   (some gaps ran past 200px), which is what made it feel long and unfocused. */
.section { position: relative; z-index: 1; padding: var(--sec-pad) 0; }
.section[id] { scroll-margin-top: calc(var(--nav-h) + 14px); }
.section-tint { background: linear-gradient(180deg, rgba(255,255,255,.014), transparent 60%); }
.section-divider { border-top: 1px solid var(--hairline); }

/* Visually hidden but read aloud. Defined here rather than relying on auth.css,
   which the home page only happens to load. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Narrow reading columns. Wide measure is what made the old page feel sprawling. */
.col-text { width: 100%; max-width: var(--maxw-text); margin-inline: auto; }
.col-mid  { width: 100%; max-width: var(--maxw-mid);  margin-inline: auto; }

/* Shared section header. ONE gap under every head, no per-section overrides.
   Five sections had each grown their own value (24, 32, 38, 40, 48px at 1440),
   which is what made the page's vertical rhythm read as several different pages
   stitched together. If a head ever genuinely needs to sit tighter, change this
   number, not one section.

   IMPORTANT, and not an oversight: this centred block is NOT the treatment every
   section uses, by design. Seven of eleven sections once opened with the exact
   same eyebrow / centred title / one-line sub, and that uniformity is what made
   a designed page read as a template being filled in. So the middle of the page
   deliberately varies:
     - features  uses .section-head.left, in its own column beside its content
     - games     drops the block for one small label line (.games-bar)
     - compare   carries no visible head at all, only an .sr-only h2
     - pricing   keeps the full centred announcement, because it is the decision
     - partners  uses its own baseline-aligned bar (.partners-head)
   Do not "restore consistency" by putting the stamp back on all of them. The gap
   value above and the type scale below are what hold the page together; the
   composition is allowed to change. Sections that DO use this block should use it
   unmodified. */
.section-head { max-width: 720px; margin: 0 auto clamp(28px, 3.2vw, 40px); text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-title { font-weight: 700; letter-spacing: -0.028em; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.07; margin-top: 14px; }
.section-sub { color: var(--text-dim); font-size: clamp(14.5px, 1.5vw, 16px); margin-top: 14px; line-height: 1.6; }

/* ---------- Section eyebrow ----------
   An uppercase accent label flanked by two short rules that fade out from it.
   This used to be an icon inside a hairline capsule, which is the competitor's
   single most recognisable component: keeping it made the whole page read as
   their template wearing our colours. The rules do the same job (give every
   section a scannable landmark) with a different signature.

   The capsule's padding/border/background resets and the rule that hid its icon
   have been deleted along with the nine hidden <svg class="i"> elements the section
   files were still shipping: a span has no padding, border or background to reset,
   and an icon nobody can see is bytes on every page load for nothing. */
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow-pill::before,
.eyebrow-pill::after {
  content: ''; width: 26px; height: 1px; flex: 0 0 auto;
  background: linear-gradient(90deg, transparent, var(--accent-strong));
}
.eyebrow-pill::after { background: linear-gradient(90deg, var(--accent-strong), transparent); }
/* left-aligned heads only want the trailing rule */
.section-head.left .eyebrow-pill { margin-left: 0; }
.section-head.left .eyebrow-pill::before { display: none; }

/* ---------- Scroll reveal (add class="reveal"; JS toggles .in) ----------
   Optional stagger: set inline style="--i:2" for an 80ms*i delay. */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--e-out), transform .7s var(--e-out); transition-delay: calc(var(--i, 0) * 80ms); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Top navigation: a floating island ----------
   `.nav` is now only a transparent dock that centres the island; `.nav-inner` IS
   the island. Two deliberate choices:

   1. It does NOT restyle on scroll. The old bar faded in a background and shrank
      68px to 56px, so the page furniture moved while you read. A constant island
      is calmer and is the single biggest reason a floating nav reads as "clean".
   2. The dock is pointer-events:none so the transparent gutters either side of
      the island never swallow clicks meant for the page beneath.

   Markup is unchanged, so every selector site.js and nav-account.js bind to
   (.nav, .nav-cta, .nav-toggle, .nav-mobile) still resolves. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: auto;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 14px 16px 0;
  background: transparent; border-bottom: 0;
  pointer-events: none;
}
/* the old scrolled state is intentionally inert: see note 1 above */
.nav.scrolled { height: auto; background: transparent; box-shadow: none; }

.nav-inner {
  pointer-events: auto;
  width: 100%; max-width: var(--maxw-nav); margin: 0;
  /* Symmetric padding matters here: the centre link group is centred within the
     CONTENT box, so any left/right difference offsets it from the island's true
     centre line by half that difference.
     Taller and darker than it was: 60px with 15px sides read squashed against
     six items, and a .72 alpha let the page show through enough that the bar
     never felt like a solid object sitting above the content. */
  height: 64px; padding: 0 16px;
  display: flex; align-items: center; gap: 16px;
  background: rgba(7, 10, 15, .9);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-md);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 40px -26px rgba(0,0,0,.95);
}
/* Three-column nav: brand and the right cluster both flex:1 with a zero basis,
   so they balance and the middle link group sits on the nav's true centre line
   regardless of how wide its labels are. */
.nav-brand { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 11px; cursor: pointer; }
.nav-brand img { width: 28px; height: 28px; }
.nav-brand .wm { font-weight: 800; font-size: 18px; letter-spacing: .2px; }
/* the centre column: four links, no indicator, hover is colour only */
.nav-links { flex: 0 1 auto; position: relative; display: flex; align-items: center; gap: 2px; }
.nav-link { position: relative; padding: 9px 14px; font-size: 14px; font-weight: 500; color: var(--text-dim); white-space: nowrap; transition: color var(--t); cursor: pointer; }
.nav-link:hover, .nav-link.is-active { color: var(--text); }
/* the sliding underline was removed: hover is a colour change, nothing moves */
/* utility cluster (right), split from the links by a hairline */
.nav-right { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 13px; }
.nav-signin { font-size: 13.5px; padding: 0 4px; font-weight: 600; color: var(--text-dim); white-space: nowrap; transition: color var(--t); }
.nav-signin:hover { color: var(--text); }
.nav-div { width: 1px; height: 20px; background: var(--hairline-strong); }
.nav-cta { padding: 10px 18px; font-size: 13.5px; border-radius: var(--r-xs); }
.nav-toggle { display: none; width: 40px; height: 40px; border-radius: var(--r-xs); background: var(--surface); border: 1px solid var(--hairline); cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle svg { width: 22px; height: 22px; color: var(--text); }

/* mobile drawer (site.js toggles .open on it and aria-expanded on .nav-toggle) */
/* The drawer is an island too, inset to the same 16px gutter as the nav above it,
   so a floating bar is not followed by a full-bleed panel. */
.nav-mobile { position: fixed; inset: calc(var(--nav-h) + 6px) 16px auto 16px; z-index: 999; display: none; flex-direction: column; gap: 2px; padding: 12px; max-height: calc(100vh - var(--nav-h) - 22px); overflow-y: auto; overscroll-behavior: contain; background: rgba(10,14,22,.94); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--hairline-strong); border-radius: var(--r-md); box-shadow: 0 24px 60px -30px rgba(0,0,0,.95); transform: translateY(-10px); opacity: 0; transition: transform var(--t) var(--e-out), opacity var(--t); }
.nav-mobile.open { display: flex; transform: none; opacity: 1; }
.nav-mobile a { padding: 12px; border-radius: var(--r-sm); font-size: 15.5px; font-weight: 500; color: var(--text-dim); }
.nav-mobile a:hover { background: var(--surface); color: var(--text); }
/* hairline between the section links and the account actions */
.nav-m-div { height: 1px; margin: 10px 12px; background: var(--hairline); }
/* the drawer's one filled action, so the primary path is obvious on a phone */
.nav-mobile a.nav-m-cta { margin-top: 4px; text-align: center; background: var(--accent-grad); color: var(--on-accent); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.nav-mobile a.nav-m-cta:hover { color: var(--on-accent); }

@media (max-width: 960px) {
  .nav-links, .nav-signin, .nav-div { display: none; }
  .nav-toggle { display: inline-flex; }
}
/* above the drawer breakpoint the toggle is gone, so an open drawer could otherwise
   be left stranded over the page after a resize */
@media (min-width: 961px) {
  .nav-mobile, .nav-mobile.open { display: none; }
}

/* ---------- Generic accordion (FAQ etc) ---------- */
.acc-item { border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); overflow: hidden; transition: border-color var(--t), background var(--t); }
.acc-item + .acc-item { margin-top: 12px; }
.acc-item.open { border-color: var(--hairline-strong); background: var(--surface-2); }
.acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; background: none; border: none; text-align: left; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--text); }
.acc-head .acc-ic { width: 22px; height: 22px; flex: 0 0 auto; color: var(--accent); transition: transform var(--t) var(--e-out); }
.acc-item.open .acc-head .acc-ic { transform: rotate(45deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height var(--t) var(--e-out); }
.acc-body-inner { padding: 0 22px 22px; color: var(--text-dim); font-size: 14.5px; line-height: 1.65; }

/* ---------- Footer ---------- */
.footer { position: relative; z-index: 1; border-top: 1px solid var(--hairline); background: linear-gradient(180deg, transparent, rgba(95,174,236,.03)); padding: clamp(48px, 5.5vw, 64px) 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 40px; }
/* the brand blurb takes the full row and the three link columns share the one below,
   which keeps the footer short on a phone instead of stacking into a long ladder */
@media (max-width: 820px) { .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 30px 20px; } .footer-about { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { gap: 26px 14px; } .footer-col a { font-size: 13.5px; } }
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.footer-brand img { width: 30px; height: 30px; }
.footer-brand .wm { font-weight: 800; font-size: 18px; }
.footer-tag { color: var(--text-mute); font-size: 13.5px; line-height: 1.6; max-width: 310px; }
/* the one hard fact that replaced the dead "System requirements" link.
   Both this and the column headings below were on --text-faint, which is a
   decoration token: they are real copy, and at 12-12.5px they measured about
   2:1 against the footer. Moved to --text-mute, the caption token. */
.footer-fact { margin-top: 10px; color: var(--text-mute); font-size: 12.5px; letter-spacing: 0; }
.footer-col h4 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 12px; }
.footer-col a { display: block; width: fit-content; color: var(--text-dim); font-size: 14px; padding: 5px 0; transition: color var(--t); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--hairline); color: var(--text-mute); font-size: 13px; }
/* one labelled link, not a row of icons: Discord is the only account that exists */
.footer-social { display: flex; gap: 10px; }
.footer-social a { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--hairline); color: var(--text-dim); font-size: 13.5px; font-weight: 600; transition: color var(--t), background var(--t), border-color var(--t), transform var(--t); }
.footer-social a:hover { color: var(--accent); background: var(--surface-2); border-color: var(--hairline-strong); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- Floating Discord widget + click-to-preview popover (injected by site.js) ---------- */
.dwidget { position: fixed; right: 22px; bottom: 22px; z-index: 1200; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.dbubble { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-grad); color: #06121f; border: none; cursor: pointer; box-shadow: 0 12px 32px -6px rgba(95,174,236,.7), var(--glow-soft); transition: transform var(--t) var(--e-spring), box-shadow var(--t); }
.dbubble svg { width: 30px; height: 30px; }
.dbubble:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 16px 40px -6px rgba(95,174,236,.95), var(--glow-soft); }
.dwidget.open .dbubble { transform: scale(.92); }
/* visibility, not just opacity: the closed popover is a role="dialog" holding a
   close button and a join link. On opacity alone both stayed in the tab order and
   in the accessibility tree, so a keyboard visitor tabbed into an invisible dialog
   near the end of the page. visibility:hidden removes them from both, and listing
   visibility in the transition keeps the fade-out intact (it flips at the end of
   the fade on close, and immediately on open). */
.dpop { position: relative; width: 300px; max-width: calc(100vw - 44px); background: var(--bg-1); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 18px 18px 16px; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.96); transform-origin: bottom right; pointer-events: none; transition: opacity var(--t) var(--e-out), transform var(--t) var(--e-out), visibility var(--t); }
.dwidget.open .dpop { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.dpop-x { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--hairline); color: var(--text-dim); cursor: pointer; transition: color var(--t), background var(--t); }
.dpop-x:hover { color: var(--text); background: var(--surface-2); }
.dpop-x svg { width: 14px; height: 14px; }
.dpop-head { display: flex; align-items: center; gap: 13px; padding-right: 22px; }
.dpop-icon { width: 52px; height: 52px; border-radius: 16px; flex: 0 0 auto; background: var(--surface-2); object-fit: cover; }
.dpop-name { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--text); line-height: 1.1; }
.dpop-tag { margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--text-mute); }
.dpop-stats { display: flex; gap: 20px; margin: 15px 0 16px; }
.dpop-stat { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.dpop-stat b { color: var(--text); font-weight: 700; }
/* the .dpop-dot status pips were deleted: site.js builds the two stats as plain
   "<b>n</b> Online / <b>n</b> Members" and has never emitted a dot */
.dpop-join { width: 100%; }
.dpop-join svg { width: 18px; height: 18px; }
@media (max-width: 520px) { .dwidget { right: 16px; bottom: 16px; } .dbubble { width: 52px; height: 52px; } .dpop { width: 280px; } }

/* ---------- Sub-page chrome (buy / signin / register standalone pages) ---------- */
.subbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 64px; display: flex; align-items: center; background: rgba(10,14,22,.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--hairline); }
.subbar-inner { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.subbar-brand { display: flex; align-items: center; gap: 11px; }
.subbar-brand img { width: 28px; height: 28px; filter: drop-shadow(0 0 12px rgba(95,174,236,.55)); }
.subbar-brand .wm { font-weight: 800; font-size: 18px; letter-spacing: .3px; color: var(--text); }
.subbar-cta { font-size: 14px; font-weight: 600; color: var(--text-dim); padding: 9px 15px; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: var(--surface); transition: color var(--t), background var(--t), border-color var(--t); }
.subbar-cta:hover { color: var(--text); background: var(--surface-2); border-color: var(--hairline-strong); }
/* explicit Home button (injected by site.js next to the brand on sub-pages) */
.subbar-home { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text-dim); padding: 8px 14px; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: var(--surface); transition: color var(--t), background var(--t), border-color var(--t); }
.subbar-home:hover { color: var(--text); background: var(--surface-2); border-color: var(--hairline-strong); }
.subbar-home svg { width: 16px; height: 16px; }
.subpage { min-height: 100vh; padding: 96px 0 56px; }
.auth-wrap { display: flex; align-items: center; justify-content: center; padding: 88px 20px 60px; }
.subfoot { border-top: 1px solid var(--hairline); padding: 22px 0; color: var(--text-mute); font-size: 13px; background: linear-gradient(180deg, transparent, rgba(95,174,236,.03)); }
.subfoot .container { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.subfoot a { color: var(--text-dim); font-weight: 600; }
.subfoot a:hover { color: var(--accent); }
@media (max-width: 620px) { .subbar-inner { padding: 0 20px; } }

/* ---------- In-page overlay (opens buy/signin/register without leaving the site) ---------- */
.vmodal { position: fixed; inset: 0; z-index: 2000; display: none; }
.vmodal.open { display: block; }
html.vmodal-lock { overflow: hidden; }
.vmodal-backdrop { position: absolute; inset: 0; background: rgba(4,6,11,.74); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); opacity: 0; transition: opacity var(--t); }
.vmodal.open .vmodal-backdrop { opacity: 1; }
.vmodal-panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -47%); width: min(1080px, 94vw); height: min(880px, 92vh); background: var(--bg-1); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; opacity: 0; transition: opacity var(--t) var(--e-out), transform var(--t) var(--e-out), height var(--t) var(--e-out); }
.vmodal.open .vmodal-panel { transform: translate(-50%, -50%); opacity: 1; }
.vmodal-frame { width: 100%; height: 100%; border: 0; display: block; background: var(--bg-0); }
.vmodal-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(10,14,22,.7); border: 1px solid var(--hairline); color: var(--text); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background var(--t), border-color var(--t), transform var(--t); }
.vmodal-close:hover { background: var(--surface-3); border-color: var(--hairline-strong); transform: rotate(90deg); }
.vmodal-close svg { width: 20px; height: 20px; }
@media (max-width: 560px) { .vmodal-panel { width: 100vw; height: 100%; border-radius: 0; top: 0; left: 0; transform: none; } .vmodal.open .vmodal-panel { transform: none; } }
@media (prefers-reduced-motion: reduce) { .vmodal-backdrop, .vmodal-panel { transition: opacity .001s; } }

/* when a sub-page is shown inside the overlay iframe, drop its own duplicate chrome */
html.is-framed .subbar, html.is-framed .subfoot, html.is-framed .dbubble { display: none !important; }
html.is-framed, html.is-framed body { min-height: 0 !important; height: auto !important; }
html.is-framed .subpage { padding-top: 22px !important; padding-bottom: 22px !important; min-height: 0 !important; }
html.is-framed .auth-wrap { padding: 30px 20px !important; min-height: 0 !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .bg-mesh { animation: none; }
}