/* Dark, modern landing page styles for ScumNet */
:root{
  --surface: #10151b;
  --surface-2: #0b0f14;
  --muted: #a7b0bb;
}

/* Match server list background for a unified look */
body{
  background: radial-gradient(1200px 800px at 0% 0%, #0e1520, #0b0f15) fixed;
}

/* Match brand logo styling from server list */
.brand-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
}

.hero .glass{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
}

.surface-card{
  /* Align card surface with server list */
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

.shadow-soft{ box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.25); }

.hover-lift{ transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,.4), 0 6px 14px rgba(0,0,0,.3); }

.feature-icon{
  width: 44px; height: 44px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}

/* Slight, subtle hero accent; keep understated to fit the list */
section.hero{ background: linear-gradient(180deg, rgba(13,110,253,.06), rgba(13,110,253,0) 35%); }

.card, .navbar, footer{ backdrop-filter: saturate(110%) blur(2px); }

/* Improve contrast for Bootstrap dark theme */
.text-body-secondary{ color: #b7c0cb !important; }
.border-dark-subtle{ border-color: rgba(255,255,255,.08) !important; }
.bg-body-tertiary{ background-color: rgba(255,255,255,.03) !important; }

/* Details accordion (no JS) */
.details-accordion .std-item{ overflow: hidden; }
.details-accordion .std-summary{ cursor: pointer; padding: .875rem 1rem; list-style: none; }
.details-accordion .std-summary::-webkit-details-marker{ display: none; }
.details-accordion .std-content{ padding: 0 1rem 1rem; }
.details-accordion .std-caret{ transition: transform .2s ease; }
.details-accordion details[open] .std-caret{ transform: rotate(180deg); }
.details-accordion details:hover{ box-shadow: 0 16px 30px rgba(0,0,0,.4), 0 6px 14px rgba(0,0,0,.3); }