/* ===== Kingdom 1202 — theme ===== */
:root{
  --bg: #10121a;
  --bg-alt: #171a26;
  --panel: #1c1f2e;
  --line: #2c3044;
  --gold: #c9a227;
  --gold-bright: #e3bc4a;
  --crimson: #8f2636;
  --crimson-bright: #b23347;
  --text: #eae6da;
  --text-muted: #9a97a8;
  --font-display: 'Cinzel', serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }



/* ---- Navbar ---- */

.navbar.scrolled{
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  background: rgba(16,18,26,0.97);
}



.primary-button{
  background: linear-gradient(135deg, var(--crimson-bright), var(--crimson));
  color:#fff; padding:.65rem 1.4rem; border-radius:4px;
  font-weight:600; font-size:.92rem; border:1px solid rgba(255,255,255,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  display:inline-block;
}
.discord-button:hover, .primary-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(143,38,54,.35);
}
.secondary-button{
  padding:.65rem 1.4rem; border-radius:4px; font-weight:600; font-size:.92rem;
  border:1px solid var(--gold); color: var(--gold-bright);
  transition: background .2s ease, transform .2s ease;
  display:inline-block;
}
.secondary-button:hover{ background: rgba(201,162,39,.12); transform: translateY(-2px); }



/* ---- Hero ---- */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(201,162,39,.14), transparent 55%),
    linear-gradient(180deg, #0d0f16, #14172236 40%, var(--bg));
}
.hero-banners{ position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none; }
.hero-banners span{
  position:absolute; top:-10%; width:2px; height:120%;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  animation: drift 9s ease-in-out infinite;
}
.hero-banners span:nth-child(1){ left:18%; animation-delay:0s; }
.hero-banners span:nth-child(2){ left:50%; animation-delay:2s; }
.hero-banners span:nth-child(3){ left:80%; animation-delay:4s; }
@keyframes drift{ 0%,100%{ transform: translateY(0); opacity:.35; } 50%{ transform: translateY(3%); opacity:.8; } }

.hero-content{ position:relative; z-index:1; padding: 0 1.5rem; max-width: 760px; }
.small-title{
  font-family: var(--font-display); color: var(--gold-bright);
  letter-spacing:.25em; font-size:.85rem; margin-bottom:1rem;
}
.hero h1{
  font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.6rem);
  margin:0; font-weight:700; letter-spacing:.03em;
}
.hero h1 span{ color: var(--crimson-bright); }
.hero-text{ color: var(--text-muted); font-size:1.15rem; margin:1.2rem 0 2.2rem; }
.hero-buttons{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.scroll-cue{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:1; }
.scroll-cue span{
  display:block; width:22px; height:34px; border:2px solid var(--line); border-radius:12px; position:relative;
}
.scroll-cue span::after{
  content:''; position:absolute; top:6px; left:50%; width:4px; height:8px; background:var(--gold);
  border-radius:2px; transform:translateX(-50%); animation: scrolldot 1.6s ease-in-out infinite;
}
@keyframes scrolldot{ 0%{ opacity:1; top:6px; } 80%{ opacity:0; top:18px; } 100%{ opacity:0; top:6px; } }



/* ---- Footer ---- */
footer{ text-align:center; padding:3rem 2rem 2.5rem; border-top:1px solid var(--line); }
footer .logo{ font-family:var(--font-display); color:var(--gold-bright); font-size:1.2rem; }
footer .logo span{ color: var(--crimson-bright); }
footer p{ color: var(--text-muted); font-size:.9rem; margin:.4rem 0; }

/* ---- Scroll reveal ---- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity:1; transform:none; }

/* ---- Responsive ---- */