:root {
  --bg: #05070a;
  --surface: rgba(13, 17, 23, .92);
  --surface-light: #121923;
  --gold: #d6aa57;
  --gold-light: #f2d38d;
  --blue: #49a7e8;
  --text: #f4f1e9;
  --muted: #a7adb7;
  --line: rgba(214, 170, 87, .27);
  --green: #55d990;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 0%, rgba(27, 75, 105, .25), transparent 42%),
    linear-gradient(180deg, #070a0f 0%, #05070a 50%, #07090d 100%);
  font-family: "Montserrat", sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .15;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  z-index: 20;
}

a { color: inherit; text-decoration: none; }

.ambient { position: fixed; border-radius: 50%; filter: blur(100px); opacity: .12; pointer-events: none; }
.ambient-one { width: 420px; height: 420px; background: #156699; top: 14%; left: -180px; }
.ambient-two { width: 420px; height: 420px; background: #a57021; bottom: 5%; right: -220px; }

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(22px, 5vw, 82px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(4,7,10,.95), rgba(4,7,10,.68));
  backdrop-filter: blur(14px);
}
.brand { display: flex; flex-direction: column; line-height: 1; }
.brand-main { font: 800 30px/1 "Cinzel", serif; letter-spacing: .16em; color: var(--gold-light); text-shadow: 0 0 18px rgba(214,170,87,.28); }
.brand-sub { margin-top: 5px; font-size: 8px; letter-spacing: .32em; color: #d9dde3; }
.nav { display: flex; gap: 34px; align-items: center; }
.nav a { position: relative; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #d9dde3; }
.nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:1px; background:var(--gold); transition:.25s; }
.nav a:hover::after { right:0; }
.menu-toggle { display:none; width:40px; height:40px; border:0; background:transparent; padding:8px; }
.menu-toggle span { display:block; height:2px; margin:5px 0; background:var(--gold-light); transition:.25s; }

.hero {
  position: relative;
  min-height: 760px;
  display: grid;
  place-items: center;
  padding: 130px 24px 90px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(4,6,9,.28), rgba(4,7,10,.92)),
    radial-gradient(circle at 50% 40%, rgba(44,94,127,.34), transparent 32%),
    linear-gradient(135deg, #08101a 0%, #15100c 48%, #05080d 100%);
}
.hero::before, .hero::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:620px;
  height:620px;
  border:1px solid rgba(214,170,87,.13);
  transform:rotate(45deg);
}
.hero::before { left:-370px; top:80px; }
.hero::after { right:-370px; bottom:-100px; }
.runes {
  position:absolute;
  inset:84px 0 0;
  opacity:.18;
  background-image:
    linear-gradient(30deg, transparent 48%, rgba(214,170,87,.15) 49%, transparent 51%),
    linear-gradient(-30deg, transparent 48%, rgba(214,170,87,.08) 49%, transparent 51%);
  background-size: 120px 120px;
  mask-image: radial-gradient(circle, #000 0%, transparent 68%);
}
.hero-content { width:min(850px,100%); text-align:center; position:relative; z-index:2; }
.eyebrow { margin:0 0 20px; font-size:11px; font-weight:700; letter-spacing:.38em; color:var(--gold-light); }
h1,h2,h3 { margin:0; font-family:"Cinzel",serif; }
h1 { font-size:clamp(48px,7.4vw,98px); line-height:.98; letter-spacing:-.025em; text-shadow:0 8px 45px rgba(0,0,0,.8); }
h1 span { color:transparent; -webkit-text-stroke:1px rgba(242,211,141,.9); text-shadow:0 0 28px rgba(214,170,87,.15); }
.intro { max-width:700px; margin:30px auto 36px; color:#c6cbd2; font-size:15px; line-height:1.8; }
.hero-button, .primary-action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 30px;
  border:1px solid var(--gold);
  background:linear-gradient(135deg,#b37c2f,#e0b75f);
  color:#11100d;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  box-shadow:0 8px 30px rgba(181,126,47,.22);
  transition:transform .2s, filter .2s, box-shadow .2s;
}
.hero-button:hover, .primary-action:hover { transform:translateY(-2px); filter:brightness(1.12); box-shadow:0 12px 38px rgba(181,126,47,.34); }
.scroll-hint { position:absolute; bottom:26px; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:8px; letter-spacing:.3em; color:#8f969f; }
.scroll-hint span { width:1px; height:42px; background:linear-gradient(var(--gold),transparent); }

.server-section { padding:110px clamp(20px,5vw,80px) 130px; max-width:1500px; margin:auto; }
.section-heading { text-align:center; margin-bottom:55px; }
.section-heading p { color:var(--gold); font-size:10px; font-weight:700; letter-spacing:.35em; }
.section-heading h2 { font-size:clamp(36px,5vw,58px); }
.ornament { display:block; width:110px; height:1px; margin:22px auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent); }

.server-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.server-card { position:relative; overflow:hidden; border:1px solid var(--line); background:linear-gradient(145deg,rgba(20,26,35,.97),rgba(8,11,16,.97)); box-shadow:0 28px 70px rgba(0,0,0,.34); transition:transform .3s,border-color .3s; }
.server-card:hover { transform:translateY(-7px); border-color:rgba(214,170,87,.65); }
.card-image { position:relative; height:220px; display:grid; place-items:center; overflow:hidden; border-bottom:1px solid var(--line); }
.card-image::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(120deg,transparent 0 28px,rgba(255,255,255,.026) 29px 30px); }
.classic .card-image { background:radial-gradient(circle at 50% 45%,rgba(61,132,181,.55),transparent 37%),linear-gradient(145deg,#07101b,#11141a 55%,#21170d); }
.season6 .card-image { background:radial-gradient(circle at 50% 45%,rgba(212,151,63,.48),transparent 37%),linear-gradient(145deg,#16100c,#10141b 55%,#07111a); }
.version-mark { position:relative; font:800 clamp(72px,9vw,118px)/1 "Cinzel",serif; color:rgba(255,255,255,.04); -webkit-text-stroke:1px rgba(242,211,141,.32); letter-spacing:.08em; }
.status { position:absolute; top:18px; right:18px; display:flex; align-items:center; gap:7px; padding:7px 11px; border:1px solid rgba(85,217,144,.35); background:rgba(4,12,9,.68); color:#aaf0c7; font-size:9px; font-weight:700; letter-spacing:.14em; }
.status i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.card-body { padding:34px; }
.card-kicker { margin:0 0 8px; color:var(--gold); font-size:9px; font-weight:700; letter-spacing:.28em; }
.card-body h3 { font-size:clamp(28px,3vw,40px); }
.card-copy { min-height:70px; margin:17px 0 27px; color:var(--muted); font-size:13px; line-height:1.75; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.stats div { padding:17px 8px; text-align:center; border-right:1px solid rgba(255,255,255,.08); }
.stats div:last-child { border-right:0; }
.stats span { display:block; margin-bottom:6px; color:#7f8791; font-size:8px; letter-spacing:.12em; }
.stats strong { color:#f1e0b8; font:700 14px/1 "Cinzel",serif; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:0; margin:24px 0 28px; list-style:none; }
.features li { position:relative; padding-left:16px; color:#b8bec6; font-size:11px; line-height:1.5; }
.features li::before { content:"◆"; position:absolute; left:0; top:1px; color:var(--gold); font-size:7px; }
.card-actions { display:grid; grid-template-columns:1.35fr 1fr; gap:12px; }
.primary-action, .secondary-action { min-height:48px; padding:0 16px; font-size:9px; }
.secondary-action { display:flex; align-items:center; justify-content:center; border:1px solid rgba(214,170,87,.48); color:var(--gold-light); font-size:9px; font-weight:700; letter-spacing:.15em; transition:.2s; }
.secondary-action:hover { background:rgba(214,170,87,.09); border-color:var(--gold); }

.community-section { max-width:1340px; margin:0 auto 120px; padding:55px clamp(25px,5vw,65px); display:flex; align-items:center; justify-content:space-between; gap:35px; border:1px solid var(--line); background:linear-gradient(120deg,rgba(18,25,34,.92),rgba(13,10,8,.94)); }
.community-section h2 { margin-bottom:12px; font-size:clamp(30px,4vw,48px); }
.community-section p:not(.eyebrow) { max-width:710px; margin:0; color:var(--muted); line-height:1.7; font-size:13px; }

footer { min-height:140px; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:35px clamp(22px,5vw,80px); border-top:1px solid rgba(255,255,255,.07); background:#040609; color:#7f8790; font-size:10px; }
.footer-logo { display:flex; flex-direction:column; }
.footer-logo strong { color:var(--gold-light); font:800 27px/1 "Cinzel",serif; letter-spacing:.18em; }
.footer-logo span { margin-top:5px; font-size:7px; letter-spacing:.28em; }

@media (max-width: 900px) {
  .topbar { height:70px; }
  .menu-toggle { display:block; }
  .nav { position:absolute; top:70px; left:0; right:0; display:grid; gap:0; max-height:0; overflow:hidden; background:rgba(4,7,10,.98); transition:max-height .3s; }
  .nav.open { max-height:240px; border-bottom:1px solid var(--line); }
  .nav a { padding:18px 24px; border-top:1px solid rgba(255,255,255,.05); }
  .nav a::after { display:none; }
  .server-grid { grid-template-columns:1fr; max-width:700px; margin:auto; }
  .community-section { margin-inline:20px; flex-direction:column; align-items:flex-start; }
}

@media (max-width: 600px) {
  .hero { min-height:680px; padding-top:105px; }
  .eyebrow { letter-spacing:.22em; line-height:1.6; }
  h1 { font-size:46px; }
  .intro { font-size:13px; }
  .server-section { padding-top:80px; }
  .card-image { height:170px; }
  .card-body { padding:25px 20px; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .stats div:nth-child(2) { border-right:0; }
  .stats div:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.08); }
  .features { grid-template-columns:1fr; }
  .card-copy { min-height:0; }
  .card-actions { grid-template-columns:1fr; }
  footer { flex-direction:column; align-items:flex-start; }
}