/* Home Page CSS - Solace RSPS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');

:root {
  /* Main Colors */
  --bg-900: #0c0808;
  --bg-800: #150f0f;
  --bg-700: #1e1515;
  --bg-cobble: #160d0d;
  --stone-shadow: 0 2px 16px 0 rgba(0,0,0,0.7);
  /* Accent Colors */
  --cyan-glow: #e63946;
  --turquoise: #c1121f;
  --cyan-dark: #9d0208;
  --cyan-light: #ff6b6b;
  --silver: #c9bfbf;
  --steel: #997a7a;
  --white: #f8fafc;
  /* Gradients */
  --glow-gradient: linear-gradient(90deg, #e63946 0%, #c1121f 100%);
  --stone-gradient: linear-gradient(135deg, rgba(12,8,8,0.80) 0%, rgba(30,21,21,0.80) 100%);
  /* Typography */
  --font-primary: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-display: 'Poppins', 'Segoe UI', Arial, sans-serif;
  /* Spacing */
  --space-md: 0.6rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --container-max-width: 1300px;
  --header-height: 60px;
  --discord: #5865f2;
  --discord-hover: #4752c4;
}

/* Reset and Base Styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
body{font-family:var(--font-primary);font-size:0.95rem;line-height:1.5;color:var(--silver);background:var(--stone-gradient),url('/img/background.png')center/cover no-repeat fixed;background-blend-mode:overlay;min-height:100vh;overflow-x:hidden;}

/* Typography */
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.15;color:var(--turquoise);margin-bottom:var(--space-md);}
h1{font-size:2.1rem;font-weight:900;background:var(--glow-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 8px #e63946;margin-bottom:var(--space-md);}
h2{font-size:clamp(1.1rem,3vw,1.7rem);font-weight:700;}
h3{font-size:clamp(1rem,2vw,1.2rem);font-weight:600;}
h4{font-size:1rem;font-weight:600;}
p{margin-bottom:var(--space-md);color:var(--cyan-light);line-height:1.5;}

/* Layout Components */
.container{max-width:var(--container-max-width);margin:0 auto;padding:0 clamp(1rem,4vw,2rem);}

/* Hero Section */
.hero {
  /* background removed */
  padding: 2.5rem 0 2rem 0;
  text-align: center;
}
.hero-content{max-width:700px;margin:0 auto;}
.hero-buttons{display:flex;gap:1rem;justify-content:center;margin-top:2rem;}
.hero-buttons .btn {
  flex: 1 1 0;
  min-width: 180px;
  justify-content: center;
  text-align: center;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 2em;
  border-radius: 0.5rem;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 1rem;
  text-decoration: none;
  transition: background 180ms cubic-bezier(.4,0,.2,1),
              color 180ms cubic-bezier(.4,0,.2,1),
              box-shadow 180ms cubic-bezier(.4,0,.2,1),
              transform 180ms cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.10);
}

.btn-primary {
  background: var(--glow-gradient);
  color: var(--bg-900);
  box-shadow: 0 2px 12px 0 rgba(230,57,70,0.15);
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(90deg, #c1121f 0%, #ff6b6b 100%);
  color: var(--bg-900);
  box-shadow: 0 4px 20px 0 rgba(230,57,70,0.25);
  transform: translateY(-2px) scale(1.04);
}

.btn-secondary{background:var(--bg-800);color:var(--turquoise);border:1px solid var(--turquoise);}
.btn-secondary:hover{background:var(--turquoise);color:var(--bg-900);}
.btn-discord {
  background: var(--discord);
  color: #fff;
  box-shadow: 0 2px 12px 0 rgba(88,101,242,0.18);
}
.btn-discord:hover, .btn-discord:focus {
  background: var(--discord-hover);
  color: #fff;
  box-shadow: 0 4px 20px 0 rgba(88,101,242,0.28);
  transform: translateY(-2px) scale(1.04);
}

/* Features Section */
.section{padding:3rem 0;}
.section-header{text-align:center;margin-bottom:2rem;}
.grid{display:grid;gap:2rem;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.card{background:var(--bg-800);border-radius:0.5rem;box-shadow:var(--card-shadow);padding:2rem;transition:250ms;}
.card:hover{box-shadow:0 4px 24px 0 rgba(0,0,0,0.8);}
.card-header{margin-bottom:1rem;}
.card-title{font-size:1.2rem;font-weight:700;color:var(--turquoise);}
.card-subtitle{font-size:1rem;color:var(--cyan-light);}

/* Recent Updates/Guides */
.recent-item.card.card-bordered{border:1px solid var(--turquoise);}
.recent-link{color:var(--turquoise);text-decoration:underline;}
.recent-link:hover{color:var(--cyan-glow);}

/* Server Stats */
.text-center{text-align:center;}
.mt-xl{margin-top:2.2rem;}

.main {
  margin-top: var(--header-height);
}

.features-updates-flex {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}
.features-col {
  background: var(--bg-900);
  background-image:
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2P4//8/AwAI/AL+Qn6ZAAAAAElFTkSuQmCC');
  background-repeat: repeat;
  background-size: auto;
}
.updates-col {
  background: var(--bg-800);
  background-image:
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2P4//8/AwAI/AL+Qn6ZAAAAAElFTkSuQmCC');
  background-repeat: repeat;
  background-size: auto;
}
.stats-col {
  background: var(--bg-900);
  background-image:
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2P4//8/AwAI/AL+Qn6ZAAAAAElFTkSuQmCC');
  background-repeat: repeat;
  background-size: auto;
}
.features-col, .updates-col, .stats-col {
  flex: 1 1 350px;
  min-width: 320px;
  max-width: 100%;
  border: 1.5px solid var(--steel);
  border-radius: 0;
  box-shadow: 0 4px 32px 0 rgba(0,0,0,0.18);
  padding: 2.2rem 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
}

@media (max-width: 1100px) {
  .features-updates-flex {
    flex-direction: column;
    gap: 2.5rem;
  }
  .features-col, .updates-col {
    max-width: 100%;
  }
}

#recent-updates .recent-item.card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#recent-updates.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 1000px) {
  #recent-updates.grid {
    grid-template-columns: 1fr;
  }
}

/* --- INTERACTIVE HOVER EFFECTS --- */

/* 1. Card Hover: border glow and slight lift */
.card {
  transition: box-shadow 250ms, border-color 250ms, transform 220ms cubic-bezier(.4,0,.2,1);
  border: 1.5px solid var(--steel);
}
.card:hover {
  box-shadow: 0 8px 32px 0 rgba(230,57,70,0.15), 0 4px 24px 0 rgba(0,0,0,0.8);
  border-color: var(--turquoise);
  transform: translateY(-6px) scale(1.025);
}
.card:hover .card-title,
.card:hover .card-subtitle,
.card:hover p {
  filter: brightness(1.12);
  transition: filter 220ms;
}

/* 2. Button Hover: soft glow/outline */
.btn-primary:hover, .btn-primary:focus {
  box-shadow: 0 0 0 4px rgba(230,57,70,0.15), 0 4px 20px 0 rgba(230,57,70,0.25);
}
.btn-discord:hover, .btn-discord:focus {
  box-shadow: 0 0 0 4px rgba(88,101,242,0.18), 0 4px 20px 0 rgba(88,101,242,0.28);
}

/* 3. Section Header h2: animated underline on hover */
.section-header h2 {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.section-header h2::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 3px;
  background: var(--glow-gradient);
  border-radius: 2px;
  opacity: 0.7;
  transform: scaleX(0);
  transition: transform 0.32s cubic-bezier(.4,0,.2,1);
}
.section-header h2:hover::after,
.section-header h2:focus::after {
  transform: scaleX(1);
}

/* 4. .recent-link: animated underline on hover */
.recent-link {
  position: relative;
  text-decoration: none;
  transition: color 180ms;
}
.recent-link::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--turquoise);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
}
.recent-link:hover::after,
.recent-link:focus::after {
  transform: scaleX(1);
}


/* === IMPROVED RESPONSIVE RULES === */

/* h1 fluid sizing */
h1 { font-size: clamp(1.6rem, 4vw, 2.8rem) !important; }

/* Grid collapse rules */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .hero-buttons .btn { min-width: 0; }
  .features-col, .updates-col, .stats-col { min-width: 0; padding: 1.5rem 1.2rem; }
  .section { padding: 1.5rem 0; }
  .card { padding: 1.2rem; }
}
@media (max-width: 360px) {
  h1 { font-size: 1.4rem !important; }
  .btn { font-size: 0.9rem; padding: 0.6em 1.2em; }
}

/* 4K / large monitors */
@media (min-width: 1920px) {
  :root { --container-max-width: 1600px; }
  html { font-size: 18px; }
  h1 { font-size: clamp(2rem, 3vw, 3.5rem) !important; }
}
@media (min-width: 2560px) {
  :root { --container-max-width: 2100px; }
  html { font-size: 20px; }
}