:root{
  --dark:#1a0d12; --pink:#e01a4f; --magenta:#ec3b8b; --orange:#f1592a;
  --yellow:#f7e64a; --cream:#fff4e8;
  --display:Anton, Impact, Haettenschweiler, sans-serif;
  --body:Archivo, Helvetica, Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--body);background:var(--dark);color:var(--cream);overflow-x:hidden}
img{max-width:100%}
a{color:var(--yellow);text-decoration:none}
a:hover{color:#fff}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;margin:0}
p{margin:0}
::selection{background:var(--yellow);color:var(--dark)}
.wrap{max-width:1500px;margin:0 auto}
.strong{font-weight:700}
.dim{opacity:.62;font-size:13px}

.btn{display:inline-block;padding:15px 28px;border-radius:999px;font-weight:700;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;transition:background .2s,color .2s}
.btn-dark{background:var(--dark);color:var(--yellow)}
.btn-dark:hover{background:var(--yellow);color:var(--dark)}
.btn-pink{background:var(--pink);color:var(--cream);padding:12px 20px;font-size:13px}
.btn-pink:hover{background:var(--dark);color:var(--yellow)}

.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px 40px;background:var(--pink);position:sticky;top:0;z-index:30}
.site-header .logo{height:46px;width:auto;display:block}
.site-header nav a{color:var(--cream);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}

.hero{background:linear-gradient(100deg,var(--pink) 0%,var(--magenta) 38%,var(--orange) 100%)}
.hero-grid{padding:56px 40px 60px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:48px;align-items:center}
.pill{display:inline-block;background:var(--dark);color:var(--yellow);font-weight:700;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;padding:9px 18px;border-radius:999px;margin-bottom:22px}
.hero h1{color:var(--yellow);font-size:clamp(58px,10vw,168px);line-height:1.02;
  letter-spacing:-.01em;text-shadow:0 6px 0 rgba(26,13,18,.18)}
.hero-sub{font-family:var(--display);font-size:clamp(22px,2.6vw,38px);letter-spacing:.06em;
  text-transform:uppercase;margin-top:22px}
.hero-text{margin:14px 0 30px;font-size:16px;line-height:1.65;max-width:46ch;text-wrap:pretty}
.poster{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 24px 60px rgba(26,13,18,.35)}

.intro{padding:64px 40px 8px}
.intro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:36px 56px;align-items:start}
.intro h2{font-size:clamp(30px,3.6vw,52px);letter-spacing:.02em;color:var(--yellow);line-height:1.05}
.lede{padding-left:22px;border-left:4px solid var(--pink);font-family:var(--display);
  font-size:clamp(20px,2vw,28px);line-height:1.35;text-transform:uppercase;text-wrap:pretty}
.lede span{color:var(--yellow)}

.slider-section{padding:56px 40px 72px}
.row-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px}
.h-yellow{font-size:clamp(28px,3.4vw,46px);letter-spacing:.03em;color:var(--yellow)}
.nav-btns{display:flex;gap:10px}
.round{width:48px;height:48px;border-radius:999px;border:2px solid var(--yellow);background:transparent;
  color:var(--yellow);font-size:18px;cursor:pointer;font-family:var(--body);transition:background .2s,color .2s}
.round:hover{background:var(--yellow);color:var(--dark)}
.slider{overflow:hidden;border-radius:8px}
.track{display:flex;align-items:stretch;margin:0;padding:0;list-style:none;
  transition:transform 700ms cubic-bezier(.4,0,.2,1)}
.slide{flex:0 0 100%;min-width:100%;display:grid;grid-template-columns:1fr 1.05fr;
  grid-template-rows:minmax(420px,auto)}
.slide-media{display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(26,13,18,.18)}
.slide-media img{display:block;width:100%;max-width:460px;height:auto;border-radius:4px}
.slide-body{padding:clamp(28px,3.6vw,52px);display:flex;flex-direction:column;justify-content:center;gap:22px}
.tag{display:inline-block;background:var(--yellow);color:var(--dark);font-weight:700;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:999px}
.slide-title{font-size:clamp(34px,4.4vw,68px);line-height:.92;margin-top:18px}
.slide-meta{display:flex;flex-direction:column;gap:6px;font-size:16px;line-height:1.5}
.slide-body .btn{align-self:flex-start}
.dots{display:flex;gap:8px;margin-top:20px}
.dot{height:4px;width:24px;background:rgba(247,230,74,.32);border:0;padding:0;border-radius:4px;
  cursor:pointer;transition:all .4s ease}
.dot.is-active{width:60px;background:var(--yellow)}

.prog{background:var(--cream);color:var(--dark);padding:76px 40px 84px}
.prog-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:16px;
  margin-bottom:42px;padding-bottom:20px;border-bottom:3px solid var(--pink)}
.prog h2{font-size:clamp(36px,5.4vw,82px);color:var(--pink)}
.count{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:36px 28px}
.card{display:flex;flex-direction:column;background:#fff;border:2px solid var(--dark);border-radius:8px;
  overflow:hidden;transition:transform .2s}
.card:hover{transform:translateY(-4px)}
.card>img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.card-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.card-genre{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.card-title{font-size:30px;line-height:1.02;color:var(--dark)}
.card-meta{font-size:14px;line-height:1.55;color:rgba(26,13,18,.75)}
.card-meta .strong{color:var(--dark)}
.card-meta .dim{color:rgba(26,13,18,.55)}
.card .btn{margin-top:auto;align-self:flex-start}

.infos{background:var(--pink);padding:72px 40px}
.infos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:44px}
.infos h2{font-size:clamp(32px,4vw,58px);line-height:.94;color:var(--yellow)}
.infos p{font-size:16px;line-height:1.65;max-width:42ch;margin-top:16px;text-wrap:pretty}
.col{display:flex;flex-direction:column;gap:10px}
.col a{font-size:16px;color:var(--cream)}
.label{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,244,232,.7);margin:0!important}
.phone{font-family:var(--display);font-size:34px!important;color:var(--yellow)!important;letter-spacing:.03em}
.col address{font-style:normal;font-size:14px;color:rgba(255,244,232,.75);line-height:1.5}
.ico{display:flex;align-items:center;gap:10px}
.ico svg{flex:0 0 auto}

.site-footer{background:var(--dark);padding:28px 40px 40px;display:flex;flex-wrap:wrap;gap:16px;
  justify-content:space-between;font-size:13px}
.site-footer a{color:rgba(255,244,232,.5)}
.site-footer a:hover{color:var(--yellow)}

@media (max-width:900px){
  .site-header,.hero-grid,.intro,.slider-section,.prog,.infos,.site-footer{padding-left:20px;padding-right:20px}
  .hero-grid{grid-template-columns:1fr}
  .poster{max-width:420px}
  .slide{grid-template-columns:1fr;grid-template-rows:auto auto}
}