/* HERO + персонажи */
.hero{position:relative;padding:96px 0 80px;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.2;filter:grayscale(.35) contrast(1.1);
}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,12,.55) 0%,rgba(8,9,12,.9) 65%,var(--bg) 100%);
}
.hero-in{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{
  font-size:clamp(46px,9.5vw,116px);line-height:.9;text-transform:uppercase;
  letter-spacing:-1px;margin:0 0 8px;
}
.hero h1 span{
  display:block;color:transparent;-webkit-text-stroke:2px var(--red);
}
.hero .lead{max-width:46ch;margin-top:18px}
.hero-note{color:var(--mut);font-size:14px;margin-top:6px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-art{position:relative;aspect-ratio:1/1}
.hero-art img{
  position:absolute;border-radius:16px;border:1px solid var(--line2);
  box-shadow:var(--shadow);object-fit:cover;
  transition:transform .8s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, filter .35s ease;
  will-change:transform;
}
.hero-art img:nth-child(1){width:56%;left:0;top:6%;z-index:2;transform:rotate(-4deg)}
.hero-art img:nth-child(2){width:50%;right:2%;top:0;z-index:1;transform:rotate(5deg)}
.hero-art img:nth-child(3){width:46%;left:14%;bottom:0;z-index:3;transform:rotate(3deg)}
.hero-art img:nth-child(4){width:44%;right:0;bottom:8%;z-index:1;transform:rotate(-6deg)}

.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:#0b0d12;overflow:hidden;padding:14px 0;
  position:relative;
}
.marquee div{
  display:flex;gap:44px;white-space:nowrap;animation:mq 26s linear infinite;
  will-change:transform;
  font:700 15px/1 var(--head);letter-spacing:5px;text-transform:uppercase;
}
.marquee span{color:var(--mut)}
.marquee b{color:var(--red)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* персонажи */
.cast{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.cast-card{
  position:relative;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,var(--panel2),var(--panel));overflow:hidden;
  transition:.3s ease, box-shadow .35s ease, border-color .35s ease;
  display:flex;flex-direction:column;will-change:transform;
}
.cast-card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--ac,var(--red));opacity:.9;
}
.cast-card:hover{transform:translateY(-8px) scale(1.01);border-color:var(--line2);box-shadow:var(--shadow)}
.cast-ph{position:relative;aspect-ratio:3/4;overflow:hidden;background:#0a0c10}
.cast-ph img{width:100%;height:100%;object-fit:cover;transition:.65s cubic-bezier(.2,.7,.2,1);filter:saturate(1.05)}
.cast-card:hover .cast-ph img{transform:scale(1.08)}
.cast-ph::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(8,9,12,.92) 100%);
  transition:opacity .35s ease;
}
.cast-no{
  position:absolute;top:12px;right:14px;z-index:2;
  font:700 30px/1 var(--head);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35);
}
.cast-name{
  position:absolute;left:16px;right:16px;bottom:12px;z-index:2;
  font:700 24px/1 var(--head);letter-spacing:2px;text-transform:uppercase;
}
.cast-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.cast-role{font:700 11px/1.5 var(--head);letter-spacing:2px;text-transform:uppercase;color:var(--ac,var(--red))}
.cast-descr{font-size:14px;color:#a9b1c1;margin:0}
.cast-quote{
  margin-top:auto;padding-top:12px;border-top:1px dashed var(--line2);
  font-size:13.5px;font-style:italic;color:#cfd6e2;
}
.cast-quote::before{content:'«'}
.cast-quote::after{content:'»'}

@media (max-width:1020px){
  .hero-in{grid-template-columns:1fr}
  .hero-art{max-width:460px;margin:0 auto;width:100%}
  .cast{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .cast{grid-template-columns:1fr}
}