/* ==========================================================================
   2J Game — main.css
   Shared layout, components and animation system (royal-obsidian-light)
   --------------------------------------------------------------------------
   1.  Base typography
   2.  Layout primitives
   3.  Section furniture (eyebrow, titles, hairlines)
   4.  Buttons
   5.  Header / navigation
   6.  Hero
   7.  Device mockup
   8.  Cards (feature, game, info, step, telegram)
   9.  Stats & counters
   10. Sliders (screenshots)
   11. OG banner feature
   12. FAQ accordion
   13. Forms
   14. Breadcrumbs & prose (legal pages)
   15. Footer
   16. Cookie consent
   17. Scroll-reveal & keyframes
   18. Utilities
   ========================================================================== */

/* ==========================================================================
   1. BASE TYPOGRAPHY
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: var(--z-modal);
  padding: 12px 22px;
  background: var(--color-charcoal);
  color: var(--color-gold-bright);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: 14px; }

.display-1,
.display-2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; }

.text-gold { color: var(--color-gold-deep); }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--color-text-secondary);
}

.prose p + p { margin-top: 1.05em; }

/* ==========================================================================
   2. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.container--text {
  max-width: calc(var(--container-text) + var(--gutter) * 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--tint { background: var(--color-surface-tint); }

.section--dark {
  background:
    radial-gradient(900px 420px at 15% -10%, rgba(201, 162, 39, 0.16), transparent 62%),
    radial-gradient(760px 400px at 92% 108%, rgba(201, 162, 39, 0.12), transparent 60%),
    var(--color-charcoal);
  color: var(--color-text-on-dark);
}

.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #FFFFFF; }

.section--dark p,
.section--dark li { color: var(--color-text-on-dark-dim); }

.section--dark .section-head__title { color: #FFFFFF; }
.section--dark .section-head__eyebrow { color: var(--color-gold-bright); }
.section--dark .section-head__lede { color: var(--color-text-on-dark-dim); }

/* Hairline separator used instead of hard borders */
.hairline {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg,
    transparent,
    var(--color-gold-hairline) 18%,
    var(--color-gold-hairline) 82%,
    transparent);
}

.grid { display: grid; gap: var(--space-5); }

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.split {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 1024px) {
  .split { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-9); }
  .split--reverse .split__media { order: -1; }
}

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   Grid-blowout guard.
   A grid/flex item defaults to min-width:auto, so a long unbreakable string
   (a URL, a wide table, an oversized image) can push a column past its track
   and force the page to scroll sideways. Every named layout child is pinned to
   min-width:0 so columns can always shrink instead.
   -------------------------------------------------------------------------- */
.hero__copy,
.hero__visual,
.split__body,
.split__media,
.cta-band__copy,
.cta-band__figure,
.dl-hero__copy,
.dl-hero__media,
.grid > *,
.split > *,
.contact-layout > *,
.legal-layout > * { min-width: 0; }

/* ==========================================================================
   3. SECTION FURNITURE
   ========================================================================== */

.section-head {
  max-width: 780px;
  margin-bottom: var(--space-7);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-3);
  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-deep);
}

.section-head__eyebrow::before,
.section-head__eyebrow::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.65;
}

.section-head:not(.section-head--center) .section-head__eyebrow::after { display: none; }

.section-head__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}

.section-head__lede {
  margin-top: var(--space-4);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--color-text-secondary);
}

.section-head--center .section-head__lede { margin-inline: auto; }

/* Gold corner-bracket frame — signature motif */
.framed { position: relative; }

.framed::before,
.framed::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--color-gold);
  opacity: 0.75;
  pointer-events: none;
  transition: all var(--dur-base) var(--ease-out);
}

.framed::before {
  top: -8px; left: -8px;
  border-right: 0; border-bottom: 0;
  border-top-left-radius: 6px;
}

.framed::after {
  bottom: -8px; right: -8px;
  border-left: 0; border-top: 0;
  border-bottom-right-radius: 6px;
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* Foil sheen sweep */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.42) 46%,
    rgba(255, 255, 255, 0.62) 50%,
    rgba(255, 255, 255, 0.42) 54%,
    transparent 80%);
  transform: translateX(-120%);
  transition: transform 750ms var(--ease-out);
}

.btn:hover::after,
.btn:focus-visible::after { transform: translateX(120%); }

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

.btn__icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* Primary — charcoal plate, gold type, inverts on hover */
.btn--primary {
  background: var(--color-charcoal);
  color: var(--color-gold-bright);
  border: 1px solid var(--color-gold);
  box-shadow: 0 6px 22px rgba(28, 28, 30, 0.22);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-gold);
  color: var(--color-charcoal);
  border-color: var(--color-gold-deep);
  box-shadow: var(--shadow-gold-glow), 0 10px 26px rgba(28, 28, 30, 0.18);
  transform: translateY(-2px);
}

/* Gold — solid foil, charcoal type (AA contrast) */
.btn--gold {
  background: linear-gradient(135deg, var(--color-gold-bright), var(--color-gold) 55%, var(--color-gold-deep));
  color: var(--color-charcoal);
  border: 1px solid var(--color-gold-deep);
  box-shadow: 0 8px 26px rgba(201, 162, 39, 0.34);
}

.btn--gold:hover,
.btn--gold:focus-visible {
  color: #000;
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold-glow-strong), 0 12px 30px rgba(201, 162, 39, 0.30);
}

/* Ghost — hairline outline */
.btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--color-gold);
  color: var(--color-gold-deep);
  background: var(--color-gold-wash);
  transform: translateY(-2px);
}

.section--dark .btn--ghost {
  color: var(--color-text-on-dark);
  border-color: rgba(201, 162, 39, 0.45);
}

.section--dark .btn--ghost:hover {
  color: var(--color-gold-bright);
  background: rgba(201, 162, 39, 0.10);
}

/* Telegram — brand-correct cyan-blue with real glyph */
.btn--telegram {
  background: linear-gradient(135deg, #2FA8E0, #229ED9 55%, #1B87BB);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 24px rgba(34, 158, 217, 0.32);
}

.btn--telegram:hover,
.btn--telegram:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(34, 158, 217, 0.44);
}

.btn--sm { padding: 11px 22px; font-size: var(--fs-xs); }
.btn--lg { padding: 18px 38px; font-size: var(--fs-md); }
.btn--block { display: flex; width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.btn-row--center { justify-content: center; }

/* Pulsing gold ring behind the headline CTA */
.cta-ring { position: relative; display: inline-flex; }

.cta-ring::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-gold);
  opacity: 0.32;
  animation: ringPulse 9s var(--ease-in-out) infinite;
  pointer-events: none;
}

/* ==========================================================================
   5. HEADER / NAVIGATION
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  width: 100%;
  background: rgba(251, 249, 244, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(231, 225, 208, 0.9);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

/* --- Logo lockup --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  transition: transform var(--dur-base) var(--ease-out);
}

.logo:hover { transform: translateY(-1px); }

/* The source file is a wide canvas with a lot of empty margin around the
   wordmark; object-fit crops in on just the logotype so it reads clearly at
   header scale without editing the asset itself. The "game" half of the mark
   renders in dark glossy type, which would all but disappear against the
   charcoal header/footer, so a light plate rides behind it everywhere for
   guaranteed contrast — on the ivory header it's nearly invisible, on
   charcoal it's what keeps the wordmark legible. */
.logo__badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-tint);
  border: 1px solid var(--color-gold-hairline);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.logo:hover .logo__badge { box-shadow: var(--shadow-xs); }

.logo__img {
  height: 34px;
  width: auto;
  aspect-ratio: 4.3 / 1;
  object-fit: cover;
  object-position: 50% 47%;
  flex: 0 0 auto;
}

/* --- Desktop nav --- */
.nav { display: none; }

@media (min-width: 1024px) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.7vw, 30px);
  }
}

.nav__link {
  position: relative;
  padding: 8px 2px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color var(--dur-base) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__link:hover,
.nav__link:focus-visible { color: var(--color-gold-deep); }

.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__link[aria-current="page"] {
  color: var(--color-text-primary);
  font-weight: 600;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header__cta { display: none; }

@media (min-width: 640px) {
  .header__cta { display: inline-flex; }
}

.header__tg {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(34, 158, 217, 0.10);
  border: 1px solid rgba(34, 158, 217, 0.3);
  color: #1B87BB;
  transition: all var(--dur-base) var(--ease-out);
}

@media (min-width: 480px) { .header__tg { display: inline-flex; } }

.header__tg:hover {
  background: #229ED9;
  color: #fff;
  border-color: #229ED9;
  transform: translateY(-2px);
}

.header__tg svg { width: 20px; height: 20px; }

/* --- Scrolled state: ivory → charcoal --- */
.header.is-scrolled {
  background: rgba(28, 28, 30, 0.94);
  border-bottom-color: var(--color-gold-hairline);
  box-shadow: 0 8px 30px rgba(28, 28, 30, 0.24);
}

.header.is-scrolled .nav__link { color: var(--color-text-on-dark-dim); }
.header.is-scrolled .nav__link:hover,
.header.is-scrolled .nav__link[aria-current="page"] { color: var(--color-gold-bright); }
.header.is-scrolled .burger__bar { background: var(--color-gold-bright); }
.header.is-scrolled .header__tg {
  background: rgba(34, 158, 217, 0.16);
  border-color: rgba(90, 190, 240, 0.5);
  color: #7FCBEE;
}
.header.is-scrolled .btn--primary {
  background: var(--color-gold);
  color: var(--color-charcoal);
}

/* --- Burger --- */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

@media (min-width: 1024px) { .burger { display: none; } }

.burger__bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--color-charcoal);
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}

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

/* --- Mobile drawer --- */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: calc(var(--z-nav) - 1);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: var(--space-5) var(--gutter) var(--space-7);
  background: var(--color-charcoal);
  border-bottom: 1px solid var(--color-gold-hairline);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}

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

@media (min-width: 1024px) { .mobile-nav { display: none; } }

.mobile-nav__list { display: flex; flex-direction: column; }

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 2px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--color-text-on-dark);
  border-bottom: 1px solid rgba(58, 58, 60, 0.9);
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}

.mobile-nav__link:hover,
.mobile-nav__link[aria-current="page"] { color: var(--color-gold-bright); padding-left: 8px; }

.mobile-nav__actions { display: grid; gap: var(--space-3); margin-top: var(--space-5); }

body.is-locked { overflow: hidden; }

/* ==========================================================================
   6. HERO
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 5.5vw, 82px) clamp(56px, 7vw, 100px);
  background:
    radial-gradient(880px 500px at 88% 8%, rgba(201, 162, 39, 0.16), transparent 62%),
    radial-gradient(700px 480px at 4% 88%, rgba(201, 162, 39, 0.10), transparent 60%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201, 162, 39, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 162, 39, 0.05) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at 50% 32%, #000, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at 50% 32%, #000, transparent 74%);
  pointer-events: none;
}

/* Asymmetric two-column hero — copy on the left, a framed product showcase
   (mockup + bonus card, grouped as one visual) on the right. Stacks to a
   single column below 1024px, copy first. */
.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.08fr 0.92fr; }
}

/* Product showcase — the mockup and bonus card live inside one framed panel
   so the visual column reads as a single deliberate composition rather than
   two elements floating loose on bare background. */
.hero__visual { display: flex; justify-content: center; }

.hero__showcase {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-6);
  width: 100%;
  max-width: 380px;
  padding: clamp(28px, 3.4vw, 40px) clamp(22px, 3vw, 32px) clamp(24px, 3vw, 32px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(220px 160px at 18% 8%, rgba(201, 162, 39, 0.14), transparent 70%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.86), rgba(248, 244, 234, 0.62));
  border: 1px solid var(--color-gold-hairline);
  box-shadow: var(--shadow-card);
}

.hero__showcase .mockup-stage { padding-block: 0; }
.hero__showcase .phone { width: clamp(172px, 17vw, 202px); margin-inline: auto; }

/* The figure+label row needs more width than a 380px panel gives it, so the
   bonus card stacks vertically here instead of squeezing into a cramped row */
.hero__showcase .hero__bonus {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.hero__showcase .hero__bonus-figure { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.4rem); }
.hero__showcase .hero__bonus-label strong { margin-bottom: 2px; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--color-gold-hairline);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-xs);
}

.hero__badge b { color: var(--color-gold-deep); font-weight: 800; }

.hero__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 4px rgba(62, 125, 82, 0.16);
  animation: livePulse 2.4s var(--ease-in-out) infinite;
}

.hero__title {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.hero__title em {
  font-style: italic;
  color: var(--color-gold-deep);
}

.hero__lede {
  margin-top: var(--space-5);
  max-width: 58ch;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--color-text-secondary);
}

/* Bonus figure block */
.hero__bonus {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.96), rgba(248, 244, 234, 0.9));
  border: 1px solid var(--color-gold-hairline);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.hero__bonus-figure {
  font-family: var(--font-num);
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-charcoal);
  white-space: nowrap;
}

.hero__bonus-figure span { color: var(--color-gold-deep); }

.hero__bonus-label {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.hero__bonus-label strong {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-text-primary);
}

.hero__actions { margin-top: var(--space-6); }

.hero__note {
  margin-top: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.hero__trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.hero__trust-item svg { width: 16px; height: 16px; color: var(--color-gold-deep); flex: 0 0 auto; }

/* ==========================================================================
   7. DEVICE MOCKUP
   ========================================================================== */

.mockup-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1px;
  padding-block: clamp(24px, 4vw, 44px);
}

/* Soft twin-blob glow behind the device — a calm wash of light rather than a
   spinning ring, so it reads as ambience, not a loading spinner. */
.mockup-stage::before {
  content: "";
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(480px, 108%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(232, 197, 71, 0.30), transparent 72%),
    radial-gradient(closest-side at 68% 32%, rgba(201, 162, 39, 0.20), transparent 68%);
  filter: blur(42px);
  animation: auraPulse 7s var(--ease-in-out) infinite;
  pointer-events: none;
  z-index: 0;
}

.mockup-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(300px, 82%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--color-gold);
  opacity: 0.2;
  animation: ringPulse 11s var(--ease-in-out) infinite;
  pointer-events: none;
  z-index: 0;
}

.section--dark .mockup-stage::after { opacity: 0.34; }

/* --------------------------------------------------------------------------
   Phone body — a slim gold-edged glass panel rather than plastic hardware.
   The bezel is a hairline, notch and side buttons are dropped, and the whole
   device carries a gentle 3D tilt baked into the float animation itself.
   -------------------------------------------------------------------------- */
.phone {
  position: relative;
  z-index: 2;
  width: clamp(236px, 26vw, 300px);
  padding: 5px;
  border-radius: 34px;
  background: linear-gradient(155deg, var(--color-gold-bright), var(--color-gold) 45%, var(--color-gold-deep) 100%);
  box-shadow: var(--shadow-mockup);
  /* the 3D tilt lives inside the keyframes below so it survives every frame
     of the float loop instead of being clobbered by the animated property */
  animation: phoneFloat 6.5s var(--ease-in-out) infinite;
  transform-style: preserve-3d;
}

.phone--static { animation: none; transform: none; }

.phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background: #000;
  aspect-ratio: 1280 / 2800;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85);
}

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

/* Diagonal glass sheen — the one hint of "device glass" left in the design */
.phone__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(122deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.05) 20%,
    transparent 40%);
  pointer-events: none;
}

/* Floating chips — a slim accent tab rather than a circular icon badge */
.mockup-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px 10px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-gold);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 30px rgba(28, 28, 30, 0.16);
  font-size: var(--fs-xs);
  line-height: 1.35;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
}

.mockup-chip strong {
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-charcoal);
}

.mockup-chip span { color: var(--color-text-muted); font-size: 0.6875rem; }

/* Chips overhang the phone but are pinned inside the stage, so they can never
   be clipped by the page edge at any viewport width. */
.mockup-chip--tl {
  top: 8%;
  left: 0;
  animation: chipFloat 5.4s var(--ease-in-out) infinite;
}

.mockup-chip--br {
  bottom: 11%;
  right: 0;
  animation: chipFloat 6.2s var(--ease-in-out) 0.9s infinite reverse;
}

@media (max-width: 480px) {
  .mockup-chip { padding: 8px 12px 8px 11px; }
}

.section--dark .mockup-chip {
  background: rgba(46, 46, 48, 0.92);
}
.section--dark .mockup-chip strong { color: #fff; }
.section--dark .mockup-chip span { color: var(--color-text-on-dark-dim); }

/* Reflection under the device */
.phone-reflection {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 68%;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(28, 28, 30, 0.24), transparent 70%);
  filter: blur(9px);
  z-index: 1;
}

/* ==========================================================================
   8. CARDS
   ========================================================================== */

.card {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--color-gold-hairline);
  box-shadow: var(--shadow-card-hover), var(--shadow-gold-glow);
}

.section--dark .card {
  background: rgba(46, 46, 48, 0.62);
  border-color: var(--color-obsidian-line);
}

.section--dark .card:hover { border-color: var(--color-gold-hairline); }

.card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(232, 197, 71, 0.20), rgba(201, 162, 39, 0.10));
  border: 1px solid var(--color-gold-hairline);
  color: var(--color-gold-deep);
}

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

.section--dark .card__icon { color: var(--color-gold-bright); }

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.card__text {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-secondary);
}

.card__list { margin-top: var(--space-4); display: grid; gap: 9px; }

.card__list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}

.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--color-gold);
}

.section--dark .card__list li { color: var(--color-text-on-dark-dim); }

/* --- Game card --- */
.game-card {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

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

.game-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 211 / 260;
  background: var(--color-surface-tint);
}

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

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

/* Animated gold corner brackets */
.game-card__media::before,
.game-card__media::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--color-gold-bright);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  z-index: 2;
  pointer-events: none;
}

.game-card__media::before {
  top: 8px; left: 8px;
  border-right: 0; border-bottom: 0;
  transform: translate(-6px, -6px);
}

.game-card__media::after {
  bottom: 8px; right: 8px;
  border-left: 0; border-top: 0;
  transform: translate(6px, 6px);
}

.game-card:hover .game-card__media::before,
.game-card:hover .game-card__media::after {
  opacity: 1;
  transform: translate(0, 0);
}

.game-card__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(28, 28, 30, 0.14), rgba(28, 28, 30, 0.82));
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  z-index: 1;
}

.game-card:hover .game-card__overlay,
.game-card:focus-visible .game-card__overlay { opacity: 1; }

.game-card__play {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 17px;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  color: var(--color-charcoal);
  font-size: var(--fs-xs);
  font-weight: 700;
  transform: translateY(9px);
  transition: transform var(--dur-base) var(--ease-out);
}

.game-card:hover .game-card__play { transform: translateY(0); }

.game-card__play svg { width: 13px; height: 13px; }

.game-card__tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: var(--radius-xs);
  background: rgba(28, 28, 30, 0.86);
  color: var(--color-gold-bright);
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.game-card__tag--hot { background: #B23A32; color: #fff; }
.game-card__tag--new { background: var(--color-success); color: #fff; }

.game-card__body { padding: 12px 12px 14px; }

.game-card__name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-card__meta {
  margin-top: 3px;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

@media (min-width: 768px) {
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
}

/* Homepage featured set is exactly 8 titles — lock it to a clean 2 x 4 block */
.games-grid--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 700px) {
  .games-grid--featured { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Step card --- */
.step {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.step__num {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--color-charcoal);
  border: 1px solid var(--color-gold);
  font-family: var(--font-num);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-gold-bright);
}

.step__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.step__text {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

/* --- Telegram cards --- */
.tg-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.tg-card:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 158, 217, 0.45);
  box-shadow: 0 16px 40px rgba(34, 158, 217, 0.16);
}

.section--dark .tg-card {
  background: rgba(46, 46, 48, 0.62);
  border-color: var(--color-obsidian-line);
}

.tg-card__head { display: flex; align-items: center; gap: var(--space-4); }

.tg-card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #38B0E3, #229ED9 60%, #1B87BB);
  color: #fff;
  box-shadow: 0 8px 22px rgba(34, 158, 217, 0.34);
}

.tg-card__icon svg { width: 28px; height: 28px; }

.tg-card__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; }

.tg-card__handle {
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  color: #1B87BB;
}

.section--dark .tg-card__handle { color: #7FCBEE; }

.tg-card__text { font-size: var(--fs-sm); color: var(--color-text-secondary); }
.section--dark .tg-card__text { color: var(--color-text-on-dark-dim); }

/* ==========================================================================
   9. STATS & COUNTERS
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (min-width: 1024px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
}

.stat {
  position: relative;
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

@media (min-width: 1024px) {
  .stat + .stat::before {
    content: "";
    position: absolute;
    left: calc(var(--space-6) / -2);
    top: 14%;
    height: 72%;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--color-gold-hairline), transparent);
  }
}

.stat__figure {
  font-family: var(--font-num);
  font-size: clamp(1.85rem, 1.2rem + 2.5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--color-gold-bright);
}

.stat__label {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-on-dark-dim);
}

.stat__sub {
  margin-top: 6px;
  font-size: 0.6875rem;
  color: rgba(167, 163, 152, 0.72);
}

/* Light-surface variant */
.stats--light .stat__figure { color: var(--color-gold-deep); }
.stats--light .stat__label { color: var(--color-text-secondary); }
.stats--light .stat__sub { color: var(--color-text-muted); }

/* ==========================================================================
   10. SLIDERS (screenshots)
   ========================================================================== */

.slider { position: relative; }

.slider__viewport {
  display: flex;
  gap: clamp(16px, 2.2vw, 30px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 10px 4px 26px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.slider__viewport::-webkit-scrollbar { display: none; }

.slider__slide {
  flex: 0 0 auto;
  width: clamp(178px, 21vw, 232px);
  scroll-snap-align: center;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

.slider__slide .phone {
  width: 100%;
  padding: 8px;
  border-radius: 34px;
  animation: none;
}

.slider__slide .phone__screen { border-radius: 27px; }
.slider__slide .phone__notch { top: 14px; height: 15px; }

.slider__slide:hover .phone {
  box-shadow: var(--shadow-mockup), inset 0 0 0 1px rgba(201, 162, 39, 0.6), var(--shadow-gold-glow);
}

.slider__caption {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-primary);
}

.slider__caption span {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

.section--dark .slider__caption { color: #fff; }
.section--dark .slider__caption span { color: var(--color-text-on-dark-dim); }

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

.slider__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-charcoal);
  transition: all var(--dur-base) var(--ease-out);
}

.slider__btn:hover {
  background: var(--color-gold);
  border-color: var(--color-gold-deep);
  color: var(--color-charcoal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold-glow);
}

.slider__btn svg { width: 18px; height: 18px; }

.section--dark .slider__btn {
  background: rgba(46, 46, 48, 0.8);
  border-color: var(--color-obsidian-line);
  color: var(--color-gold-bright);
}

.slider__dots { display: flex; align-items: center; gap: 8px; }

.slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border-strong);
  transition: all var(--dur-base) var(--ease-out);
}

.slider__dot.is-active {
  width: 26px;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
}

.section--dark .slider__dot { background: var(--color-obsidian-line); }
.section--dark .slider__dot.is-active { background: var(--color-gold-bright); }

/* ==========================================================================
   11. OG BANNER FEATURE
   ========================================================================== */

.og-banner {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-gold-hairline);
  box-shadow: 0 30px 70px -24px rgba(28, 28, 30, 0.5);
  background: var(--color-charcoal);
}

.og-banner__media { position: relative; display: block; }

.og-banner__media img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 900ms var(--ease-out);
}

.og-banner:hover .og-banner__media img { transform: scale(1.03); }

.og-banner__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 32%,
    rgba(255, 255, 255, 0.20) 46%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0.20) 54%,
    transparent 68%);
  transform: translateX(-110%);
  animation: bannerSheen 6.5s var(--ease-in-out) 1.4s infinite;
  pointer-events: none;
}

/* Caption bar sits BELOW the artwork so it never competes with the banner's
   own baked-in typography. */
.og-banner__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-5);
  padding: clamp(18px, 2.6vw, 30px) clamp(18px, 3vw, 34px);
  background:
    radial-gradient(600px 200px at 8% 0%, rgba(201, 162, 39, 0.14), transparent 62%),
    linear-gradient(180deg, #1F1F21, #141416);
  border-top: 1px solid var(--color-gold-hairline);
}

.og-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.og-banner__copy { min-width: 0; flex: 1 1 320px; }

.og-banner__kicker {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold-bright);
}

.og-banner__title {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.85rem + 1.5vw, 2rem);
  font-weight: 600;
  color: #fff;
}

.og-banner__text {
  margin-top: 8px;
  max-width: 52ch;
  font-size: var(--fs-xs);
  color: rgba(232, 228, 217, 0.86);
}

@media (max-width: 560px) {
  .og-banner__bar { padding: 16px; }
  .og-banner__actions .btn { flex: 1 1 100%; }
}

.og-banner__corner {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--color-gold);
  opacity: 0.85;
  pointer-events: none;
  z-index: 3;
}

.og-banner__corner--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.og-banner__corner--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.og-banner__corner--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.og-banner__corner--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

/* ==========================================================================
   12. FAQ ACCORDION
   ========================================================================== */

.faq { display: grid; gap: var(--space-3); }

.faq__item {
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.faq__item.is-open {
  border-color: var(--color-gold-hairline);
  box-shadow: var(--shadow-card);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5);
  text-align: left;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}

.faq__q:hover { color: var(--color-gold-deep); }

.faq__sign {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-gold-hairline);
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-gold-deep);
  transform: translate(-50%, -50%);
  transition: opacity var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

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

.faq__item.is-open .faq__sign { background: var(--color-gold); transform: rotate(180deg); }
.faq__item.is-open .faq__sign::after { opacity: 0; }
.faq__item.is-open .faq__sign::before { background: var(--color-charcoal); }

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

.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a-inner { overflow: hidden; }

.faq__a-inner > div {
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-secondary);
}

.faq__a-inner p + p { margin-top: 0.9em; }

/* ==========================================================================
   13. FORMS
   ========================================================================== */

.form { display: grid; gap: var(--space-5); }

.form__row { display: grid; gap: var(--space-5); }

@media (min-width: 768px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: 8px; }

.field__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.field__label span { color: var(--color-error); }

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  font-size: var(--fs-sm);
  color: var(--color-text-primary);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.field__textarea { min-height: 160px; resize: vertical; }

.field__input::placeholder,
.field__textarea::placeholder { color: var(--color-text-muted); }

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}

.field.has-error .field__input,
.field.has-error .field__select,
.field.has-error .field__textarea { border-color: var(--color-error); }

.field__error {
  display: none;
  font-size: 0.75rem;
  color: var(--color-error);
}

.field.has-error .field__error { display: block; }

.field__hint { font-size: 0.75rem; color: var(--color-text-muted); }

.form__status {
  display: none;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

.form__status.is-visible { display: block; }

.form__status--ok {
  background: rgba(62, 125, 82, 0.10);
  border: 1px solid rgba(62, 125, 82, 0.34);
  color: var(--color-success);
}

.checkbox {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}

.checkbox input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: var(--color-gold-deep);
  flex: 0 0 auto;
}

/* ==========================================================================
   14. BREADCRUMBS & PROSE
   ========================================================================== */

.page-head {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 56px);
  background:
    radial-gradient(700px 340px at 82% -20%, rgba(201, 162, 39, 0.16), transparent 60%),
    linear-gradient(180deg, var(--color-bg-alt), var(--color-bg));
  border-bottom: 1px solid var(--color-border);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.breadcrumb a { transition: color var(--dur-fast) var(--ease-out); }
.breadcrumb a:hover { color: var(--color-gold-deep); }
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "/"; color: var(--color-border-strong); }
.breadcrumb [aria-current="page"] { color: var(--color-text-secondary); }

.page-head__title {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.page-head__lede {
  margin-top: var(--space-4);
  max-width: 70ch;
  font-size: var(--fs-md);
  color: var(--color-text-secondary);
}

.page-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-5);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* Long-form prose (legal + guides) */
.prose { font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--color-text-secondary); }

.prose h2 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--color-text-primary);
}

.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.prose h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}

.prose p { margin-bottom: var(--space-4); }

.prose ul,
.prose ol { margin: 0 0 var(--space-5); display: grid; gap: 10px; }

.prose li { position: relative; padding-left: 26px; }

.prose ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--color-gold);
}

.prose ol { counter-reset: prose-ol; }

.prose ol li { counter-increment: prose-ol; }

.prose ol li::before {
  content: counter(prose-ol);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-num);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-gold-deep);
}

.prose strong { color: var(--color-text-primary); font-weight: 600; }

.prose a {
  color: var(--color-gold-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose a:hover { color: var(--color-charcoal); }

.legal-layout { display: grid; gap: var(--space-7); }

@media (min-width: 1024px) {
  .legal-layout { grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-9); align-items: start; }
}

.legal-toc {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
  .legal-toc { position: sticky; top: calc(var(--header-h) + 24px); }
}

.legal-toc__title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold-deep);
}

.legal-toc__list { display: grid; gap: 3px; }

.legal-toc__list a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  transition: all var(--dur-fast) var(--ease-out);
}

.legal-toc__list a:hover {
  background: var(--color-gold-wash);
  color: var(--color-gold-deep);
  padding-left: 14px;
}

/* Data / spec table */
.spec-table {
  border-radius: var(--radius-md);
  /* scrolls inside its own box rather than widening the page */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.spec-table table { font-size: var(--fs-xs); }

.spec-table th,
.spec-table td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.spec-table th {
  width: 42%;
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-surface-tint);
}

.spec-table td { color: var(--color-text-secondary); }

.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }

/* Highlight / callout panel */
.callout {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface-tint);
  border: 1px solid var(--color-gold-hairline);
  border-left: 3px solid var(--color-gold);
}

.callout__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-3);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-text-primary);
}

.callout__title svg { width: 19px; height: 19px; color: var(--color-gold-deep); flex: 0 0 auto; }

.callout p { font-size: var(--fs-sm); color: var(--color-text-secondary); }

/* Shared sub-heading */
.mini-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Shared inline text link */
.inline-link {
  color: var(--color-gold-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}

.inline-link:hover { color: var(--color-charcoal); }

.section--dark .inline-link { color: var(--color-gold-bright); }

/* Shared rule-marked feature list */
.feature-list { display: grid; gap: var(--space-5); }

.feature-list__item {
  position: relative;
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-border);
  transition: border-color var(--dur-base) var(--ease-out);
}

.feature-list__item:hover { border-left-color: var(--color-gold); }

.feature-list__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}

.feature-list__text {
  margin-top: 8px;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-secondary);
}

/* Pill chips */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: all var(--dur-fast) var(--ease-out);
}

.chip:hover { border-color: var(--color-gold-hairline); color: var(--color-gold-deep); }

.section--dark .chip {
  background: rgba(46, 46, 48, 0.7);
  border-color: var(--color-obsidian-line);
  color: var(--color-text-on-dark-dim);
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.footer {
  position: relative;
  padding-top: var(--section-y);
  background:
    radial-gradient(760px 380px at 10% 0%, rgba(201, 162, 39, 0.13), transparent 60%),
    var(--color-charcoal);
  color: var(--color-text-on-dark-dim);
}

.footer__top {
  display: grid;
  gap: var(--space-7);
  padding-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .footer__top { grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: var(--space-6); }
}

.footer__about {
  margin-top: var(--space-5);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--color-text-on-dark-dim);
  max-width: 42ch;
}

.footer__col-title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold-bright);
}

.footer__list { display: grid; gap: 11px; }

.footer__list a {
  font-size: var(--fs-xs);
  color: var(--color-text-on-dark-dim);
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}

.footer__list a:hover { color: var(--color-gold-bright); padding-left: 5px; }

.footer__social { display: grid; gap: var(--space-3); margin-top: var(--space-4); }

.footer__social-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-obsidian-line);
  transition: all var(--dur-base) var(--ease-out);
}

.footer__social-link:hover {
  border-color: rgba(34, 158, 217, 0.5);
  background: rgba(34, 158, 217, 0.10);
  transform: translateX(3px);
}

.footer__social-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #38B0E3, #1B87BB);
  color: #fff;
}

.footer__social-icon svg { width: 19px; height: 19px; }

.footer__social-text { min-width: 0; }

.footer__social-text strong {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #fff;
}

.footer__social-text span { font-size: 0.6875rem; color: var(--color-text-on-dark-dim); }

/* Keyword / SEO tag cloud */
.footer__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-obsidian-line);
}

.footer__tag {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-obsidian-line);
  font-size: 0.6875rem;
  color: var(--color-text-on-dark-dim);
  transition: all var(--dur-fast) var(--ease-out);
}

.footer__tag:hover {
  border-color: var(--color-gold-hairline);
  color: var(--color-gold-bright);
}

/* Disclaimer block */
.footer__disclaimer {
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid var(--color-obsidian-line);
  border-left: 3px solid var(--color-gold);
}

.footer__disclaimer p {
  font-size: var(--fs-xs);
  line-height: 1.75;
  color: var(--color-text-on-dark-dim);
}

.footer__disclaimer p + p { margin-top: 10px; }

.footer__disclaimer strong { color: var(--color-gold-bright); font-weight: 600; }

.footer__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-obsidian-line);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-text-on-dark-dim);
}

.footer__badge--age {
  border-color: rgba(178, 58, 50, 0.55);
  color: #E9A19B;
}

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

.footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }

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

/* ==========================================================================
   16. COOKIE CONSENT
   ========================================================================== */

.cookie {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: var(--z-overlay);
  width: min(720px, calc(100% - 32px));
  transform: translate(-50%, 24px) scale(0.97);
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(28, 28, 30, 0.97);
  border: 1px solid var(--color-gold-hairline);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}

.cookie.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }

.cookie__text {
  flex: 1 1 300px;
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--color-text-on-dark-dim);
}

.cookie__text strong { display: block; color: #fff; font-size: var(--fs-sm); margin-bottom: 4px; }

.cookie__text a { color: var(--color-gold-bright); text-decoration: underline; text-underline-offset: 2px; }

.cookie__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* The banner sits on charcoal, so the ghost button needs the dark-surface palette */
.cookie .btn--ghost {
  color: var(--color-text-on-dark);
  border-color: rgba(201, 162, 39, 0.45);
}

.cookie .btn--ghost:hover,
.cookie .btn--ghost:focus-visible {
  color: var(--color-gold-bright);
  background: rgba(201, 162, 39, 0.10);
  border-color: var(--color-gold);
}

/* ==========================================================================
   17. SCROLL-REVEAL & KEYFRAMES
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition:
    opacity 720ms var(--ease-out),
    transform 720ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* Hero entrance stagger */
.hero__anim {
  opacity: 0;
  transform: translateY(22px);
  animation: heroIn 800ms var(--ease-out) forwards;
}

.hero__anim--1 { animation-delay: 100ms; }
.hero__anim--2 { animation-delay: 220ms; }
.hero__anim--3 { animation-delay: 340ms; }
.hero__anim--4 { animation-delay: 460ms; }
.hero__anim--5 { animation-delay: 580ms; }

@media (prefers-reduced-motion: reduce) {
  .hero__anim { opacity: 1; transform: none; animation: none; }
}

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* The tilt (perspective + rotateY/rotateX) is fixed at every keyframe stage —
   only translateY moves — so the device floats without ever un-tilting. */
@keyframes phoneFloat {
  0%, 100% { transform: perspective(1400px) rotateY(-9deg) rotateX(3deg) translateY(0); }
  50%      { transform: perspective(1400px) rotateY(-9deg) rotateX(3deg) translateY(-10px); }
}

@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

@keyframes auraPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.30; }
  50%      { transform: scale(1.055); opacity: 0.06; }
}

@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(62, 125, 82, 0.42); }
  70%      { box-shadow: 0 0 0 8px rgba(62, 125, 82, 0); }
}

@keyframes bannerSheen {
  0%      { transform: translateX(-110%); }
  38%     { transform: translateX(110%); }
  100%    { transform: translateX(110%); }
}

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

/* Continuous logo/partner marquee */
.marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(12px, 1.6vw, 20px);
  animation: marquee 44s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  flex: 0 0 auto;
  width: clamp(96px, 11vw, 130px);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.marquee__item:hover { transform: translateY(-4px); border-color: var(--color-gold); }

.marquee__item img { width: 100%; height: auto; aspect-ratio: 211 / 260; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ==========================================================================
   17b. BACK TO TOP
   ========================================================================== */

.back-to-top {
  position: fixed;
  right: clamp(14px, 2.4vw, 28px);
  bottom: clamp(14px, 2.4vw, 28px);
  z-index: var(--z-sticky);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-charcoal);
  border: 1px solid var(--color-gold);
  color: var(--color-gold-bright);
  box-shadow: 0 10px 26px rgba(28, 28, 30, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

.back-to-top:hover {
  background: var(--color-gold);
  color: var(--color-charcoal);
  box-shadow: var(--shadow-gold-glow);
}

.back-to-top svg { width: 20px; height: 20px; }

/* ==========================================================================
   18. UTILITIES
   ========================================================================== */

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

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.full { width: 100%; }