.film-section {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 72% 44%, rgba(23, 104, 255, 0.16), transparent 40%), linear-gradient(145deg, #071126, #030817 70%);
}

.film-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  align-items: center;
  gap: clamp(36px, 7vw, 110px);
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: clamp(72px, 8vw, 112px);
}

.film-section__copy { max-width: 640px; }

.film-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cyan-bright);
  font: 600 11px/1.5 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.film-section__eyebrow span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px var(--cyan);
}

.film-section h2 {
  margin-top: 26px;
  max-width: 12ch;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 5.5vw, 5.8rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.film-section h2 span {
  color: transparent;
  background: var(--gradient-title);
  -webkit-background-clip: text;
  background-clip: text;
}

.film-section__lead {
  margin-top: 28px;
  max-width: 52ch;
  color: var(--ink-muted);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.7;
}

.film-section__chapters { margin-top: 44px; border-top: 1px solid var(--line); }
.film-section__chapters p {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-strong);
  line-height: 1.5;
}
.film-section__chapters span { color: var(--cyan-bright); font: 600 11px var(--font-mono); }

.film-section__text-link {
  display: inline-flex;
  gap: 10px;
  margin-top: 30px;
  color: var(--cyan-bright);
  font-weight: 600;
  text-decoration: none;
}
.film-section__text-link:hover { color: #fff; }

.film-section__media { width: 100%; max-width: 390px; justify-self: center; }
.film-section__player {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(135, 183, 245, 0.34);
  border-radius: 26px;
  background: #030817;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38), 0 0 65px rgba(25, 98, 232, 0.13);
}
.film-section__player video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: contain;
}

.film-section__play {
  position: absolute;
  inset: 0 0 54px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.film-section__play[hidden] { display: none; }
.film-section__play span {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding-left: 4px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  background: rgba(3, 8, 23, 0.78);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 22px;
  transition: transform 180ms ease, background 180ms ease;
}
.film-section__play:hover span { transform: scale(1.08); background: rgba(13, 38, 76, 0.92); }
.film-section__play:focus-visible { outline: 3px solid var(--cyan); outline-offset: -6px; }

.film-section__end {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding: 32px 20px 54px;
  background: linear-gradient(180deg, rgba(3, 8, 23, 0) 0%, rgba(3, 8, 23, 0.15) 24%, #030817 42%, #030817 100%);
  text-align: center;
}
.film-section__end[hidden] { display: none; }
.film-section__end p { color: #fff; font: 400 clamp(2.2rem, 4vw, 3rem)/1 var(--font-display); }
.film-section__end .btn { width: 100%; max-width: 280px; justify-content: center; }
.film-section__end button {
  padding: 6px 12px;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.film-section__end button:hover { color: #fff; }
.film-section__end button:focus-visible, .film-section__end a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.film-section__caption {
  margin-top: 15px;
  color: var(--ink-subtle);
  font: 11px/1.5 var(--font-mono);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .film-section__layout { grid-template-columns: 1fr; gap: 42px; }
  .film-section__copy { max-width: 680px; }
  .film-section h2 { max-width: 14ch; }
}

@media (max-width: 520px) {
  .film-section__layout { padding-top: 62px; padding-bottom: 68px; }
  .film-section h2 { font-size: clamp(3.2rem, 13vw, 4.2rem); }
  .film-section__chapters { margin-top: 32px; }
  .film-section__media { max-width: min(100%, 350px); }
}