/* ==========================================================================
   IN7 GAME — Global stylesheet
   Layout · Navigation · Buttons · Cards · Wheel system · Footer · Utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  /* Hard guarantee: the page never scrolls sideways. */
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: 100%;
  overflow-x: hidden;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Ambient table-felt glow behind the whole document */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(58% 42% at 12% 4%,  rgba(196, 18, 48, 0.16) 0%, rgba(11, 10, 12, 0) 68%),
    radial-gradient(52% 40% at 90% 12%, rgba(214, 169, 74, 0.10) 0%, rgba(11, 10, 12, 0) 66%),
    radial-gradient(70% 50% at 50% 100%, rgba(142, 13, 34, 0.13) 0%, rgba(11, 10, 12, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

body > * { position: relative; z-index: 1; }

img,
svg,
video,
canvas { display: block; max-width: 100%; height: auto; }

img { border-style: none; }

a {
  color: var(--color-gold);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover { color: var(--color-gold-bright); }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

input,
textarea,
select { font: inherit; color: inherit; }

ul, ol { list-style: none; }

table { border-collapse: collapse; width: 100%; }

hr { border: none; border-top: 1px solid var(--color-border-gold-soft); }

::selection { background: var(--color-crimson); color: #fff; }

/* Scrollbar (WebKit + Firefox) */
* { scrollbar-width: thin; scrollbar-color: var(--color-gold-deep) var(--color-bg-deep); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-gold-deep), var(--color-crimson-deep));
  border-radius: var(--r-pill);
  border: 2px solid var(--color-bg-deep);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--color-gold), var(--color-crimson)); }

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--color-text-primary);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 700; letter-spacing: 0.01em; }

p { text-wrap: pretty; }

strong, b { color: var(--color-text-primary); font-weight: 700; }

em { font-style: italic; color: var(--color-gold-bright); }

small { font-size: var(--fs-xs); }

.u-gold-text {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-gold);
}

.u-crimson-text { color: #E8536B; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--sp-4);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold));
  flex: none;
}

.eyebrow--center::after {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(270deg, transparent, var(--color-gold));
  flex: none;
}

.lede {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
  max-width: 62ch;
}

.prose > * + * { margin-top: var(--sp-4); }
.prose p { color: var(--color-text-muted); }
.prose h3 { margin-top: var(--sp-6); color: var(--color-text-primary); }
.prose h4 { margin-top: var(--sp-5); color: var(--color-gold-bright); }
.prose strong { color: var(--color-text-primary); }
.prose a { border-bottom: 1px solid var(--color-border-gold); }

.prose ul,
.prose ol { display: grid; gap: var(--sp-3); padding-left: 0; }

.prose li {
  position: relative;
  padding-left: 1.6em;
  color: var(--color-text-muted);
}

.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 8px rgba(214, 169, 74, 0.6);
}

.prose ol { counter-reset: pl; }
.prose ol > li { counter-increment: pl; }
.prose ol > li::before {
  content: counter(pl);
  position: absolute;
  left: 0;
  top: 0.28em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-gold);
  border: 1px solid var(--color-border-gold);
  border-radius: 50%;
  width: 1.55em;
  height: 1.55em;
  display: grid;
  place-items: center;
}

/* --------------------------------------------------------------------------
   3. Layout shell — generous left/right gutters, zero horizontal scroll
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: calc(var(--container) + var(--shell) * 2);
  margin-inline: auto;
  padding-inline: var(--shell);
}

.shell--wide { max-width: calc(var(--container-wide) + var(--shell) * 2); }
.shell--text { max-width: calc(var(--container-text) + var(--shell) * 2); }

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight { padding-block: var(--section-y-tight); }
.section--alt { background: var(--color-bg-alt); }
.section--deep { background: var(--color-bg-deep); }

.section--felt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-felt);
  pointer-events: none;
}

/* Alternating red/black roulette-pocket wedges — decorative, low opacity */
.wedge-band {
  position: absolute;
  inset-inline: 0;
  height: 190px;
  pointer-events: none;
  opacity: 0.5;
  background:
    repeating-conic-gradient(from 0deg at 50% 130%,
      rgba(196, 18, 48, 0.16) 0deg 4deg,
      rgba(0, 0, 0, 0) 4deg 8deg);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent);
}

.wedge-band--top { top: 0; }
.wedge-band--bottom {
  bottom: 0;
  mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
}

.section-head { margin-bottom: var(--sp-8); max-width: 68ch; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--sp-4); color: var(--color-text-muted); font-size: var(--fs-body-lg); }

.rule-gold {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--color-border-gold) 22%, var(--color-gold) 50%, var(--color-border-gold) 78%, transparent);
}

/* Grid helpers */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 216px), 1fr)); }

.stack { display: grid; gap: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* --------------------------------------------------------------------------
   4. Accessibility helpers
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: var(--z-top);
  background: var(--color-gold);
  color: var(--color-text-on-gold);
  font-weight: 800;
  font-size: var(--fs-sm);
  padding: 0.7em 1.4em;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus { top: 0; color: var(--color-text-on-gold); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* --------------------------------------------------------------------------
   5. Logo — supplied artwork, unaltered (only transparent padding hidden)
   -------------------------------------------------------------------------- */
.logo {
  display: block;
  position: relative;
  flex: none;
  width: var(--logo-box-w);
  height: var(--logo-h);
  overflow: hidden;
}

.logo img {
  position: absolute;
  left: var(--logo-off-x);
  top: var(--logo-off-y);
  width: var(--logo-img-w);
  height: var(--logo-img-h);
  max-width: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7));
  transition: transform var(--dur-mid) var(--ease-out);
}

.logo:hover img { transform: scale(1.03); }

.logo--lg { --logo-h: 48px; }
.logo--xl { --logo-h: 62px; }

/* A restrained gold hairline plate keeps the white mark legible on black
   without touching the artwork itself. */
.logo-plate {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--color-border-gold);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(214, 169, 74, 0.10), rgba(11, 10, 12, 0.5));
  box-shadow: var(--shadow-inset-top);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-py: 0.92em;
  --btn-px: 1.85em;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--r-pill);
  cursor: pointer;
  isolation: isolate;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.btn:active { transform: translateY(1px) scale(0.99); }

.btn__icon { flex: none; width: 1.15em; height: 1.15em; }

/* --- Primary: stacked casino chip (concentric gold rings, crimson fill) --- */
.btn--chip {
  color: #FFF6F1;
  background: var(--grad-crimson);
  border: 1px solid rgba(243, 213, 133, 0.55);
  box-shadow:
    0 0 0 3px rgba(11, 10, 12, 0.9),
    0 0 0 4px rgba(214, 169, 74, 0.55),
    0 10px 26px rgba(142, 13, 34, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -8px 18px rgba(0, 0, 0, 0.34);
}

/* chip notches — the white segments on a real casino chip rim */
.btn--chip::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 3px;
  background: repeating-conic-gradient(from 12deg at 50% 50%,
    rgba(243, 213, 133, 0.85) 0deg 5deg,
    rgba(243, 213, 133, 0) 5deg 22deg);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  opacity: 0.75;
  pointer-events: none;
}

/* inner ring — the chip's centre disc */
.btn--chip::after {
  content: "";
  position: absolute;
  inset: 5px 10px;
  border-radius: inherit;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  pointer-events: none;
  z-index: -1;
}

.btn--chip:hover {
  background: linear-gradient(150deg, #E01B42 0%, #C41230 50%, #9C0F26 100%);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 3px rgba(11, 10, 12, 0.9),
    0 0 0 5px rgba(243, 213, 133, 0.8),
    0 16px 34px rgba(196, 18, 48, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn--chip:hover { color: #fff; }

/* Pulsing chip light */
.btn--chip.is-pulse { animation: chipPulse 2.9s var(--ease-in-out) infinite; }

@keyframes chipPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(11, 10, 12, 0.9), 0 0 0 4px rgba(214, 169, 74, 0.5),  0 10px 26px rgba(142, 13, 34, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
  50%      { box-shadow: 0 0 0 3px rgba(11, 10, 12, 0.9), 0 0 0 6px rgba(243, 213, 133, 0.42), 0 14px 40px rgba(196, 18, 48, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
}

/* --- Gold solid --- */
.btn--gold {
  color: var(--color-text-on-gold);
  background: var(--grad-gold);
  border: 1px solid rgba(243, 213, 133, 0.7);
  box-shadow: 0 10px 26px rgba(154, 118, 40, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn--gold:hover {
  color: var(--color-text-on-gold);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(214, 169, 74, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* --- Outline / glass --- */
.btn--ghost {
  color: var(--color-gold-bright);
  background: rgba(31, 27, 31, 0.55);
  border: 1px solid var(--color-border-gold);
  backdrop-filter: blur(8px);
}

.btn--ghost:hover {
  color: var(--color-text-on-gold);
  background: var(--color-gold);
  border-color: var(--color-gold-bright);
  transform: translateY(-2px);
}

/* --- Telegram --- */
.btn--telegram {
  color: #EAF6FF;
  background: linear-gradient(150deg, #2AABEE 0%, #229ED9 55%, #1B87BC 100%);
  border: 1px solid rgba(234, 246, 255, 0.4);
  box-shadow: 0 10px 26px rgba(34, 158, 217, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn--telegram:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(42, 171, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn--telegram-ghost {
  color: #8AD3F7;
  background: rgba(34, 158, 217, 0.1);
  border: 1px solid rgba(42, 171, 238, 0.45);
}

.btn--telegram-ghost:hover {
  color: #fff;
  background: rgba(34, 158, 217, 0.28);
  border-color: #2AABEE;
  transform: translateY(-2px);
}

.btn--lg  { --btn-py: 1.12em; --btn-px: 2.35em; font-size: var(--fs-body); }
.btn--sm  { --btn-py: 0.72em; --btn-px: 1.3em;  font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* Icon-only round button */
.btn-round {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--color-border-gold);
  background: rgba(31, 27, 31, 0.7);
  color: var(--color-gold);
  transition: all var(--dur-fast) var(--ease-out);
}

.btn-round:hover {
  color: var(--color-text-on-gold);
  background: var(--color-gold);
  border-color: var(--color-gold-bright);
  box-shadow: var(--shadow-gold-glow);
}

.btn-round--tg { color: #8AD3F7; border-color: rgba(42, 171, 238, 0.5); }
.btn-round--tg:hover { color: #fff; background: #229ED9; border-color: #2AABEE; box-shadow: 0 0 22px rgba(34, 158, 217, 0.55); }

.btn-round svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   7. Badges, pills, chips
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.42em 0.95em;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1;
}

.badge--gold {
  color: var(--color-text-on-gold);
  background: var(--grad-gold);
  box-shadow: 0 4px 14px rgba(154, 118, 40, 0.4);
}

.badge--gold-ghost {
  color: var(--color-gold-bright);
  border: 1px solid var(--color-border-gold);
  background: var(--color-gold-soft);
}

.badge--crimson {
  color: #FFEDF0;
  background: var(--grad-crimson);
  box-shadow: 0 4px 14px rgba(142, 13, 34, 0.45);
}

.badge--dark {
  color: var(--color-text-muted);
  background: rgba(11, 10, 12, 0.7);
  border: 1px solid var(--color-border-dark);
}

.badge--live {
  color: #FFDDE3;
  background: rgba(196, 18, 48, 0.18);
  border: 1px solid rgba(196, 18, 48, 0.5);
}

.badge--live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #FF2E52;
  box-shadow: 0 0 8px #FF2E52;
  animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.78); } }

.tag {
  display: inline-block;
  padding: 0.3em 0.72em;
  border-radius: var(--r-xs);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-gold);
  background: var(--color-gold-soft);
  border: 1px solid var(--color-border-gold-soft);
}

/* Keyword pills (semantic SEO cluster) */
.keyword-pills { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.keyword-pills li {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  padding: 0.44em 0.9em;
  border-radius: var(--r-pill);
  border: 1px solid var(--color-border-dark);
  background: rgba(31, 27, 31, 0.6);
  transition: all var(--dur-fast) var(--ease-out);
}

.keyword-pills li:hover {
  color: var(--color-gold-bright);
  border-color: var(--color-border-gold);
  background: var(--color-gold-soft);
}

/* --------------------------------------------------------------------------
   8. Surfaces & cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--grad-surface);
  border: 1px solid var(--color-border-dark);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(80% 60% at 50% 0%, rgba(214, 169, 74, 0.12), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
  pointer-events: none;
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--color-border-gold);
  box-shadow: var(--shadow-card-hover);
}

.card:hover::after { opacity: 1; }

.card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: var(--sp-4);
  border-radius: 50%;
  color: var(--color-gold-bright);
  background: radial-gradient(circle at 30% 25%, rgba(214, 169, 74, 0.28), rgba(11, 10, 12, 0.9));
  border: 1px solid var(--color-border-gold);
  box-shadow: inset 0 0 18px rgba(214, 169, 74, 0.18);
}

.card__icon svg { width: 26px; height: 26px; }

.card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--color-text-muted); font-size: var(--fs-sm); }

/* Numbered card (step) */
.card--step { padding-top: var(--sp-6); }

.card__num {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-5);
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(214, 169, 74, 0.35);
  opacity: 0.9;
  pointer-events: none;
}

/* Glass panel */
.panel {
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--r-xl);
  background: var(--color-surface-glass);
  border: 1px solid var(--color-border-gold-soft);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card);
}

.panel--gold-rim {
  border-color: var(--color-border-gold);
  box-shadow: var(--shadow-card), inset 0 0 40px rgba(214, 169, 74, 0.06);
}

/* Stat tile */
.stat {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  border-radius: var(--r-md);
  background: rgba(11, 10, 12, 0.55);
  border: 1px solid var(--color-border-dark);
  transition: all var(--dur-mid) var(--ease-out);
}

.stat:hover { border-color: var(--color-border-gold); background: rgba(31, 27, 31, 0.8); }

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem);
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

/* Grid and flex children default to min-width:auto, which means one wide child
   (a scrollable table, a long unbroken string) can force its whole column open
   and push the layout past the viewport. Every layout container in this project
   opts its children out of that behaviour. */
.grid > *,
.split > *,
.stack > *,
.longform > *,
.bonus__grid > *,
.pay__grid > *,
.ogshow__grid > *,
.cats__grid > *,
.selector > *,
.install > *,
.dl-bonus > *,
.dl-hero__grid > *,
.ct-grid > *,
.lg-layout > *,
.gd-body > *,
.gd-hero__grid > *,
.hero__inner > *,
.games-hero__grid > *,
.safety__grid > *,
.responsible > *,
.contrast > *,
.plat > * { min-width: 0; }

/* Table */
.table-wrap {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border-dark);
  background: rgba(11, 10, 12, 0.6);
  -webkit-overflow-scrolling: touch;
}

.table-wrap table { min-width: 540px; font-size: var(--fs-sm); }

.table-wrap th,
.table-wrap td {
  padding: 0.95rem 1.15rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border-dark);
}

.table-wrap thead th {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  background: rgba(214, 169, 74, 0.07);
  white-space: nowrap;
}

.table-wrap tbody tr:last-child td { border-bottom: none; }
.table-wrap tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.table-wrap tbody tr:hover { background: rgba(214, 169, 74, 0.05); }
.table-wrap td { color: var(--color-text-muted); }
.table-wrap td:first-child { color: var(--color-text-primary); font-weight: 600; }

/* --------------------------------------------------------------------------
   9. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  transition: background var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 5, 7, 0.92), rgba(6, 5, 7, 0.35) 70%, transparent);
  pointer-events: none;
}

.site-header.is-stuck {
  background: rgba(6, 5, 7, 0.88);
  backdrop-filter: blur(16px) saturate(1.1);
  border-bottom-color: var(--color-border-gold);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
}

.site-header.is-stuck::before { opacity: 0; }

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--nav-h);
  transition: height var(--dur-mid) var(--ease-out);
}

.site-header.is-stuck .nav { height: calc(var(--nav-h) - 8px); }

.nav__brand { display: flex; align-items: center; gap: 0.75rem; margin-right: auto; }

.nav__list {
  display: none;
  align-items: center;
  gap: 0.15rem;
}

.nav__link {
  position: relative;
  display: block;
  padding: 0.6rem 0.85rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.28rem;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-gold);
  transform: translateX(-50%);
  transition: width var(--dur-mid) var(--ease-out);
}

.nav__link:hover { color: var(--color-text-primary); background: rgba(214, 169, 74, 0.07); }
.nav__link:hover::after { width: 46%; }

.nav__link.is-active { color: var(--color-gold-bright); }
.nav__link.is-active::after { width: 58%; }

.nav__actions { display: flex; align-items: center; gap: 0.6rem; }
.nav__cta { display: none; }

/* Burger */
.burger {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--r-sm);
  border: 1px solid var(--color-border-gold-soft);
  background: rgba(31, 27, 31, 0.7);
}

.burger span {
  display: block;
  width: 20px; height: 2px;
  border-radius: 2px;
  background: var(--color-gold);
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-fast) linear;
}

.burger span + span { margin-top: 5px; }

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  padding: calc(var(--nav-h) + 1.5rem) var(--shell) var(--sp-8);
  background: linear-gradient(180deg, rgba(6, 5, 7, 0.99), rgba(17, 12, 15, 0.99));
  backdrop-filter: blur(10px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out),
              visibility var(--dur-mid) linear;
}

.drawer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 0deg at 50% 42%,
    rgba(196, 18, 48, 0.09) 0deg 5deg, transparent 5deg 10deg);
  pointer-events: none;
}

.drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.drawer__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.35rem;
  font-family: var(--font-display);
  font-size: 1.42rem;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-gold-soft);
}

.drawer__link::after {
  content: "→";
  color: var(--color-gold);
  font-size: 1rem;
  opacity: 0.55;
  transition: transform var(--dur-fast) var(--ease-out);
}

.drawer__link:hover { color: var(--color-gold-bright); }
.drawer__link:hover::after { transform: translateX(4px); opacity: 1; }
.drawer__link.is-active { color: var(--color-gold-bright); }

.drawer__foot { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }

body.is-locked { overflow: hidden; }

/* Desktop nav */
@media (min-width: 992px) {
  .nav__list { display: flex; }
  .nav__cta  { display: inline-flex; }
  .burger    { display: none; }
  .drawer    { display: none; }
}

/* Page top offset for the fixed header */
.page-top { padding-top: var(--nav-h); }

/* --------------------------------------------------------------------------
   10. Page hero (interior pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-block: clamp(3.25rem, 2rem + 5vw, 6rem) var(--section-y-tight);
  overflow: hidden;
  border-bottom: 1px solid var(--color-border-gold-soft);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 90% at 8% 0%, rgba(196, 18, 48, 0.2), transparent 62%),
    radial-gradient(60% 80% at 96% 20%, rgba(214, 169, 74, 0.14), transparent 60%);
  pointer-events: none;
}

/* Faint wheel etched behind interior page heroes */
.page-hero__wheel {
  position: absolute;
  top: -40%;
  right: -14%;
  width: min(660px, 78vw);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.3;
  background:
    repeating-conic-gradient(from 0deg,
      rgba(196, 18, 48, 0.5) 0deg 9.73deg,
      rgba(6, 5, 7, 0.85) 9.73deg 19.46deg);
  mask: radial-gradient(circle, transparent 34%, #000 36%, #000 76%, transparent 78%);
  -webkit-mask: radial-gradient(circle, transparent 34%, #000 36%, #000 76%, transparent 78%);
  animation: wheelSpin 90s linear infinite;
}

@keyframes wheelSpin { to { transform: rotate(360deg); } }

.page-hero__inner { position: relative; }

/* A lean variant for pages that don't need the full promo hero — just a
   breadcrumb and a title before the page gets on with it. */
.page-hero--compact {
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 1rem + 2vw, 2.25rem));
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

.page-hero--compact h1 { margin-top: var(--sp-2); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
  margin-bottom: var(--sp-4);
}

.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-gold); }
.breadcrumb li { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb li + li::before { content: "/"; color: var(--color-gold-deep); }
.breadcrumb [aria-current] { color: var(--color-gold); }

/* --------------------------------------------------------------------------
   11. Roulette wheel component (shared)
   -------------------------------------------------------------------------- */
.wheel {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}

.wheel__rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--grad-gold);
  box-shadow:
    0 0 0 1px rgba(11, 10, 12, 0.7),
    0 0 60px rgba(214, 169, 74, 0.28),
    inset 0 2px 10px rgba(255, 255, 255, 0.35);
}

.wheel__pockets {
  position: absolute;
  inset: 5.5%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    #C41230 0deg 9.73deg,
    #101013 9.73deg 19.46deg);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
  will-change: transform;
}

.wheel__frets {
  position: absolute;
  inset: 5.5%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(243, 213, 133, 0.85) 0deg 0.5deg,
    transparent 0.5deg 9.73deg);
  mask: radial-gradient(circle, transparent 46%, #000 48%);
  -webkit-mask: radial-gradient(circle, transparent 46%, #000 48%);
  will-change: transform;
}

.wheel__hub {
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #F3D585 0%, #D6A94A 30%, #9A7628 62%, #5E4715 100%);
  box-shadow:
    0 0 0 4px rgba(11, 10, 12, 0.85),
    0 0 30px rgba(214, 169, 74, 0.4),
    inset 0 -6px 16px rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
}

.wheel__hub::before,
.wheel__hub::after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(11, 10, 12, 0.55), transparent);
  border-radius: 2px;
}

.wheel__hub::before { width: 84%; height: 8%; }
.wheel__hub::after  { width: 8%; height: 84%; }

.wheel__ball {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.4%;
  aspect-ratio: 1;
  margin: -2.2% 0 0 -2.2%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0%, #F3D585 42%, #B8892E 100%);
  box-shadow: 0 0 14px rgba(243, 213, 133, 0.95), 0 2px 6px rgba(0, 0, 0, 0.6);
  transform-origin: center;
  will-change: transform;
  z-index: 3;
}

.wheel__glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, transparent 38%, transparent 62%, rgba(255, 255, 255, 0.06) 100%);
  pointer-events: none;
  z-index: 4;
}

/* --------------------------------------------------------------------------
   12. Ball-trail scroll thread
   -------------------------------------------------------------------------- */
.ball-trail {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1240px, 98%);
  height: 100%;
  pointer-events: none;
  /* Sections inside the trail zone paint their own opaque backgrounds, so the
     thread has to sit above them. `screen` keeps it a glow rather than an
     obstruction where it crosses text. */
  z-index: 3;
  opacity: 0.8;
  mix-blend-mode: screen;
  overflow: hidden;
}

.ball-trail svg { width: 100%; height: 100%; }

.ball-trail__path {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 4 17;
  opacity: 0.75;
  filter: drop-shadow(0 0 7px rgba(214, 169, 74, 0.7));
}

.ball-trail__ball {
  fill: var(--color-gold-bright);
  filter: drop-shadow(0 0 10px rgba(243, 213, 133, 0.9));
}

/* --------------------------------------------------------------------------
   13. Reveal animations (IntersectionObserver driven)
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-settle);
  will-change: opacity, transform;
}

[data-reveal="up"]    { transform: translateY(34px); }
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-38px); }
[data-reveal="right"] { transform: translateX(38px); }
[data-reveal="zoom"]  { transform: scale(0.93); }

/* spin-stop: the card arrives like a wheel slowing into its pocket */
[data-reveal="spin"] {
  transform: perspective(1100px) rotateZ(-16deg) rotateY(22deg) scale(0.86);
  transform-origin: 50% 120%;
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   14. Game cards
   -------------------------------------------------------------------------- */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr));
  gap: clamp(0.75rem, 0.4rem + 1vw, 1.35rem);
}

.game-grid--lg { grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr)); }

/* A 196px (or even 158px) minimum leaves room for only one or two columns on
   a phone, so every card renders enormous and the page turns into an endless
   scroll of oversized thumbnails. Force a tight grid below 560px instead. */
@media (max-width: 560px) {
  .game-grid,
  .game-grid--lg {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.55rem;
  }
}

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--grad-surface);
  border: 1px solid var(--color-border-dark);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  transition: transform var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}

.game-card:hover,
.game-card:focus-within {
  transform: translateY(-7px);
  border-color: var(--color-gold);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6), 0 0 24px rgba(214, 169, 74, 0.22);
}

.game-card__media {
  position: relative;
  aspect-ratio: 211 / 260;
  overflow: hidden;
  background: #0F0D10;
}

.game-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.game-card:hover .game-card__media img { transform: scale(1.07); }

.game-card__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.22) 48%, transparent 58%);
  transform: translateX(-110%);
  transition: transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

.game-card:hover .game-card__shine { transform: translateX(110%); }

.game-card__tag {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3em 0.6em;
  border-radius: var(--r-xs);
  color: var(--color-text-on-gold);
  background: var(--grad-gold);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

.game-card__rtp {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.3em 0.55em;
  border-radius: var(--r-xs);
  color: var(--color-gold-bright);
  background: rgba(6, 5, 7, 0.82);
  border: 1px solid var(--color-border-gold-soft);
}

.game-card__body {
  padding: 0.7rem 0.8rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.game-card__name {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.game-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: var(--color-text-dim);
  margin-top: auto;
}

.game-card__stars { color: var(--color-gold); letter-spacing: 0.06em; font-size: 0.7rem; }

.game-card__link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.game-card__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.game-card__hover-cta {
  position: absolute;
  inset-inline: 0.5rem;
  bottom: 0.5rem;
  z-index: 2;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.5em;
  border-radius: var(--r-xs);
  color: #FFF3F5;
  background: var(--grad-crimson);
  border: 1px solid rgba(243, 213, 133, 0.45);
  opacity: 0;
  transform: translateY(8px);
  transition: all var(--dur-mid) var(--ease-out);
  pointer-events: none;
}

.game-card:hover .game-card__hover-cta,
.game-card:focus-within .game-card__hover-cta { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   15. Phone / app mockup (CSS device frame around supplied artwork)
   -------------------------------------------------------------------------- */
.mockup {
  --phone-w: clamp(232px, 20vw + 130px, 330px);
  position: relative;
  width: var(--phone-w);
  flex: none;
}

.mockup--lg { --phone-w: clamp(258px, 22vw + 150px, 372px); }

.phone {
  position: relative;
  width: 100%;
  aspect-ratio: 848 / 1855;
  border-radius: clamp(26px, 9%, 44px);
  padding: 2.6%;
  background:
    linear-gradient(158deg, #4A4048 0%, #16141a 18%, #100E12 52%, #221D24 82%, #59505C 100%);
  box-shadow:
    0 0 0 1px rgba(243, 213, 133, 0.30),
    0 34px 70px rgba(0, 0, 0, 0.72),
    0 0 60px rgba(196, 18, 48, 0.20),
    inset 0 1px 1px rgba(255, 255, 255, 0.22);
  transform-style: preserve-3d;
}

.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: clamp(20px, 7%, 36px);
  overflow: hidden;
  background: #08070A;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.9);
}

.phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* moving screen content (screenshot rail) */
.phone__rail {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform var(--dur-slow) var(--ease-settle);
}

.phone__rail > * { flex: 0 0 100%; height: 100%; }

/* notch / dynamic island */
.phone__notch {
  position: absolute;
  top: 1.6%;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 1.35%;
  min-height: 14px;
  border-radius: var(--r-pill);
  background: #050406;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  z-index: 3;
}

.phone__notch::after {
  content: "";
  position: absolute;
  right: 14%;
  top: 50%;
  transform: translateY(-50%);
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2C3A52, #07070B 70%);
  box-shadow: 0 0 3px rgba(120, 170, 255, 0.5);
}

/* glare sweep across the glass */
.phone__glare {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.phone__glare::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -80%;
  width: 60%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 40%, rgba(255, 255, 255, 0.30) 50%, rgba(255, 255, 255, 0.16) 60%, transparent);
  transform: rotate(16deg);
  animation: glareSweep 6.5s var(--ease-in-out) infinite;
}

@keyframes glareSweep {
  0%        { left: -80%; opacity: 0; }
  12%       { opacity: 1; }
  48%, 100% { left: 130%; opacity: 0; }
}

/* side buttons */
.phone__btn {
  position: absolute;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #5B5260, #221E26);
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.6);
}

.phone__btn--power { right: -3px; top: 24%; height: 9%; }
.phone__btn--vol-a { left: -3px; top: 18%; height: 5%; }
.phone__btn--vol-b { left: -3px; top: 25%; height: 8%; }

/* float animation */
.mockup--float .phone { animation: phoneFloat 7s var(--ease-in-out) infinite; }

@keyframes phoneFloat {
  0%, 100% { transform: perspective(1400px) rotateY(-11deg) rotateX(3deg) translateY(0) rotateZ(-1.2deg); }
  50%      { transform: perspective(1400px) rotateY(-6deg)  rotateX(1deg) translateY(-16px) rotateZ(0.6deg); }
}

.mockup--tilt-r .phone { animation-name: phoneFloatR; }

@keyframes phoneFloatR {
  0%, 100% { transform: perspective(1400px) rotateY(9deg) rotateX(2deg) translateY(0) rotateZ(1.2deg); }
  50%      { transform: perspective(1400px) rotateY(4deg) rotateX(0deg) translateY(-14px) rotateZ(-0.5deg); }
}

/* reflection under the device */
.mockup__reflect {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -6%;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(214, 169, 74, 0.32), rgba(196, 18, 48, 0.12) 45%, transparent 72%);
  filter: blur(10px);
  animation: reflectPulse 7s var(--ease-in-out) infinite;
  pointer-events: none;
}

@keyframes reflectPulse {
  0%, 100% { opacity: 0.75; transform: scaleX(1); }
  50%      { opacity: 0.5;  transform: scaleX(0.9); }
}

/* floating chips / coins around the device */
.mockup__orbit {
  position: absolute;
  inset: -7%;
  pointer-events: none;
  z-index: -1;
}

.chip-float {
  position: absolute;
  width: 44px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, #F3D585 0deg 18deg, #C41230 18deg 36deg);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55), inset 0 0 0 4px rgba(11, 10, 12, 0.55), inset 0 0 0 6px rgba(243, 213, 133, 0.7);
  opacity: 0.9;
  animation: chipDrift 9s var(--ease-in-out) infinite;
}

.chip-float::after {
  content: "";
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #F6E9C4, #C89B34);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}

.chip-float--a { top: 4%;   left: -4%;  width: 46px; animation-delay: 0s; }
.chip-float--b { top: 46%;  right: -5%; width: 34px; animation-delay: -2.6s; }
.chip-float--c { bottom: 9%; left: 1%;  width: 28px; animation-delay: -5.1s; }

@keyframes chipDrift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  33%      { transform: translate3d(10px, -20px, 0) rotate(120deg); }
  66%      { transform: translate3d(-8px, 12px, 0) rotate(240deg); }
}

/* --------------------------------------------------------------------------
   16. Chip-stack bonus counter
   -------------------------------------------------------------------------- */
.chipstack {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.6rem, 2vw, 1.6rem);
  min-height: 210px;
}

.chipstack__col {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2px;
}

.chipstack__chip {
  width: clamp(52px, 8vw, 76px);
  height: clamp(13px, 2vw, 18px);
  border-radius: var(--r-pill);
  background: var(--chip-bg, var(--grad-crimson));
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -3px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(243, 213, 133, 0.5);
  opacity: 0;
  transform: translateY(-46px) scale(0.9);
  transition: opacity 0.4s var(--ease-out), transform 0.62s var(--ease-settle);
}

.chipstack__chip.is-on { opacity: 1; transform: translateY(0) scale(1); }

.chipstack__col--gold .chipstack__chip { --chip-bg: var(--grad-gold); }
.chipstack__col--dark .chipstack__chip {
  --chip-bg: linear-gradient(150deg, #5A4E5E 0%, #322B36 55%, #1C1820 100%);
}

.chipstack__label {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.chipstack__total {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 22px rgba(214, 169, 74, 0.35));
}

/* --------------------------------------------------------------------------
   17. Radial category wheel
   -------------------------------------------------------------------------- */
.catwheel {
  position: relative;
  width: min(430px, 88vw);
  aspect-ratio: 1;
  margin-inline: auto;
  flex: none;
}

.catwheel__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from -30deg,
      rgba(196, 18, 48, 0.5)   0deg 60deg,
      rgba(16, 16, 19, 0.85)  60deg 120deg,
      rgba(196, 18, 48, 0.5) 120deg 180deg,
      rgba(16, 16, 19, 0.85) 180deg 240deg,
      rgba(196, 18, 48, 0.5) 240deg 300deg,
      rgba(16, 16, 19, 0.85) 300deg 360deg);
  border: 2px solid var(--color-border-gold);
  box-shadow: 0 0 0 6px rgba(11, 10, 12, 0.8), 0 0 50px rgba(214, 169, 74, 0.2), inset 0 0 60px rgba(0, 0, 0, 0.7);
  transition: transform 0.9s var(--ease-settle);
}

.catwheel__spokes {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from -30deg,
    rgba(243, 213, 133, 0.6) 0deg 0.4deg,
    transparent 0.4deg 60deg);
  pointer-events: none;
}

/* The segment holder must fill the wheel: the pockets are positioned with
   percentage offsets, and a zero-height holder would collapse every `top`. */
.catwheel__segs {
  position: absolute;
  inset: 0;
}

.catwheel__seg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 33%;
  display: grid;
  gap: 0.15rem;
  place-items: center;
  padding: 0.55rem 0.4rem;
  border-radius: var(--r-md);
  text-align: center;
  color: var(--color-text-muted);
  background: rgba(6, 5, 7, 0.55);
  border: 1px solid transparent;
  transform: translate(-50%, -50%);
  transition: all var(--dur-mid) var(--ease-out);
  cursor: pointer;
}

.catwheel__seg:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-gold);
  background: rgba(6, 5, 7, 0.85);
  transform: translate(-50%, -50%) scale(1.08);
}

.catwheel__seg.is-active {
  color: var(--color-text-on-gold);
  background: var(--grad-gold);
  border-color: var(--color-gold-bright);
  box-shadow: var(--shadow-gold-glow);
  transform: translate(-50%, -50%) scale(1.1);
}

.catwheel__seg svg { width: 24px; height: 24px; }

.catwheel__seg span {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

.catwheel__seg small { font-size: 0.6rem; opacity: 0.75; }

.catwheel__hub {
  position: absolute;
  inset: 33%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0.5rem;
  background: radial-gradient(circle at 34% 26%, #241F26, #0B0A0C 72%);
  border: 1px solid var(--color-border-gold);
  box-shadow: 0 0 0 5px rgba(11, 10, 12, 0.9), inset 0 0 26px rgba(214, 169, 74, 0.14);
  pointer-events: none;
}

.catwheel__hub-count {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.15rem);
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.catwheel__hub-label {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-top: 0.25rem;
}

.catwheel__marker {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 16px solid var(--color-gold-bright);
  filter: drop-shadow(0 2px 6px rgba(243, 213, 133, 0.7));
  z-index: 4;
}

/* fallback list of category buttons (also used on mobile) */
.cat-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.66rem 1.05rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: rgba(31, 27, 31, 0.7);
  border: 1px solid var(--color-border-dark);
  transition: all var(--dur-fast) var(--ease-out);
}

.cat-tab svg { width: 16px; height: 16px; flex: none; }
.cat-tab b { color: var(--color-gold); font-weight: 800; }

.cat-tab:hover { color: var(--color-text-primary); border-color: var(--color-border-gold); }

.cat-tab.is-active {
  color: var(--color-text-on-gold);
  background: var(--grad-gold);
  border-color: var(--color-gold-bright);
}

.cat-tab.is-active b { color: rgba(20, 16, 12, 0.7); }

/* --------------------------------------------------------------------------
   18. Screenshot slider
   -------------------------------------------------------------------------- */
.shots {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-4);
}

.shots__viewport { overflow: hidden; cursor: grab; }
.shots__viewport.is-dragging { cursor: grabbing; }

.shots__track {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.75rem);
  transition: transform 0.72s var(--ease-settle);
  will-change: transform;
}

.shots__item {
  flex: 0 0 auto;
  width: clamp(196px, 24vw, 264px);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out);
  opacity: 0.44;
  filter: saturate(0.65);
  transform: scale(0.9);
}

.shots__item.is-current {
  opacity: 1;
  filter: none;
  transform: scale(1.02);
}

.shots__item .phone { box-shadow: 0 0 0 1px rgba(243, 213, 133, 0.22), 0 24px 50px rgba(0, 0, 0, 0.65); }
.shots__item.is-current .phone { box-shadow: 0 0 0 1px rgba(243, 213, 133, 0.55), 0 30px 66px rgba(0, 0, 0, 0.75), 0 0 46px rgba(196, 18, 48, 0.28); }

.shots__cap {
  position: relative;
  z-index: 2;
  margin-top: var(--sp-4);
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.shots__item.is-current .shots__cap { color: var(--color-gold); }

.shots__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.shots__dots { display: flex; align-items: center; gap: 0.5rem; }

.shots__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(214, 169, 74, 0.3);
  border: 1px solid transparent;
  transition: all var(--dur-fast) var(--ease-out);
}

.shots__dot.is-active {
  width: 30px;
  border-radius: var(--r-pill);
  background: var(--grad-gold);
  box-shadow: 0 0 12px rgba(214, 169, 74, 0.6);
}

.shots__edge {
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(28px, 8vw, 110px);
  pointer-events: none;
  z-index: 2;
}

.shots__edge--l { left: 0;  background: linear-gradient(90deg, var(--color-bg-alt), transparent); }
.shots__edge--r { right: 0; background: linear-gradient(270deg, var(--color-bg-alt), transparent); }

/* --------------------------------------------------------------------------
   19. Marquee ticker
   -------------------------------------------------------------------------- */
.ticker {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--color-border-gold-soft);
  background: linear-gradient(90deg, rgba(196, 18, 48, 0.12), rgba(11, 10, 12, 0.6) 50%, rgba(214, 169, 74, 0.1));
  padding-block: 0.85rem;
}

.ticker__track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: tickerRun 42s linear infinite;
}

.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.ticker__item b { color: var(--color-gold-bright); font-weight: 800; }

.ticker__item::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-crimson);
  box-shadow: 0 0 8px var(--color-crimson);
  flex: none;
}

@keyframes tickerRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   20. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.accordion { display: grid; gap: var(--sp-3); }

.acc {
  border-radius: var(--r-md);
  border: 1px solid var(--color-border-dark);
  background: rgba(31, 27, 31, 0.55);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.acc.is-open { border-color: var(--color-border-gold); background: rgba(31, 27, 31, 0.85); }

.acc__btn {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: 1.15rem 1.3rem;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.45;
}

.acc__btn:hover { color: var(--color-gold-bright); }

.acc__ic {
  position: relative;
  flex: none;
  margin-left: auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-border-gold);
  color: var(--color-gold);
}

.acc__ic::before,
.acc__ic::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-fast) linear;
}

.acc__ic::before { width: 11px; height: 1.5px; }
.acc__ic::after  { width: 1.5px; height: 11px; }

.acc.is-open .acc__ic { color: var(--color-text-on-gold); background: var(--grad-gold); border-color: var(--color-gold-bright); }
.acc.is-open .acc__ic::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-mid) var(--ease-out);
}

.acc.is-open .acc__panel { grid-template-rows: 1fr; }

.acc__panel > div { overflow: hidden; }

.acc__body {
  padding: 0 1.3rem 1.35rem;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
}

.acc__body > * + * { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   21. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(196, 18, 48, 0.3), transparent 62%),
    linear-gradient(180deg, #100D11, #060507);
  border-block: 1px solid var(--color-border-gold);
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: -50% -10%;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(196, 18, 48, 0.13) 0deg 6deg,
    transparent 6deg 12deg);
  animation: wheelSpin 120s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}

.cta-band__inner {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  justify-items: center;
  text-align: center;
}

.cta-band h2 { font-size: var(--fs-h2); }
.cta-band p { color: var(--color-text-muted); max-width: 60ch; }

/* --------------------------------------------------------------------------
   22. Telegram callout cards
   -------------------------------------------------------------------------- */
.tg-cards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.tg-card {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, rgba(34, 158, 217, 0.14), rgba(11, 10, 12, 0.85));
  border: 1px solid rgba(42, 171, 238, 0.28);
  overflow: hidden;
  transition: all var(--dur-mid) var(--ease-out);
}

.tg-card:hover { transform: translateY(-5px); border-color: #2AABEE; box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), 0 0 30px rgba(34, 158, 217, 0.24); }

.tg-card__ic {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(150deg, #2AABEE, #229ED9);
  box-shadow: 0 8px 20px rgba(34, 158, 217, 0.42);
}

.tg-card__ic svg { width: 27px; height: 27px; }
.tg-card h3 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 800; }
.tg-card p { color: var(--color-text-muted); font-size: var(--fs-sm); }
.tg-card__link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); font-weight: 700; color: #8AD3F7; }
.tg-card__link:hover { color: #fff; }

/* Floating Telegram dock (mobile-first sticky helper) */
.tg-dock {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-end;
}

.tg-dock__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1.05rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(150deg, #2AABEE, #1B87BC);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(34, 158, 217, 0.4);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.tg-dock__btn svg { width: 18px; height: 18px; flex: none; }
.tg-dock__btn:hover { color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.6), 0 0 28px rgba(42, 171, 238, 0.6); }

.tg-dock__btn--chip {
  background: var(--grad-crimson);
  border-color: rgba(243, 213, 133, 0.55);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(196, 18, 48, 0.45);
}

@media (max-width: 560px) {
  .tg-dock__btn span { display: none; }
  .tg-dock__btn { width: 48px; height: 48px; padding: 0; justify-content: center; }
  .tg-dock__btn svg { width: 21px; height: 21px; }
}

/* --------------------------------------------------------------------------
   23. Footer — "closing the table"
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #08070A 0%, #060507 100%);
  border-top: 1px solid var(--color-border-gold-soft);
  padding-top: var(--sp-9);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 0deg at 50% 118%,
    rgba(196, 18, 48, 0.14) 0deg 4.5deg,
    transparent 4.5deg 9deg);
  opacity: 0.55;
  pointer-events: none;
}

/* rim trace — SVG stroke drawn once on first view */
.rim-trace {
  position: absolute;
  inset: 10px;
  pointer-events: none;
  z-index: 2;
}

.rim-trace rect {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 1.25;
  opacity: 0.55;
  stroke-dasharray: var(--rim-len, 4000);
  stroke-dashoffset: var(--rim-len, 4000);
  filter: drop-shadow(0 0 6px rgba(214, 169, 74, 0.55));
}

.rim-trace.is-traced rect {
  animation: rimDraw 2.4s var(--ease-out) forwards;
}

@keyframes rimDraw { to { stroke-dashoffset: 0; } }

.footer__grid {
  position: relative;
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  padding-bottom: var(--sp-7);
}

@media (min-width: 700px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.35fr; } }

.footer__brand { display: grid; gap: var(--sp-4); align-content: start; }
.footer__tag { color: var(--color-text-muted); font-size: var(--fs-sm); max-width: 40ch; }

.footer__title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--sp-4);
}

.footer__links { display: grid; gap: 0.7rem; }

.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.footer__links a::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  border: 1px solid var(--color-gold-deep);
  flex: none;
  transition: all var(--dur-fast) var(--ease-out);
}

.footer__links a:hover { color: var(--color-gold-bright); }
.footer__links a:hover::before { background: var(--color-gold); box-shadow: 0 0 7px var(--color-gold); }

.footer__tgs { display: grid; gap: var(--sp-3); }

.footer__tg {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.95rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(42, 171, 238, 0.24);
  background: rgba(34, 158, 217, 0.08);
  transition: all var(--dur-fast) var(--ease-out);
}

.footer__tg:hover { border-color: #2AABEE; background: rgba(34, 158, 217, 0.18); transform: translateX(3px); }

.footer__tg svg { width: 22px; height: 22px; flex: none; color: #2AABEE; }
.footer__tg strong { display: block; font-size: var(--fs-sm); color: var(--color-text-primary); }
.footer__tg small { display: block; color: var(--color-text-dim); font-size: 0.74rem; letter-spacing: 0.04em; }

/* SEO keyword row */
.footer__keywords {
  position: relative;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--color-border-dark);
}

.footer__keywords h3 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: var(--sp-3);
}

.footer__keywords p { font-size: var(--fs-xs); color: var(--color-text-dim); line-height: 1.95; }
.footer__keywords a { color: var(--color-text-muted); }
.footer__keywords a:hover { color: var(--color-gold); }

/* Disclaimer strip */
.disclaimer {
  position: relative;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--color-border-gold-soft);
  background: rgba(196, 18, 48, 0.06);
}

.disclaimer__inner { display: grid; gap: var(--sp-4); }

.disclaimer__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

.age-mark {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #FFE9ED;
  background: var(--grad-crimson);
  border: 2px solid rgba(243, 213, 133, 0.65);
  box-shadow: 0 0 18px rgba(196, 18, 48, 0.5);
}

.disclaimer p { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.85; }
.disclaimer strong { color: var(--color-gold-bright); font-weight: 700; }

.footer__bottom {
  position: relative;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--color-border-dark);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
}

.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer__bottom a { color: var(--color-text-dim); }
.footer__bottom a:hover { color: var(--color-gold); }

/* --------------------------------------------------------------------------
   24. Misc utilities
   -------------------------------------------------------------------------- */
.u-center      { text-align: center; }
.u-mt-0        { margin-top: 0 !important; }
.u-mt-4        { margin-top: var(--sp-4); }
.u-mt-6        { margin-top: var(--sp-6); }
.u-mt-8        { margin-top: var(--sp-8); }
.u-mb-6        { margin-bottom: var(--sp-6); }
.u-max-text    { max-width: var(--container-text); }
.u-mx-auto     { margin-inline: auto; }
.u-relative    { position: relative; }
.u-hide-sm     { display: none; }
.u-nowrap      { white-space: nowrap; }

@media (min-width: 768px) { .u-hide-sm { display: initial; } }

.divider-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--color-gold-deep);
}

.divider-chip::before,
.divider-chip::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--color-border-gold), transparent);
}

.divider-chip__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex: none;
  background: repeating-conic-gradient(from 0deg, var(--color-gold) 0deg 30deg, var(--color-crimson) 30deg 60deg);
  box-shadow: 0 0 10px rgba(214, 169, 74, 0.6);
}

/* Two-column feature/media block */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1.08fr 0.92fr; }
  .split--reverse > *:first-child { order: 2; }
  .split--media-sm { grid-template-columns: 1.25fr 0.75fr; }
}

/* Icon list */
.icon-list { display: grid; gap: var(--sp-4); }

.icon-list li { display: flex; gap: var(--sp-4); align-items: flex-start; }

.icon-list__ic {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: 50%;
  color: var(--color-gold-bright);
  background: rgba(214, 169, 74, 0.1);
  border: 1px solid var(--color-border-gold-soft);
}

.icon-list__ic svg { width: 18px; height: 18px; }
.icon-list strong { display: block; margin-bottom: 0.15rem; font-size: var(--fs-body); }
.icon-list p { color: var(--color-text-muted); font-size: var(--fs-sm); }

/* Loading / empty state */
.empty-state {
  padding: var(--sp-9) var(--sp-5);
  text-align: center;
  border-radius: var(--r-lg);
  border: 1px dashed var(--color-border-gold-soft);
  background: rgba(31, 27, 31, 0.4);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   25. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .chipstack__chip { opacity: 1 !important; transform: none !important; }
  .rim-trace rect { stroke-dashoffset: 0 !important; }
  .phone__glare { display: none; }
  .mockup__orbit { display: none; }
  .ticker__track { animation: none; transform: none; }
  .page-hero__wheel, .cta-band::before { animation: none; }
  .shots__item { opacity: 1; filter: none; transform: none; }
}