*{box-sizing:border-box}
:root{
  --bg:#0a0a0f;
  --panel:#171720;
  --text:#fff;
  --muted:rgba(255,255,255,.82);
  --stroke:rgba(255,255,255,.09);
}
html,body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.shell{
  width:min(100%,760px);
  margin:0 auto;
  padding:0 18px 34px;
}
.hero{
  position:relative;
  height:min(58vh,640px);
  min-height:470px;
  margin:0 -18px;
  overflow:hidden;
  background:#222;
}
.hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 16%;
  display:block;
}
.hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.05) 0%,
      rgba(0,0,0,.10) 38%,
      rgba(0,0,0,.50) 72%,
      rgba(10,10,15,.98) 100%);
}
.hero-copy{
  position:absolute;
  left:22px;
  right:22px;
  bottom:22px;
  text-align:center;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.hero-copy h1{
  margin:0;
  font-size:clamp(34px,8vw,58px);
  line-height:1;
  letter-spacing:-.04em;
  font-weight:800;
}
.hero-copy .sub{
  margin-top:8px;
  font-size:clamp(17px,4vw,22px);
  color:rgba(255,255,255,.88);
}
.hero-copy p{
  margin:6px 0 0;
  font-size:clamp(16px,4.3vw,22px);
  color:var(--muted);
}
.links{
  display:grid;
  gap:16px;
  margin-top:8px;
}
.preview-card{
  position:relative;
  display:block;
  height:260px;
  border-radius:28px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  border:1px solid var(--stroke);
  background:#1a1a22;
  box-shadow:0 14px 34px rgba(0,0,0,.24);
}
.preview-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.preview-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.22) 42%,
    rgba(0,0,0,.04) 100%);
}
.preview-copy{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  text-align:center;
}
.preview-title{
  font-size:clamp(28px,6vw,38px);
  font-weight:800;
  letter-spacing:-.03em;
}
.link-card{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:110px;
  padding:20px;
  text-decoration:none;
  color:#fff;
  text-align:center;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 30px rgba(0,0,0,.20);
}
.link-card.pink{
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.10), transparent 28%),
    linear-gradient(135deg, #ff4ea2 0%, #f03d95 50%, #d82f7d 100%);
}
.link-title{
  font-size:clamp(26px,5.5vw,36px);
  font-weight:800;
  letter-spacing:-.03em;
}
footer{
  text-align:center;
  padding:22px 12px 0;
  color:#767682;
  font-size:12px;
}
@media (min-width:721px){
  .shell{padding-top:22px}
  .hero{
    margin:0;
    border-radius:28px;
    height:620px;
  }
}