/* ============================================================
   layout.css — page structure & section styles
   ============================================================ */

/* ---------- Background layers (behind everything) -------- */
.bg-stage {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(106, 63, 191, 0.22), transparent 60%),
    radial-gradient(80% 60% at 50% 100%, rgba(255, 100, 40, 0.08), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-0));
}
.bg-stage::after { /* faint vignette */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 40%, transparent 50%, rgba(0, 0, 0, 0.75) 100%);
}
#particles {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/* ---------- Header -------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(6, 4, 12, 0.92), rgba(6, 4, 12, 0.6));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 76px;
}
.nav__logo { width: 188px; flex: 0 0 auto; }
.nav__logo img { width: 100%; height: auto; }
.nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.nav__menu a {
  position: relative;
  padding: 8px 14px;
  font-family: var(--ff-sans);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.2s;
}
.nav__menu a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}
.nav__menu a:hover { color: var(--silver); }
.nav__menu a:hover::after { opacity: 0.8; }
.nav__menu a.active {
  color: var(--violet-bright);
  background: linear-gradient(180deg, transparent, rgba(106, 63, 191, 0.22));
}
.nav__menu a.active::after { opacity: 1; }
.nav__play {
  margin-left: auto;
}

/* ---------- Hero --------------------------------------- */
.hero {
  position: relative;
  margin-top: 4px;
  padding: clamp(50px, 8vw, 110px) 0 clamp(30px, 4vw, 56px);
  overflow: hidden;
}
.hero__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero__art .art-castle {
  position: absolute;
  left: 4%;
  bottom: 0;
  width: clamp(220px, 26vw, 360px);
  opacity: 0.55;
  filter: drop-shadow(0 0 30px rgba(106, 63, 191, 0.4));
  animation: float-slow 14s ease-in-out infinite;
}
.hero__art .art-dragon {
  position: absolute;
  right: 0;
  bottom: -6%;
  width: clamp(360px, 46vw, 700px);
  opacity: 0.72;
  filter: drop-shadow(0 0 50px rgba(255, 120, 50, 0.25)) drop-shadow(0 0 80px rgba(106, 63, 191, 0.3));
  animation: float-slower 18s ease-in-out infinite;
}
.hero__art .art-bolt {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 90%;
  opacity: 0.5;
  animation: flicker-bolt 7s steps(2) infinite;
}
.hero__inner {
  position: relative;
  z-index: 2;
}
.hero__logo {
  width: clamp(320px, 48vw, 720px);
  margin: 0 auto;
  filter: drop-shadow(0 0 40px rgba(164, 116, 255, 0.35)) drop-shadow(0 0 60px rgba(255, 100, 40, 0.2));
  animation: logo-breathe 6s ease-in-out infinite;
}
.hero__tagline {
  text-align: center;
  margin-top: 14px;
}
.hero__tagline .h-eyebrow { letter-spacing: 0.6em; }
.hero__tagline .tagline {
  display: block;
  margin-top: 12px;
  font-size: clamp(1.1rem, 2.1vw, 1.9rem);
  background: linear-gradient(90deg, #fff, var(--violet-bright), var(--ember-bright));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__tagline .tagline-sub {
  display: block;
  margin-top: 8px;
  font-family: var(--ff-sans);
  font-size: clamp(0.72rem, 1.1vw, 0.9rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hero__cta { text-align: center; margin-top: 28px; }

/* ---------- Hero three-column band ---------------------- */
.hero-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  gap: 22px;
  align-items: start;
  margin-top: clamp(30px, 5vw, 56px);
}
.hero-grid .col-side { display: flex; flex-direction: column; gap: 18px; }

/* login sidebar */
.login-side .login-note { font-size: 0.78rem; color: var(--text-faint); text-align: center; margin-top: 14px; }
.login-side .login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
}
.login-side .login-divider::before,
.login-side .login-divider::after { content: ""; height: 1px; flex: 1; background: var(--line-soft); }
.login-side .login-divider span { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); }

/* server status sidebar */
.srv-side .srv-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.srv-side .srv-stat:last-of-type { border-bottom: 0; }
.srv-stat .label { flex: 1; font-size: 0.74rem; letter-spacing: 0.06em; color: var(--text-dim); }
.srv-stat .val { font-family: var(--ff-serif); color: var(--ember-bright); }
.srv-top { display: flex; align-items: center; justify-content: space-between; }
.srv-top .name { font-family: var(--ff-serif); letter-spacing: 0.1em; color: var(--violet-bright); }
.srv-online { display: flex; align-items: center; gap: 8px; font-family: var(--ff-sans); letter-spacing: 0.2em; font-size: 0.74rem; color: var(--online); }
.gear-promo {
  margin-top: 14px;
  padding: 16px;
  text-align: center;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(58, 29, 110, 0.5), rgba(10, 5, 18, 0.6));
}
.gear-promo .t { font-family: var(--ff-serif); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember-bright); }
.gear-promo .s { font-size: 0.78rem; color: var(--text-dim); margin-top: 6px; }

/* ---------- Feature cards ------------------------------- */
.features {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: clamp(30px, 4vw, 46px);
}
.feature {
  position: relative;
  text-align: center;
  padding: 22px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.feature::after { /* sheen */
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(201, 164, 255, 0.18), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s;
}
.feature:hover { transform: translateY(-6px); border-color: var(--violet); box-shadow: var(--glow-violet); }
.feature:hover::after { left: 130%; }
.feature__ico {
  width: 64px; height: 64px;
  margin: 0 auto 12px;
  filter: drop-shadow(0 0 14px rgba(106, 63, 191, 0.5));
}
.feature__ico svg { width: 100%; height: 100%; }
.feature__t { font-family: var(--ff-serif); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.92rem; color: var(--violet-bright); }
.feature__d { margin-top: 8px; font-size: 0.78rem; color: var(--text-dim); }

/* ---------- Dashboard grid ------------------------------ */
.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: clamp(26px, 3vw, 38px);
}

/* ---------- Footer -------------------------------------- */
.site-footer {
  position: relative;
  margin-top: clamp(48px, 6vw, 84px);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(10, 6, 22, 0.8));
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding: 44px 0 28px;
}
.footer-brand .logo-sm { width: 140px; margin-bottom: 14px; }
.footer-brand p { font-size: 0.82rem; color: var(--text-dim); max-width: 36ch; }
.footer-links h4, .footer-connect h4 { margin-bottom: 14px; }
.footer-links ul li { margin-bottom: 8px; }
.footer-links ul li a { font-family: var(--ff-sans); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); transition: color 0.2s; }
.footer-links ul li a:hover { color: var(--ember-bright); }
.footer-links, .footer-connect { display: flex; flex-direction: column; }
.footer-links ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 30px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.74rem;
  color: var(--text-faint);
  letter-spacing: 0.1em;
}
.footer-silhouette {
  position: absolute;
  right: -40px; bottom: -10px;
  width: 360px;
  opacity: 0.12;
  pointer-events: none;
}

/* ---------- Responsive ---------------------------------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 240px 1fr 240px; }
  .features { grid-template-columns: repeat(3, 1fr); }
  .dashboard { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav { gap: 12px; }
  .nav__menu { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .dashboard { grid-template-columns: 1fr; }
  .nav__play .btn--hero { --btn-pad: 10px 18px; font-size: 0.78rem; }
  .footer-links { grid-template-columns: 1fr; }
}