:root{
  --bg:#0c0c0f; --fg:#f6f6f7; --muted:#a1a1aa;
  --card:#0f0f14;           /* единый цвет карточек/блоков */
  --line:#23232b;
  --brand1:#f43f5e; --brand2:#a855f7; --accent:#22d3ee;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
}

/* базовые */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background:#0f0f14;                 /* базовый слой */
}
/* ЕДИНЫЙ фоновый градиент для всей страницы */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(244,63,94,.25), transparent 60%),
    radial-gradient(1200px 800px at 110% 0%, rgba(168,85,247,.22), transparent 60%),
    linear-gradient(180deg,#0b0b10 0%,#0f0f14 100%);
}

a{color:inherit; text-decoration:none}
.container{max-width:1150px; margin:0 auto; padding:0 16px}

/* Навигация */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(12,12,15,.6);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{display:flex; align-items:center; gap:10px; font-weight:700}
.logo-mark{
  width:34px; height:34px; border-radius:12px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--brand1),var(--brand2)); box-shadow:var(--shadow)
}
.nav-links{display:none; gap:20px; font-size:14px; color:var(--muted)}
@media (min-width:760px){.nav-links{display:flex}}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:#14141a; color:var(--fg)}
.btn.primary{border:0; background:linear-gradient(135deg,var(--brand1),var(--brand2)); font-weight:600}
.btn.block{width:100%; justify-content:center}

/* Hero */
.hero{padding:56px 0 24px}
.grid{display:grid; gap:28px}
@media (min-width:900px){.grid{grid-template-columns:1.1fr .9fr; align-items:center}}
h1{font-size:clamp(28px,5vw,48px); line-height:1.05; margin:0 0 12px}
.lead{color:var(--muted)}

/* Карточка календаря */
.demo-card{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:24px; padding:16px;
  box-shadow:var(--shadow); position:relative
}
/* Бейдж справа */
.ribbon{
  position:absolute; top:-14px;
  transform:rotate(6deg);
  background:linear-gradient(135deg,var(--brand1),var(--brand2));
  color:#fff; padding:6px 10px; border-radius:12px;
  font-size:12px; font-weight:700; box-shadow:var(--shadow)
}
.ribbon-right{right:-14px; left:auto}

/* Сетка 31 дня */
.days{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
@media (min-width:520px){.days{grid-template-columns:repeat(7,1fr)}}
@media (min-width:900px){.days{grid-template-columns:repeat(7,1fr)}}
.day{
  position:relative; padding:10px; border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg,#0f0f15,#0c0c12);
  transition:transform .2s ease, box-shadow .2s ease; text-align:left
}
.day:hover{transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.35)}
.day-num{
  width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
  font-weight:800; color:#fff; background:linear-gradient(135deg,var(--brand1),var(--brand2))
}
.day .play{position:absolute; right:10px; top:10px; opacity:.7}
.icon{width:18px; height:18px; display:inline-block}

/* Секции */
section{padding:64px 0; background:transparent}
h2{font-size:clamp(22px,3.6vw,32px); margin:0 0 8px}
.muted{color:var(--muted)}

/* Карточки преимуществ */
.cards{display:grid; gap:16px}
@media (min-width:840px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--line); border-radius:var(--radius); padding:18px; background:var(--card)}

/* Прайс */
.pricing{display:grid; gap:16px}
@media (min-width:900px){.pricing{grid-template-columns:repeat(3,1fr)}}
.price{border:1px solid var(--line); border-radius:var(--radius); padding:18px; background:var(--card)}
.price .tag{display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; border:1px solid var(--line); color:var(--muted)}
/* строка цены + старая цена справа */
.value-row{
  display:flex; align-items:baseline; gap:12px; margin:10px 0;
}
.price .value{font-size:30px; font-weight:800; margin:0}
.old-wrap{
  margin-left:auto; display:flex; align-items:baseline; gap:10px; white-space:nowrap;
}
.old-price{
  color:var(--muted);
  text-decoration:line-through; text-decoration-thickness:2px;
  text-decoration-color:rgba(244,63,94,.85);
  font-size:16px;
}
.discount{
  font-size:12px; font-weight:700; color:#fff; padding:2px 8px; border-radius:999px;
  background:linear-gradient(135deg,var(--brand1),var(--brand2));
}

/* CTA */
.cta{border:1px solid var(--line); background:var(--card); border-radius:24px; padding:24px}
.cta form{display:flex; gap:10px; margin-top:12px}
.input{flex:1; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:#0f0f14; color:var(--fg)}

/* Footer */
footer{border-top:1px solid var(--line); padding:30px 0; color:var(--muted)}

/* Диалог видео */
dialog{border:1px solid var(--line); border-radius:20px; padding:0; background:#0f0f14; color:var(--fg); width:min(880px,92vw)}
dialog::backdrop{background:rgba(0,0,0,.6)}
.modal-head{padding:16px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between}
.modal-body{padding:16px}
.video{aspect-ratio:16/9; width:100%; border:0; border-radius:16px}
.x{border:1px solid var(--line); background:#13131a; color:#fff; border-radius:10px; padding:8px 10px}

/* Утилиты */
.caps{display:inline-block; font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted)}
.spacer{height:12px}

/* Вертикальное видео по центру */
#videoDialog {
  width: auto;
  max-width: 420px;          /* сама модалка узкая */
  border-radius: 20px;
}

#videoDialog .modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

/* Видео строго вертикальное (9:16) */
#modalVideo {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  object-fit: cover;
  background: #000;
}