@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap');

:root{
  --font-display: "Unbounded", sans-serif;
  --font-body: "Unbounded", sans-serif;

  --white: #fff;
  --purple: #7b1fa2;
  --purple-2: #a100ff;
  --ink: rgba(255,255,255,.92);

  --container: 1250px;

  --radius-lg: 22px;
  --radius-md: 16px;

  /* Таймер: высота гирлянды */
  --lights-h: 18px;

  /* Контент-блок ширина */
  --stack-w: 760px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: #ff8a00 url("../img/background.webp") center / cover no-repeat fixed;
}

/* Лёгкое затемнение/контраст для читабельности */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 600px at 30% 20%, rgba(0,0,0,.18), transparent 60%),
    radial-gradient(900px 600px at 75% 35%, rgba(0,0,0,.22), transparent 62%),
    linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.28));
  pointer-events: none;
}

.page{
  min-height: 100dvh;
  display: flex;
}

.container{
  width: min(var(--container), calc(100% - 24px));
  margin: 0 auto;
  padding: 18px 0 28px;
  position: relative;
  z-index: 1;
}


@media (max-width: 991px){
.container{
      padding: 12px 0;
}}



/* ===== Topbar / Logo ===== */
.topbar{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 0 6px;
}


@media (max-width: 991px){
.topbar{
  padding: 0;
}}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand__logo{
  height: 44px;
  width: auto;
  display: block;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.28));
}

/* ===== Features =====
   Важно: не вылезают за экран. На мобилке перестраиваются. */
.features{
  position: absolute;
  pointer-events: none;
  display: grid;
  gap: 14px;
}

.features--left{
  top: 92px;
  left: clamp(8px, 2vw, 24px);
  width: clamp(150px, 18vw, 260px);
}

.features--right{
  top: clamp(140px, 18vh, 240px);
  right: clamp(8px, 2vw, 24px);
  width: clamp(160px, 20vw, 300px);
}

.feature{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.25));
}

/* ===== Promo ===== */
.promo{
  display: grid;
  justify-items: center;
  padding-top: 10px;
}

.promo__stack {
    width: min(var(--stack-w), 100%);
    text-align: center;
    display: grid;
    gap: 12px;
    align-items: start;
    margin-inline: auto;
    justify-content: center;
}

/* Большая белая плашка под сумму */
.prizePill{
  width: 100%;
  border-radius: 999px;
  padding: 14px 16px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
  position: relative;
}

.prizePill__text{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1;
  letter-spacing: .5px;
  color: #8c2cff;
  text-shadow: 0 8px 24px rgba(140,44,255,.10);
}

.subtitle {
    margin: 0;
    font-weight: 600;
    font-size: clamp(14px, 2vw, 18px);
    line-height: 1.15;
    text-shadow: 0 12px 26px rgba(0,0,0,.26);
    color: #fff;
}

/* Условия (фиолетовая карточка) */
.infoCard{
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  background: rgba(126, 34, 206, .72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 18px 50px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  display: grid;
  gap: 8px;
}

.infoRow{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
}

.infoKey {
    text-align: left;
    font-weight: 500;
    font-size: 18px;
    color: rgba(255,255,255,.95);
}

@media (max-width: 991px){
.infoKey { 
font-size: 16px;

}}


.infoOld {
    font-weight: 500;
    color: rgba(255,255,255,.95);
}

.infoOld s {
    position: relative;
    text-decoration: none;
}

.infoOld s::before {
    content: "";
    width: 110%;
    height: 3px;
    background: #dd1a1a;
    position: absolute;
    display: block;
    transform: rotate(166deg);
    left: -5px;
    top: 9px;
}


.infoNew {
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255, 167, 0, .92);
    color: #fff;
}

.infoNew--pill{
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 167, 0, .92);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* CTA */
.cta {
    height: 62px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .6px;
    color: #fff;
    background: linear-gradient(180deg, #ffcc57, #ff9800 55%, #ff7a00);
    box-shadow: 0 20px 55px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.22);
    width: min(520px, 100%);
    margin-top: 2px;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    margin: 0 auto;
}


@media (max-width: 991px){
.cta {
      width: 80%;
}}


.cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 22px 60px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.26);
}

/* Timer card */
.timerCard{
  width: min(560px, 100%);
  background: rgba(255,255,255,.94);
  color: #2a0040;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 55px rgba(0,0,0,.24);
  position: relative;
  overflow: hidden;

  padding: calc(14px + var(--lights-h)) 14px 14px;
}

.timerCard::before{
  content:"";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  height: var(--lights-h);
  background: url("../img/lights.png") left top / auto 100% repeat-x;
}

.timerTitle{
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: rgba(40,0,60,.70);
}

.timer{
  margin-top: 10px;
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  justify-content: center;
  width: 100%;
}

.tCol{
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 84px;
}

.tNum{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1;
  color: #8c2cff;
}

.tLbl{
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: rgba(40,0,60,.70);
}

.tSep{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1;
  color: rgba(140,44,255,.65);
  transform: translateY(-6px);
}

.legal{
  margin: 0;
  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 12px 26px rgba(0,0,0,.26);
}

/* ===== Desktop tuning ===== */
@media (min-width: 980px){
  .container{ padding: 22px 0 36px; }
  .brand__logo{ height: 48px; }


}

/* ===== Mobile layout ===== */
@media (max-width: 760px){
  body{ background-attachment: scroll; }

  .topbar{ justify-content: center; }
  .brand__logo{ height: 40px; }

  /* фичи не по бокам (там мало места), а компактно сверху */
  .features{
    position: static;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
            margin: 10px 0 0;
  }
  .features--left,
  .features--right{
    top: auto; left: auto; right: auto;
  }

  .features--left .feature,
  .features--right .feature{
    width: min(30%, 170px);
  }

  .promo{ padding-top: 4px; }
}

/* ===== Very short screens (чтобы всё влезало на 1 экран по высоте) ===== */
@media (max-height: 720px){
  .container{ padding: 12px 0 16px; }
  .promo__stack{ gap: 10px; }
  .cta{ height: 56px; }
  .timerCard{ padding: calc(12px + var(--lights-h)) 12px 12px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cta{ transition: none; }
}

.payRow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
}

.payRow img{
  height: 22px;
  width: auto;

  padding: 2px 6px;
  border-radius: 8px;
}

.timerCard {
    width: min(560px, 100%);
    background: rgba(255,255,255,.94);
    color: #2a0040;
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 55px rgba(0,0,0,.24);
    position: relative;
    overflow: hidden;
    padding: calc(14px + var(--lights-h)) 14px 14px;
    margin: 0 auto;
}
.timerCard::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 32px;
    background: url("../img/lights.png") left top / auto 100% repeat-x;
    background-size: auto;
}

.timerTitle{
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: rgba(40,0,60,.70);
}

/* РОВНАЯ сетка таймера */
.timerGrid{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 10px;
}

.tBox{
  width: 100%;
  max-width: 160px;
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(140,44,255,.10);
  box-shadow: inset 0 0 0 1px rgba(140,44,255,.16);
  display: grid;
  justify-items: center;
  gap: 6px;
}

.tNum {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(34px, 5vw, 54px);
    line-height: 1;
    color: #c24be7;
    font-variant-numeric: tabular-nums;
}

.tLbl{
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: rgba(40,0,60,.70);
}

.tSep{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1;
  color: rgba(140,44,255,.55);
}

/* мобилка: делаем боксы уже */
@media (max-width: 420px){
  .tBox{ max-width: 120px; padding: 8px 10px; }
}


.cta{
    animation: strong-pulse 1.5s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes strong-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.9;
    }
}


@media (max-width: 991px){
aside.features.features--right {
    display: none;
}}