/* ============================================================
   PORTALDOT QUIZ — STYLES
   Purple → Blue Gradient Theme (matches logo)
   ============================================================ */

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #05050f;
  --bg-2:        #080818;
  --bg-card:     #0d0d20;
  --bg-card-2:   #121230;
  --border:      rgba(99, 102, 241, 0.18);
  --border-2:    rgba(99, 102, 241, 0.38);

  --purple-1:    #7c3aed;
  --purple-2:    #6366f1;
  --purple-3:    #818cf8;
  --neon:        #818cf8;
  --neon-2:      #60a5fa;
  --cyan:        #38bdf8;

  --text:        #f0f0ff;
  --text-2:      #a5b4fc;
  --text-3:      #94a3b8;
  --text-muted:  #64748b;

  /* Logo-matched gradient: deep purple → indigo → bright blue */
  --grad:        linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #3b82f6 100%);
  --grad-hover:  linear-gradient(135deg, #6d28d9 0%, #4338ca 50%, #2563eb 100%);
  --grad-subtle: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(59,130,246,0.12));
  --glow:        0 0 48px rgba(99,102,241,0.4);
  --glow-sm:     0 0 24px rgba(99,102,241,0.28);
  --glow-blue:   0 0 32px rgba(59,130,246,0.35);

  --radius:      16px;
  --radius-sm:   10px;
  --radius-lg:   24px;

  --font:        'Inter', system-ui, sans-serif;
  --font-alt:    'Space Grotesk', system-ui, sans-serif;

  --transition:  all 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
button { cursor: pointer; border: none; font-family: var(--font); }

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--purple-1); border-radius: 99px; }

/* ---------- UTILITY ---------- */
.hidden { display: none !important; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  transition: var(--transition);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

/* Shimmer sweep on hover */
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.btn:hover::after { left: 160%; }

.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 4px 20px rgba(79,70,229,0.45);
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 36px rgba(59,130,246,0.5), 0 4px 16px rgba(79,70,229,0.4);
  background: var(--grad-hover);
}
.btn-primary:active { transform: translateY(0) scale(0.98); box-shadow: none; }

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border-2);
}
.btn-ghost:hover {
  background: rgba(99,102,241,0.1);
  color: var(--text);
  border-color: var(--purple-2);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(99,102,241,0.2);
}
.btn-ghost:active { transform: translateY(0); }

.btn-sm { padding: 8px 18px; font-size: 13px; }
.btn-full { width: 100%; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(10, 8, 18, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  transition: var(--transition);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  margin: -4px -8px;
}
.nav-logo:hover {
  opacity: 1;
  transform: scale(1.04);
  background: rgba(99,102,241,0.08);
}
.nav-logo:hover .logo-img {
  filter: drop-shadow(0 0 10px rgba(99,102,241,0.6)) drop-shadow(0 0 20px rgba(59,130,246,0.4));
  animation: glitchShift 0.5s steps(1) 1;
}
.nav-logo:hover .logo-name {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-img {
  height: 38px;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

/* Fallback — keep old dot/accent in case logo.png fails to load */
.logo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: var(--glow-sm);
  flex-shrink: 0;
}

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

.nav-link {
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-3);
  transition: var(--transition);
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 3px; left: 14px; right: 14px;
  height: 2px;
  background: var(--grad);
  border-radius: 99px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-link:hover {
  color: var(--text);
  background: rgba(99,102,241,0.08);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active {
  color: var(--purple-3);
  background: rgba(99,102,241,0.12);
}
.nav-link.active::after { transform: scaleX(1); }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  padding: 8px;
  border-radius: 8px;
  transition: var(--transition);
}
.hamburger:hover { background: rgba(99,102,241,0.1); }
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-2);
  border-radius: 99px;
  transition: var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--border);
  padding: 12px 24px 16px;
  gap: 4px;
}
.mobile-menu.open { display: flex; }

.mobile-link {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-3);
  transition: var(--transition);
}
.mobile-link:hover, .mobile-link.active {
  color: var(--purple-3);
  background: rgba(99,102,241,0.1);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 24px 80px;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  gap: 60px;
}

.hero-bg-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
}
.orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #7c3aed, transparent);
  top: -100px; left: -100px;
}
.orb-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, #3b82f6, transparent);
  top: 50%; right: -100px;
  transform: translateY(-50%);
}
.orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, #4f46e5, transparent);
  bottom: -50px; left: 40%;
}

.hero-content {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(79,70,229,0.12);
  border: 1px solid rgba(99,102,241,0.35);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 500;
  color: var(--purple-3);
  margin-bottom: 24px;
  transition: var(--transition);
  cursor: default;
}
.hero-badge:hover {
  background: rgba(79,70,229,0.2);
  border-color: rgba(59,130,246,0.5);
  box-shadow: 0 0 14px rgba(99,102,241,0.3);
}

.badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.hero-title {
  font-family: var(--font-alt);
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 20px;
}

.hero-desc {
  font-size: 17px;
  color: var(--text-3);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 36px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 24px;
}

.stat { text-align: center; }
.stat-number {
  display: block;
  font-family: var(--font-alt);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}
.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
}

/* Hero Visual */
.hero-visual {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 380px;
}

.visual-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--glow), 0 24px 64px rgba(0,0,0,0.5);
  transition: var(--transition);
}
.visual-card:hover {
  border-color: rgba(59,130,246,0.4);
  box-shadow: 0 0 40px rgba(99,102,241,0.35), 0 0 80px rgba(59,130,246,0.2), 0 32px 80px rgba(0,0,0,0.6);
  transform: translateY(-4px) rotate(-0.5deg);
}

.vc-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}

.vc-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.vc-dot.red   { background: #ef4444; }
.vc-dot.yellow{ background: #f59e0b; }
.vc-dot.green { background: #22c55e; }

.vc-title {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
}

.vc-question {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.5;
}

.vc-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.vc-option {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-3);
  border: 1px solid var(--border);
  background: var(--bg-2);
  transition: var(--transition);
}

.vc-option:hover {
  border-color: rgba(99,102,241,0.4);
  background: rgba(99,102,241,0.08);
  color: var(--text-2);
  cursor: pointer;
  transform: translateX(3px);
}
.vc-option.selected {
  border-color: var(--purple-2);
  background: rgba(79,70,229,0.15);
  color: var(--purple-3);
  box-shadow: 0 0 12px rgba(99,102,241,0.2);
}

.vc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vc-timer {
  font-size: 13px;
  color: var(--neon);
  font-weight: 600;
}

.vc-submit {
  background: var(--grad);
  color: #fff;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  transition: var(--transition);
}
.vc-submit:hover { filter: brightness(1.15); transform: translateY(-1px); }

/* ============================================================
   SECTIONS COMMON
   ============================================================ */
.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px;
}

.section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.section-title {
  font-family: var(--font-alt);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
}

.section-desc {
  font-size: 16px;
  color: var(--text-3);
  max-width: 560px;
  margin-bottom: 56px;
  line-height: 1.7;
}

/* ============================================================
   FEATURES
   ============================================================ */
.features {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 48px;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-subtle);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
}
.feature-card:hover {
  border-color: rgba(59,130,246,0.4);
  transform: translateY(-6px);
  box-shadow: 0 0 32px rgba(99,102,241,0.25), 0 16px 40px rgba(0,0,0,0.4);
}
.feature-card:hover::before { opacity: 1; }

.feature-icon {
  font-size: 28px;
  margin-bottom: 14px;
}

.feature-card h3 {
  font-family: var(--font-alt);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}

.feature-card p {
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.65;
}

/* ============================================================
   SCHEDULE
   ============================================================ */

/* Section-level background radial */
.schedule { position: relative; overflow: hidden; }
.schedule::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1100px; height: 650px;
  background: radial-gradient(ellipse 60% 55% at 50% 0%,
    rgba(79,70,229,0.1) 0%, transparent 100%);
  pointer-events: none;
}
.schedule .section-inner { position: relative; z-index: 1; }

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 22px;
  margin-top: 52px;
}

/* ── Base card ── */
.schedule-card {
  background: linear-gradient(150deg,
    rgba(15,13,36,0.97) 0%,
    rgba(9,9,23,0.98) 100%);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 22px;
  padding: 28px 26px;
  display: flex;
  gap: 22px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.04);
  will-change: transform;
  transition:
    transform 0.32s cubic-bezier(0.34,1.15,0.64,1),
    box-shadow 0.32s ease,
    border-color 0.28s ease;
}

/* Top gradient bar */
.schedule-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 22px 22px 0 0;
  background: var(--grad);
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* Ambient inner orb */
.schedule-card::after {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(99,102,241,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.schedule-card:hover {
  transform: translateY(-9px) scale(1.016);
  border-color: rgba(99,102,241,0.48);
  box-shadow:
    0 28px 72px rgba(0,0,0,0.58),
    0 0 56px rgba(79,70,229,0.26),
    inset 0 1px 0 rgba(255,255,255,0.07);
}
.schedule-card:hover::before { opacity: 1; }

/* ── Featured card — full-width, heavier presence ── */
.schedule-card.featured {
  grid-column: 1 / -1;
  padding: 36px 34px;
  gap: 30px;
  border-color: rgba(99,102,241,0.32);
  background: linear-gradient(135deg,
    rgba(20,12,50,0.99) 0%,
    rgba(12,11,33,0.99) 55%,
    rgba(8,14,32,0.99) 100%);
  box-shadow:
    0 8px 56px rgba(0,0,0,0.55),
    0 0 0 1px rgba(99,102,241,0.28),
    inset 0 1px 0 rgba(255,255,255,0.045);
}
.schedule-card.featured::before {
  height: 3px;
  opacity: 1;
}
.schedule-card.featured::after {
  width: 420px; height: 420px;
  top: -140px; right: -100px;
  background: radial-gradient(circle,
    rgba(79,70,229,0.18) 0%, transparent 70%);
}
.schedule-card.featured:hover {
  transform: translateY(-7px) scale(1.01);
  box-shadow:
    0 32px 88px rgba(0,0,0,0.65),
    0 0 80px rgba(79,70,229,0.32),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

/* ── Live card — green glow ── */
.schedule-card.sc-live {
  border-color: rgba(52,211,153,0.28);
}
.schedule-card.sc-live::before {
  background: linear-gradient(90deg,
    #059669 0%, #34d399 40%, #6ee7b7 60%, #34d399 80%, #059669 100%);
  background-size: 200% 100%;
  animation: liveBarShimmer 3s linear infinite;
  opacity: 1;
}
.schedule-card.sc-live::after {
  background: radial-gradient(circle,
    rgba(52,211,153,0.13) 0%, transparent 70%);
}
.schedule-card.sc-live:hover {
  border-color: rgba(52,211,153,0.52);
  box-shadow:
    0 28px 72px rgba(0,0,0,0.58),
    0 0 64px rgba(52,211,153,0.24),
    inset 0 1px 0 rgba(255,255,255,0.07);
}
@keyframes liveBarShimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ── Ended card ── */
.schedule-card.sc-ended {
  opacity: 0.65;
  border-color: rgba(248,113,113,0.18);
}
.schedule-card.sc-ended::before {
  background: linear-gradient(90deg,
    rgba(239,68,68,0.55), rgba(252,165,165,0.3), rgba(239,68,68,0.55));
  opacity: 1;
}
.schedule-card.sc-ended:hover {
  opacity: 1;
  border-color: rgba(248,113,113,0.42);
  transform: translateY(-6px) scale(1.012);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.55),
    0 0 40px rgba(239,68,68,0.15),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ── Status badges ── */
.sc-badge {
  position: absolute;
  top: 20px; right: 20px;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 99px;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.sc-badge-live {
  background: rgba(52,211,153,0.13);
  color: #34d399;
  border: 1px solid rgba(52,211,153,0.35);
  box-shadow: 0 0 20px rgba(52,211,153,0.22);
}
.sc-badge-upcoming {
  background: rgba(99,102,241,0.13);
  color: var(--purple-3);
  border: 1px solid rgba(99,102,241,0.3);
}
.sc-badge-ended {
  background: rgba(248,113,113,0.11);
  color: #fca5a5;
  border: 1px solid rgba(248,113,113,0.26);
}

/* ── Pulsing live dot ── */
.sc-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34d399;
  flex-shrink: 0;
  animation: liveDotPulse 1.8s ease-in-out infinite;
}
@keyframes liveDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,0.65); }
  70%  { box-shadow: 0 0 0 7px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

/* ── Date block ── */
.sc-date {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(79,70,229,0.1);
  border: 1px solid rgba(99,102,241,0.22);
  border-radius: 16px;
  padding: 16px 18px;
  min-width: 64px;
  gap: 3px;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.schedule-card:hover .sc-date {
  background: rgba(79,70,229,0.18);
  border-color: rgba(99,102,241,0.4);
}
.schedule-card.sc-live .sc-date {
  background: rgba(52,211,153,0.09);
  border-color: rgba(52,211,153,0.26);
}
.schedule-card.sc-live:hover .sc-date {
  background: rgba(52,211,153,0.16);
  border-color: rgba(52,211,153,0.42);
}
.schedule-card.sc-ended .sc-date {
  background: rgba(248,113,113,0.07);
  border-color: rgba(248,113,113,0.2);
}
.schedule-card.featured .sc-date {
  padding: 20px 22px;
  min-width: 72px;
  border-radius: 18px;
}

.sc-month {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--neon);
  text-transform: uppercase;
}
.schedule-card.sc-live .sc-month    { color: #34d399; }
.schedule-card.sc-ended .sc-month   { color: #fca5a5; }

.sc-day {
  display: block;
  font-family: var(--font-alt);
  font-size: 30px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-top: 2px;
}
.schedule-card.featured .sc-day { font-size: 36px; }

/* ── Info block ── */
.sc-info { flex: 1; min-width: 0; }

.sc-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 7px;
  font-family: var(--font-alt);
  line-height: 1.3;
  padding-right: 90px;
}
.schedule-card.featured .sc-title {
  font-size: 21px;
  margin-bottom: 10px;
}

.sc-desc {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.65;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.schedule-card.featured .sc-desc {
  font-size: 14px;
  -webkit-line-clamp: 3;
}

.sc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.sc-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.2);
  color: var(--purple-3);
  transition: background 0.2s, border-color 0.2s;
}
.sc-tag:hover {
  background: rgba(99,102,241,0.2);
  border-color: rgba(99,102,241,0.4);
}

.sc-soon {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Countdown display ── */
.sc-countdown-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 16px;
  background: rgba(79,70,229,0.09);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 12px;
}
.sc-countdown-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sc-countdown-val {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-alt);
  color: var(--neon);
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
  text-shadow: 0 0 24px rgba(99,102,241,0.55);
}

/* ── Button group ── */
.sc-btn-group,
.qc-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

/* ── Expiry note ── */
.sc-expiry {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ============================================================
   RESOURCES
   ============================================================ */
.resources {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 48px;
}

.resource-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: var(--transition);
  cursor: pointer;
}

.resource-card:hover {
  border-color: rgba(59,130,246,0.4);
  transform: translateY(-4px);
  box-shadow: 0 0 28px rgba(99,102,241,0.22), 0 12px 28px rgba(0,0,0,0.35);
  background: linear-gradient(135deg, rgba(79,70,229,0.08), var(--bg-card));
}

.resource-card.highlight {
  border-color: var(--border-2);
  background: linear-gradient(135deg, rgba(124,58,237,0.1), var(--bg-card));
}

.rc-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(99,102,241,0.1);
  border-radius: 10px;
}

.rc-info { flex: 1; min-width: 0; }
.rc-info h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}
.rc-info p {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}

.rc-arrow {
  font-size: 18px;
  color: var(--purple-3);
  flex-shrink: 0;
  transition: var(--transition);
}
.resource-card:hover .rc-arrow { transform: translate(3px, -3px); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px 40px;
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-brand {
  max-width: 280px;
}
.footer-brand p {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

.footer-links {
  display: flex;
  gap: 60px;
}

.fl-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fl-group h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.fl-group a {
  font-size: 14px;
  color: var(--text-3);
  transition: var(--transition);
}
.fl-group a:hover { color: var(--purple-3); }

/* ============================================================
   QUIZ PAGE
   ============================================================ */
.quiz-page {
  min-height: 100vh;
  padding-top: 64px;
  position: relative;
  overflow: hidden;
}

.quiz-bg-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.quiz-screen {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

/* --- Username Card --- */
.quiz-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--glow), 0 32px 80px rgba(0,0,0,0.5);
}

.quiz-card-icon {
  font-size: 40px;
  margin-bottom: 20px;
  text-align: center;
}

.quiz-card h2 {
  font-family: var(--font-alt);
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  line-height: 1.25;
  margin-bottom: 12px;
}

.quiz-card-desc {
  font-size: 14px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.65;
  margin-bottom: 32px;
}

/* --- Forms --- */
.username-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.username-form label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.3px;
}

.username-form input,
.username-form select {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  padding: 12px 16px;
  outline: none;
  transition: var(--transition);
  -webkit-appearance: none;
}

.username-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b5cf6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.username-form select option {
  background: var(--bg-card);
}

.username-form input:focus,
.username-form select:focus {
  border-color: var(--purple-2);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.18);
}

.input-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.input-error {
  font-size: 12px;
  color: #f87171;
  min-height: 16px;
}

/* --- Quiz Header Bar --- */
.quiz-header-bar {
  position: fixed;
  top: 64px; left: 0; right: 0;
  z-index: 50;
  background: rgba(10,8,18,0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.qhb-left, .qhb-right {
  flex-shrink: 0;
  width: 120px;
}
.qhb-right { text-align: right; }

.qhb-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.qhb-user {
  font-size: 13px;
  font-weight: 600;
  color: var(--purple-3);
  background: rgba(99,102,241,0.1);
  border: 1px solid var(--border);
  padding: 3px 12px;
  border-radius: 99px;
}

.progress-bar-wrap {
  width: 100%;
  max-width: 320px;
  height: 5px;
  background: rgba(99,102,241,0.15);
  border-radius: 99px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--grad);
  border-radius: 99px;
  transition: width 0.4s ease;
}

.progress-text {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Circular timer ring ── */
.timer-ring-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timer-ring {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}

.timer-ring-bg {
  fill: none;
  stroke: rgba(99,102,241,0.15);
  stroke-width: 3.2;
}

.timer-ring-fill {
  fill: none;
  stroke: var(--neon);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 113.1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.95s linear, stroke 0.3s ease;
}
.timer-ring-fill.danger { stroke: #f87171; }

.timer-ring-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: 1px;
}

.timer-ring-num {
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-alt);
  color: var(--neon);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
  line-height: 1;
}
.timer-ring-num.danger { color: #f87171; }

.timer-ring-unit {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  line-height: 1;
}

/* kept for any remaining references */
.timer-display { display: contents; }
.timer-display.danger {}

@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* --- Quiz Main --- */
.quiz-main {
  width: 100%;
  max-width: 700px;
  padding-top: 70px;
}

.question-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: var(--glow-sm), 0 16px 48px rgba(0,0,0,0.4);
}

.question-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.q-number {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.q-category {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(99,102,241,0.12);
  border: 1px solid var(--border);
  color: var(--purple-3);
}

.question-text {
  font-family: var(--font-alt);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 28px;
  color: var(--text);
}

/* Options */
.options-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

.option-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-3);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
}

.option-btn:hover:not(:disabled) {
  border-color: var(--purple-2);
  background: rgba(99,102,241,0.08);
  color: var(--text);
}

.option-btn .opt-letter {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(99,102,241,0.1);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--purple-3);
  flex-shrink: 0;
  transition: var(--transition);
}

.option-btn.selected {
  border-color: var(--purple-2);
  background: rgba(99,102,241,0.12);
  color: var(--text);
}
.option-btn.selected .opt-letter {
  background: var(--purple-1);
  border-color: var(--purple-1);
  color: #fff;
}

.option-btn.correct {
  border-color: #22c55e;
  background: rgba(34,197,94,0.1);
  color: #86efac;
}
.option-btn.correct .opt-letter {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}

.option-btn.wrong {
  border-color: #ef4444;
  background: rgba(239,68,68,0.1);
  color: #fca5a5;
}
.option-btn.wrong .opt-letter {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}

.option-btn:disabled { cursor: not-allowed; }

/* Quiz Nav */
.quiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quiz-score-live {
  font-size: 14px;
  color: var(--text-3);
}
.quiz-score-live strong {
  color: var(--neon);
  font-size: 18px;
}

/* --- Results Card --- */
.results-card {
  max-width: 520px;
  text-align: center;
}

.results-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.results-title {
  font-family: var(--font-alt);
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
}

.results-username {
  font-size: 14px;
  color: var(--text-3);
  margin-bottom: 32px;
}
.results-username strong { color: var(--purple-3); }

.results-score-ring {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 20px;
}

.score-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-bg {
  fill: none;
  stroke: rgba(99,102,241,0.15);
  stroke-width: 8;
}

.ring-fill {
  fill: none;
  stroke: url(#scoreGradient);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.score-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-big {
  font-family: var(--font-alt);
  font-size: 40px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.score-denom {
  font-size: 14px;
  color: var(--text-muted);
}

.score-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--neon);
  margin-bottom: 28px;
}

.results-breakdown {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 32px;
}

.rb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  min-width: 80px;
}

.rb-icon {
  font-size: 16px;
  font-weight: 700;
}
.rb-item.correct .rb-icon { color: #22c55e; }
.rb-item.wrong .rb-icon { color: #ef4444; }
.rb-item.skipped .rb-icon { color: var(--text-muted); }

.rb-val {
  font-size: 22px;
  font-weight: 800;
  font-family: var(--font-alt);
  color: var(--text);
}

.rb-lbl {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.results-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 100px 24px 60px;
    gap: 40px;
  }
  .hero-desc { margin: 0 auto 36px; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { width: 100%; max-width: 420px; }
  .footer-inner { flex-direction: column; gap: 40px; }
  .footer-links { gap: 40px; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .question-card { padding: 28px 20px; }
  .quiz-card { padding: 36px 24px; }
  .quiz-header-bar { padding: 8px 16px; gap: 10px; }
  .qhb-left, .qhb-right { width: auto; }
  .qhb-left .qhb-user { font-size: 11px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 36px; }
  .btn { font-size: 14px; padding: 10px 18px; }
  .schedule-grid { grid-template-columns: 1fr; gap: 16px; }
  .schedule-card { flex-direction: column; gap: 16px; }
  .schedule-card.featured { grid-column: auto; padding: 24px 20px; }
  .schedule-card.featured .sc-title { font-size: 17px; }
  .sc-date { flex-direction: row; min-width: auto; width: 100%; justify-content: flex-start; gap: 10px; padding: 12px 16px; border-radius: 12px; }
  .sc-month { font-size: 14px; letter-spacing: 1px; }
  .sc-day { font-size: 24px; margin-top: 0; }
  .sc-title { padding-right: 0; font-size: 15px; }
  .sc-badge { position: static; margin-bottom: 10px; width: fit-content; }
  .results-breakdown { gap: 10px; }
  .rb-item { padding: 10px 14px; min-width: 70px; }
}

/* ============================================================
   SCHEDULE LOADING STATE
   ============================================================ */
.sched-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  color: var(--text-muted);
  font-size: 14px;
  grid-column: 1 / -1;
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(99,102,241,0.2);
  border-top-color: var(--purple-2);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ============================================================
   COUNTDOWN STYLES (quiz.html wait screen)
   ============================================================ */
.countdown-wrap {
  margin: 28px 0;
  text-align: center;
}
.cd-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.countdown-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cd-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  min-width: 72px;
}
.cd-num {
  font-family: var(--font-alt);
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cd-unit {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}
.cd-sep {
  font-size: 28px;
  font-weight: 800;
  color: var(--border-2);
  margin-bottom: 16px;
}
.wc-times {
  display: flex;
  gap: 20px;
  justify-content: center;
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.wc-times strong { color: var(--text); }
.wc-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--purple-3);
  background: rgba(99,102,241,0.12);
  border: 1px solid var(--border-2);
  padding: 4px 14px;
  border-radius: 99px;
  margin-bottom: 16px;
}
.jc-live-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #4ade80;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.25);
  padding: 4px 14px;
  border-radius: 99px;
  margin-bottom: 16px;
}
.jc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 28px;
  justify-content: center;
}
.jc-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.jc-form label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.jc-form input {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  padding: 12px 16px;
  outline: none;
  transition: var(--transition);
}
.jc-form input:focus { border-color: var(--purple-2); box-shadow: 0 0 0 3px rgba(79,70,229,0.18); }

/* ============================================================
   QUIZ LIST SCREEN
   ============================================================ */
.ql-wrap { max-width: 800px; width: 100%; }
.ql-header { margin-bottom: 36px; text-align: center; }
.quiz-cards-grid { display: flex; flex-direction: column; gap: 14px; }
.qc-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.qc-card:hover { border-color: var(--border-2); box-shadow: var(--glow-sm); transform: translateY(-2px); }
.qc-card.qc-live { border-color: rgba(34,197,94,0.3); }
.qc-card.qc-ended { opacity: 0.6; }
.qc-info { flex: 1; min-width: 0; }
.qc-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.qc-desc  { font-size: 13px; color: var(--text-3); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-meta  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qc-cta   { flex-shrink: 0; }
/* sc-countdown styles live in the schedule block above */

/* ============================================================
   ENDED / NOT FOUND SCREENS
   ============================================================ */
.ended-card { text-align: center; }
.ec-icon { font-size: 48px; margin-bottom: 16px; }
.ec-desc { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.ec-sub  { font-size: 14px; color: var(--text-3); margin-bottom: 28px; }
.ec-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   QUIZ WAIT / JOIN CARD LAYOUT
   ============================================================ */
.wait-card, .join-card, .ended-card {
  max-width: 500px;
  text-align: center;
}
.wait-card h2, .join-card h2 {
  font-family: var(--font-alt);
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 10px;
}
.wc-title, .jc-title {
  font-family: var(--font-alt);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.wc-desc, .jc-desc {
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.6;
  margin-bottom: 16px;
}
.wc-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 16px; }
.wc-tags .sc-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(99,102,241,0.12);
  border: 1px solid var(--border);
  color: var(--purple-3);
}

/* ============================================================
   LEADERBOARD PAGE
   ============================================================ */
.lb-page {
  min-height: 100vh;
  padding-top: 64px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.lb-bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.lb-section { position: relative; z-index: 1; }
.lb-inner { max-width: 860px; margin: 0 auto; padding: 60px 24px; }
.lb-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 28px;
  transition: var(--transition);
}
.lb-back:hover { color: var(--purple-3); }
.lb-quiz-header { margin-bottom: 36px; }
.lb-title {
  font-family: var(--font-alt);
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 800;
  margin-bottom: 8px;
}
.lb-subtitle { font-size: 14px; color: var(--text-3); }
.lb-loading { display: flex; align-items: center; gap: 12px; padding: 40px; color: var(--text-muted); }
.lb-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.lb-table { width: 100%; border-collapse: collapse; }
.lb-table thead tr {
  background: rgba(99,102,241,0.08);
  border-bottom: 1px solid var(--border);
}
.lb-table th {
  padding: 14px 18px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  text-align: left;
}
.lb-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.lb-table tbody tr:last-child { border-bottom: none; }
.lb-table tbody tr:hover { background: rgba(99,102,241,0.04); }
.lb-table tbody tr.lb-me { background: rgba(99,102,241,0.08); }
.lb-table td { padding: 14px 18px; font-size: 14px; color: var(--text); }
.lb-rank { font-family: var(--font-alt); font-size: 18px; font-weight: 700; width: 70px; }
.lb-name { font-weight: 600; }
.lb-you-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  margin-left: 8px;
  background: var(--grad);
  color: #fff;
}
.lb-score-num { font-family: var(--font-alt); font-size: 18px; font-weight: 800; color: var(--text); }
.lb-score-den { font-size: 13px; color: var(--text-muted); margin: 0 4px; }
.lb-pct { font-size: 12px; font-weight: 600; color: var(--purple-3); }
.lb-time { color: var(--text-3); }
.empty-lb { padding: 40px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* Past quizzes grid */
.past-quizzes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.lb-past-section {
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}
.pq-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: var(--transition);
}
.pq-card:hover {
  border-color: rgba(59,130,246,0.35);
  box-shadow: 0 0 20px rgba(99,102,241,0.2), 0 8px 24px rgba(0,0,0,0.3);
  transform: translateY(-4px);
  background: linear-gradient(135deg, rgba(79,70,229,0.06), var(--bg-card));
}
.pq-card.pq-active { border-color: var(--purple-2); background: rgba(99,102,241,0.06); }
.pq-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pq-count { font-size: 12px; color: var(--text-muted); }
.pq-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.pq-date  { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.pq-cta   { font-size: 13px; font-weight: 600; color: var(--purple-3); }
.status-badge { display: inline-block; border-radius: 99px; font-size: 11px; font-weight: 700; padding: 3px 10px; }
.status-badge.status-ended { background: rgba(248,113,113,0.1); color: #fca5a5; border: 1px solid rgba(248,113,113,0.25); }
.status-badge.status-draft { background: rgba(107,114,128,0.1); color: var(--text-muted); border: 1px solid rgba(107,114,128,0.2); }
.status-badge.status-scheduled { background: rgba(99,102,241,0.12); color: var(--purple-3); border: 1px solid var(--border); }
.status-badge.status-live { background: rgba(34,197,94,0.1); color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }

/* ============================================================
   LOADING SPINNERS
   ============================================================ */
.loading-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--text-muted);
  font-size: 14px;
}
.loading-spinner-lg {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(99,102,241,0.2);
  border-top-color: var(--purple-2);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   ADMIN FORM DATETIME INPUTS
   ============================================================ */
.datetime-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.form-check input[type="checkbox"] { accent-color: var(--purple-2); width: 16px; height: 16px; cursor: pointer; }
.form-check span { font-size: 14px; color: var(--text-2); font-weight: 500; }
.form-check small { font-size: 12px; color: var(--text-muted); }

/* ============================================================
   REWARD BANNER — shown on quiz join / wait / results screens
   ============================================================ */

/* Shared reward banner layout (join screen + wait screen + results) */
.jc-reward,
.wc-reward,
.results-reward {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(251,191,36,0.08), rgba(251,191,36,0.04));
  border: 1px solid rgba(251,191,36,0.28);
  box-shadow: 0 0 18px rgba(251,191,36,0.08);
}

.reward-icon {
  font-size: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(251,191,36,0.5));
  animation: rewardBob 2s ease-in-out infinite;
}
@keyframes rewardBob {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%       { transform: rotate(8deg) scale(1.12); }
}

.reward-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.reward-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fbbf24;
  opacity: 0.8;
}

.reward-text {
  font-size: 14px;
  font-weight: 600;
  color: #fde68a;
  line-height: 1.4;
}

/* Compact reward strip on schedule cards (home page) */
.sc-reward-strip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 6px 14px;
  border-radius: 99px;
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.22);
  width: fit-content;
  box-shadow: 0 0 16px rgba(251,191,36,0.08);
}
.sc-reward-icon { font-size: 13px; }
.sc-reward-text {
  font-size: 12px;
  font-weight: 600;
  color: #fde68a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* Compact reward on quiz list cards (quiz.html) */
.qc-reward {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 99px;
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.22);
}
.qc-reward .reward-icon { font-size: 13px; animation: none; filter: none; }
.qc-reward .reward-text {
  font-size: 12px;
  font-weight: 600;
  color: #fde68a;
}

/* Reward tag in admin quiz list */
.qr-tag-reward {
  background: rgba(251,191,36,0.1) !important;
  border-color: rgba(251,191,36,0.25) !important;
  color: #fbbf24 !important;
}

/* ============================================================
   LOGO NAME — "PortaldotQuiz" text next to logo image
   ============================================================ */
.logo-name {
  font-family: var(--font-alt);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-left: 10px;
  letter-spacing: -0.3px;
  white-space: nowrap;
}
.logo-accent {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   HERO GRID BACKGROUND + FLOATING BADGES
   ============================================================ */
.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 100%);
}

.vc-live-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #4ade80;
  margin-bottom: 14px;
  padding: 5px 10px;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 99px;
  width: fit-content;
}

.vc-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  animation: pulse 1.5s ease-in-out infinite;
}

.vc-floating {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  white-space: nowrap;
  animation: floatBob 3s ease-in-out infinite;
}
.vc-float-1 { bottom: -18px; left: -60px; animation-delay: 0s; }
.vc-float-2 { top: -14px; right: -50px; animation-delay: 1.5s; }

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

/* ============================================================
   BTN GLOW — glowing primary button variant (logo-matched)
   ============================================================ */
.btn-glow {
  box-shadow: 0 0 24px rgba(79,70,229,0.5), 0 0 48px rgba(59,130,246,0.25), 0 4px 20px rgba(79,70,229,0.4);
}
.btn-glow:hover {
  box-shadow: 0 0 40px rgba(79,70,229,0.65), 0 0 70px rgba(59,130,246,0.4), 0 10px 36px rgba(59,130,246,0.5);
  transform: translateY(-3px) scale(1.03);
}

/* ============================================================
   COOL ANIMATIONS
   ============================================================ */

/* ── Animated flowing gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, #7c3aed, #4f46e5, #3b82f6, #818cf8, #60a5fa, #7c3aed);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease infinite;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Fade-in-up entrance ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

/* Navbar entrance */
.navbar { animation: fadeInDown 0.6s cubic-bezier(0.16,1,0.3,1) both; }

/* Home hero stagger */
.home-hero-inner .hero-badge        { animation: fadeInUp 0.65s cubic-bezier(0.16,1,0.3,1) 0.05s both; }
.home-hero-inner .home-hero-title   { animation: fadeInUp 0.7s  cubic-bezier(0.16,1,0.3,1) 0.2s  both; }
.home-hero-inner .home-hero-desc    { animation: fadeInUp 0.7s  cubic-bezier(0.16,1,0.3,1) 0.35s both; }
.home-hero-inner .home-hero-actions { animation: fadeInUp 0.7s  cubic-bezier(0.16,1,0.3,1) 0.5s  both; }

/* About hero stagger */
.ab-hero-inner .section-label { animation: fadeInUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.1s  both; }
.ab-hero-inner .ab-title      { animation: fadeInUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.22s both; }
.ab-hero-inner .ab-subtitle   { animation: fadeInUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.36s both; }

/* ── Orb drift animations ── */
@keyframes orbDrift1 {
  0%   { transform: translate(0,   0)   scale(1); }
  25%  { transform: translate(60px,  40px) scale(1.1); }
  50%  { transform: translate(30px,  80px) scale(0.95); }
  75%  { transform: translate(-30px, 30px) scale(1.05); }
  100% { transform: translate(0,   0)   scale(1); }
}
@keyframes orbDrift2 {
  0%   { transform: translateY(-50%) translate(0,  0) scale(1); }
  33%  { transform: translateY(-50%) translate(-60px, -40px) scale(1.12); }
  66%  { transform: translateY(-50%) translate(20px,  40px) scale(0.9); }
  100% { transform: translateY(-50%) translate(0,  0) scale(1); }
}
@keyframes orbDrift3 {
  0%   { transform: translate(0,   0) scale(1); }
  40%  { transform: translate(-50px, -30px) scale(1.08); }
  80%  { transform: translate(40px,   20px) scale(0.93); }
  100% { transform: translate(0,   0) scale(1); }
}

.orb-1 { animation: orbDrift1 18s ease-in-out infinite; }
.orb-2 { animation: orbDrift2 22s ease-in-out infinite; }
.orb-3 { animation: orbDrift3 15s ease-in-out infinite reverse; }

/* ── Floating star particles ── */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.hero-particles canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Section label shimmer sweep ── */
.section-label::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-180%) skewX(-18deg);
  animation: labelShimmer 4s ease-in-out infinite;
}
@keyframes labelShimmer {
  0%   { transform: translateX(-180%) skewX(-18deg); }
  40%  { transform: translateX(300%) skewX(-18deg); }
  100% { transform: translateX(300%) skewX(-18deg); }
}

/* ── Magnetic tilt (applied via JS) ── */
.tilt-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  will-change: transform;
  transform-style: preserve-3d;
}

/* ── Scroll reveal (extended) ── */
.reveal-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.reveal-item.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── About topic chip pop-in ── */
.ab-topic.revealed {
  animation: fadeInScale 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ── Glowing step number ── */
.ab-step-num { text-shadow: 0 0 14px rgba(99,102,241,0.5); }

/* ── Nav logo spin dot on hover ── */
@keyframes dotSpin {
  to { transform: rotate(360deg); }
}

/* ── Card border glow pulse ── */
@keyframes borderGlow {
  0%, 100% {
    box-shadow:
      0 4px 32px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.04);
  }
  50% {
    box-shadow:
      0 4px 32px rgba(0,0,0,0.45),
      0 0 44px rgba(79,70,229,0.2),
      inset 0 1px 0 rgba(255,255,255,0.04);
  }
}
@keyframes liveGlowPulse {
  0%, 100% {
    box-shadow:
      0 4px 32px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.04);
  }
  50% {
    box-shadow:
      0 4px 32px rgba(0,0,0,0.45),
      0 0 56px rgba(52,211,153,0.24),
      inset 0 1px 0 rgba(255,255,255,0.04);
  }
}
/* continuous box-shadow animations removed — they repainted every frame */

/* ── Countdown number flip hint ── */
.cd-num { transition: transform 0.2s ease, opacity 0.2s ease; }
.cd-num.tick {
  animation: numTick 0.25s ease;
}
@keyframes numTick {
  0%   { transform: translateY(-6px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* ============================================================
   CURSOR GLOW
   ============================================================ */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.09) 0%, rgba(59,130,246,0.04) 40%, transparent 70%);
  pointer-events: none;
  z-index: 9;
  mix-blend-mode: screen;
  will-change: transform;
  transition: opacity 0.3s ease;
}

/* ============================================================
   BUTTON RIPPLE
   ============================================================ */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transform: scale(0);
  animation: rippleExpand 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}
@keyframes rippleExpand {
  to { transform: scale(1); opacity: 0; }
}

/* ============================================================
   TEXT SCRAMBLE (no CSS needed — handled purely in JS)
   ============================================================ */

/* ============================================================
   NAV LINK STAGGER ENTRANCE
   ============================================================ */
@keyframes navLinkIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   LOGO GLITCH HOVER
   ============================================================ */
@keyframes glitchShift {
  0%  { clip-path: inset(0 0 100% 0); transform: translateX(0); }
  10% { clip-path: inset(10% 0 60% 0); transform: translateX(-4px); filter: hue-rotate(80deg); }
  20% { clip-path: inset(50% 0 20% 0); transform: translateX(4px); filter: hue-rotate(-80deg); }
  30% { clip-path: inset(30% 0 40% 0); transform: translateX(-2px); }
  40% { clip-path: inset(0 0 0 0);     transform: translateX(0); filter: none; }
  100%{ clip-path: inset(0 0 0 0);     transform: translateX(0); }
}

/* ============================================================
   STAT COUNTER (about page)
   ============================================================ */
.ab-stat-num {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.ab-stat-num.counting {
  animation: statPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes statPop {
  0%   { transform: scale(0.7); opacity: 0.4; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   HOW IT WORKS SECTION
   ============================================================ */
.how-it-works {
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 56px;
}

.step-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  position: relative;
  transition: var(--transition);
  overflow: hidden;
}
.step-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.step-card:hover {
  border-color: rgba(59,130,246,0.35);
  transform: translateY(-6px);
  box-shadow: 0 0 28px rgba(99,102,241,0.22), 0 14px 36px rgba(0,0,0,0.4);
}
.step-card:hover::before { transform: scaleX(1); }
.step-card:hover .step-num {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.step-card:hover .step-icon { transform: scale(1.15) rotate(-5deg); display: inline-block; }

.step-num {
  font-family: var(--font-alt);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--neon);
  margin-bottom: 12px;
}

.step-icon {
  font-size: 32px;
  margin-bottom: 14px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}

.step-card h3 {
  font-family: var(--font-alt);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

.step-card p {
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.65;
}

/* ============================================================
   FEATURE ICON WRAP
   ============================================================ */
.feature-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: rgba(99,102,241,0.1);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  transition: var(--transition);
  position: relative;
  z-index: 1;
}
.feature-card:hover .feature-icon-wrap {
  background: rgba(59,130,246,0.15);
  border-color: rgba(59,130,246,0.4);
  box-shadow: 0 0 18px rgba(99,102,241,0.35);
  transform: scale(1.1) rotate(-6deg);
}
.feature-icon { font-size: 24px; margin-bottom: 0; }

/* ============================================================
   LEADERBOARD TEASER SECTION
   ============================================================ */
.lb-teaser {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.lb-teaser-inner {
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}

.lb-teaser-content {
  flex: 1;
  min-width: 280px;
}

.lb-teaser-preview {
  flex-shrink: 0;
  width: 320px;
}

.lb-preview-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--glow-sm);
  transition: var(--transition);
}
.lb-preview-card:hover {
  border-color: rgba(59,130,246,0.35);
  box-shadow: 0 0 32px rgba(99,102,241,0.25), 0 0 64px rgba(59,130,246,0.15);
  transform: translateY(-3px);
}

.lbp-header {
  font-family: var(--font-alt);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.lbp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.lbp-row:last-of-type { margin-bottom: 0; }
.lbp-gold   { background: rgba(251,191,36,0.07); border: 1px solid rgba(251,191,36,0.18); }
.lbp-silver { background: rgba(148,163,184,0.07); border: 1px solid rgba(148,163,184,0.15); }
.lbp-bronze { background: rgba(180,120,78,0.07);  border: 1px solid rgba(180,120,78,0.15); }

.lbp-rank  { font-size: 18px; flex-shrink: 0; }
.lbp-name  { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.lbp-score { font-size: 13px; font-weight: 700; color: var(--purple-3); }

.lbp-cta {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  text-align: center;
}

/* ============================================================
   FOOTER SOCIALS + ADMIN LINK
   ============================================================ */
.footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(99,102,241,0.1);
  border: 1px solid var(--border);
  font-size: 15px;
  color: var(--text-2);
  transition: var(--transition);
  text-decoration: none;
}
.social-link:hover {
  background: rgba(99,102,241,0.2);
  border-color: var(--border-2);
  color: var(--purple-3);
  transform: translateY(-2px);
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.footer-admin-link {
  font-size: 12px;
  color: var(--text-muted);
  transition: var(--transition);
  opacity: 0.5;
}
.footer-admin-link:hover { color: var(--purple-3); opacity: 1; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-page {
  min-height: 100vh;
  padding-top: 64px;
  position: relative;
  overflow: hidden;
}

/* Hero */
.ab-hero {
  padding: 80px 24px 64px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.ab-hero-inner {
  max-width: 680px;
  margin: 0 auto;
}
.ab-title {
  font-family: var(--font-alt);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  margin: 12px 0 20px;
}
.ab-subtitle {
  font-size: 17px;
  color: var(--text-3);
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto;
}

/* Section wrapper */
.ab-section {
  position: relative;
  z-index: 1;
}
.ab-section-alt {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ab-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 80px 24px;
}

/* Heading used inside sections */
.ab-heading {
  font-family: var(--font-alt);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  margin: 10px 0 18px;
}
.ab-body {
  font-size: 15px;
  color: var(--text-3);
  line-height: 1.8;
  margin-bottom: 14px;
  max-width: 520px;
}
.ab-body-center {
  text-align: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Two-column layout */
.ab-two-col {
  display: flex;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
}
.ab-two-col-flip { flex-direction: row-reverse; }
.ab-text-block { flex: 1; min-width: 260px; }
.ab-visual-block { flex-shrink: 0; width: 320px; }

/* Stats card (inside visual block) */
.ab-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--glow-sm);
  transition: var(--transition);
}
.ab-stat-card:hover {
  border-color: rgba(59,130,246,0.35);
  box-shadow: 0 0 32px rgba(99,102,241,0.22), 0 12px 32px rgba(0,0,0,0.35);
  transform: translateY(-4px);
}
.ab-stat-row {
  display: flex;
  align-items: center;
  gap: 24px;
}
.ab-stat { text-align: center; flex: 1; }
.ab-stat-num {
  display: block;
  font-family: var(--font-alt);
  font-size: 28px;
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 4px;
}
.ab-stat-lbl {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ab-stat-divider {
  width: 1px;
  height: 48px;
  background: var(--border);
  flex-shrink: 0;
}

/* How it works steps */
.ab-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.ab-step {
  flex: 1;
  min-width: 200px;
  max-width: 280px;
  text-align: center;
  padding: 32px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: var(--transition);
  position: relative;
}
.ab-step:hover {
  border-color: rgba(59,130,246,0.35);
  transform: translateY(-5px);
  box-shadow: 0 0 24px rgba(99,102,241,0.2), 0 12px 28px rgba(0,0,0,0.3);
}
.ab-step-arrow {
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 20px;
  color: var(--border-2);
  flex-shrink: 0;
  margin-top: 60px;
}
.ab-step-num {
  font-family: var(--font-alt);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 14px;
}
.ab-step h3 {
  font-family: var(--font-alt);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.3;
}
.ab-step p {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.7;
}

/* Mission card */
.ab-mission-card {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 40px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}
.ab-mission-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
}
.ab-mission-card:hover {
  border-color: rgba(59,130,246,0.3);
  box-shadow: 0 0 40px rgba(99,102,241,0.18), 0 16px 40px rgba(0,0,0,0.3);
}
.ab-mission-icon {
  font-size: 40px;
  margin-bottom: 16px;
  animation: floatBob 3s ease-in-out infinite;
  display: inline-block;
}

/* Topics grid */
.ab-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.ab-topic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  transition: var(--transition);
  cursor: default;
}
.ab-topic:hover {
  border-color: rgba(59,130,246,0.4);
  background: rgba(99,102,241,0.08);
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(99,102,241,0.15);
}
.ab-topic-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
}

/* External links block */
.ab-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}
.ab-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  transition: var(--transition);
  width: fit-content;
}
.ab-link:hover {
  border-color: rgba(59,130,246,0.4);
  color: var(--text);
  transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(99,102,241,0.15);
}
.ab-link-icon { font-size: 15px; }
.ab-link-arr { margin-left: auto; color: var(--purple-3); font-size: 13px; }

/* Logo card (visual block in platform section) */
.ab-logo-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align: center;
  transition: var(--transition);
}
.ab-logo-card:hover {
  border-color: rgba(59,130,246,0.35);
  box-shadow: 0 0 32px rgba(99,102,241,0.22);
  transform: translateY(-4px);
}
.ab-logo-big {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 18px;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 16px rgba(99,102,241,0.45));
}
.ab-logo-name {
  font-family: var(--font-alt);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.ab-logo-sub {
  font-size: 13px;
  color: var(--text-muted);
}

/* CTA section */
.ab-cta-section {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
.ab-cta-card {
  text-align: center;
  padding: 24px 0;
}
.ab-cta-title {
  font-family: var(--font-alt);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
}
.ab-cta-sub {
  font-size: 15px;
  color: var(--text-3);
  margin-bottom: 32px;
}
.ab-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   HOME HERO (minimal)
   ============================================================ */
.home-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 80px;
  overflow: hidden;
}

.home-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.28);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 28px;
  letter-spacing: 0.02em;
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon);
  animation: pulse 2s infinite;
}

.home-hero-title {
  font-family: var(--font-alt);
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.home-hero-desc {
  font-size: 17px;
  color: var(--text-3);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 520px;
}

.home-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   RESPONSIVE ADDITIONS
   ============================================================ */
@media (max-width: 600px) {
  .countdown-display { gap: 4px; }
  .cd-block { min-width: 56px; padding: 10px; }
  .cd-num { font-size: 28px; }
  .datetime-row { grid-template-columns: 1fr; }
  .lb-table th, .lb-table td { padding: 10px 12px; font-size: 13px; }
  .wc-times { flex-direction: column; gap: 8px; align-items: center; }
  .qc-card { flex-direction: column; align-items: flex-start; }
  .lb-teaser-inner { flex-direction: column; }
  .lb-teaser-preview { width: 100%; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .vc-float-1, .vc-float-2 { display: none; }
  .logo-name { font-size: 15px; }
}

@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    min-height: auto;
    padding: 100px 24px 60px;
    gap: 40px;
  }
  .hero-visual { width: 100%; max-width: 420px; margin: 0 auto; }
  .vc-float-1 { left: -20px; }
  .vc-float-2 { right: -20px; }
  .hero-grid-bg { display: none; }

  /* About page */
  .ab-two-col,
  .ab-two-col-flip { flex-direction: column; gap: 40px; }
  .ab-visual-block { width: 100%; }
  .ab-stat-card { width: 100%; }
  .ab-steps { flex-direction: column; align-items: center; gap: 16px; }
  .ab-step-arrow { display: none; }
  .ab-step { max-width: 100%; width: 100%; }
  .ab-mission-card { padding: 40px 24px; }
  .ab-logo-card { width: 100%; }
  .ab-inner { padding: 60px 20px; }
}