:root{
  --bg:#010712;
  --panel:#03111f;
  --blue:#14b5ff;
  --line:#087dbb;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at 50% 15%,#082441 0,#010712 40%,#00040a 100%);
}
a{text-decoration:none;color:inherit}

main{
  width:min(1600px,100%);
  margin:0 auto;
}

/* Big hero: shown completely, no object-fit cropping */
.hero{
  width:100%;
  height:360px;
  background:#000;
  overflow:hidden;
}
.hero img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 34%;
}

/* Social row */
.socials{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
  padding:20px 3.5% 14px;
  background:linear-gradient(#010a16,#010711);
}
.social{
  height:84px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  border:1.5px solid #079be9;
  border-radius:9px;
  background:linear-gradient(145deg,#07182b,#020914);
  box-shadow:0 0 14px #009dff44,inset 0 0 16px #008cff0d;
  transition:.18s ease;
}
.social:hover{
  transform:translateY(-2px);
  border-color:#30c2ff;
  box-shadow:0 0 22px #009dff77;
}
.social b{font-size:16px;letter-spacing:-.01em}
.platform-icon{
  width:44px;height:44px;border-radius:11px;
  display:grid;place-items:center;
  background:#050b12;
  position:relative;flex:0 0 auto;
  box-shadow:inset 0 0 14px #ffffff10;
}
.platform-icon svg{width:26px;height:26px;display:block}
.yt{background:#ff1f2d;color:#fff}
.tw{background:#6b25d9;color:#fff}
.tk{background:#0b0f14;color:#fff}
.ig{background:linear-gradient(135deg,#5f2fff 0%,#ff297d 52%,#ffbf3f 100%);color:#fff}
.xx{background:#090d13;color:#fff}
.dc{background:#5865f2;color:#fff}

/* Footer with signature */
footer{
  min-height:280px;
  padding:27px 20px 30px;
  border-top:1px solid #073b5c;
  text-align:center;
  background:
    linear-gradient(#010711cc,#010711e8),
    radial-gradient(circle at 50% 60%,#07345c55,transparent 45%);
}
.signature{
  display:block;
  width:min(330px,70vw);
  height:auto;
  margin:0 auto 12px;
  mix-blend-mode:screen;
}
.legacy{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:23px;
  color:#dfeaf4;
  font-size:8px;
  letter-spacing:.36em;
}
.legacy i{width:48px;height:2px;background:#17b3ff}
footer small{
  display:block;
  margin-top:12px;
  color:#9db0c2;
  font-size:10px;
}

.pending{cursor:default}

@media(max-width:1000px){
  .hero{height:290px}
  .socials{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:600px){
  .hero{
    height:auto;
    overflow:hidden;
    background:#010711;
    padding-top:10px;
  }
  .hero img{
    display:block;
    width:96%;
    height:auto;
    margin:0 auto;
    object-fit:contain;
    object-position:center top;
  }
  .socials{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    padding:10px 8px 10px;
  }
  .social{height:68px;gap:9px}
  .platform-icon{width:36px;height:36px;font-size:20px}
  .social b{font-size:13px}
  .scroll-cue{padding-bottom:18px}
  .signature{width:min(270px,76vw)}
  .legacy{gap:8px;font-size:6px;letter-spacing:.18em}
  .legacy i{width:18px}
  footer{min-height:220px}
}

.socials{padding-bottom:34px}
footer{margin-top:4px}

.social.pending{
  opacity:.58;
  filter:saturate(.75);
}
.social.pending:hover{
  transform:none;
  box-shadow:0 0 14px #009dff44,inset 0 0 16px #008cff0d;
  border-color:#079be9;
}