@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Oxanium:wght@500;600;700;800&display=swap');

:root {
  --bg: #060d17;
  --bg2: #0a1524;
  --panel: rgba(13, 29, 48, .85);
  --panel-solid: #0d1d30;
  --line: rgba(126, 194, 255, .14);
  --text: #eff7ff;
  --muted: #8fa8bd;
  --blue: #4bb7ff;
  --blue2: #0b80db;
  --cyan: #80dcff;
  --shadow: 0 24px 70px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.sky {
  position: fixed; inset: 0; pointer-events: none; z-index: -4;
  background:
    linear-gradient(rgba(6, 13, 23, 0.76), rgba(5, 11, 19, 0.93)),
    url('assets/bg.png') center / cover no-repeat fixed;
}

.container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

.navbar {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid rgba(128, 195, 255, .1);
  background: rgba(4, 10, 18, .78);
  backdrop-filter: blur(18px);
}
.nav-inner { height: 76px; display: flex; align-items: center; gap: 26px; }
.brand { display: flex; gap: 12px; align-items: center; margin-right: auto; }
.brand-img {
  height: 46px;
  max-width: 170px;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(0, 140, 255, .35));
}
.brand-mark {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(128, 220, 255, .35); border-radius: 10px;
  background: linear-gradient(135deg, #0b79cf, #154e80);
  font: 800 13px Oxanium, sans-serif;
  box-shadow: 0 7px 20px rgba(0, 125, 230, .2);
}
.brand strong { display: block; font: 800 16px Oxanium, sans-serif; letter-spacing: .08em; }
.brand small { display: block; color: var(--muted); font-size: 9px; letter-spacing: .28em; }
.nav-links { display: flex; gap: 25px; color: #b6c8da; font-size: 14px; }
.nav-links a:hover { color: white; }
.menu-toggle { display: none; background: none; border: 0; color: white; font-size: 24px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px; border-radius: 12px;
  font-weight: 800; font-size: 14px; border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  color: white; background: linear-gradient(135deg, #138dde, #095fa8);
  box-shadow: 0 12px 28px rgba(10, 119, 210, .25);
}
.btn-ghost { background: rgba(255,255,255,.025); border-color: var(--line); }
.btn-small { min-height: 40px; padding: 0 15px; }

.hero { position: relative; min-height: 710px; display: grid; align-items: center; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: auto 0 0; height: 260px;
  background: linear-gradient(transparent, #060d17);
}
.hero-content { position: relative; z-index: 2; padding: 95px 0 125px; }
.status-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px;
  border: 1px solid rgba(97, 196, 255, .16); border-radius: 999px;
  background: rgba(40, 128, 181, .08); color: #c0dcf4;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
}
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #3de28a; box-shadow: 0 0 16px #3de28a; }
.hero h1 {
  max-width: 760px; margin: 24px 0 17px;
  font: 800 clamp(46px, 8vw, 92px)/.94 Oxanium, sans-serif;
  letter-spacing: -.035em;
}
.hero h1 span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(120, 213, 255, .9);
}
.hero p { max-width: 650px; color: #9db2c7; font-size: 18px; }
.hero-actions { display: flex; gap: 12px; margin-top: 28px; }
.hero-stats { display: flex; gap: 46px; margin-top: 50px; }
.hero-stats strong { display: block; font: 800 28px Oxanium, sans-serif; }
.hero-stats span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }

.city-grid {
  position: absolute; inset: 18% 0 0; opacity: .55; transform: perspective(500px) rotateX(56deg) scale(1.35);
  transform-origin: bottom;
  background:
    linear-gradient(rgba(78, 167, 232, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78, 167, 232, .11) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(to bottom, transparent, black 34%, black);
}
.city-grid::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 15%; height: 140px;
  background:
    linear-gradient(90deg, transparent 0 5%, #0d2031 5% 12%, transparent 12% 15%, #10263a 15% 20%, transparent 20% 26%, #0c1a2a 26% 34%, transparent 34% 38%, #112b40 38% 48%, transparent 48% 52%, #0e2034 52% 59%, transparent 59% 64%, #122b40 64% 71%, transparent 71% 78%, #0c1a2a 78% 88%, transparent 88%);
  clip-path: polygon(0 38%,4% 38%,4% 15%,9% 15%,9% 0,14% 0,14% 48%,20% 48%,20% 22%,26% 22%,26% 60%,34% 60%,34% 18%,39% 18%,39% 43%,46% 43%,46% 8%,52% 8%,52% 55%,58% 55%,58% 30%,63% 30%,63% 48%,70% 48%,70% 12%,76% 12%,76% 54%,83% 54%,83% 24%,90% 24%,90% 48%,96% 48%,96% 30%,100% 30%,100% 100%,0 100%);
  box-shadow: inset 0 16px 0 #17314a;
}

.section { padding: 105px 0; }
.section-alt { background: rgba(13, 29, 48, .36); border-block: 1px solid rgba(128, 195, 255, .07); }
.section-heading { margin-bottom: 38px; }
.eyebrow { color: var(--cyan); font: 700 11px Oxanium, sans-serif; letter-spacing: .2em; }
.section-heading h2 { margin: 9px 0 8px; font: 700 clamp(30px, 5vw, 48px) Oxanium, sans-serif; letter-spacing: -.025em; }
.section-heading p { color: var(--muted); margin: 0; }

.server-panel {
  display: grid; grid-template-columns: 1.5fr 1fr; overflow: hidden;
  border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: var(--shadow);
}
.server-main { display: flex; align-items: center; gap: 18px; padding: 28px; }
.server-icon {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 15px;
  background: linear-gradient(145deg, #103a5a, #0b1d31); border: 1px solid rgba(106, 203, 255, .18); font-size: 24px;
}
.muted { color: #7190aa; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.server-main h3 { margin: 4px 0 0; font: 700 22px Oxanium, sans-serif; }
.copy-btn {
  margin-left: auto; border: 1px solid var(--line); background: #081625; color: #c7dbed;
  padding: 10px 13px; border-radius: 10px; cursor: pointer;
}
.server-details { display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid var(--line); }
.server-details div { padding: 22px; display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid var(--line); }
.server-details div:nth-child(2n) { border-left: 1px solid var(--line); }
.server-details span { color: #6f88a0; font-size: 11px; }
.server-details strong { font-size: 13px; }
.online { color: #52e69a; }
.offline { color: #ff5c5c; }

.cards.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 18px; }
.info-card, .job-card {
  padding: 25px; border: 1px solid var(--line); border-radius: 17px;
  background: rgba(9, 22, 36, .68); transition: transform .2s ease, border-color .2s ease;
}
.info-card:hover, .job-card:hover { transform: translateY(-4px); border-color: rgba(100, 197, 255, .25); }
.card-icon { font-size: 23px; }
.info-card h3, .job-card h3 { margin: 14px 0 5px; font-size: 17px; }
.info-card p, .job-card p { margin: 0; color: var(--muted); font-size: 13px; }

.jobs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.job-card > span { font-size: 31px; }

.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.rule {
  display: flex; gap: 18px; padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: rgba(10, 22, 36, .58);
}
.rule > b { color: #64c8ff; font: 700 13px Oxanium; }
.rule h3 { margin: 0 0 4px; font-size: 16px; }
.rule p { margin: 0; color: var(--muted); font-size: 13px; }

.faq { display: grid; gap: 10px; }
details { border: 1px solid var(--line); border-radius: 15px; background: rgba(10, 22, 36, .58); padding: 0 18px; }
summary { cursor: pointer; padding: 18px 4px; font-weight: 700; }
details p { color: var(--muted); padding: 0 4px 17px; margin: 0; }
code { color: #9adfff; }

.join-section { padding: 25px 0 105px; }
.join-box {
  display: flex; justify-content: space-between; align-items: center; gap: 30px;
  padding: 40px; border-radius: 24px; border: 1px solid rgba(91, 192, 255, .2);
  background:
    radial-gradient(circle at 80% 30%, rgba(34, 146, 221, .14), transparent 30%),
    linear-gradient(135deg, #0d253b, #091624);
  box-shadow: var(--shadow);
}
.join-box h2 { margin: 7px 0; font: 700 38px Oxanium; }
.join-box p { color: var(--muted); margin: 0; }
.join-actions { display: flex; gap: 10px; flex-shrink: 0; }

footer { border-top: 1px solid var(--line); padding: 28px 0; background: #050a12; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.footer-inner strong { font: 700 14px Oxanium; letter-spacing: .08em; }
.footer-inner p { color: #647b91; font-size: 12px; margin: 5px 0 0; }
.footer-links { display: flex; gap: 20px; color: #8299ad; font-size: 12px; }

.toast {
  position: fixed; bottom: 25px; left: 50%; transform: translate(-50%, 20px);
  opacity: 0; pointer-events: none; padding: 10px 15px; border-radius: 9px;
  background: #dff6ff; color: #06111d; font-weight: 800; font-size: 12px;
  transition: .25s ease; z-index: 40;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 850px) {
  .nav-links, .nav-cta { display: none; }
  .menu-toggle { display: block; }
  .nav-inner.open .nav-links {
    display: flex; position: absolute; top: 76px; left: 0; right: 0; padding: 17px 20px;
    background: rgba(4, 10, 18, .97); border-bottom: 1px solid var(--line);
    flex-direction: column; gap: 16px;
  }
  .hero { min-height: 650px; }
  .hero h1 { font-size: clamp(43px, 12vw, 75px); }
  .server-panel { grid-template-columns: 1fr; }
  .server-details { border-left: 0; border-top: 1px solid var(--line); }
  .cards.three, .jobs-grid { grid-template-columns: 1fr 1fr; }
  .join-box { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .container { width: min(100% - 28px, 1120px); }
  .hero-content { padding: 75px 0 105px; }
  .hero p { font-size: 15px; }
  .hero-actions, .join-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn, .join-actions .btn { width: 100%; }
  .hero-stats { gap: 20px; flex-wrap: wrap; }
  .server-main { flex-wrap: wrap; }
  .copy-btn { margin-left: 0; width: 100%; }
  .server-details { grid-template-columns: 1fr; }
  .server-details div:nth-child(2n) { border-left: 0; }
  .cards.three, .jobs-grid, .rules-grid { grid-template-columns: 1fr; }
  .join-box { padding: 28px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}