format for the main files.

Given the complexity, I'll create:
- index.html (home page with all sections)
- about.html
- gamemodes.html
- rules.html
- store.html
- staff.html
- contact.html
- terms.html
- css/style.css (main stylesheet)
- js/main.js (main JavaScript)
- js/terms.js (terms and conditions modal logic)

Let me start with the main CSS file since it's the foundation, then create the HTML pages, then JavaScript.

I need to be careful about the output format - for websites I need to use [WEBSITE_PREVIEW] blocks. Since this is a multi-file project, I'll need multiple [WEBSITE_PREVIEW] blocks with filename indicators.

Let me create this step by step.</think>[WEBSITE_PREVIEW]

/* ==========================================================================
   CLASH BLOCKS - Minecraft Server Website Styles
   ========================================================================== */

/* CSS Custom Properties */
:root {
  --color-bg: #0d1117;
  --color-bg-elevated: #161b22;
  --color-bg-card: #1f242d;
  --color-border: #30363d;
  --color-text-primary: #e6edf3;
  --color-text-secondary: #8b949e;
  --color-text-muted: #6e7681;
  --color-accent-blue: #4fc3f7;
  --color-accent-blue-dark: #29b6f6;
  --color-accent-green: #66bb6a;
  --color-accent-green-dark: #4caf50;
  --color-accent-gold: #ffd54f;
  --color-accent-red: #ef5350;
  --color-accent-purple: #ce93d8;
  --font-pixel: 'Press Start 2P', 'Minecraft', monospace;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow-blue: 0 0 20px rgba(79, 195, 247, 0.3);
  --shadow-glow-green: 0 0 20px rgba(102, 187, 106, 0.3);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;
  --container-max: 1280px;
  --header-height: 72px;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-ui);
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Pixel font utility */
.font-pixel { font-family: var(--font-pixel); }

/* Background pattern - Minecraft dirt/grass texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%231a1f2a' d='M0 0h64v64H0z'/%3E%3Cpath fill='%23222833' d='M8 8h8v8H8zM24 8h8v8H24zM40 8h8v8H40zM56 8h8v8H56zM16 16h8v8H16zM32 16h8v8H32zM48 16h8v8H48zM0 24h8v8H0zM8 24h8v8H8zM24 24h8v8H24zM40 24h8v8H40zM56 24h8v8H56zM16 32h8v8H16zM32 32h8v8H32zM48 32h8v8H48zM0 40h8v8H0zM8 40h8v8H8zM24 40h8v8H24zM40 40h8v8H40zM56 40h8v8H56zM16 48h8v8H16zM32 48h8v8H32zM48 48h8v8H48zM0 56h8v8H0zM8 56h8v8H8zM24 56h8v8H24zM40 56h8v8H40zM56 56h8v8H56z'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
}

/* Animated gradient overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(79, 195, 247, 0.08) 0%, transparent 70%),
              radial-gradient(ellipse 60% 40% at 100% 100%, rgba(102, 187, 106, 0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-pixel);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text-primary);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: 0.05em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); letter-spacing: 0.03em; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-family: var(--font-ui); font-weight: 600; }
h4 { font-size: clamp(1rem, 2vw, 1.25rem); font-family: var(--font-ui); font-weight: 600; }

p { color: var(--color-text-secondary); font-size: 1rem; }

a {
  color: var(--color-accent-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent-blue-dark); }

img { max-width: 100%; height: auto; display: block; }

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-blue-dark));
  color: var(--color-bg);
  box-shadow: var(--shadow-glow-blue);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(79, 195, 247, 0.4);
  color: var(--color-bg);
}

.btn-secondary {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  border: 2px solid var(--color-border);
}
.btn-secondary:hover {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
  transform: translateY(-2px);
}

.btn-success {
  background: linear-gradient(135deg, var(--color-accent-green), var(--color-accent-green-dark));
  color: var(--color-bg);
  box-shadow: var(--shadow-glow-green);
}
.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(102, 187, 106, 0.4);
  color: var(--color-bg);
}

.btn-outline {
  background: transparent;
  border: 2px solid currentColor;
  color: var(--color-accent-blue);
}
.btn-outline:hover {
  background: var(--color-accent-blue);
  color: var(--color-bg);
}

.btn-sm { padding: 10px 20px; font-size: 0.65rem; }
.btn-lg { padding: 18px 36px; font-size: 0.85rem; }

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.btn-icon { font-size: 1.1em; line-height: 1; }

/* Input */
.input {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-ui);
  font-size: 1rem;
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
}
.input:focus {
  outline: none;
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.2);
}
.input::placeholder { color: var(--color-text-muted); }

/* Card */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
}
.card:hover {
  border-color: var(--color-accent-blue);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: rgba(13, 17, 23, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  z-index: 1000;
  transition: all var(--transition-normal);
}

.header.scrolled {
  box-shadow: var(--shadow-md);
  background: rgba(13, 17, 23, 0.98);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-text-primary);
}

.nav-logo {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-green));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: 1.2rem;
  color: var(--color-bg);
  box-shadow: var(--shadow-glow-blue);
  animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(79, 195, 247, 0.4); }
  50% { box-shadow: 0 0 30px rgba(102, 187, 106, 0.5); }
}

.nav-title {
  font-family: var(--font-pixel);
  font-size: 1rem;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-accent-blue);
  transition: all var(--transition-normal);
  transform: translateX(-50%);
}
.nav-link:hover,
.nav-link.active {
  color: var(--color-accent-blue);
  background: rgba(79, 195, 247, 0.1);
}
.nav-link:hover::after,
.nav-link.active::after { width: 80%; }

.nav-actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: all var(--transition-fast);
}
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-height) + 40px) 24px 80px;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 100% 100% at 50% 0%, rgba(79, 195, 247, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 80% 80% at 100% 50%, rgba(102, 187, 106, 0.1) 0%, transparent 40%),
    url("https://picsum.photos/seed/clashblocks-hero/1920/1080.jpg") center/cover no-repeat;
  opacity: 0.15;
  animation: heroBgZoom 30s ease-in-out infinite alternate;
}

@keyframes heroBgZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  animation: heroFadeIn 1s ease-out forwards;
}

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

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(79, 195, 247, 0.15);
  border: 1px solid var(--color-accent-blue);
  border-radius: 100px;
  font-family: var(--font-pixel);
  font-size: 0.65rem;
  color: var(--color-accent-blue);
  margin-bottom: 24px;
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 10px rgba(79, 195, 247, 0.3); }
  50% { box-shadow: 0 0 20px rgba(79, 195, 247, 0.5); }
}

.hero-title {
  margin-bottom: 16px;
  background: linear-gradient(135deg, #fff 0%, var(--color-accent-blue) 50%, var(--color-accent-green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 60px rgba(79, 195, 247, 0.3);
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  color: var(--color-text-secondary);
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.stat-item { text-align: center; }
.stat-value {
  font-family: var(--font-pixel);
  font-size: clamp(2rem, 5vw, 3rem);
  background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero-ip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}
.hero-ip code {
  font-family: var(--font-pixel);
  color: var(--color-accent-green);
  background: rgba(102, 187, 106, 0.1);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
}

/* Floating blocks animation */
.hero-blocks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-block {
  position: absolute;
  width: 60px;
  height: 60px;
  background-size: cover;
  background-position: center;
  animation: floatBlock 6s ease-in-out infinite;
  opacity: 0.6;
}
.hero-block:nth-child(1) { top: 15%; left: 5%; animation-delay: 0s; background-image: url("https://picsum.photos/seed/dirt-block/64/64.jpg"); }
.hero-block:nth-child(2) { top: 25%; right: 8%; animation-delay: 1s; background-image: url("https://picsum.photos/seed/grass-block/64/64.jpg"); }
.hero-block:nth-child(3) { bottom: 20%; left: 10%; animation-delay: 2s; background-image: url("https://picsum.photos/seed/stone-block/64/64.jpg"); }
.hero-block:nth-child(4) { bottom: 30%; right: 12%; animation-delay: 3s; background-image: url("https://picsum.photos/seed/diamond-block/64/64.jpg"); }
.hero-block:nth-child(5) { top: 45%; left: 2%; animation-delay: 1.5s; background-image: url("https://picsum.photos/seed/gold-block/64/64.jpg"); }
.hero-block:nth-child(6) { top: 60%; right: 5%; animation-delay: 2.5s; background-image: url("https://picsum.photos/seed/emerald-block/64/64.jpg"); }

@keyframes floatBlock {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-20px) rotate(5deg); }
  50% { transform: translateY(10px) rotate(-3deg); }
  75% { transform: translateY(-15px) rotate(2deg); }
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-family: var(--font-pixel);
  animation: scrollBounce 2s ease-in-out infinite;
}
.hero-scroll svg { width: 24px; height: 24px; stroke: var(--color-accent-blue); }

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section {
  padding: 100px 24px;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}
.section-badge {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(79, 195, 247, 0.15);
  border: 1px solid var(--color-accent-blue);
  border-radius: 100px;
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  color: var(--color-accent-blue);
  margin-bottom: 16px;
}
.section-title { margin-bottom: 12px; }
.section-subtitle {
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.1rem;
}

/* ==========================================================================
   FEATURES / CARDS
   ========================================================================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.feature-card {
  position: relative;
  padding: 32px;
  background: linear-gradient(145deg, var(--color-bg-card), var(--color-bg-elevated));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent-blue), var(--color-accent-green));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-normal);
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-card:hover {
  border-color: var(--color-accent-blue);
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg), var(--shadow-glow-blue);
}

.feature-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-green));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 1.5rem;
}
.feature-title { margin-bottom: 12px; font-size: 1.25rem; }
.feature-desc { color: var(--color-text-secondary); line-height: 1.7; }

/* ==========================================================================
   ANNOUNCEMENTS
   ========================================================================== */
.announcements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
}

.announcement-card {
  padding: 24px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
}
.announcement-card:hover {
  border-color: var(--color-accent-blue);
  box-shadow: var(--shadow-md);
}

.announcement-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.announcement-category {
  padding: 4px 10px;
  background: rgba(79, 195, 247, 0.2);
  color: var(--color-accent-blue);
  border-radius: 100px;
  font-family: var(--font-pixel);
  font-size: 0.6rem;
}
.announcement-title { margin-bottom: 8px; font-size: 1.1rem; }
.announcement-excerpt { color: var(--color-text-secondary); margin-bottom: 16px; line-height: 1.6; }
.announcement-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-pixel);
  font-size: 0.65rem;
  color: var(--color-accent-blue);
  transition: gap var(--transition-fast);
}
.announcement-link:hover { gap: 10px; }

/* ==========================================================================
   SERVER STATUS
   ========================================================================== */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.status-card {
  text-align: center;
  padding: 32px 24px;
  background: linear-gradient(145deg, var(--color-bg-card), var(--color-bg-elevated));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
}
.status-card:hover { border-color: var(--color-accent-green); transform: translateY(-4px); }

.status-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: rgba(102, 187, 106, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-accent-green);
}
.status-value {
  font-family: var(--font-pixel);
  font-size: 2.5rem;
  color: var(--color-accent-green);
  margin-bottom: 4px;
}
.status-label {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.status-online { color: var(--color-accent-green); }
.status-offline { color: var(--color-accent-red); }

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.about-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
}
.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.about-image:hover img { transform: scale(1.05); }

.about-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.about-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.about-feature:hover { border-color: var(--color-accent-blue); }
.about-feature-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-green));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.about-feature-text { font-size: 0.875rem; color: var(--color-text-secondary); }
.about-feature-text strong { color: var(--color-text-primary); display: block; margin-bottom: 4px; }

/* ==========================================================================
   GAME MODES
   ========================================================================== */
.gamemodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.gamemode-card {
  position: relative;
  padding: 32px;
  background: linear-gradient(145deg, var(--color-bg-card), var(--color-bg-elevated));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
}
.gamemode-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--card-accent, var(--color-accent-blue));
}
.gamemode-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.gamemode-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.gamemode-icon {
  width: 72px;
  height: 72px;
  background: var(--icon-bg, rgba(79, 195, 247, 0.15));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}
.gamemode-info { flex: 1; }
.gamemode-title { margin-bottom: 4px; font-size: 1.35rem; }
.gamemode-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--tag-bg, rgba(79, 195, 247, 0.2));
  color: var(--tag-color, var(--color-accent-blue));
  border-radius: 100px;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
}
.gamemode-desc { color: var(--color-text-secondary); margin-bottom: 20px; line-height: 1.7; }

.gamemode-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.gamemode-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.gamemode-feature::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--color-accent-green);
  border-radius: 2px;
  flex-shrink: 0;
}

.gamemode-players {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.gamemode-players .players-online { color: var(--color-accent-green); font-weight: 600; }

/* ==========================================================================
   RULES
   ========================================================================== */
.rules-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 800px;
}

.rule-item {
  display: flex;
  gap: 16px;
  padding: 24px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
}
.rule-item:hover { border-color: var(--color-accent-blue); }
.rule-number {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-green));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: 1.25rem;
  color: var(--color-bg);
  flex-shrink: 0;
}
.rule-content { flex: 1; }
.rule-title { margin-bottom: 8px; font-size: 1.1rem; }
.rule-desc { color: var(--color-text-secondary); line-height: 1.6; }

.punishments {
  margin-top: 60px;
}
.punishment-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.punishment-table th,
.punishment-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.punishment-table th {
  background: var(--color-bg-elevated);
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  color: var(--color-accent-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.punishment-table tr:last-child td { border-bottom: none; }
.punishment-table tr:hover td { background: rgba(79, 195, 247, 0.05); }
.punishment-severity {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  font-weight: 600;
}
.severity-low { background: rgba(102, 187, 106, 0.2); color: var(--color-accent-green); }
.severity-medium { background: rgba(255, 213, 79, 0.2); color: var(--color-accent-gold); }
.severity-high { background: rgba(239, 83, 80, 0.2); color: var(--color-accent-red); }

/* ==========================================================================
   STORE
   ========================================================================== */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.rank-card {
  position: relative;
  padding: 32px;
  background: linear-gradient(145deg, var(--color-bg-card), var(--color-bg-elevated));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: all var(--transition-normal);
  overflow: hidden;
}
.rank-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--rank-color, var(--color-accent-blue));
}
.rank-card.featured {
  border-color: var(--color-accent-gold);
  transform: scale(1.02);
}
.rank-card.featured::after {
  content: 'POPULAR';
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 12px;
  background: var(--color-accent-gold);
  color: var(--color-bg);
  border-radius: 100px;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
}
.rank-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.rank-card.featured:hover { transform: scale(1.02) translateY(-8px); }

.rank-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: var(--rank-bg, rgba(79, 195, 247, 0.15));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  border: 2px solid var(--rank-color, var(--color-accent-blue));
}
.rank-title { margin-bottom: 8px; font-size: 1.5rem; }
.rank-price {
  font-family: var(--font-pixel);
  font-size: 1.5rem;
  color: var(--color-accent-green);
  margin-bottom: 20px;
}
.rank-price span { font-size: 0.7rem; color: var(--color-text-muted); }
.rank-perks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  text-align: left;
}
.rank-perk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.rank-perk::before {
  content: '';
  width: 18px;
  height: 18px;
  background: var(--color-accent-green);
  border-radius: 4px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0;
}

/* ==========================================================================
   STAFF
   ========================================================================== */
.staff-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.staff-tab {
  padding: 10px 24px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.staff-tab:hover { border-color: var(--color-accent-blue); color: var(--color-accent-blue); }
.staff-tab.active {
  background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-green));
  border-color: transparent;
  color: var(--color-bg);
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.staff-card {
  text-align: center;
  padding: 24px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
}
.staff-card:hover { border-color: var(--color-accent-blue); transform: translateY(-4px); }

.staff-avatar {
  width: 100px;
  height: 100px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--role-color, var(--color-accent-blue));
  box-shadow: 0 0 20px var(--role-glow, rgba(79, 195, 247, 0.3));
}
.staff-avatar img { width: 100%; height: 100%; object-fit: cover; }

.staff-name { margin-bottom: 4px; font-size: 1.1rem; }
.staff-role {
  display: inline-block;
  padding: 4px 12px;
  background: var(--role-bg, rgba(79, 195, 247, 0.2));
  color: var(--role-color, var(--color-accent-blue));
  border-radius: 100px;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  margin-bottom: 12px;
}
.staff-bio { color: var(--color-text-secondary); font-size: 0.875rem; line-height: 1.6; }
.staff-social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}
.staff-social a {
  width: 36px;
  height: 36px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}
.staff-social a:hover { border-color: var(--color-accent-blue); color: var(--color-accent-blue); transform: translateY(-2px); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}
.contact-item:hover { border-color: var(--color-accent-blue); }
.contact-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-green));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.contact-details h4 { margin-bottom: 4px; }
.contact-details p { color: var(--color-text-secondary); margin: 0; }

.contact-form {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ==========================================================================
   TERMS & CONDITIONS
   ========================================================================== */
.terms-content {
  max-width: 800px;
  margin: 0 auto;
}
.terms-section {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-border);
}
.terms-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.terms-section h3 { margin-bottom: 16px; color: var(--color-accent-blue); }
.terms-section p { margin-bottom: 12px; line-height: 1.8; }
.terms-section ul { margin-left: 20px; margin-bottom: 12px; }
.terms-section li { margin-bottom: 8px; line-height: 1.7; color: var(--color-text-secondary); }

/* Terms Modal */
.terms-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}
.terms-modal.active {
  opacity: 1;
  visibility: visible;
}
.terms-modal-content {
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transform: scale(0.9) translateY(20px);
  transition: transform var(--transition-normal);
}
.terms-modal.active .terms-modal-content { transform: scale(1) translateY(0); }
.terms-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.terms-modal-title { font-size: 1.5rem; }
.terms-modal-close {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.terms-modal-close:hover { border-color: var(--color-accent-red); color: var(--color-accent-red); }
.terms-modal-body { max-height: 50vh; overflow-y: auto; padding-right: 8px; }
.terms-modal-body::-webkit-scrollbar { width: 6px; }
.terms-modal-body::-webkit-scrollbar-track { background: var(--color-bg); border-radius: 3px; }
.terms-modal-body::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
.terms-modal-body p { margin-bottom: 12px; font-size: 0.875rem; line-height: 1.7; }
.terms-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  margin-top: auto;
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border);
  padding: 60px 24px 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 40px;
  max-width: var(--container-max);
  margin: 0 auto 40px;
}
.footer-brand { max-width: 300px; }
.footer-logo {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-green));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: 1.5rem;
  color: var(--color-bg);
  margin-bottom: 16px;
}
.footer-tagline { color: var(--color-text-secondary); font-size: 0.875rem; line-height: 1.7; margin-bottom: 16px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 40px;
  height: 40px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}
.footer-social a:hover { border-color: var(--color-accent-blue); color: var(--color-accent-blue); transform: translateY(-2px); }

.footer-title {
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  color: var(--color-accent-blue);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: var(--color-text-secondary); font-size: 0.875rem; transition: color var(--transition-fast); }
.footer-links a:hover { color: var(--color-accent-blue); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  max-width: var(--container-max);
  margin: 0 auto;
}
.footer-copyright { color: var(--color-text-muted); font-size: 0.875rem; }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { color: var(--color-text-muted); font-size: 0.875rem; transition: color var(--transition-fast); }
.footer-legal a:hover { color: var(--color-accent-blue); }

/* ==========================================================================
   PAGE HERO (for subpages)
   ========================================================================== */
.page-hero {
  position: relative;
  padding: calc(var(--header-height) + 80px) 24px 100px;
  text-align: center;
  background: 
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(79, 195, 247, 0.1) 0%, transparent 70%),
    url("https://picsum.photos/seed/clashblocks-page/1920/600.jpg") center/cover no-repeat;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13, 17, 23, 0.8);
}
.page-hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.page-hero-title { margin-bottom: 16px; }
.page-hero-subtitle { color: var(--color-text-secondary); font-size: 1.25rem; max-width: 600px; margin: 0 auto; }

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

.animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }
.animate-slide-in-right { animation: slideInRight 0.6s ease-out forwards; }

/* Stagger delays */
.delay-1 { animation-delay: 100ms; }
.delay-2 { animation-delay: 200ms; }
.delay-3 { animation-delay: 300ms; }
.delay-4 { animation-delay: 400ms; }
.delay-5 { animation-delay: 500ms; }
.delay-6 { animation-delay: 600ms; }

/* Intersection Observer animations */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .about-content { grid-template-columns: 1fr; gap: 40px; }
  .about-image { max-width: 600px; margin: 0 auto; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; max-width: none; }
}

@media (max-width: 768px) {
  .nav-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: rgba(13, 17, 23, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 24px;
    gap: 8px;
    border-bottom: 1px solid var(--color-border);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
  }
  .nav-menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .nav-link { width: 100%; justify-content: center; }
  .nav-toggle { display: flex; }
  .nav-actions .btn-secondary { display: none; }
  
  .hero-stats { gap: 24px; }
  .stat-value { font-size: 1.75rem; }
  
  .features-grid,
  .gamemodes-grid,
  .store-grid,
  .staff-grid { grid-template-columns: 1fr; }
  
  .form-row { grid-template-columns: 1fr; }
  
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; }
  
  .rule-item { flex-direction: column; text-align: center; }
  .rule-number { margin: 0 auto; }
  
  .punishment-table { font-size: 0.875rem; }
  .punishment-table th,
  .punishment-table td { padding: 12px 10px; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .nav { padding: 0 16px; }
  .section { padding: 60px 16px; }
  .hero { padding: calc(var(--header-height) + 20px) 16px 60px; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; max-width: 280px; }
  .page-hero { padding: calc(var(--header-height) + 60px) 16px 80px; }
  .feature-card,
  .gamemode-card,
  .rank-card,
  .staff-card { padding: 24px; }
  .terms-modal-content { padding: 24px 20px; }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-gradient {
  background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

/* Focus visible for accessibility */
:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: var(--color-accent-blue);
  color: var(--color-bg);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-bg,
  .hero-block,
  .hero-scroll,
  .nav-logo { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Clash Blocks - The Ultimate Minecraft Server Experience. Join thousands of players in Survival, Skyblock, Bedwars, and more!">
  <meta name="theme-color" content="#0d1117">
  <title>Clash Blocks | Minecraft Server</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Press+Start+2P&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect fill='%234fc3f7' width='100' height='100' rx='15'/%3E%3Ctext x='50' y='68' font-family='monospace' font-size='50' font-weight='bold' fill='%230d1117' text-anchor='middle'%3ECB%3C/text%3E%3C/svg%3E">
</head>
<body>
  <!-- Header / Navigation -->
  <header class="header" id="header">
    <nav class="nav" role="navigation" aria-label="Main navigation">
      <a href="index.html" class="nav-brand" aria-label="Clash Blocks Home">
        <div class="nav-logo" aria-hidden="true">CB</div>
        <span class="nav-title">Clash Blocks</span>
      </a>
      
      <ul class="nav-menu" id="navMenu" role="menubar">
        <li role="none"><a href="index.html" class="nav-link active" role="menuitem"><span>Home</span></a></li>
        <li role="none"><a href="about.html" class="nav-link" role="menuitem"><span>About</span></a></li>
        <li role="none"><a href="gamemodes.html" class="nav-link" role="menuitem"><span>Game Modes</span></a></li>
        <li role="none"><a href="rules.html" class="nav-link" role="menuitem"><span>Rules</span></a></li>
        <li role="none"><a href="store.html" class="nav-link" role="menuitem"><span>Store</span></a></li>
        <li role="none"><a href="staff.html" class="nav-link" role="menuitem"><span>Staff</span></a></li>
        <li role="none"><a href="contact.html" class="nav-link" role="menuitem"><span>Contact</span></a></li>
      </ul>
      
      <div class="nav-actions">
        <a href="https://discord.gg/Zk7RDpQkC" target="_blank" rel="noopener noreferrer" class="btn btn-primary" aria-label="Join our Discord">
          <svg class="btn-icon" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.675 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.992 4.794.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 1 0-.117-.156c.472.27 1.067.364 1.595.364.775 0 1.588-.166 2.342-.493a.077.077 0 1 0-.118-.156c-.597.257-1.216.345-1.867.345-.779 0-1.533-.155-2.248-.466a.077.077 0 1 0-.127.13c.608.272 1.296.466 2.004.466 2.285 0 4.443-.524 6.364-1.562a.077.077 0 1 0 .126.13c-.625.273-1.264.466-1.935.466-.515 0-1.07-.077-1.554-.23a.077.077 0 1 0-.128.127 12.3 12.3 0 0 0 1.637 3.407.077.077 0 0 0 .084.028c.475 0 .95-.044 1.416-.132a.073.073 0 0 0 .035-.083 19.9 19.9 0 0 0 5.431-4.273.077.077 0 0 0-.025-.115c-.561-6.311-2.245-11.63-5.748-15.626a.061.061 0 0 0-.033-.035ZM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419
<a href="https://discord.gg/Zk7RDpQkC" target="_blank" rel="noopener noreferrer" class="btn btn-primary" aria-label="Join our Discord">
          <svg class="btn-icon" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.675 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.992 4.794.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 1 0-.117-.156c.472.27 1.067.364 1.595.364.775 0 1.588-.166 2.342-.493a.077.077 0 1 0-.118-.156c-.597.257-1.216.345-1.867.345-.779 0-1.533-.155-2.248-.466a.077.077 0 1 0-.127.13c.608.272 1.296.466 2.004.466.515 0 1.07-.077 1.554-.23a.077.077 0 1 0 .126.13c-.625.273-1.264.466-1.935.466-.515 0-1.07-.077-1.554-.23a.077.077 0 1 0-.128.127 12.3 12.3 0 0 0 1.637 3.407.077.077 0 0 0 .084.028c.475 0 .95-.044 1.416-.132a.073.073 0 0 0 .035-.083 19.9 19.9 0 0 0 5.431-4.273.061.061 0 0 0-.033-.035ZM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1
[WEBSITE_PREVIEW]
filename: index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Clash Blocks - The Ultimate Minecraft Server Experience. Join thousands of players in Survival, Skyblock, Bedwars, and more!">
  <meta name="theme-color" content="#0d1117">
  <title>Clash Blocks | Minecraft Server</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Press+Start+2P&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect fill='%234fc3f7' width='100' height='100' rx='15'/%3E%3Ctext x='50' y='68' font-family='monospace' font-size='50' font-weight='bold' fill='%230d1117' text-anchor='middle'%3ECB%3C/text%3E%3C/svg%3E">
</head>
<body>
  <!-- Header / Navigation -->
  <header class="header" id="header">
    <nav class="nav" role="navigation" aria-label="Main navigation">
      <a href="index.html" class="nav-brand" aria-label="Clash Blocks Home">
        <div class="nav-logo" aria-hidden="true">CB</div>
        <span class="nav-title">Clash Blocks</span>
      </a>
      
      <ul class="nav-menu" id="navMenu" role="menubar">
        <li role="none"><a href="index.html" class="nav-link active" role="menuitem"><span>Home</span></a></li>
        <li role="none"><a href="about.html" class="nav-link" role="menuitem"><span>About</span></a></li>
        <li role="none"><a href="gamemodes.html" class="nav-link" role="menuitem"><span>Game Modes</span></a></li>
        <li role="none"><a href="rules.html" class="nav-link" role="menuitem"><span>Rules</span></a></li>
        <li role="none"><a href="store.html" class="nav-link" role="menuitem"><span>Store</span></a></li>
        <li role="none"><a href="staff.html" class="nav-link" role="menuitem"><span>Staff</span></a></li>
        <li role="none"><a href="contact.html" class="nav-link" role="menuitem"><span>Contact</span></a></li>
      </ul>
      
      <div class="nav-actions">
        <a href="https://discord.gg/Zk7RDpQkC" target="_blank" rel="noopener noreferrer" class="btn btn-primary" aria-label="Join our Discord">
          <svg class="btn-icon" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.675 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.992 4.794.078.078 0 0 0 .118-.156c.472.27 1.067.364 1.595.364.775 0 1.588-.166 2.342-.493a.077.077 0 1 0-.118-.156c-.597.257-1.216.466-1.867.466-.779 0-1.533-.155-2.248-.466a.077.077 0 1 0-.127.13c-.608.272-1.296.466-2.004.466-.515 0-1.07-.077-1.554-.23a.077.077 0 1 0-.128.127 12.3 12.3 0 0 0 1.637 3.407.077.077 0 0 0 .084.028c.475 0 .95-.044 1.416-.132a.073.073 0 0 0 .035-.083 19.9 19.9 0 0 0 5.431-4.273.061.061 0 0 0-.033-.035ZM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.1
[WEBSITE_PREVIEW]
filename: index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Clash Blocks - The Ultimate Minecraft Server Experience. Join thousands of players in Survival, Skyblock, Bedwars, and more!">
  <meta name="theme-color" content="#0d1117">
  <title>Clash Blocks | Minecraft Server</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Press+Start+2P&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect fill='%234fc3f7' width='100' height='100' rx='15'/%3E%3Ctext x='50' y='68' font-family='monospace' font-size='50' font-weight='bold' fill='%230d1117' text-anchor='middle'%3ECB%3C/text%3E%3C/svg%3E">
</head>
<body>
  <!-- Header / Navigation -->
  <header class="header" id="header">
    <nav class="nav" role="navigation" aria-label="Main navigation">
      <a href="index.html" class="nav-brand" aria-label="Clash Blocks Home">
        <div class="nav-logo" aria-hidden="true">CB</div>
        <span class="nav-title">Clash Blocks</span>
      </a>
      
      <ul class="nav-menu" id="navMenu" role="menubar">
        <li role="none"><a href="index.html" class="nav-link active" role="menuitem"><span>Home</span></a></li>
        <li role="none"><a href="about.html" class="nav-link" role="menuitem"><span>About</span></a></li>
        <li role="none"><a href="gamemodes.html" class="nav-link" role="menuitem"><span>Game Modes</span></a></li>
        <li role="none"><a href="rules.html" class="nav-link" role="menuitem"><span>Rules</span></a></li>
        <li role="none"><a href="store.html" class="nav-link" role="menuitem"><span>Store</span></a></li>
        <li role="none"><a href="staff.html" class="nav-link" role="menuitem"><span>Staff</span></a></li>
        <li role="none"><a href="contact.html" class="nav-link" role="menuitem"><span>Contact</span></a></li>
      </ul>
      
      <div class="nav-actions">
        <a href="https://discord.gg/Zk7RDpQkC" target="_blank" rel="noopener noreferrer" class="btn btn-primary" aria-label="Join our Discord">
          <svg class="btn-icon" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.675 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.992 4.794.078.078 0 0 0 .118-.156c.472.27 1.067.364 1.595.364.775 0 1.588-.166 2.342-.493a.077.077 0 1 0-.118-.156c-.597.257-1.216.466-1.867.466-.779 0-1.533-.155-2.248-.466a.077.077 0 1 0-.127.13c-.608.272-1.296.466-2.004.466-.515 0-1.07-.077-1.554-.23a.077.077 0 1 0-.128.127 12.3 12.3 0 0 0 1.637 3.407.077.077 0 0 0 .084.028c.475 0 .95-.044 1.416-.132a.073.073 0 0 0 .035-.083 19.9 19.9 0 0 0 5.431-4.273.061.061 0 0 0-.033-.035ZM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.33 1.003 2.418 2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.
<div class="container">
  <h1 class="section-title">Welcome to Clash Blocks</h1>
  <p class="section-subtitle">Your Ultimate Minecraft Server Experience</p>
  <div class="hero-badge">
    <span>🏆 Top Server</span>
    <span>10,000+ Players</span>
  </div>
</div>

<div class="hero">
  <div class="hero-bg"></div>
  <div class="hero-content">
    <h2 class="hero-title">Why Choose Clash Blocks?</h2>
    <p class="hero-subtitle">Experience the best Minecraft server with unique game modes, active community, and exciting features</p>
    <div class="hero-stats">
      <div class="stat-item">
        <div class="stat-value">1000+</div>
        <div class="stat-label">Players Online</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">50+</div>
        <div class="stat-label">Game Modes</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">4.9</div>
        <div class="stat-label">Rating</div>
      </div>
    </div>
    <div class="hero-actions">
      <a href="gamemodes.html" class="btn btn-primary">Explore Game Modes</a>
      <a href="store.html" class="btn btn-secondary">Visit Store</a>
      <a href="rules.html" class="btn btn-success">View Rules</a>
    </div>
  </div>
</div>

<div class="section">
  <div class="section-header">
    <div class="section-badge">Featured Game Modes</div>
    <h2 class="section-title">Game Modes</h2>
    <p class="section-subtitle">Choose your adventure and dominate the server</p>
  </div>
  <div class="features-grid">
    <div class="feature-card">
      <div class="feature-icon">
        <svg fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
        </svg>
      </div>
      <h3 class="feature-title">Survival Mode</h3>
      <p class="feature-desc">Build, explore, and survive in a challenging environment with unique features and rewards.</p>
    </div>
    <div class="feature-card">
      <div class="feature-icon">
        <svg fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
        </svg>
      </div>
      <h3 class="feature-title">Skyblock</h3>
      <p class="feature-desc">Start on floating islands and expand your territory with unique challenges and rewards.</p>
    </div>
    <div class="feature-card">
      <div class="feature-icon">
        <svg fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
        </svg>
      </div>
      <h3 class="feature-title">Bedwars</h3>
      <p class="feature-desc">Team up with friends to destroy enemy beds and defend yours in intense PvP battles.</p>
    </div>
  </div>
</div>

<div class="section">
  <div class="section-header">
    <div class="section-badge">Latest Updates</div>
    <h2 class="section-title">What's New</h2>
    <p class="section-subtitle">Stay updated with the latest features and improvements</p>
  </div>
  <div class="announcements-grid">
    <div class="announcement-card">
      <div class="announcement-meta">
        <span class="announcement-category">New Update</span>
        <span>2 hours ago</span>
      </div>
      <h3 class="announcement-title">🎉 New Map Update!</h3>
      <p class="announcement-excerpt">We've released a brand new map with exciting features and improvements. Explore the new challenges and rewards!</p>
      <a href="#" class="announcement-link">View Details →</a>
    </div>
    <div class="announcement-card">
      <div class="announcement-meta">
        <span class="announcement-category">Event</span>
        <span>5 hours ago</span>
      </div>
      <h3 class="announcement-title">🏆 Tournament Starting Soon!</h3>
      <p class="announcement-excerpt">Get ready for our annual tournament. Sign up now and compete for exclusive rewards and prizes!</p>
      <a href="#" class="announcement-link">View Details →</a>
    </div>
    <div class="announcement-card">
      <div class="announcement-meta">
        <span class="announcement-category">Maintenance</span>
        <span>1 day ago</span>
      </div>
      <h3 class="announcement-title">🔧 Server Maintenance</h3>
      <p class="announcement-excerpt">We're working on improving the server experience. The server will be down for maintenance today.</p>
      <a href="#" class="announcement-link">View Details →</a>
    </div>
  </div>
</div>

<div class="section">
  <div class="section-header">
    <div class="section-badge">Server Status</div>
    <h2 class="section-title">Current Status</h2>
    <p class="section-subtitle">Check the server status and availability</p>
  </div>
  <div class="status-grid">
    <div class="status-card">
      <div class="status-icon">
        <span class="status-online">●</span>
      </div>
      <div class="status-value">20/20</div>
      <div class="status-label">Server Online</div>
    </div>
    <div class="status-card">
      <div class="status-icon">
        <span class="status-online">●</span>
      </div>
      <div class="status-value">156/160</div>
      <div class="status-label">RAM Used</div>
    </div>
    <div class="status-card">
      <div class="status-icon">
        <span class="status-online">●</span>
      </div>
      <div class="status-value">45/64</div>
      <div class="status-label">CPU Usage</div>
    </div>
    <div class="status-card">
      <div class="status-icon">
        <span class="status-online">●</span>
      </div>
      <div class="status-value">128/256</div>
      <div class="status-label">Storage</div>
    </div>
  </div>
</div>

<div class="section">
  <div class="section-header">
    <div class="section-badge">Community</div>
    <h2 class="section-title">Join Our Community</h2>
    <p class="section-subtitle">Connect with players and share your experiences</p>
  </div>
  <div class="about-content">
    <div class="about-image">
      <img src="https://picsum.photos/seed/community/600/400.jpg" alt="Community">
    </div>
    <div class="about-features">
      <div class="about-feature">
        <div class="about-feature-icon">
          <svg fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
          </svg>
        </div>
        <div class="about-feature-text">
          <strong>Active Community</strong>
          <p>Join thousands of players from around the world</p>
        </div>
      </div>
      <div class="about-feature">
        <div class="about-feature-icon">
          <svg fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
          </svg>
        </div>
        <div class="about-feature-text">
          <strong>Regular Events</strong>
          <p>Participate in special events and tournaments</p>
        </div>
      </div>
      <div class="about-feature">
        <div class="about-feature-icon">
          <svg fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
          </svg>
        </div>
        <div class="about-feature-text">
          <strong>24/7 Support</strong>
          <p>Get help from our dedicated staff team</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="section">
  <div class="section-header">
    <div class="section-badge">Support</div>
    <h2 class="section-title">Get Support</h2>
    <p class="section-subtitle">We're here to help you with any questions or issues</p>
  </div>
  <div class="contact-grid">
    <div class="contact-info">
      <div class="contact-item">
        <div class="contact-icon">
          <svg fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
          </svg>
        </div>
        <div class="contact-details">
          <h4>Discord Support</h4>
          <p>Get instant help from our community</p>
        </div>
      </div>
      <div class="contact-item">
        <div class="contact-icon">
          <svg fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
          </svg>
        </div>
        <div class="contact-details">
          <h4>Email Support</h4>
          <p>Send us a message anytime</p>
        </div>
      </div>
      <div class="contact-item">
        <div class="contact-icon">
          <svg fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
          </svg>
        </div>
        <div class="contact-details">
          <h4>FAQ</h4>
          <p>Find answers to common questions</p>
        </div>
      </div>
    </div>
    <div class="contact-form">
      <h3 class="section-title">Contact Us</h3>
      <form id="contactForm">
        <div class="form-group">
          <label for="name" class="form-label">Your Name</label>
          <input type="text" id="name" name="name" class="form-input" required>
        </div>
        <div class="form-group">
          <label for="email" class="form-label">Your Email</label>
          <input type="email" id="email" name="email" class="form-input" required>
        </div>
        <div class="form-group">
          <label for="message" class="form-label">Message</label>
          <textarea id="message" name="message" class="form-input form-textarea" required></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Send Message</button>
      </form>
    </div>
  </div>
</div>

<div class="section">
  <div class="section-header">
    <div class="section-badge">Terms & Conditions</div>
    <h2 class="section-title">Terms & Conditions</h2>
    <p class="section-subtitle">Please read and understand our terms</p>
  </div>
  <div class="terms-content">
    <div class="terms-section">
      <h3>Acceptance of Terms</h3>
      <p>By using Clash Blocks, you agree to these terms and conditions. Please read them carefully before proceeding.</p>
      <p>We reserve the right to modify these terms at any time. Your continued use of our service constitutes acceptance of the updated terms.</p>
    </div>
    <div class="terms-section">
      <h3>User Accounts</h3>
      <p>You are responsible for maintaining the security of your account and password. You agree to notify us immediately if you suspect any unauthorized access to your account.</p>
      <p>We are not liable for any loss or damage resulting from the compromise of your account.</p>
    </div>
    <div class="terms-section">
      <h3>Content Policy</h3>
      <p>All content on Clash Blocks must comply with our content policy. Prohibited content includes:</p>
      <ul>
        <li>Hate speech or discriminatory content</li>
        <li>Spam or unsolicited messages</li>
        <li>Illegal activities or content</li>
        <li>Violence or threats</li>
      </ul>
    </div>
    <div class="terms-section">
      <h3>Dispute Resolution</h3>
      <p>Any disputes arising from these terms will be resolved in accordance with applicable laws. We reserve the right to suspend or terminate accounts that violate these terms.</p>
    </div>
    <div class="terms-section">
      <h3>Changes to Terms</h3>
      <p>We may update these terms from time to time. We will notify you of any changes by posting the new terms on this page. Your use of the service after such changes constitutes acceptance of the updated terms.</p>
    </div>
  </div>
</div>

<div class="section">
  <div class="section-header">
    <div class="section-badge">Privacy Policy</div>
    <h2 class