/*
 * BROTHERHOOD — Complete Design System
 * Clean · Organized · Premium Gaming
 * Author: BrotherHood Dev Team
 */

/* ─────────────────────────────────────────
   GOOGLE FONTS
──────────────────────────────────────────*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Orbitron:wght@600;700;800;900&family=Rajdhani:wght@500;600;700&family=Cairo:wght@400;600;700;800&display=swap');

/* ─────────────────────────────────────────
   TOKENS
──────────────────────────────────────────*/
:root {
  /* BG */
  --c-bg:        #070709;
  --c-surface:   #0b0b10;
  --c-elevated:  #111118;
  --c-card:      rgba(10, 10, 18, 0.92);
  --c-border:    rgba(255,255,255,0.07);
  --c-border-md: rgba(255,255,255,0.13);

  /* Red — Blood Red. Deep, aggressive, dominant */
  --c-red:       #8B0000;
  --c-red-bright:#c0392b;
  --c-red-dim:   rgba(139,0,0,0.15);
  --c-red-bd:    rgba(139,0,0,0.45);
  --c-red-glow:  rgba(192,57,43,0.55);

  /* Gold — Prestige Accent. Ranks, status, hover highlights */
  --c-gold:      #c9a227;
  --c-gold-light:#eab308;
  --c-gold-dim:  rgba(201,162,39,0.14);
  --c-gold-bd:   rgba(201,162,39,0.38);
  --c-gold-glow: rgba(201,162,39,0.50);

  /* Text — Maximum Readability */
  --c-text:      #ffffff;
  --c-text-2:    #d1d5db;
  --c-text-3:    #9ca3af;

  /* Radius — Sharp Esports: zero tolerance for soft corners */
  --r-sm: 2px;
  --r-md: 2px;
  --r-lg: 2px;
  --r-xl: 2px;
  --r-pill: 2px;

  /* Transition */
  --t: 0.22s cubic-bezier(0.4,0,0.2,1);
}

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

html {
  scroll-behavior: smooth;
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Inter', 'Cairo', sans-serif;
  background: var(--c-bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
    linear-gradient(rgba(139, 0, 0, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 0, 0, 0.028) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(139, 0, 0, 0.10) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(201,162,39,0.04) 0%, transparent 45%);
  background-size: 300px 300px, 40px 40px, 40px 40px, 100% 100%, 100% 100%;
  background-attachment: fixed;
  overflow-x: hidden;
  line-height: 1.7;
  min-height: 100vh;
}

img { max-width:100%; display:block; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }

a {
  text-decoration:none;
  color:inherit;
  transition:color var(--t), text-decoration-color var(--t);
}
p a, .feature-item a, .job-item a, .about-text a {
  color:var(--c-gold);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(234,179,8,0.4);
}
p a:hover, .feature-item a:hover, .job-item a:hover, .about-text a:hover {
  color:#facc15;
  text-decoration-color:#facc15;
}

/* ─────────────────────────────────────────
   SCROLLBAR
──────────────────────────────────────────*/
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--c-bg); }
::-webkit-scrollbar-thumb {
  background: var(--c-elevated);
  border-radius:4px;
  border:1px solid var(--c-red-bd);
}
::-webkit-scrollbar-thumb:hover { background:var(--c-red); }

/* ─────────────────────────────────────────
   LAYOUT
──────────────────────────────────────────*/
.container {
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

.section {
  padding: 88px 0;
}

/* ─────────────────────────────────────────
   PARTICLE CANVAS
──────────────────────────────────────────*/
#particle-canvas {
  position:fixed; top:0; left:0;
  width:100vw; height:100vh;
  z-index:1; pointer-events:none;
  opacity: 0.4;
}

/* ─────────────────────────────────────────
   TYPOGRAPHY UTILITIES
──────────────────────────────────────────*/
.eyebrow {
  display:inline-block;
  font-family:'Orbitron',sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--c-red);
  margin-bottom:10px;
}
.eyebrow.gold { color:var(--c-gold); }

.heading {
  font-family:'Orbitron',sans-serif;
  font-weight:800;
  font-size:clamp(1.4rem,2.5vw,2rem);
  color:var(--c-text);
  line-height:1.15;
}

.sub {
  color:var(--c-text-2);
  font-size:0.95rem;
  line-height:1.7;
  max-width:560px;
}

/* ─────────────────────────────────────────
   BUTTONS (Sharp Esports Cut Corners)
──────────────────────────────────────────*/
.btn {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:12px 24px;
  border-radius:0;
  font-family:'Orbitron',sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  transition:transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t);
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.btn i { font-size:13px; flex-shrink:0; }

/* Primary — Blood Red */
.btn-primary {
  background: linear-gradient(135deg,#5a0000,#8B0000);
  color:#fff;
  border:1px solid rgba(139,0,0,0.6);
  box-shadow:0 4px 20px rgba(139,0,0,0.5);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.btn-primary:hover {
  background: linear-gradient(135deg,#7a0000,#c0392b);
  border-color:rgba(192,57,43,0.7);
  transform:translateY(-2px);
  box-shadow:0 0 30px rgba(192,57,43,0.65), 0 0 0 1px rgba(201,162,39,0.2), 0 6px 24px rgba(0,0,0,0.5);
}

/* Ghost */
.btn-ghost {
  background:rgba(18, 18, 30, 0.6);
  color:var(--c-text);
  border:1px solid var(--c-border-md);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover {
  border-color:var(--c-red-bd);
  background:rgba(220,38,38,0.12);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(220,38,38,0.2);
}

/* Gold Ghost — Secondary CTA (Whitelist) */
.btn-gold {
  background: transparent;
  color: var(--c-gold);
  border: 1px solid var(--c-gold-bd);
  box-shadow: inset 0 0 0 0 var(--c-gold-dim);
  transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t), color var(--t);
}
.btn-gold:hover {
  background: var(--c-gold-dim);
  border-color: var(--c-gold);
  color: var(--c-gold-light);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(201,162,39,0.25), 0 4px 18px rgba(0,0,0,0.4);
}

/* Discord — Official blurple brand color */
.btn-discord {
  background: linear-gradient(135deg,#404eed,#5865F2);
  color:#fff;
  border:1px solid rgba(88,101,242,0.6);
  box-shadow:0 4px 18px rgba(88,101,242,0.3);
}
.btn-discord:hover {
  background: linear-gradient(135deg,#5865F2,#7289da);
  border-color:rgba(88,101,242,0.9);
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(88,101,242,0.5);
}

/* ─────────────────────────────────────────
   CARDS (Dark Glassmorphism & Micro-animations)
──────────────────────────────────────────*/
.card {
  background:var(--c-card);
  border:1px solid var(--c-border-md);
  border-radius:2px;
  backdrop-filter:blur(16px);
  transition:border-color var(--t), transform var(--t), box-shadow var(--t), border-left var(--t);
  position:relative;
  box-shadow:0 12px 36px rgba(0, 0, 0, 0.45);
}
.card::before {
  content:'';
  position:absolute; top:0; left:0; width:3px; height:0;
  background:var(--c-red);
  transition:height var(--t);
}
.card:hover {
  border-color:var(--c-red-bd);
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,0.7), 0 0 25px rgba(220,38,38,0.2);
}
.card:hover::before {
  height:100%;
}
.card-gold { border-color:var(--c-gold-bd); }
.card-gold:hover {
  border-color:rgba(234,179,8,0.5);
  box-shadow:0 16px 40px rgba(0,0,0,0.7), 0 0 25px rgba(234,179,8,0.2);
}

/* ─────────────────────────────────────────
   BADGE / TAG
──────────────────────────────────────────*/
.badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 10px;
  border-radius:var(--r-pill);
  font-family:'Orbitron',sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.badge-red  { background:var(--c-red-dim); border:1px solid var(--c-red-bd); color:var(--c-red-bright); }
.badge-gold { background:var(--c-gold-dim); border:1px solid var(--c-gold-bd); color:var(--c-gold-light); }
/* Green badge repurposed as gold — keep class for compat */
.badge-green{ background:var(--c-gold-dim); border:1px solid var(--c-gold-bd); color:var(--c-gold); }
.badge-indigo{ background:rgba(99,102,241,0.1); border:1px solid rgba(99,102,241,0.25); color:#818cf8; }

/* ─────────────────────────────────────────
   NAVBAR
──────────────────────────────────────────*/
.navbar {
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  height:68px;
  background:rgba(10,10,22,0.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--c-border);
}

.navbar .container {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* Center mode toggle in navbar */
.nav-mode-toggle {
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* Compact nav buttons */
.nav-btn {
  font-size:10px !important;
  padding:7px 13px !important;
}

/* Logo */
.nav-logo {
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.nav-logo-img {
  width:42px; height:42px;
  object-fit:contain;
  border:none;
  background:none;
  padding:0;
  border-radius:0;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}
.nav-logo-text {
  font-family:'Orbitron',sans-serif;
  font-weight:800;
  font-size:13px;
  letter-spacing:0.08em;
  color:#fff;
  line-height:1;
}
.nav-logo-text span { color:var(--c-red); }
.nav-logo-sub {
  font-family:'Orbitron',sans-serif;
  font-size:8.5px;
  letter-spacing:0.2em;
  color:var(--c-text-3);
  text-transform:uppercase;
  margin-top:3px;
}

/* Nav links */
.nav-links {
  display:flex;
  align-items:center;
  gap:6px;
  list-style:none;
}

.nav-link {
  font-family:'Orbitron',sans-serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--c-text-2);
  padding:6px 10px;
  border-radius:var(--r-sm);
  transition:color var(--t), background var(--t);
}
.nav-link:hover { color:var(--c-text); background:rgba(255,255,255,0.05); }
.nav-link.active { color:#fff; }

/* Nav right CTA area */
.nav-right {
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.online-pill {
  display:none; /* Removed from navbar per design update */
}
.online-dot {
  width:7px; height:7px;
  border-radius:50%;
  background:var(--c-gold);
  position:relative;
  flex-shrink:0;
}
.online-dot::before {
  content:'';
  position:absolute; inset:-3px;
  border-radius:50%;
  background:var(--c-gold);
  animation:pulse-ring 2s ease infinite;
  opacity:0.4;
}
@keyframes pulse-ring {
  0%   { transform:scale(1); opacity:0.5; }
  60%  { transform:scale(2); opacity:0; }
  100% { transform:scale(1); opacity:0; }
}

/* Pulsing Status Dot — Gold (used for arena/server status) */
.pulse-dot-green {
  display:inline-block;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--c-gold);
  box-shadow:0 0 10px var(--c-gold);
  animation:pulseDot 1.5s infinite cubic-bezier(0.4, 0, 0.6, 1);
  flex-shrink:0;
}
@keyframes pulseDot {
  0%, 100% { opacity:1; transform:scale(1); box-shadow:0 0 10px var(--c-gold); }
  50% { opacity:0.35; transform:scale(0.85); box-shadow:0 0 3px var(--c-gold); }
}

/* Arena Status Badge — Gold prestige theme */
.arena-status-badge {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:rgba(201,162,39,0.08);
  border:1px solid rgba(201,162,39,0.28);
  border-left:3px solid var(--c-gold);
  border-radius:2px;
  font-family:'Orbitron',sans-serif;
  font-size:9.5px;
  font-weight:800;
  color:var(--c-gold);
  letter-spacing:0.08em;
  margin-bottom:16px;
}

/* Hamburger */
.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  padding:8px;
  border-radius:var(--r-sm);
  border:1px solid var(--c-border-md);
  background:rgba(255,255,255,0.04);
}
.hamburger span {
  display:block;
  width:20px; height:2px;
  background:var(--c-text-2);
  border-radius:2px;
  transition:var(--t);
}

/* Mobile drawer */
.mobile-nav {
  display:none;
  position:fixed;
  top:66px; left:0; right:0;
  z-index:99;
  background:rgba(13,13,26,0.97);
  border-bottom:1px solid var(--c-border);
  padding:16px 24px 20px;
}
.mobile-nav.open { display:block; }
.mobile-nav .nav-link {
  display:block;
  padding:10px 4px;
  font-size:11px;
  border-bottom:1px solid var(--c-border);
}
.mobile-nav .nav-link:last-child { border-bottom:none; }
.mobile-nav .mobile-btns {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px;
}

/* ─────────────────────────────────────────
   HERO
──────────────────────────────────────────*/
.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.hero-bg {
  position:absolute; inset:0;
  background-image:url('../images/hero-bg-v2.png');
  background-size:cover;
  background-position:center;
}
/* PvP variant */
.pvp-bg {
  background-image:url('../images/hero-bg-pvp.png');
  background-size:cover;
  background-position:center;
  filter:brightness(0.45) saturate(1.1);
  z-index:0;
}
.hero-bg-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(10,10,18,0.75) 0%, rgba(10,10,18,0.45) 50%, rgba(10,10,18,0.85) 100%);
  z-index:0;
}
/* Subtle grid overlay */
.hero-grid {
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.018) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.5) 75%,transparent);
}

.hero .container {
  position:relative;
  z-index:2;
  padding-top:90px;
  padding-bottom:60px;
  display:grid;
  grid-template-columns:1fr 420px;
  gap:64px;
  align-items:center;
}

/* Left — Text */
.hero-text {}
.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0;
  border-radius:0;
  background:none;
  border:none;
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--c-red);
  margin-bottom:18px;
  filter:drop-shadow(0 0 10px rgba(220,38,38,0.5));
}
.hero-badge i { font-size:13px; color:var(--c-gold); }

.hero-title {
  font-family:'Orbitron',sans-serif;
  font-weight:900;
  font-size:clamp(2rem,4vw,3.25rem);
  line-height:1.08;
  color:#fff;
  margin-bottom:18px;
  text-transform:uppercase;
  letter-spacing:-0.01em;
}
/* ROLEPLAY — solid metallic silver, sharp, no cheap gradient */
.hero-title .accent {
  color: #c8ccd2;
  -webkit-text-fill-color: #c8ccd2;
  text-shadow: 0 2px 12px rgba(200,204,210,0.15);
}

.hero-desc {
  color:var(--c-text-2);
  font-size:0.98rem;
  line-height:1.75;
  margin-bottom:32px;
  max-width:520px;
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:44px;
}

/* Stats row — label top, value bottom, chamfered cards */
.hero-stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.hero-stat {
  background:rgba(8, 8, 14, 0.95);
  border:1px solid var(--c-border-md);
  padding:16px 18px 14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
  transition:all var(--t);
  box-shadow:0 8px 28px rgba(0,0,0,0.6);
  /* Chamfered top-right corner */
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  position:relative;
}
.hero-stat::after {
  content:'';
  position:absolute;
  top:0; right:0;
  width:10px; height:10px;
  background:var(--c-red);
  clip-path:polygon(0 0,100% 100%,100% 0);
  opacity:0.6;
  transition:opacity var(--t);
}
.hero-stat:hover {
  border-color:var(--c-red-bd);
  transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(0,0,0,0.8), 0 0 16px rgba(139,0,0,0.2);
}
.hero-stat:hover::after { opacity:1; }
/* Label — small descriptor at TOP */
.hero-stat-label {
  font-family:'Orbitron',sans-serif;
  font-size:8px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--c-text-3);
  display:block;
  order:-1;
}
/* Value — large, dominant, at BOTTOM */
.hero-stat-value {
  font-family:'Rajdhani','Orbitron',sans-serif;
  font-weight:900;
  font-size:1.45rem;
  color:#fff;
  display:flex;
  align-items:center;
  gap:6px;
  line-height:1;
}

/* Right — Server card */
.hero-card {
  background:rgba(8,8,15,0.95);
  border:1px solid rgba(139,0,0,0.40);
  border-radius:2px;
  padding:32px;
  backdrop-filter:blur(20px);
  box-shadow:0 28px 70px rgba(0,0,0,0.8), 0 0 40px rgba(139,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Hide feature tags in hero card — reduces cognitive load */
.hero-card .server-feature-tags { display:none; }

.server-card-header {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  padding-bottom:18px;
  border-bottom:1px solid var(--c-border);
}
.server-logo {
  width:52px; height:52px;
  object-fit:contain;
  border:none;
  background:none;
  padding:0;
  border-radius:0;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.6));
}
.server-title {
  font-family:'Orbitron',sans-serif;
  font-weight:800;
  font-size:14px;
  color:#fff;
  margin-bottom:3px;
}
.server-subtitle {
  font-size:11px;
  color:var(--c-text-2);
  font-family:'Orbitron',sans-serif;
  letter-spacing:0.06em;
}

.server-ip-row {
  background:rgba(0,0,0,0.6);
  border:1px solid rgba(139,0,0,0.25);
  border-radius:var(--r-md);
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
  cursor:default;
  user-select:none;
  transition:border-color var(--t), background var(--t);
}
.server-ip-row:hover {
  border-color:rgba(201,162,39,0.35);
  background:rgba(0,0,0,0.7);
}
.server-ip-label {
  display:flex;
  align-items:center;
  gap:7px;
}
.server-ip-label .fa-lock {
  font-size:9px;
  color:var(--c-text-3);
  flex-shrink:0;
}
.server-ip {
  font-family:'Courier New',Courier,monospace;
  font-size:11.5px;
  color:var(--c-gold);
  letter-spacing:0.04em;
}
.copy-btn {
  color:var(--c-text-3);
  transition:color var(--t), background var(--t);
  padding:4px 8px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  display:flex;
  align-items:center;
  gap:5px;
  font-family:'Orbitron',sans-serif;
  font-size:8px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.copy-btn:hover { color:var(--c-gold); background:rgba(201,162,39,0.08); border-color:rgba(201,162,39,0.25); }

.server-feature-tags {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:20px;
}
.ftag {
  font-family:'Orbitron',sans-serif;
  font-size:9px;
  font-weight:600;
  letter-spacing:0.08em;
  padding:3px 9px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,0.05);
  border:1px solid var(--c-border-md);
  color:var(--c-text-2);
}

.server-card-actions {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.server-card-actions .btn {
  width:100%;
  justify-content:center;
  padding:14px 20px;
}
/* Primary CTA is the hero — give it more visual weight */
.server-card-actions .btn-primary {
  padding:16px 20px;
  font-size:12px;
}

/* Scanner line on hero card */
.scan-border {
  position:relative;
  overflow:hidden;
}
.scan-border::before {
  content:'';
  position:absolute; top:0; left:-100%;
  width:100%; height:1.5px;
  background:linear-gradient(90deg,transparent,var(--c-red-bright),var(--c-gold),transparent);
  animation:scan 4s linear infinite;
  opacity:0.5;
}
@keyframes scan { 0%{left:-100%} 100%{left:100%} }

/* ─────────────────────────────────────────
   SECTION HEADER
──────────────────────────────────────────*/
.section-header {
  margin-bottom:48px;
}
.section-header .heading { margin-bottom:12px; }

/* Divider accent */
.section-divider {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
}
.section-divider-line {
  height:1px;
  width:40px;
  background:var(--c-red);
  flex-shrink:0;
}
.section-divider-dot {
  width:5px; height:5px;
  border-radius:50%;
  background:var(--c-red);
  flex-shrink:0;
}

/* ─────────────────────────────────────────
   ABOUT SECTION
──────────────────────────────────────────*/
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}

.about-text p {
  color:var(--c-text-2);
  line-height:1.8;
  margin-bottom:16px;
  font-size:0.95rem;
}

.about-stats {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:28px;
}
.about-stat {
  background:var(--c-card);
  border:1px solid var(--c-border-md);
  border-radius:2px;
  padding:20px 22px;
  border-left:4px solid var(--c-red);
  transition:all var(--t);
  box-shadow:0 12px 32px rgba(0, 0, 0, 0.4);
}
.about-stat:hover { border-left-color:var(--c-red); transform:translateY(-3px); box-shadow:0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(220,38,38,0.2); }
.about-stat strong {
  font-family:'Rajdhani','Orbitron',sans-serif;
  font-size:1.85rem;
  font-weight:900;
  color:#fff;
  display:block;
  line-height:1;
  margin-bottom:4px;
}
.about-stat span {
  font-size:11px;
  color:#cbd5e1;
  font-family:'Orbitron',sans-serif;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
}

.about-features {
  display:flex;
  flex-direction:column;
  gap:14px;
}
.about-feature {
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:18px 22px;
  background:var(--c-card);
  border:1px solid var(--c-border-md);
  border-radius:2px;
  transition:all var(--t);
  box-shadow:0 12px 32px rgba(0, 0, 0, 0.4);
  position:relative;
}
.about-feature:hover {
  border-color:var(--c-red-bd);
  border-left:4px solid var(--c-red);
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,0.7), 0 0 25px rgba(220,38,38,0.2);
}
.about-feature-icon {
  width:auto; height:auto;
  background:none;
  border:none;
  border-radius:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--c-red-bright);
  font-size:22px;
  flex-shrink:0;
  transition:color var(--t), transform var(--t), filter var(--t);
  filter:drop-shadow(0 0 8px rgba(139,0,0,0.5));
}
.about-feature:hover .about-feature-icon {
  color:var(--c-gold);
  transform:scale(1.08) rotate(-4deg);
  filter:drop-shadow(0 0 10px rgba(201,162,39,0.6));
}
.about-feature h4 {
  font-family:'Orbitron',sans-serif;
  font-size:15px;
  font-weight:800;
  color:#fff;
  margin-bottom:5px;
  letter-spacing:-0.01em;
}
.about-feature p {
  font-size:14.5px;
  color:#cbd5e1;
  font-weight:500;
  line-height:1.7;
}

/* ─────────────────────────────────────────
   FEATURES SECTION
──────────────────────────────────────────*/
/* Bento asymmetric grid — breaks the boring equal columns */
.features-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
/* First 2 items span 1.5 col each (banner treatment) */
.features-grid .feature-item:nth-child(1),
.features-grid .feature-item:nth-child(2) {
  grid-column: span 1;
}
/* Wide banner: items 1+2 on top row span larger area */
.features-bento-wide {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}
.features-bento-rest {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.feature-item {
  background: linear-gradient(145deg, rgba(16, 16, 28, 0.97) 0%, rgba(8, 8, 16, 0.99) 100%);
  border:1px solid var(--c-border-md);
  border-radius:2px;
  padding:28px;
  display:flex;
  gap:18px;
  transition:all var(--t);
  position:relative;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(0, 0, 0, 0.5);
}
/* Banner items get more padding and visual weight */
.feature-item.feature-banner {
  padding:32px;
  border-color:rgba(139,0,0,0.25);
}
.feature-item::before {
  content:'';
  position:absolute; top:0; left:0; width:3px; height:0;
  background:linear-gradient(to bottom, var(--c-red-bright), var(--c-gold));
  transition:height 0.35s cubic-bezier(0.4,0,0.2,1);
}
.feature-item:hover {
  background: linear-gradient(145deg, rgba(22, 18, 36, 0.97) 0%, rgba(12, 12, 22, 0.99) 100%);
  border-color:rgba(139,0,0,0.45);
  transform:translateY(-4px);
  box-shadow:0 0 40px -8px rgba(139,0,0,0.30), 0 18px 44px rgba(0,0,0,0.75);
}
.feature-item:hover::before { height:100%; }

.feature-icon-wrap {
  width:auto; height:auto;
  background:none;
  border:none;
  border-radius:0;
  display:flex; align-items:flex-start; justify-content:center;
  color:var(--c-red-bright);
  font-size:22px;
  margin-bottom:0;
  flex-shrink:0;
  padding-top:3px;
  transition:color var(--t), transform var(--t), filter var(--t);
  filter:drop-shadow(0 0 8px rgba(139,0,0,0.5));
}
/* Gold icon on hover — prestige feel */
.feature-item:hover .feature-icon-wrap {
  color:var(--c-gold);
  transform:scale(1.12) rotate(-4deg);
  filter:drop-shadow(0 0 10px rgba(201,162,39,0.6));
}

.feature-item h3 {
  font-family:'Orbitron',sans-serif;
  font-size:16px;
  font-weight:800;
  color:#fff;
  margin-bottom:8px;
  letter-spacing:-0.01em;
}
.feature-item p {
  font-size:14px;
  color:var(--c-text-2);
  font-weight:500;
  line-height:1.75;
}

/* ─────────────────────────────────────────
   JOBS SECTION
──────────────────────────────────────────*/
.jobs-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.job-item {
  background:linear-gradient(145deg, rgba(16,16,28,0.97) 0%, rgba(8,8,16,0.99) 100%);
  border:1px solid var(--c-border-md);
  border-radius:2px;
  padding:28px;
  display:flex;
  gap:16px;
  transition:all var(--t);
  position:relative;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(0, 0, 0, 0.5);
}
.job-item::before {
  content:'';
  position:absolute; top:0; left:0; width:3px; height:0;
  background:linear-gradient(to bottom, var(--c-red-bright), var(--c-gold));
  transition:height 0.35s cubic-bezier(0.4,0,0.2,1);
}
.job-item:hover {
  border-color:rgba(139,0,0,0.45);
  transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(0,0,0,0.75), 0 0 28px rgba(139,0,0,0.2);
}
.job-item:hover::before { height:100%; }

.job-icon {
  width:auto; height:auto;
  background:none;
  border:none;
  border-radius:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--c-red-bright);
  font-size:22px;
  flex-shrink:0;
  transition:color var(--t), transform var(--t), filter var(--t);
  filter:drop-shadow(0 0 8px rgba(139,0,0,0.5));
}
.job-item:hover .job-icon {
  color:var(--c-gold);
  transform:scale(1.08) rotate(-4deg);
  filter:drop-shadow(0 0 10px rgba(201,162,39,0.6));
}
.job-item h3 {
  font-family:'Orbitron',sans-serif;
  font-size:16px;
  font-weight:800;
  color:#fff;
  margin-bottom:8px;
  letter-spacing:-0.01em;
}
.job-item p {
  font-size:14px;
  color:var(--c-text-2);
  font-weight:500;
  line-height:1.75;
}

/* ─────────────────────────────────────────
   CONNECT SECTION
──────────────────────────────────────────*/
.connect-section {
  background:var(--c-surface);
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
}

.connect-inner {
  display:grid;
  grid-template-columns:1fr auto;
  gap:48px;
  align-items:center;
}
.connect-title {
  font-family:'Orbitron',sans-serif;
  font-size:1.4rem;
  font-weight:800;
  color:#fff;
  margin-bottom:8px;
}
.connect-desc {
  color:var(--c-text-2);
  font-size:0.9rem;
}
.connect-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* ─────────────────────────────────────────
   MODE TOGGLE (Technical Gaming Client Switch)
──────────────────────────────────────────*/
.mode-toggle-section {
  padding:64px 0 0;
}
.mode-toggle-wrap {
  display:inline-flex;
  position:relative;
  background:rgba(4, 4, 8, 0.96);
  border:1px solid rgba(139,0,0,0.5);
  border-radius:2px;
  padding:4px;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.9), 0 0 20px rgba(139,0,0,0.18);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
/* Slider now acts as an underline indicator — thin bottom accent line */
.mode-slider {
  position:absolute;
  bottom:4px; left:4px;
  height:2px;
  width:calc(50% - 4px);
  border-radius:1px;
  background:linear-gradient(90deg, var(--c-red), var(--c-gold));
  box-shadow:0 0 10px rgba(139,0,0,0.8), 0 0 4px rgba(201,162,39,0.4);
  transition:transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mode-btn {
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 36px;
  border-radius:2px;
  font-family:'Orbitron',sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  cursor:pointer;
  user-select:none;
  transition:color 0.25s;
  color:#6b7280;
}

/* ─────────────────────────────────────────
   MODE SECTIONS VISIBILITY
──────────────────────────────────────────*/
.mode-section { transition:opacity 0.3s, transform 0.3s; }
.mode-section.hidden-state { display:none !important; }
.mode-section.visible-state {
  display:block !important;
  animation:fadeSlideUp 0.35s ease forwards;
}
@keyframes fadeSlideUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ─────────────────────────────────────────
   PVP ARENA CARDS (Red Dominant & Micro-animations)
──────────────────────────────────────────*/
.arena-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.arena-card {
  background:var(--c-card);
  border:1px solid rgba(220, 38, 38, 0.3);
  border-radius:2px;
  overflow:hidden;
  transition:all var(--t);
  box-shadow:0 12px 36px rgba(0, 0, 0, 0.45);
  position:relative;
}
.arena-card::before {
  content:'';
  position:absolute; top:0; left:0; width:4px; height:0;
  background:var(--c-red);
  transition:height var(--t);
  z-index:3;
}
.arena-card:hover {
  border-color:var(--c-red-bd);
  transform:translateY(-4px);
  box-shadow:0 16px 44px rgba(0, 0, 0, 0.8), 0 0 30px rgba(220, 38, 38, 0.25);
}
.arena-card:hover::before {
  height:100%;
}

.arena-img {
  position:relative; height:188px; overflow:hidden;
}
.arena-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.arena-card:hover .arena-img img { transform:scale(1.08) translate(-2px, -2px); }
.arena-img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 35%,rgba(8,8,17,0.95) 100%);
}
.arena-hot {
  position:absolute; top:10px; right:10px;
  font-family:'Orbitron',sans-serif;
  font-size:9px;
  font-weight:900;
  padding:3px 10px;
  border-radius:2px;
  background:var(--c-red);
  color:#fff;
  letter-spacing:0.1em;
  box-shadow:0 0 10px rgba(220,38,38,0.5);
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%);
}
.arena-ping {
  position:absolute; bottom:10px; left:10px;
  font-family:'Orbitron',sans-serif;
  font-size:10px;
  font-weight:700;
  background:rgba(0,0,0,0.75);
  border:1px solid rgba(255,255,255,0.15);
  padding:2px 8px;
  border-radius:2px;
  color:#cbd5e1;
}

.arena-body { padding:18px 18px 20px; }
.arena-mode {
  font-family:'Orbitron',sans-serif;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--c-red);
  margin-bottom:6px;
  display:block;
}
.arena-name {
  font-family:'Orbitron',sans-serif;
  font-weight:800;
  color:var(--c-text);
  font-size:1.05rem;
  margin-bottom:12px;
  transition:color var(--t);
}
.arena-card:hover .arena-name { color:var(--c-red); }

.arena-tags {
  display:flex; flex-wrap:wrap; gap:5px;
  margin-bottom:14px;
}
.arena-desc {
  font-size:0.83rem;
  color:#94a3b8;
  line-height:1.45;
  margin-bottom:14px;
}
.atag {
  font-family:'Orbitron',sans-serif;
  font-size:8.5px;
  font-weight:700;
  padding:3px 9px;
  border-radius:2px;
  background:rgba(220,38,38,0.1);
  border:1px solid rgba(220,38,38,0.25);
  color:#cbd5e1;
}

.arena-pop {
  margin-bottom:14px;
}
.arena-pop-row {
  display:flex;
  justify-content:space-between;
  font-family:'Orbitron',sans-serif;
  font-size:10px;
  font-weight:700;
  color:#cbd5e1;
  margin-bottom:6px;
}
.arena-pop-row span:last-child { color:var(--c-red); font-weight:900; font-size:13px; }
.progress-track {
  height:6px;
  border-radius:2px;
  background:rgba(255,255,255,0.08);
  overflow:hidden;
}
.progress-fill {
  height:100%;
  border-radius:2px;
  background:linear-gradient(90deg,#991b1b,#dc2626);
  box-shadow:0 0 10px rgba(220,38,38,0.6);
}

.arena-btn {
  width:100%;
  justify-content:center;
  padding:12px 16px;
}

/* ─────────────────────────────────────────
   LEADERBOARD (Heavy Stats & Sharp Geometry)
──────────────────────────────────────────*/
.lb-card {
  background:var(--c-card);
  border:1px solid rgba(220, 38, 38, 0.3);
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter:blur(16px);
}
.lb-header {
  padding:22px 28px;
  border-bottom:1px solid var(--c-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.lb-title { font-family:'Orbitron',sans-serif; font-weight:900; font-size:1.1rem; color:#fff; letter-spacing:0.05em; }

.lb-tabs {
  display:flex;
  background:rgba(0,0,0,0.6);
  border:1px solid var(--c-border-md);
  border-radius:2px;
  padding:3px;
  gap:3px;
}
.lb-tab {
  font-family:'Orbitron',sans-serif;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:2px;
  color:#cbd5e1;
  transition:color var(--t), background var(--t);
}
.lb-tab:hover { color:#fff; background:rgba(220,38,38,0.15); }
.lb-tab.active {
  background:linear-gradient(135deg, #991b1b, #dc2626);
  color:#fff;
  box-shadow:0 0 12px rgba(220,38,38,0.5);
}

.lb-rows { padding:20px; display:flex; flex-direction:column; gap:8px; }
.lb-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 20px;
  border-radius:2px;
  margin-bottom:0;
  transition:all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  border:1px solid transparent;
}

/* Zebra Striping — High Contrast Alternating Rows */
.lb-row:nth-child(odd) {
  background:rgba(0, 0, 0, 0.6);
  border-color:rgba(255, 255, 255, 0.05);
}
.lb-row:nth-child(even) {
  background:rgba(255, 255, 255, 0.04);
  border-color:rgba(255, 255, 255, 0.08);
}

/* Top 3 Special Highlights — Rank 1 Gold Prestige */
.lb-row.rank-1 {
  background:linear-gradient(90deg, rgba(234,179,8,0.22) 0%, rgba(14,14,24,0.92) 100%) !important;
  border-left:4px solid var(--c-gold) !important;
  border-color:rgba(234,179,8,0.4);
}
.lb-row.rank-2 {
  background:linear-gradient(90deg, rgba(220,38,38,0.18) 0%, rgba(14,14,24,0.92) 100%) !important;
  border-left:4px solid var(--c-red) !important;
  border-color:rgba(220,38,38,0.35);
}
.lb-row.rank-3 {
  background:linear-gradient(90deg, rgba(220,38,38,0.12) 0%, rgba(14,14,24,0.92) 100%) !important;
  border-left:4px solid #b91c1c !important;
  border-color:rgba(220,38,38,0.25);
}

/* Interactive Hover State */
.lb-row:hover {
  background:rgba(220, 38, 38, 0.18) !important;
  border-color:var(--c-red) !important;
  transform:translateX(8px);
  box-shadow:0 8px 24px rgba(0,0,0,0.6), -4px 0 16px rgba(220,38,38,0.3);
  z-index:2;
}

.lb-left { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.lb-rank {
  width:32px; height:auto;
  border-radius:0;
  background:none !important;
  border:none !important;
  display:flex; align-items:center; justify-content:center;
  font-family:'Orbitron',sans-serif;
  font-size:18px; font-weight:900;
  flex-shrink:0;
}
.rank-1 .lb-rank { color:var(--c-gold); filter:drop-shadow(0 0 8px rgba(234,179,8,0.6)); }
.rank-2 .lb-rank { color:var(--c-red); filter:drop-shadow(0 0 8px rgba(220,38,38,0.6)); }
.rank-3 .lb-rank { color:#f87171; filter:drop-shadow(0 0 8px rgba(220,38,38,0.4)); }
.lb-row:not(.rank-1):not(.rank-2):not(.rank-3) .lb-rank { color:#cbd5e1; }

.lb-avatar {
  width:38px; height:38px;
  border-radius:50%;
  border:1.5px solid rgba(88,101,242,0.4);
  background:rgba(0,0,0,0.5);
  object-fit:cover;
  flex-shrink:0;
  box-shadow:0 0 8px rgba(88,101,242,0.2);
}
.lb-info { min-width:0; }
.lb-name { font-weight:700; font-size:13.5px; color:var(--c-text); display:flex; align-items:center; gap:7px; }
.lb-name i { font-size:10px; color:var(--c-gold); flex-shrink:0; }
.lb-badge { font-family:'Orbitron',sans-serif; font-size:9.5px; font-weight:700; color:#cbd5e1; }

.lb-stats { display:flex; gap:24px; flex-shrink:0; }
.lb-stat-col { text-align:center; }
.lb-stat-label { font-family:'Orbitron',sans-serif; font-size:8.5px; font-weight:800; color:var(--c-text-3); text-transform:uppercase; display:block; }
.lb-stat-val { font-family:'Rajdhani','Orbitron',sans-serif; font-weight:900; font-size:1.25rem; color:var(--c-red-bright); display:block; line-height:1; }
.lb-stat-val.deaths { color:#cbd5e1; font-size:1rem; font-weight:800; }
/* KD ratio stays green — semantically correct, leaderboard is praised as-is */
.lb-stat-val.kd { color:#22c55e; font-size:1rem; font-weight:900; }

/* ─────────────────────────────────────────
   SOCIAL / CONTACT
──────────────────────────────────────────*/
.social-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.social-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:22px 16px;
  background:var(--c-card);
  border:1px solid var(--c-border-md);
  border-radius:2px;
  text-align:center;
  transition:all var(--t);
  text-decoration:none;
  color:inherit;
  box-shadow:0 12px 32px rgba(0, 0, 0, 0.4);
  position:relative;
}
.social-card::before {
  content:'';
  position:absolute; top:0; left:0; width:3px; height:0;
  background:var(--c-red);
  transition:height var(--t);
}
.social-icon {
  width:auto; height:auto;
  background:none !important;
  border:none !important;
  border-radius:0;
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
  transition:transform var(--t);
  filter:drop-shadow(0 0 10px rgba(255,255,255,0.25));
}
.social-card:hover { transform:translateY(-4px); border-color:var(--c-red-bd); box-shadow:0 16px 40px rgba(0,0,0,0.7), 0 0 25px rgba(220,38,38,0.2); }
.social-card:hover::before { height:100%; }
.social-card:hover .social-icon { transform:scale(1.15) rotate(-3deg); }

.social-discord .social-icon { color:#818cf8; filter:drop-shadow(0 0 10px rgba(129,140,248,0.5)); }
.social-discord:hover { border-color:rgba(88,101,242,0.5); box-shadow:0 12px 32px rgba(88,101,242,0.25); }
.social-tiktok .social-icon { color:#fff; filter:drop-shadow(0 0 10px rgba(255,255,255,0.4)); }
.social-tiktok:hover { border-color:rgba(255,255,255,0.3); }
.social-youtube .social-icon { color:#ff4444; filter:drop-shadow(0 0 10px rgba(255,68,68,0.5)); }
.social-youtube:hover { border-color:rgba(255,0,0,0.5); box-shadow:0 12px 32px rgba(255,0,0,0.2); }
.social-insta .social-icon { color:#e94057; filter:drop-shadow(0 0 10px rgba(233,64,87,0.5)); }
.social-insta:hover { border-color:rgba(233,64,87,0.5); box-shadow:0 12px 32px rgba(233,64,87,0.2); }

.social-name {
  font-family:'Orbitron',sans-serif;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--c-text);
}
.social-handle { font-size:11px; font-weight:600; color:#cbd5e1; }

/* ─────────────────────────────────────────
   CONNECT MODAL
──────────────────────────────────────────*/
.modal-backdrop {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal-box {
  background:rgba(12, 12, 22, 0.96);
  border:1px solid rgba(220,38,38,0.45);
  border-radius:2px;
  padding:32px;
  max-width:380px;
  width:100%;
  box-shadow:0 32px 80px rgba(0,0,0,0.8), 0 0 60px rgba(220,38,38,0.25);
  position:relative;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.modal-close {
  position:absolute; top:14px; right:14px;
  width:32px; height:32px;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,0.06);
  color:var(--c-text-2);
  display:flex; align-items:center; justify-content:center;
  transition:color var(--t), background var(--t);
}
.modal-close:hover { color:#fff; background:rgba(255,255,255,0.12); }
.modal-header { text-align:center; margin-bottom:22px; }
.modal-logo { width:56px; height:56px; object-fit:contain; margin:0 auto 12px; }
.modal-title { font-family:'Orbitron',sans-serif; font-weight:800; font-size:1rem; color:#fff; }
.modal-sub { font-family:'Orbitron',sans-serif; font-size:9px; color:var(--c-text-3); letter-spacing:0.15em; text-transform:uppercase; margin-top:4px; }
.modal-actions { display:flex; flex-direction:column; gap:9px; }
.modal-actions .btn { justify-content:center; padding:13px 20px; }

/* ─────────────────────────────────────────
   TOAST
──────────────────────────────────────────*/
#toast {
  position:fixed; bottom:24px; right:24px; z-index:300;
  display:flex; align-items:center; gap:10px;
  padding:12px 18px;
  background:var(--c-card);
  border:1px solid var(--c-gold-bd);
  border-radius:var(--r-lg);
  font-family:'Orbitron',sans-serif;
  font-size:11px;
  color:var(--c-text);
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
  pointer-events:none;
}
#toast.hide { transform:translateY(16px); opacity:0; }

/* ─────────────────────────────────────────
   FOOTER
──────────────────────────────────────────*/
.footer {
  background:var(--c-surface);
  border-top:1px solid var(--c-border);
  padding:56px 0 32px;
}
.footer-grid {
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:48px;
  margin-bottom:40px;
}
.footer-brand .nav-logo { margin-bottom:14px; }
.footer-brand p {
  font-size:12.5px;
  color:#9ca3af;
  line-height:1.8;
  max-width:280px;
}
.footer-col h4 {
  font-family:'Orbitron',sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--c-text);
  margin-bottom:14px;
}
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-link {
  font-size:13px;
  color:#9ca3af;
  transition:color var(--t);
  display:flex; align-items:center; gap:7px;
}
.footer-link:hover { color:#fff; }
.footer-link i { font-size:11px; color:var(--c-red-bright); }

.footer-bottom {
  border-top:1px solid var(--c-border);
  padding-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footer-copy {
  font-family:'Orbitron',sans-serif;
  font-size:9.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#6b7280;
}
.footer-socials { display:flex; gap:12px; }
.footer-social {
  width:32px; height:32px;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,0.04);
  border:1px solid var(--c-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--c-text-3);
  font-size:14px;
  transition:color var(--t), border-color var(--t), background var(--t);
}
.footer-social:hover { color:#fff; border-color:var(--c-red-bd); background:rgba(220,38,38,0.08); }

/* ─────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────*/
@media (max-width:1024px) {
  .hero .container { grid-template-columns:1fr; gap:40px; padding-bottom:60px; }
  .hero-stats { grid-template-columns:repeat(2,1fr); }
  .about-grid { grid-template-columns:1fr; gap:32px; }
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .jobs-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .social-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {
  .section { padding:60px 0; }
  .nav-links, .nav-right .online-pill, .nav-right .btn { display:none; }
  .hamburger { display:flex; }
  .hero .container { grid-template-columns:1fr; }
  .hero-stats { grid-template-columns:repeat(2,1fr); }
  .features-grid { grid-template-columns:1fr 1fr; }
  .jobs-grid { grid-template-columns:1fr; }
  .arena-grid { grid-template-columns:1fr; }
  .connect-inner { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .social-grid { grid-template-columns:repeat(2,1fr); }
  .lb-stats { gap:14px; }
  .mode-btn { padding:10px 24px; }
}

@media (max-width:480px) {
  .hero-title { font-size:1.7rem; }
  .hero-actions { flex-direction:column; }
  .hero-stats { grid-template-columns:1fr 1fr; }
  .features-grid { grid-template-columns:1fr; }
  .lb-stat-col:nth-child(2) { display:none; }
  .social-grid { grid-template-columns:1fr 1fr; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .nav-right .btn:not(:last-child) { display:none; }
}