:root{
  --gold-1:#F5D58A;
  --gold-2:#D4A645;
  --gold-3:#8C6C2D;
  --bg-1:#0c1016;
  --bg-2:#091018;
  --text:#E6E6E6;
  --muted:#9AA0A6;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: radial-gradient(800px 400px at 50% 20%, #0f141c 0%, transparent 60%) , radial-gradient(1200px 800px at 70% -10%, #0a0f16 0%, transparent 70%), linear-gradient(180deg,var(--bg-1),var(--bg-2));
  display:grid; place-items:center;
  font:400 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  overflow:hidden;
}
.bg::before{
  content:"";
  position:fixed; inset:-50vh -50vw;
  background-image:radial-gradient(#ffffff10 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.12; filter:blur(.7px);
  animation:drift 32s linear infinite;
  pointer-events:none;
}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-28px,-28px,0)}}

.container{
  width:min(92vw,1100px);
  text-align:center;
  padding:40px 16px 64px;
}

.logo-block{ position:relative; display:grid; place-items:center; margin-bottom:64px; }
.logo-img{ width:min(86vw, 300px); height:auto; filter: drop-shadow(0 6px 30px rgba(0,0,0,.6)); }
.logo-glow{
  position:absolute; width:360px; height:60px; border-radius:999px;
  background: radial-gradient(50% 50% at 50% 40%, rgba(245,213,138,.35) 0%, rgba(212,166,69,.20) 35%, rgba(0,0,0,0) 70%);
  filter: blur(28px);
  animation:halo 6s ease-in-out infinite;
  z-index:-1;
}
@keyframes halo{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.05);opacity:1}}

.title{
  margin:0;
  font-family:"Cinzel", serif;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1.05;
  font-size:clamp(16px,6vw,38px);
  text-transform:uppercase;
  display:inline-block;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 28px rgba(212,166,69,.25), 0 0 80px rgba(245,213,138,.18);
}

.divider{ display:flex; justify-content:center; margin:20px 0 20px; }
.divider span{
  display:block; width:120px; height:2px; border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--gold-2), transparent);
  box-shadow:0 6px 20px rgba(212,166,69,.35), 0 0 48px rgba(245,213,138,.2);
}

.lead{ margin:8px 0 10px; color:#cfd4da; font-size:clamp(14px,2.4vw,18px); }
.muted{ margin-top:14px; color:var(--muted); font-size:14px; }

.socials{ display:flex; gap:18px; align-items:center; justify-content:center; margin-top:28px; }
.social{
  width:54px; height:54px; border-radius:999px;
  display:grid; place-items:center;
  color:var(--gold-2);
  border:1px solid rgba(245,213,138,.25);
  background:radial-gradient(100% 100% at 50% 0%, rgba(245,213,138,.08), rgba(0,0,0,0));
  box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.social:hover{
  transform:translateY(-2px);
  border-color:rgba(245,213,138,.5);
  color:var(--gold-1);
  box-shadow:0 16px 44px rgba(0,0,0,.6), 0 0 32px rgba(212,166,69,.25);
}
.social:active{ transform:translateY(0) }

@media (prefers-reduced-motion: reduce){
  .logo-glow{ animation:none }
  .bg::before{ animation:none }
}