{"id":172,"date":"2026-08-12T15:21:35","date_gmt":"2026-08-12T12:21:35","guid":{"rendered":"http:\/\/digitaldesignonline.ru\/?page_id=172"},"modified":"2026-10-28T21:08:28","modified_gmt":"2026-10-28T18:08:28","slug":"streamingservice","status":"publish","type":"page","link":"https:\/\/digitaldesignonline.ru\/ru\/streamingservice\/","title":{"rendered":"StreamingService"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"172\" class=\"elementor elementor-172\">\n\t\t\t\t<div class=\"elementor-element elementor-element-70f72f09 e-con-full e-flex e-con e-parent\" data-id=\"70f72f09\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-54e89414 e-con-full e-flex e-con e-child\" data-id=\"54e89414\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-24cb5c5b elementor-widget elementor-widget-html\" data-id=\"24cb5c5b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* =========================================================\n   HORROR HERO \u2014 ELEMENTOR\n   PERFORMANCE ARC CAROUSEL\n   No jQuery \/ No Swiper \/ No external libraries\n========================================================= *\/\n\n#hh-hero,\n#hh-hero * {\n  box-sizing: border-box;\n}\n\n#hh-hero {\n  --bg: #050a0f;\n  --text: #f5f7f8;\n  --muted: #a9b0b7;\n  --blue: #54c5ff;\n\n  position: relative;\n  width: 100%;\n\n  min-height: min(920px, 100svh);\n\n  overflow: hidden;\n  isolation: isolate;\n\n  color: var(--text);\n  background: var(--bg);\n\n  font-family:\n    Inter,\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Arial,\n    sans-serif;\n}\n\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#hh-hero .hh-bg {\n  position: absolute;\n  inset: 0;\n  z-index: -5;\n}\n\n#hh-hero .hh-bg img {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n  object-position: center top;\n}\n\n\n\/* cinematic dark overlay *\/\n\n#hh-hero .hh-bg::after {\n  content: \"\";\n\n  position: absolute;\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n\n    linear-gradient(\n      90deg,\n      rgba(2,7,11,.94) 0%,\n      rgba(3,9,14,.48) 23%,\n      rgba(3,8,12,.12) 49%,\n      rgba(3,8,12,.36) 76%,\n      rgba(2,7,11,.88) 100%\n    ),\n\n    linear-gradient(\n      180deg,\n      rgba(2,6,10,.08) 0%,\n      rgba(2,7,11,.16) 30%,\n      rgba(2,7,11,.60) 69%,\n      rgba(2,7,11,.99) 100%\n    );\n}\n\n\n\/* fog *\/\n\n#hh-hero::before {\n  content: \"\";\n\n  position: absolute;\n  z-index: -3;\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n\n    radial-gradient(\n      ellipse at 52% 34%,\n      rgba(103,178,225,.18),\n      transparent 35%\n    ),\n\n    radial-gradient(\n      ellipse at 10% 56%,\n      rgba(48,114,155,.12),\n      transparent 33%\n    );\n}\n\n\n\/* water \/ reflection *\/\n\n#hh-hero::after {\n  content: \"\";\n\n  position: absolute;\n  z-index: -2;\n\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  height: 28%;\n\n  pointer-events: none;\n\n  background:\n\n    linear-gradient(\n      180deg,\n      rgba(7,15,20,.10),\n      rgba(1,7,11,.95)\n    ),\n\n    repeating-linear-gradient(\n      176deg,\n      rgba(60,130,165,.07) 0,\n      rgba(60,130,165,.07) 1px,\n      transparent 1px,\n      transparent 12px\n    );\n\n  -webkit-mask-image:\n    linear-gradient(\n      to bottom,\n      transparent 0%,\n      #000 25%\n    );\n\n  mask-image:\n    linear-gradient(\n      to bottom,\n      transparent 0%,\n      #000 25%\n    );\n}\n\n\n\/* =========================================================\n   INTRO\n========================================================= *\/\n\n#hh-hero .hh-intro {\n  position: absolute;\n  z-index: 5;\n\n  top: clamp(70px, 14vh, 150px);\n  left: clamp(24px, 4vw, 70px);\n\n  width: min(310px, 30vw);\n\n  pointer-events: none;\n}\n\n#hh-hero .hh-intro h1 {\n  margin: 0;\n\n  max-width: 290px;\n\n  font-family:\n    Georgia,\n    \"Times New Roman\",\n    serif;\n\n  font-size:\n    clamp(42px, 4vw, 64px);\n\n  line-height: .91;\n\n  letter-spacing: -.025em;\n\n  text-transform: uppercase;\n\n  color: #e6eaed;\n\n  text-shadow:\n    0 2px 2px rgba(0,0,0,.65),\n    0 0 25px rgba(255,255,255,.05);\n}\n\n#hh-hero .hh-intro p {\n  margin: 18px 0 0;\n\n  max-width: 230px;\n\n  font-size:\n    clamp(15px, 1.05vw, 19px);\n\n  line-height: 1.45;\n\n  color: #d9dcdf;\n}\n\n\n\/* =========================================================\n   CAROUSEL STAGE\n========================================================= *\/\n\n#hh-hero .hh-stage {\n  position: absolute;\n  z-index: 7;\n\n  left: 0;\n  right: 0;\n\n  \/*\n     \u0411\u043e\u043b\u044c\u0448\u0435 \u0432\u044b\u0441\u043e\u0442\u044b \u0441\u0432\u0435\u0440\u0445\u0443.\n     \u0426\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e.\n  *\/\n  bottom: clamp(145px, 15vh, 175px);\n\n  height: clamp(410px, 45vw, 570px);\n\n  pointer-events: none;\n}\n\n\n\/*\n   \u0412\u0410\u0416\u041d\u041e:\n   viewport \u0431\u043e\u043b\u044c\u0448\u0435 \u041d\u0415 \u043e\u0431\u0440\u0435\u0437\u0430\u0435\u0442 \u0432\u0435\u0440\u0445 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0435\u0440\u0430.\n*\/\n\n#hh-hero .hh-viewport {\n  position: absolute;\n\n  inset: 0;\n\n  overflow: visible;\n\n  perspective: 1500px;\n\n  perspective-origin:\n    50% 45%;\n}\n\n\n#hh-hero .hh-track {\n  position: absolute;\n\n  left: 50%;\n  top: 48%;\n\n  width: 0;\n  height: 0;\n\n  pointer-events: auto;\n\n  transform-style:\n    preserve-3d;\n}\n\n\n\/* =========================================================\n   POSTER CARD\n========================================================= *\/\n\n#hh-hero .hh-card {\n  --tx: 0px;\n  --ty: 0px;\n  --scale: 1;\n  --rotate: 0deg;\n  --opacity: 1;\n\n  position: absolute;\n\n  left: 0;\n  top: 0;\n\n  width:\n    clamp(180px, 15vw, 255px);\n\n  aspect-ratio: .705;\n\n  overflow: hidden;\n\n  cursor: pointer;\n\n  background: #050b10;\n\n  border:\n    1px solid rgba(129,174,200,.22);\n\n  border-radius: 5px;\n\n  opacity:\n    var(--opacity);\n\n  transform:\n    translate(-50%, -50%)\n\n    translate3d(\n      var(--tx),\n      var(--ty),\n      0\n    )\n\n    rotateY(\n      var(--rotate)\n    )\n\n    scale(\n      var(--scale)\n    );\n\n  transform-origin:\n    50% 70%;\n\n  transition:\n    transform .58s cubic-bezier(.2,.8,.2,1),\n    opacity .42s ease,\n    border-color .38s ease,\n    box-shadow .38s ease;\n\n  will-change:\n    transform,\n    opacity;\n\n  contain:\n    layout paint style;\n\n  backface-visibility: hidden;\n\n  -webkit-backface-visibility:\n    hidden;\n\n  outline: none;\n}\n\n\n\/*\n   \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u0441\u044f\n   \u0441 \u043f\u0440\u0430\u0432\u043e\u0433\u043e \u043a\u0440\u0430\u044f \u043d\u0430 \u043b\u0435\u0432\u044b\u0439 \u0438\u043b\u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442,\n   \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0411\u0415\u0417 \u043f\u0435\u0440\u0435\u043b\u0451\u0442\u0430.\n*\/\n\n#hh-hero .hh-card.hh-instant {\n  transition:\n    none !important;\n}\n\n\n\/* poster image *\/\n\n#hh-hero .hh-card img {\n  position: absolute;\n  inset: 0;\n\n  width: 100%;\n  height: 100%;\n\n  display: block;\n\n  object-fit: cover;\n\n  transform:\n    translateZ(0);\n\n  filter:\n    brightness(.62)\n    saturate(.72)\n    contrast(1.06);\n\n  transition:\n    filter .42s ease,\n    transform .6s ease;\n\n  pointer-events: none;\n}\n\n\n\/* poster dark gradient *\/\n\n#hh-hero .hh-card::before {\n  content: \"\";\n\n  position: absolute;\n  z-index: 2;\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n    linear-gradient(\n      180deg,\n      rgba(0,0,0,.01) 25%,\n      rgba(0,0,0,.13) 62%,\n      rgba(0,4,8,.60) 100%\n    );\n}\n\n\n\/* =========================================================\n   ARC POSITIONS\n========================================================= *\/\n\n\n\/* =========================================================\n   CENTER\n========================================================= *\/\n\n#hh-hero .hh-card[data-position=\"0\"] {\n  --tx: 0px;\n\n  \/*\n     \u0427\u0443\u0442\u044c \u0432\u044b\u0448\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445,\n     \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043d\u0435 \u0440\u0435\u0436\u0435\u0442 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443.\n  *\/\n  --ty: -30px;\n\n  --scale: 1.13;\n\n  --rotate: 0deg;\n\n  --opacity: 1;\n\n  z-index: 10;\n\n  border-color:\n    rgba(151,224,255,.96);\n\n  box-shadow:\n\n    0 0 0 1px\n    rgba(79,193,255,.23),\n\n    0 0 14px\n    rgba(71,190,255,.55),\n\n    0 0 38px\n    rgba(28,139,224,.30),\n\n    0 30px 60px\n    rgba(0,0,0,.72);\n}\n\n\n#hh-hero .hh-card[data-position=\"0\"] img {\n  filter:\n    brightness(.91)\n    saturate(.94)\n    contrast(1.04);\n}\n\n\n\/* glow *\/\n\n#hh-hero .hh-card[data-position=\"0\"]::after {\n  content: \"\";\n\n  position: absolute;\n  z-index: 4;\n\n  left: 12%;\n  right: 12%;\n  bottom: 0;\n\n  height: 4px;\n\n  border-radius: 50%;\n\n  background: #b3edff;\n\n  box-shadow:\n\n    0 0 7px #fff,\n\n    0 0 18px\n    #4ac7ff,\n\n    0 0 38px\n    #168cff;\n}\n\n\n\/* =========================================================\n   LEFT 1\n========================================================= *\/\n\n#hh-hero .hh-card[data-position=\"-1\"] {\n  --tx:\n    clamp(-250px, -17vw, -175px);\n\n  --ty: 24px;\n\n  --scale: .90;\n\n  --rotate: 5deg;\n\n  --opacity: .80;\n\n  z-index: 8;\n}\n\n\n\/* =========================================================\n   RIGHT 1\n========================================================= *\/\n\n#hh-hero .hh-card[data-position=\"1\"] {\n  --tx:\n    clamp(175px, 17vw, 250px);\n\n  --ty: 24px;\n\n  --scale: .90;\n\n  --rotate: -5deg;\n\n  --opacity: .80;\n\n  z-index: 8;\n}\n\n\n\/* =========================================================\n   LEFT 2\n========================================================= *\/\n\n#hh-hero .hh-card[data-position=\"-2\"] {\n  --tx:\n    clamp(-450px, -31vw, -320px);\n\n  --ty: 82px;\n\n  --scale: .72;\n\n  --rotate: 8deg;\n\n  --opacity: .46;\n\n  z-index: 6;\n}\n\n\n\/* =========================================================\n   RIGHT 2\n========================================================= *\/\n\n#hh-hero .hh-card[data-position=\"2\"] {\n  --tx:\n    clamp(320px, 31vw, 450px);\n\n  --ty: 82px;\n\n  --scale: .72;\n\n  --rotate: -8deg;\n\n  --opacity: .46;\n\n  z-index: 6;\n}\n\n\n\/* =========================================================\n   HIDDEN\n========================================================= *\/\n\n#hh-hero .hh-card[data-position=\"hidden\"] {\n  --tx: 0px;\n  --ty: 130px;\n\n  --scale: .48;\n\n  --opacity: 0;\n\n  z-index: 1;\n\n  pointer-events: none;\n}\n\n\n\/* hover *\/\n\n@media (hover:hover) {\n\n  #hh-hero\n  .hh-card:not([data-position=\"0\"]):hover\n  img {\n\n    filter:\n      brightness(.82)\n      saturate(.90);\n  }\n\n  #hh-hero\n  .hh-card:not([data-position=\"0\"]):hover {\n\n    border-color:\n      rgba(125,202,241,.55);\n  }\n}\n\n\n\/* =========================================================\n   ARROWS\n========================================================= *\/\n\n#hh-hero .hh-arrow {\n  position: absolute;\n  z-index: 30;\n\n  top: 51%;\n\n  width: 58px;\n  height: 58px;\n\n  padding: 0;\n\n  display: grid;\n\n  place-items: center;\n\n  border:\n    1px solid rgba(190,221,238,.34);\n\n  border-radius: 50%;\n\n  color: #fff;\n\n  background:\n    rgba(3,9,14,.56);\n\n  cursor: pointer;\n\n  transform:\n    translateY(-50%);\n\n  pointer-events: auto;\n\n  transition:\n    transform .2s ease,\n    border-color .2s ease,\n    background .2s ease,\n    box-shadow .2s ease;\n\n  backdrop-filter:\n    blur(5px);\n\n  -webkit-backdrop-filter:\n    blur(5px);\n}\n\n\n#hh-hero .hh-arrow:hover {\n  background:\n    rgba(12,28,39,.88);\n\n  border-color:\n    rgba(127,211,255,.72);\n\n  box-shadow:\n    0 0 22px\n    rgba(48,168,233,.16);\n}\n\n\n#hh-hero .hh-arrow:active {\n  transform:\n    translateY(-50%)\n    scale(.93);\n}\n\n\n#hh-hero .hh-arrow svg {\n  width: 22px;\n  height: 22px;\n\n  fill: none;\n\n  stroke: currentColor;\n\n  stroke-width: 2.3;\n\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n\n#hh-hero .hh-prev {\n  left:\n    clamp(18px, 4vw, 70px);\n}\n\n\n#hh-hero .hh-next {\n  right:\n    clamp(18px, 4vw, 70px);\n}\n\n\n\/* =========================================================\n   INFO PANEL\n========================================================= *\/\n\n#hh-hero .hh-info {\n  position: absolute;\n  z-index: 20;\n\n  left: 50%;\n  bottom: 18px;\n\n  width:\n    min(\n      465px,\n      calc(100% - 36px)\n    );\n\n  min-height: 175px;\n\n  padding:\n    19px 30px;\n\n  text-align: center;\n\n  transform:\n    translateX(-50%);\n\n  border:\n    1px solid\n    rgba(137,185,211,.28);\n\n  border-radius: 6px;\n\n  background:\n    linear-gradient(\n      180deg,\n      rgba(10,25,35,.95),\n      rgba(4,13,20,.97)\n    );\n\n  box-shadow:\n\n    0 -9px 36px\n    rgba(61,177,245,.08),\n\n    0 18px 55px\n    rgba(0,0,0,.52);\n\n  backdrop-filter:\n    blur(8px);\n\n  -webkit-backdrop-filter:\n    blur(8px);\n}\n\n\n#hh-hero .hh-title {\n  margin:\n    0 0 10px;\n\n  font-family:\n    Georgia,\n    \"Times New Roman\",\n    serif;\n\n  font-size:\n    clamp(27px, 2vw, 34px);\n\n  line-height: 1.05;\n\n  text-transform: uppercase;\n\n  letter-spacing: .03em;\n}\n\n\n\/* trailer *\/\n\n#hh-hero .hh-trailer {\n  width:\n    min(260px, 100%);\n\n  min-height: 43px;\n\n  margin: 0 auto;\n\n  padding:\n    8px 22px;\n\n  display:\n    inline-flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  gap: 11px;\n\n  color: #fff;\n\n  font-family: inherit;\n\n  font-size: 16px;\n\n  font-weight: 650;\n\n  letter-spacing: .015em;\n\n  border:\n    1px solid\n    rgba(125,171,198,.25);\n\n  border-radius: 5px;\n\n  background:\n    linear-gradient(\n      180deg,\n      rgba(21,42,56,.92),\n      rgba(8,21,30,.92)\n    );\n\n  cursor: pointer;\n\n  transition:\n    transform .2s ease,\n    background .2s ease,\n    border-color .2s ease;\n}\n\n\n#hh-hero .hh-trailer:hover {\n  transform:\n    translateY(-1px);\n\n  border-color:\n    rgba(107,205,255,.58);\n\n  background:\n    linear-gradient(\n      180deg,\n      rgba(27,56,73,.98),\n      rgba(10,29,40,.98)\n    );\n}\n\n\n#hh-hero .hh-play {\n  width: 0;\n  height: 0;\n\n  border-top:\n    7px solid transparent;\n\n  border-bottom:\n    7px solid transparent;\n\n  border-left:\n    11px solid #fff;\n}\n\n\n#hh-hero .hh-tagline {\n  margin:\n    13px 0 10px;\n\n  font-size: 14px;\n\n  color: #d1d6da;\n}\n\n\n\/* =========================================================\n   META\n========================================================= *\/\n\n#hh-hero .hh-meta {\n  display: flex;\n\n  justify-content: center;\n\n  align-items: center;\n\n  flex-wrap: wrap;\n\n  font-size: 13px;\n\n  color: #aeb5bb;\n}\n\n\n#hh-hero .hh-meta span {\n  display:\n    inline-flex;\n\n  align-items:\n    center;\n}\n\n\n#hh-hero\n.hh-meta\nspan + span::before {\n\n  content: \"\";\n\n  display:\n    inline-block;\n\n  width: 1px;\n  height: 16px;\n\n  margin:\n    0 18px;\n\n  background:\n    rgba(202,218,227,.28);\n}\n\n\n#hh-hero .hh-clock {\n  position: relative;\n\n  width: 18px;\n  height: 18px;\n\n  margin-right: 6px;\n\n  border:\n    1px solid currentColor;\n\n  border-radius: 50%;\n}\n\n\n#hh-hero .hh-clock::before,\n#hh-hero .hh-clock::after {\n  content: \"\";\n\n  position: absolute;\n\n  left: 50%;\n  top: 50%;\n\n  width: 1px;\n\n  background:\n    currentColor;\n\n  transform-origin:\n    bottom;\n}\n\n\n#hh-hero .hh-clock::before {\n  height: 5px;\n\n  transform:\n    translate(-50%, -100%);\n}\n\n\n#hh-hero .hh-clock::after {\n  height: 4px;\n\n  transform:\n    translate(-50%, -100%)\n    rotate(120deg);\n}\n\n\n\/* =========================================================\n   VIDEO MODAL\n========================================================= *\/\n\n#hh-hero .hh-modal {\n  position: fixed;\n  z-index: 999999;\n\n  inset: 0;\n\n  display: grid;\n  place-items: center;\n\n  padding: 24px;\n\n  opacity: 0;\n\n  visibility: hidden;\n\n  pointer-events: none;\n\n  transition:\n    opacity .28s ease,\n    visibility .28s ease;\n}\n\n\n#hh-hero .hh-modal.is-open {\n  opacity: 1;\n\n  visibility: visible;\n\n  pointer-events: auto;\n}\n\n\n#hh-hero .hh-modal-backdrop {\n  position: absolute;\n\n  inset: 0;\n\n  background:\n    rgba(0,4,8,.90);\n\n  backdrop-filter:\n    blur(10px);\n\n  -webkit-backdrop-filter:\n    blur(10px);\n}\n\n\n#hh-hero .hh-modal-dialog {\n  position: relative;\n  z-index: 2;\n\n  width:\n    min(1100px, 92vw);\n\n  opacity: 0;\n\n  transform:\n    translateY(18px)\n    scale(.975);\n\n  transition:\n    transform .32s\n    cubic-bezier(.2,.8,.2,1),\n    opacity .32s ease;\n}\n\n\n#hh-hero\n.hh-modal.is-open\n.hh-modal-dialog {\n\n  opacity: 1;\n\n  transform:\n    translateY(0)\n    scale(1);\n}\n\n\n#hh-hero .hh-video {\n  position: relative;\n\n  width: 100%;\n\n  aspect-ratio:\n    16 \/ 9;\n\n  overflow: hidden;\n\n  background: #000;\n\n  border:\n    1px solid\n    rgba(113,198,243,.38);\n\n  border-radius: 7px;\n\n  box-shadow:\n\n    0 0 60px\n    rgba(21,133,199,.20),\n\n    0 30px 100px\n    rgba(0,0,0,.80);\n}\n\n\n#hh-hero .hh-video iframe {\n  position: absolute;\n\n  inset: 0;\n\n  width: 100%;\n  height: 100%;\n\n  border: 0;\n}\n\n\n\/* close *\/\n\n#hh-hero .hh-modal-close {\n  position: absolute;\n\n  z-index: 5;\n\n  right: -18px;\n  top: -18px;\n\n  width: 46px;\n  height: 46px;\n\n  padding: 0;\n\n  display: grid;\n\n  place-items: center;\n\n  border:\n    1px solid\n    rgba(182,220,240,.42);\n\n  border-radius: 50%;\n\n  color: #fff;\n\n  background:\n    rgba(4,12,18,.96);\n\n  cursor: pointer;\n\n  box-shadow:\n    0 8px 25px\n    rgba(0,0,0,.60);\n}\n\n\n#hh-hero .hh-modal-close svg {\n  width: 20px;\n  height: 20px;\n\n  fill: none;\n\n  stroke: currentColor;\n\n  stroke-width: 2;\n\n  stroke-linecap: round;\n}\n\n\nhtml.hh-modal-open,\nhtml.hh-modal-open body {\n  overflow: hidden;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1024px) {\n\n  #hh-hero {\n    min-height: 850px;\n  }\n\n\n  #hh-hero .hh-intro {\n    top: 50px;\n\n    width: 280px;\n  }\n\n\n  #hh-hero .hh-intro h1 {\n    font-size: 44px;\n  }\n\n\n  #hh-hero .hh-stage {\n    bottom: 160px;\n\n    height: 450px;\n  }\n\n\n  #hh-hero .hh-track {\n    top: 49%;\n  }\n\n\n  #hh-hero .hh-card {\n    width:\n      clamp(\n        175px,\n        21vw,\n        220px\n      );\n  }\n\n\n  #hh-hero\n  .hh-card[data-position=\"-1\"] {\n    --tx: -205px;\n  }\n\n\n  #hh-hero\n  .hh-card[data-position=\"1\"] {\n    --tx: 205px;\n  }\n\n\n  #hh-hero\n  .hh-card[data-position=\"-2\"] {\n    --tx: -350px;\n  }\n\n\n  #hh-hero\n  .hh-card[data-position=\"2\"] {\n    --tx: 350px;\n  }\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  #hh-hero {\n    min-height: 760px;\n  }\n\n\n  #hh-hero .hh-bg img {\n    object-position:\n      58% top;\n  }\n\n\n  #hh-hero .hh-intro {\n    top: 28px;\n\n    left: 20px;\n\n    width: 220px;\n  }\n\n\n  #hh-hero .hh-intro h1 {\n    max-width: 210px;\n\n    font-size: 35px;\n  }\n\n\n  #hh-hero .hh-intro p {\n    margin-top: 10px;\n\n    font-size: 14px;\n  }\n\n\n  #hh-hero .hh-stage {\n    bottom: 178px;\n\n    height: 370px;\n  }\n\n\n  #hh-hero .hh-track {\n    top: 50%;\n  }\n\n\n  #hh-hero .hh-card {\n    width:\n      clamp(\n        145px,\n        43vw,\n        180px\n      );\n  }\n\n\n  #hh-hero\n  .hh-card[data-position=\"0\"] {\n\n    --ty: -22px;\n\n    --scale: 1.08;\n  }\n\n\n  #hh-hero\n  .hh-card[data-position=\"-1\"] {\n\n    --tx: -145px;\n\n    --ty: 28px;\n\n    --scale: .79;\n\n    --rotate: 5deg;\n\n    --opacity: .72;\n  }\n\n\n  #hh-hero\n  .hh-card[data-position=\"1\"] {\n\n    --tx: 145px;\n\n    --ty: 28px;\n\n    --scale: .79;\n\n    --rotate: -5deg;\n\n    --opacity: .72;\n  }\n\n\n  #hh-hero\n  .hh-card[data-position=\"-2\"] {\n\n    --tx: -250px;\n\n    --ty: 78px;\n\n    --scale: .60;\n\n    --opacity: .24;\n  }\n\n\n  #hh-hero\n  .hh-card[data-position=\"2\"] {\n\n    --tx: 250px;\n\n    --ty: 78px;\n\n    --scale: .60;\n\n    --opacity: .24;\n  }\n\n\n  #hh-hero .hh-arrow {\n    width: 44px;\n    height: 44px;\n  }\n\n\n  #hh-hero .hh-prev {\n    left: 8px;\n  }\n\n\n  #hh-hero .hh-next {\n    right: 8px;\n  }\n\n\n  #hh-hero .hh-info {\n    bottom: 10px;\n\n    width:\n      calc(100% - 24px);\n\n    min-height: 165px;\n\n    padding:\n      16px 18px;\n  }\n\n\n  #hh-hero .hh-title {\n    font-size: 25px;\n  }\n\n\n  #hh-hero .hh-trailer {\n    min-height: 40px;\n\n    font-size: 14px;\n  }\n\n\n  #hh-hero .hh-tagline {\n    margin-top: 10px;\n  }\n\n\n  #hh-hero .hh-meta {\n    font-size: 12px;\n  }\n\n\n  #hh-hero\n  .hh-meta\n  span + span::before {\n\n    margin:\n      0 9px;\n  }\n\n\n  #hh-hero .hh-modal {\n    padding: 12px;\n  }\n\n\n  #hh-hero .hh-modal-dialog {\n    width: 100%;\n  }\n\n\n  #hh-hero .hh-modal-close {\n    right: 4px;\n\n    top: -54px;\n  }\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 480px) {\n\n  #hh-hero {\n    min-height: 700px;\n  }\n\n\n  #hh-hero .hh-intro h1 {\n    font-size: 31px;\n  }\n\n\n  #hh-hero .hh-stage {\n    bottom: 170px;\n\n    height: 340px;\n  }\n\n\n  #hh-hero .hh-card {\n    width: 145px;\n  }\n\n\n  #hh-hero\n  .hh-card[data-position=\"-1\"] {\n\n    --tx: -123px;\n  }\n\n\n  #hh-hero\n  .hh-card[data-position=\"1\"] {\n\n    --tx: 123px;\n  }\n\n\n  #hh-hero\n  .hh-card[data-position=\"-2\"] {\n\n    --tx: -215px;\n  }\n\n\n  #hh-hero\n  .hh-card[data-position=\"2\"] {\n\n    --tx: 215px;\n  }\n\n\n  #hh-hero\n  .hh-meta\n  span + span::before {\n\n    margin:\n      0 7px;\n  }\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  #hh-hero *,\n  #hh-hero *::before,\n  #hh-hero *::after {\n\n    transition-duration:\n      .01ms !important;\n\n    animation-duration:\n      .01ms !important;\n  }\n}\n<\/style>\n\n\n\n<section id=\"hh-hero\">\n\n\n  <!-- =====================================================\n       BACKGROUND\n  ====================================================== -->\n\n  <picture class=\"hh-bg\">\n\n    <img fetchpriority=\"high\"\n\n      src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/ff19f2534d-a01f-4e42-87dd-49dcf4618510.jpg\"\n\n      alt=\"\"\n\n      width=\"1920\"\n\n      height=\"1080\"\n\n      fetchpriority=\"high\"\n\n      decoding=\"async\"\n\n    >\n\n  <\/picture>\n\n\n\n  <!-- =====================================================\n       INTRO\n  ====================================================== -->\n\n  <header class=\"hh-intro\">\n\n    <h1>\n      Dive Into<br>\n      Darkness\n    <\/h1>\n\n    <p>\n      The best horror<br>\n      from around the world.\n    <\/p>\n\n  <\/header>\n\n\n\n  <!-- =====================================================\n       CAROUSEL\n  ====================================================== -->\n\n  <div class=\"hh-stage\">\n\n\n    <!-- PREVIOUS -->\n\n    <button\n\n      class=\"hh-arrow hh-prev\"\n\n      type=\"button\"\n\n      aria-label=\"Previous movie\"\n\n    >\n\n      <svg\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n      >\n\n        <path d=\"M15 5l-7 7 7 7\"\/>\n\n      <\/svg>\n\n    <\/button>\n\n\n\n    <div class=\"hh-viewport\">\n\n\n      <div class=\"hh-track\">\n\n\n\n        <!-- =================================================\n             MOVIE 01\n        ================================================== -->\n\n        <article\n\n          class=\"hh-card\"\n\n\n          data-position=\"-2\"\n\n          tabindex=\"0\"\n\n          data-title=\"The Substance\"\n\n          data-tagline=\"Beauty has a price, and your body pays.\"\n\n          data-duration=\"2h 21m\"\n\n          data-year=\"2024\"\n\n          data-rating=\"R\"\n\n          data-genre=\"HORROR\"\n\n          data-trailer=\"https:\/\/www.youtube.com\/watch?v=LNlrGhBpYjc\"\n\n        >\n\n          <img loading=\"lazy\"\n\n            src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/865865865568.jpg\"\n\n            width=\"480\"\n\n            height=\"680\"\n\n            loading=\"lazy\"\n\n            decoding=\"async\"\n\n            alt=\"The Substance\"\n\n          >\n\n        <\/article>\n\n\n\n        <!-- =================================================\n             MOVIE 02\n        ================================================== -->\n\n        <article\n\n          class=\"hh-card\"\n\n\n          data-position=\"-1\"\n\n          tabindex=\"0\"\n\n          data-title=\"Sinners\"\n\n          data-tagline=\"Some sins awaken monsters better left buried forever.\"\n\n          data-duration=\"2h 17m\"\n\n          data-year=\"2025\"\n\n          data-rating=\"R\"\n\n          data-genre=\"HORROR\"\n\n          data-trailer=\"https:\/\/www.youtube.com\/watch?v=7joulECTx_U\"\n\n        >\n\n          <img loading=\"lazy\"\n\n            src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/5656456567.jpg\"\n\n            width=\"480\"\n\n            height=\"680\"\n\n            loading=\"lazy\"\n\n            decoding=\"async\"\n\n            alt=\"Sinners\"\n\n          >\n\n        <\/article>\n\n\n\n        <!-- =================================================\n             MOVIE 03 \u2014 INITIAL CENTER\n        ================================================== -->\n\n        <article\n\n          class=\"hh-card is-active\"\n\n\n          data-position=\"0\"\n\n          tabindex=\"0\"\n\n          aria-current=\"true\"\n\n          data-title=\"Talk to Me\"\n\n          data-tagline=\"One touch opens the door you cannot close.\"\n\n          data-duration=\"1h 35m\"\n\n          data-year=\"2023\"\n\n          data-rating=\"R\"\n\n          data-genre=\"HORROR\"\n\n          data-trailer=\"https:\/\/www.youtube.com\/watch?v=aLAKJu9aJys\"\n\n        >\n\n          <img\n\n            src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/4636464636.jpg\"\n\n            width=\"480\"\n\n            height=\"680\"\n\n            decoding=\"async\"\n\n            alt=\"Talk to Me\"\n\n          >\n\n        <\/article>\n\n\n\n        <!-- =================================================\n             MOVIE 04\n        ================================================== -->\n\n        <article\n\n          class=\"hh-card\"\n\n\n          data-position=\"1\"\n\n          tabindex=\"0\"\n\n          data-title=\"Pearl\"\n\n          data-tagline=\"A perfect smile can hide a murderous dream.\"\n\n          data-duration=\"1h 42m\"\n\n          data-year=\"2022\"\n\n          data-rating=\"R\"\n\n          data-genre=\"HORROR\"\n\n          data-trailer=\"https:\/\/www.youtube.com\/watch?v=L5PW5r3pEOg\"\n\n        >\n\n          <img loading=\"lazy\"\n\n            src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/4634646343.jpg\"\n\n            width=\"480\"\n\n            height=\"680\"\n\n            loading=\"lazy\"\n\n            decoding=\"async\"\n\n            alt=\"Pearl\"\n\n          >\n\n        <\/article>\n\n\n\n        <!-- =================================================\n             MOVIE 05\n        ================================================== -->\n\n        <article\n\n          class=\"hh-card\"\n\n\n          data-position=\"2\"\n\n          tabindex=\"0\"\n\n          data-title=\"Barbarian\"\n\n          data-tagline=\"The safest room may hide the worst nightmare.\"\n\n          data-duration=\"1h 43m\"\n\n          data-year=\"2022\"\n\n          data-rating=\"R\"\n\n          data-genre=\"HORROR\"\n\n          data-trailer=\"https:\/\/www.youtube.com\/watch?v=Dr89pmKrqkI\"\n\n        >\n\n          <img loading=\"lazy\"\n\n            src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/346464646463.jpg\"\n\n            width=\"480\"\n\n            height=\"680\"\n\n            loading=\"lazy\"\n\n            decoding=\"async\"\n\n            alt=\"Barbarian\"\n\n          >\n\n        <\/article>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n\n    <!-- NEXT -->\n\n    <button\n\n      class=\"hh-arrow hh-next\"\n\n      type=\"button\"\n\n      aria-label=\"Next movie\"\n\n    >\n\n      <svg\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n      >\n\n        <path d=\"M9 5l7 7-7 7\"\/>\n\n      <\/svg>\n\n    <\/button>\n\n\n  <\/div>\n\n\n\n  <!-- =====================================================\n       INFO\n  ====================================================== -->\n\n  <div class=\"hh-info\">\n\n\n    <h2 class=\"hh-title\">\n      Talk to Me\n    <\/h2>\n\n\n    <button\n\n      class=\"hh-trailer\"\n\n      type=\"button\"\n\n      aria-label=\"Watch trailer\"\n\n    >\n\n      <span\n        class=\"hh-play\"\n        aria-hidden=\"true\"\n      ><\/span>\n\n      <span>\n        WATCH TRAILER\n      <\/span>\n\n    <\/button>\n\n\n    <p class=\"hh-tagline\">\n      One touch opens the door you cannot close.\n    <\/p>\n\n\n    <div class=\"hh-meta\">\n\n\n      <span>\n\n        <i\n          class=\"hh-clock\"\n          aria-hidden=\"true\"\n        ><\/i>\n\n        <b\n          data-meta=\"duration\"\n          style=\"font-weight:400\"\n        >\n          1h 35m\n        <\/b>\n\n      <\/span>\n\n\n      <span data-meta=\"year\">\n        2023\n      <\/span>\n\n\n      <span data-meta=\"rating\">\n        R\n      <\/span>\n\n\n      <span data-meta=\"genre\">\n        HORROR\n      <\/span>\n\n\n    <\/div>\n\n\n  <\/div>\n\n\n\n  <!-- =====================================================\n       VIDEO MODAL\n  ====================================================== -->\n\n  <div\n\n    class=\"hh-modal\"\n\n    aria-hidden=\"true\"\n\n    role=\"dialog\"\n\n    aria-modal=\"true\"\n\n    aria-label=\"Movie trailer\"\n\n  >\n\n\n    <div\n\n      class=\"hh-modal-backdrop\"\n\n      data-modal-close\n\n    ><\/div>\n\n\n\n    <div class=\"hh-modal-dialog\">\n\n\n      <button\n\n        class=\"hh-modal-close\"\n\n        type=\"button\"\n\n        aria-label=\"Close trailer\"\n\n        data-modal-close\n\n      >\n\n        <svg\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n\n          <path\n            d=\"M5 5l14 14M19 5L5 19\"\n          \/>\n\n        <\/svg>\n\n      <\/button>\n\n\n\n      <div class=\"hh-video\"><\/div>\n\n\n    <\/div>\n\n\n  <\/div>\n\n\n<\/section>\n\n\n\n<script>\n(() => {\n\n  'use strict';\n\n\n  \/* =====================================================\n     ROOT\n  ===================================================== *\/\n\n  const root =\n    document.getElementById(\n      'hh-hero'\n    );\n\n\n  if (!root) {\n    return;\n  }\n\n\n\n  \/* =====================================================\n     ELEMENTS\n  ===================================================== *\/\n\n  const cards =\n    Array.from(\n      root.querySelectorAll(\n        '.hh-card'\n      )\n    );\n\n\n  const prev =\n    root.querySelector(\n      '.hh-prev'\n    );\n\n\n  const next =\n    root.querySelector(\n      '.hh-next'\n    );\n\n\n  const title =\n    root.querySelector(\n      '.hh-title'\n    );\n\n\n  const tagline =\n    root.querySelector(\n      '.hh-tagline'\n    );\n\n\n  const trailerButton =\n    root.querySelector(\n      '.hh-trailer'\n    );\n\n\n  const duration =\n    root.querySelector(\n      '[data-meta=\"duration\"]'\n    );\n\n\n  const year =\n    root.querySelector(\n      '[data-meta=\"year\"]'\n    );\n\n\n  const rating =\n    root.querySelector(\n      '[data-meta=\"rating\"]'\n    );\n\n\n  const genre =\n    root.querySelector(\n      '[data-meta=\"genre\"]'\n    );\n\n\n  const modal =\n    root.querySelector(\n      '.hh-modal'\n    );\n\n\n  const videoContainer =\n    root.querySelector(\n      '.hh-video'\n    );\n\n\n\n  \/* =====================================================\n     STATE\n  ===================================================== *\/\n\n  let activeIndex =\n    Math.max(\n\n      0,\n\n      cards.findIndex(\n        card =>\n          card.classList.contains(\n            'is-active'\n          )\n      )\n\n    );\n\n\n  let transitionLocked =\n    false;\n\n\n  let touchStartX = 0;\n\n  let touchStartY = 0;\n\n\n\n  \/* =====================================================\n     NORMALIZE INDEX\n  ===================================================== *\/\n\n  function normalizeIndex(index) {\n\n    const length =\n      cards.length;\n\n\n    return (\n      (\n        index % length\n      )\n      +\n      length\n    )\n    %\n    length;\n\n  }\n\n\n\n  \/* =====================================================\n     CIRCULAR DISTANCE\n  ===================================================== *\/\n\n  function circularDistance(\n    index,\n    centerIndex = activeIndex\n  ) {\n\n    let distance =\n      index - centerIndex;\n\n\n    const total =\n      cards.length;\n\n\n    const half =\n      total \/ 2;\n\n\n    if (\n      distance > half\n    ) {\n\n      distance -= total;\n\n    }\n\n\n    if (\n      distance < -half\n    ) {\n\n      distance += total;\n\n    }\n\n\n    return distance;\n\n  }\n\n\n\n  \/* =====================================================\n     POSITION NAME\n  ===================================================== *\/\n\n  function getPosition(\n    index,\n    centerIndex = activeIndex\n  ) {\n\n    const distance =\n      circularDistance(\n        index,\n        centerIndex\n      );\n\n\n    if (\n      Math.abs(distance) <= 2\n    ) {\n\n      return String(\n        distance\n      );\n\n    }\n\n\n    return 'hidden';\n\n  }\n\n\n\n  \/* =====================================================\n     DETECT WRAP CARD\n     Removes \"flying behind\" effect\n  ===================================================== *\/\n\n  function needsInstantMove(\n    oldPosition,\n    newPosition\n  ) {\n\n    \/*\n       Example:\n\n       old =  2\n       new = -2\n\n       or\n\n       old = -2\n       new =  2\n\n       This means card moved from one end\n       of carousel to the opposite end.\n\n       We do NOT animate this card.\n    *\/\n\n\n    if (\n      oldPosition === undefined ||\n      oldPosition === null\n    ) {\n      return false;\n    }\n\n\n    if (\n      oldPosition === 'hidden' ||\n      newPosition === 'hidden'\n    ) {\n\n      \/*\n         Hidden card repositioning\n         should also not fly through center.\n      *\/\n\n      return true;\n\n    }\n\n\n    const oldNumber =\n      Number(oldPosition);\n\n\n    const newNumber =\n      Number(newPosition);\n\n\n    if (\n      !Number.isFinite(oldNumber) ||\n      !Number.isFinite(newNumber)\n    ) {\n\n      return false;\n\n    }\n\n\n    return (\n      Math.abs(\n        oldNumber - newNumber\n      )\n      >= 4\n    );\n\n  }\n\n\n\n  \/* =====================================================\n     UPDATE INFO\n  ===================================================== *\/\n\n  function updateInfo(card) {\n\n    if (!card) {\n      return;\n    }\n\n\n    title.textContent =\n      card.dataset.title || '';\n\n\n    tagline.textContent =\n      card.dataset.tagline || '';\n\n\n    duration.textContent =\n      card.dataset.duration || '';\n\n\n    year.textContent =\n      card.dataset.year || '';\n\n\n    rating.textContent =\n      card.dataset.rating || '';\n\n\n    genre.textContent =\n      card.dataset.genre || '';\n\n  }\n\n\n\n  \/* =====================================================\n     INITIAL RENDER\n  ===================================================== *\/\n\n  function initialRender() {\n\n    cards.forEach(\n      (card, index) => {\n\n        const position =\n          getPosition(index);\n\n\n        card.dataset.position =\n          position;\n\n\n        const active =\n          position === '0';\n\n\n        card.classList.toggle(\n          'is-active',\n          active\n        );\n\n\n        if (active) {\n\n          card.setAttribute(\n            'aria-current',\n            'true'\n          );\n\n        }\n\n        else {\n\n          card.removeAttribute(\n            'aria-current'\n          );\n\n        }\n\n      }\n    );\n\n\n    updateInfo(\n      cards[activeIndex]\n    );\n\n  }\n\n\n\n  \/* =====================================================\n     RENDER TRANSITION\n  ===================================================== *\/\n\n  function renderTransition(\n    previousIndex\n  ) {\n\n    \/*\n       First determine old\/new positions\n       for every card.\n    *\/\n\n    const changes =\n      cards.map(\n        (card, index) => {\n\n          const oldPosition =\n            getPosition(\n              index,\n              previousIndex\n            );\n\n\n          const newPosition =\n            getPosition(\n              index,\n              activeIndex\n            );\n\n\n          return {\n\n            card,\n            index,\n            oldPosition,\n            newPosition,\n\n            instant:\n              needsInstantMove(\n                oldPosition,\n                newPosition\n              )\n\n          };\n\n        }\n      );\n\n\n\n    \/*\n       Cards crossing from one outer edge\n       to the other are teleported\n       without animation.\n    *\/\n\n    changes.forEach(\n      item => {\n\n        if (\n          item.instant\n        ) {\n\n          item.card.classList.add(\n            'hh-instant'\n          );\n\n        }\n\n      }\n    );\n    \/*\n       Apply positions.\n    *\/\n\n    changes.forEach(\n      item => {\n\n        item.card.dataset.position =\n          item.newPosition;\n\n\n        const active =\n          item.newPosition === '0';\n\n\n        item.card.classList.toggle(\n          'is-active',\n          active\n        );\n\n\n        if (active) {\n\n          item.card.setAttribute(\n            'aria-current',\n            'true'\n          );\n\n        }\n\n        else {\n\n          item.card.removeAttribute(\n            'aria-current'\n          );\n\n        }\n\n      }\n    );\n\n\n\n    \/*\n       On the following frame restore\n       transitions for teleported cards.\n    *\/\n\n    requestAnimationFrame(\n      () => {\n\n        requestAnimationFrame(\n          () => {\n\n            changes.forEach(\n              item => {\n\n                if (\n                  item.instant\n                ) {\n\n                  item.card\n                    .classList\n                    .remove(\n                      'hh-instant'\n                    );\n\n                }\n\n              }\n            );\n\n          }\n        );\n\n      }\n    );\n\n  }\n\n\n\n  \/* =====================================================\n     ACTIVATE\n  ===================================================== *\/\n\n  function activate(index) {\n\n    if (\n      !cards.length ||\n      transitionLocked\n    ) {\n\n      return;\n\n    }\n\n\n    const previousIndex =\n      activeIndex;\n\n\n    const newIndex =\n      normalizeIndex(index);\n\n\n    if (\n      newIndex === activeIndex\n    ) {\n\n      return;\n\n    }\n\n\n    activeIndex =\n      newIndex;\n\n\n    transitionLocked =\n      true;\n\n\n    renderTransition(\n      previousIndex\n    );\n\n\n    updateInfo(\n      cards[activeIndex]\n    );\n\n\n    window.setTimeout(\n      () => {\n\n        transitionLocked =\n          false;\n\n      },\n\n      410\n    );\n\n  }\n\n\n\n  \/* =====================================================\n     PREVIOUS\n  ===================================================== *\/\n\n  prev.addEventListener(\n    'click',\n    () => {\n\n      activate(\n        activeIndex - 1\n      );\n\n    }\n  );\n\n\n\n  \/* =====================================================\n     NEXT\n  ===================================================== *\/\n\n  next.addEventListener(\n    'click',\n    () => {\n\n      activate(\n        activeIndex + 1\n      );\n\n    }\n  );\n\n\n\n  \/* =====================================================\n     CLICK POSTER\n  ===================================================== *\/\n\n  cards.forEach(\n    (card, index) => {\n\n\n      card.addEventListener(\n        'click',\n        () => {\n\n          if (\n            index === activeIndex\n          ) {\n\n            return;\n\n          }\n\n\n          activate(index);\n\n        }\n      );\n\n\n\n      card.addEventListener(\n        'keydown',\n        event => {\n\n\n          if (\n            event.key !== 'Enter' &&\n            event.key !== ' '\n          ) {\n\n            return;\n\n          }\n\n\n          event.preventDefault();\n\n\n          if (\n            index !== activeIndex\n          ) {\n\n            activate(index);\n\n          }\n\n        }\n      );\n\n\n    }\n  );\n\n\n\n  \/* =====================================================\n     KEYBOARD\n  ===================================================== *\/\n\n  root.addEventListener(\n    'keydown',\n    event => {\n\n\n      if (\n        modal.classList.contains(\n          'is-open'\n        )\n      ) {\n\n        return;\n\n      }\n\n\n      if (\n        event.key ===\n        'ArrowLeft'\n      ) {\n\n        event.preventDefault();\n\n\n        activate(\n          activeIndex - 1\n        );\n\n      }\n\n\n      if (\n        event.key ===\n        'ArrowRight'\n      ) {\n\n        event.preventDefault();\n\n\n        activate(\n          activeIndex + 1\n        );\n\n      }\n\n\n    }\n  );\n\n\n\n  \/* =====================================================\n     TOUCH \/ SWIPE\n  ===================================================== *\/\n\n  root.addEventListener(\n\n    'touchstart',\n\n    event => {\n\n      if (\n        !event.changedTouches.length\n      ) {\n\n        return;\n\n      }\n\n\n      const touch =\n        event.changedTouches[0];\n\n\n      touchStartX =\n        touch.clientX;\n\n\n      touchStartY =\n        touch.clientY;\n\n    },\n\n    {\n      passive: true\n    }\n\n  );\n\n\n\n  root.addEventListener(\n\n    'touchend',\n\n    event => {\n\n\n      if (\n        modal.classList.contains(\n          'is-open'\n        )\n      ) {\n\n        return;\n\n      }\n\n\n      if (\n        !event.changedTouches.length\n      ) {\n\n        return;\n\n      }\n\n\n      const touch =\n        event.changedTouches[0];\n\n\n      const deltaX =\n        touch.clientX -\n        touchStartX;\n\n\n      const deltaY =\n        touch.clientY -\n        touchStartY;\n\n\n      \/*\n         Ignore vertical swipe.\n      *\/\n\n      if (\n        Math.abs(deltaY)\n        >\n        Math.abs(deltaX)\n      ) {\n\n        return;\n\n      }\n\n\n      \/*\n         Swipe threshold.\n      *\/\n\n      if (\n        Math.abs(deltaX)\n        <\n        45\n      ) {\n\n        return;\n\n      }\n\n\n      if (\n        deltaX < 0\n      ) {\n\n        activate(\n          activeIndex + 1\n        );\n\n      }\n\n      else {\n\n        activate(\n          activeIndex - 1\n        );\n\n      }\n\n\n    },\n\n    {\n      passive: true\n    }\n\n  );\n\n\n\n  \/* =====================================================\n     YOUTUBE ID\n  ===================================================== *\/\n\n  function getYouTubeId(url) {\n\n    if (\n      !url ||\n      url === '#'\n    ) {\n\n      return null;\n\n    }\n\n\n    try {\n\n      const parsed =\n        new URL(\n          url,\n          window.location.href\n        );\n\n\n      \/*\n         youtu.be\/VIDEO\n      *\/\n\n      if (\n        parsed.hostname.includes(\n          'youtu.be'\n        )\n      ) {\n\n        return (\n          parsed.pathname\n            .replace(\n              \/^\\\/+\/,\n              ''\n            )\n            .split('\/')[0]\n          ||\n          null\n        );\n\n      }\n\n\n      \/*\n         youtube.com\/watch?v=\n      *\/\n\n      const queryVideo =\n        parsed.searchParams.get(\n          'v'\n        );\n\n\n      if (\n        queryVideo\n      ) {\n\n        return queryVideo;\n\n      }\n\n\n      \/*\n         \/embed\/\n         \/shorts\/\n         \/live\/\n      *\/\n\n      const parts =\n        parsed.pathname\n          .split('\/')\n          .filter(Boolean);\n\n\n      const specialIndex =\n        parts.findIndex(\n          value =>\n            value === 'embed' ||\n            value === 'shorts' ||\n            value === 'live'\n        );\n\n\n      if (\n        specialIndex !== -1 &&\n        parts[\n          specialIndex + 1\n        ]\n      ) {\n\n        return parts[\n          specialIndex + 1\n        ];\n\n      }\n\n    }\n\n    catch (error) {\n\n      return null;\n\n    }\n\n\n    return null;\n\n  }\n\n\n\n  \/* =====================================================\n     OPEN TRAILER\n  ===================================================== *\/\n\n  function openTrailer() {\n\n    const card =\n      cards[activeIndex];\n\n\n    if (!card) {\n      return;\n    }\n\n\n    const youtubeId =\n      getYouTubeId(\n        card.dataset.trailer\n      );\n\n\n    if (\n      !youtubeId\n    ) {\n\n      console.warn(\n        'Trailer URL not found for:',\n        card.dataset.title\n      );\n\n\n      return;\n\n    }\n\n\n\n    \/*\n       YouTube iframe DOES NOT EXIST\n       before click.\n\n       Better PageSpeed \/ LCP.\n    *\/\n\n    const iframe =\n      document.createElement(\n        'iframe'\n      );\n\n\n    iframe.src =\n\n      'https:\/\/www.youtube-nocookie.com\/embed\/' +\n\n      encodeURIComponent(\n        youtubeId\n      )\n\n      +\n\n      '?autoplay=1' +\n\n      '&rel=0' +\n\n      '&playsinline=1' +\n\n      '&modestbranding=1';\n\n\n\n    iframe.title =\n\n      (\n        card.dataset.title ||\n        'Movie'\n      )\n\n      +\n\n      ' trailer';\n\n\n\n    iframe.allow =\n\n      'accelerometer; ' +\n\n      'autoplay; ' +\n\n      'clipboard-write; ' +\n\n      'encrypted-media; ' +\n\n      'gyroscope; ' +\n\n      'picture-in-picture; ' +\n\n      'web-share';\n\n\n\n    iframe.allowFullscreen =\n      true;\n\n\n\n    iframe.setAttribute(\n\n      'referrerpolicy',\n\n      'strict-origin-when-cross-origin'\n\n    );\n\n\n\n    videoContainer.replaceChildren(\n      iframe\n    );\n\n\n\n    modal.classList.add(\n      'is-open'\n    );\n\n\n\n    modal.setAttribute(\n      'aria-hidden',\n      'false'\n    );\n\n\n\n    document.documentElement\n      .classList.add(\n        'hh-modal-open'\n      );\n\n\n\n    const closeButton =\n      modal.querySelector(\n        '.hh-modal-close'\n      );\n\n\n    if (\n      closeButton\n    ) {\n\n      closeButton.focus();\n\n    }\n\n  }\n\n\n\n  \/* =====================================================\n     CLOSE TRAILER\n  ===================================================== *\/\n\n  function closeTrailer() {\n\n    if (\n      !modal.classList.contains(\n        'is-open'\n      )\n    ) {\n\n      return;\n\n    }\n\n\n\n    modal.classList.remove(\n      'is-open'\n    );\n\n\n\n    modal.setAttribute(\n      'aria-hidden',\n      'true'\n    );\n\n\n\n    document.documentElement\n      .classList.remove(\n        'hh-modal-open'\n      );\n\n\n\n    \/*\n       Destroy iframe completely.\n       Video immediately stops.\n    *\/\n\n    videoContainer\n      .replaceChildren();\n\n\n\n    trailerButton.focus();\n\n  }\n\n\n\n  \/* =====================================================\n     TRAILER BUTTON\n  ===================================================== *\/\n\n  trailerButton.addEventListener(\n    'click',\n    openTrailer\n  );\n\n\n\n  \/* =====================================================\n     MODAL CLOSE\n  ===================================================== *\/\n\n  modal.addEventListener(\n    'click',\n    event => {\n\n\n      if (\n        event.target.closest(\n          '[data-modal-close]'\n        )\n      ) {\n\n        closeTrailer();\n\n      }\n\n\n    }\n  );\n\n\n\n  \/* =====================================================\n     ESC\n  ===================================================== *\/\n\n  document.addEventListener(\n    'keydown',\n    event => {\n\n\n      if (\n        event.key === 'Escape' &&\n        modal.classList.contains(\n          'is-open'\n        )\n      ) {\n\n        closeTrailer();\n\n      }\n\n\n    }\n  );\n\n\n\n  \/* =====================================================\n     INIT\n  ===================================================== *\/\n\n  initialRender();\n\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7b77a8c0 e-con-full e-flex e-con e-child\" data-id=\"7b77a8c0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-15cf8a6d elementor-widget elementor-widget-html\" data-id=\"15cf8a6d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* =========================================================\n   POPULAR WITH VIEWERS\n   Elementor \/ performance optimized\n========================================================= *\/\n\n#viewer-popular,\n#viewer-popular * {\n  box-sizing: border-box;\n}\n\n#viewer-popular {\n  --vp-bg: #05090d;\n  --vp-panel: #071018;\n  --vp-text: #f2f5f7;\n  --vp-muted: #9aa7b1;\n  --vp-blue: #5fcaff;\n\n  position: relative;\n\n  width: 100%;\n\n  padding:\n    clamp(70px, 8vw, 130px)\n    clamp(20px, 5vw, 90px);\n\n  overflow: hidden;\n\n  background:\n    linear-gradient(\n      180deg,\n      #03070a 0%,\n      #050b10 45%,\n      #030609 100%\n    );\n\n  color: var(--vp-text);\n\n  font-family:\n    Inter,\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Arial,\n    sans-serif;\n}\n\n\n\/* subtle atmosphere *\/\n\n#viewer-popular::before {\n  content: \"\";\n\n  position: absolute;\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n\n    radial-gradient(\n      ellipse at 12% 20%,\n      rgba(37, 112, 158, .10),\n      transparent 32%\n    ),\n\n    radial-gradient(\n      ellipse at 88% 55%,\n      rgba(28, 84, 121, .08),\n      transparent 30%\n    );\n}\n\n\n\/* =========================================================\n   WRAPPER\n========================================================= *\/\n\n#viewer-popular .vp-wrap {\n  position: relative;\n  z-index: 2;\n\n  width: min(1600px, 100%);\n\n  margin: 0 auto;\n}\n\n\n\/* =========================================================\n   SECTION TITLE\n========================================================= *\/\n\n#viewer-popular .vp-heading {\n  margin-bottom:\n    clamp(30px, 4vw, 55px);\n}\n\n\n#viewer-popular .vp-kicker {\n  margin: 0 0 10px;\n\n  font-size:\n    clamp(12px, .9vw, 14px);\n\n  font-weight: 600;\n\n  letter-spacing: .22em;\n\n  text-transform: uppercase;\n\n  color: var(--vp-blue);\n}\n\n\n#viewer-popular .vp-heading h2 {\n  margin: 0;\n\n  font-family:\n    Georgia,\n    \"Times New Roman\",\n    serif;\n\n  font-size:\n    clamp(38px, 4.2vw, 72px);\n\n  line-height: .95;\n\n  letter-spacing: -.025em;\n\n  text-transform: uppercase;\n\n  color: #eef2f4;\n}\n\n\n#viewer-popular .vp-heading p {\n  margin:\n    16px 0 0;\n\n  max-width: 600px;\n\n  color:\n    rgba(220, 229, 235, .67);\n\n  font-size:\n    clamp(14px, 1vw, 17px);\n\n  line-height: 1.6;\n}\n\n\n\/* =========================================================\n   MOVIE LIST\n========================================================= *\/\n\n#viewer-popular .vp-list {\n  display: grid;\n\n  gap:\n    clamp(22px, 2.4vw, 38px);\n}\n\n\n\/* =========================================================\n   MOVIE BLOCK\n========================================================= *\/\n\n#viewer-popular .vp-movie {\n  content-visibility: auto;\n  contain-intrinsic-size: auto 610px;\n\n  position: relative;\n\n  width: 100%;\n\n  min-height:\n    clamp(390px, 36vw, 610px);\n\n  overflow: hidden;\n\n  border:\n    1px solid rgba(126, 169, 192, .16);\n\n  border-radius: 8px;\n\n  background:\n    #071019;\n\n  box-shadow:\n    0 22px 70px rgba(0,0,0,.35);\n\n  isolation: isolate;\n}\n\n\n\/* inner layout *\/\n\n#viewer-popular .vp-movie-inner {\n  position: relative;\n\n  display: grid;\n\n  grid-template-columns:\n    minmax(0, 1.65fr)\n    minmax(330px, .85fr);\n\n  min-height: inherit;\n}\n\n\n\/* =========================================================\n   LEFT IMAGE\n========================================================= *\/\n\n#viewer-popular .vp-visual {\n  position: relative;\n\n  min-height: inherit;\n\n  overflow: hidden;\n}\n\n\n#viewer-popular .vp-visual img {\n  position: absolute;\n  inset: 0;\n\n  width: 100%;\n  height: 100%;\n\n  display: block;\n\n  object-fit: cover;\n\n  object-position: center;\n\n  transform: scale(1.01);\n\n  filter:\n    brightness(.74)\n    saturate(.84)\n    contrast(1.05);\n}\n\n\n\/*\n   Main fade:\n   image gradually disappears toward the review\n*\/\n\n#viewer-popular .vp-visual::after {\n  content: \"\";\n\n  position: absolute;\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n\n    linear-gradient(\n      90deg,\n      rgba(3,8,12,.02) 0%,\n      rgba(3,8,12,.04) 43%,\n      rgba(5,13,19,.42) 66%,\n      rgba(5,13,19,.88) 87%,\n      #071019 100%\n    ),\n\n    linear-gradient(\n      180deg,\n      rgba(0,0,0,.05) 0%,\n      rgba(0,0,0,.03) 50%,\n      rgba(2,7,11,.52) 100%\n    );\n}\n\n\n\/* faint blue fog over image *\/\n\n#viewer-popular .vp-visual::before {\n  content: \"\";\n\n  position: absolute;\n  z-index: 2;\n\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n    radial-gradient(\n      ellipse at 55% 55%,\n      transparent 20%,\n      rgba(16,64,92,.10) 70%,\n      rgba(3,8,12,.35) 100%\n    );\n}\n\n\n\/* =========================================================\n   MOVIE LABEL ON IMAGE\n========================================================= *\/\n\n#viewer-popular .vp-movie-name {\n  position: absolute;\n  z-index: 4;\n\n  left:\n    clamp(22px, 3vw, 48px);\n\n  bottom:\n    clamp(20px, 3vw, 45px);\n\n  max-width: 52%;\n}\n\n\n#viewer-popular .vp-movie-name h3 {\n  margin: 0;\n\n  font-family:\n    Georgia,\n    \"Times New Roman\",\n    serif;\n\n  font-size:\n    clamp(28px, 3vw, 48px);\n\n  line-height: 1;\n\n  letter-spacing: -.01em;\n\n  text-transform: uppercase;\n\n  text-shadow:\n    0 4px 22px rgba(0,0,0,.75);\n}\n\n\n#viewer-popular .vp-movie-meta {\n  display: flex;\n\n  flex-wrap: wrap;\n\n  align-items: center;\n\n  gap: 10px;\n\n  margin-top: 12px;\n\n  font-size: 13px;\n\n  color:\n    rgba(230,237,241,.68);\n}\n\n\n#viewer-popular .vp-movie-meta span {\n  display: inline-flex;\n  align-items: center;\n}\n\n\n#viewer-popular\n.vp-movie-meta\nspan + span::before {\n\n  content: \"\";\n\n  width: 3px;\n  height: 3px;\n\n  margin-right: 10px;\n\n  border-radius: 50%;\n\n  background:\n    rgba(217,229,236,.40);\n}\n\n\n\/* =========================================================\n   REVIEW AREA\n========================================================= *\/\n\n#viewer-popular .vp-review {\n  position: relative;\n  z-index: 5;\n\n  display: flex;\n\n  flex-direction: column;\n\n  justify-content: center;\n\n  padding:\n    clamp(34px, 4vw, 64px)\n    clamp(30px, 4vw, 58px)\n    clamp(34px, 4vw, 64px)\n    clamp(10px, 2vw, 30px);\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(7,16,24,.30),\n      rgba(7,16,24,.96) 25%,\n      #071018 100%\n    );\n}\n\n\n\/* quote mark *\/\n\n#viewer-popular .vp-quote-mark {\n  margin-bottom: 10px;\n\n  font-family:\n    Georgia,\n    \"Times New Roman\",\n    serif;\n\n  font-size: 70px;\n\n  line-height: .7;\n\n  color:\n    rgba(83,197,255,.38);\n\n  user-select: none;\n}\n\n\n\/* stars *\/\n\n#viewer-popular .vp-stars {\n  display: flex;\n\n  align-items: center;\n\n  gap: 5px;\n\n  margin-bottom: 18px;\n\n  color: #f4f6f7;\n}\n\n\n#viewer-popular .vp-stars svg {\n  width: 18px;\n  height: 18px;\n\n  fill: currentColor;\n}\n\n\n\/* review text *\/\n\n#viewer-popular .vp-review-text {\n  margin: 0;\n\n  max-width: 520px;\n\n  font-family:\n    Georgia,\n    \"Times New Roman\",\n    serif;\n\n  font-size:\n    clamp(20px, 1.6vw, 27px);\n\n  line-height: 1.45;\n\n  color:\n    rgba(241,245,247,.94);\n}\n\n\n\/* reviewer *\/\n\n#viewer-popular .vp-reviewer {\n  display: flex;\n\n  align-items: center;\n\n  gap: 13px;\n\n  margin-top: 26px;\n}\n\n\n#viewer-popular .vp-avatar {\n  flex: 0 0 auto;\n\n  width: 43px;\n  height: 43px;\n\n  overflow: hidden;\n\n  border:\n    1px solid rgba(117, 190, 228, .30);\n\n  border-radius: 50%;\n\n  background:\n    rgba(255,255,255,.06);\n}\n\n\n#viewer-popular .vp-avatar img {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n}\n\n\n#viewer-popular .vp-reviewer-info {\n  min-width: 0;\n}\n\n\n#viewer-popular .vp-reviewer-name {\n  display: block;\n\n  font-size: 14px;\n\n  font-weight: 650;\n\n  color: #edf2f4;\n}\n\n\n#viewer-popular .vp-reviewer-date {\n  display: block;\n\n  margin-top: 3px;\n\n  font-size: 12px;\n\n  color:\n    rgba(196,209,217,.52);\n}\n\n\n\/* =========================================================\n   BUTTON\n========================================================= *\/\n\n#viewer-popular .vp-action {\n  display:\n    inline-flex;\n\n  align-items:\n    center;\n\n  gap: 9px;\n\n  width: fit-content;\n\n  margin-top: 28px;\n\n  padding:\n    11px 17px;\n\n  text-decoration: none;\n\n  color:\n    rgba(239,246,249,.88);\n\n  font-size: 13px;\n\n  font-weight: 600;\n\n  letter-spacing: .04em;\n\n  text-transform: uppercase;\n\n  border:\n    1px solid rgba(108,176,211,.28);\n\n  border-radius: 4px;\n\n  background:\n    rgba(10,28,39,.60);\n\n  transition:\n    border-color .2s ease,\n    background .2s ease,\n    transform .2s ease;\n}\n\n\n#viewer-popular .vp-action:hover {\n  border-color:\n    rgba(96,202,255,.62);\n\n  background:\n    rgba(13,42,57,.85);\n\n  transform:\n    translateY(-1px);\n}\n\n\n#viewer-popular .vp-action svg {\n  width: 16px;\n  height: 16px;\n\n  fill: none;\n\n  stroke: currentColor;\n\n  stroke-width: 1.8;\n\n  stroke-linecap: round;\n\n  stroke-linejoin: round;\n}\n\n\n\/* =========================================================\n   ALTERNATING BLOCK\n   Optional: movie 2 image composition slightly different\n========================================================= *\/\n\n#viewer-popular\n.vp-movie:nth-child(2)\n.vp-visual img {\n\n  object-position:\n    50% 38%;\n}\n\n\n#viewer-popular\n.vp-movie:nth-child(3)\n.vp-visual img {\n\n  object-position:\n    50% 46%;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1024px) {\n\n  #viewer-popular\n  .vp-movie-inner {\n\n    grid-template-columns:\n      minmax(0, 1.25fr)\n      minmax(310px, .9fr);\n  }\n\n\n  #viewer-popular\n  .vp-movie {\n\n    min-height:\n      430px;\n  }\n\n\n  #viewer-popular\n  .vp-review {\n\n    padding:\n      34px\n      30px\n      34px\n      10px;\n  }\n\n\n  #viewer-popular\n  .vp-review-text {\n\n    font-size:\n      21px;\n  }\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  #viewer-popular {\n    padding:\n      64px\n      14px;\n  }\n\n\n  #viewer-popular\n  .vp-heading {\n\n    padding:\n      0 8px;\n\n    margin-bottom:\n      30px;\n  }\n\n\n  #viewer-popular\n  .vp-heading h2 {\n\n    font-size:\n      clamp(34px, 11vw, 50px);\n  }\n\n\n  #viewer-popular\n  .vp-movie {\n\n    min-height: 0;\n  }\n\n\n  #viewer-popular\n  .vp-movie-inner {\n\n    display: block;\n  }\n\n\n  \/*\n     Mobile image becomes standard 16:9\n  *\/\n\n  #viewer-popular\n  .vp-visual {\n\n    min-height: 0;\n\n    aspect-ratio:\n      16 \/ 9;\n  }\n\n\n  \/*\n     Fade downward instead of toward right\n  *\/\n\n  #viewer-popular\n  .vp-visual::after {\n\n    background:\n\n      linear-gradient(\n        180deg,\n        rgba(3,8,12,.02) 0%,\n        rgba(3,8,12,.06) 45%,\n        rgba(5,13,19,.55) 75%,\n        #071019 100%\n      );\n  }\n\n\n  #viewer-popular\n  .vp-movie-name {\n\n    left: 20px;\n\n    right: 20px;\n\n    bottom: 20px;\n\n    max-width: none;\n  }\n\n\n  #viewer-popular\n  .vp-movie-name h3 {\n\n    font-size:\n      clamp(25px, 8vw, 38px);\n  }\n\n\n  #viewer-popular\n  .vp-review {\n\n    padding:\n      28px\n      22px\n      30px;\n\n    background:\n      #071018;\n  }\n\n\n  #viewer-popular\n  .vp-quote-mark {\n\n    font-size:\n      58px;\n  }\n\n\n  #viewer-popular\n  .vp-review-text {\n\n    font-size:\n      20px;\n  }\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  #viewer-popular *,\n  #viewer-popular *::before,\n  #viewer-popular *::after {\n\n    transition-duration:\n      .01ms !important;\n  }\n}\n<\/style>\n\n\n\n<section id=\"viewer-popular\">\n\n  <div class=\"vp-wrap\">\n\n\n    <!-- ===================================================\n         TITLE\n    ==================================================== -->\n\n    <header class=\"vp-heading\">\n\n      <p class=\"vp-kicker\">\n        Audience favorites\n      <\/p>\n\n      <h2>\n        Popular With<br>\n        Viewers\n      <\/h2>\n\n      <p>\n        Films audiences keep talking about long\n        after the credits disappear.\n      <\/p>\n\n    <\/header>\n\n\n\n    <!-- ===================================================\n         MOVIES\n    ==================================================== -->\n\n    <div class=\"vp-list\">\n\n\n      <!-- =================================================\n           MOVIE 01\n      ================================================== -->\n\n      <article class=\"vp-movie\">\n\n        <div class=\"vp-movie-inner\">\n\n\n          <!-- IMAGE -->\n\n          <div class=\"vp-visual\">\n\n            <img loading=\"lazy\"\n              src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/backdrop-640x360-1.webp\"\n              alt=\"Talk to Me\"\n              width=\"1920\"\n              height=\"1080\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            >\n\n\n            <div class=\"vp-movie-name\">\n\n              <h3>\n                Talk to Me\n              <\/h3>\n\n              <div class=\"vp-movie-meta\">\n\n                <span>\n                  2023\n                <\/span>\n\n                <span>\n                  1h 35m\n                <\/span>\n\n                <span>\n                  Horror\n                <\/span>\n\n              <\/div>\n\n            <\/div>\n\n          <\/div>\n\n\n\n          <!-- REVIEW -->\n\n          <div class=\"vp-review\">\n\n            <div\n              class=\"vp-quote-mark\"\n              aria-hidden=\"true\"\n            >\n              \u201c\n            <\/div>\n\n\n            <div\n              class=\"vp-stars\"\n              aria-label=\"5 out of 5 stars\"\n            >\n\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M12 2.7l2.85 5.78 6.38.93-4.62 4.5 1.09 6.35L12 17.27l-5.7 3 1.09-6.35-4.62-4.5 6.38-.93L12 2.7z\"\/>\n              <\/svg>\n\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M12 2.7l2.85 5.78 6.38.93-4.62 4.5 1.09 6.35L12 17.27l-5.7 3 1.09-6.35-4.62-4.5 6.38-.93L12 2.7z\"\/>\n              <\/svg>\n\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M12 2.7l2.85 5.78 6.38.93-4.62 4.5 1.09 6.35L12 17.27l-5.7 3 1.09-6.35-4.62-4.5 6.38-.93L12 2.7z\"\/>\n              <\/svg>\n\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M12 2.7l2.85 5.78 6.38.93-4.62 4.5 1.09 6.35L12 17.27l-5.7 3 1.09-6.35-4.62-4.5 6.38-.93L12 2.7z\"\/>\n              <\/svg>\n\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M12 2.7l2.85 5.78 6.38.93-4.62 4.5 1.09 6.35L12 17.27l-5.7 3 1.09-6.35-4.62-4.5 6.38-.93L12 2.7z\"\/>\n              <\/svg>\n\n            <\/div>\n\n\n            <blockquote class=\"vp-review-text\">\n\n              A genuinely creepy horror movie with a simple but brilliant concept. The hand scenes are intense, and the film does a great job of mixing supernatural horror with grief and teenage impulsiveness.\n\n            <\/blockquote>\n\n\n            <div class=\"vp-reviewer\">\n\n              <div class=\"vp-avatar\">\n\n                <img loading=\"lazy\"\n                  src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/4838434845.jpg\"\n                  alt=\"\"\n                  width=\"86\"\n                  height=\"86\"\n                  loading=\"lazy\"\n                  decoding=\"async\"\n                >\n\n              <\/div>\n\n\n              <div class=\"vp-reviewer-info\">\n\n                <span class=\"vp-reviewer-name\">\n                  Daniel M.\n                <\/span>\n\n                <span class=\"vp-reviewer-date\">\n                  Viewer review \u00b7 August 2026\n                <\/span>\n\n              <\/div>\n\n            <\/div>\n\n\n            <a\n              class=\"vp-action\"\n              href=\"#\"\n            >\n\n              View movie\n\n              <svg\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"M5 12h14M13 6l6 6-6 6\"\/>\n              <\/svg>\n\n            <\/a>\n\n          <\/div>\n\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- =================================================\n           MOVIE 02\n      ================================================== -->\n\n      <article class=\"vp-movie\">\n\n        <div class=\"vp-movie-inner\">\n\n\n          <div class=\"vp-visual\">\n\n            <img loading=\"lazy\"\n              src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/thesubstancebanner-e451726397826803.jpg\"\n              alt=\"The Substance\"\n              width=\"1920\"\n              height=\"1080\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            >\n\n\n            <div class=\"vp-movie-name\">\n\n              <h3>\n                The Substance\n              <\/h3>\n\n              <div class=\"vp-movie-meta\">\n\n                <span>\n                  2024\n                <\/span>\n\n                <span>\n                  2h 21m\n                <\/span>\n\n                <span>\n                  Supernatural\n                <\/span>\n\n              <\/div>\n\n            <\/div>\n\n          <\/div>\n\n\n\n          <div class=\"vp-review\">\n\n            <div\n              class=\"vp-quote-mark\"\n              aria-hidden=\"true\"\n            >\n              \u201c\n            <\/div>\n\n\n            <div\n              class=\"vp-stars\"\n              aria-label=\"5 out of 5 stars\"\n            >\n\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M12 2.7l2.85 5.78 6.38.93-4.62 4.5 1.09 6.35L12 17.27l-5.7 3 1.09-6.35-4.62-4.5 6.38-.93L12 2.7z\"\/>\n              <\/svg>\n\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M12 2.7l2.85 5.78 6.38.93-4.62 4.5 1.09 6.35L12 17.27l-5.7 3 1.09-6.35-4.62-4.5 6.38-.93L12 2.7z\"\/>\n              <\/svg>\n\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M12 2.7l2.85 5.78 6.38.93-4.62 4.5 1.09 6.35L12 17.27l-5.7 3 1.09-6.35-4.62-4.5 6.38-.93L12 2.7z\"\/>\n              <\/svg>\n\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M12 2.7l2.85 5.78 6.38.93-4.62 4.5 1.09 6.35L12 17.27l-5.7 3 1.09-6.35-4.62-4.5 6.38-.93L12 2.7z\"\/>\n              <\/svg>\n\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M12 2.7l2.85 5.78 6.38.93-4.62 4.5 1.09 6.35L12 17.27l-5.7 3 1.09-6.35-4.62-4.5 6.38-.93L12 2.7z\"\/>\n              <\/svg>\n\n            <\/div>\n\n\n            <blockquote class=\"vp-review-text\">\n\n              Wild, disgusting, beautiful, and impossible to look away from. The movie takes its message about beauty standards and aging to an absolutely insane level.\n\n            <\/blockquote>\n\n\n            <div class=\"vp-reviewer\">\n\n              <div class=\"vp-avatar\">\n\n                <img loading=\"lazy\"\n                  src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/43774538435845.jpg\"\n                  alt=\"\"\n                  width=\"86\"\n                  height=\"86\"\n                  loading=\"lazy\"\n                  decoding=\"async\"\n                >\n\n              <\/div>\n\n\n              <div class=\"vp-reviewer-info\">\n\n                <span class=\"vp-reviewer-name\">\n                  Maya R.\n                <\/span>\n\n                <span class=\"vp-reviewer-date\">\n                  Viewer review \u00b7 August 2026\n                <\/span>\n\n              <\/div>\n\n            <\/div>\n\n\n            <a\n              class=\"vp-action\"\n              href=\"#\"\n            >\n\n              View movie\n\n              <svg\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"M5 12h14M13 6l6 6-6 6\"\/>\n              <\/svg>\n\n            <\/a>\n\n          <\/div>\n\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- =================================================\n           MOVIE 03\n      ================================================== -->\n\n      <article class=\"vp-movie\">\n\n        <div class=\"vp-movie-inner\">\n\n\n          <div class=\"vp-visual\">\n\n            <img loading=\"lazy\"\n              src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/MV5BMWI3OGMyODYtMTk0ZS00YzEyLWFhNWYtYTFmM2UwMzgyYjA4XkEyXkFqcGdeQX4Z3ZXNsZXk@._V1_.jpg\"\n              alt=\"Sinners\"\n              width=\"1920\"\n              height=\"1080\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            >\n\n\n            <div class=\"vp-movie-name\">\n\n              <h3>\n                Sinners\n              <\/h3>\n\n              <div class=\"vp-movie-meta\">\n\n                <span>\n                  2023\n                <\/span>\n\n                <span>\n                  2h 17m\n                <\/span>\n\n                <span>\n                  Horror\n                <\/span>\n\n              <\/div>\n\n            <\/div>\n\n          <\/div>\n\n\n\n          <div class=\"vp-review\">\n\n            <div\n              class=\"vp-quote-mark\"\n              aria-hidden=\"true\"\n            >\n              \u201c\n            <\/div>\n\n\n            <div\n              class=\"vp-stars\"\n              aria-label=\"5 out of 5 stars\"\n            >\n\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M12 2.7l2.85 5.78 6.38.93-4.62 4.5 1.09 6.35L12 17.27l-5.7 3 1.09-6.35-4.62-4.5 6.38-.93L12 2.7z\"\/>\n              <\/svg>\n\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M12 2.7l2.85 5.78 6.38.93-4.62 4.5 1.09 6.35L12 17.27l-5.7 3 1.09-6.35-4.62-4.5 6.38-.93L12 2.7z\"\/>\n              <\/svg>\n\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M12 2.7l2.85 5.78 6.38.93-4.62 4.5 1.09 6.35L12 17.27l-5.7 3 1.09-6.35-4.62-4.5 6.38-.93L12 2.7z\"\/>\n              <\/svg>\n\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M12 2.7l2.85 5.78 6.38.93-4.62 4.5 1.09 6.35L12 17.27l-5.7 3 1.09-6.35-4.62-4.5 6.38-.93L12 2.7z\"\/>\n              <\/svg>\n\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M12 2.7l2.85 5.78 6.38.93-4.62 4.5 1.09 6.35L12 17.27l-5.7 3 1.09-6.35-4.62-4.5 6.38-.93L12 2.7z\"\/>\n              <\/svg>\n\n            <\/div>\n\n\n            <blockquote class=\"vp-review-text\">\n\n              A stylish and atmospheric horror film that feels much bigger than a typical vampire story. The performances are excellent, the music is incredible, and the slow build makes the violent moments hit even harder.\n\n            <\/blockquote>\n\n\n            <div class=\"vp-reviewer\">\n\n              <div class=\"vp-avatar\">\n\n                <img loading=\"lazy\"\n                  src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/236775447.jpg\"\n                  alt=\"\"\n                  width=\"86\"\n                  height=\"86\"\n                  loading=\"lazy\"\n                  decoding=\"async\"\n                >\n\n              <\/div>\n\n\n              <div class=\"vp-reviewer-info\">\n\n                <span class=\"vp-reviewer-name\">\n                  Alex K.\n                <\/span>\n\n                <span class=\"vp-reviewer-date\">\n                  Viewer review \u00b7 July 2026\n                <\/span>\n\n              <\/div>\n\n            <\/div>\n\n\n            <a\n              class=\"vp-action\"\n              href=\"#\"\n            >\n\n              View movie\n\n              <svg\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"M5 12h14M13 6l6 6-6 6\"\/>\n              <\/svg>\n\n            <\/a>\n\n          <\/div>\n\n\n        <\/div>\n\n      <\/article>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2ec11883 e-con-full e-flex e-con e-child\" data-id=\"2ec11883\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4f54bb10 elementor-widget elementor-widget-html\" data-id=\"4f54bb10\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* =========================================================\n   AVAILABLE ON YOUR DEVICES\n   Final cinematic block for Elementor\n   No JS \/ No libraries \/ Performance optimized\n========================================================= *\/\n\n#devices-cta,\n#devices-cta * {\n  box-sizing: border-box;\n}\n\n#devices-cta {\n  content-visibility: auto;\n  contain-intrinsic-size: auto 650px;\n\n  --dc-bg: #03070a;\n  --dc-text: #f1f4f6;\n  --dc-muted: #aeb7be;\n  --dc-blue: #5fc9ff;\n\n  position: relative;\n\n  width: 100%;\n\n  min-height:\n    clamp(440px, 36vw, 650px);\n\n  overflow: hidden;\n  isolation: isolate;\n\n  color: var(--dc-text);\n\n  background:\n    #03070a;\n\n  font-family:\n    Inter,\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Arial,\n    sans-serif;\n}\n\n\n\/* =========================================================\n   BACKGROUND ATMOSPHERE\n========================================================= *\/\n\n#devices-cta::before {\n  content: \"\";\n\n  position: absolute;\n  z-index: -3;\n\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n\n    radial-gradient(\n      ellipse at 78% 38%,\n      rgba(46, 130, 181, .17),\n      transparent 38%\n    ),\n\n    radial-gradient(\n      ellipse at 53% 70%,\n      rgba(17, 70, 104, .11),\n      transparent 38%\n    ),\n\n    linear-gradient(\n      180deg,\n      #020609 0%,\n      #040b10 55%,\n      #020609 100%\n    );\n}\n\n\n\/* subtle vignette *\/\n\n#devices-cta::after {\n  content: \"\";\n\n  position: absolute;\n  z-index: 5;\n\n  inset: 0;\n\n  pointer-events: none;\n\n  box-shadow:\n    inset 0 0 120px rgba(0,0,0,.62);\n\n  background:\n    linear-gradient(\n      180deg,\n      rgba(0,0,0,.18),\n      transparent 30%,\n      transparent 65%,\n      rgba(0,0,0,.44)\n    );\n}\n\n\n\/* =========================================================\n   WRAPPER\n========================================================= *\/\n\n#devices-cta .dc-inner {\n  position: relative;\n  z-index: 3;\n\n  width:\n    min(1600px, 100%);\n\n  min-height:\n    inherit;\n\n  margin:\n    0 auto;\n\n  display: grid;\n\n  grid-template-columns:\n    minmax(350px, .85fr)\n    minmax(0, 1.45fr);\n\n  align-items: stretch;\n}\n\n\n\/* =========================================================\n   LEFT CONTENT\n========================================================= *\/\n\n#devices-cta .dc-content {\n  position: relative;\n  z-index: 10;\n\n  display: flex;\n\n  flex-direction: column;\n\n  justify-content: center;\n\n  padding:\n\n    clamp(60px, 6vw, 110px)\n\n    clamp(30px, 5vw, 80px);\n\n}\n\n\n\/* eyebrow *\/\n\n#devices-cta .dc-eyebrow {\n  margin:\n    0 0 25px;\n\n  font-family:\n    Georgia,\n    \"Times New Roman\",\n    serif;\n\n  font-size:\n    clamp(12px, .85vw, 15px);\n\n  font-weight: 400;\n\n  line-height: 1.3;\n\n  letter-spacing: .13em;\n\n  text-transform: uppercase;\n\n  color:\n    rgba(219, 227, 232, .72);\n}\n\n\n\/* main heading *\/\n\n#devices-cta .dc-title {\n  margin:\n    0 0 19px;\n\n  max-width: 520px;\n\n  font-family:\n    Georgia,\n    \"Times New Roman\",\n    serif;\n\n  font-size:\n    clamp(36px, 3.6vw, 62px);\n\n  font-weight: 400;\n\n  line-height: .98;\n\n  letter-spacing: -.025em;\n\n  text-transform: uppercase;\n\n  color:\n    #eef3f6;\n}\n\n\n\/* text *\/\n\n#devices-cta .dc-description {\n  margin:\n    0;\n\n  max-width: 390px;\n\n  font-size:\n    clamp(15px, 1vw, 18px);\n\n  line-height: 1.65;\n\n  color:\n    rgba(218, 226, 231, .76);\n}\n\n\n\/* =========================================================\n   DEVICE ICONS\n========================================================= *\/\n\n#devices-cta .dc-devices {\n  display: flex;\n\n  align-items: flex-end;\n\n  gap:\n    clamp(24px, 2.3vw, 42px);\n\n  margin-top:\n    clamp(30px, 4vw, 48px);\n}\n\n\n\/* each device *\/\n\n#devices-cta .dc-device {\n  display: flex;\n\n  flex-direction: column;\n\n  align-items: center;\n\n  gap: 10px;\n\n  color:\n    rgba(172, 194, 207, .60);\n\n  transition:\n    color .22s ease,\n    transform .22s ease;\n}\n\n\n#devices-cta .dc-device:hover {\n  color:\n    rgba(133, 211, 250, .95);\n\n  transform:\n    translateY(-2px);\n}\n\n\n#devices-cta .dc-device svg {\n  display: block;\n\n  fill: none;\n\n  stroke: currentColor;\n\n  stroke-width: 1.45;\n\n  stroke-linecap: round;\n\n  stroke-linejoin: round;\n}\n\n\n\/* sizes *\/\n\n#devices-cta .dc-phone svg {\n  width: 23px;\n  height: 36px;\n}\n\n\n#devices-cta .dc-tablet svg {\n  width: 38px;\n  height: 42px;\n}\n\n\n#devices-cta .dc-laptop svg {\n  width: 72px;\n  height: 43px;\n}\n\n\n#devices-cta .dc-tv svg {\n  width: 59px;\n  height: 42px;\n}\n\n\n\/* labels *\/\n\n#devices-cta .dc-device span {\n  font-size: 10px;\n\n  letter-spacing: .08em;\n\n  text-transform: uppercase;\n\n  opacity: .68;\n}\n\n\n\/* =========================================================\n   RIGHT CINEMATIC IMAGE\n========================================================= *\/\n\n#devices-cta .dc-visual {\n  position: relative;\n\n  min-height:\n    inherit;\n\n  overflow: hidden;\n}\n\n\n\/* image *\/\n\n#devices-cta .dc-visual img {\n  position: absolute;\n\n  inset: 0;\n\n  width: 100%;\n  height: 100%;\n\n  display: block;\n\n  object-fit: cover;\n\n  object-position:\n    center 45%;\n\n  filter:\n    brightness(.82)\n    saturate(.83)\n    contrast(1.07);\n\n  transform:\n    scale(1.015);\n}\n\n\n\/*\n   Fade from image into left section\n*\/\n\n#devices-cta .dc-visual::before {\n  content: \"\";\n\n  position: absolute;\n\n  z-index: 2;\n\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n\n    linear-gradient(\n      90deg,\n\n      #03070a 0%,\n\n      rgba(3,7,10,.97) 5%,\n\n      rgba(3,7,10,.83) 15%,\n\n      rgba(3,7,10,.47) 29%,\n\n      rgba(3,7,10,.10) 48%,\n\n      transparent 68%\n    );\n}\n\n\n\/* bottom cinematic fade *\/\n\n#devices-cta .dc-visual::after {\n  content: \"\";\n\n  position: absolute;\n\n  z-index: 3;\n\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n\n    linear-gradient(\n      180deg,\n\n      rgba(0,0,0,.22) 0%,\n\n      transparent 25%,\n\n      transparent 63%,\n\n      rgba(2,6,9,.52) 100%\n    ),\n\n    radial-gradient(\n      ellipse at 62% 48%,\n      transparent 20%,\n      rgba(2,8,12,.06) 55%,\n      rgba(0,0,0,.28) 100%\n    );\n}\n\n\n\/* =========================================================\n   BLUE LIGHT BEHIND PHONE\n========================================================= *\/\n\n#devices-cta .dc-light {\n  position: absolute;\n\n  z-index: 1;\n\n  top: 18%;\n  right: 12%;\n\n  width: 46%;\n  height: 65%;\n\n  pointer-events: none;\n\n  background:\n    radial-gradient(\n      ellipse,\n      rgba(52, 160, 220, .24),\n      rgba(23, 82, 119, .10) 35%,\n      transparent 69%\n    );\n\n  filter:\n    blur(18px);\n}\n\n\n\/* =========================================================\n   OPTIONAL BOTTOM LINE\n========================================================= *\/\n\n#devices-cta .dc-bottom {\n  position: absolute;\n\n  z-index: 7;\n\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  height: 1px;\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent,\n      rgba(106, 172, 207, .18),\n      transparent\n    );\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1024px) {\n\n  #devices-cta {\n\n    min-height:\n      520px;\n  }\n\n\n  #devices-cta .dc-inner {\n\n    grid-template-columns:\n      minmax(310px, .9fr)\n      minmax(0, 1.1fr);\n  }\n\n\n  #devices-cta .dc-content {\n\n    padding:\n      60px\n      35px;\n  }\n\n\n  #devices-cta .dc-title {\n\n    font-size:\n      clamp(38px, 5vw, 52px);\n  }\n\n\n  #devices-cta .dc-devices {\n\n    gap: 26px;\n  }\n\n\n  #devices-cta .dc-laptop svg {\n\n    width: 62px;\n  }\n\n\n  #devices-cta .dc-tv svg {\n\n    width: 52px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  #devices-cta {\n\n    min-height:\n      680px;\n  }\n\n\n  #devices-cta .dc-inner {\n\n    display: block;\n\n    min-height:\n      inherit;\n  }\n\n\n  \/*\n     Image becomes full background on mobile\n  *\/\n\n  #devices-cta .dc-visual {\n\n    position: absolute;\n\n    inset: 0;\n\n    min-height: 0;\n  }\n\n\n  #devices-cta .dc-visual img {\n\n    object-position:\n      60% center;\n\n    filter:\n      brightness(.53)\n      saturate(.72)\n      contrast(1.08);\n  }\n\n\n  \/*\n     Stronger mobile fade\n  *\/\n\n  #devices-cta .dc-visual::before {\n\n    background:\n\n      linear-gradient(\n        90deg,\n\n        rgba(3,7,10,.96) 0%,\n\n        rgba(3,7,10,.82) 30%,\n\n        rgba(3,7,10,.42) 70%,\n\n        rgba(3,7,10,.25) 100%\n      );\n  }\n\n\n  #devices-cta .dc-visual::after {\n\n    background:\n\n      linear-gradient(\n        180deg,\n\n        #03070a 0%,\n\n        rgba(3,7,10,.76) 16%,\n\n        rgba(3,7,10,.34) 47%,\n\n        rgba(3,7,10,.76) 78%,\n\n        #03070a 100%\n      );\n  }\n\n\n  #devices-cta .dc-content {\n\n    position: relative;\n\n    min-height:\n      680px;\n\n    justify-content:\n      flex-end;\n\n    padding:\n      60px\n      24px\n      72px;\n  }\n\n\n  #devices-cta .dc-eyebrow {\n\n    margin-bottom:\n      16px;\n  }\n\n\n  #devices-cta .dc-title {\n\n    max-width:\n      430px;\n\n    font-size:\n      clamp(38px, 11vw, 55px);\n  }\n\n\n  #devices-cta .dc-description {\n\n    max-width:\n      370px;\n  }\n\n\n  #devices-cta .dc-devices {\n\n    flex-wrap: wrap;\n\n    gap:\n      24px 30px;\n\n    margin-top:\n      30px;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 440px) {\n\n  #devices-cta {\n\n    min-height:\n      650px;\n  }\n\n\n  #devices-cta .dc-content {\n\n    min-height:\n      650px;\n\n    padding:\n      48px\n      20px\n      55px;\n  }\n\n\n  #devices-cta .dc-title {\n\n    font-size:\n      39px;\n  }\n\n\n  #devices-cta .dc-description {\n\n    font-size:\n      14px;\n  }\n\n\n  #devices-cta .dc-devices {\n\n    justify-content:\n      flex-start;\n\n    gap:\n      21px;\n  }\n\n\n  #devices-cta .dc-device span {\n\n    display: none;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  #devices-cta *,\n  #devices-cta *::before,\n  #devices-cta *::after {\n\n    transition-duration:\n      .01ms !important;\n  }\n\n}\n<\/style>\n\n\n<section id=\"devices-cta\">\n\n  <div class=\"dc-inner\">\n\n\n    <!-- ===================================================\n         LEFT\n    ==================================================== -->\n\n    <div class=\"dc-content\">\n\n\n      <p class=\"dc-eyebrow\">\n        Available on your devices\n      <\/p>\n\n\n      <h2 class=\"dc-title\">\n        Horror.<br>\n        Wherever You Are.\n      <\/h2>\n\n\n      <p class=\"dc-description\">\n\n        Watch anytime, anywhere.<br>\n\n        On your phone, tablet, laptop\n        or smart TV.\n\n      <\/p>\n\n\n\n      <!-- =================================================\n           DEVICES\n      ================================================== -->\n\n      <div class=\"dc-devices\">\n\n\n        <!-- PHONE -->\n\n        <div class=\"dc-device dc-phone\">\n\n          <svg\n            viewBox=\"0 0 24 36\"\n            aria-hidden=\"true\"\n          >\n\n            <rect\n              x=\"4\"\n              y=\"1.5\"\n              width=\"16\"\n              height=\"32\"\n              rx=\"2\"\n            \/>\n\n            <path\n              d=\"M10 30.5h4\"\n            \/>\n\n          <\/svg>\n\n          <span>\n            Phone\n          <\/span>\n\n        <\/div>\n\n\n\n        <!-- TABLET -->\n\n        <div class=\"dc-device dc-tablet\">\n\n          <svg\n            viewBox=\"0 0 38 42\"\n            aria-hidden=\"true\"\n          >\n\n            <rect\n              x=\"3\"\n              y=\"2\"\n              width=\"32\"\n              height=\"37\"\n              rx=\"2\"\n            \/>\n\n            <circle\n              cx=\"19\"\n              cy=\"36\"\n              r=\".8\"\n            \/>\n\n          <\/svg>\n\n          <span>\n            Tablet\n          <\/span>\n\n        <\/div>\n\n\n\n        <!-- LAPTOP -->\n\n        <div class=\"dc-device dc-laptop\">\n\n          <svg\n            viewBox=\"0 0 72 43\"\n            aria-hidden=\"true\"\n          >\n\n            <rect\n              x=\"10\"\n              y=\"3\"\n              width=\"52\"\n              height=\"31\"\n              rx=\"1.5\"\n            \/>\n\n            <path\n              d=\"\n                M4 37\n                H68\n                L64 40\n                H8\n                Z\n              \"\n            \/>\n\n          <\/svg>\n\n          <span>\n            Laptop\n          <\/span>\n\n        <\/div>\n\n\n\n        <!-- TV -->\n\n        <div class=\"dc-device dc-tv\">\n\n          <svg\n            viewBox=\"0 0 59 42\"\n            aria-hidden=\"true\"\n          >\n\n            <rect\n              x=\"4\"\n              y=\"4\"\n              width=\"51\"\n              height=\"30\"\n              rx=\"1.5\"\n            \/>\n\n            <path\n              d=\"M24 38h11\"\n            \/>\n\n            <path\n              d=\"M29.5 34v4\"\n            \/>\n\n          <\/svg>\n\n          <span>\n            Smart TV\n          <\/span>\n\n        <\/div>\n\n\n      <\/div>\n\n    <\/div>\n\n\n\n    <!-- ===================================================\n         RIGHT IMAGE\n    ==================================================== -->\n\n    <div class=\"dc-visual\">\n\n\n      <div\n        class=\"dc-light\"\n        aria-hidden=\"true\"\n      ><\/div>\n\n\n      <img loading=\"lazy\"\n\n        src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/ff19f2534d-a01f-4e42-87dd-49dcf4618510.jpg\"\n\n        width=\"1920\"\n\n        height=\"1080\"\n\n        loading=\"lazy\"\n\n        decoding=\"async\"\n\n        alt=\"Horror movies available on multiple devices\"\n\n      >\n\n\n    <\/div>\n\n\n  <\/div>\n\n\n  <div\n    class=\"dc-bottom\"\n    aria-hidden=\"true\"\n  ><\/div>\n\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dive Into Darkness The best horror from around the world. Talk to Me WATCH TRAILER One touch opens the door you cannot close. 1h 35m 2023 R HORROR Audience favorites Popular With Viewers Films audiences keep talking about long after the credits disappear. Talk to Me 2023 1h 35m Horror \u201c A genuinely creepy horror [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-172","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/digitaldesignonline.ru\/ru\/wp-json\/wp\/v2\/pages\/172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitaldesignonline.ru\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitaldesignonline.ru\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitaldesignonline.ru\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitaldesignonline.ru\/ru\/wp-json\/wp\/v2\/comments?post=172"}],"version-history":[{"count":77,"href":"https:\/\/digitaldesignonline.ru\/ru\/wp-json\/wp\/v2\/pages\/172\/revisions"}],"predecessor-version":[{"id":1521,"href":"https:\/\/digitaldesignonline.ru\/ru\/wp-json\/wp\/v2\/pages\/172\/revisions\/1521"}],"wp:attachment":[{"href":"https:\/\/digitaldesignonline.ru\/ru\/wp-json\/wp\/v2\/media?parent=172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}