:root{
  --bg:#06101b;
  --bg2:#0d1624;
  --card:rgba(12,22,35,.76);
  --text:#fff6e7;
  --muted:#c9c0ae;
  --gold:#d4a64b;
  --gold2:#f2d28b;
  --purple:#6e3ea0;
  --line:rgba(242,210,139,.28);
  --shadow:0 30px 80px rgba(0,0,0,.46);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Georgia, "Times New Roman", serif;
  background:
    radial-gradient(circle at 20% 0%, rgba(110,62,160,.22), transparent 34%),
    radial-gradient(circle at 80% 18%, rgba(212,166,75,.18), transparent 32%),
    linear-gradient(180deg,#050b13,#08111d 45%,#03070d);
  color:var(--text);
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.noise{
  position:fixed; inset:0; pointer-events:none; opacity:.08; z-index:50;
  background-image:linear-gradient(45deg,rgba(255,255,255,.08) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.06) 25%,transparent 25%);
  background-size:5px 5px;
}

.topbar{
  position:fixed; inset:0 0 auto 0; height:76px; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(18px,4vw,58px);
  background:linear-gradient(180deg,rgba(4,9,16,.92),rgba(4,9,16,.56));
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.brand{display:flex; align-items:center; gap:12px}
.mark{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--gold); color:var(--gold2); font-size:1.6rem; font-weight:800;
  box-shadow: inset 0 0 20px rgba(212,166,75,.2), 0 0 28px rgba(110,62,160,.22);
}
.brand strong{display:block;letter-spacing:.13em;text-transform:uppercase;font-size:1.15rem}
.brand small{display:block;color:var(--muted);font-size:.76rem;letter-spacing:.06em}

nav{display:flex;align-items:center;gap:20px;color:var(--muted);font-size:.95rem}
nav a:hover{color:var(--gold2)}
.nav-cta{
  border:1px solid var(--gold);
  color:#120c03;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  padding:10px 15px;
  border-radius:999px;
  font-weight:700;
}

.hero{min-height:100vh; position:relative; display:grid; align-items:center; overflow:hidden}
.hero-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(3,7,13,.94) 0%,rgba(3,7,13,.78) 36%,rgba(3,7,13,.24) 75%,rgba(3,7,13,.7) 100%),
    url("../images/coming-soon.png") center/cover no-repeat;
  transform:scale(1.02);
}
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:260px;
  background:linear-gradient(0deg,var(--bg),transparent);
}
.hero-content{
  position:relative; z-index:2; width:min(980px,92vw); padding:140px 0 90px; margin-left:clamp(20px,6vw,90px);
}
.eyebrow{
  color:var(--gold2); text-transform:uppercase; letter-spacing:.24em;
  font-weight:800; font-size:.79rem; margin:0 0 12px;
}
h1,h2,h3{line-height:1.02;margin:0}
h1{
  font-size:clamp(3.4rem,9vw,8rem);
  max-width:870px;
  text-transform:uppercase;
  letter-spacing:.03em;
  text-shadow:0 6px 34px rgba(0,0,0,.65);
}
h2{font-size:clamp(2.3rem,5vw,4.8rem);letter-spacing:.02em}
h3{font-size:1.45rem;color:var(--gold2)}
.lead,p{color:var(--muted);line-height:1.65;font-size:1.06rem}
.lead{max-width:720px;font-size:1.25rem}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:13px 20px;border-radius:999px;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:.86rem;
  transition:.2s ease;
}
.button:hover{transform:translateY(-2px)}
.primary{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#120c03;box-shadow:0 16px 34px rgba(212,166,75,.18)}
.secondary{border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text)}
.big{font-size:1rem;padding:18px 26px}

.discord-code{
  margin-top:24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  color:var(--muted);
}
.discord-code span{text-transform:uppercase;letter-spacing:.18em;font-size:.75rem}
.discord-code button{
  cursor:pointer;border:1px solid var(--line);border-radius:12px;padding:11px 16px;
  color:var(--gold2);background:rgba(0,0,0,.35);font-family:inherit;font-size:1rem;
}

.intro,.showcase,.gallery-section,.departments,.final-cta{
  width:min(1180px,92vw);
  margin:auto;
  padding:84px 0;
}
.intro{
  display:grid;grid-template-columns:.9fr 1fr;gap:50px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:26px}
.section-head h2{max-width:780px}

.feature-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.feature{
  background:var(--card);border:1px solid rgba(255,255,255,.1);border-radius:28px;overflow:hidden;
  box-shadow:var(--shadow);position:relative;
}
.feature.large{grid-row:span 2}
.feature img{width:100%;height:100%;min-height:285px;object-fit:cover}
.feature.large img{min-height:610px}
.feature div{
  position:absolute;inset:auto 0 0 0;padding:26px;
  background:linear-gradient(0deg,rgba(3,7,13,.95),rgba(3,7,13,.55),transparent);
}

.gallery{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
.gallery img{
  height:360px;width:100%;object-fit:cover;border-radius:22px;
  border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow);
}
.gallery img:nth-child(2){grid-column:span 2}
.gallery img:nth-child(5){grid-column:span 2}

.dept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dept-grid article{
  background:var(--card);border:1px solid rgba(255,255,255,.1);border-radius:26px;overflow:hidden;
  box-shadow:var(--shadow);
}
.dept-grid img{height:430px;width:100%;object-fit:cover;object-position:top}
.dept-grid h3,.dept-grid p{padding-left:22px;padding-right:22px}
.dept-grid h3{padding-top:20px}
.dept-grid p{padding-bottom:24px}

.final-cta{
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  border-top:1px solid rgba(255,255,255,.08);
}
.final-cta p{max-width:700px}

footer{
  display:flex;justify-content:space-between;gap:20px;align-items:center;
  padding:30px clamp(20px,4vw,58px);
  border-top:1px solid rgba(255,255,255,.08);
  background:#02050a;color:var(--muted);
}
footer strong{color:var(--gold2);letter-spacing:.12em;text-transform:uppercase}

@media (max-width:900px){
  .topbar{height:auto;position:absolute;align-items:flex-start}
  nav{display:none}
  .hero-content{padding-top:105px;margin-inline:auto}
  .intro,.feature-grid,.dept-grid,.final-cta{grid-template-columns:1fr;display:grid}
  .gallery{grid-template-columns:1fr}
  .gallery img,.gallery img:nth-child(2),.gallery img:nth-child(5){grid-column:auto;height:280px}
  .feature.large img{min-height:380px}
  .dept-grid img{height:auto}
  footer{flex-direction:column;text-align:center}
}