/* ===== base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#000 url("../img/bg.webp") center/cover no-repeat fixed;
  color:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== layout ===== */
.page{
  min-height:100dvh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding-top:75px;      /* отступ сверху */
  padding-bottom:120px;  /* отступ снизу под кнопку */
  position:relative;
}

/* headline image */
.headline{
  width:clamp(320px, 75vw, 1356px); /* max 1356px по ТЗ + адаптив */
  height:auto;
  display:block;
  user-select:none;
  pointer-events:none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}

/* CTA button */
/* ========================= */
/*         CTA BUTTON        */
/* ========================= */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 344px;
  height: 120px;
  border-radius: 32px;
  text-decoration: none;
  color: #fff;

  /* текст по ТЗ */
  font-family: 'Rubik Bubbles', cursive;
  font-weight: 400;
  font-size: 32px;
  line-height: 38px;

  /* фон + тени по ТЗ */
  background: linear-gradient(180deg, #FF7C1E 0%, #F85A00 100%);
  box-shadow:
    0px 190px 53px rgba(255, 125, 31, 0.01),
    0px 122px 49px rgba(255, 125, 31, 0.07),
    0px 68px 41px rgba(255, 125, 31, 0.25),
    0px 30px 30px rgba(255, 125, 31, 0.43),
    0px 8px 17px rgba(255, 125, 31, 0.49);

  /* эффект отрыва от фона */
  position: relative;
  overflow: visible;
  animation: popLift 2.4s ease-in-out infinite;
  transition: background .2s ease;
}

/* внутреннее мягкое свечение */
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background: radial-gradient(circle at 50% 50%,
    rgba(255, 190, 120, 0.38) 0%,
    rgba(255, 150, 60, 0.24) 38%,
    rgba(255, 120, 30, 0.00) 70%
  );

  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

/* эффект "оторвалась" — аналог первой задачи */
@keyframes popLift {
  0% {
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 0 rgba(255,124,30,0));
  }
  50% {
    transform: scale(1.06) translateY(-6px);
    filter: drop-shadow(0 0 55px rgba(255,124,30,0.55));
  }
  100% {
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 0 rgba(255,124,30,0));
  }
}

.cta:hover::after {
  opacity: 1;
}

/* hover по ТЗ */
.cta:hover {
  background:
    linear-gradient(0deg, rgba(255,255,255,0.10), rgba(255,255,255,0.10)),
    linear-gradient(180deg, #FF7C1E 0%, #F85A00 100%);
}

/* active по ТЗ */
.cta:active {
  background: #FF7C1E;
  transform: scale(0.98) translateY(2px);
  filter: none;
}


@media (max-width: 1024px){
.headline {
    width: clamp(320px, 98vw, 1356px);
}
}

/* ——— Адаптив ——— */
@media (max-width: 768px){
  body{
  margin:0;
  background:#000 url("../img/bg2.webp") center/cover no-repeat fixed;
 }

  .page{
    padding-top:56px;
    padding-bottom:140px;
    justify-content: flex-start;
  }
  .cta{
    width: 281px;
    height: 100px;
    font-size: 32px;
    margin-top: -25px;
  }
}

@media (max-width: 520px){
.headline {
    width:100vw;
}
  .page{
    padding-top:42px;
    padding-bottom:120px;
  }
    .cta {
        width: 220px;
        height: 70px;
        font-size: 24px;
        margin-top: -7px;
    }
}