@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    padding-top: 1rem;
  }

  header {
    flex-direction: column;
    align-items: flex-start;
  }

  .cards {
    flex-direction: column;
    align-items: center;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero {
    padding: 4rem 1rem;
  }

  .hero-logo {
    width: 150px;
  }

  .kofi-container {
    flex-direction: column;
    gap: 1rem;
  }
}

/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background: #0a0a0a;
  color: #f44336;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Navbar */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 10%;
  background: #111;
  border-bottom: 2px solid #f44336;
}

header .logo {
  font-size: 1.8rem;
  font-weight: bold;
  color: #f44336;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}

nav a {
  text-decoration: none;
  color: #f44336;
  transition: 0.3s;
}

nav a:hover {
  color: #ff6659;
}

/* Hero */
.hero {
  background: #0d0d0d;
  color: #f44336;
  text-align: center;
  padding: 5rem 1rem 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 90vh;
}

.hero-logo {
  width: 200px;
  margin-bottom: 1.5rem;
  /* filter: drop-shadow(0 0 15px rgba(244, 67, 54, 0.7)); */
}

.hero h1 {
  font-size: 2.8rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #f44336;
}

.hero .tagline {
  color: #ff7f7f;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.hero .stats {
  color: #ccc;
  line-height: 1.6;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.hero .highlight-lighter {
  color: #ff7f7f;
  font-weight: bold;
}

.hero .highlight {
  color: #f44336;
  font-weight: bold;
}

.hero-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.btn {
  background: #f44336;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 0 10px rgba(244, 67, 54, 0.4);
}

.btn:hover {
  background: #ff4f4f;
  box-shadow: 0 0 15px rgba(244, 67, 54, 0.7);
}

/* Ko-fi button wrapper */
#kofi-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* duplicate features/card block removed to avoid overrides */

/* Footer */
footer {
  background: #0a0a0a;
  color: #888;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #ff6659;
}

.btn {
  background: #f44336;
  color: #fff;
  padding: 0.8rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.3s;
  box-shadow: 0 0 10px rgba(244, 67, 54, 0.4);
}

.btn:hover {
  background: #ff6659;
  box-shadow: 0 0 15px rgba(255, 102, 89, 0.6);
  transform: scale(1.05);
}

/* Ko-fi + Invite button container */
.kofi-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* duplicate features/card block removed to avoid overrides */

/* Donor amount emphasis */
.amount {
  font-weight: 700;
  color: #ff6659;
  display: block;
  font-size: 1.1rem;
  margin-top: 0.25rem;
}

/* ==== Home page section color themes ==== */
/* Hero: deep gradient with subtle glow */
.home .hero {
  background: radial-gradient(1200px 500px at 50% 0%, rgba(244, 67, 54, 0.15), transparent 60%),
              linear-gradient(135deg, #0d0d0f 0%, #111016 45%, #0b0b0b 100%);
  color: #ffd4cf;
}
.home .hero h1 { color: #f44336; text-shadow: 0 0 18px rgba(244, 67, 54, 0.35); }
.home .hero .tagline { color: #ff9a93; }
.home .hero .stats { color: #e8d9d7; }
.home .hero .highlight { color: #ff5a4f; }
.home .hero .highlight-lighter { color: #ff928a; }

/* Features: cool contrast to hero, with soft red accents */
.home #features.features {
  background: linear-gradient(180deg, #0a0a0a 0%, #0e0e0e 50%, #0a0a0a 100%);
}
.home #features .cards .card {
  background: linear-gradient(180deg, #141414, #101010);
  border-color: rgba(244, 67, 54, 0.6);
}
.home #features .cards .card:hover {
  box-shadow: 0 0 26px rgba(244, 67, 54, 0.6);
}

/* Donors: celebratory warmth with gold accents */
.home #donations.features {
  background: linear-gradient(160deg, #0c0b09 0%, #11100c 60%, #0c0b09 100%);
}
.home #donations h2 { color: #f6c453; text-shadow: 0 0 14px rgba(246, 196, 83, 0.35); }
.home #donations .cards .card {
  background: linear-gradient(180deg, #15130f, #100f0c);
  border-color: rgba(246, 196, 83, 0.55);
  box-shadow: 0 0 12px rgba(246, 196, 83, 0.2);
}
.home #donations .cards .card h3 { color: #ffd38a; }
.home #donations .cards .card p { color: #ffbf9e; }
.home #donations .amount { color: #f6c453; }

/* Section headings: subtle gradient text effect on home */
.home .features h2 {
  background: linear-gradient(90deg, #ff9086, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* duplicate legacy footer block removed */

/* Logo in navbar */
.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.logo a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}

.logo img {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 0 6px rgba(244, 67, 54, 0.6));
}

.logo span {
  font-size: 1.5rem;
  font-weight: bold;
  color: #f44336;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(244, 67, 54, 0.4);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(244, 67, 54, 0.6);
}
/* Premium Page Helpers */
body.premium .hero .tagline { color: #ff9a93; }
.pricing { padding: 3rem 1rem; max-width: 1100px; margin: 0 auto; }
.price { font-size: 2.2rem; font-weight: 800; color: #fff; margin: 0.5rem 0 1rem; }
.features-list { list-style: none; color: #ffb3ad; margin: 0.75rem 0 0; padding: 0; }
.features-list li { margin: 0.35rem 0; }
.badge { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: #fff; background: linear-gradient(180deg,#f44336,#d83a2e); border: 1px solid rgba(244,67,54,.6); padding: .35rem .6rem; border-radius: 999px; }
.hero-actions { display: flex; gap: .75rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.small-note { color: #e8d9d7; font-size: .95rem; opacity: .85; }

/* --- FIX HEADER FOR MOBILE VIEW --- */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
    border-bottom: 2px solid #f44336;
  }

  .logo {
    justify-content: center;
    margin-bottom: 0.5rem;
  }

  nav ul {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  nav ul li {
    width: 100%;
    text-align: center;
  }

  nav a {
    display: block;
    width: 100%;
    padding: 0.6rem 0;
    color: #f44336;
    font-weight: 600;
    border-radius: 8px;
    transition: background 0.3s, color 0.3s;
  }

  nav a:hover {
    background: rgba(244, 67, 54, 0.1);
    color: #ff6659;
  }

  .logout-btn {
    background: #f44336;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.5rem;
    margin-top: 1rem;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 0 10px rgba(244, 67, 54, 0.4);
  }

  .logout-btn:hover {
    background: #ff6659;
    box-shadow: 0 0 15px rgba(255, 102, 89, 0.6);
    transform: scale(1.05);
  }
}

/* --- HAMBURGER MENU --- */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 24px;
  cursor: pointer;
  gap: 5px;
  z-index: 1001;
}

.hamburger span {
  width: 100%;
  height: 3px;
  background: #f44336;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Animate to X when active */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translateY(8px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-8px);
}

/* Hide nav by default on mobile */
@media (max-width: 768px) {
  nav {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: #111;
    border-top: 2px solid #f44336;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
    z-index: 1000;
  }

  nav.active {
    display: flex;
    animation: fadeIn 0.3s ease-in-out;
  }

  nav ul {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .hamburger {
    display: flex;
  }

  header {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- TEST --- */

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    padding-top: 1rem;
  }

  header {
    flex-direction: column;
    align-items: flex-start;
  }

  .cards {
    flex-direction: column;
    align-items: center;
  }

  .hero h1 {
    font-size: 2rem;
  }
}

/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background: #0a0a0a; /* dark black */
  color: #f44336; /* glowing red */
  line-height: 1.6;
}

/* Navbar */
/* duplicate base blocks removed (legacy header/hero/buttons/features/footer) */

/* Logo in navbar */
.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.logo a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}

.logo img {
  width: 40px;
  height: 40px;
}

.logo span {
  font-size: 1.5rem;
  font-weight: bold;
  color: #f44336;
}

/* Hero logo */
.hero-logo {
  width: 200px;
  height: auto;
  margin-bottom: 1.5rem;
  
}

/* Dashboard Section */
.dashboard {
  padding: 4rem 10%;
  text-align: center;
  background: #0a0a0a;
}

.dashboard h2 {
  font-size: 2.2rem;
  margin-bottom: 2rem;
  color: #f44336;
}

.dashboard-cards {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.dashboard-card {
  background: #111;
  border: 1px solid #f44336;
  border-radius: 10px;
  padding: 2rem;
  width: 260px;
  box-shadow: 0 0 15px rgba(244, 67, 54, 0.4);
  text-align: left;
  transition: transform 0.3s;
}

.dashboard-card:hover {
  transform: translateY(-5px);
}

.dashboard-card h3 {
  color: #f44336;
  margin-bottom: 1rem;
}

.dashboard-card p {
  margin-bottom: 1.5rem;
  color: #ff6659;
}

/* Server Selector */
.server-selector {
  text-align: center;
  padding: 4rem 2rem;
  background: #111;
}

.server-slider { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-start; padding: 0.5rem 0; margin-top: 0.5rem; }

.server-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #f44336;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.server-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px #f44336;
}

/* Customization Panel */
.customization-panel {
  padding: 3rem 10%;
  background: #0a0a0a;
  color: #fff;
}

.customization-panel h2 {
  margin-bottom: 2rem;
  color: #f44336;
}

.xp-settings {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: #111;
  padding: 2rem;
  border-radius: 10px;
  border: 1px solid #f44336;
}

.xp-settings label {
  display: flex;
  flex-direction: column;
  color: #ff6659;
}

.xp-settings input[type="number"],
.xp-settings input[type="text"] {
  padding: 0.5rem;
  background: #0a0a0a;
  color: white;
  border: 1px solid #f44336;
  border-radius: 5px;
}

.hidden {
  display: none;
}

/* Customization Dashboard */
.customization-dashboard {
  padding: 4rem 10%;
  background: #0a0a0a;
  color: white;
}

.customization-dashboard h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: #f44336;
}

/* Category Tabs */
.category-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.tab-btn {
  padding: 0.6rem 1.2rem;
  background: #111;
  color: #f44336;
  border: 1px solid #f44336;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.tab-btn:hover,
.tab-btn.active {
  background: #f44336;
  color: white;
}

/* Tab Panels */
.tab-panel {
  background: #111;
  padding: 2rem;
  border-radius: 10px;
  border: 1px solid #f44336;
  margin-bottom: 2rem;
}

.tab-panel h3 {
  color: #ff6659;
  margin-bottom: 1rem;
}

.tab-panel label {
  display: block;
  margin-bottom: 1rem;
  color: #ff6659;
}

.tab-panel input[type="number"],
.tab-panel input[type="text"] {
  padding: 0.4rem;
  background: #0a0a0a;
  border: 1px solid #f44336;
  border-radius: 5px;
  color: white;
  margin-top: 0.4rem;
}

.save-btn {
  display: block;
  margin: 0 auto;
  margin-top: 1rem;
}

/* Hidden Utility */
.hidden {
  display: none;
}

.server-icon.selected {
  border: 3px solid #ff6659;
  box-shadow: 0 0 10px #ff6659;
}

.dashboard-card:hover {
  cursor: pointer;
  transform: scale(1.05);
  box-shadow: 0 0 10px #f44336;
}

.plus-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  filter: drop-shadow(0 0 2px #f44336);
  transition: transform 0.3s, filter 0.3s;
  border-radius: 50%;
}

.plus-icon:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 5px #ff6659);
}

.command-list {
  background: #111;
  padding: 2rem;
  border-radius: 10px;
  border: 1px solid #f44336;
  margin-bottom: 2rem;
}

.command-list h3 {
  color: #ff6659;
  margin-bottom: 1rem;
}

.command-list label {
  display: block;
  margin-bottom: 1rem;
  color: #ff6659;
}

.command-list input[type="number"],
.command-list input[type="text"] {
  padding: 0.4rem;
  background: #0a0a0a;
  border: 1px solid #f44336;
  border-radius: 5px;
  color: white;
  margin-top: 0.4rem;
}


/* Scrollbar Styling */

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(244, 67, 54, 0.4);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(244, 67, 54, 0.6);
}
/* Premium Page Helpers */
body.premium .hero .tagline { color: #ff9a93; }
.pricing { padding: 3rem 1rem; max-width: 1100px; margin: 0 auto; }
.price { font-size: 2.2rem; font-weight: 800; color: #fff; margin: 0.5rem 0 1rem; }
.features-list { list-style: none; color: #ffb3ad; margin: 0.75rem 0 0; padding: 0; }
.features-list li { margin: 0.35rem 0; }
.badge { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: #fff; background: linear-gradient(180deg,#f44336,#d83a2e); border: 1px solid rgba(244,67,54,.6); padding: .35rem .6rem; border-radius: 999px; }
.hero-actions { display: flex; gap: .75rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.small-note { color: #e8d9d7; font-size: .95rem; opacity: .85; }

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    padding-top: 1rem;
  }

  header {
    flex-direction: column;
    align-items: flex-start;
  }

  .cards {
    flex-direction: column;
    align-items: center;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero {
    padding: 4rem 1rem;
  }

  .hero-logo {
    width: 150px;
  }

  .kofi-container {
    flex-direction: column;
    gap: 1rem;
  }
}

/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background: #0a0a0a;
  color: #f44336;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Navbar */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 10%;
  background: #111;
  border-bottom: 2px solid #f44336;
}

header .logo {
  font-size: 1.8rem;
  font-weight: bold;
  color: #f44336;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}

nav a {
  text-decoration: none;
  color: #f44336;
  transition: 0.3s;
}

nav a:hover {
  color: #ff6659;
}

/* Hero */
.hero {
  text-align: center;
  padding: 8rem 2rem 6rem 2rem;
  background: linear-gradient(to bottom, #111, #0a0a0a);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-logo {
  width: 200px;
  height: auto;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 10px rgba(244, 67, 54, 0.5));
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #f44336;
  text-shadow: 0 0 10px rgba(244, 67, 54, 0.6);
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #ff6659;
}

.btn {
  background: #f44336;
  color: #fff;
  padding: 0.8rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.3s;
  box-shadow: 0 0 10px rgba(244, 67, 54, 0.4);
}

.btn:hover {
  background: #ff6659;
  box-shadow: 0 0 15px rgba(255, 102, 89, 0.6);
  transform: scale(1.05);
}

/* Ko-fi + Invite button container */
.kofi-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Features */
.features {
  padding: 4rem 10%;
  text-align: center;
  background: #0a0a0a;
}

.features h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #f44336;
  text-shadow: 0 0 8px rgba(244, 67, 54, 0.5);
}

.cards {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.card {
  background: #111;
  padding: 2rem;
  border-radius: 10px;
  width: 280px;
  border: 1px solid #f44336;
  box-shadow: 0 0 15px rgba(244, 67, 54, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #f44336;
  cursor: pointer;
}

/* Ensure full-card links render exactly like normal cards */
.cards a { text-decoration: none; color: inherit; }
a.card, .cards a .card { display: block; color: inherit; }
.cards a:focus { outline: none; }

.card h3 {
  margin-bottom: 1rem;
  color: #ff6659;
}

.card p {
  color: #ff857a;
}

/* Footer */
footer {
  text-align: center;
  padding: 1.5rem;
  background: #0a0a0a;
  border-top: 2px solid #f44336;
  font-size: 0.9rem;
  color: #ff6659;
}

/* Logo in navbar */
.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.logo a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}

.logo img {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 0 6px rgba(244, 67, 54, 0.6));
}

.logo span {
  font-size: 1.5rem;
  font-weight: bold;
  color: #f44336;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(244, 67, 54, 0.4);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(244, 67, 54, 0.6);
}
/* Premium Page Helpers */
body.premium .hero .tagline { color: #ff9a93; }
.pricing { padding: 3rem 1rem; max-width: 1100px; margin: 0 auto; }
.price { font-size: 2.2rem; font-weight: 800; color: #fff; margin: 0.5rem 0 1rem; }
.features-list { list-style: none; color: #ffb3ad; margin: 0.75rem 0 0; padding: 0; }
.features-list li { margin: 0.35rem 0; }
.badge { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: #fff; background: linear-gradient(180deg,#f44336,#d83a2e); border: 1px solid rgba(244,67,54,.6); padding: .35rem .6rem; border-radius: 999px; }
.hero-actions { display: flex; gap: .75rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.small-note { color: #e8d9d7; font-size: .95rem; opacity: .85; }

/* --- FIX HEADER FOR MOBILE VIEW --- */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
    border-bottom: 2px solid #f44336;
  }

  .logo {
    justify-content: center;
    margin-bottom: 0.5rem;
  }

  nav ul {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  nav ul li {
    width: 100%;
    text-align: center;
  }

  nav a {
    display: block;
    width: 100%;
    padding: 0.6rem 0;
    color: #f44336;
    font-weight: 600;
    border-radius: 8px;
    transition: background 0.3s, color 0.3s;
  }

  nav a:hover {
    background: rgba(244, 67, 54, 0.1);
    color: #ff6659;
  }

  .logout-btn {
    background: #f44336;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.5rem;
    margin-top: 1rem;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 0 10px rgba(244, 67, 54, 0.4);
  }

  .logout-btn:hover {
    background: #ff6659;
    box-shadow: 0 0 15px rgba(255, 102, 89, 0.6);
    transform: scale(1.05);
  }
}

/* --- HAMBURGER MENU --- */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 24px;
  cursor: pointer;
  gap: 5px;
  z-index: 1001;
}

.hamburger span {
  width: 100%;
  height: 3px;
  background: #f44336;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Animate to X when active */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translateY(8px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-8px);
}

/* Hide nav by default on mobile */
@media (max-width: 768px) {
  nav {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: #111;
    border-top: 2px solid #f44336;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
    z-index: 1000;
  }

  nav.active {
    display: flex;
    animation: fadeIn 0.3s ease-in-out;
  }

  nav ul {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .hamburger {
    display: flex;
  }

  header {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tooltip hover box */
.hover-text {
  position: relative;
  color: #f44336;
  cursor: pointer;
  font-weight: bold;
  transition: color 0.3s ease;
}

.hover-text:hover {
  color: #ff6659;
}

/* Tooltip box styling */
.hover-text::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%; /* position above the text */
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #ff857a;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  border: 1px solid #f44336;
  box-shadow: 0 0 10px rgba(244, 67, 54, 0.6);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Small arrow below tooltip */
.hover-text::before {
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #111 transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show tooltip on hover */
.hover-text:hover::after,
.hover-text:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}
/* ==== Redesigned Navbar ==== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(8px);
  background: rgba(17, 17, 17, 0.8);
  border-bottom: 1px solid rgba(244, 67, 54, 0.35);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.85rem 1rem;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 1rem;
  align-items: center;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.brand-logo { width: 36px; height: 36px; filter: drop-shadow(0 0 6px rgba(244,67,54,0.5)); }
.brand-name { font-size: 1.25rem; font-weight: 800; letter-spacing: 0.3px; color: #f44336; }

.primary-nav ul {
  list-style: none;
  display: flex;
  gap: 1.25rem;
  justify-content: center;
}
.primary-nav a {
  position: relative;
  text-decoration: none;
  color: #ffb3ad;
  font-weight: 600;
  padding: 0.35rem 0.1rem;
  transition: color 0.25s ease;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, rgba(244,67,54,0), #f44336, rgba(244,67,54,0));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}
.primary-nav a:hover { color: #fff; }
.primary-nav a:hover::after { transform: scaleX(1); }

.nav-cta { display: flex; align-items: center; gap: 0.6rem; }
.btn--small { padding: 0.5rem 0.9rem; border-radius: 8px; font-size: 0.95rem; }
.login-slot { display: inline-flex; align-items: center; }

/* Mobile layout */
.hamburger { display: none; background: transparent; border: 0; }
@media (max-width: 860px) {
  .nav-container { grid-template-columns: auto 1fr auto; }
  .primary-nav { display: none; position: absolute; left: 0; top: 64px; width: 100%; }
  nav.active.primary-nav { display: block; }
  .primary-nav ul {
    flex-direction: column;
    background: #111;
    border-top: 1px solid rgba(244, 67, 54, 0.35);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    padding: 0.75rem 1rem;
    gap: 0.2rem;
  }
  .primary-nav li { text-align: center; }
  .primary-nav a { display: block; padding: 0.7rem 0.4rem; }
  .nav-cta { display: none; }
  .hamburger { display: inline-flex; flex-direction: column; gap: 5px; width: 30px; height: 24px; cursor: pointer; }
  .hamburger span { width: 100%; height: 3px; background: #f44336; border-radius: 2px; transition: all 0.3s ease; }
  .hamburger.active span:nth-child(1) { transform: rotate(45deg) translateY(8px); }
  .hamburger.active span:nth-child(2) { opacity: 0; }
  .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translateY(-8px); }
}
/* ==== Redesigned Footer ==== */
.site-footer {
  background: #0b0b0b;
  border-top: 1px solid rgba(244,67,54,0.35);
  margin-top: 2rem;
}

/* Hide home-only anchors on non-home pages */
body:not(.home) .primary-nav a[href="#features"],
body:not(.home) .primary-nav a[href="#donations"] {
  display: none;
}
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.footer-col h4 { color: #ff8a80; margin-bottom: 0.75rem; }
.footer-col p { color: #ffb3ad; line-height: 1.6; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: 0.35rem 0; }
.footer-col a { color: #ffb3ad; text-decoration: none; transition: color .2s ease; }
.footer-col a:hover { color: #ffffff; }
.footer-bottom { border-top: 1px solid rgba(244,67,54,0.2); text-align: center; padding: 0.9rem 1rem; color: #ff857a; }

@media (max-width: 860px) {
  .footer-container { grid-template-columns: 1fr; }
}

/* ==== Dashboard Styling ==== */
.server-selector { padding: 3rem 10%; text-align: center; background: linear-gradient(180deg,#0b0b0b,#0f0f0f); }
.server-selector h1, .server-selector h2 { color: #fff; text-shadow: 0 0 10px rgba(244,67,54,0.35); }
.server-slider { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; padding: 0.5rem 0; margin-top: 0.5rem; }

.dashboard { padding: 3rem 10%; background: #0a0a0a; text-align: center; }
.dashboard h2 { color: #ff6659; margin-bottom: 1rem; }
.dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem auto; max-width: 1100px; }
.dashboard-card { background: linear-gradient(180deg,#141414,#101010); border: 1px solid rgba(244,67,54,0.5); border-radius: 14px; padding: 1.25rem; color: #ffb3ad; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.dashboard-card h3 { color: #fff; margin-bottom: .5rem; }
.dashboard-card:hover { transform: translateY(-6px); box-shadow: 0 10px 28px rgba(244,67,54,.25); border-color: #f44336; }

.category-panels { max-width: 900px; margin: 2rem auto; background: #0f0f0f; border: 1px solid rgba(244,67,54,0.25); border-radius: 12px; padding: 1rem; }
.tab-panel { color: #ffb3ad; }
.hidden { display: none; }
.save-btn { margin-top: 1rem; }

/* ==== Commands Page ==== */
.page-commands .commands-hero {
  padding: 3rem 10% 1.25rem;
  text-align: center;
  background: linear-gradient(180deg, #0b0b0b, #0f0f0f);
}
.page-commands .commands-hero h1 { color: #fff; text-shadow: 0 0 14px rgba(244,67,54,.35); }
.cmd-toolbar { margin: 1rem auto 0; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.cmd-toolbar input[type="search"], .cmd-toolbar select {
  background: #141414; color: #ffb3ad; border: 1px solid rgba(244,67,54,.45); border-radius: 10px;
  padding: .6rem .8rem; min-width: 260px; outline: none;
}
.cmd-toolbar input[type="search"]::placeholder { color: #ff857a; }

.commands-content { padding: 2rem 10%; }
.cmd-category { margin: 1rem auto 2rem; }
.cmd-category__title { color: #ff6659; margin: 0 0 .75rem; text-align: left; }
.cmd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.cmd-card { background: linear-gradient(180deg,#141414,#101010); border: 1px solid rgba(244,67,54,.5); border-radius: 12px; padding: 1rem; color: #ffb3ad; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.cmd-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(244,67,54,.25); border-color: #f44336; }
.cmd-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.cmd-name { font-weight: 800; color: #fff; letter-spacing: .2px; }
.cmd-badge { font-size: .75rem; background: rgba(244,67,54,.15); color: #ff9a93; border: 1px solid rgba(244,67,54,.35); padding: .15rem .45rem; border-radius: 999px; }
.cmd-desc { color: #ff9a93; margin: .25rem 0 .5rem; min-height: 2.25rem; }
.cmd-usage { color: #ffa69f; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; }
.cmd-usage span { color: #ff857a; margin-right: .35rem; }

@media (max-width: 720px) {
  .commands-content { padding: 1.25rem 5%; }
}

/* ==== Premium Resets (back to base theme) ==== */
body.premium { background: #0a0a0a; color: inherit; }
body.premium .hero { background: #0d0d0d; min-height: 90vh; padding: 5rem 1rem 4rem; position: static; }
body.premium .hero::before { content: none !important; }
body.premium .hero .hero-content { max-width: none; margin: 0; }
body.premium .hero h1 { color: #f44336; text-shadow: none; letter-spacing: 0; }
body.premium .hero .tagline { color: #ff7f7f; font-size: 1.2rem; }
body.premium .hero-logo { width: 200px; filter: none; }
body.premium .hero-actions { margin-top: 0; }
body.premium .btn { background: #f44336; color: #fff; border: none; box-shadow: 0 0 10px rgba(244,67,54,.4); }
body.premium .btn:hover { background: #ff6659; box-shadow: 0 0 15px rgba(255,102,89,.6); }
body.premium .small-note { color: #e8d9d7; opacity: .85; margin-top: 0; }

body.premium .pricing { background: #111; padding: 4rem 10%; }
body.premium .pricing h2 { color: #f44336; text-shadow: 0 0 10px rgba(244,67,54,.5); }
body.premium .pricing .cards { gap: 1.5rem; max-width: 1000px; margin: 0 auto; }
body.premium .pricing .card { background: #1a1a1a; border: 1px solid #f44336; border-radius: 15px; padding: 1.5rem; box-shadow: 0 0 12px rgba(244,67,54,0.2); transform: none; }
body.premium .pricing .card:hover { transform: translateY(-5px); box-shadow: 0 0 20px rgba(244,67,54,0.5); border-color: #f44336; }
body.premium .price { color: #fff; }
body.premium .badge { background: linear-gradient(180deg,#f44336,#d83a2e); border: 1px solid rgba(244,67,54,.6); box-shadow: none; }
body.premium .features-list { color: #ffb3ad; }

/* ==== Premium Page (scoped) ==== */
body.premium {
  background: #0a0a0a;
}

/* ==== Premium Alt Theme: Aurora + Glass ==== */
/* These rules appear after the earlier premium block to override it for a fresh style */
body.premium {
  color: #ffd9d6;
  /* layered aurora background */
  background:
    radial-gradient(1000px 420px at 20% -10%, rgba(244,67,54,.18), rgba(244,67,54,0) 60%),
    radial-gradient(900px 420px at 80% -20%, rgba(255,106,92,.14), rgba(255,106,92,0) 60%),
    linear-gradient(180deg, #0b0b0c 0%, #0e0e12 50%, #0a0a0b 100%);
}
body.premium .hero {
  background: transparent;
  position: relative;
  isolation: isolate;
}
body.premium .hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 60%;
  background: radial-gradient(40% 60% at 50% 0%, rgba(244,67,54,.25), rgba(244,67,54,0));
  filter: blur(30px);
  z-index: -1;
  opacity: .6;
}
body.premium .hero h1 { color: #fff; letter-spacing: .4px; text-shadow: 0 0 22px rgba(244,67,54,.35); }
body.premium .hero .tagline { color: #ffb2ac; font-size: 1.18rem; }
body.premium .hero-logo { width: 190px; filter: drop-shadow(0 0 16px rgba(244,67,54,.35)); transition: transform .35s ease; }
body.premium .hero-logo:hover { transform: translateY(-2px) scale(1.02); }

/* Buttons: subtle gradient + glow */
body.premium .btn {
  background: linear-gradient(180deg, #ff6a5c, #f44336);
  border: 1px solid rgba(255,106,92,.55);
  box-shadow: 0 8px 26px rgba(244,67,54,.28);
}
body.premium .btn:hover { background: linear-gradient(180deg, #ff7d71, #ff5a4f); box-shadow: 0 10px 32px rgba(244,67,54,.42); }

/* Pricing grid with glass cards */
body.premium .pricing { background: transparent; padding-top: 2.2rem; }
body.premium .pricing .cards { gap: 1.15rem; }
body.premium .pricing .card {
  background: rgba(20,20,22,.35);
  border: 1px solid rgba(244,67,54,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
body.premium .pricing .card:hover { transform: translateY(-8px); box-shadow: 0 16px 36px rgba(0,0,0,.45), 0 0 30px rgba(244,67,54,.25); }
body.premium .price { color: #fff; text-shadow: 0 0 12px rgba(244,67,54,.35); }
body.premium .badge {
  background: rgba(244,67,54,.18);
  border: 1px solid rgba(244,67,54,.45);
  box-shadow: 0 0 16px rgba(244,67,54,.35) inset;
}
body.premium .features-list { color: #ffc0b9; }

/* Ko‑fi area inline */
body.premium .kofi-container { background: rgba(20,20,22,.35); border: 1px dashed rgba(244,67,54,.35); border-radius: 10px; padding: .45rem .6rem; }

@media (max-width: 860px) {
  body.premium .hero-logo { width: 160px; }
}
body.premium .hero {
  background:
    radial-gradient(1100px 520px at 50% 0%, rgba(244, 67, 54, 0.14), transparent 60%),
    linear-gradient(135deg, #0d0d0f 0%, #111016 45%, #0b0b0b 100%);
  min-height: 74vh;
  padding: 4.5rem 1rem 3rem;
}
body.premium .hero .hero-content { max-width: 980px; margin: 0 auto; }
body.premium .hero h1 { color: #ffffff; text-shadow: 0 0 18px rgba(244,67,54,.35); letter-spacing: .3px; }
body.premium .hero .tagline { color: #ff9a93; font-size: 1.15rem; }
body.premium .hero-logo { width: 180px; height: auto; filter: drop-shadow(0 0 12px rgba(244,67,54,.35)); margin-bottom: 1rem; }
body.premium .hero-actions { margin-top: .75rem; display: flex; gap: .6rem; align-items: center; justify-content: center; flex-wrap: wrap; }
body.premium .btn { background: #f44336; color: #fff; border: 1px solid rgba(244,67,54,.6); box-shadow: 0 0 14px rgba(244,67,54,.28); }
body.premium .btn:hover { background: #ff5a4f; box-shadow: 0 0 22px rgba(244,67,54,.45); }
body.premium .small-note { color: #e8d9d7; opacity: .9; margin-top: .75rem; }

/* Pricing section */
body.premium .pricing { background: linear-gradient(180deg, #0a0a0a 0%, #0e0e0e 50%, #0a0a0a 100%); padding: 3rem 10%; }
body.premium .pricing h2 { color: #fff; text-shadow: 0 0 14px rgba(244,67,54,.35); margin-bottom: 1.25rem; }
body.premium .pricing .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; max-width: 1100px; margin: 0 auto; }
body.premium .pricing .card { background: linear-gradient(180deg, #141414, #101010); border: 1px solid rgba(244,67,54,.5); border-radius: 14px; padding: 1.25rem; color: #ffb3ad; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
body.premium .pricing .card:hover { transform: translateY(-6px); box-shadow: 0 10px 28px rgba(244,67,54,.25); border-color: #f44336; }
body.premium .pricing .card h3 { color: #fff; margin: .25rem 0 .25rem; }
body.premium .pricing .price { font-size: 2.2rem; font-weight: 800; color: #ffffff; margin: 0.25rem 0 .75rem; }
body.premium .features-list { list-style: none; padding: 0; margin: .5rem 0 0; color: #ffb3ad; }
body.premium .features-list li { margin: .35rem 0; }
body.premium .badge { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: #fff; background: linear-gradient(180deg,#f44336,#d83a2e); border: 1px solid rgba(244,67,54,.6); padding: .35rem .6rem; border-radius: 999px; }

/* Ko‑fi button area (embedded) */
body.premium .kofi-container { display: inline-flex; align-items: center; gap: .5rem; }
#kofi-btn { display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 860px) {
  body.premium .hero { padding: 3.25rem 1rem 2.25rem; min-height: 66vh; }
  body.premium .hero-logo { width: 150px; }
  body.premium .pricing { padding: 2.25rem 6%; }
}

/* ==== Top Servers Section ==== */
.servers-section {
  padding: 3rem 10%;
  background: linear-gradient(180deg, #0b0b0b, #0f0f0f);
  border-top: 1px solid rgba(244,67,54,0.25);
  border-bottom: 1px solid rgba(244,67,54,0.15);
  text-align: center;
}
.servers-section h2 {
  color: #ff8a80;
  text-shadow: 0 0 10px rgba(244,67,54,0.35);
  margin-bottom: 1.25rem;
}
.servers-marquee {
  /* Full-bleed row across the viewport */
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 52px; /* single row height */
  position: relative;
  overflow: hidden;
  /* unified motion controls */
  --gap: 8px;          /* small visual gap between badges */
  --px-per-sec: 130;   /* scrolling speed in px/s */
}

/* Track-based continuous scroll (prevents overlap on wrap) */
.servers-track {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(100vw, -50%); /* start fully from the right */
  display: inline-flex;
  align-items: center;
  gap: var(--gap, 8px);
  will-change: transform;
  animation: scroll-track var(--dur, 36s) linear infinite;
}

@keyframes scroll-track {
  from { transform: translate(100vw, -50%); }
  to   { transform: translate(calc(100vw - var(--track-width, 1200px)), -50%); }
}
/* Default per-badge animation rules were used earlier; disable when inside track */
.server-badge {
  justify-self: start;
  align-self: center;
  height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.48rem 0.95rem 0.48rem 0.55rem;
  border-radius: 999px;
  color: #ffe7e5;
  border: 1px solid rgba(244,67,54,0.5);
  background:
    radial-gradient(120% 220% at 10% 0%, rgba(244,67,54,0.20), rgba(0,0,0,0) 60%),
    radial-gradient(60% 120% at 90% 120%, rgba(255,106,92,0.18), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.0));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow:
    0 8px 24px rgba(244,67,54,0.20),
    inset 0 0 14px rgba(244,67,54,0.14);
  white-space: nowrap;
  position: relative;
}
.server-badge img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(244,67,54,0.55);
  box-shadow: 0 0 10px rgba(244,67,54,0.35);
  background: radial-gradient(70% 70% at 30% 30%, rgba(255,255,255,0.15), rgba(0,0,0,0));
}
.server-badge .name { font-weight: 800; letter-spacing: .2px; color: #ffffff; }
.server-badge .name::after { content: '•'; margin: 0 10px; color: #ff9a93; opacity: .7; }
.server-badge .members { color: #ffb3ad; font-weight: 700; margin-left: 0; }

/* no per-badge keyframes when using track */

@media (max-width: 860px) {
  .servers-marquee { height: 48px; }
  .server-badge { height: 44px; padding: 0.4rem 0.75rem 0.4rem 0.5rem; }
}