/* XiHelper website. Colours, radii and type follow the app's own design tokens
   (XiHelperAI rust/crates/app/ui/src/styles/tokens.css) so the site and the app
   read as one product: the same navy surfaces, aether blue accent and brand
   gold, the same cards, pills and status strip. Cinzel carries the display
   headings, matching the serif of the XI emblem.

   Motion lives in motion.js. Without JavaScript, or with reduced motion,
   every element is shown in its final place. */

:root {
  color-scheme: dark;
  /* The app's surfaces, darkest to lightest */
  --bg: #0a111e;
  --bg-2: #0b1322;
  --card: #0f1a2c;
  --raised: #122036;
  --hover: #15243b;
  --input: #0a1321;
  --border: #1c2a41;
  --border-2: #26374f;
  --text: #e8eef7;
  --text-2: #b3c1d6;
  --text-3: #8496b0;
  --text-4: #5d6e88;
  --accent: #3b82f6;
  --accent-hi: #4b8ff8;
  --accent-text: #9cc3ff;
  --accent-soft: rgba(59, 130, 246, 0.14);
  --nav-active: #13305a;
  --gold: #f2cf7f;
  --gold-2: #dcb259;
  --gold-soft: rgba(242, 207, 127, 0.12);
  --good: #4ade80;
  --good-soft: rgba(74, 222, 128, 0.12);
  --warn: #f5b53d;
  --danger: #f05252;
  --danger-soft: rgba(240, 82, 82, 0.12);
  --orange: #fb923c;

  --font: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --display: 'Cinzel', 'Trajan Pro', 'Palatino Linotype', Georgia, serif;
  --mono: 'Cascadia Mono', 'Consolas', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --radius-lg: 14px;
  --radius: 10px;
  --radius-sm: 7px;
  --maxw: 1180px;
  --header-h: 68px;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Names the account and legal pages were written against */
  --surface: var(--card);
  --surface2: var(--raised);
  --line: var(--border);
  --line2: var(--border-2);
  --muted: var(--text-3);
  --faint: var(--text-4);
  --blue: #6aa7ff;
  --bad: var(--danger);
  --ink: #0a111e;
  --sans: var(--font);
}

/* Inter and Cinzel have no Japanese or Chinese: name each system's own faces,
   so the page (its <html lang>) gets the right glyphs for its script. */
:root:lang(ja) {
  --font: 'Inter', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', system-ui, sans-serif;
  --display: 'Cinzel', 'Hiragino Mincho ProN', 'Yu Mincho', 'MS PMincho', serif;
}
:root:lang(zh-CN) {
  --font: 'Inter', 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
  --display: 'Cinzel', 'Songti SC', 'SimSun', 'Noto Serif SC', serif;
}
:root:lang(ar) {
  --font: 'Inter', 'Segoe UI', 'Tahoma', 'Geeza Pro', 'Noto Sans Arabic', system-ui, sans-serif;
  --display: 'Cinzel', 'Segoe UI', 'Tahoma', 'Geeza Pro', 'Noto Sans Arabic', sans-serif;
}
/* Arabic is joined-up script: spacing letters apart breaks the words. */
:root:lang(ar) body,
:root:lang(ar) body * {
  letter-spacing: 0 !important;
}
/* Right to left, an arrow that means "on" points left. */
[dir='rtl'] .ic.flip {
  transform: scaleX(-1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: var(--blue);
  text-decoration: none;
}
a:hover {
  color: var(--accent-text);
}
p {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(34px, 5.6vw, 58px);
  font-weight: 800;
}
h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
}
::selection {
  background: rgba(59, 130, 246, 0.35);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 560px) {
  .wrap {
    padding: 0 16px;
  }
}
.mono {
  font-family: var(--mono);
}
.muted {
  color: var(--text-3);
  font-size: 13.5px;
}
.sub {
  color: var(--text-3);
}
.gold {
  color: var(--gold);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ic {
  width: 18px;
  height: 18px;
  flex: none;
}
.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.04;
}
.goldtext {
  background: linear-gradient(100deg, #f7e2ac 0%, var(--gold) 30%, #c9953c 55%, var(--gold) 75%, #f7e2ac 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 7s linear infinite;
}
@keyframes shimmer {
  to {
    background-position: -220% 0;
  }
}

/* ── Brand ─────────────────────────────────────────────────────────────── */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.brand:hover {
  color: var(--text);
}
.brand img {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 0 10px rgba(242, 207, 127, 0.25));
}
.brand .xi {
  color: var(--gold);
}
.brand .helper {
  color: var(--text);
}
.brand small {
  display: block;
  white-space: nowrap;
  font-family: var(--font);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  color: var(--text-3);
  font-weight: 600;
  margin-top: -3px;
}

/* ── Header ────────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  transition: background 0.35s, border-color 0.35s, backdrop-filter 0.35s;
  border-bottom: 1px solid transparent;
}
.site-header.solid,
body:not(.home) .site-header {
  background: rgba(10, 17, 30, 0.78);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--border);
}
.site-header .bar {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}
.site-nav {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-nav a.link {
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.site-nav a.link:hover,
.site-nav a.link.on {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
.site-nav .btn {
  margin-inline-start: 10px;
}
/* The language menu: each language in its own name. It is a <details>, so
   it undoes the FAQ's card look (see FAQ below). */
.lang-menu {
  position: relative;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: none;
}
.lang-menu summary::after {
  content: none;
}
.lang-menu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.lang-menu summary::-webkit-details-marker {
  display: none;
}
.lang-menu summary:hover,
.lang-menu[open] summary {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
.lang-menu summary svg {
  width: 16px;
  height: 16px;
}
.lang-menu summary svg:last-child {
  width: 14px;
  height: 14px;
  transition: transform 0.15s;
}
.lang-menu[open] summary svg:last-child {
  transform: rotate(180deg);
}
.lang-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--raised);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  z-index: 60;
}
.lang-list a {
  color: var(--text-2);
  font-size: 14px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.lang-list a:hover {
  color: var(--text);
  background: var(--hover);
}
.lang-list a.on {
  color: var(--gold);
}
.nav-toggle {
  display: none;
  margin-inline-start: auto;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media (max-width: 920px) {
  .nav-toggle {
    display: inline-flex;
  }
  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 16px 20px;
    background: rgba(10, 17, 30, 0.97);
    border-bottom: 1px solid var(--border);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
  }
  .site-nav.open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .site-nav a.link {
    padding: 12px;
    font-size: 16px;
  }
  .site-nav .btn {
    margin: 8px 0 0;
  }
  .lang-menu summary {
    padding: 12px;
    font-size: 16px;
  }
  .lang-list {
    position: static;
    box-shadow: none;
    margin: 2px 0 4px;
  }
}
/* Russian's longer header links need the phone menu sooner. */
@media (max-width: 1160px) {
  :root:lang(ru) .nav-toggle {
    display: inline-flex;
  }
  :root:lang(ru) .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 16px 20px;
    background: rgba(10, 17, 30, 0.97);
    border-bottom: 1px solid var(--border);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
  }
  :root:lang(ru) .site-nav.open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  :root:lang(ru) .site-nav a.link {
    padding: 12px;
    font-size: 16px;
  }
  :root:lang(ru) .site-nav .btn {
    margin: 8px 0 0;
  }
  :root:lang(ru) .lang-menu summary {
    padding: 12px;
    font-size: 16px;
  }
  :root:lang(ru) .lang-list {
    position: static;
    box-shadow: none;
    margin: 2px 0 4px;
  }
}
main {
  display: block;
}
body:not(.home) main {
  padding-top: var(--header-h);
}

/* ── Buttons: the app's own ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  border-radius: var(--radius);
  padding: 13px 22px;
  border: 1px solid var(--accent-hi);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(59, 130, 246, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: filter 0.15s, transform 0.08s, background 0.15s, border-color 0.15s, box-shadow 0.2s;
  white-space: nowrap;
}
.btn:hover {
  color: #fff;
  filter: brightness(1.08);
  box-shadow: 0 14px 38px -12px rgba(59, 130, 246, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn:active {
  transform: translateY(1px);
}
.btn .ic {
  width: 17px;
  height: 17px;
}
.btn.gold {
  border-color: #f6dc9c;
  background: linear-gradient(180deg, #f7dd9f, var(--gold) 40%, var(--gold-2));
  color: #1b1405;
  box-shadow: 0 10px 34px -12px rgba(242, 207, 127, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn.gold:hover {
  color: #1b1405;
}
.btn.ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border-2);
  color: var(--text);
  box-shadow: none;
}
.btn.ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: #3a4d6b;
  color: var(--text);
}
.btn.sm {
  padding: 9px 15px;
  font-size: 13.5px;
  border-radius: 9px;
}
.btn.lg {
  padding: 16px 28px;
  font-size: 16px;
  border-radius: 12px;
}
.btn[disabled] {
  opacity: 0.55;
  cursor: default;
}

/* ── Controls and panels (app style) ───────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
input,
select,
textarea {
  font-family: var(--font);
  font-size: 15px;
  padding: 11px 13px;
  border-radius: var(--radius);
  border: 1px solid var(--border-2);
  background: var(--input);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
input::placeholder {
  color: var(--text-4);
}
code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  padding: 1px 7px;
  border-radius: 6px;
  color: var(--gold);
  word-break: break-word;
}
/* A command reads left to right on a right-to-left page too (/xih stop, not
   xih stop/). */
[dir='rtl'] code {
  direction: ltr;
  unicode-bidi: isolate;
}
.step code,
.ticks code,
.fx-item code {
  white-space: nowrap;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill.run {
  color: var(--good);
  background: var(--good-soft);
  border: 1px solid rgba(74, 222, 128, 0.28);
}
.pill.trip {
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid rgba(240, 82, 82, 0.35);
}
.pill.blue {
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid rgba(59, 130, 246, 0.35);
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.pill.run .dot {
  animation: beat 1.6s ease-in-out infinite;
}
@keyframes beat {
  50% {
    opacity: 0.35;
  }
}

/* The app's status strip, used as a motif (its .status-strip: a Running
   pill, then label and value readouts between hairlines) */
.strip {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: rgba(15, 26, 44, 0.92);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 7px 16px 7px 8px;
  font-size: 13px;
  color: var(--text-3);
  box-shadow: var(--shadow-pop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
}
.strip b {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  margin-inline-start: 5px;
}
.strip .sep {
  width: 1px;
  height: 24px;
  background: #26374f;
}
.strip .pill.run {
  height: 30px;
  padding: 0 13px 0 11px;
  border: 0;
  font-size: 13.5px;
}

/* App card with a title row, as on every tab */
.appcard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
.appcard-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 14px;
}
.appcard-head .ic {
  color: #b1c2da;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}
.appcard-head h4 {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.25;
  color: #f1f5fb;
  letter-spacing: 0;
}
.appcard-head p {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 3px;
}
.appcard-head .right {
  margin-inline-start: auto;
  display: flex;
  gap: 6px;
}
.seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  font-size: 13px;
  padding: 0 12px;
  border-radius: 7px;
  border: 1px solid #26374f;
  background: #0a1321;
  color: var(--text-2);
}
.seg.on {
  background: #15315a;
  border-color: var(--accent);
  color: #fff;
}
.seg .ic {
  width: 14px;
  height: 14px;
}

/* Screenshot frame: the app window, as it really is */
.appframe {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #2b3d59;
  background: var(--bg);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 50px 120px -30px rgba(0, 0, 0, 0.95),
    0 0 90px -20px rgba(59, 130, 246, 0.35);
}
.appframe img {
  width: 100%;
  height: auto;
}
.appframe::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 32%);
}

/* ── Section furniture ─────────────────────────────────────────────────── */
section {
  position: relative;
  padding: 110px 0;
}
@media (max-width: 720px) {
  section {
    padding: 76px 0;
  }
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.eyebrow::before,
.eyebrow::after {
  content: '';
  width: 6px;
  height: 6px;
  background: currentColor;
  transform: rotate(45deg);
  opacity: 0.75;
}
.sec-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.sec-head h2 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: clamp(30px, 4.4vw, 52px);
}
.sec-head .sub {
  color: var(--text-2);
  margin-top: 18px;
  font-size: 17.5px;
}
.left .sec-head,
.sec-head.left {
  text-align: start;
  margin-inline-start: 0;
}
.prose {
  max-width: 780px;
}
.prose h1 {
  margin-bottom: 10px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.prose h2 {
  margin: 34px 0 10px;
  font-size: 22px;
}
.prose p {
  margin: 12px 0;
  color: var(--text-2);
}
.prose li {
  color: var(--text-2);
  margin: 6px 0;
}
.prose a {
  color: var(--blue);
}
body:not(.home) main > section:first-child,
body:not(.home) main > .acct:first-child {
  padding-top: 64px;
}

/* ── Reveal (motion.js adds .in) ───────────────────────────────────────── */
.js [data-reveal] {
  opacity: 0;
  transition:
    opacity 0.9s var(--ease-out),
    transform 1.1s var(--ease-out),
    filter 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + var(--d, 0ms));
  will-change: opacity, transform;
}
.js [data-reveal='up'] {
  transform: translateY(42px);
}
.js [data-reveal='down'] {
  transform: translateY(-30px);
}
.js [data-reveal='left'] {
  transform: translateX(-60px);
}
.js [data-reveal='right'] {
  transform: translateX(60px);
}
.js [data-reveal='zoom'] {
  transform: scale(0.9);
}
.js [data-reveal='blur'] {
  filter: blur(14px);
  transform: scale(1.04);
}
.js [data-reveal].in {
  opacity: 1;
  transform: none;
  filter: none;
}
/* Split headings: each word rises on its own */
.split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
}
.split .w > span {
  display: inline-block;
}
.js .split .w > span {
  transform: translateY(105%);
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms + var(--d, 0ms));
}
.js .split.in .w > span {
  transform: none;
}

/* Parallax: motion.js writes --py (px) */
[data-speed] {
  translate: 0 var(--py, 0px);
}

/* ── Map backgrounds: real zone maps (Remapster), inked in the app's colours ── */
.mapbg {
  position: absolute;
  inset: -12% -6%;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  opacity: 0.34;
  mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 30%, transparent 75%);
}
.mapbg.right {
  mask-image: radial-gradient(ellipse 48% 60% at 72% 50%, #000 25%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 48% 60% at 72% 50%, #000 25%, transparent 72%);
}
.mapbg.left {
  mask-image: radial-gradient(ellipse 48% 60% at 28% 50%, #000 25%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 48% 60% at 28% 50%, #000 25%, transparent 72%);
}
.mapbg > i {
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  animation: drift 60s ease-in-out infinite alternate;
}
@keyframes drift {
  from {
    transform: scale(1.05) translate3d(-1.5%, 0, 0);
  }
  to {
    transform: scale(1.16) translate3d(1.5%, -2%, 0);
  }
}
.mapcap {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--text-4);
  text-transform: uppercase;
}
.mapcap b {
  color: var(--text-3);
  font-weight: 500;
}
/* A player's own screenshot (public/art), when one is supplied */
.art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  animation: kenburns 38s ease-in-out infinite alternate;
}
.art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 17, 30, 0.55) 0%, rgba(10, 17, 30, 0.35) 40%, var(--bg) 100%),
    radial-gradient(ellipse at center, rgba(10, 17, 30, 0) 30%, rgba(10, 17, 30, 0.8) 100%);
}
@keyframes kenburns {
  from {
    transform: scale(1.04);
  }
  to {
    transform: scale(1.14) translate3d(-1.5%, -1%, 0);
  }
}
.set > .wrap,
.set > .inner {
  position: relative;
  z-index: 2;
}

/* ── Page heads (affiliates and the like) ─────────────────────────────── */
.hero {
  padding: 80px 0 40px;
  text-align: center;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: clamp(36px, 5.6vw, 64px);
}
.hero .lead {
  color: var(--text-2);
  font-size: clamp(17px, 2vw, 20px);
  max-width: 640px;
  margin: 22px auto 30px;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.cine {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--header-h) + 40px) 0 120px;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(ellipse 90% 70% at 50% 38%, #12254a 0%, #0b1426 45%, var(--bg) 75%);
}
.aurora {
  position: absolute;
  inset: -20%;
  filter: blur(70px);
  opacity: 0.85;
}
.aurora i {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.aurora i:nth-child(1) {
  width: 55vw;
  height: 45vw;
  left: 8%;
  top: 12%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.42), transparent 65%);
  animation: float1 22s ease-in-out infinite alternate;
}
.aurora i:nth-child(2) {
  width: 45vw;
  height: 40vw;
  right: 6%;
  top: 20%;
  background: radial-gradient(circle, rgba(242, 207, 127, 0.2), transparent 65%);
  animation: float2 26s ease-in-out infinite alternate;
}
.aurora i:nth-child(3) {
  width: 60vw;
  height: 35vw;
  left: 22%;
  bottom: 4%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.26), transparent 65%);
  animation: float3 30s ease-in-out infinite alternate;
}
@keyframes float1 {
  to {
    transform: translate3d(12%, 8%, 0) scale(1.15);
  }
}
@keyframes float2 {
  to {
    transform: translate3d(-14%, 10%, 0) scale(0.9);
  }
}
@keyframes float3 {
  to {
    transform: translate3d(-8%, -12%, 0) scale(1.1);
  }
}
.hero-map {
  position: absolute;
  inset: -10%;
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  mask-image: radial-gradient(ellipse 55% 50% at 50% 45%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 45%, #000 20%, transparent 70%);
}
.motes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.rings {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 0;
  height: 0;
}
.rings i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
  border-radius: 50%;
  border: 1px solid rgba(242, 207, 127, 0.28);
  animation: ring 6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
  opacity: 0;
}
.rings i:nth-child(2) {
  animation-delay: 2s;
  border-color: rgba(59, 130, 246, 0.35);
}
.rings i:nth-child(3) {
  animation-delay: 4s;
}
@keyframes ring {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  100% {
    transform: scale(4.2);
    opacity: 0;
  }
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 50% at 50% 100%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 100%, #000 10%, transparent 70%);
  transform: perspective(600px) rotateX(58deg) translateY(28%);
  transform-origin: bottom;
  animation: gridrun 3.2s linear infinite;
}
@keyframes gridrun {
  to {
    background-position: 0 64px, 0 0;
  }
}
.hero-inner {
  position: relative;
  z-index: 2;
}
.emblem {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 34px;
}
.emblem img {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  filter: drop-shadow(0 0 28px rgba(242, 207, 127, 0.35));
}
.emblem .glow {
  position: absolute;
  inset: -45%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 207, 127, 0.28), rgba(59, 130, 246, 0.14) 40%, transparent 68%);
  animation: breathe 5s ease-in-out infinite;
}
.emblem .crystal {
  position: absolute;
  z-index: 3;
  left: 61%;
  top: 7%;
  width: 16%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 180, 255, 0.95), rgba(59, 130, 246, 0) 70%);
  mix-blend-mode: screen;
  animation: crystal 3.2s ease-in-out infinite;
}
@keyframes breathe {
  50% {
    transform: scale(1.12);
    opacity: 0.7;
  }
}
@keyframes crystal {
  0%,
  100% {
    opacity: 0.15;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.3);
  }
}
.cine h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(44px, 8.4vw, 104px);
  letter-spacing: 0.01em;
  line-height: 1;
  text-shadow: 0 10px 60px rgba(0, 0, 0, 0.6);
}
.cine h1 .line {
  display: block;
}
/* The H1's first line: what XiHelper is, set as the eyebrow over the tagline. */
.cine h1 .eyebrow {
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 0 auto 18px;
  font-family: var(--font);
  line-height: 1.5;
  text-shadow: none;
}
.cine .lead {
  color: var(--text-2);
  font-size: clamp(17px, 2vw, 20.5px);
  max-width: 640px;
  margin: 28px auto 36px;
}
.cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.fineprint {
  margin-top: 26px;
  color: var(--text-4);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.fineprint b {
  color: var(--text-2);
  font-weight: 600;
}
/* The hero's live totals (lib/site/heroStats): one glass bar, a hairline
   between totals; on a phone, a two-column grid of tiles. */
.hero-stats {
  margin: 30px auto 0;
}
.hero-stats ul {
  list-style: none;
  margin: 0 auto;
  padding: 14px 6px;
  display: flex;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  border-radius: var(--radius-lg);
  background: rgba(15, 26, 44, 0.55);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-stats li {
  padding: 2px 26px;
  text-align: center;
}
.hero-stats li + li {
  border-inline-start: 1px solid var(--border);
}
.hero-stats b {
  display: block;
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgba(242, 207, 127, 0.3);
}
.hero-stats span {
  display: block;
  margin-top: 5px;
  color: var(--text-2);
  font-size: 12px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.hero-stats p {
  max-width: 600px;
  margin: 10px auto 0;
  color: var(--text-4);
  font-size: 11.5px;
}
/* With the totals under the buttons, the hero tightens so the bar sits
   inside a laptop screen, and the bar itself invites the scroll. */
.cine:has(.hero-stats) {
  padding-top: calc(var(--header-h) + 22px);
  padding-bottom: 48px;
}
.cine:has(.hero-stats) .emblem {
  width: 122px;
  height: 122px;
  margin-bottom: 24px;
}
.cine:has(.hero-stats) h1 {
  font-size: clamp(44px, 7.6vw, 94px);
}
.cine:has(.hero-stats) .lead {
  margin: 22px auto 28px;
}
.cine:has(.hero-stats) .fineprint {
  margin-top: 20px;
}
.cine:has(.hero-stats) .scroll-cue {
  display: none;
}
@media (min-width: 901px) and (max-height: 820px) {
  .cine:has(.hero-stats) .emblem {
    width: 92px;
    height: 92px;
    margin-bottom: 16px;
  }
  .cine:has(.hero-stats) h1 {
    font-size: clamp(44px, 6.4vw, 78px);
  }
  .cine:has(.hero-stats) .lead {
    font-size: 17px;
    margin: 16px auto 22px;
  }
  .cine:has(.hero-stats) .fineprint {
    margin-top: 14px;
  }
  .cine:has(.hero-stats) .hero-stats {
    margin-top: 20px;
  }
}
@media (max-width: 900px) {
  .hero-stats ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: auto;
    padding: 0;
    background: none;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hero-stats li,
  .hero-stats li + li {
    padding: 14px 10px 12px;
    border-radius: var(--radius-lg);
    background: rgba(15, 26, 44, 0.55);
    border: 1px solid var(--border);
  }
  .hero-stats li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
.scroll-cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  letter-spacing: 0.34em;
  color: var(--text-4);
  text-transform: uppercase;
}
.scroll-cue i {
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--gold), transparent);
  animation: cue 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue {
  0% {
    transform: scaleY(0);
    opacity: 1;
  }
  60% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}
/* Intro: the hero builds itself on load */
.js .cine [data-intro] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.2s var(--ease-out), transform 1.4s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .cine .emblem[data-intro] {
  transform: scale(0.6);
  filter: blur(10px);
  transition: opacity 1.4s var(--ease-out), transform 1.8s var(--ease-out), filter 1.4s var(--ease-out);
}
.js.ready .cine [data-intro] {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ── Scenes pinned while you scroll (motion.js writes --p, 0 to 1) ─────── */
.scene {
  padding: 0;
}
.pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* The window rising out of the hero */
.s-window {
  height: 230vh;
  margin-top: -18vh;
}
.s-window .pin {
  flex-direction: column;
  justify-content: center;
  padding-top: var(--header-h);
}
.s-window .cap {
  position: relative;
  z-index: 3;
  text-align: center;
  margin-bottom: 30px;
  opacity: calc(var(--p, 1) * 2.2 - 0.25);
  transform: translateY(calc((1 - min(var(--p, 1) * 1.6, 1)) * 30px));
}
.s-window .cap h2 {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 48px);
}
.s-window .cap p {
  color: var(--text-2);
  margin-top: 12px;
}
.stage {
  position: relative;
  width: min(1120px, 92vw, (100vh - 250px) * 1.6);
  perspective: 1800px;
}
.win3d {
  transform-origin: 50% 0%;
  transform: rotateX(calc((1 - var(--e, 1)) * 34deg)) scale(calc(0.8 + var(--e, 1) * 0.2))
    translateY(calc((1 - var(--e, 1)) * 40px));
  will-change: transform;
}
.floaty {
  position: absolute;
  z-index: 4;
  opacity: calc(var(--p, 1) * 3 - 0.9);
  animation: bob 6s ease-in-out infinite;
}
.floaty > * {
  transform: translate3d(calc((1 - var(--e, 1)) * var(--fx, 0px)), calc((1 - var(--e, 1)) * var(--fy, 0px)), 0);
}
.floaty.f1 {
  left: -7%;
  top: -4%;
  --fx: -120px;
  --fy: 40px;
}
.floaty.f2 {
  right: -8%;
  top: 26%;
  --fx: 140px;
  --fy: -20px;
  animation-delay: -2s;
}
.floaty.f3 {
  left: -6%;
  bottom: 10%;
  --fx: -80px;
  --fy: 90px;
  animation-delay: -4s;
}
.floaty.f4 {
  right: -5%;
  bottom: -5%;
  --fx: 120px;
  --fy: 80px;
  animation-delay: -1s;
}
@keyframes bob {
  50% {
    translate: 0 -10px;
  }
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 26, 44, 0.94);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13px;
  color: var(--text-2);
  box-shadow: var(--shadow-pop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
}
.toast .ic {
  width: 18px;
  height: 18px;
}
.toast b {
  color: var(--text);
  display: block;
  font-size: 13.5px;
}
.toast.good .ic {
  color: var(--good);
}
.toast.gold .ic {
  color: var(--gold);
}
.toast.blue .ic {
  color: var(--accent-text);
}
@media (max-width: 900px) {
  .s-window {
    height: auto;
    margin-top: 0;
  }
  .s-window .pin {
    position: relative;
    height: auto;
    padding: 30px 0 60px;
  }
  .s-window .cap {
    opacity: 1;
    transform: none;
  }
  .win3d {
    transform: none;
  }
  .floaty {
    display: none;
  }
}

/* The tabs, one after another */
.s-show {
  height: calc(100vh + var(--n, 8) * 62vh);
}
.show-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 0.66fr) 1.6fr;
  gap: 48px;
  align-items: center;
  padding-top: calc(var(--header-h) - 10px);
}
.show-copy {
  position: relative;
  min-height: 420px;
}
.pane {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out);
  pointer-events: none;
}
.pane.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.pane .numeral {
  font-family: var(--display);
  font-size: 15px;
  color: var(--gold);
  letter-spacing: 0.3em;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pane .numeral::after {
  content: '';
  height: 1px;
  width: 60px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.pane h3 {
  font-family: var(--display);
  font-size: clamp(34px, 3.6vw, 50px);
  margin: 16px 0 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.pane p {
  color: var(--text-2);
  font-size: 16.5px;
  max-width: 44ch;
}
.ticks {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 10px;
}
.ticks li {
  position: relative;
  padding-inline-start: 30px;
  color: var(--text-2);
  font-size: 15px;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239cc3ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 11px no-repeat;
  border: 1px solid rgba(59, 130, 246, 0.35);
}
.ticks li b {
  color: var(--text);
  font-weight: 600;
}
.show-visual {
  position: relative;
}
.show-visual .appframe {
  aspect-ratio: 16 / 10;
}
.show-visual .appframe img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.7s ease, transform 1.4s var(--ease-out);
}
.show-visual .appframe img.on {
  opacity: 1;
  transform: none;
}
.rail {
  /* Ten tabs: two even rows of five, never one left on its own. */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin-top: 18px;
}
.rail button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 6px 9px;
  transition: all 0.25s;
}
.rail button .ic {
  width: 15px;
  height: 15px;
}
.rail button:hover {
  color: var(--text);
  border-color: var(--border-2);
}
.rail button.on {
  color: var(--accent-text);
  background: var(--nav-active);
  border-color: #3470cf;
}
.progress {
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 16px;
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--accent), var(--gold));
}
.show-mobile {
  display: none;
}
@media (max-width: 900px) {
  .s-show {
    height: auto;
    padding: 70px 0;
  }
  .s-show .pin {
    display: none;
  }
  .show-mobile {
    display: grid;
    gap: 56px;
  }
  .show-mobile .pane {
    position: static;
    opacity: 1;
    transform: none;
  }
  .show-mobile .appframe {
    margin-top: 22px;
  }
}

/* ── Set pieces ────────────────────────────────────────────────────────── */
.set {
  overflow: hidden;
  isolation: isolate;
}
.split2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.split2.rev > :first-child {
  order: 2;
}
@media (max-width: 960px) {
  .split2 {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .split2.rev > :first-child {
    order: 0;
  }
}
.copy h2 {
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.copy > p {
  color: var(--text-2);
  font-size: 17px;
  margin-top: 18px;
  max-width: 52ch;
}
.rules {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.rules li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: start;
}
.rules .ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--raised);
  border: 1px solid var(--border-2);
  color: var(--accent-text);
}
.rules .ico .ic {
  width: 18px;
  height: 18px;
}
.rules b {
  display: block;
  color: var(--text);
  font-weight: 600;
  font-size: 15.5px;
}
.rules span {
  color: var(--text-3);
  font-size: 14.5px;
}

/* Targeting: how it chooses, drawn in the Radar's colours */
.field {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18, 32, 54, 0.9) 0%, rgba(10, 17, 30, 0.6) 60%, transparent 71%);
}
.field svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.field .rg {
  fill: none;
  stroke: rgba(132, 150, 176, 0.22);
  stroke-dasharray: 3 6;
}
.field .axis {
  stroke: rgba(132, 150, 176, 0.12);
}
.field .scan {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0;
  transform-origin: 200px 200px;
}
.field .lock-line {
  stroke: var(--gold);
  stroke-width: 2;
  stroke-dasharray: 6 5;
  stroke-dashoffset: 200;
  opacity: 0;
}
.field .reach {
  fill: rgba(59, 130, 246, 0.06);
  stroke: rgba(59, 130, 246, 0.35);
  stroke-width: 1;
}
.mob {
  position: absolute;
  transform: translate(-50%, -6.5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 0;
}
.mob.target {
  flex-direction: column-reverse;
  transform: translate(-50%, calc(-100% + 6.5px));
}
.mob.target .n {
  margin-bottom: 12px;
}
.mob .b {
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 12px var(--danger);
  position: relative;
  transition: background 0.4s, box-shadow 0.4s, transform 0.4s;
}
.mob .n {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  background: rgba(10, 17, 30, 0.75);
  padding: 1px 7px;
  border-radius: 6px;
}
.mob .why {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-4px);
}
.mob .why.no {
  color: var(--text-3);
  background: rgba(93, 110, 136, 0.18);
  border: 1px solid rgba(93, 110, 136, 0.4);
}
.mob .why.avoid {
  color: var(--warn);
  background: rgba(245, 181, 61, 0.1);
  border: 1px solid rgba(245, 181, 61, 0.4);
}
.mob .why.yes {
  color: var(--gold);
  background: var(--gold-soft);
  border: 1px solid rgba(242, 207, 127, 0.45);
}
.mob.target .b::after {
  content: '';
  position: absolute;
  inset: -12px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  border-inline-start-color: transparent;
  border-inline-end-color: transparent;
}
.me {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-inline-start: 9px solid transparent;
  border-inline-end: 9px solid transparent;
  border-bottom: 18px solid #eaf2ff;
  filter: drop-shadow(0 0 8px rgba(156, 195, 255, 0.9));
}
.field-strip {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
/* The loop, 9s, runs while in view */
.field.live .scan {
  animation: scan 9s var(--ease-out) infinite;
}
.field.live .why {
  animation: why 9s ease infinite;
  animation-delay: var(--at, 0s);
}
.field.live .mob.out .b {
  animation: dim 9s ease infinite;
  animation-delay: var(--at, 0s);
}
.field.live .mob.avoided .b {
  animation: amber 9s ease infinite;
  animation-delay: var(--at, 0s);
}
.field.live .mob.target .b {
  animation: gold 9s ease infinite;
}
.field.live .mob.target .b::after {
  animation: lock 9s ease infinite;
}
.field.live .lock-line {
  animation: line 9s ease infinite;
}
.field.live .field-state {
  animation: none;
}
@keyframes scan {
  0% {
    transform: scale(0.05);
    opacity: 0;
  }
  4% {
    opacity: 0.9;
  }
  22% {
    transform: scale(1);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes why {
  0%,
  8% {
    opacity: 0;
    transform: translateY(-4px);
  }
  12%,
  90% {
    opacity: 1;
    transform: none;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes dim {
  0%,
  8% {
    background: var(--danger);
    box-shadow: 0 0 12px var(--danger);
  }
  12%,
  90% {
    background: #3c4a60;
    box-shadow: none;
  }
  100% {
    background: var(--danger);
  }
}
@keyframes amber {
  0%,
  8% {
    background: var(--danger);
  }
  12%,
  90% {
    background: var(--warn);
    box-shadow: 0 0 14px var(--warn);
  }
  100% {
    background: var(--danger);
  }
}
@keyframes gold {
  0%,
  44% {
    background: var(--danger);
    box-shadow: 0 0 12px var(--danger);
    transform: none;
  }
  50%,
  90% {
    background: var(--gold);
    box-shadow: 0 0 22px var(--gold);
    transform: scale(1.25);
  }
  100% {
    background: var(--danger);
  }
}
@keyframes lock {
  0%,
  46% {
    opacity: 0;
    transform: scale(1.8) rotate(0deg);
  }
  54%,
  90% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
  100% {
    opacity: 0;
  }
}
@keyframes line {
  0%,
  46% {
    opacity: 0;
    stroke-dashoffset: 200;
  }
  56% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  90% {
    opacity: 1;
    stroke-dashoffset: -60;
  }
  100% {
    opacity: 0;
  }
}

/* Radar on a real zone map */
.radar-card .map {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #1a160d;
}
.radar-card .map img {
  position: absolute;
  inset: -4%;
  width: 108%;
  max-width: none;
  height: 108%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.82) contrast(1.05);
}
.radar-card .map::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 52% 50%, transparent 30%, rgba(10, 17, 30, 0.55) 90%);
}
.sweep {
  position: absolute;
  z-index: 2;
  left: 52%;
  top: 50%;
  width: 92%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(120, 170, 255, 0) 0deg, rgba(120, 170, 255, 0) 290deg, rgba(120, 170, 255, 0.2) 357deg, rgba(190, 215, 255, 0.55) 360deg);
  mix-blend-mode: screen;
  animation: spin 5s linear infinite;
  animation-play-state: paused;
}
.live .sweep {
  animation-play-state: running;
}
@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.blip {
  position: absolute;
  z-index: 3;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  border: 1.5px solid rgba(10, 17, 30, 0.8);
  animation: wander 14s ease-in-out infinite alternate;
  animation-delay: var(--dl, 0s);
  animation-play-state: paused;
}
.live .blip {
  animation-play-state: running;
}
.blip.mob {
  background: var(--danger);
}
.blip.party {
  background: var(--good);
}
.blip.claimed {
  background: var(--orange);
}
.blip.target {
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(242, 207, 127, 0.7);
  animation: wander 14s ease-in-out infinite alternate, ping 1.8s ease-out infinite;
  animation-play-state: paused;
}
.live .blip.target {
  animation-play-state: running;
}
.blip.you {
  width: 0;
  height: 0;
  margin: -9px 0 0 -7px;
  border-radius: 0;
  border: none;
  border-inline-start: 7px solid transparent;
  border-inline-end: 7px solid transparent;
  border-bottom: 16px solid #fff;
  filter: drop-shadow(0 0 6px rgba(156, 195, 255, 0.9));
  animation: none;
}
@keyframes wander {
  0% {
    translate: 0 0;
  }
  33% {
    translate: var(--wx, 10px) calc(var(--wy, 6px) * -1);
  }
  66% {
    translate: calc(var(--wx, 10px) * -0.6) var(--wy, 6px);
  }
  100% {
    translate: calc(var(--wx, 10px) * 0.4) calc(var(--wy, 6px) * 0.8);
  }
}
@keyframes ping {
  0% {
    box-shadow: 0 0 0 0 rgba(242, 207, 127, 0.75);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(242, 207, 127, 0);
  }
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--text-3);
  border-top: 1px solid var(--border);
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.credit {
  font-size: 11px;
  color: var(--text-4);
  padding: 0 16px 12px;
}

/* Anti-Ban: the monitor trips */
.s-safety .monitor {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
}
.alertband {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #a3282b;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 16px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out), opacity 0.3s, padding 0.4s;
  padding-top: 0;
  padding-bottom: 0;
}
.monitor.tripped .alertband {
  max-height: 60px;
  opacity: 1;
  padding-top: 10px;
  padding-bottom: 10px;
}
.alertband .ic {
  width: 17px;
  height: 17px;
}
.log {
  padding: 18px 20px 20px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 2;
  min-height: 250px;
}
.log .ln {
  color: var(--text-3);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s, transform 0.35s;
}
.log .ln.on {
  opacity: 1;
  transform: none;
}
.log .ln .t {
  color: var(--text-4);
  margin-inline-end: 8px;
}
.log .ln.tell {
  color: #f0abfc;
}
.log .ln.hit {
  color: var(--danger);
  font-weight: 700;
}
.log .ln.stop {
  color: var(--danger);
  font-weight: 700;
  letter-spacing: 0.14em;
}
.cursor {
  display: inline-block;
  width: 9px;
  height: 16px;
  background: var(--danger);
  margin-inline-start: 4px;
  vertical-align: -3px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.monitor::before {
  content: '';
  position: absolute;
  inset: -40px;
  z-index: -1;
  border-radius: 40px;
  background: radial-gradient(ellipse, rgba(240, 82, 82, 0.35), transparent 65%);
  opacity: 0;
  transition: opacity 0.6s;
}
.monitor.tripped {
  border-color: rgba(240, 82, 82, 0.55);
  animation: alarm 1.6s ease-in-out infinite;
}
@keyframes alarm {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(240, 82, 82, 0.3), 0 0 90px -10px rgba(240, 82, 82, 0.6);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(240, 82, 82, 0.15), 0 0 50px -20px rgba(240, 82, 82, 0.35);
  }
}
.log .ln .t:empty {
  display: none;
}
.triggers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 34px auto 0;
  max-width: 820px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-2);
  font-size: 13px;
  color: var(--text-2);
}
.chip .ic {
  width: 15px;
  height: 15px;
  color: var(--danger-hi, #f36b6b);
}
.chip.gold {
  color: var(--gold);
  border-color: rgba(242, 207, 127, 0.35);
  background: var(--gold-soft);
}
.chip.blue {
  color: var(--accent-text);
  border-color: rgba(59, 130, 246, 0.35);
  background: var(--accent-soft);
}
.chip.mute {
  color: var(--text-4);
}

/* Built for long sessions: small app cards */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1000px) {
  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .tiles {
    grid-template-columns: 1fr;
  }
}
.feat-tile {
  position: relative;
  background: linear-gradient(180deg, rgba(18, 32, 54, 0.85), rgba(15, 26, 44, 0.85));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.4s var(--ease-out);
}
.feat-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(59, 130, 246, 0.16), transparent 45%);
  opacity: 0;
  transition: opacity 0.3s;
}
.feat-tile:hover {
  border-color: #33496b;
  transform: translateY(-3px);
}
.feat-tile:hover::before {
  opacity: 1;
}
.feat-tile .ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--nav-active);
  color: var(--accent-text);
  border: 1px solid #25497f;
  margin-bottom: 16px;
}
.feat-tile .ico .ic {
  width: 20px;
  height: 20px;
}
.feat-tile h3 {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0;
}
.feat-tile p {
  color: var(--text-3);
  font-size: 14.5px;
  margin-top: 8px;
}

/* In the game: the overlay and the chat on an illustrated game screen */
.game-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #2b3d59;
  background: #05080f;
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.95), 0 0 90px -20px rgba(59, 130, 246, 0.25);
}
.gs-bg {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  filter: brightness(0.62) saturate(0.85) blur(1.5px);
}
.gs-overlay,
.gs-chat {
  position: absolute;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: #f3f4f6;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  text-align: left;
}
.gs-overlay {
  top: 6%;
  left: 5%;
  max-width: 82%;
  padding: 8px 12px;
}
.gs-overlay div:first-child {
  color: #86efac;
}
.gs-chat {
  left: 4%;
  bottom: 5%;
  width: 56%;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.45);
}
.gs-chat .gs-sys {
  color: #f3e38a;
}
@media (max-width: 560px) {
  .gs-overlay,
  .gs-chat {
    font-size: 10.5px;
  }
  .gs-chat {
    width: 70%;
  }
}

/* Numbers */
.s-numbers {
  padding: 90px 0;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  z-index: 2;
}
@media (max-width: 820px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
.stat {
  text-align: center;
  padding: 26px 12px;
  border-radius: var(--radius-lg);
  background: rgba(15, 26, 44, 0.55);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.stat .n {
  font-family: var(--display);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 40px rgba(242, 207, 127, 0.35);
}
.stat .l {
  color: var(--text-2);
  font-size: 14px;
  margin-top: 12px;
}

/* How it works */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1040px;
  margin: 0 auto;
}
@media (max-width: 820px) {
  .steps {
    grid-template-columns: 1fr;
  }
}
.steps::before {
  content: '';
  position: absolute;
  top: 44px;
  left: 16%;
  right: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--accent), transparent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.8s var(--ease-out) 0.3s;
}
.steps.in::before,
html:not(.js) .steps::before {
  transform: scaleX(1);
}
@media (max-width: 820px) {
  .steps::before {
    display: none;
  }
}
.step {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
}
.step .n {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  color: var(--gold);
  background: var(--bg);
  border: 1px solid rgba(242, 207, 127, 0.45);
  box-shadow: 0 0 24px -4px rgba(242, 207, 127, 0.35);
  margin-bottom: 18px;
}
.step h3 {
  font-size: 18px;
  margin: 0 0 8px;
}
.step p {
  color: var(--text-3);
  font-size: 14.5px;
}

/* Pricing */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 940px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .plans {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}
.plan {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 24px;
  text-align: center;
  transition: transform 0.4s var(--ease-out), border-color 0.3s;
}
.plan:hover {
  transform: translateY(-4px);
  border-color: var(--border-2);
}
.plan.best {
  border-color: rgba(242, 207, 127, 0.55);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(242, 207, 127, 0.12), transparent 60%),
    var(--card);
  box-shadow: 0 30px 80px -40px rgba(242, 207, 127, 0.45);
}
.plan.best::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  padding: 1px;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, rgba(242, 207, 127, 0.9) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: orbit 5s linear infinite;
  pointer-events: none;
}
@property --ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes orbit {
  to {
    --ang: 360deg;
  }
}
.plan .tagbest {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #1b1405;
  background: linear-gradient(180deg, #f7dd9f, var(--gold-2));
  padding: 5px 12px;
  border-radius: 999px;
}
.plan h3 {
  font-size: 15px;
  color: var(--text-2);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.plan .price {
  font-family: var(--display);
  font-size: 50px;
  font-weight: 700;
  margin: 10px 0 2px;
  color: var(--text);
}
.plan .per {
  color: var(--text-4);
  font-size: 13px;
  margin-bottom: 22px;
}
.plan .pay {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.trialstrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  max-width: 940px;
  margin: 0 auto 30px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid rgba(59, 130, 246, 0.45);
  background: linear-gradient(100deg, rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0.03) 60%), var(--card);
}
.trialstrip b {
  display: block;
  font-size: 17px;
  color: var(--text);
}
.trialstrip span {
  color: var(--text-3);
  font-size: 14px;
}
.trial .buyrow {
  margin-top: 8px;
}
.buyrow {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 auto 30px;
  max-width: 600px;
}
.buyrow input {
  flex: 1 1 240px;
}
.buyrow input#buyref {
  flex: 0 1 210px;
  text-transform: uppercase;
}
.buyrow input#buyref::placeholder {
  text-transform: none;
}
.reflink {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.reflink input {
  flex: 1 1 280px;
}
.pay-note {
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
  margin-top: 24px;
}
.buyctl {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}
.buyout {
  color: var(--text-3);
  font-size: 13px;
}

/* FAQ */
.faq {
  max-width: 800px;
  margin: 0 auto;
}
details {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 20px;
  margin-bottom: 10px;
  background: var(--card);
  transition: border-color 0.2s;
}
details[open] {
  border-color: var(--border-2);
}
details summary {
  cursor: pointer;
  font-weight: 600;
  padding: 17px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::after {
  content: '+';
  color: var(--gold);
  font-size: 22px;
  font-weight: 400;
  transition: transform 0.25s;
}
details[open] summary::after {
  transform: rotate(45deg);
}
details p {
  color: var(--text-2);
  padding: 0 0 18px;
  margin: 0;
  font-size: 15px;
}

/* Final call */
.final {
  text-align: center;
  padding: 150px 0 160px;
}
.final .mapbg {
  opacity: 0.2;
}
.final .emblem {
  width: 110px;
  height: 110px;
  margin-bottom: 28px;
}
.final .greet {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.24em;
  color: var(--gold);
  text-transform: uppercase;
}
.final h2 {
  font-family: var(--display);
  font-size: clamp(36px, 6vw, 76px);
  margin: 18px 0 18px;
  font-weight: 700;
}
.final p {
  color: var(--text-2);
  max-width: 580px;
  margin: 0 auto 34px;
  font-size: 17.5px;
}

/* Section dividers: a thin gold rule with a diamond */
.rule {
  height: 1px;
  max-width: var(--maxw);
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(242, 207, 127, 0.35), transparent);
  position: relative;
}
.rule::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -4px;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 12px var(--gold);
}

/* ── Features page ─────────────────────────────────────────────────────── */
.fx-hero {
  position: relative;
  padding: 90px 0 60px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.fx-hero h1 {
  font-family: var(--display);
  font-size: clamp(40px, 6.5vw, 80px);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.fx-hero .sub {
  color: var(--text-2);
  max-width: 640px;
  margin: 20px auto 0;
  font-size: 17.5px;
}
.fx-tools {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 34px auto 0;
  max-width: 820px;
}
.fx-search {
  position: relative;
  flex: 1 1 320px;
  max-width: 440px;
}
.fx-search .ic {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-4);
}
.fx-search input {
  width: 100%;
  padding-inline-start: 42px;
  height: 46px;
}
.fx-kinds {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.fx-kinds button {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  height: 46px;
  padding: 0 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-2);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-2);
  transition: all 0.2s;
}
.fx-kinds button:hover {
  color: var(--text);
}
.fx-kinds button.on {
  background: var(--nav-active);
  border-color: #3470cf;
  color: var(--accent-text);
}
.fx-count {
  margin-top: 18px;
  color: var(--text-4);
  font-size: 13px;
}
.fx-layout {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  padding-bottom: 40px;
}
@media (max-width: 960px) {
  .fx-layout {
    grid-template-columns: 1fr;
  }
}
/* The app's own sidebar, as the page's contents */
.fx-nav {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  background: #0c1526;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 10px;
  max-height: calc(100vh - var(--header-h) - 40px);
  overflow: auto;
}
@media (max-width: 960px) {
  .fx-nav {
    display: none;
  }
}
.fx-nav .grp {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-4);
  text-transform: uppercase;
  padding: 10px 10px 6px;
}
.fx-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-2);
  transition: background 0.15s, color 0.15s;
}
.fx-nav a .ic {
  width: 17px;
  height: 17px;
  color: var(--text-3);
}
.fx-nav a:hover {
  background: var(--hover);
  color: var(--text);
}
.fx-nav a.on {
  background: var(--nav-active);
  color: var(--text);
}
.fx-nav a.on .ic {
  color: var(--accent-text);
}
.fx-nav a.on::after {
  content: '';
  margin-inline-start: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 8px var(--good);
}
.fx-nav a.hide,
.fx-nav .grp.hide {
  display: none;
}
.fx-group {
  scroll-margin-top: calc(var(--header-h) + 24px);
  padding: 34px 0 44px;
  border-bottom: 1px solid var(--border);
}
.fx-group:last-child {
  border-bottom: none;
}
.fx-group.hide {
  display: none;
}
.fx-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 34px;
  align-items: center;
  margin-bottom: 26px;
}
.fx-head.noshot {
  grid-template-columns: 1fr;
}
@media (max-width: 1100px) {
  .fx-head {
    grid-template-columns: 1fr;
  }
}
.fx-title {
  display: flex;
  align-items: center;
  gap: 14px;
}
.fx-title .ico {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--nav-active);
  border: 1px solid #25497f;
  color: var(--accent-text);
  box-shadow: 0 0 30px -8px rgba(59, 130, 246, 0.6);
}
.fx-title .ico .ic {
  width: 22px;
  height: 22px;
}
.fx-title h2 {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.fx-kind {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.fx-tag {
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  margin-top: 18px;
}
.fx-sum {
  color: var(--text-2);
  font-size: 15.5px;
  margin-top: 8px;
}
.fx-shot {
  cursor: zoom-in;
  border-radius: 12px;
}
.fx-shot:hover .appframe {
  transform: translateY(-3px);
}
.fx-shot .appframe {
  transition: transform 0.4s var(--ease-out);
}
.fx-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 700px) {
  .fx-grid {
    grid-template-columns: 1fr;
  }
}
.fx-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px 16px 50px;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}
.fx-item:hover {
  border-color: var(--border-2);
  background: #101c30;
}
.fx-item::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 19px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239cc3ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 11px no-repeat;
  border: 1px solid rgba(59, 130, 246, 0.35);
}
.fx-item > b {
  display: block;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
}
.fx-item > span {
  display: block;
  color: var(--text-3);
  font-size: 14px;
  margin-top: 4px;
}
.fx-item > span b {
  color: var(--text-2);
  font-weight: 600;
}
.fx-item.hide {
  display: none;
}
.fx-item mark {
  background: rgba(242, 207, 127, 0.25);
  color: var(--text);
  border-radius: 3px;
  padding: 0 1px;
}
.fx-empty {
  display: none;
  text-align: center;
  color: var(--text-3);
  padding: 60px 0;
}
.fx-empty.on {
  display: block;
}
.fx-cta {
  text-align: center;
  padding: 90px 0 120px;
}
.fx-cta h2 {
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 48px);
}
.fx-cta p {
  color: var(--text-2);
  margin: 14px auto 28px;
  max-width: 560px;
}

/* ── Lightbox ──────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  background: rgba(5, 9, 17, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  cursor: zoom-out;
}
.lightbox.on {
  opacity: 1;
  pointer-events: auto;
}
.lightbox img {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 12px;
  border: 1px solid var(--border-2);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8);
  transform: scale(0.96);
  transition: transform 0.35s var(--ease-out);
}
.lightbox.on img {
  transform: none;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  border-top: 1px solid var(--border);
  padding: 64px 0 40px;
  color: var(--text-4);
  font-size: 13.5px;
  background: linear-gradient(180deg, rgba(12, 21, 38, 0.6), var(--bg));
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 34px;
  margin-bottom: 44px;
}
@media (max-width: 820px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.foot-grid h5 {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}
.foot-grid a {
  display: block;
  color: var(--text-2);
  padding: 4px 0;
}
.foot-grid a:hover {
  color: var(--text);
}
.foot-grid a.brand {
  display: inline-flex;
  padding: 0;
  color: var(--text);
}
.foot-brand p {
  margin-top: 14px;
  max-width: 300px;
  color: var(--text-3);
}
.site-footer .disc {
  max-width: 860px;
  line-height: 1.65;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
.site-footer .disc + .disc {
  border-top: none;
  padding-top: 8px;
}

/* ── Reduced motion: everything in place, nothing moving ───────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal],
  .js .split .w > span,
  .js .cine [data-intro] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .win3d {
    transform: none !important;
  }
  .floaty,
  .s-window .cap {
    opacity: 1 !important;
  }
  .field .why,
  .log .ln {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* The Walker on a real zone map: an illustrated path round a mob's sight
   cone and another's hearing, to a zone line, with you walking it. */
.walker-card .map {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #1a160d;
}
.walker-card .map img {
  position: absolute;
  inset: -4%;
  width: 108%;
  max-width: none;
  height: 108%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.72) contrast(1.05);
}
.walk-svg {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.walk-svg .cone {
  fill: rgba(240, 82, 82, 0.26);
  stroke: rgba(240, 110, 110, 0.8);
  stroke-width: 0.35;
}
.walk-svg .hear {
  fill: rgba(240, 82, 82, 0.16);
  stroke: rgba(240, 110, 110, 0.7);
  stroke-width: 0.35;
  stroke-dasharray: 1.2 1;
}
.walk-svg .trail {
  fill: none;
  stroke: rgba(94, 200, 242, 0.35);
  stroke-width: 0.9;
  stroke-linecap: round;
}
.walk-svg .trail-lit {
  fill: none;
  stroke: #5ec8f2;
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-dasharray: 2.4 1.8;
  animation: trail-run 1.6s linear infinite;
  animation-play-state: paused;
  filter: drop-shadow(0 0 1.2px rgba(94, 200, 242, 0.9));
}
.live .walk-svg .trail-lit {
  animation-play-state: running;
}
@keyframes trail-run {
  to {
    stroke-dashoffset: -4.2;
  }
}
.walk-svg .zl {
  fill: #f2cf7f;
  stroke: rgba(4, 8, 16, 0.9);
  stroke-width: 0.4;
}
.walk-svg .mob-dot {
  fill: var(--danger);
  stroke: rgba(10, 17, 30, 0.8);
  stroke-width: 0.4;
}
.walk-svg .you-dot {
  fill: #fff;
  filter: drop-shadow(0 0 1.5px rgba(156, 195, 255, 0.95));
}
.walker-card .tag {
  position: absolute;
  z-index: 3;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text);
  background: rgba(8, 14, 26, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
.walker-card .t-see {
  left: 44%;
  top: 27%;
}
.walker-card .t-hear {
  left: 16%;
  top: 22%;
}
.walker-card .t-zl {
  right: 6%;
  top: 7%;
}
.walk-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px 4px;
}
.walk-foot .toast {
  position: static;
  flex: 1 1 220px;
  white-space: normal;
}
@media (prefers-reduced-motion: reduce) {
  .walk-svg .trail-lit {
    animation: none;
  }
}
.walk-note {
  margin: 22px 0 0;
  font-size: 13.5px;
  color: var(--text-3);
}

/* Your phone: the chat relay, drawn as a phone with a chat on it (an
   illustration, not a recorded chat). */
.phone {
  width: min(340px, 100%);
  margin: 0 auto;
  border-radius: 34px;
  padding: 12px 12px 18px;
  background: linear-gradient(160deg, #182844, #0c1526 60%);
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.phone-top {
  display: flex;
  justify-content: center;
  padding: 2px 0 8px;
}
.dot-cam {
  width: 64px;
  height: 6px;
  border-radius: 6px;
  background: #050a14;
}
.phone-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px 14px 0 0;
  background: #13213a;
  color: var(--text);
}
.phone-head .ic {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  background: var(--blue);
  color: #0a111e;
}
.phone-head b {
  display: block;
  font-size: 14px;
}
.phone-head span {
  font-size: 12px;
  color: var(--text-3);
}
.phone-screen {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border-radius: 0 0 14px 14px;
  background: #0b1424;
  min-height: 420px;
}
.tg-msg {
  max-width: 88%;
  padding: 9px 11px;
  border-radius: 12px 12px 12px 4px;
  background: #182a46;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
.tg-msg b {
  display: block;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 2px;
}
.tg-msg.tg-me {
  align-self: flex-end;
  border-radius: 12px 12px 4px 12px;
  background: #234a7a;
  font-family: var(--mono, monospace);
}
.tg-drafts {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-2);
  font-size: 12.5px;
}
.tg-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.tg-btn {
  flex: 1 1 auto;
  text-align: center;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(106, 167, 255, 0.16);
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 600;
}

/* With paid time: the Market and the Assistant, each with its screenshot. */
.extra-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 40px;
}
@media (max-width: 900px) {
  .extra-grid {
    grid-template-columns: 1fr;
  }
}
.extra-card {
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
}
.extra-card .fx-shot {
  display: block;
  padding: 16px 16px 0;
}
.extra-body {
  padding: 18px 22px 24px;
}
.extra-body h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  color: var(--text);
}
.extra-body h3 .ic {
  width: 22px;
  height: 22px;
  color: var(--gold);
}
.extra-body p {
  margin-top: 8px;
  color: var(--text-2);
}
.extra-ticks {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 8px;
}
.extra-ticks li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--text);
  font-size: 14.5px;
}
.extra-ticks .ic {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--good);
}