/* ============================================
   LOOKSWEB — Main Stylesheet
   Dark / Cinematic / Premium
   ============================================ */

/* ============================================
   PAGE TRANSITION — Dark curtain wipe
   Slides up to reveal / slides down to exit
   ============================================ */
#pageTransition {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #060a18 0%, #04070f 100%);
  z-index: 99999;
  pointer-events: none;
  will-change: transform;
  /* Starts covering the page — JS animates it away on load */
}

/* Glowing cyan edge-line (child element) */
.pt-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent               0%,
    rgba(0, 128, 255, 0.35)  10%,
    #00d4ff                  28%,
    #00f0ff                  50%,
    #00d4ff                  72%,
    rgba(0, 128, 255, 0.35)  90%,
    transparent              100%
  );
  box-shadow:
    0 0 14px 3px  rgba(0, 212, 255, 0.55),
    0 0 48px 8px  rgba(0, 212, 255, 0.18),
    0 0 100px 12px rgba(0, 212, 255, 0.08);
}

/* Reduced-motion: skip animation entirely */
@media (prefers-reduced-motion: reduce) {
  #pageTransition { display: none !important; }
}

:root {
  /* ---- Cyber Blue palette ---- */
  --blue:        #00d4ff;
  --blue-glow:   rgba(0,212,255,0.55);
  --blue-dark:   #0077aa;
  --blue-bright: #33eeff;
  --blue-deep:   #0044aa;
  --bg:          #04060f;
  --bg-2:        #070b18;
  --bg-3:        #0a1020;
  --bg-card:     #0d1424;
  --bg-card-2:   #111b30;
  --border:      rgba(0,212,255,0.08);
  --border-blue: rgba(0,212,255,0.22);
  --text-1:      #e8f4ff;
  --text-2:      #6888aa;
  --text-3:      #334455;
  --radius:      14px;
  --radius-lg:   22px;
  --font:        'Inter', sans-serif;
  --font-head:   'Syne', sans-serif;
  --transition:  0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--blue-dark); border-radius: 99px; }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.btn--sm  { font-size: 13px; padding: 8px 18px; }
.btn--lg  { font-size: 16px; padding: 16px 36px; border-radius: 14px; }

.btn--glow {
  background: linear-gradient(135deg, #00c4ef 0%, #0088cc 100%);
  color: #fff;
  box-shadow: 0 0 24px rgba(0,212,255,0.4), 0 4px 20px rgba(0,180,220,0.2);
  letter-spacing: 0.01em;
}
.btn--glow:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 48px rgba(0,212,255,0.65), 0 8px 32px rgba(0,212,255,0.3);
  background: linear-gradient(135deg, #00d4ff 0%, #009edf 100%);
}
.btn--glow:active { transform: translateY(0); }

.btn__glow-inner { position: relative; z-index: 1; }

.btn--ghost {
  background: transparent;
  color: var(--text-2);
  border: 1.5px solid var(--border);
}
.btn--ghost:hover {
  border-color: rgba(30,143,255,0.4);
  color: var(--text-1);
  background: rgba(30,143,255,0.06);
}

.btn--outline {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--border-blue);
  font-size: 13px;
  padding: 9px 20px;
}
.btn--outline:hover {
  background: rgba(30,143,255,0.1);
}

/* ============================================
   AURORA NEBULA BACKGROUND
   Soft moving blobs behind all content sections
   ============================================ */
.aurora-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Blob 1 — large cyan, top-left */
.aurora-blob--1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,212,255,0.18) 0%, transparent 70%);
  top: -100px; left: -100px;
  animation: aurora-1 18s ease-in-out infinite alternate;
}
/* Blob 2 — deep blue, top-right */
.aurora-blob--2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,100,255,0.14) 0%, transparent 70%);
  top: 0; right: -80px;
  animation: aurora-2 22s ease-in-out infinite alternate;
}
/* Blob 3 — purple, center */
.aurora-blob--3 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(120,40,255,0.10) 0%, transparent 70%);
  top: 30vh; left: 30%;
  animation: aurora-3 28s ease-in-out infinite alternate;
}
/* Blob 4 — cyan, bottom-right */
.aurora-blob--4 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(0,212,255,0.12) 0%, transparent 70%);
  bottom: 0; right: 10%;
  animation: aurora-4 20s ease-in-out infinite alternate;
}
/* Blob 5 — blue, bottom-left */
.aurora-blob--5 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(30,80,200,0.13) 0%, transparent 70%);
  bottom: 10vh; left: 5%;
  animation: aurora-5 24s ease-in-out infinite alternate;
}

@keyframes aurora-1 {
  0%   { opacity: 0.6; transform: translate(0,   0)   scale(1.0); }
  50%  { opacity: 0.9; transform: translate(120px, 80px) scale(1.15); }
  100% { opacity: 0.7; transform: translate(60px, 160px) scale(0.95); }
}
@keyframes aurora-2 {
  0%   { opacity: 0.5; transform: translate(0, 0)     scale(1.0); }
  50%  { opacity: 0.8; transform: translate(-100px, 120px) scale(1.2); }
  100% { opacity: 0.6; transform: translate(-40px, 60px)  scale(0.9); }
}
@keyframes aurora-3 {
  0%   { opacity: 0.4; transform: translate(0, 0)      scale(1.0); }
  40%  { opacity: 0.7; transform: translate(80px, -60px) scale(1.1); }
  100% { opacity: 0.5; transform: translate(-60px, 80px) scale(1.2); }
}
@keyframes aurora-4 {
  0%   { opacity: 0.5; transform: translate(0, 0)       scale(1.0); }
  60%  { opacity: 0.8; transform: translate(-80px, -100px) scale(1.15); }
  100% { opacity: 0.6; transform: translate(40px, -60px)  scale(0.95); }
}
@keyframes aurora-5 {
  0%   { opacity: 0.4; transform: translate(0, 0)      scale(1.0); }
  50%  { opacity: 0.7; transform: translate(100px, -80px) scale(1.1); }
  100% { opacity: 0.5; transform: translate(60px, 40px)  scale(1.2); }
}

/* ============================================
   CUSTOM CURSOR
   ============================================ */
* { cursor: none !important; }

#cursorDot {
  position: fixed;
  width: 7px; height: 7px;
  background: #00d4ff;
  border-radius: 50%;
  z-index: 99999;
  pointer-events: none;
  top: 0; left: 0;
  margin: -3.5px 0 0 -3.5px;
  box-shadow: 0 0 10px rgba(0,212,255,0.9), 0 0 20px rgba(0,212,255,0.4);
  transition: width 0.15s, height 0.15s, background 0.15s;
  will-change: transform;
}
#cursorRing {
  position: fixed;
  width: 32px; height: 32px;
  border: 1.5px solid rgba(0,212,255,0.45);
  border-radius: 50%;
  z-index: 99998;
  pointer-events: none;
  top: 0; left: 0;
  margin: -16px 0 0 -16px;
  transition: width 0.2s, height 0.2s, border-color 0.2s, opacity 0.2s;
  will-change: transform;
}

#cursorDot.dot--hover {
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  background: #33eeff;
  box-shadow: 0 0 16px rgba(0,212,255,1), 0 0 32px rgba(0,212,255,0.5);
}
#cursorRing.ring--hover {
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  border-color: rgba(0,212,255,0.7);
}
#cursorRing.ring--click {
  width: 24px; height: 24px;
  margin: -12px 0 0 -12px;
  border-color: rgba(0,212,255,1);
  opacity: 0.5;
}

/* ============================================
   CLICK RIPPLE
   ============================================ */
.click-ripple {
  position: fixed;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,212,255,0.7);
  pointer-events: none;
  z-index: 9000;
  animation: ripple-expand 0.7s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
  box-shadow: 0 0 12px rgba(0,212,255,0.3);
}
@keyframes ripple-expand {
  0%   { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(5.5); opacity: 0; }
}

/* ============================================
   SCROLL REVEAL
   ============================================ */
.reveal-ready {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-ready.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   NAV
   ============================================ */
/* Background canvases sit behind everything */
#entropyCanvas, #bgCanvas { z-index: 0 !important; }

/* Global cursor halo — above bg, below all content */
#cursorHalo {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;   /* blends nicely with dark bg */
}

/* All page content above entropy */
.nav, section, main, footer { position: relative; z-index: 1; }

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0;
  transition: background 0.4s, backdrop-filter 0.4s;
}
.nav.scrolled {
  background: rgba(6,8,16,0.8);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative; /* needed for island absolute centering */
}

.nav__logo {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.3px;
}
.nav__logo strong { font-weight: 700; }
.nav__logo-icon { color: var(--blue); font-size: 18px; }

.nav__links {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  transition: color var(--transition);
}
.nav__links a:hover { color: var(--text-1); }

.nav__right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

/* ============================================
   DYNAMIC ISLAND NAV  v2
   Fixes: overflow visible, tooltip outside scale,
   background separated from clipping context
   ============================================ */

/* Island wrapper — horizontally centered, sits at nav bottom edge */
.nav-island {
  position: absolute;
  left: 50%;
  bottom: -18px;              /* hang below the nav bar */
  transform: translateX(-50%);
  z-index: 200;
  /* Padding below so magnified icons + tooltip have room to grow down */
  padding-bottom: 48px;
}

/* Pill background — covers just the pill row, not the tooltip space */
.nav-island__bg {
  position: absolute;
  top: 0;
  left: 0; right: 0;
  height: 52px;               /* pill height only */
  background: rgba(7, 12, 26, 0.85);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(0, 212, 255, 0.20);
  border-radius: 99px;
  box-shadow:
    0 0 0 1px rgba(0, 212, 255, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(0, 212, 255, 0.07);
  pointer-events: none;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  z-index: -1;
}
.nav-island:hover .nav-island__bg {
  border-color: rgba(0, 212, 255, 0.32);
  box-shadow:
    0 0 0 1px rgba(0, 212, 255, 0.14),
    0 14px 50px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(0, 212, 255, 0.11);
}

/* Items container — overflow visible so scaled icons grow freely */
.nav-island__track {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  overflow: visible;
  position: relative;
  transition:
    padding 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    gap     0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-island:hover .nav-island__track {
  gap: 12px;
  padding: 8px 22px;
}

/* Individual dock item */
.nav-island__item {
  --s: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.50);
  text-decoration: none;
  flex-shrink: 0;
  /* Scale from TOP center → icons grow downward, stay within nav */
  transform: scale(var(--s));
  transform-origin: top center;
  transition:
    transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.18s ease;
  z-index: 1;
  cursor: pointer;
}
.nav-island__item:hover { color: var(--blue); }

/* Active page indicator dot */
.nav-island__item.active { color: var(--blue); }
.nav-island__item.active::before {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 6px 2px rgba(0, 212, 255, 0.65);
  pointer-events: none;
}

/* SVG icon — sized relative to container */
.nav-island__item svg {
  width: 54%;
  height: 54%;
  flex-shrink: 0;
  pointer-events: none;
  display: block;
}

/* Hidden label spans — content used by JS tooltip only */
.nav-island__label { display: none; }

/* JS-injected tooltip — appended to body, positioned fixed */
.nav-island__tooltip {
  position: fixed;
  /* JS sets top/left */
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(5, 10, 22, 0.94);
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: 7px;
  padding: 4px 10px;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 212, 255, 0.14);
  /* Shown/hidden via JS opacity */
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.12s ease;
  /* Start slightly lower, slide up into position */
  transform: translateX(-50%) translateY(calc(-100% + 6px));
}
.nav-island__tooltip.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-100%);
}

/* ============================================
   BOTTOM DOCK
   Tiny pill at rest → smooth expand upward
   macOS-style icon magnification on hover
   ============================================ */

/* ============================================
   BOTTOM DOCK v2 — Always-on floating icons
   No pill, no container. Icons are always
   visible: small + ghost at rest.
   Hover → scale up, liquid-glass panel,
            spinning gradient border.
   ============================================ */

/* Outer wrapper */
.bdock {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  display: flex;
  align-items: flex-end;
  /* Keep a generous hover capture zone above */
  padding-top: 80px;
  cursor: default;
}

/* Pill: completely gone */
.bdock__pill { display: none; }

/* Tray: always visible, transparent container */
.bdock__tray {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: none;
}

/* ---- Individual icon — ghost resting state ---- */
.bdock__item {
  --s: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
  flex-shrink: 0;
  overflow: hidden;               /* clips the spinning ::before */
  /* macOS-style scale from bottom */
  transform: scale(var(--s));
  transform-origin: bottom center;
  will-change: transform;
  transition: color 0.28s ease, opacity 0.28s ease;
  opacity: 0.42;
  background: transparent;
}

/* ---- Gradient border layer (always spinning, revealed on hover) ---- */
.bdock__item::before {
  content: '';
  position: absolute;
  /* 200% box centered on the element so rotation covers all corners */
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg at center,
    transparent       0deg,
    transparent      70deg,
    rgba(0,128,255,0.55) 100deg,
    #00d4ff          130deg,
    #00f0ff          155deg,
    rgba(0,212,255,0.3)  175deg,
    transparent      210deg,
    transparent      360deg
  );
  animation: bdock-spin 2.8s linear infinite;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  /* sits at z-index 0 — behind ::after (glass) and SVG */
}

/* ---- Liquid-glass fill layer ---- */
.bdock__item::after {
  content: '';
  position: absolute;
  inset: 1.5px;                   /* border-width gap */
  border-radius: 13px;
  /* Glass look: top-highlight + frosted dark */
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.11) 0%,
      rgba(255, 255, 255, 0.00) 45%,
      rgba(0,  212, 255, 0.04) 100%
    ),
    rgba(8, 16, 36, 0.0);
  backdrop-filter: blur(0px) saturate(1);
  -webkit-backdrop-filter: blur(0px) saturate(1);
  box-shadow: none;
  opacity: 0;
  transition:
    opacity           0.32s ease,
    background        0.32s ease,
    backdrop-filter   0.32s ease,
    -webkit-backdrop-filter 0.32s ease,
    box-shadow        0.32s ease;
  pointer-events: none;
  z-index: 1;
}

/* SVG always sits above both layers */
.bdock__item svg {
  width: 52%;
  height: 52%;
  display: block;
  position: relative;
  z-index: 2;
  pointer-events: none;
  transition: color 0.28s ease;
}

/* ---- Hover: activate glass + gradient border ---- */
.bdock__item:hover {
  color: rgba(0, 212, 255, 0.96);
  opacity: 1;
}
.bdock__item:hover::before {
  opacity: 1;
}
.bdock__item:hover::after {
  opacity: 1;
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.00) 50%,
      rgba(0,  212, 255, 0.05) 100%
    ),
    rgba(6, 14, 32, 0.58);
  backdrop-filter: blur(24px) saturate(1.9) brightness(1.08);
  -webkit-backdrop-filter: blur(24px) saturate(1.9) brightness(1.08);
  /* Inset highlights for glass depth */
  box-shadow:
    inset 0  1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 212, 255, 0.10),
    0 8px 28px rgba(0, 0, 0, 0.45),
    0 0 16px rgba(0, 212, 255, 0.10);
}

/* ---- Active page: slightly brighter at rest ---- */
.bdock__item--active {
  color: rgba(0, 212, 255, 0.62);
  opacity: 0.62;
}
/* Active dot indicator below icon */
.bdock__item--active .bdock__dot {
  display: block;
}
.bdock__dot {
  display: none;
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 6px 2px rgba(0, 212, 255, 0.55);
  pointer-events: none;
  z-index: 3;
}

/* ---- Spinning gradient keyframe ---- */
@keyframes bdock-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* ---- Tooltip ---- */
.bdock__tooltip {
  position: fixed;
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(5, 10, 22, 0.92);
  border: 1px solid rgba(0, 212, 255, 0.22);
  border-radius: 7px;
  padding: 4px 10px;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 212, 255, 0.12);
  opacity: 0;
  transform: translateX(-50%) translateY(calc(-100% - 4px));
  transition: opacity 0.15s ease;
}
.bdock__tooltip--visible { opacity: 1; }

/* ---- Mobile ---- */
@media (max-width: 480px) {
  .bdock__tray { gap: 8px; }
  .bdock__item { width: 36px; height: 36px; }
}

/* Auth button group */
.nav__auth {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Anmelden: minimal ghost — just text + subtle border */
.nav__login {
  color: var(--text-2);
  border-color: rgba(0,212,255,0.18);
  letter-spacing: 0.01em;
}
.nav__login:hover {
  color: var(--blue);
  border-color: rgba(0,212,255,0.45);
  background: rgba(0,212,255,0.06);
}

/* Registrieren: solid cyan glow — same as primary CTA */
.nav__register {
  letter-spacing: 0.01em;
  font-weight: 700;
}

/* On mobile: hide login text, keep register */
@media (max-width: 600px) {
  .nav__login { display: none; }
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  transition: var(--transition);
  font-family: var(--font);
}
.lang-toggle:hover {
  border-color: var(--border-blue);
  color: var(--text-1);
}

/* ============================================
   HERO — Scroll Expansion
   ============================================ */
.hero {
  position: relative;
  height: 100dvh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Fading bg that disappears as skull expands */
.hero__bg-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(30,143,255,0.07) 0%, transparent 70%),
    linear-gradient(to bottom, transparent 50%, var(--bg) 100%);
  pointer-events: none;
  transition: opacity 0.1s linear;
}

/* ---- Expanding skull frame ---- */
.skull-frame {
  position: absolute;
  top: 40%;                        /* higher up — skull sits above text */
  left: 50%;
  width: 100vw;
  height: 100vh;
  /* start scaled small, JS scales to 1 on scroll */
  transform: translate(-50%, -50%) scale(0.26);
  transform-origin: center center;
  border-radius: 0;
  overflow: hidden;
  z-index: 2;
  box-shadow: none;
  /* GPU layer — no layout reflow on scale changes */
  will-change: transform, border-radius;
  backface-visibility: hidden;
}

.skull-frame canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ---- Anatomy Hotspot Overlay ---- */
.skull-hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.skull-hotspot {
  position: absolute;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  pointer-events: all;
  cursor: crosshair;
  transition: opacity 0.25s ease;
}

/* Outer pulse ring */
.skull-hotspot::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 212, 255, 0.55);
  animation: hotspot-ping 2.8s ease-out infinite;
  animation-delay: var(--ping-delay, 0s);
}

/* Inner glowing dot */
.skull-hotspot::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.92);
  box-shadow:
    0 0 6px  rgba(0, 212, 255, 0.9),
    0 0 14px rgba(0, 212, 255, 0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.skull-hotspot:hover::after {
  transform: scale(1.5);
  box-shadow:
    0 0 10px rgba(0, 212, 255, 1),
    0 0 24px rgba(0, 212, 255, 0.65),
    0 0 40px rgba(0, 212, 255, 0.25);
}

@keyframes hotspot-ping {
  0%   { transform: scale(1);   opacity: 0.75; }
  65%  { transform: scale(2.4); opacity: 0;    }
  100% { transform: scale(2.4); opacity: 0;    }
}

/* ---- Body-level Anatomy Tooltip ---- */
.skull-tip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  /* anchor point is dot center; tooltip floats above it */
  transform: translateX(-50%) translateY(calc(-100% - 16px));
  background: rgba(4, 6, 14, 0.95);
  border: 1px solid rgba(0, 212, 255, 0.30);
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 210px;
  max-width: 260px;
  backdrop-filter: blur(20px) saturate(1.5);
  box-shadow:
    0 4px 32px rgba(0, 0, 0, 0.6),
    0 0  20px rgba(0, 212, 255, 0.08);
  /* Hidden by default */
  opacity: 0;
  transition: opacity 0.20s ease, transform 0.20s ease;
  /* Start slightly below target position */
  --tip-nudge: calc(-100% - 10px);
}

.skull-tip--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(calc(-100% - 16px));
}

/* Downward arrow */
.skull-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(0, 212, 255, 0.30);
}

.skull-tip__latin {
  font-family: 'Syne', 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #00d4ff;
  margin-bottom: 6px;
}

.skull-tip__desc {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(220, 235, 255, 0.70);
  white-space: normal;
}

.skull-frame__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(6,8,16,0.3) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ---- Split title — diagonal composition ---- */
.hero__split-title {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

/* Left word: upper-left quadrant */
.hero__split-word--left {
  position: absolute;
  top: 28%;
  left: 6vw;
}

/* Right word: lower-right quadrant */
.hero__split-word--right {
  position: absolute;
  bottom: 22%;
  right: 6vw;
  text-align: right;
}

.hero__split-word {
  font-family: 'Syne', sans-serif;
  font-size: clamp(42px, 5.2vw, 88px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  white-space: nowrap;
  background: linear-gradient(135deg, #ffffff 0%, #e8e8e8 50%, #b0b8c8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 40px rgba(255,255,255,0.10));
}

/* Scramble chars use same gradient */
.hero__split-word .scramble-char {
  display: inline-block;
  background: inherit;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: opacity 0.12s ease;
}

/* Gentle float breathing — left drifts up, right drifts down */
@keyframes float-left {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  40%       { transform: translateY(-8px) translateX(-3px); }
  70%       { transform: translateY(-4px) translateX(2px); }
}
@keyframes float-right {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  35%       { transform: translateY(6px)  translateX(3px); }
  65%       { transform: translateY(10px) translateX(-2px); }
}
.hero-float-left  { animation: float-left  7s ease-in-out infinite; }
.hero-float-right { animation: float-right 8s ease-in-out infinite; }

/* ---- Hint area (badge + scroll arrow) ---- */
.hero__expand-hint {
  position: absolute;
  z-index: 4;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  pointer-events: none;
  transition: opacity 0.3s ease;
  will-change: opacity;
}

.hero__expand-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- Revealed content after full expansion ---- */
/* Sits at the very bottom edge of the viewport, dark glass panel so
   it never overlaps the skull's face area — skull is centred at top:40%  */
.hero__reveal-content {
  position: absolute;
  z-index: 5;           /* above skull frame */
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 28px 24px 32px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  will-change: opacity, transform;
  /* dark frosted-glass panel keeps text readable over the skull edge */
  background: linear-gradient(to top,
    rgba(6,8,16,0.96) 0%,
    rgba(6,8,16,0.88) 60%,
    rgba(6,8,16,0.0)  100%);
}

.hero__reveal-content.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.hero__reveal-content .hero__sub {
  margin-bottom: 20px;
  animation: none;
  text-align: center;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  font-size: 15px;
  color: var(--text-2);
}

.hero__reveal-content .hero__actions {
  justify-content: center;
  margin-bottom: 20px;
  animation: none;
  gap: 12px;
}

.hero__reveal-content .hero__stats {
  justify-content: center;
  animation: none;
}

/* legacy selectors still referenced elsewhere */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1160px;
  margin: 0 auto;
  padding: 140px 24px 100px;
  width: 100%;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(30,143,255,0.1);
  border: 1px solid rgba(30,143,255,0.25);
  border-radius: 99px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-bright);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 28px;
  animation: fadeUp 0.8s 0.1s both;
}
.hero__badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue-glow);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.hero__title {
  font-family: var(--font-head);
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -2px;
  margin-bottom: 24px;
  animation: fadeUp 0.8s 0.2s both;
}
.hero__title--accent {
  background: linear-gradient(135deg, #4db3ff 0%, #1e8fff 40%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__sub {
  font-size: 18px;
  color: var(--text-2);
  max-width: 520px;
  line-height: 1.7;
  margin-bottom: 40px;
  animation: fadeUp 0.8s 0.3s both;
}

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 56px;
  animation: fadeUp 0.8s 0.4s both;
}

.hero__stats {
  display: flex;
  align-items: center;
  gap: 24px;
  animation: fadeUp 0.8s 0.5s both;
}
.hero__stat-num {
  display: block;
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-1);
}
.hero__stat-label {
  font-size: 12px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hero__stat-divider {
  width: 1px;
  height: 36px;
  background: var(--border);
}

.hero__scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.hero__scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--blue));
  margin: 0 auto;
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   SECTION LABELS & TITLES
   ============================================ */
.section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue);
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-head);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 16px;
}

/* ============================================
   HOW IT WORKS
   ============================================ */
.how {
  padding: 120px 0;
  background: var(--bg-2);
  position: relative;
}
.how::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-blue), transparent);
}
.how .container { text-align: center; }

.steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-top: 64px;
  flex-wrap: wrap;
}

.step {
  flex: 1;
  min-width: 220px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}
.step__num {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.step__icon {
  width: 72px; height: 72px;
  border-radius: 18px;
  /* Background handled by ::after, border by ::before */
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  margin-bottom: 20px;
  position: relative;
  z-index: 0;
  /* Float up-down animation */
  animation: step-icon-float 3.6s ease-in-out infinite;
}

/* Each step icon floats with a different phase */
.step:nth-child(1) .step__icon { animation-delay: 0s; }
.step:nth-child(3) .step__icon { animation-delay: -1.2s; }
.step:nth-child(5) .step__icon { animation-delay: -2.4s; }

/* Rotating conic-gradient border ring */
.step__icon::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  background: conic-gradient(
    from 0deg,
    #00d4ff 0%,
    #c084fc 33%,
    #fbbf24 66%,
    #00d4ff 100%
  );
  animation: step-border-spin 3s linear infinite;
  z-index: -1;
}

/* Solid card background behind SVG, inside the gradient ring */
.step__icon::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: 17px;
  background: var(--bg-card);
  z-index: -1;
}

/* Outer glow that shifts colour with the gradient rotation */
.step__icon {
  box-shadow:
    0 0 20px rgba(0,212,255,0.20),
    0 0 40px rgba(192,132,252,0.10),
    0 0 60px rgba(251,191,36,0.06);
  animation: step-icon-float 3.6s ease-in-out infinite,
             step-icon-glow  3s   linear     infinite;
}

@keyframes step-border-spin {
  to { transform: rotate(360deg); }
}

@keyframes step-icon-float {
  0%,  100% { transform: translateY(0px); }
  50%        { transform: translateY(-10px); }
}

@keyframes step-icon-glow {
  0%   { box-shadow: 0 0 22px rgba(0,212,255,0.35),  0 0 44px rgba(0,212,255,0.10); }
  33%  { box-shadow: 0 0 22px rgba(192,132,252,0.35), 0 0 44px rgba(192,132,252,0.10); }
  66%  { box-shadow: 0 0 22px rgba(251,191,36,0.35),  0 0 44px rgba(251,191,36,0.10); }
  100% { box-shadow: 0 0 22px rgba(0,212,255,0.35),  0 0 44px rgba(0,212,255,0.10); }
}

/* Hover: boost glow, float pauses at top */
.step:hover .step__icon {
  animation-play-state: paused;
  box-shadow: 0 0 32px rgba(0,212,255,0.5), 0 0 64px rgba(0,212,255,0.2);
}
.step h3 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.step p { font-size: 14px; color: var(--text-2); line-height: 1.6; }

.step__connector {
  flex-shrink: 0;
  width: 60px;
  height: 1px;
  background: linear-gradient(to right, var(--border-blue), transparent);
  margin-top: 88px;
  align-self: flex-start;
}

/* ============================================
   RANKS — Gaming / League-Style v2
   ============================================ */
.ranks {
  padding: 120px 0 160px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* ============================================
   RANKS — Background FX
   Aurora blobs · Floating symbols · Numbers
   ============================================ */

/* Container for all BG elements */
.ranks__bg-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Ensure content sits above the BG FX */
.ranks .container { position: relative; z-index: 1; }

/* ---- Aurora blobs ---- */
.ranks__aurora { position: absolute; inset: 0; }

.ranks__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: blob-drift 20s ease-in-out infinite;
}

/* Subhuman — red, far left */
.ranks__blob--1 {
  width: 480px; height: 360px;
  background: radial-gradient(ellipse, rgba(192,57,43,0.45) 0%, transparent 70%);
  left: -6%; top: 25%;
  animation-duration: 24s; animation-delay: 0s;
}
/* Normie — blue, left-center */
.ranks__blob--2 {
  width: 400px; height: 300px;
  background: radial-gradient(ellipse, rgba(126,179,255,0.35) 0%, transparent 70%);
  left: 18%; top: 55%;
  animation-duration: 28s; animation-delay: -6s;
}
/* Chad — cyan, center (largest) */
.ranks__blob--3 {
  width: 600px; height: 440px;
  background: radial-gradient(ellipse, rgba(0,212,255,0.28) 0%, transparent 70%);
  left: 34%; top: -10%;
  animation-duration: 22s; animation-delay: -3s;
}
/* Gigachad — purple, right-center */
.ranks__blob--4 {
  width: 460px; height: 340px;
  background: radial-gradient(ellipse, rgba(192,132,252,0.38) 0%, transparent 70%);
  left: 62%; top: 40%;
  animation-duration: 26s; animation-delay: -9s;
}
/* Looksgod — gold, far right */
.ranks__blob--5 {
  width: 380px; height: 280px;
  background: radial-gradient(ellipse, rgba(251,191,36,0.30) 0%, transparent 70%);
  left: 84%; top: 5%;
  animation-duration: 30s; animation-delay: -4s;
}

@keyframes blob-drift {
  0%   { transform: translate(0px,  0px)  scale(1.00); }
  25%  { transform: translate(28px,-18px) scale(1.07); }
  50%  { transform: translate(-15px,24px) scale(0.94); }
  75%  { transform: translate(20px, 10px) scale(1.04); }
  100% { transform: translate(0px,  0px)  scale(1.00); }
}

/* ---- Floating rank symbols ---- */
.ranks__symbols { position: absolute; inset: 0; }

.ranks__symbol {
  position: absolute;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  animation: symbol-float 28s ease-in-out infinite;
}

/* Subhuman skull — bottom-left */
.ranks__symbol--1 {
  font-size: 210px;
  color: rgba(192,57,43,0.10);
  left: 1%; top: 48%;
  animation-duration: 32s; animation-delay: 0s;
  filter: drop-shadow(0 0 30px rgba(192,57,43,0.25));
}
/* Normie ring — upper left */
.ranks__symbol--2 {
  font-size: 160px;
  color: rgba(126,179,255,0.09);
  left: 19%; top: 8%;
  animation-duration: 26s; animation-delay: -5s;
  filter: drop-shadow(0 0 24px rgba(126,179,255,0.20));
}
/* Chad lightning — center-right area */
.ranks__symbol--3a {
  font-size: 260px;
  color: rgba(0,212,255,0.07);
  left: 60%; top: 50%;
  animation-duration: 30s; animation-delay: -2s;
  filter: drop-shadow(0 0 40px rgba(0,212,255,0.22));
}
/* Chad lightning — upper left corner */
.ranks__symbol--3b {
  font-size: 130px;
  color: rgba(0,212,255,0.06);
  left: 6%; top: 6%;
  animation-duration: 22s; animation-delay: -8s;
}
/* Gigachad crown — right area */
.ranks__symbol--4 {
  font-size: 190px;
  color: rgba(192,132,252,0.09);
  left: 75%; top: 5%;
  animation-duration: 34s; animation-delay: -3s;
  filter: drop-shadow(0 0 32px rgba(192,132,252,0.22));
}
/* Looksgod star — far right bottom */
.ranks__symbol--5 {
  font-size: 180px;
  color: rgba(251,191,36,0.10);
  left: 88%; top: 55%;
  animation-duration: 28s; animation-delay: -11s;
  filter: drop-shadow(0 0 36px rgba(251,191,36,0.28));
}

@keyframes symbol-float {
  0%   { transform: translateY(0px)   translateX(0px)  rotate(0deg);  }
  20%  { transform: translateY(-18px) translateX(8px)  rotate(2deg);  }
  45%  { transform: translateY(-8px)  translateX(-10px) rotate(-1deg); }
  70%  { transform: translateY(-22px) translateX(6px)  rotate(1.5deg);}
  100% { transform: translateY(0px)   translateX(0px)  rotate(0deg);  }
}

/* ---- Floating score numbers ---- */
.ranks__numbers { position: absolute; inset: 0; }

.ranks__num {
  position: absolute;
  left:             var(--nx);
  top:              var(--ny);
  animation-delay:  var(--nd);
  animation-duration: var(--ndr);
  font-family: 'Syne', 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(52px, 6vw, 88px);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  animation-name: num-float;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.ranks__num--red    { color: rgba(192,57,43,0.14);    filter: drop-shadow(0 0 12px rgba(192,57,43,0.30));    }
.ranks__num--blue   { color: rgba(126,179,255,0.13);  filter: drop-shadow(0 0 12px rgba(126,179,255,0.25)); }
.ranks__num--cyan   { color: rgba(0,212,255,0.13);    filter: drop-shadow(0 0 14px rgba(0,212,255,0.28));    }
.ranks__num--purple { color: rgba(192,132,252,0.13);  filter: drop-shadow(0 0 12px rgba(192,132,252,0.28)); }
.ranks__num--gold   { color: rgba(251,191,36,0.14);   filter: drop-shadow(0 0 14px rgba(251,191,36,0.32));   }

@keyframes num-float {
  0%   { transform: translateY(0px)   rotate(0deg);   }
  30%  { transform: translateY(-14px) rotate(1.5deg); }
  60%  { transform: translateY(8px)   rotate(-1deg);  }
  100% { transform: translateY(0px)   rotate(0deg);   }
}
.ranks .section-title { text-align: center; margin-bottom: 8px; }
.ranks .section-label { text-align: center; }

.ranks__subtitle {
  text-align: center;
  color: var(--text-2);
  font-size: 15px;
  max-width: 540px;
  margin: 0 auto 60px;
  line-height: 1.6;
  opacity: 0.75;
}

/* Grid: bottom-aligned so taller cards rise upward */
.ranks__grid {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: nowrap;
}

/* tilt-wrap inside ranks grid acts as a flex item */
.ranks__grid > .tilt-wrap {
  display: block;  /* not contents — needed for flex sizing */
}
.ranks__grid > .tilt-wrap:nth-child(1) { flex: 15; min-width: 0; }
.ranks__grid > .tilt-wrap:nth-child(2) { flex: 18; min-width: 0; }
.ranks__grid > .tilt-wrap:nth-child(3) { flex: 27; min-width: 0; } /* center: biggest */
.ranks__grid > .tilt-wrap:nth-child(4) { flex: 22; min-width: 0; }
.ranks__grid > .tilt-wrap:nth-child(5) { flex: 18; min-width: 0; }

/* ---- Base card ---- */
.rank-card {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.35s ease;
  cursor: default;
  display: flex;
  flex-direction: column;
}

/* ---- Tier badge (top label) ---- */
.rank-card__tier {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  align-self: flex-start;
  margin-bottom: 16px;
}

/* ---- Featured tag (rank-3 only) ---- */
.rank-card__featured-tag {
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.2em;
  padding: 3px 12px;
  border-radius: 0 0 8px 8px;
  color: #fff;
  z-index: 2;
}

/* ---- Icon ---- */
.rank-card__icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.rank-card__icon {
  font-size: 32px;
  line-height: 1;
  position: relative;
  z-index: 1;
  transition: transform 0.35s ease;
}
.rank-card:hover .rank-card__icon {
  transform: scale(1.2) translateY(-3px);
}
.rank-card__icon-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease;
  filter: blur(10px);
}
.rank-card:hover .rank-card__icon-glow {
  opacity: 1;
}

/* ---- Score ---- */
.rank-card__score {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

/* ---- Name ---- */
.rank-card__name {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

/* ---- Tagline ---- */
.rank-card__tagline {
  font-size: 11px;
  color: var(--text-2);
  opacity: 0.7;
  line-height: 1.4;
  margin-bottom: 14px;
}

/* ---- Divider ---- */
.rank-card__divider {
  height: 1px;
  background: linear-gradient(to right, transparent, currentColor, transparent);
  opacity: 0.15;
  margin-bottom: 12px;
  flex-shrink: 0;
}

/* ---- Rarity stat ---- */
.rank-card__rarity {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 10px;
}
.rank-card__rarity-pct {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1;
}
.rank-card__rarity-lbl {
  font-size: 10px;
  color: var(--text-2);
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---- Animated bar ---- */
.rank-card__bar-wrap { margin-top: auto; padding-top: 4px; }
.rank-card__bar {
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  overflow: hidden;
}
.rank-card__fill {
  height: 100%;
  width: 0;          /* starts at 0 — JS animates to data-target */
  border-radius: 99px;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Spark container (CSS animated dots) ---- */
.rank-card__sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.rank-card:hover .rank-card__sparks { opacity: 1; }

/* ---- Legend ring (rank-5) ---- */
.rank-card__legend-ring {
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  pointer-events: none;
  background: transparent;
  box-shadow:
    inset 0 0 18px rgba(251,191,36,0.12),
    0 0 28px rgba(251,191,36,0.10);
  animation: legend-pulse 3s ease-in-out infinite;
}
@keyframes legend-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; box-shadow: inset 0 0 30px rgba(251,191,36,0.2), 0 0 50px rgba(251,191,36,0.18); }
}

/* ================================================================
   PER-RANK THEMING
   ================================================================ */

/* --- RANK 1: Subhuman (dark red/ash) --- */
.rank-card--1 {
  padding: 18px 16px 16px;
  min-height: 200px;
  border-color: rgba(139, 0, 0, 0.35);
  background: linear-gradient(165deg, #0d1424 0%, #120606 100%);
}
.rank-card--1 .rank-card__tier {
  background: rgba(139,0,0,0.22);
  color: #c0392b;
  border: 1px solid rgba(192,57,43,0.3);
}
.rank-card--1 .rank-card__icon { color: #c0392b; }
.rank-card--1 .rank-card__icon-glow { background: radial-gradient(#c0392b, transparent 70%); }
.rank-card--1 .rank-card__score { font-size: 22px; color: #9b2c2c; }
.rank-card--1 .rank-card__name  { font-size: 11px; color: #c0392b; }
.rank-card--1 .rank-card__rarity-pct { font-size: 18px; color: #c0392b; }
.rank-card--1 .rank-card__fill { background: linear-gradient(to right, #7b1111, #c0392b); }
.rank-card--1:hover { box-shadow: 0 12px 48px rgba(192,57,43,0.18), 0 0 0 1px rgba(192,57,43,0.2); }

/* --- RANK 2: Normie (steel blue) --- */
.rank-card--2 {
  padding: 22px 18px 18px;
  min-height: 240px;
  border-color: rgba(74,140,204,0.3);
  background: linear-gradient(165deg, #0d1424 0%, #07101e 100%);
}
.rank-card--2 .rank-card__tier {
  background: rgba(74,140,204,0.14);
  color: #7eb3ff;
  border: 1px solid rgba(126,179,255,0.25);
}
.rank-card--2 .rank-card__icon { color: #7eb3ff; }
.rank-card--2 .rank-card__icon-glow { background: radial-gradient(#4a8ccc, transparent 70%); }
.rank-card--2 .rank-card__score { font-size: 24px; color: #7eb3ff; }
.rank-card--2 .rank-card__name  { font-size: 12px; color: #7eb3ff; }
.rank-card--2 .rank-card__rarity-pct { font-size: 20px; color: #7eb3ff; }
.rank-card--2 .rank-card__fill { background: linear-gradient(to right, #2c5f8a, #7eb3ff); }
.rank-card--2:hover { box-shadow: 0 12px 48px rgba(126,179,255,0.14), 0 0 0 1px rgba(126,179,255,0.2); }

/* --- RANK 3: Chad (electric cyan — CENTER) --- */
.rank-card--3.rank-card--center {
  padding: 32px 24px 22px;
  min-height: 340px;
  border-color: rgba(0,212,255,0.45);
  background: linear-gradient(165deg, #0d1424 0%, #041824 100%);
  box-shadow: 0 0 0 1px rgba(0,212,255,0.15), 0 20px 60px rgba(0,212,255,0.12);
}
.rank-card--3 .rank-card__tier {
  background: rgba(0,212,255,0.14);
  color: var(--blue);
  border: 1px solid rgba(0,212,255,0.3);
}
.rank-card--3 .rank-card__featured-tag {
  background: var(--blue);
  color: var(--bg);
}
.rank-card--3 .rank-card__icon { color: var(--blue); font-size: 42px; }
.rank-card--3 .rank-card__icon-glow { background: radial-gradient(#00d4ff, transparent 70%); }
.rank-card--3 .rank-card__score { font-size: 34px; color: var(--blue); }
.rank-card--3 .rank-card__name  { font-size: 14px; color: var(--blue); }
.rank-card--3 .rank-card__tagline { font-size: 12px; }
.rank-card--3 .rank-card__rarity-pct { font-size: 26px; color: var(--blue); }
.rank-card--3 .rank-card__bar { height: 6px; }
.rank-card--3 .rank-card__fill { background: linear-gradient(to right, #0099bb, #00d4ff, #33eeff); }
.rank-card--3:hover { box-shadow: 0 20px 70px rgba(0,212,255,0.22), 0 0 0 1px rgba(0,212,255,0.4); }

/* Electric spark animation for chad */
@keyframes chad-spark {
  0%   { transform: translateY(100%) translateX(var(--sx, 0)) scale(0); opacity: 0.9; }
  70%  { opacity: 0.8; }
  100% { transform: translateY(-30px) translateX(calc(var(--sx, 0) * 2.5)) scale(0.3); opacity: 0; }
}
.rank-card--3 .rank-card__sparks::before,
.rank-card--3 .rank-card__sparks::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 6px 2px rgba(0,212,255,0.8);
  animation: chad-spark 1.8s ease-out infinite;
}
.rank-card--3 .rank-card__sparks::before { left: 30%; --sx: -15px; animation-delay: 0s; }
.rank-card--3 .rank-card__sparks::after  { left: 65%; --sx: 10px;  animation-delay: 0.9s; }

/* --- RANK 4: Gigachad (purple / violet) --- */
.rank-card--4 {
  padding: 26px 20px 20px;
  min-height: 280px;
  border-color: rgba(147,51,234,0.45);
  background: linear-gradient(165deg, #111827 0%, #130e2a 100%);
}
.rank-card--4 .rank-card__tier {
  background: rgba(147,51,234,0.18);
  color: #c084fc;
  border: 1px solid rgba(192,132,252,0.3);
}
.rank-card--4 .rank-card__icon { color: #c084fc; font-size: 36px; }
.rank-card--4 .rank-card__icon-glow { background: radial-gradient(#9333ea, transparent 70%); }
.rank-card--4 .rank-card__score { font-size: 28px; color: #c084fc; }
.rank-card--4 .rank-card__name  { font-size: 13px; color: #c084fc; }
.rank-card--4 .rank-card__rarity-pct { font-size: 22px; color: #c084fc; }
.rank-card--4 .rank-card__fill { background: linear-gradient(to right, #6b21a8, #a855f7, #c084fc); }
.rank-card--4:hover { box-shadow: 0 16px 60px rgba(147,51,234,0.22), 0 0 0 1px rgba(192,132,252,0.3); }

/* purple crystal sparks */
@keyframes epic-spark {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-60px) translateX(var(--sx, 0)) scale(0); opacity: 0; }
}
.rank-card--4 .rank-card__sparks::before,
.rank-card--4 .rank-card__sparks::after {
  content: '';
  position: absolute;
  bottom: 20%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #c084fc;
  box-shadow: 0 0 8px 3px rgba(147,51,234,0.9);
  animation: epic-spark 2.2s ease-out infinite;
}
.rank-card--4 .rank-card__sparks::before { left: 25%; --sx: -20px; animation-delay: 0s; }
.rank-card--4 .rank-card__sparks::after  { left: 70%; --sx: 12px;  animation-delay: 1.1s; }

/* --- RANK 5: Looksgod (gold / legendary) --- */
.rank-card--5.rank-card--special {
  padding: 28px 22px 22px;
  min-height: 300px;
  border-color: rgba(251,191,36,0.5);
  background: linear-gradient(165deg, #111827 0%, #1a1200 60%, #0d0a00 100%);
}
.rank-card--5 .rank-card__tier {
  background: rgba(251,191,36,0.16);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.35);
}
.rank-card--5 .rank-card__icon { color: #fbbf24; font-size: 38px; }
.rank-card--5 .rank-card__icon-glow { background: radial-gradient(#f59e0b, transparent 70%); }
.rank-card--5 .rank-card__score { font-size: 30px; color: #fbbf24; }
.rank-card--5 .rank-card__name  { font-size: 13px; color: #fbbf24; }
.rank-card--5 .rank-card__rarity-pct { font-size: 24px; color: #fbbf24; }
.rank-card--5 .rank-card__fill { background: linear-gradient(to right, #92400e, #fbbf24, #fef08a); }
.rank-card--5:hover { box-shadow: 0 16px 60px rgba(251,191,36,0.25), 0 0 0 1px rgba(251,191,36,0.45); }

/* gold flame sparks */
@keyframes gold-rise {
  0%   { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-80px) translateX(var(--sx, 0)) scale(0.2) rotate(180deg); opacity: 0; }
}
.rank-card--5 .rank-card__sparks::before,
.rank-card--5 .rank-card__sparks::after {
  content: '';
  position: absolute;
  bottom: 15%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 10px 4px rgba(251,191,36,0.85);
  animation: gold-rise 2.5s ease-out infinite;
}
.rank-card--5 .rank-card__sparks::before { left: 20%; --sx: -25px; animation-delay: 0s; }
.rank-card--5 .rank-card__sparks::after  { left: 72%; --sx: 18px;  animation-delay: 1.25s; }

/* ============================================
   FIFA CARD PREVIEW
   ============================================ */
.card-preview {
  padding: 120px 0;
  background: var(--bg-2);
  position: relative;
}
.card-preview::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-blue), transparent);
}
.card-preview__inner {
  display: flex;
  align-items: center;
  gap: 80px;
}
.card-preview__text { flex: 1; }
.card-preview__text p {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 440px;
}

/* ---- Share Globe ---- */
.share-globe {
  display: block;
  width: 300px;
  height: 300px;
  margin-top: 40px;
  border-radius: 50%;
  cursor: grab;
  position: relative;
  /* Subtle outer glow ring matching site blue */
  box-shadow:
    0 0 0 1px rgba(0, 212, 255, 0.12),
    0 0 40px rgba(0, 212, 255, 0.07),
    0 0 80px rgba(0, 212, 255, 0.04),
    0 20px 60px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.4s ease;
}
.share-globe:hover {
  box-shadow:
    0 0 0 1px rgba(0, 212, 255, 0.22),
    0 0 60px rgba(0, 212, 255, 0.14),
    0 0 120px rgba(0, 212, 255, 0.06),
    0 20px 60px rgba(0, 0, 0, 0.5);
}
.share-globe:active { cursor: grabbing; }

/* ============================================
   CARD-PREVIEW Background FX
   ============================================ */
.card-preview {
  overflow: hidden;
}
.card-preview__bg-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.card-preview .container { position: relative; z-index: 1; }

.cpbg {
  position: absolute;
  font-size: 100px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  opacity: 0.06;
  filter: saturate(0.6);
  animation: cpbg-float 22s ease-in-out infinite;
}
.cpbg--1  { left:  2%; top: 10%; font-size:130px; animation-duration:26s; animation-delay:0s; }
.cpbg--2  { left: 82%; top: 60%; font-size:110px; animation-duration:30s; animation-delay:-4s; }
.cpbg--3  { left: 48%; top:  5%; font-size: 90px; animation-duration:24s; animation-delay:-8s; opacity:.04; }
.cpbg--4  { left: 70%; top: 10%; font-size: 80px; animation-duration:28s; animation-delay:-2s; opacity:.04; }
.cpbg--5  { left: 15%; top: 65%; font-size: 60px; animation-duration:20s; animation-delay:-6s; opacity:.08; }
.cpbg--6  { left: 90%; top: 30%; font-size: 70px; animation-duration:32s; animation-delay:-1s; opacity:.07; }
.cpbg--7  { left: 55%; top: 75%; font-size: 75px; animation-duration:23s; animation-delay:-9s; opacity:.05; }
.cpbg--8  { left:  6%; top: 35%; font-size: 50px; animation-duration:19s; animation-delay:-3s; opacity:.09; }

.cpbg--svg {
  font-size: unset;
  width: 80px; height: 80px;
  color: rgba(0,212,255,0.18);
  stroke: currentColor;
}
.cpbg--s1 { left: 30%; top: 15%; animation-duration:25s; animation-delay:-5s; }
.cpbg--s2 { left: 60%; top: 55%; width:65px; height:65px; color:rgba(192,132,252,0.18); animation-duration:29s; animation-delay:-7s; }
.cpbg--s3 { left: 88%; top: 70%; width:55px; height:55px; color:rgba(251,191,36,0.18); animation-duration:21s; animation-delay:-10s; }

@keyframes cpbg-float {
  0%   { transform: translateY(0px)   rotate(0deg);   }
  25%  { transform: translateY(-16px) rotate(2deg);   }
  50%  { transform: translateY(-6px)  rotate(-1.5deg);}
  75%  { transform: translateY(-20px) rotate(1deg);   }
  100% { transform: translateY(0px)   rotate(0deg);   }
}

/* ============================================
   CARD FAN — 3 cards held in a hand
   ============================================ */
.card-fan {
  position: relative;
  flex-shrink: 0;
  width: 440px;
  height: 380px;
}

/* Each card wrapper handles fan positioning */
.card-fan__wrap {
  position: absolute;
  bottom: 0;
  width: 220px;
  height: 310px;
  transition:
    transform  0.45s cubic-bezier(0.34,1.22,0.64,1),
    opacity    0.35s ease,
    filter     0.35s ease,
    z-index    0s;
  transform-origin: bottom center;
  cursor: pointer;
}

/* Fan resting positions */
.card-fan__wrap--1 {
  left: 0;
  transform: rotate(-16deg) translateX(24px) translateY(12px);
  z-index: 1;
}
.card-fan__wrap--2 {
  left: 50%;
  transform: translateX(-50%) translateY(-24px);
  z-index: 3;
}
.card-fan__wrap--3 {
  right: 0;
  transform: rotate(16deg) translateX(-24px) translateY(12px);
  z-index: 2;
}

/* Hover state — fan container gets .fan-active via JS */
.card-fan.fan-active .card-fan__wrap {
  filter: brightness(0.45) saturate(0.5);
  opacity: 0.55;
}
.card-fan.fan-active .card-fan__wrap--1 {
  transform: rotate(-20deg) translateX(16px) translateY(20px) scale(0.93);
}
.card-fan.fan-active .card-fan__wrap--3 {
  transform: rotate(20deg) translateX(-16px) translateY(20px) scale(0.93);
}
.card-fan.fan-active .card-fan__wrap--2:not(.fan-card-active) {
  transform: translateX(-50%) translateY(-10px) scale(0.94);
}

/* Active (hovered) card lifts and brightens — JS overrides transform inline */
.card-fan__wrap.fan-card-active {
  filter: brightness(1.05) saturate(1.15) !important;
  opacity: 1 !important;
  z-index: 10 !important;
  /* JS sets: transform = <rest-base> + translateY(-64px) scale(1.08) */
}

/* FIFA CARD base */
.fifa-card {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* 3D tilt — JS drives rotateX/rotateY via inline style */
  transition: box-shadow 0.3s ease;
  transform-style: preserve-3d;
}

/* ---- Chad theme (Cyan) ---- */
.fifa-card--chad {
  background: linear-gradient(145deg, #091e24 0%, #061418 50%, #0a2028 100%);
  border: 1px solid rgba(0,212,255,0.45);
  box-shadow:
    0 0 50px rgba(0,212,255,0.12),
    0 20px 50px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
.fifa-card--chad .fifa-card__score { color: #00d4ff; text-shadow: 0 0 28px rgba(0,212,255,0.6); }
.fifa-card--chad .fifa-card__rank  { color: rgba(0,212,255,0.85); }
.fifa-card--chad .fifa-card__bg {
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(0,212,255,0.14) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,212,255,0.06) 0%, transparent 50%);
}
.fifa-card--chad .fifa-card__glow {
  background: radial-gradient(ellipse 60% 60% at 50% 30%, rgba(0,212,255,0.10), transparent 70%);
}
.fifa-card--chad .fifa-card__stat span { color: #00d4ff; }
.fifa-card--chad .fifa-card__avatar { border-color: rgba(0,212,255,0.35); }

/* ---- Gigachad theme (Purple) ---- */
.fifa-card--gigachad {
  background: linear-gradient(145deg, #180d2a 0%, #0e0820 50%, #1a0d2e 100%);
  border: 1px solid rgba(192,132,252,0.45);
  box-shadow:
    0 0 50px rgba(192,132,252,0.14),
    0 20px 50px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
.fifa-card--gigachad .fifa-card__score { color: #c084fc; text-shadow: 0 0 28px rgba(192,132,252,0.6); }
.fifa-card--gigachad .fifa-card__rank  { color: rgba(192,132,252,0.85); }
.fifa-card--gigachad .fifa-card__bg {
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(192,132,252,0.14) 0%, transparent 60%),
    linear-gradient(180deg, rgba(192,132,252,0.06) 0%, transparent 50%);
}
.fifa-card--gigachad .fifa-card__glow {
  background: radial-gradient(ellipse 60% 60% at 50% 30%, rgba(192,132,252,0.10), transparent 70%);
}
.fifa-card--gigachad .fifa-card__stat span { color: #c084fc; }
.fifa-card--gigachad .fifa-card__avatar { border-color: rgba(192,132,252,0.35); }

/* ---- Looksgod theme (Gold) — keep existing style ---- */
.fifa-card--looksgod {
  background: linear-gradient(145deg, #1a2a1a 0%, #0d1a0d 40%, #1a2200 100%);
  border: 1px solid rgba(251,191,36,0.45);
  box-shadow:
    0 0 50px rgba(251,191,36,0.14),
    0 20px 50px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
.fifa-card--looksgod .fifa-card__score { color: #fbbf24; text-shadow: 0 0 28px rgba(251,191,36,0.6); }
.fifa-card--looksgod .fifa-card__rank  { color: rgba(251,191,36,0.85); }
.fifa-card--looksgod .fifa-card__bg {
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(251,191,36,0.14) 0%, transparent 60%),
    linear-gradient(180deg, rgba(251,191,36,0.06) 0%, transparent 50%);
}
.fifa-card--looksgod .fifa-card__glow {
  background: radial-gradient(ellipse 60% 60% at 50% 30%, rgba(251,191,36,0.10), transparent 70%);
}
.fifa-card--looksgod .fifa-card__stat span { color: #fbbf24; }
.fifa-card--looksgod .fifa-card__avatar { border-color: rgba(251,191,36,0.35); }

.fifa-card__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(251,191,36,0.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(251,191,36,0.06) 0%, transparent 50%);
}
.fifa-card__glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse 60% 60% at 50% 30%, rgba(251,191,36,0.08), transparent 70%);
  pointer-events: none;
}

.fifa-card__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 20px;
  height: 100%;
}

.fifa-card__score {
  font-family: var(--font-head);
  font-size: 52px;
  font-weight: 700;
  color: #fbbf24;
  line-height: 1;
  text-shadow: 0 0 30px rgba(251,191,36,0.5);
  margin-bottom: 4px;
}
.fifa-card__rank {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(251,191,36,0.8);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.fifa-card__avatar {
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 2px solid rgba(251,191,36,0.3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  margin-bottom: 10px;
}
.fifa-card__name {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.9);
  margin-bottom: 16px;
}
.fifa-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}
.fifa-card__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 6px 4px;
}
.fifa-card__stat span {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: #fbbf24;
}
.fifa-card__stat small {
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
  margin-top: 1px;
}

/* ============================================
   AD PLACEHOLDER
   ============================================ */
.ad-section { padding: 40px 0; }
.ad-placeholder {
  height: 90px;
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* ============================================
   AFFILIATE
   ============================================ */
.affiliate {
  padding: 80px 0 120px;
  background: var(--bg);
}
.affiliate .section-title { margin-bottom: 8px; }
.affiliate__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 48px;
}

.affiliate-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition);
  position: relative;
}
.affiliate-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-blue);
}
.affiliate-card__img {
  height: 140px;
  background: var(--bg-card-2);
}
.affiliate-card__img--1 { background: linear-gradient(135deg, #0a2040, #0d3060); }
.affiliate-card__img--2 { background: linear-gradient(135deg, #1a0a30, #2d1060); }
.affiliate-card__img--3 { background: linear-gradient(135deg, #0a2a20, #0d4030); }

.affiliate-card__body { padding: 20px; }
.affiliate-card__cat {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
  margin-bottom: 6px;
}
.affiliate-card__body h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  font-family: var(--font-head);
}
.affiliate-card__body p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 16px;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  padding: 40px 0;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.footer__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 16px;
}
.footer__links {
  display: flex;
  gap: 24px;
  margin-left: auto;
}
.footer__links a {
  font-size: 13px;
  color: var(--text-3);
  transition: color var(--transition);
}
.footer__links a:hover { color: var(--text-1); }
.footer__copy {
  width: 100%;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 8px;
}

/* ============================================
   ANALYZE PAGE
   ============================================ */
.analyze-page {
  min-height: 100vh;
  padding: 120px 0 80px;
  background: var(--bg);
}
.analyze-page .container { max-width: 800px; }
.analyze-hero {
  text-align: center;
  margin-bottom: 56px;
}
.analyze-hero .section-label { justify-content: center; display: flex; margin: 0 auto 12px; }
.analyze-hero .section-title { font-size: clamp(36px, 5vw, 56px); }
.analyze-hero p { color: var(--text-2); font-size: 16px; margin-top: 12px; }

.upload-zone {
  border: 2px dashed var(--border-blue);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 60px 40px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--blue);
  background: rgba(30,143,255,0.04);
  box-shadow: 0 0 40px rgba(30,143,255,0.1);
}
.upload-zone__icon {
  width: 72px; height: 72px;
  background: rgba(30,143,255,0.1);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  margin: 0 auto 20px;
  font-size: 28px;
}
.upload-zone h3 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}
.upload-zone p { font-size: 14px; color: var(--text-2); margin-bottom: 24px; }
.upload-zone input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* RESULT CARD */
.result-card {
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 24px;
  animation: fadeUp 0.5s ease;
}
.result-card.visible { display: block; }

.result-card__header {
  padding: 32px 32px 0;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.result-photo {
  width: 100px; height: 100px;
  border-radius: 16px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--border-blue);
}
.result-score-area { flex: 1; }
.result-rank-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 12px;
  border-radius: 99px;
  margin-bottom: 8px;
}
.result-score-num {
  font-family: var(--font-head);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
}
.result-score-bar {
  height: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  margin-top: 12px;
  overflow: hidden;
}
.result-score-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0;
}
.result-card__body { padding: 24px 32px 32px; }
.result-criteria { margin-bottom: 24px; }
.result-criteria h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 14px;
}
.criteria-list { display: flex; flex-direction: column; gap: 10px; }
.criteria-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.criteria-item__label { font-size: 14px; color: var(--text-2); min-width: 120px; }
.criteria-item__bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  overflow: hidden;
}
.criteria-item__fill {
  height: 100%;
  border-radius: 99px;
  background: var(--blue);
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0;
}
.criteria-item__val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  min-width: 32px;
  text-align: right;
}

.tips-section h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 14px;
}
.tips-list { display: flex; flex-direction: column; gap: 10px; }
.tip-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card-2);
  border-radius: var(--radius);
  border-left: 3px solid var(--blue);
}
.tip-item p { font-size: 14px; color: var(--text-2); line-height: 1.5; }

.result-actions {
  padding: 0 32px 32px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================
   RANKING PAGE
   ============================================ */
.ranking-page {
  min-height: 100vh;
  padding: 120px 0 80px;
}
.ranking-table {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 40px;
}
.ranking-table__head {
  display: grid;
  grid-template-columns: 60px 1fr 100px 120px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}
.ranking-row {
  display: grid;
  grid-template-columns: 60px 1fr 100px 120px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background var(--transition);
}
.ranking-row:last-child { border-bottom: none; }
.ranking-row:hover { background: rgba(255,255,255,0.02); }
.ranking-row__pos {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-3);
}
.ranking-row__pos.gold   { color: #fbbf24; }
.ranking-row__pos.silver { color: #94a3b8; }
.ranking-row__pos.bronze { color: #cd7c4a; }
.ranking-row__user { display: flex; align-items: center; gap: 12px; }
.ranking-row__avatar {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.ranking-row__name { font-weight: 600; font-size: 15px; }
.ranking-row__score {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
}
.ranking-row__rank span {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================
   FORUM PAGE
   ============================================ */
.forum-page {
  min-height: 100vh;
  padding: 120px 0 80px;
}
.forum-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 16px;
}
.forum-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
}
.forum-posts { display: flex; flex-direction: column; gap: 16px; }
.forum-post {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  transition: border-color var(--transition);
  cursor: pointer;
}
.forum-post:hover { border-color: var(--border-blue); }
.forum-post__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.forum-post__avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.forum-post__meta { flex: 1; }
.forum-post__user { font-weight: 600; font-size: 14px; }
.forum-post__time { font-size: 12px; color: var(--text-3); }
.forum-post__rank span {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.forum-post__title { font-weight: 600; font-size: 16px; margin-bottom: 8px; font-family: var(--font-head); }
.forum-post__body { font-size: 14px; color: var(--text-2); line-height: 1.5; margin-bottom: 14px; }
.forum-post__footer {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--text-3);
}
.forum-sidebar__widget {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}
.forum-sidebar__widget h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 14px;
}

/* ============================================
   PROFILE PAGE
   ============================================ */
.profile-page {
  min-height: 100vh;
  padding: 120px 0 80px;
}
.profile-header {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  gap: 32px;
  align-items: center;
  margin-bottom: 24px;
}
.profile-avatar {
  width: 100px; height: 100px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--blue-dark), var(--bg-card-2));
  border: 2px solid var(--border-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--font-head);
}
.profile-info__name {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 4px;
}
.profile-info__score-big {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.profile-info__score-num {
  font-family: var(--font-head);
  font-size: 48px;
  font-weight: 700;
  color: var(--blue);
}
.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.profile-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}
.profile-stat__num {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 4px;
}
.profile-stat__label { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }

.progress-chart {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-top: 16px;
}
.progress-chart h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  font-family: var(--font-head);
}
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
}
.chart-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}
.chart-bar {
  width: 100%;
  border-radius: 6px 6px 0 0;
  background: var(--blue);
  opacity: 0.7;
  min-height: 4px;
  transition: opacity var(--transition);
}
.chart-bar:hover { opacity: 1; }
.chart-bar-label { font-size: 11px; color: var(--text-3); }

/* ============================================
   RANK COLOR HELPERS
   ============================================ */
.rank--subhuman  { background: rgba(80,80,100,0.2);  color: #778; }
.rank--normie    { background: rgba(30,100,200,0.15); color: #7eb3ff; }
.rank--chad      { background: rgba(30,143,255,0.15); color: var(--blue); }
.rank--gigachad  { background: rgba(167,139,250,0.15); color: #a78bfa; }
.rank--looksgod  { background: rgba(251,191,36,0.15);  color: #fbbf24; }

/* ============================================
   LOADING SPINNER
   ============================================ */
.spinner {
  display: none;
  width: 40px; height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 24px auto;
}
.spinner.visible { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================
   COSMIC NEBULA CARD TILT  (ported from CosmicNebulaMastercard React component)
   3D tilt on hover · auto-sway at rest · nebula breathing · holographic sheen
   ============================================ */

/* Perspective wrapper injected by card-tilt.js */
.tilt-wrap {
  perspective: 900px;
  perspective-origin: center center;
  /* inherit flex/grid sizing from parent */
  display: contents;
}

/* Override display:contents for specific containers that need flex behavior */
.affiliate__grid > .tilt-wrap {
  display: flex;
  flex: 1;
  min-width: 0;
}
/* ranks__grid uses proportional nth-child sizing — see RANKS section above */
.ranks__grid > .tilt-wrap {
  display: block;
}

.steps > .tilt-wrap {
  display: flex;
  flex: 1;
  min-width: 220px;
  max-width: 280px;
}

/* All tilt targets */
.rank-card,
.affiliate-card,
.fifa-card,
.step {
  transition: transform 0.12s ease-out, box-shadow 0.3s ease;
}

/* ---- Nebula overlay (animated via JS) ---- */
.card-nebula {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  mix-blend-mode: screen;
  transition: opacity 0.4s ease;
}

/* ---- Star field ---- */
.card-stars {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
  background-image:
    radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 35% 65%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 70% 45%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 25% 85%, rgba(200,230,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 48% 38%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.5px 1.5px at 78% 18%, rgba(200,230,255,0.6), transparent),
    radial-gradient(2px 2px at 90% 90%, rgba(255,255,255,0.5), transparent);
  background-size: 100% 100%;
  animation: stars-drift 60s linear infinite;
}

@keyframes stars-drift {
  0%   { background-position: 0px 0px; }
  100% { background-position: 12px 8px; }
}

/* Stars become visible on hover */
.rank-card:hover .card-stars,
.affiliate-card:hover .card-stars,
.fifa-card:hover .card-stars {
  opacity: 1;
}

/* ---- Holographic sheen ---- */
.card-holosheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(
    105deg,
    transparent  30%,
    rgba(100,210,255,0.12) 40%,
    rgba(180,240,255,0.22) 50%,
    rgba(100,210,255,0.12) 60%,
    transparent  70%
  );
  background-size: 300% 100%;
  background-position: 200% 50%;
}

.rank-card:hover .card-holosheen,
.affiliate-card:hover .card-holosheen,
.fifa-card:hover .card-holosheen {
  opacity: 1;
  animation: holosheen-sweep 2.5s ease-in-out infinite;
}

@keyframes holosheen-sweep {
  0%   { background-position: 200% 50%; }
  50%  { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Ensure card content stays above the overlays */
.rank-card > *:not(.card-nebula):not(.card-stars):not(.card-holosheen),
.affiliate-card > *:not(.card-nebula):not(.card-stars):not(.card-holosheen),
.fifa-card > *:not(.card-nebula):not(.card-stars):not(.card-holosheen) {
  position: relative;
  z-index: 2;
}

/* ============================================
   SPOTLIGHT GLOW CARDS  (ported from GlowCard/SpotlightCard React component)
   Vanilla CSS implementation — JS updates --spotlight-x / --spotlight-y per card
   ============================================ */

/* Glowing border that follows the cursor — applied via [data-spotlight] */
[data-spotlight] {
  --sp-x: 50%;
  --sp-y: 50%;
  --sp-size: 240px;
  --sp-hue: 213;
  --sp-saturation: 100%;
  --sp-lightness: 55%;
  --sp-opacity: 0;
  position: relative;
  isolation: isolate;
}

/* Spotlight fill inside card */
[data-spotlight]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    var(--sp-size) var(--sp-size) at var(--sp-x) var(--sp-y),
    hsla(var(--sp-hue), var(--sp-saturation), var(--sp-lightness), 0.10) 0%,
    transparent 65%
  );
  opacity: var(--sp-opacity);
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

/* Spotlight border glow — removed (causes visible border artifact) */

/* All direct children above the glow layers */
[data-spotlight] > * { position: relative; z-index: 1; }

/* Hover activates the glow */
[data-spotlight]:hover {
  --sp-opacity: 1;
}

/* Button variant — tighter spotlight radius */
[data-spotlight][data-sp-type="btn"] {
  --sp-size: 120px;
  --sp-lightness: 70%;
  overflow: hidden;   /* clip the glow to the button shape */
}
[data-spotlight][data-sp-type="btn"]::before {
  /* slightly brighter fill for small buttons */
  background: radial-gradient(
    var(--sp-size) var(--sp-size) at var(--sp-x) var(--sp-y),
    hsla(var(--sp-hue), var(--sp-saturation), var(--sp-lightness), 0.18) 0%,
    transparent 65%
  );
}

/* Color variants */
[data-spotlight][data-sp-color="purple"] {
  --sp-hue: 280;
  --sp-saturation: 90%;
}
[data-spotlight][data-sp-color="gold"] {
  --sp-hue: 44;
  --sp-saturation: 100%;
  --sp-lightness: 60%;
}
[data-spotlight][data-sp-color="green"] {
  --sp-hue: 145;
  --sp-saturation: 80%;
}
[data-spotlight][data-sp-color="white"] {
  --sp-hue: 210;
  --sp-saturation: 30%;
  --sp-lightness: 90%;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .nav__links { display: none; }
  .hero__title { font-size: 48px; letter-spacing: -1.5px; }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .card-preview__inner { flex-direction: column; }
  .steps { flex-direction: column; align-items: center; }
  .step__connector { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--border-blue), transparent); }
  .forum-grid { grid-template-columns: 1fr; }
  .profile-header { flex-direction: column; text-align: center; }
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .ranking-table__head,
  .ranking-row { grid-template-columns: 48px 1fr 80px 100px; padding: 12px 16px; }
  .footer__links { margin-left: 0; }

  /* Island: smaller on mobile */
  .nav-island__track {
    padding: 5px 8px;
    gap: 2px;
  }
  .nav-island__item {
    width: 30px;
    height: 30px;
  }
  .nav__login { display: none; }

  /* Rank cards: stack on mobile */
  .ranks__grid {
    flex-wrap: wrap;
    align-items: stretch;
  }
  .ranks__grid > .tilt-wrap {
    flex: 0 0 calc(50% - 6px) !important;
    min-width: 0 !important;
  }
  .ranks__grid > .tilt-wrap:nth-child(5) {
    flex: 0 0 100% !important;
  }
  .rank-card--1, .rank-card--2, .rank-card--3.rank-card--center,
  .rank-card--4, .rank-card--5 {
    min-height: 200px !important;
  }
  .rank-card--3.rank-card--center {
    padding: 24px 20px 18px !important;
  }
}

/* ============================================
   AUTH MODAL — Glassmorphism Dark
   Login + Register with tab switching
   ============================================ */

/* ---- Overlay ---- */
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-modal[hidden] { display: none; }

/* Frosted backdrop */
.auth-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 10, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.auth-modal--open .auth-modal__backdrop { opacity: 1; }

/* ---- Panel ---- */
.auth-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: rgba(8, 11, 22, 0.96);
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-radius: 20px;
  padding: 40px 36px 36px;
  box-shadow:
    0 0  60px rgba(0, 0, 0, 0.70),
    0 0  40px rgba(0, 212, 255, 0.06),
    0 32px 80px rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);

  /* Slide-up + fade on open */
  transform: translateY(24px) scale(0.96);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.28, 0.64, 1),
              opacity   0.30s ease;
}

.auth-modal--open .auth-modal__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Top gradient line accent */
.auth-modal__panel::before {
  content: '';
  position: absolute;
  top: 0; left: 20px; right: 20px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,212,255,0.55), rgba(192,132,252,0.35), transparent);
  border-radius: 1px;
}

/* ---- Close button ---- */
.auth-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border: none;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.auth-modal__close:hover {
  background: rgba(0,212,255,0.12);
  color: rgba(0,212,255,0.9);
}

/* ---- Logo ---- */
.auth-modal__logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text-1);
  text-align: center;
  margin-bottom: 28px;
  letter-spacing: -0.01em;
}
.auth-modal__logo-icon {
  color: var(--blue);
  margin-right: 6px;
}

/* ---- Tabs ---- */
.auth-modal__tabs {
  display: flex;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 28px;
  gap: 4px;
}

.auth-tab {
  flex: 1;
  padding: 9px 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: rgba(255,255,255,0.40);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.auth-tab--active {
  background: rgba(0,212,255,0.12);
  color: #00d4ff;
  box-shadow: 0 0 16px rgba(0,212,255,0.15);
}

/* ---- Panel visibility ---- */
.auth-panel { display: none; }
.auth-panel--active { display: block; }

/* ---- Social buttons ---- */
.auth-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.auth-social__btn {
  width: 100%;
  padding: 11px 16px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.80);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background 0.2s, border-color 0.2s;
}
.auth-social__btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.20);
}
.auth-social__btn--discord {
  background: rgba(88, 101, 242, 0.12);
  border-color: rgba(88, 101, 242, 0.30);
}
.auth-social__btn--discord:hover {
  background: rgba(88, 101, 242, 0.22);
}

/* ---- Divider ---- */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: rgba(255,255,255,0.25);
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.10);
}

/* ---- Form fields ---- */
.auth-form { display: flex; flex-direction: column; gap: 16px; }

.auth-field { display: flex; flex-direction: column; gap: 6px; }

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.60);
}

.auth-input-wrap { position: relative; }

.auth-input {
  width: 100%;
  padding: 11px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: var(--text-1);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.auth-input-wrap .auth-input { padding-right: 44px; }

.auth-input::placeholder { color: rgba(255,255,255,0.25); }

.auth-input:focus {
  border-color: rgba(0,212,255,0.55);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.10), 0 0 20px rgba(0,212,255,0.08);
}

.auth-input--error {
  border-color: rgba(239, 68, 68, 0.70) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12) !important;
}

/* Show/hide password eye button */
.auth-eye {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: rgba(255,255,255,0.30);
  cursor: pointer;
  padding: 4px;
  display: flex; align-items: center;
  transition: color 0.2s;
}
.auth-eye:hover { color: rgba(255,255,255,0.65); }

/* ---- Forgot password ---- */
.auth-forgot {
  font-size: 12px;
  color: rgba(0,212,255,0.70);
  text-decoration: none;
  transition: color 0.2s;
}
.auth-forgot:hover { color: #00d4ff; }

/* ---- Checkbox ---- */
.auth-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.auth-check input[type="checkbox"] { display: none; }

.auth-check__box {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border: 1.5px solid rgba(255,255,255,0.20);
  border-radius: 5px;
  background: rgba(255,255,255,0.04);
  margin-top: 1px;
  transition: border-color 0.2s, background 0.2s;
  display: flex; align-items: center; justify-content: center;
}

.auth-check input:checked + .auth-check__box {
  background: rgba(0,212,255,0.18);
  border-color: rgba(0,212,255,0.70);
}
.auth-check input:checked + .auth-check__box::after {
  content: '';
  width: 5px; height: 9px;
  border: 2px solid #00d4ff;
  border-top: none; border-left: none;
  transform: rotate(45deg) translateY(-1px);
}

.auth-check__label {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
}

/* ---- Links inside text ---- */
.auth-link {
  color: rgba(0,212,255,0.80);
  text-decoration: none;
}
.auth-link:hover { color: #00d4ff; }

/* ---- Submit button ---- */
.auth-submit {
  width: 100%;
  margin-top: 4px;
  padding: 13px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

/* ---- Switch tab link at bottom ---- */
.auth-switch {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: rgba(255,255,255,0.40);
}
.auth-switch__btn {
  background: none;
  border: none;
  color: rgba(0,212,255,0.80);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  transition: color 0.2s;
}
.auth-switch__btn:hover { color: #00d4ff; }

/* ---- Responsive ---- */
@media (max-width: 480px) {
  .auth-modal__panel { padding: 28px 20px 24px; }
  .auth-social { gap: 8px; }
}