:root{
  --bg0:#06070b;
  --bg1:#0a0c12;
  --ink:#f4f4f6;
  --accent:#f2a23a;
  --r:22px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}

body{
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 800px at 15% 20%, rgba(255,255,255,0.07), transparent 60%),
    radial-gradient(1000px 700px at 85% 30%, rgba(242,162,58,0.12), transparent 60%),
    radial-gradient(900px 700px at 40% 80%, rgba(120,140,255,0.08), transparent 65%),
    linear-gradient(180deg,var(--bg1),var(--bg0));
  background-size:160% 160%;
  animation:drift 60s ease-in-out infinite;
}

@keyframes drift{
  0%{background-position:0% 0%;}
  50%{background-position:100% 60%;}
  100%{background-position:0% 0%;}
}

.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:80px 20px 44px;
}

.top{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding-bottom:48px;
}

.name{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.24em;
  font-size:clamp(34px,6vw,78px);
  opacity:0.9;
}

.ghost{
  margin-top:10px;
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(244,244,246,0.25);
}

.stage{
  display:grid;
  grid-template-columns:1.35fr 0.65fr;
  gap:30px;
  align-items:end;
}

.hero{
  border-radius:var(--r);
  box-shadow:0 80px 160px rgba(0,0,0,0.75);
  transform:translateX(-30px);
}

.heroImg{
  width:100%;
  border-radius:var(--r);
  filter:saturate(0.95) contrast(1.05) brightness(0.95);
  transition:transform 220ms ease,filter 220ms ease;
}

.hero:hover .heroImg{
  transform:scale(1.01);
  filter:saturate(1.0) contrast(1.08) brightness(1.0);
}

.links{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.links a{
  max-width:260px;
  text-decoration:none;
  color:rgba(244,244,246,0.55);
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:12px;
  padding:11px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.02);
  transition:all 160ms ease;
}

.links a:hover{
  color:var(--ink);
  border-color:rgba(242,162,58,0.6);
  background:rgba(255,255,255,0.05);
  transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(242,162,58,0.18);
}

.corner{
  position:fixed;
  right:18px;
  bottom:16px;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(244,244,246,0.22);
}

@media(max-width:860px){
  .stage{grid-template-columns:1fr;}
  .hero{transform:translateX(0);}
}

@media(prefers-reduced-motion:reduce){
  body{animation:none !important;}
}