/* ============================================================
   777CX GAME — main.css
   Global layout, components, animations. "Emerald Vault" theme.
   Order of includes: tokens.css, reset.css, fonts.css, main.css, pages/*.css
   ============================================================ */

/* ---------- Page load fade ---------- */
body {
  opacity: 0;
  transition: opacity 300ms ease;
}
body.is-loaded {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  body { opacity: 1 !important; transition: none; }
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--alt { background: var(--color-bg-alt); }
.section--surface {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(0, 199, 118, 0.05), transparent 60%),
    var(--color-bg-alt);
}

main { display: block; }

/* Section heading block */
.section-head {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.section-head--left {
  margin-inline: 0;
  text-align: left;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-bright);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--gradient-accent);
  border-radius: 2px;
}
.section-head--center .eyebrow { justify-content: center; }
.section-title {
  font-size: var(--fs-h2);
  margin-bottom: 1rem;
  color: var(--color-text-primary);
}
.section-subtitle {
  font-size: var(--fs-lead);
  color: var(--color-text-secondary);
  font-weight: var(--fw-regular);
}

.text-accent { color: var(--color-accent); }
.text-accent-bright { color: var(--color-accent-bright); }
.text-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient {
  background: var(--gradient-accent-bright);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   FACETED / GEM AMBIENT BACKGROUND DECOR
   ============================================================ */
.facet-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-decor);
}
.facet {
  position: absolute;
  opacity: 0.35;
  will-change: transform;
}
.facet svg { width: 100%; height: 100%; }
.facet polygon,
.facet path {
  fill: none;
  stroke: rgba(0, 199, 118, 0.28);
  stroke-width: 1;
}
.facet--1 { width: 260px; height: 260px; top: 8%; left: -60px; animation: drift-a 26s ease-in-out infinite; }
.facet--2 { width: 180px; height: 180px; top: 55%; right: -40px; opacity: 0.25; animation: drift-b 32s ease-in-out infinite; }
.facet--3 { width: 340px; height: 340px; bottom: -120px; left: 40%; opacity: 0.18; animation: drift-a 40s ease-in-out infinite reverse; }
.facet--glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(circle, rgba(0, 199, 118, 0.16), transparent 70%);
  top: -10%;
  right: -10%;
  animation: pulse-glow 9s ease-in-out infinite;
}

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(30px, -24px, 0) rotate(12deg); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-26px, 20px, 0) rotate(-10deg); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.12); }
}

/* ============================================================
   LOGO (crisp inline SVG wordmark)
   ============================================================ */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-mid) var(--ease-out);
}
.brand-logo:hover { transform: translateY(-1px); filter: drop-shadow(0 0 10px rgba(0, 199, 118, 0.5)); }
.brand-logo__word {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.03em;
  font-size: 1.5rem;
  font-style: italic;
}
.brand-logo__777 {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 1px;
}
.brand-logo__cx { color: var(--color-accent); }
.brand-logo__tld {
  font-size: 0.5em;
  font-weight: var(--fw-bold);
  font-style: normal;
  color: var(--color-text-secondary);
  align-self: center;
  margin-left: 2px;
  letter-spacing: 0;
}
.brand-logo--footer .brand-logo__word { font-size: 1.7rem; }
.brand-logo--lg .brand-logo__word { font-size: 1.9rem; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              background var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }

.btn--primary {
  background: var(--gradient-accent);
  color: #04140D;
  box-shadow: 0 6px 20px rgba(0, 122, 77, 0.4);
}
.btn--primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--shadow-glow-strong), 0 10px 28px rgba(0, 122, 77, 0.45);
  background: var(--gradient-accent-bright);
}

.btn--gold {
  background: var(--gradient-gold);
  color: #23180A;
  box-shadow: var(--shadow-gold-glow);
}
.btn--gold:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 34px rgba(212, 178, 106, 0.55);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  border-color: var(--color-accent);
  background: rgba(0, 199, 118, 0.08);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.btn--telegram {
  background: linear-gradient(135deg, #2AABEE 0%, #1E96D3 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(42, 171, 238, 0.35);
}
.btn--telegram:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 30px rgba(42, 171, 238, 0.55);
}

.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.85rem; }
.btn--lg { padding: 1.05rem 2.1rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* Magnetic pulse glow on primary CTAs */
.btn--pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(47, 255, 160, 0.5);
  animation: cta-pulse 2.6s var(--ease-out) infinite;
  z-index: -1;
}
@keyframes cta-pulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 255, 160, 0.45); }
  70% { box-shadow: 0 0 0 16px rgba(47, 255, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 255, 160, 0); }
}

/* Ripple (JS adds .btn__ripple span) */
.btn__ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.45);
  animation: ripple 600ms var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
@keyframes ripple { to { transform: scale(3.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .btn--pulse::after { animation: none; }
  .btn:hover { transform: none; }
}

/* ============================================================
   BADGES / PILLS / CHIPS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: rgba(0, 199, 118, 0.08);
  color: var(--color-accent-bright);
}
.badge--gold {
  border-color: rgba(212, 178, 106, 0.4);
  background: rgba(212, 178, 106, 0.1);
  color: var(--color-gold-bright);
}
.badge--dot::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-accent-bright);
  box-shadow: 0 0 8px var(--color-accent-bright);
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============================================================
   CARDS (generic surface)
   ============================================================ */
.card {
  position: relative;
  background: var(--gradient-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--shadow-card);
  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:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card), var(--shadow-glow);
  transform: translateY(-4px);
}

/* ============================================================
   FEATURE / ICON CARDS
   ============================================================ */
.icon-badge {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(0, 199, 118, 0.18), rgba(0, 122, 77, 0.08));
  border: 1px solid var(--color-border-strong);
  color: var(--color-accent-bright);
  margin-bottom: 1.2rem;
  transition: transform var(--dur-mid) var(--ease-spring), box-shadow var(--dur-mid) var(--ease-out);
}
.icon-badge svg { width: 28px; height: 28px; }
.card:hover .icon-badge {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: var(--shadow-glow);
}
.feature-card h3 { font-size: var(--fs-h4); margin-bottom: 0.6rem; }
.feature-card p { color: var(--color-text-secondary); font-size: var(--fs-sm); }

/* ============================================================
   GAME CARD (reusable — home grid + games grid + related row)
   ============================================================ */
.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  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(-6px) scale(1.02);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card-lg), var(--shadow-glow);
}
.game-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.game-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.game-card:hover .game-card__img { transform: scale(1.08); }
.game-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 15, 13, 0.85) 100%);
  opacity: 0.9;
}
.game-card__cat {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  font-size: 0.68rem;
  padding: 0.25rem 0.6rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-pill);
  background: rgba(11, 15, 13, 0.7);
  border: 1px solid var(--color-border-strong);
  color: var(--color-accent-bright);
  backdrop-filter: blur(4px);
}
.game-card__hot {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  font-size: 0.66rem;
  padding: 0.2rem 0.55rem;
  font-weight: var(--fw-bold);
  border-radius: var(--radius-pill);
  background: var(--gradient-gold);
  color: #23180A;
}
.game-card__body {
  padding: 0.85rem 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.game-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.game-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: auto;
}
.game-card__rtp { color: var(--color-accent); font-weight: var(--fw-semibold); }
.game-card__play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.game-card__play span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--gradient-accent);
  color: #04140D;
  font-weight: var(--fw-bold);
  font-size: 0.85rem;
  transform: translateY(8px);
  transition: transform var(--dur-mid) var(--ease-spring);
}
.game-card:hover .game-card__play,
.game-card:focus-within .game-card__play { opacity: 1; }
.game-card:hover .game-card__play span { transform: translateY(0); }

/* Game grid */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(0.8rem, 2vw, 1.4rem);
}
@media (min-width: 640px) {
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
  transition: background var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out);
  background: rgba(11, 15, 13, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(11, 15, 13, 0.9);
  border-bottom-color: var(--color-border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
.main-nav {
  display: none;
}
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.main-nav a {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0.9rem;
  font-size: 0.92rem;
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.25rem;
  height: 2px;
  background: var(--gradient-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}
.main-nav a:hover,
.main-nav a:focus-visible { color: var(--color-text-primary); }
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: var(--color-accent-bright); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.header-actions .btn { padding-block: 0.6rem; }

/* Language switcher */
.lang-switch { position: relative; }
.lang-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.lang-switch__toggle:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }
.lang-switch__toggle svg { width: 16px; height: 16px; }
.lang-switch__chevron { transition: transform var(--dur-mid) var(--ease-out); }
.lang-switch[data-open="true"] .lang-switch__chevron { transform: rotate(180deg); }
.lang-switch__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  padding: 0.4rem;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out),
              visibility var(--dur-mid);
  z-index: var(--z-drawer);
}
.lang-switch[data-open="true"] .lang-switch__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.lang-switch__menu button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  text-align: left;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.lang-switch__menu button:hover { background: rgba(0, 199, 118, 0.1); color: var(--color-text-primary); }
.lang-switch__menu button[aria-selected="true"] { color: var(--color-accent-bright); }
.lang-switch__menu button .flag { font-size: 1.1rem; }

/* Hamburger */
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.02);
}
.nav-toggle__bars { position: relative; width: 20px; height: 14px; }
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-fast);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
  pointer-events: none;
}
.mobile-drawer[data-open="true"] { visibility: visible; pointer-events: auto; }
.mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 6, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.mobile-drawer[data-open="true"] .mobile-drawer__backdrop { opacity: 1; }
.mobile-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(86vw, 360px);
  padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--color-bg-alt);
  border-left: 1px solid var(--color-border);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  overflow-y: auto;
}
.mobile-drawer[data-open="true"] .mobile-drawer__panel { transform: translateX(0); }
.mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-drawer__close {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}
.mobile-drawer__close svg { width: 20px; height: 20px; }
.mobile-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.mobile-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0.75rem;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--color-border-soft);
  transition: color var(--dur-fast), background var(--dur-fast), padding-left var(--dur-fast);
}
.mobile-nav a:hover,
.mobile-nav a[aria-current="page"] {
  color: var(--color-accent-bright);
  background: rgba(0, 199, 118, 0.06);
  padding-left: 1.1rem;
}
.mobile-nav a svg { width: 16px; height: 16px; opacity: 0.6; }
.mobile-drawer__cta { margin-top: auto; display: flex; flex-direction: column; gap: 0.7rem; }

@media (min-width: 980px) {
  .main-nav { display: block; }
  .nav-toggle { display: none; }
}

/* ============================================================
   HERO (base — shared shell; page CSS extends)
   ============================================================ */
.hero {
  position: relative;
  padding-top: calc(var(--header-height) + clamp(2rem, 6vw, 4rem));
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  background: var(--gradient-hero);
  overflow: hidden;
}
.hero__inner {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; }
}
.hero__eyebrow { margin-bottom: 1.1rem; }
.hero__title {
  font-size: var(--fs-display);
  margin-bottom: 1.25rem;
}
.hero__lead {
  font-size: var(--fs-lead);
  color: var(--color-text-secondary);
  max-width: 44ch;
  margin-bottom: 1.75rem;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
.hero__trust-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__trust-item svg { width: 18px; height: 18px; color: var(--color-accent); }

/* Glass panel used on hero over faceted bg */
.glass {
  background: rgba(22, 29, 26, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* ============================================================
   PHONE MOCKUP (hero + download)
   ============================================================ */
.phone-mock {
  position: relative;
  width: min(300px, 74vw);
  margin-inline: auto;
  aspect-ratio: 1280 / 2688;
  border-radius: 42px;
  padding: 12px;
  background: linear-gradient(155deg, #232C28, #10160F 60%);
  border: 1px solid var(--color-border-strong);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.6),
    var(--shadow-glow),
    inset 0 1px 1px rgba(255, 255, 255, 0.08);
  animation: float-phone 6s ease-in-out infinite;
  will-change: transform;
}
.phone-mock::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 22px;
  background: #050907;
  border-radius: var(--radius-pill);
  z-index: 3;
}
.phone-mock__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #0d150f;
}
.phone-mock__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phone-mock__glow {
  position: absolute;
  inset: -12%;
  z-index: -1;
  background: radial-gradient(circle at 50% 40%, rgba(0, 199, 118, 0.35), transparent 62%);
  filter: blur(30px);
  animation: pulse-glow 7s ease-in-out infinite;
}
.phone-mock__badge {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: var(--fw-bold);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-card);
  color: var(--color-text-primary);
  animation: float-badge 5s ease-in-out infinite;
}
.phone-mock__badge svg { width: 16px; height: 16px; color: var(--color-accent-bright); }
.phone-mock__badge--tl { top: 8%; left: -14%; }
.phone-mock__badge--br { bottom: 12%; right: -12%; animation-delay: 1.5s; }
.phone-mock__badge .amt { color: var(--color-gold-bright); }

@keyframes float-phone {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-16px) rotate(1.5deg); }
}
@keyframes float-badge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .phone-mock, .phone-mock__badge, .phone-mock__glow,
  .facet, .facet--glow { animation: none !important; }
}

/* ============================================================
   STAT / COUNTER BAR
   ============================================================ */
.stat-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 720px) { .stat-bar { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: clamp(1.4rem, 3vw, 2rem) 1rem;
  text-align: center;
  background: var(--color-surface);
}
.stat__num {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 1;
  background: var(--gradient-accent-bright);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__num .suffix { -webkit-text-fill-color: var(--color-accent); }
.stat__label {
  margin-top: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: 0.8rem; max-width: 820px; margin-inline: auto; }
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color var(--dur-mid);
}
.faq-item[data-open="true"] { border-color: var(--color-border-strong); }
.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 1.3rem;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 1.02rem;
  text-align: left;
  color: var(--color-text-primary);
}
.faq-item__icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  color: var(--color-accent-bright);
  transition: transform var(--dur-mid) var(--ease-out), background var(--dur-mid);
}
.faq-item[data-open="true"] .faq-item__icon { transform: rotate(45deg); background: rgba(0,199,118,0.12); }
.faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-in-out);
}
.faq-item__a-inner {
  padding: 0 1.3rem 1.3rem;
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.faq-item__a-inner p + p { margin-top: 0.75rem; }

/* ============================================================
   FLOATING TELEGRAM FAB
   ============================================================ */
.fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-bottom));
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #2AABEE, #1E96D3);
  color: #fff;
  box-shadow: 0 10px 30px rgba(42, 171, 238, 0.45);
  animation: fab-breathe 3.5s ease-in-out infinite;
  will-change: transform, box-shadow;
  transition: transform var(--dur-mid) var(--ease-spring);
}
.fab:hover { transform: scale(1.06); }
.fab__icon { width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; }
.fab__icon svg { width: 26px; height: 26px; }
.fab__label {
  font-weight: var(--fw-bold);
  font-size: 0.9rem;
  padding-right: 0.55rem;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width var(--dur-slow) var(--ease-out), opacity var(--dur-mid), padding var(--dur-mid);
}
.fab:hover .fab__label,
.fab:focus-visible .fab__label { max-width: 140px; opacity: 1; }
@keyframes fab-breathe {
  0%, 100% { box-shadow: 0 10px 30px rgba(42, 171, 238, 0.4); transform: translateY(0); }
  50% { box-shadow: 0 10px 40px rgba(42, 171, 238, 0.7); }
}
.fab.is-bounce { animation: fab-bounce 0.9s var(--ease-spring); }
@keyframes fab-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-12px); }
  60% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .fab { animation: none; }
}

/* ============================================================
   STICKY MOBILE BOTTOM BAR
   ============================================================ */
.mobile-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: var(--z-sticky-bar);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
  background: rgba(11, 15, 13, 0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-border);
  transform: translateY(120%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.mobile-bar.is-visible { transform: translateY(0); }
.mobile-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem 0.25rem;
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast);
}
.mobile-bar__item svg { width: 22px; height: 22px; }
.mobile-bar__item--primary { color: var(--color-accent-bright); }
.mobile-bar__item--primary .mobile-bar__ico {
  background: var(--gradient-accent);
  color: #04140D;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  box-shadow: var(--shadow-glow);
}
.mobile-bar__item--primary .mobile-bar__ico svg { width: 20px; height: 20px; }
@media (min-width: 980px) { .mobile-bar { display: none !important; } }

/* Give mobile pages room so the bar never overlaps footer */
@media (max-width: 979px) {
  body.has-mobile-bar { padding-bottom: var(--mobile-bar-height); }
}

/* ============================================================
   COOKIE CONSENT BANNER
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vw, 1.5rem);
  transform: translateX(-50%) translateY(160%);
  z-index: var(--z-toast);
  width: min(680px, calc(100vw - 2rem));
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-lg);
  transition: transform var(--dur-slow) var(--ease-out);
}
.cookie-banner.is-visible { transform: translateX(-50%) translateY(0); }
.cookie-banner p { flex: 1 1 260px; font-size: var(--fs-sm); color: var(--color-text-secondary); }
.cookie-banner p a { color: var(--color-accent); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 0.6rem; }
@media (max-width: 979px) {
  .cookie-banner { bottom: calc(var(--mobile-bar-height) + 0.75rem); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
}
.footer-cta {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(0, 199, 118, 0.16), transparent 60%),
    var(--color-surface);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}
.footer-cta h2 { font-size: var(--fs-h2); margin-bottom: 0.75rem; }
.footer-cta p { color: var(--color-text-secondary); max-width: 52ch; margin: 0 auto 1.75rem; }
.footer-cta__btns { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 980px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; } }

.footer-brand__logo { margin-bottom: 1rem; }
.footer-brand p {
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  max-width: 38ch;
  margin-bottom: 1.25rem;
}
.footer-social { display: flex; gap: 0.6rem; }
.footer-social a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  transition: all var(--dur-fast) var(--ease-out);
}
.footer-social a:hover {
  color: var(--color-accent-bright);
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.footer-social a svg { width: 20px; height: 20px; }

.footer-col h3 {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 1.1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col a {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  transition: color var(--dur-fast), padding-left var(--dur-fast);
}
.footer-col a:hover { color: var(--color-accent-bright); padding-left: 4px; }

.footer-bonus-card {
  padding: 1.25rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(0,199,118,0.12), rgba(0,122,77,0.05));
  border: 1px solid var(--color-border-strong);
}
.footer-bonus-card .amt {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 1.6rem;
  color: var(--color-gold-bright);
  display: block;
  margin: 0.35rem 0 0.9rem;
}

.footer-legal {
  position: relative;
  z-index: 1;
  padding-block: 2rem;
}
.footer-disclaimer {
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  max-width: 90ch;
  margin-bottom: 1.5rem;
}
.footer-disclaimer strong { color: var(--color-text-secondary); }
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.footer-badges .badge { background: var(--color-surface); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-bottom a:hover { color: var(--color-accent); }
.age18 {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--color-gold-hint);
  color: var(--color-gold-bright);
  font-weight: var(--fw-bold);
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.breadcrumb a { color: var(--color-text-secondary); transition: color var(--dur-fast); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 0.5rem; }
.breadcrumb li:not(:last-child)::after { content: "/"; color: var(--color-text-muted); }
.breadcrumb [aria-current="page"] { color: var(--color-text-primary); }

/* ============================================================
   PROSE (legal + long-form content)
   ============================================================ */
.prose { max-width: 760px; color: var(--color-text-secondary); }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 {
  font-size: var(--fs-h3);
  color: var(--color-text-primary);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.prose h2:first-of-type { border-top: none; padding-top: 0; margin-top: 1.5rem; }
.prose h3 { font-size: var(--fs-h4); color: var(--color-text-primary); margin-top: 1.75rem; }
.prose p, .prose li { line-height: var(--lh-relaxed); }
.prose a { color: var(--color-accent); text-decoration: underline; }
.prose ul, .prose ol { padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; }
.prose ul li { list-style: none; position: relative; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: -1.3rem;
  top: 0.65em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: rotate(45deg);
}
.prose ol { list-style: decimal; }
.prose ol li { padding-left: 0.3rem; }
.prose strong { color: var(--color-text-primary); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal].is-visible { transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.divider {
  height: 1px;
  background: var(--gradient-line);
  border: 0;
  margin-block: clamp(2rem, 5vw, 3.5rem);
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.grid-2 { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: 1fr; }
.grid-4 { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.flow > * + * { margin-top: 1.1rem; }
.lead { font-size: var(--fs-lead); color: var(--color-text-secondary); }