@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
   --bg: #010101;
   --text: #f5f7fb;
   --muted: #9aa1a9;
   --accent: #5a3acd;
   --line: #191919;
}
section {
   overflow: hidden;
}
* {
   box-sizing: border-box;
}
body {
   margin: 0;
   background: #fff;
   color: var(--text);
   font: 16px/1.55 Inter, system-ui, Segoe UI, Arial;
}

/* ===== HERO ===== */
.hero {
   position: relative;
   min-height: calc(var(--vh) * 100);
   overflow: hidden;
   isolation: isolate; /* корректная слоистость */
   background: url("../img/hero-bg.png") no-repeat center / cover;
}

/* Голова «на весь экран» */
.hero__stage {
   position: relative;
   height: calc(var(--vh) * 100);
   display: grid;
   place-items: center;
   z-index: 3; /* между лентами */
   padding: 0;
}
.hero__headwrap {
   width: 100%;
   height: calc(var(--vh) * 100);
   display: grid;
   place-items: center;
   opacity: 0;
   transform: translateY(60px) scale(1.02);
   will-change: transform, opacity;
}
.hero__headwrap.is-in {
   animation: head-in 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
@keyframes head-in {
   from {
      opacity: 0;
      transform: translateY(60px) scale(1.02);
   }
   to {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}
@keyframes info-fade-in {
   0% {
      opacity: 0;
      transform: translate(-50%, 0%); /* старт чуть ниже */
   }
   100% {
      opacity: 1;
      transform: translate(-50%, -50%); /* финальное положение */
   }
}

.hero__head {
   height: 100%;
   width: auto; /* по высоте вьюпорта */
   max-width: none;
   object-fit: contain;
   object-position: center;
}

/* ===== ЛЕНТЫ (2 шт «крестом», снизу вверх) ===== */
.tape {
   position: absolute;
   left: -18vw;
   right: -18vw;
   display: flex;
   gap: 0;
   overflow: hidden;
   background: #fff;
   pointer-events: none;
   user-select: none;
   white-space: nowrap;
}
/* фон ленты + BLUR 54px */
.tape::before {
   content: "";
   position: absolute;
   inset: 0;
   background: url("../img/radial.png") no-repeat center / cover;
}
.hero__overlay {
   background: url("../img/hero-overlay.png") center / cover no-repeat;
   position: absolute;
   width: 100%;
   height: 100%;
   bottom: 0;
   z-index: 5;
}
/* позиционирование и слои */
.tape--back {
   bottom: clamp(71px, calc(71px + (440px - 100vw) * 0.5), 180px);
   transform: rotate(25deg); /* нижн-лево -> верх-право */
   z-index: 4; /* ЗА головой */
   height: 71px;
}
.tape--front {
   bottom: clamp(51px, calc(51px + (440px - 100vw) * 0.5), 200px);
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   transform: rotate(-25deg); /* нижн-право -> верх-лево */
   z-index: 4; /* ПЕРЕД головой */
   height: 71px;
}

/* ===== JS-ТИКЕР (вместо CSS-анимаций) ===== */
.ticker {
   display: flex;
   align-items: center;
   will-change: transform; /* смещается из JS */
   transform: translate3d(0, 0, 0);
   will-change: transform;
}
.ticker__item {
   display: inline-flex;
   align-items: center;
   gap: 100px;
}
.ticker__word {
   font-weight: 700;
   color: #1ba3f7;
   text-transform: uppercase;
}
/* размеры текста для передней/задней ленты */
.tape--front .ticker__word {
   font-size: 32px;
}
.tape--back .ticker__word {
   font-size: 32px;
}

.ticker__star {
   font-style: normal;
   opacity: 0.45;
   transform: translateY(-0.08em) scale(1.05);
}

/* доступность */
@media (prefers-reduced-motion: reduce) {
   .hero__headwrap {
      animation: none !important;
      transform: none !important;
      opacity: 1 !important;
   }
}

/* ==== CTA: точный размер 172px + внешнее свечение ==== */
:root {
   --cta-size: 172px; /* фиксированный размер кнопки */
   --cta-glow: #8f4dff; /* цвет свечения */
}

/* контейнер CTA (остаётся поверх ленты) */
.cta {
   position: absolute;
   left: 50%;
   bottom: 48px; /* подгони при необходимости */
   transform: translateX(-50%);
   z-index: 6; /* сама кнопка над лентой */
   pointer-events: auto;
}

.cta::before {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   width: calc(var(--cta-size) * 2);
   height: calc(var(--cta-size) * 2);
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background: radial-gradient(
      closest-side,
      rgba(143, 77, 255, 0.55),
      rgba(143, 77, 255, 0) 72%
   );
   filter: blur(20px);
   z-index: 0; /* свечение под кнопкой */
   pointer-events: none;
}

/* сам круг кнопки — ровно 172px */
.cta__btn {
   position: relative;
   width: var(--cta-size);
   height: var(--cta-size);
   border-radius: 50%;
   background: var(--bg); /* чёрный круг */
   color: #fff;
   display: grid;
   place-items: center;
   cursor: pointer;
   outline: none;
   border: 0;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
   z-index: 1; /* выше свечения (::before контейнера) */
}

/* текстовое кольцо */
.cta__ring {
   position: absolute;
   inset: 0;
   width: 90%;
   height: 90%;
   transform-origin: 50% 50%;
   animation: cta-spin 18s linear infinite;
   will-change: transform;
   left: 8.5px;
   top: 7.5px;
}
.cta__text {
   font-size: 16px; /* в 172px выглядит как в макете */
   font-weight: 600;
   letter-spacing: 0.18em;
   fill: #fff;
   opacity: 0.95;
}

/* стрелка по центру */
.cta__arrow {
   width: 40%;
   height: 40%;
   color: #fff;
}

/* ускорение при hover (по желанию) */
.cta__btn:hover .cta__ring {
   animation-duration: 8s;
}

@keyframes cta-spin {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}
.hero__info {
   display: none;
}
/* уважение к reduce-motion */
@media (prefers-reduced-motion: reduce) {
   .cta__ring {
      animation: none;
   }
}

.hero__info {
   position: absolute;
   left: 50%;
   bottom: clamp(150px, calc(150px + (440px - 100vw) * 0.5), 230px);
   width: 100%;
   text-align: center;
   transform: translate(-50%, -50%);
   z-index: 10;
   display: flex;
   flex-direction: column;
   gap: 25px;
   opacity: 0; /* изначально скрыт */
   animation: info-fade-in 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
   animation-delay: 0.5s; /* появляется чуть позже, после картинки */
}
.hero__info a:nth-child(1) {
   font-size: 24px;
   font-weight: 700;
   color: #fff;
   filter: drop-shadow(0px 0px 4.5px rgba(255, 255, 255, 0.5));
   margin: 0;
   text-decoration: none;
}
.hero__info-btns {
   display: flex;
   flex-direction: column;
   gap: 10px;
}
.hero__info .hero__info-btns a:nth-child(1) {
   background: #fff;
   border-radius: 20px;
   color: #1ba3f7;
   text-decoration: none;
   width: 100%;
   max-width: 320px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
   font-size: 20px;
   font-weight: 600;
   height: 46px;
   filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.6));
}
.hero__info a:nth-child(2) {
   background: #1ba3f7;
   border-radius: 20px;
   color: #fff;
   text-decoration: none;
   width: 100%;
   max-width: 320px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
   font-size: 20px;
   font-weight: 600;
   height: 46px;
   filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.6));
}

/* передняя лента выше */

:root {
   --cta-size: 140px; /* фиксированный размер кнопки */
}
.cta__ring {
   width: 90%;
   height: 90%;
   left: 7px;
   top: 6px;
}
.cta__arrow {
   width: 30%;
   height: 30%;
}
.tape--back {
   height: 71px;
}
.tape--back .ticker__word {
   font-size: 32px;
}
.ticker__item {
   gap: 20px;
}
.tape--front {
   height: 71px;
}
.tape--front .ticker__word {
   font-size: 32px;
}
@media (max-width: 768px) {
   .hero__info {
      bottom: clamp(40px, calc(40px + (440px - 100vw) * 0.5), 230px);
   }
   .hero__head {
      width: 100%;
   }
   .hero__head,
   .hero__headwrap {
      height: 615px;
   }
   :root {
      --cta-size: 120px; /* фиксированный размер кнопки */
   }
   .hero__info .hero__info-btns a:nth-child(1) {
      max-width: 186px;
   }
   .hero__info .hero__info-btns a:nth-child(2) {
      max-width: 186px;
   }
}
@media (max-width: 490px) {
   :root {
      --cta-size: 120px; /* фиксированный размер кнопки */
   }
}

ul {
   padding: 0;
   margin: 0;
}
ul li {
   list-style: none;
}
ul li a {
   text-decoration: none;
}