/* BoomersStake — styles.css */

/* ═══════════════════════════════════════════════
   DESIGN TOKENS — single source of truth
   ═══════════════════════════════════════════════ */
:root {
  /* Backgrounds — intentional depth stacking */
  --void:       #000508;
  --abyss:      #020c1b;
  --deep:       #050f20;
  --surface:    #081529;
  --elevated:   #0c1c35;
  --overlay:    rgba(5,15,32,0.72);

  /* Glass */
  --glass-bg:     rgba(8,21,41,0.60);
  --glass-border: rgba(120,80,255,0.14);
  --glass-shine:  rgba(255,255,255,0.04);

  /* Brand palette */
  --p9: #180438;
  --p7: #4c1d95;
  --p5: #7c3aed;
  --p4: #a855f7;
  --p3: #c084fc;
  --p2: #dbb4fe;
  --p1: #f0e6ff;

  --c7: #0c5a6e;
  --c5: #06b6d4;
  --c4: #22d3ee;
  --c3: #67e8f9;
  --c2: #a5f3fc;

  --g5: #d97706;
  --g4: #f59e0b;
  --g3: #fbbf24;
  --g2: #fde68a;

  --green: #34d399;
  --red:   #f87171;

  /* Typography */
  --text-0: #ffffff;
  --text-1: #eef2ff;
  --text-2: #9bb3d4;
  --text-3: #4e6585;
  --text-4: #243348;

  /* Radius scale */
  --r1: 6px;
  --r2: 10px;
  --r3: 16px;
  --r4: 22px;
  --r5: 32px;

  /* Spacing scale (8pt grid) */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;
  --s8: 128px;

  /* Typography scale */
  --display-2xl: clamp(52px, 8vw, 104px);
  --display-xl:  clamp(40px, 6vw, 72px);
  --display-lg:  clamp(30px, 4.5vw, 56px);
  --display-md:  clamp(22px, 3vw, 36px);
  --display-sm:  clamp(18px, 2.5vw, 24px);
  --body-lg:     clamp(15px, 1.8vw, 18px);
  --body-md:     clamp(13px, 1.4vw, 15px);
  --body-sm:     clamp(11px, 1.2vw, 13px);
  --label:       clamp(9px, 1vw, 11px);

  /* Fonts */
  --f-display: 'Orbitron', sans-serif;
  --f-body:    'Syne', sans-serif;
  --f-mono:    'JetBrains Mono', monospace;

  /* Motion */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 1, 0.6);
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1);
  --t-fast:  0.15s;
  --t-med:   0.30s;
  --t-slow:  0.55s;
  --t-epic:  0.90s;

  /* Shadows */
  --shadow-xs: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-sm: 0 4px 20px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 40px rgba(0,0,0,0.6);
  --shadow-lg: 0 20px 80px rgba(0,0,0,0.7);
  --shadow-xl: 0 40px 120px rgba(0,0,0,0.8);
  --glow-p:  0 0 60px rgba(124,58,237,0.35), 0 0 120px rgba(124,58,237,0.15);
  --glow-c:  0 0 60px rgba(6,182,212,0.30), 0 0 120px rgba(6,182,212,0.12);
  --glow-g:  0 0 60px rgba(245,158,11,0.30), 0 0 120px rgba(245,158,11,0.12);
}

/* ═══════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; } /* smooth scroll handled by JS */
body {
  font-family: var(--f-body);
  background: var(--void);
  color: var(--text-1);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { border: none; background: none; cursor: pointer; font: inherit; }
img { display: block; max-width: 100%; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--abyss); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--p5), var(--c5)); border-radius: 10px; }

/* ═══════════════════════════════════════════════
   BACKGROUND SYSTEM — Immersive depth stack
   ═══════════════════════════════════════════════ */
#bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* Animated grid — pulses opacity in waves */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(34,211,238,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
  animation: gridBreath 8s ease-in-out infinite;
}
@keyframes gridBreath {
  0%,100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* Animated ambient gradient — slow color shift across viewport */
.bg-ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 15% 25%, rgba(124,58,237,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 70%, rgba(6,182,212,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 95%, rgba(245,158,11,0.05) 0%, transparent 50%);
  animation: ambientDrift 18s ease-in-out infinite alternate;
}
@keyframes ambientDrift {
  0%   { background-position: 0% 0%, 100% 100%, 50% 100%; transform: scale(1); }
  33%  { background-position: 5% 10%, 95% 90%, 55% 95%; transform: scale(1.02); }
  66%  { background-position: -5% 5%, 105% 80%, 45% 100%; transform: scale(0.99); }
  100% { background-position: 3% -5%, 98% 95%, 52% 98%; transform: scale(1.01); }
}

/* Neon fog layer — soft colored mist drifting across */
.bg-fog {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 25% at 20% 50%, rgba(124,58,237,0.055) 0%, transparent 70%),
    radial-gradient(ellipse 35% 20% at 80% 40%, rgba(6,182,212,0.045) 0%, transparent 65%);
  animation: fogDrift 22s ease-in-out infinite;
  will-change: transform;
}
@keyframes fogDrift {
  0%,100% { transform: translate(0,0) scale(1); opacity: 0.8; }
  25%      { transform: translate(30px,-20px) scale(1.04); opacity: 1; }
  50%      { transform: translate(-15px,25px) scale(0.97); opacity: 0.7; }
  75%      { transform: translate(20px,10px) scale(1.02); opacity: 0.9; }
}

/* Vignette — deeper corners */
.bg-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 90% at 50% 50%, transparent 35%, rgba(0,3,6,0.70) 80%, rgba(0,2,5,0.92) 100%);
}

/* Scan-line overlay — ultra subtle CRT feel */
.bg-scanlines {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.018;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,255,220,0.06) 2px,
    rgba(0,255,220,0.06) 4px
  );
  animation: scanSlide 12s linear infinite;
}
@keyframes scanSlide {
  from { background-position: 0 0; }
  to   { background-position: 0 200px; }
}

/* Cinematic film grain */
.bg-grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.25s steps(1) infinite;
}
@keyframes grainShift {
  0%,100% { background-position: 0 0; }
  25%      { background-position: -60px -40px; }
  50%      { background-position: 40px 60px; }
  75%      { background-position: -30px 25px; }
}

/* ═══════════════════════════════════════════════
   CUSTOM CURSOR
   ═══════════════════════════════════════════════ */
.c-dot {
  position: fixed; width: 6px; height: 6px;
  background: var(--c4); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 8px var(--c4), 0 0 20px rgba(34,211,238,0.4);
  transition: width var(--t-fast), height var(--t-fast);
}
.c-ring {
  position: fixed; width: 28px; height: 28px;
  border: 1px solid rgba(168,85,247,0.6); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width 0.2s var(--ease-out), height 0.2s var(--ease-out),
              border-color 0.2s, opacity 0.2s;
}
.c-ring.hover { width: 44px; height: 44px; border-color: rgba(34,211,238,0.5); }
@media (hover:none) { .c-dot,.c-ring { display: none; } }

/* ═══════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════ */
.wrap        { max-width: 1200px; margin: 0 auto; padding: 0 var(--s5); position: relative; z-index: 2; }
.wrap-tight  { max-width: 840px;  margin: 0 auto; padding: 0 var(--s5); position: relative; z-index: 2; }
.section     { padding: var(--s8) 0; position: relative; }

@media (max-width: 768px) {
  .wrap, .wrap-tight { padding: 0 var(--s3); }
  .section { padding: var(--s7) 0; }
}
@media (max-width: 480px) {
  .wrap, .wrap-tight { padding: 0 var(--s2); }
  .section { padding: var(--s6) 0; }
}

/* Section labels */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-family: var(--f-mono); font-size: var(--label);
  font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c4); margin-bottom: var(--s2);
}
.eyebrow::before {
  content: '';
  width: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c4));
}
.eyebrow::after {
  content: '';
  width: 20px; height: 1px;
  background: linear-gradient(90deg, var(--c4), transparent);
}

/* Section headings */
.h-display {
  font-family: var(--f-display);
  font-size: var(--display-xl);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.03em;
}
.h-lg {
  font-family: var(--f-display);
  font-size: var(--display-lg);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.h-md {
  font-family: var(--f-display);
  font-size: var(--display-md);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.lead {
  font-family: var(--f-body);
  font-size: var(--body-lg);
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-2);
}

/* Gradient text */
.gt-purple {
  background: linear-gradient(135deg, var(--p3) 0%, var(--c4) 60%, var(--p4) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: textFlow 6s linear infinite;
}
.gt-gold {
  background: linear-gradient(135deg, var(--g3) 0%, var(--g2) 50%, var(--g3) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
@keyframes textFlow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Divider */
.hr {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, rgba(120,80,255,0.25), rgba(34,211,238,0.15), transparent);
}

/* ═══════════════════════════════════════════════
   BUTTON SYSTEM — 3D VIP DASHBOARD CONTROLS
   ═══════════════════════════════════════════════

   Architecture (layered bottom→top):
   [1] Base background gradient
   [2] ::before  — bottom depth shadow + bevel base
   [3] ::after   — top gloss reflection panel
   [4] .btn-shine (span inside btn) — diagonal sweep on hover
   [5] Text + icon content (z-index: 1)

   Every button is a physical slab with:
   - Raised bevel (lighter top edge, darker bottom edge)
   - Glossy top-half reflection
   - Recessed press on :active (shadow flips inward)
   - Outer glow that blooms on hover (two radii: tight + diffuse)
   - Neon edge ring via outline offset trick
   ═══════════════════════════════════════════════ */

/* ── Shared base ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--r2);
  cursor: pointer;
  position: relative;
  isolation: isolate;           /* new stacking context — keeps pseudo-layers clean */
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  border: none;
  outline: none;
  text-decoration: none;

  /* Physical lift transition */
  transition:
    transform       0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow      0.28s cubic-bezier(0.4, 0, 0.2, 1),
    filter          0.28s ease,
    border-color    0.18s ease;

  /* Default resting elevation */
  transform: translateY(0) scale(1);
  will-change: transform, box-shadow;
}

/* ── Gloss reflection panel (top half highlight) ── */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Convex lens — bright top strip fading to transparent mid-way */
  background: linear-gradient(
    175deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.10) 20%,
    rgba(255, 255, 255, 0.02) 48%,
    transparent              50%
  );
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.25s ease;
}
.btn:hover::before { opacity: 1.4; }
.btn:active::before { opacity: 0.6; }

/* ── Sweep shine (diagonal light trace on hover) ── */
.btn::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -80%;
  width: 55%;
  height: 140%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.13) 50%,
    transparent 80%
  );
  transform: skewX(-12deg);
  transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 3;
}
.btn:hover::after  { left: 130%; }
.btn:active::after { left: -80%; transition: none; }

/* ── Hover lift ── */
.btn:hover  { transform: translateY(-3px) scale(1.012); }

/* ── Press / active — physically sinks into surface ── */
.btn:active {
  transform: translateY(1px) scale(0.985);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* ── Sizes ── */
.btn-sm {
  padding: 10px 22px;
  font-size: 9px;
  letter-spacing: 0.2em;
  border-radius: var(--r1);
}
.btn-md { padding: 14px 32px; }
.btn-lg {
  padding: 18px 44px;
  font-size: 12px;
  border-radius: var(--r3);
}
.btn-xl {
  padding: 22px 56px;
  font-size: 13px;
  border-radius: var(--r3);
}
.btn-full { width: 100%; }

/* ═══════════════════════════════════════════════
   PRIMARY — Purple→Cyan gradient slab
   "Main dashboard action key"
   ═══════════════════════════════════════════════ */
.btn-primary {
  /* Core gradient — rich but not neon, has real depth */
  background: linear-gradient(
    160deg,
    #6d28d9  0%,
    #7c3aed  30%,
    #0e5a70  80%,
    #0c4a5e  100%
  );
  color: #f0e6ff;

  /* Layered shadow architecture:
     1. Bevel top highlight (inset top)
     2. Bevel bottom shadow (inset bottom)
     3. Contact shadow (elevation base)
     4. Tight inner glow (color bleed)
     5. Outer ambient glow (soft halo)
  */
  box-shadow:
    /* inset bevel — top bright edge */
    inset 0  1px 0    rgba(200, 160, 255, 0.30),
    /* inset bevel — bottom dark edge */
    inset 0 -1px 0    rgba(0, 0, 0, 0.45),
    /* inset side edges for depth */
    inset  1px 0  0   rgba(200, 160, 255, 0.08),
    inset -1px 0  0   rgba(0, 0, 0, 0.25),
    /* contact shadow — grounding */
    0  4px  8px  rgba(0, 0, 0, 0.55),
    0  8px  20px rgba(0, 0, 0, 0.35),
    /* inner glow — color bleeds through */
    0  0    0  1px  rgba(124, 58, 237, 0.35),
    /* outer glow — tight */
    0  0   22px  4px rgba(124, 58, 237, 0.28),
    /* outer glow — wide diffuse */
    0  0   55px 12px rgba(124, 58, 237, 0.12);

  /* Neon border via outline */
  outline: 1px solid rgba(168, 85, 247, 0.20);
  outline-offset: 0px;
}

.btn-primary:hover {
  box-shadow:
    inset 0  1px 0    rgba(200, 160, 255, 0.45),
    inset 0 -1px 0    rgba(0, 0, 0, 0.50),
    inset  1px 0  0   rgba(200, 160, 255, 0.12),
    inset -1px 0  0   rgba(0, 0, 0, 0.30),
    /* lifted contact shadow */
    0  6px 16px  rgba(0, 0, 0, 0.60),
    0 14px 36px  rgba(0, 0, 0, 0.35),
    /* stronger inner ring */
    0  0    0  1px  rgba(168, 85, 247, 0.55),
    /* tight bloom */
    0  0   28px  6px rgba(124, 58, 237, 0.45),
    /* wide diffuse bloom */
    0  0   80px 20px rgba(100, 40, 220, 0.20),
    /* underside haze */
    0 20px 50px -5px rgba(124, 58, 237, 0.30);

  outline-color: rgba(168, 85, 247, 0.50);
  outline-offset: 1px;
  filter: brightness(1.08) saturate(1.1);
}

.btn-primary:active {
  box-shadow:
    inset 0  2px 6px  rgba(0, 0, 0, 0.60),
    inset 0  1px 0    rgba(0, 0, 0, 0.40),
    0  1px  4px  rgba(0, 0, 0, 0.50),
    0  0    0  1px  rgba(124, 58, 237, 0.30),
    0  0   18px  4px rgba(124, 58, 237, 0.25);
  filter: brightness(0.92);
}

/* ═══════════════════════════════════════════════
   GHOST — Glassmorphic neutral key
   "Secondary dashboard control"
   ═══════════════════════════════════════════════ */
.btn-ghost {
  /* Frosted glass base */
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.065) 0%,
    rgba(255, 255, 255, 0.030) 60%,
    rgba(120, 80, 255, 0.040) 100%
  );
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  color: var(--text-2);

  box-shadow:
    inset 0  1px 0    rgba(255, 255, 255, 0.12),
    inset 0 -1px 0    rgba(0, 0, 0, 0.30),
    inset  1px 0  0   rgba(255, 255, 255, 0.05),
    inset -1px 0  0   rgba(0, 0, 0, 0.15),
    0  3px  8px  rgba(0, 0, 0, 0.40),
    0  0    0  1px  rgba(120, 80, 255, 0.18);

  outline: 1px solid rgba(120, 80, 255, 0.10);
  outline-offset: 0;
}

.btn-ghost:hover {
  background: linear-gradient(
    160deg,
    rgba(168, 85, 247, 0.12) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(34, 211, 238, 0.06) 100%
  );
  color: var(--text-1);

  box-shadow:
    inset 0  1px 0    rgba(255, 255, 255, 0.18),
    inset 0 -1px 0    rgba(0, 0, 0, 0.35),
    inset  1px 0  0   rgba(168, 85, 247, 0.10),
    inset -1px 0  0   rgba(0, 0, 0, 0.20),
    0  5px 14px  rgba(0, 0, 0, 0.45),
    0  0    0  1px  rgba(168, 85, 247, 0.35),
    0  0   22px  5px rgba(124, 58, 237, 0.18),
    0  0   55px 12px rgba(124, 58, 237, 0.07);

  outline-color: rgba(168, 85, 247, 0.30);
  outline-offset: 1px;
  filter: brightness(1.05);
}

.btn-ghost:active {
  box-shadow:
    inset 0  2px 8px  rgba(0, 0, 0, 0.50),
    inset 0  1px 0    rgba(0, 0, 0, 0.35),
    0  1px  3px  rgba(0, 0, 0, 0.40),
    0  0    0  1px  rgba(120, 80, 255, 0.20);
  filter: brightness(0.90);
}

/* ═══════════════════════════════════════════════
   TELEGRAM — Blue metallic key
   "Community action"
   ═══════════════════════════════════════════════ */
.btn-tg {
  background: linear-gradient(
    160deg,
    #1a4a9e  0%,
    #1565c0  35%,
    #0d47a1  75%,
    #0b3d8f  100%
  );
  color: #e3f2fd;

  box-shadow:
    inset 0  1px 0    rgba(144, 202, 249, 0.30),
    inset 0 -1px 0    rgba(0, 0, 0, 0.45),
    inset  1px 0  0   rgba(144, 202, 249, 0.08),
    inset -1px 0  0   rgba(0, 0, 0, 0.25),
    0  4px  8px  rgba(0, 0, 0, 0.55),
    0  8px  20px rgba(0, 0, 0, 0.30),
    0  0    0  1px  rgba(33, 150, 243, 0.30),
    0  0   22px  4px rgba(21, 101, 192, 0.32),
    0  0   55px 12px rgba(21, 101, 192, 0.12);

  outline: 1px solid rgba(33, 150, 243, 0.18);
  outline-offset: 0;
}

.btn-tg:hover {
  box-shadow:
    inset 0  1px 0    rgba(187, 222, 251, 0.45),
    inset 0 -1px 0    rgba(0, 0, 0, 0.50),
    inset  1px 0  0   rgba(144, 202, 249, 0.12),
    inset -1px 0  0   rgba(0, 0, 0, 0.30),
    0  6px 16px  rgba(0, 0, 0, 0.55),
    0 14px 36px  rgba(0, 0, 0, 0.30),
    0  0    0  1px  rgba(100, 181, 246, 0.50),
    0  0   28px  6px rgba(21, 101, 192, 0.45),
    0  0   80px 20px rgba(21, 101, 192, 0.18),
    0 20px 50px -5px rgba(21, 101, 192, 0.28);

  outline-color: rgba(100, 181, 246, 0.45);
  outline-offset: 1px;
  filter: brightness(1.10) saturate(1.08);
}

.btn-tg:active {
  box-shadow:
    inset 0  2px 6px  rgba(0, 0, 0, 0.60),
    inset 0  1px 0    rgba(0, 0, 0, 0.40),
    0  1px  4px  rgba(0, 0, 0, 0.50),
    0  0    0  1px  rgba(21, 101, 192, 0.30),
    0  0   18px  4px rgba(21, 101, 192, 0.25);
  filter: brightness(0.90);
}

/* ═══════════════════════════════════════════════
   GOLD — Amber metallic key
   "Black Label / premium action"
   ═══════════════════════════════════════════════ */
.btn-gold {
  background: linear-gradient(
    160deg,
    #78350f  0%,
    #92400e  25%,
    #b45309  60%,
    #8a3d0c  100%
  );
  color: #fde68a;

  box-shadow:
    inset 0  1px 0    rgba(253, 230, 138, 0.35),
    inset 0 -1px 0    rgba(0, 0, 0, 0.50),
    inset  1px 0  0   rgba(253, 230, 138, 0.10),
    inset -1px 0  0   rgba(0, 0, 0, 0.30),
    0  4px  8px  rgba(0, 0, 0, 0.55),
    0  8px  20px rgba(0, 0, 0, 0.30),
    0  0    0  1px  rgba(245, 158, 11, 0.32),
    0  0   22px  4px rgba(180, 83, 9, 0.35),
    0  0   55px 12px rgba(180, 83, 9, 0.12);

  outline: 1px solid rgba(251, 191, 36, 0.18);
  outline-offset: 0;
}

.btn-gold:hover {
  color: #fff8e1;

  box-shadow:
    inset 0  1px 0    rgba(253, 230, 138, 0.55),
    inset 0 -1px 0    rgba(0, 0, 0, 0.55),
    inset  1px 0  0   rgba(253, 230, 138, 0.15),
    inset -1px 0  0   rgba(0, 0, 0, 0.35),
    0  6px 16px  rgba(0, 0, 0, 0.55),
    0 14px 36px  rgba(0, 0, 0, 0.28),
    0  0    0  1px  rgba(253, 230, 138, 0.50),
    0  0   28px  6px rgba(245, 158, 11, 0.45),
    0  0   80px 20px rgba(217, 119, 6, 0.20),
    0 20px 50px -5px rgba(180, 83, 9, 0.32);

  outline-color: rgba(251, 191, 36, 0.45);
  outline-offset: 1px;
  filter: brightness(1.10) saturate(1.05);
}

.btn-gold:active {
  box-shadow:
    inset 0  2px 6px  rgba(0, 0, 0, 0.65),
    inset 0  1px 0    rgba(0, 0, 0, 0.45),
    0  1px  4px  rgba(0, 0, 0, 0.50),
    0  0    0  1px  rgba(180, 83, 9, 0.30),
    0  0   18px  4px rgba(180, 83, 9, 0.25);
  filter: brightness(0.88);
}

/* ═══════════════════════════════════════════════
   GLASS CARD SYSTEM
   ═══════════════════════════════════════════════ */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: var(--r4);
  position: relative; overflow: hidden;
}
/* Subtle inner shine */
.card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.06) 30%,
              rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.06) 70%, transparent 95%);
}
/* Top glow line — visible on hover */
.card::after {
  content: '';
  position: absolute; top: -1px; left: 15%; right: 15%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--p4), var(--c4), transparent);
  border-radius: 100px;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
  filter: blur(1px);
}
.card:hover::after { opacity: 1; }
.card:hover {
  border-color: rgba(168,85,247,0.28);
  box-shadow: var(--shadow-lg), var(--glow-p);
}

/* ═══════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════ */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 500;
  padding: var(--s3) 0;
  transition: padding var(--t-med), background var(--t-med), border-color var(--t-med);
}
#nav.stuck {
  padding: 14px 0;
  background: rgba(2,12,27,0.92);
  backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid rgba(120,80,255,0.1);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; }

/* Logotype */
.logotype {
  display: flex; align-items: center; gap: 12px;
}
.logo-gem {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--p5), var(--c5));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 15px; font-weight: 900; color: #fff;
  box-shadow: 0 0 0 1px rgba(168,85,247,0.4), 0 0 20px rgba(124,58,237,0.5);
  transition: box-shadow var(--t-med);
}
.logotype:hover .logo-gem {
  box-shadow: 0 0 0 1px rgba(168,85,247,0.7), var(--glow-p);
}
.logo-name {
  font-family: var(--f-display); font-size: 15px; font-weight: 800;
  letter-spacing: 0.22em; color: var(--text-1);
}

.nav-links {
  display: flex; align-items: center; gap: var(--s5);
}
.nav-links a {
  font-family: var(--f-body); font-size: var(--body-sm); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--t-fast);
  position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -3px; left: 0; right: 100%;
  height: 1px; background: var(--c4);
  transition: right 0.25s var(--ease-out);
}
.nav-links a:hover { color: var(--text-1); }
.nav-links a:hover::after { right: 0; }

.nav-actions { display: flex; align-items: center; gap: var(--s2); }

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 4px; cursor: pointer; }
.hamburger span { width: 22px; height: 1.5px; background: var(--text-2); border-radius: 2px; transition: all 0.3s; display: block; }

/* Mobile drawer */
.drawer {
  display: none; position: fixed; inset: 0; z-index: 490;
  background: rgba(2,12,27,0.97); backdrop-filter: blur(24px);
  flex-direction: column; align-items: center; justify-content: center; gap: var(--s5);
  padding-top: 80px;
}
.drawer.open { display: flex; }
.drawer a {
  font-family: var(--f-display); font-size: var(--display-sm); font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-3); transition: color var(--t-fast);
}
.drawer a:hover { color: var(--c4); }
.drawer-close {
  position: absolute; top: 20px; right: 24px;
  font-size: 22px; color: var(--text-3); cursor: pointer;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border); border-radius: 50%;
  transition: all var(--t-fast);
}
.drawer-close:hover { color: var(--text-1); border-color: rgba(168,85,247,0.4); }

@media (max-width: 920px) {
  .nav-links, .nav-ghost { display: none; }
  .hamburger { display: flex; }
}

/* ═══════════════════════════════════════════════
   HERO — Cinematic immersive atmosphere
   ═══════════════════════════════════════════════ */
#hero {
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 140px 0 100px;
  overflow: hidden;
  position: relative;
}

/* ── Deep nebula — breathes slowly ── */
.hero-nebula {
  position: absolute; inset: -10%; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 28% 38%, rgba(124,58,237,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 45% 45% at 72% 62%, rgba(6,182,212,0.15) 0%, transparent 55%),
    radial-gradient(ellipse 35% 35% at 52% 82%, rgba(245,158,11,0.07) 0%, transparent 50%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 45%, var(--void) 100%);
  animation: nebulaBreath 14s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes nebulaBreath {
  0%,100% { opacity: 1;    transform: scale(1)    translate(0,0); }
  33%      { opacity: 0.88; transform: scale(1.03) translate(8px,-6px); }
  66%      { opacity: 0.95; transform: scale(0.98) translate(-5px,8px); }
}

/* ── Aurora curtain — slow vertical color wash ── */
.hero-aurora {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.hero-aurora::before {
  content: '';
  position: absolute;
  top: -60%; left: -20%; width: 140%; height: 90%;
  background: conic-gradient(
    from 200deg at 50% 60%,
    transparent            0deg,
    rgba(124,58,237,0.06)  30deg,
    rgba(34,211,238,0.08)  70deg,
    rgba(6,182,212,0.06)   110deg,
    rgba(124,58,237,0.04)  150deg,
    transparent            180deg,
    rgba(245,158,11,0.03)  220deg,
    transparent            260deg,
    rgba(124,58,237,0.05)  300deg,
    transparent            360deg
  );
  filter: blur(40px);
  animation: auroraSway 20s ease-in-out infinite;
  transform-origin: 50% 80%;
}
.hero-aurora::after {
  content: '';
  position: absolute;
  top: -40%; left: -10%; width: 120%; height: 70%;
  background: conic-gradient(
    from 160deg at 40% 70%,
    transparent            0deg,
    rgba(34,211,238,0.05)  40deg,
    rgba(124,58,237,0.07)  90deg,
    transparent            140deg,
    rgba(6,182,212,0.04)   190deg,
    transparent            240deg
  );
  filter: blur(50px);
  animation: auroraSway 26s ease-in-out 3s infinite reverse;
  transform-origin: 60% 70%;
}
@keyframes auroraSway {
  0%,100% { transform: rotate(0deg) scaleX(1); }
  50%      { transform: rotate(4deg) scaleX(1.06); }
}

/* ── Horizontal light streaks — more layers, varied speeds ── */
.hero-streak {
  position: absolute; pointer-events: none;
  height: 1px; border-radius: 100px;
  will-change: opacity, transform;
}
.hero-streak-1 {
  width: 55%; top: 32%; left: -12%;
  background: linear-gradient(90deg, transparent 0%, rgba(168,85,247,0.5) 40%, rgba(34,211,238,0.35) 70%, transparent 100%);
  animation: streakSlide 5s ease-in-out infinite;
}
.hero-streak-2 {
  width: 38%; top: 52%; right: -8%;
  background: linear-gradient(270deg, transparent 0%, rgba(34,211,238,0.3) 50%, transparent 100%);
  animation: streakSlide 6.5s ease-in-out 1.5s infinite reverse;
}
.hero-streak-3 {
  width: 25%; top: 68%; left: 22%;
  background: linear-gradient(90deg, transparent 0%, rgba(245,158,11,0.25) 50%, transparent 100%);
  animation: streakSlide 8s ease-in-out 0.7s infinite;
}
.hero-streak-4 {
  width: 18%; top: 22%; right: 30%;
  height: 0.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(124,58,237,0.4) 50%, transparent 100%);
  animation: streakSlide 4.5s ease-in-out 2s infinite reverse;
}
.hero-streak-5 {
  width: 12%; top: 78%; left: 45%;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,0.3), transparent);
  animation: streakSlide 7s ease-in-out 1s infinite;
}
@keyframes streakSlide {
  0%   { opacity: 0; transform: scaleX(0.3) translateX(-8%); }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: scaleX(1.1) translateX(5%); }
}

/* ── Lens flare — multi-point optical effect ── */
.hero-flare {
  position: absolute; pointer-events: none; border-radius: 50%;
  top: 16%; left: 54%; width: 4px; height: 4px;
  background: rgba(255,255,255,0.95);
  box-shadow:
    0 0 4px 1px rgba(255,255,255,0.9),
    0 0 20px 6px rgba(200,130,255,0.55),
    0 0 60px 20px rgba(124,58,237,0.30),
    0 0 150px 55px rgba(34,211,238,0.14),
    0 0 280px 90px rgba(124,58,237,0.06);
  animation: flarePulse 6s ease-in-out infinite;
}
/* Chromatic streak from flare */
.hero-flare::before {
  content: '';
  position: absolute;
  top: 50%; left: -120px; width: 120px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,0.25), rgba(34,211,238,0.15));
  transform: translateY(-50%);
  animation: flarePulse 6s ease-in-out infinite;
}
.hero-flare::after {
  content: '';
  position: absolute;
  top: 50%; left: 4px; width: 80px; height: 1px;
  background: linear-gradient(90deg, rgba(200,130,255,0.2), transparent);
  transform: translateY(-50%);
  animation: flarePulse 6s ease-in-out infinite;
}
@keyframes flarePulse {
  0%,100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.4); }
}

/* ── Floating ambient orbs ── */
.hero-orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(70px);
  animation: orbFloat var(--dur, 12s) ease-in-out var(--del, 0s) infinite;
  will-change: transform, opacity;
}
.hero-orb-a {
  width: 380px; height: 380px; top: 5%; left: -8%;
  background: radial-gradient(circle, rgba(124,58,237,0.16), transparent 70%);
  --dur: 15s; --del: 0s;
}
.hero-orb-b {
  width: 280px; height: 280px; bottom: 10%; right: -5%;
  background: radial-gradient(circle, rgba(6,182,212,0.13), transparent 70%);
  --dur: 18s; --del: -6s;
}
.hero-orb-c {
  width: 180px; height: 180px; top: 55%; left: 40%;
  background: radial-gradient(circle, rgba(245,158,11,0.10), transparent 70%);
  --dur: 12s; --del: -3s;
}
@keyframes orbFloat {
  0%,100% { transform: translate(0,0) scale(1);        opacity: 0.7; }
  25%      { transform: translate(20px,-25px) scale(1.05); opacity: 1; }
  50%      { transform: translate(-15px,20px) scale(0.95); opacity: 0.8; }
  75%      { transform: translate(10px,-10px) scale(1.02); opacity: 0.9; }
}

/* ─── Hero content ─── */
.hero-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s6); align-items: center; width: 100%;
}

/* Badge */
.hero-badge {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-family: var(--f-mono); font-size: 10px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c3);
  background: rgba(34,211,238,0.06);
  border: 1px solid rgba(34,211,238,0.22);
  padding: 8px 16px; border-radius: 100px;
  margin-bottom: var(--s3);
  opacity: 0; /* explicit start — animation sets final state */
  animation: heroFade 0.65s 0.05s var(--ease-out) forwards;
  box-shadow: 0 0 20px rgba(34,211,238,0.08), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative; overflow: hidden;
}
/* Badge shimmer */
.hero-badge::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,0.12), transparent);
  animation: badgeShimmer 4s ease-in-out infinite;
}
@keyframes badgeShimmer { 0%,60%,100% { left: -100%; } 80% { left: 100%; } }

.badge-pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--c4);
  box-shadow: 0 0 6px var(--c4), 0 0 12px rgba(34,211,238,0.5);
  animation: beatPulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes beatPulse {
  0%,100% { transform: scale(1); opacity: 1; box-shadow: 0 0 6px var(--c4), 0 0 12px rgba(34,211,238,0.5); }
  50%      { transform: scale(1.7); opacity: 0.5; box-shadow: 0 0 10px var(--c4), 0 0 25px rgba(34,211,238,0.3); }
}

/* Main wordmark */
.hero-wordmark {
  font-family: var(--f-display);
  font-size: var(--display-2xl);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.05em;
  margin-bottom: var(--s4);
  opacity: 0;
  animation: heroFade 0.65s 0.12s var(--ease-out) forwards;
}
.wm-line1 {
  display: block; color: var(--text-0);
  text-shadow:
    0 0 40px rgba(255,255,255,0.08),
    0 0 80px rgba(168,85,247,0.06);
  animation: titleGlow 6s ease-in-out infinite;
}
@keyframes titleGlow {
  0%,100% { text-shadow: 0 0 40px rgba(255,255,255,0.06), 0 0 80px rgba(168,85,247,0.05); }
  50%      { text-shadow: 0 0 60px rgba(255,255,255,0.12), 0 0 120px rgba(168,85,247,0.10); }
}
.wm-line2 {
  display: block;
  background: linear-gradient(100deg, var(--p4) 0%, var(--c4) 35%, var(--p3) 65%, var(--c3) 85%);
  background-size: 300% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: textFlow 4.5s linear infinite; /* no heroFade — parent handles it */
  filter: drop-shadow(0 0 30px rgba(168,85,247,0.4));
}

/* Tag line */
.hero-tag {
  font-family: var(--f-display); font-size: var(--body-lg); font-weight: 500;
  letter-spacing: 0.06em; color: var(--text-2);
  margin-bottom: var(--s3); opacity: 0.9;
  opacity: 0;
  animation: heroFade 0.65s 0.20s var(--ease-out) forwards;
}

.hero-copy {
  font-size: var(--body-lg); font-weight: 400; line-height: 1.8;
  color: var(--text-2); max-width: 460px;
  margin-bottom: var(--s5);
  opacity: 0;
  animation: heroFade 0.65s 0.28s var(--ease-out) forwards;
}

.hero-ctas {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-bottom: var(--s5);
  opacity: 0;
  animation: heroFade 0.65s 0.36s var(--ease-out) forwards;
}

/* Stats row */
.hero-metrics {
  display: flex; gap: 0;
  padding-top: var(--s4); border-top: 1px solid rgba(120,80,255,0.14);
  opacity: 0;
  animation: heroFade 0.65s 0.44s var(--ease-out) forwards;
}
.hm-item { padding: 0 var(--s4) 0 0; border-right: 1px solid rgba(120,80,255,0.1); margin-right: var(--s4); }
.hm-item:last-child { border: none; padding: 0; margin: 0; }
.hm-val {
  font-family: var(--f-display); font-size: var(--display-md); font-weight: 800;
  display: block;
  background: linear-gradient(135deg, var(--text-0), var(--p3));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hm-lbl { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); margin-top: 4px; display: block; }

/* Fade-in keyframe */
@keyframes heroFade {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Hero right: mascot + holographic elements ─── */
.hero-right {
  position: relative; display: flex; align-items: center; justify-content: center; /* never none at base level */
  opacity: 0;
  animation: heroFade 0.65s 0.3s var(--ease-out) forwards;
}

/* Orbital rings — more glow, animated dash offset */
.orb-ring {
  position: absolute; border-radius: 50%; pointer-events: none;
  animation: orbSpin var(--dur, 20s) linear infinite;
}
.orb-ring-1 {
  width: 440px; height: 440px;
  border: 1px solid rgba(124,58,237,0.18);
  box-shadow: 0 0 20px rgba(124,58,237,0.08), inset 0 0 20px rgba(124,58,237,0.05);
  --dur: 24s;
}
.orb-ring-2 {
  width: 340px; height: 340px;
  border: 1px dashed rgba(34,211,238,0.14);
  box-shadow: 0 0 15px rgba(34,211,238,0.06);
  --dur: 18s; animation-direction: reverse;
}
.orb-ring-3 {
  width: 240px; height: 240px;
  border: 1px solid rgba(245,158,11,0.10);
  box-shadow: 0 0 12px rgba(245,158,11,0.04);
  --dur: 14s;
}
/* Orbiting dots with enhanced glow */
.orb-ring::before {
  content: ''; position: absolute;
  top: -5px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
}
.orb-ring-1::before {
  background: var(--p4);
  box-shadow: 0 0 10px 3px var(--p4), 0 0 30px 8px rgba(168,85,247,0.5), 0 0 60px 15px rgba(124,58,237,0.2);
  animation: dotPulse 3s ease-in-out infinite;
}
.orb-ring-2::before {
  background: var(--c4);
  box-shadow: 0 0 10px 3px var(--c4), 0 0 30px 8px rgba(34,211,238,0.5), 0 0 60px 15px rgba(6,182,212,0.2);
  animation: dotPulse 2.5s ease-in-out 0.5s infinite;
}
.orb-ring-3::before {
  background: var(--g3);
  box-shadow: 0 0 8px 2px var(--g3), 0 0 20px 5px rgba(251,191,36,0.4);
  animation: dotPulse 3.5s ease-in-out 1s infinite;
}
@keyframes dotPulse {
  0%,100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.5); }
}
@keyframes orbSpin { to { transform: rotate(360deg); } }

/* Mascot container — enhanced levitation + glow breathing */
.mascot-wrap {
  position: relative; z-index: 2;
  width: 240px; height: 260px;
  animation: mascotFloat 5.5s ease-in-out infinite;
}
@keyframes mascotFloat {
  0%,100% {
    transform: translateY(0) rotate(-0.5deg);
    filter: drop-shadow(0 28px 20px rgba(124,58,237,0.35)) drop-shadow(0 0 40px rgba(124,58,237,0.15));
  }
  50% {
    transform: translateY(-18px) rotate(0.5deg);
    filter: drop-shadow(0 48px 32px rgba(124,58,237,0.18)) drop-shadow(0 0 60px rgba(124,58,237,0.22));
  }
}

/* Holographic data chips — richer glass, animated top border */
.holo-chip {
  position: absolute; z-index: 3;
  background: rgba(8,21,41,0.78);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(120,80,255,0.20);
  border-radius: var(--r3); padding: 12px 16px;
  pointer-events: none;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 1px 0 rgba(255,255,255,0.08) inset;
  overflow: hidden;
}
/* Animated neon top edge */
.holo-chip::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(168,85,247,0.9) 40%, rgba(34,211,238,0.7) 60%, transparent 95%);
  animation: chipEdgePulse 3s ease-in-out infinite;
}
@keyframes chipEdgePulse {
  0%,100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
/* Gloss reflection inside chip */
.holo-chip::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  pointer-events: none;
}
.chip-1 {
  top: 10px; right: -50px;
  animation: chipFloat1 6.5s ease-in-out infinite;
}
.chip-2 {
  bottom: 50px; left: -60px;
  animation: chipFloat2 7.5s ease-in-out 1s infinite;
}
.chip-3 {
  top: 48%; right: -60px; transform: translateY(-50%);
  animation: chipFloat3 5.8s ease-in-out 0.5s infinite;
}
@keyframes chipFloat1 {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-12px) rotate(1deg); }
}
@keyframes chipFloat2 {
  0%,100% { transform: translateY(0) rotate(1deg); }
  50%      { transform: translateY(-10px) rotate(-1deg); }
}
@keyframes chipFloat3 {
  0%,100% { transform: translateY(-50%) rotate(-0.5deg); }
  50%      { transform: translateY(calc(-50% - 11px)) rotate(0.5deg); }
}
.chip-label { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; position: relative; z-index: 1; }
.chip-value { font-family: var(--f-display); font-size: 17px; font-weight: 700; color: var(--text-1); line-height: 1.1; position: relative; z-index: 1; }
.chip-delta { font-size: 11px; font-weight: 600; margin-top: 3px; position: relative; z-index: 1; }
.up   { color: var(--green); }
.live { color: var(--c4); }

/* ─── Hero responsive ─── */
@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--s4);
  }
  .hero-badge, .hero-ctas, .hero-metrics { justify-content: center; }
  .hero-copy { margin-left: auto; margin-right: auto; }
  .hero-metrics { flex-wrap: wrap; row-gap: var(--s3); }
  .hm-item { min-width: 100px; }

  /* FIX 3 — Show robot on mobile, scaled down, below text */
  .hero-right {
    display: flex;    /* was display:none — restored */
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 340px;
    padding: var(--s3) 0 var(--s2);
    overflow: visible;
  }
  /* Scale down orbital rings so they don't overflow */
  .orb-ring-1 { width: 280px; height: 280px; }
  .orb-ring-2 { width: 210px; height: 210px; }
  .orb-ring-3 { width: 150px; height: 150px; }
  /* Scale down mascot */
  .mascot-wrap { width: 160px; height: 175px; }
  /* Hide chips on mobile — too cramped */
  .holo-chip { display: none; }
}

@media (max-width: 480px) {
  #hero { padding: 110px 0 60px; }
  .hm-item { padding: 0 var(--s3) 0 0; margin-right: var(--s3); }
  .orb-ring-1 { width: 220px; height: 220px; }
  .orb-ring-2 { width: 165px; height: 165px; }
  .orb-ring-3 { width: 115px; height: 115px; }
  .mascot-wrap { width: 130px; height: 142px; }
}

/* ═══════════════════════════════════════════════
   TRUST STRIP
   ═══════════════════════════════════════════════ */
#trust {
  padding: var(--s5) 0;
  border-top: 1px solid rgba(120,80,255,0.08);
  border-bottom: 1px solid rgba(120,80,255,0.08);
  background: linear-gradient(90deg, transparent, rgba(124,58,237,0.025) 50%, transparent);
}
.trust-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2);
}
.trust-pill {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s1); padding: var(--s4) var(--s2);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(120,80,255,0.1); border-radius: var(--r3);
  transition: all var(--t-med) var(--ease-out);
}
.trust-pill:hover {
  background: rgba(120,80,255,0.06);
  border-color: rgba(168,85,247,0.22);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 20px rgba(124,58,237,0.1);
}
.trust-ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  transition: transform var(--t-fast);
}
.trust-pill:hover .trust-ico { transform: scale(1.1); }
.trust-name { font-family: var(--f-display); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.trust-sub  { font-size: 11px; color: var(--text-3); line-height: 1.4; }
@media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════════════════════════════════════════
   PARTNERS — Futuristic app module cards
   ═══════════════════════════════════════════════ */
#partners { padding: var(--s8) 0; }
.partners-intro {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s6); align-items: end; margin-bottom: var(--s6);
}
@media (max-width: 768px) {
  .partners-intro { grid-template-columns: 1fr; gap: var(--s3); }
}
.partners-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3);
}
@media (max-width: 1024px) { .partners-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .partners-grid { grid-template-columns: 1fr; } }

/* Partner card — cinematic app module */
.pcard {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(120,80,255,0.15);
  border-radius: var(--r4); padding: 0;
  overflow: hidden; position: relative;
  transition:
    transform 0.40s cubic-bezier(0.34, 1.28, 0.64, 1),
    border-color 0.30s ease,
    box-shadow 0.40s ease;
  cursor: default;

  /* Resting elevation shadow */
  box-shadow:
    0 4px 20px rgba(0,0,0,0.45),
    0 1px 0 rgba(255,255,255,0.04) inset;

  /* Staggered entry animations — applied via JS */
  opacity: 0;
  animation: cardReveal 0.7s var(--ease-out) var(--card-delay, 0s) forwards;
}
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(32px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Animated neon border — gradient that rotates around the card */
.pcard::before {
  content: '';
  position: absolute; inset: -1px; border-radius: var(--r4);
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent              0%,
    rgba(168,85,247,0.00)    10%,
    rgba(168,85,247,0.55)    25%,
    rgba(34,211,238,0.45)    40%,
    rgba(168,85,247,0.20)    55%,
    transparent              70%,
    transparent              100%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s ease;
  animation: borderSpin 4s linear infinite paused;
}
.pcard:hover::before { opacity: 1; animation-play-state: running; }
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes borderSpin { to { --angle: 360deg; } }

/* Inner card face — sits on top of border trick */
.pcard-face {
  position: absolute; inset: 1px; border-radius: calc(var(--r4) - 1px);
  background: var(--glass-bg); z-index: 0; pointer-events: none;
}

/* Hover lift + glow */
.pcard:hover {
  transform: translateY(-10px) scale(1.012);
  border-color: rgba(168,85,247,0.0); /* hidden behind conic */
  box-shadow:
    0 0 0 1px rgba(168,85,247,0.25),
    0 20px 60px rgba(0,0,0,0.6),
    0 8px 30px rgba(0,0,0,0.4),
    0 0 50px rgba(124,58,237,0.22),
    0 0 100px rgba(124,58,237,0.10);
}

/* Mouse-tracking radial spotlight */
.pcard-glow {
  position: absolute; inset: 0; border-radius: var(--r4);
  background: radial-gradient(
    circle 220px at var(--mx, 50%) var(--my, 0%),
    rgba(124,58,237,0.14),
    rgba(34,211,238,0.05) 50%,
    transparent 75%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none; z-index: 1;
}
.pcard:hover .pcard-glow { opacity: 1; }

/* Moving shine reflection — horizontal sweep */
.pcard-shine {
  position: absolute; inset: 0; border-radius: var(--r4);
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255,255,255,0.06) 45%,
    rgba(255,255,255,0.03) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none; z-index: 2;
}
.pcard:hover .pcard-shine { transform: translateX(100%); }

/* Header strip */
.pcard-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--s3);
  border-bottom: 1px solid rgba(120,80,255,0.10);
  background: rgba(255,255,255,0.018);
  position: relative; z-index: 3;
}
.pcard-status {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase;
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  animation: statusBlink 2.5s ease-in-out infinite;
}
@keyframes statusBlink {
  0%,100% { opacity: 1;   box-shadow: 0 0 4px currentColor; }
  50%      { opacity: 0.3; box-shadow: none; }
}
.pcard-tier {
  font-family: var(--f-display); font-size: 8px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px; border: 1px solid;
}
.tier-gold   { color: var(--g3); border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.07); }
.tier-purple { color: var(--p3); border-color: rgba(192,132,252,0.35); background: rgba(192,132,252,0.07); }
.tier-cyan   { color: var(--c3); border-color: rgba(103,232,249,0.35); background: rgba(103,232,249,0.07); }
.tier-green  { color: var(--green); border-color: rgba(52,211,153,0.35); background: rgba(52,211,153,0.07); }

/* Card body */
.pcard-body { padding: var(--s3); position: relative; z-index: 3; }

/* Identity row */
.pcard-identity {
  display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3);
}
.pcard-logo {
  width: 50px; height: 50px; border-radius: var(--r2); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 18px; font-weight: 900; color: #fff;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}
.pcard:hover .pcard-logo { transform: scale(1.08); }
.pcard-logo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, transparent 55%);
}
.pcard-name  { font-family: var(--f-display); font-size: var(--display-sm); font-weight: 800; letter-spacing: 0.04em; }
.pcard-cat   { font-size: 11px; color: var(--text-3); margin-top: 2px; font-family: var(--f-mono); letter-spacing: 0.08em; }

/* Metrics row */
.pcard-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1);
  margin-bottom: var(--s3);
}
.pm-box {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(120,80,255,0.09);
  border-radius: var(--r2); padding: 12px;
  transition: border-color 0.25s, background 0.25s;
}
.pcard:hover .pm-box {
  background: rgba(255,255,255,0.035);
  border-color: rgba(120,80,255,0.18);
}
.pm-label { font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; }
.pm-value { font-family: var(--f-display); font-size: var(--display-sm); font-weight: 800; line-height: 1; }

/* Feature pills */
.pcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s3); }
.ptag {
  font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 100px;
  color: var(--c3); border: 1px solid rgba(103,232,249,0.2); background: rgba(103,232,249,0.04);
  transition: all 0.2s ease;
}
.pcard:hover .ptag {
  border-color: rgba(103,232,249,0.35);
  background: rgba(103,232,249,0.08);
}

/* Action row */
.pcard-actions { display: flex; gap: var(--s1); }
.pcard-actions .btn { flex: 1; }

/* ═══════════════════════════════════════════════
   COMMUNITY
   ═══════════════════════════════════════════════ */
#community { padding: var(--s8) 0; }
.comm-intro { text-align: center; margin-bottom: var(--s6); }
.comm-intro .eyebrow { justify-content: center; }
.comm-intro .lead { max-width: 520px; margin: 0 auto; }

.comm-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3);
}
@media (max-width: 768px) { .comm-grid { grid-template-columns: 1fr; } }

.comm-card {
  background: var(--glass-bg);
  backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r4); padding: var(--s5);
  transition:
    transform 0.40s cubic-bezier(0.34, 1.28, 0.64, 1),
    border-color 0.30s ease,
    box-shadow 0.35s ease;
  position: relative; overflow: hidden;
}
/* Comm card inner shine */
.comm-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.06) 30%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.06) 70%, transparent 95%);
}
/* Top glow line on hover */
.comm-card::after {
  content: '';
  position: absolute; top: -1px; left: 20%; right: 20%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--p4), var(--c4), transparent);
  border-radius: 100px; opacity: 0; filter: blur(1px);
  transition: opacity 0.30s ease;
}
.comm-card:hover { transform: translateY(-6px); border-color: rgba(168,85,247,0.24); box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(124,58,237,0.12); }
.comm-card:hover::after { opacity: 1; }
.comm-card-title { font-family: var(--f-display); font-size: var(--display-sm); font-weight: 700; letter-spacing: 0.04em; margin-bottom: var(--s3); }

/* Subtle floating animation on community cards */
.comm-card:nth-child(1) { animation: cardDrift 8s ease-in-out infinite; }
.comm-card:nth-child(2) { animation: cardDrift 9s ease-in-out 1.5s infinite; }
.comm-card:nth-child(3) { animation: cardDrift 7.5s ease-in-out 3s infinite; }
.comm-card:nth-child(4) { animation: cardDrift 10s ease-in-out 0.8s infinite; }
@keyframes cardDrift {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.comm-card:hover { animation: none; }

.stat-quad {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2);
}
.sq-box {
  background: rgba(255,255,255,0.025); border: 1px solid rgba(120,80,255,0.1);
  border-radius: var(--r3); padding: var(--s3);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.sq-box:hover { border-color: rgba(168,85,247,0.25); box-shadow: 0 4px 20px rgba(124,58,237,0.1); }
.sq-num { font-family: var(--f-display); font-size: var(--display-md); font-weight: 800; display: block; }
.sq-lbl { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-top: 5px; display: block; }

/* Activity feed */
.feed { display: flex; flex-direction: column; gap: var(--s1); }
.feed-row {
  display: flex; align-items: center; gap: var(--s2);
  padding: 11px var(--s2); background: rgba(255,255,255,0.018);
  border: 1px solid rgba(120,80,255,0.08); border-radius: var(--r2);
  transition: border-color 0.20s, background 0.20s, transform 0.20s;
}
.feed-row:hover { border-color: rgba(120,80,255,0.22); background: rgba(120,80,255,0.04); transform: translateX(3px); }
.feed-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.feed-txt { font-size: var(--body-sm); color: var(--text-2); flex: 1; line-height: 1.4; }
.feed-amt { font-family: var(--f-display); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.feed-live {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.18em;
  color: var(--green); margin-bottom: var(--s2);
}
.feed-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: beatPulse 1.5s infinite; }

/* Bar chart */
.bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 90px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bar-fill {
  width: 100%; border-radius: 4px 4px 0 0;
  transition: height var(--t-slow) var(--ease-out), box-shadow 0.3s ease;
}
.bar-col:hover .bar-fill { filter: brightness(1.3); }
.bar-lbl { font-family: var(--f-mono); font-size: 8px; color: var(--text-3); letter-spacing: 0.1em; }

/* Telegram card */
.tg-comm {
  background: linear-gradient(135deg, rgba(21,101,192,0.16) 0%, rgba(8,21,41,0.65) 100%);
  border-color: rgba(33,150,243,0.22);
  text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.tg-comm:hover { border-color: rgba(33,150,243,0.42); box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 50px rgba(21,101,192,0.18) !important; }
.tg-big { font-size: 60px; line-height: 1; margin-bottom: var(--s2); animation: tgFloat 4s ease-in-out infinite; }
@keyframes tgFloat {
  0%,100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 15px rgba(33,150,243,0.3)); }
  50%      { transform: translateY(-8px) scale(1.05); filter: drop-shadow(0 8px 25px rgba(33,150,243,0.5)); }
}
.tg-count { font-family: var(--f-display); font-size: var(--display-lg); font-weight: 900; display: block; margin-bottom: var(--s1); }
.tg-sub { font-size: var(--body-md); color: var(--text-2); margin-bottom: var(--s4); max-width: 280px; line-height: 1.6; }

/* ═══════════════════════════════════════════════
   WHY US
   ═══════════════════════════════════════════════ */
#why { padding: var(--s8) 0; }
.why-intro {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s7); align-items: end; margin-bottom: var(--s6);
}
@media (max-width: 768px) { .why-intro { grid-template-columns: 1fr; gap: var(--s3); } }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .why-grid { grid-template-columns: 1fr; } }

.wc {
  background: var(--glass-bg); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border); border-radius: var(--r4);
  padding: var(--s4) var(--s3); position: relative; overflow: hidden;
  transition: all var(--t-med) var(--ease-out);
}
.wc:hover { transform: translateY(-4px); border-color: rgba(168,85,247,0.28); box-shadow: var(--shadow-md), var(--glow-p); }
.wc::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,0.55), transparent);
  opacity: 0; transition: opacity var(--t-med);
}
.wc:hover::before { opacity: 1; }
.wc-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  margin-bottom: var(--s3);
}
.wc-title { font-family: var(--f-display); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.wc-desc { font-size: var(--body-md); color: var(--text-2); line-height: 1.7; }

/* ═══════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════ */
#faq { padding: var(--s8) 0; }
.faq-head { text-align: center; margin-bottom: var(--s6); }
.faq-head .eyebrow { justify-content: center; }
.faq-col { display: flex; flex-direction: column; gap: 10px; }

.fq {
  background: var(--glass-bg); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border); border-radius: var(--r3);
  overflow: hidden; transition: border-color var(--t-med);
}
.fq.open { border-color: rgba(168,85,247,0.28); }
.fq-q {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--s4); cursor: pointer; user-select: none;
  font-family: var(--f-display); font-size: 13px; font-weight: 600;
  letter-spacing: 0.03em; color: var(--text-1);
  transition: color var(--t-fast);
}
.fq-q:hover { color: var(--c3); }
.fq-icon {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: rgba(124,58,237,0.12); border: 1px solid rgba(168,85,247,0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--p3);
  transition: transform 0.3s var(--ease-out), background 0.2s;
}
.fq.open .fq-icon { transform: rotate(180deg); background: rgba(124,58,237,0.25); }
.fq-a {
  max-height: 0; overflow: hidden; padding: 0 var(--s4);
  transition: max-height 0.4s cubic-bezier(0,1,0,1), padding 0.3s;
}
.fq.open .fq-a {
  max-height: 300px; padding: 0 var(--s4) 20px;
  transition: max-height 0.5s cubic-bezier(0.5,0,1,0), padding 0.3s;
}
.fq-a p {
  font-size: var(--body-md); color: var(--text-2); line-height: 1.75;
  border-top: 1px solid rgba(120,80,255,0.1); padding-top: var(--s2);
}

/* ═══════════════════════════════════════════════
   FINAL CTA
   ═══════════════════════════════════════════════ */
#cta { padding: var(--s8) 0; }
.cta-shell {
  background: linear-gradient(135deg,
    rgba(124,58,237,0.14) 0%,
    rgba(8,21,41,0.65) 40%,
    rgba(6,182,212,0.1) 80%,
    rgba(124,58,237,0.08) 100%);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: var(--r5); padding: var(--s7) var(--s6);
  text-align: center; position: relative; overflow: hidden;
}
/* Corner accents */
.cta-shell::before {
  content: ''; position: absolute; top: -1px; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--p4), var(--c4), var(--p4), transparent);
  filter: blur(1px);
}
.cta-shell::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--r5);
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(124,58,237,0.12), transparent);
  pointer-events: none;
}
/* Four glow corner dots */
.cta-corner {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: var(--p4); box-shadow: 0 0 10px var(--p4), 0 0 30px rgba(168,85,247,0.4);
}
.cta-corner.tl { top: 20px; left: 20px; }
.cta-corner.tr { top: 20px; right: 20px; }
.cta-corner.bl { bottom: 20px; left: 20px; background: var(--c4); box-shadow: 0 0 10px var(--c4), 0 0 30px rgba(34,211,238,0.4); }
.cta-corner.br { bottom: 20px; right: 20px; background: var(--c4); box-shadow: 0 0 10px var(--c4), 0 0 30px rgba(34,211,238,0.4); }

.cta-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--g3); background: rgba(251,191,36,0.06); border: 1px solid rgba(251,191,36,0.2);
  padding: 7px 16px; border-radius: 100px; margin-bottom: var(--s3);
  position: relative; z-index: 1;
}
.cta-title {
  font-family: var(--f-display); font-size: var(--display-xl); font-weight: 900;
  line-height: 1.0; letter-spacing: -0.03em; margin-bottom: var(--s3);
  position: relative; z-index: 1;
}
.cta-sub { max-width: 480px; margin: 0 auto var(--s5); position: relative; z-index: 1; }
.cta-btns { display: flex; align-items: center; justify-content: center; gap: var(--s2); flex-wrap: wrap; position: relative; z-index: 1; }
.cta-proof {
  display: flex; align-items: center; justify-content: center; gap: var(--s5);
  margin-top: var(--s4); flex-wrap: wrap; position: relative; z-index: 1;
}
.proof-item {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-3);
}
@media (max-width: 640px) {
  .cta-shell { padding: var(--s6) var(--s3); }
  .cta-proof { gap: var(--s3); }
}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
footer { border-top: 1px solid rgba(120,80,255,0.08); padding: var(--s6) 0 var(--s4); }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s6);
  margin-bottom: var(--s5);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s4); } }
@media (max-width: 500px)  { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand-desc { font-size: var(--body-sm); color: var(--text-3); line-height: 1.7; margin-top: var(--s2); max-width: 260px; }
.footer-socials { display: flex; gap: var(--s1); margin-top: var(--s3); }
.f-social {
  width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(120,80,255,0.12);
  font-size: 15px; transition: all var(--t-fast);
}
.f-social:hover { background: rgba(124,58,237,0.14); border-color: rgba(168,85,247,0.35); transform: translateY(-2px); }
.footer-col-h { font-family: var(--f-display); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-1); margin-bottom: var(--s2); }
.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-links a { font-size: var(--body-sm); color: var(--text-3); transition: color var(--t-fast); }
.footer-links a:hover { color: var(--text-2); }
.footer-base {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
  padding-top: var(--s4); border-top: 1px solid rgba(120,80,255,0.08); flex-wrap: wrap;
}
.footer-legal { font-size: 10px; color: var(--text-4); line-height: 1.75; max-width: 680px; }
.footer-18 {
  font-family: var(--f-display); font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  padding: 4px 11px; border: 1px solid rgba(120,80,255,0.18); border-radius: var(--r1);
  color: var(--text-3); flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   SCROLL REVEAL SYSTEM
   ═══════════════════════════════════════════════ */
.fade {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.fade.in { opacity: 1; transform: none; }
.fd1 { transition-delay: 0.05s; }
.fd2 { transition-delay: 0.12s; }
.fd3 { transition-delay: 0.19s; }
.fd4 { transition-delay: 0.26s; }
.fd5 { transition-delay: 0.33s; }
.fd6 { transition-delay: 0.40s; }

/* ── Extra animated background layers ── */
.bg-amb{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 15% 25%,rgba(124,58,237,.10) 0%,transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 70%,rgba(6,182,212,.08) 0%,transparent 55%),
    radial-gradient(ellipse 45% 40% at 50% 95%,rgba(245,158,11,.05) 0%,transparent 50%);
  animation:ambDrift 20s ease-in-out infinite alternate;}
@keyframes ambDrift{0%{transform:scale(1) translate(0,0)}50%{transform:scale(1.03) translate(15px,-12px)}100%{transform:scale(.98) translate(-10px,10px)}}
.bg-fog{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 38% 24% at 18% 50%,rgba(124,58,237,.055) 0%,transparent 70%),
    radial-gradient(ellipse 32% 20% at 82% 42%,rgba(6,182,212,.045) 0%,transparent 65%);
  animation:fogDrift 24s ease-in-out infinite;will-change:transform;}
@keyframes fogDrift{0%,100%{transform:translate(0,0) scale(1);opacity:.8}30%{transform:translate(25px,-18px) scale(1.04);opacity:1}60%{transform:translate(-12px,22px) scale(.97);opacity:.7}}
.bg-vig{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 92% 92% at 50% 50%,transparent 30%,rgba(0,3,6,.72) 78%,rgba(0,1,4,.94) 100%)}
.bg-scan{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.016;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,220,.07) 2px,rgba(0,255,220,.07) 4px);
  animation:scanMove 14s linear infinite;}
@keyframes scanMove{from{background-position:0 0}to{background-position:0 200px}}


/* ═══════════════════════════════════════════════════════════════
   PATCH — classes used in index.html that were missing from CSS
   Added: logo-gem-img, pcard-logo-img, pcard-mx, pcard-acts,
          sdot, ptier variants, live-ticker system, count-up
   ═══════════════════════════════════════════════════════════════ */

/* ── Navbar: real image logo ── */
.logo-gem-img {
  height: 36px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-gem-img img {
  height: 36px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: brightness(1.05);
  display: block;
}

/* ── count-up (no visual style needed, just marker) ── */
.count-up { display: inline-block; }

/* ── Partner card: image logo box ── */
.pcard-logo-img {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s2);
  padding: 10px 8px;
  background: rgba(0,0,0,0.32);
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}
.pcard-logo-img img {
  max-width: 100%;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(1.05);
  transition: transform 0.3s var(--ease-out), filter 0.3s;
  display: block;
}
.pcard:hover .pcard-logo-img img {
  transform: scale(1.06);
  filter: brightness(1.15);
}

/* ── Partner card: metrics 2-col grid ── */
.pcard-mx {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s1);
  margin-bottom: var(--s3);
}
.pcard-mx .pm-b {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(120,80,255,0.09);
  border-radius: var(--r2);
  padding: 12px;
  transition: border-color 0.25s, background 0.25s;
}
.pcard:hover .pcard-mx .pm-b {
  background: rgba(255,255,255,0.036);
  border-color: rgba(120,80,255,0.18);
}
.pcard-mx .pm-l {
  font-family: var(--f-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 5px;
}
.pcard-mx .pm-v {
  font-family: var(--f-display);
  font-size: var(--display-sm);
  font-weight: 800;
  line-height: 1;
}

/* ── Partner card: action buttons row ── */
.pcard-acts {
  display: flex;
  gap: var(--s1);
}
.pcard-acts .btn { flex: 1; }

/* ── Status indicator dot ── */
.sdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: sdotBlink 2.5s ease-in-out infinite;
}
@keyframes sdotBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── VIP tier badge ── */
.ptier {
  font-family: var(--f-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid;
}
/* Tier colour variants */
.tg  { color: var(--g3);    border-color: rgba(251,191,36,0.35);  background: rgba(251,191,36,0.07); }
.tp  { color: var(--p3);    border-color: rgba(192,132,252,0.35); background: rgba(192,132,252,0.07); }
.tc  { color: var(--c3);    border-color: rgba(103,232,249,0.35); background: rgba(103,232,249,0.07); }
.tok { color: var(--green); border-color: rgba(52,211,153,0.35);  background: rgba(52,211,153,0.07); }

/* ── Live transaction ticker ── */
.live-ticker {
  background: rgba(8,21,41,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(110,70,255,0.14);
  border-bottom: 1px solid rgba(110,70,255,0.14);
  padding: 13px 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 56px;
  animation: tickerScroll 32s linear infinite;
  width: max-content;
  will-change: transform;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-item {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-2);
}
.ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ticker-amt {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ticker-sep {
  color: rgba(110,70,255,0.35);
  font-size: 12px;
  flex-shrink: 0;
}