/* Party Maker — лендинг. Тёмная сцена + фоновая шейдер-волна (assets/site.js).
   Акценты --a/--b выставляет JS по активной секции (data-a/data-b в разметке),
   поэтому все цветные элементы наследуют цвет текущего блока. */

@font-face{font-family:Unbounded;src:url(../fonts/unbounded-cyrillic.woff2) format('woff2');
  font-weight:600 700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Unbounded;src:url(../fonts/unbounded-latin.woff2) format('woff2');
  font-weight:600 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:Onest;src:url(../fonts/onest-cyrillic.woff2) format('woff2');
  font-weight:400 700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;src:url(../fonts/onest-latin.woff2) format('woff2');
  font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}

:root{
  --a:#ff2d95;            /* акцент секции — ведёт JS */
  --b:#19e6d0;
  --bg:#07060d;
  --ink:#f4f0fb;
  --dim:#a99fc4;
  --line:rgba(255,255,255,.10);
  /* Под карточками ходят светящиеся ленты, поэтому фон плотный. Раньше здесь стоял
     backdrop-filter: blur() — он давал стекло, но при скролле стоил кадров (blur пересчитывается
     на каждый пиксель движения), а плотная подложка читается не хуже. */
  --card:rgba(12,10,20,.78);
  --pad:clamp(20px,5vw,72px);
  --maxw:1240px;
  /* Цвет акцентов ведёт JS маленькими шагами, поэтому переход тут короткий:
     с длинным получилось бы двойное сглаживание и «вязкая» перекраска. */
  --t:.25s linear;
}

*{box-sizing:border-box}
/* ⚠ scroll-behavior здесь НЕ ставим: страницу ведёт свой инерционный скролл (site.js),
   а нативное сглаживание поверх него дало бы две анимации на одну прокрутку — рывки.
   Для устройств без инерции (тач, reduced-motion) флаг включает сам скрипт. */
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 clamp(15px,1.15vw,17px)/1.65 Onest,"Segoe UI",system-ui,sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,.price,.foot-brand{font-family:Unbounded,Onest,system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.02;margin:0}

/* ── фон ───────────────────────────────────────────────── */
#wave{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
body.no-webgl #wave{display:none}
body.no-webgl::before{            /* запасной фон: те же цвета, только средствами CSS */
  content:"";position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 15% 0%,color-mix(in srgb,var(--a) 26%,transparent) 0%,transparent 60%),
    radial-gradient(110% 80% at 85% 100%,color-mix(in srgb,var(--b) 20%,transparent) 0%,transparent 62%),
    var(--bg);
  transition:background var(--t);
}
main,.foot{position:relative;z-index:1}
.nav{z-index:5}   /* выше main: иначе sticky-колонка продукта просвечивает через шапку */

/* ── шапка ─────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;display:flex;align-items:center;gap:clamp(12px,3vw,40px);
  padding:14px var(--pad);backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(7,6,13,.94),rgba(7,6,13,.55) 70%,transparent);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.01em}
.brand img{border-radius:8px}
.nav-links{display:flex;gap:clamp(14px,2vw,28px);margin-left:auto;font-size:.94em;color:var(--dim)}
.nav-links a{transition:color .25s}
.nav-links a:hover{color:var(--ink)}

/* ── кнопки ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:999px;border:1px solid transparent;
  font-family:Onest,system-ui,sans-serif;font-weight:700;font-size:.97em;letter-spacing:.01em;
  color:#0b0710;background:linear-gradient(96deg,var(--a),var(--b));
  /* ⚠ Градиент строим от border-box: при умолчании (padding-box) под прозрачной рамкой
     дублируются крайние пиксели градиента — по кругу шла рваная кайма. */
  background-origin:border-box;background-clip:border-box;
  transition:transform .25s var(--t),box-shadow .3s,background .8s ease,filter .25s;
  box-shadow:0 8px 30px -12px color-mix(in srgb,var(--a) 70%,transparent);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 14px 40px -14px color-mix(in srgb,var(--a) 85%,transparent)}
.btn-sm{padding:9px 18px;font-size:.88em}
.btn-lg{padding:16px 32px;font-size:1.03em}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--b) 60%,transparent);background:rgba(255,255,255,.04);box-shadow:none}

/* ── общие мелочи ──────────────────────────────────────── */
.eyebrow{margin:0 0 18px;font-size:.82em;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--b) 75%,var(--ink));transition:color var(--t)}
.lead{color:var(--dim);font-size:clamp(16px,1.35vw,20px);max-width:44ch;margin:0}
.fineprint{color:#8d84a5;font-size:.86em;margin:0}
/* Текст поверх подвижного фона: мягкая подложка вместо плашки — читается на любой ленте. */
.lead,.fineprint,.facts li,.panel-text p,.howbuy,.buy-card ul,.steps p,.counter{
  text-shadow:0 1px 18px rgba(7,6,13,.85),0 0 3px rgba(7,6,13,.6)}
h1,h2,h3{text-shadow:0 2px 26px rgba(7,6,13,.6)}
.muted{color:var(--dim)}
.section{padding:clamp(72px,10vh,140px) var(--pad)}

/* появление при скролле; в hero тот же каскад работает сразу при загрузке — это и есть «интро» */
.rise{opacity:0;transform:translateY(28px);
  transition:opacity .95s cubic-bezier(.22,.7,.25,1),transform 1.05s cubic-bezier(.22,.7,.25,1);
  will-change:opacity,transform}
.rise.in{opacity:1;transform:none;will-change:auto}
.rise:nth-child(2){transition-delay:.08s}
.rise:nth-child(3){transition-delay:.16s}
.rise:nth-child(4){transition-delay:.24s}
.rise:nth-child(5){transition-delay:.32s}
.rise:nth-child(6){transition-delay:.40s}

/* ── hero ──────────────────────────────────────────────── */
.hero{
  min-height:calc(100svh - 64px);display:flex;flex-direction:column;
  align-items:center;text-align:center;justify-content:center;
  padding-top:clamp(30px,6vh,70px);padding-bottom:clamp(40px,8vh,90px);position:relative;
}
.hero h1{font-size:clamp(38px,7.6vw,102px);margin:0 0 22px;max-width:16ch}
.hero .lead{max-width:52ch;margin-bottom:34px}
.cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:16px}
.hero-shot{width:min(100%,var(--maxw));margin-top:clamp(34px,6vh,64px);position:relative}
.hero-shot img{
  border-radius:clamp(10px,1.4vw,18px);border:1px solid var(--line);
  box-shadow:0 40px 90px -40px color-mix(in srgb,var(--a) 55%,transparent),
             0 0 0 1px rgba(255,255,255,.03) inset;
}
.hero-shot::after{           /* лёгкий засвет под «экраном» — как от большой панели */
  content:"";position:absolute;left:12%;right:12%;bottom:-26px;height:60px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--a) 40%,transparent),transparent 70%);
  filter:blur(14px);opacity:.7;transition:background var(--t)
}
/* Две игры в hero: кадры рядом, на узком экране — друг под другом. */
.hero-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,20px)}
.hero-pair img{width:100%;height:auto}
.shot-cap{margin:16px 0 0;text-align:center;font-size:.88em;color:var(--dim);letter-spacing:.02em}
.scroll-hint{position:absolute;bottom:26px;left:50%;translate:-50% 0;width:26px;height:42px;
  border:1px solid var(--line);border-radius:999px;display:grid;place-items:center}
.scroll-hint span{width:3px;height:8px;border-radius:2px;background:var(--b);
  animation:drop 1.8s infinite;transition:background var(--t)}
@keyframes drop{0%{transform:translateY(-7px);opacity:0}35%{opacity:1}100%{transform:translateY(8px);opacity:0}}

/* ── о платформе ───────────────────────────────────────── */
.about{max-width:var(--maxw);margin:0 auto}
.about h2{font-size:clamp(26px,3.6vw,48px);max-width:22ch;margin-bottom:clamp(30px,5vh,56px)}
.about-grid{display:grid;gap:clamp(22px,3vw,44px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.about-grid h3{font-size:clamp(18px,1.6vw,23px);margin:0 0 10px;
  padding-top:16px;border-top:1px solid var(--line)}
.about-grid p{color:var(--dim);margin:0;font-size:.97em;
  text-shadow:0 1px 18px rgba(7,6,13,.85)}

/* ── продукт ───────────────────────────────────────────── */
.product-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.35fr);gap:clamp(24px,4vw,64px)}
.product-side{position:sticky;top:clamp(90px,16vh,180px);align-self:start;
  padding:clamp(50px,9vh,110px) 0}
.product-side h2{font-size:clamp(34px,4.6vw,62px);margin:0 0 10px}
.slogan{font-family:Unbounded,sans-serif;font-weight:600;font-size:clamp(17px,1.9vw,26px);
  line-height:1.2;margin:0 0 18px;
  background:linear-gradient(96deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;
  color:transparent;transition:background var(--t)}
.product-side .lead{margin-bottom:28px}
.facts{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:14px}
.facts li{padding-left:18px;position:relative;color:var(--dim);font-size:.97em}
.facts li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--a);transition:background var(--t)}
.facts b{color:var(--ink);font-weight:700}
.side-price{font-family:Unbounded,sans-serif;font-weight:600;font-size:clamp(17px,1.6vw,22px);margin:0}
.side-price span{display:block;font-family:Onest,sans-serif;font-weight:400;font-size:.68em;color:var(--dim);margin-top:6px}

.panel{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(18px,3vh,32px);padding:clamp(60px,10vh,120px) 0}
.panel-media img{
  border-radius:clamp(10px,1.2vw,16px);border:1px solid var(--line);
  box-shadow:0 34px 80px -38px color-mix(in srgb,var(--a) 60%,transparent);
}
.panel-text{max-width:52ch}
.counter{font-family:Unbounded,sans-serif;font-size:.8em;letter-spacing:.1em;color:var(--dim);margin:0 0 12px}
.panel-text h3{font-size:clamp(26px,3.2vw,42px);margin:0 0 12px}
.panel-text p{color:var(--dim);margin:0}

/* ── как это работает ──────────────────────────────────── */
.how{max-width:var(--maxw);margin:0 auto}
.how h2{font-size:clamp(28px,4vw,54px);max-width:24ch;margin-bottom:clamp(34px,6vh,64px)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2.4vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,2.6vw,34px);transition:border-color .35s,transform .35s;
  }
.steps li:hover{border-color:color-mix(in srgb,var(--b) 45%,transparent);transform:translateY(-3px)}
.num{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;margin-bottom:18px;
  font-family:Unbounded,sans-serif;font-weight:700;font-size:16px;color:#0b0710;
  background:linear-gradient(120deg,var(--a),var(--b));transition:background var(--t)}
.steps h3{font-size:clamp(19px,1.7vw,24px);margin:0 0 10px}
.steps p{color:var(--dim);margin:0;font-size:.97em}

/* ── видео ─────────────────────────────────────────────── */
.video{max-width:var(--maxw);margin:0 auto;text-align:center}
.video h2{font-size:clamp(28px,4vw,54px);margin-bottom:16px}
.video .lead{margin:0 auto clamp(30px,5vh,52px)}
.players{display:grid;gap:clamp(20px,2.6vw,34px);grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  max-width:var(--maxw);margin:0 auto;align-items:start}
.clip{margin:0}
.clip .shot-cap{margin-top:12px}
/* Кадр держим ровно 16:9 в обоих роликах — иначе подписи встают на разной высоте. */
.clip .player{aspect-ratio:16/9;max-width:none}
.clip .player img,.clip .player video{width:100%;height:100%;object-fit:cover}
.player{position:relative;max-width:980px;margin:0 auto;border-radius:clamp(12px,1.4vw,20px);overflow:hidden;
  border:1px solid var(--line);box-shadow:0 40px 90px -44px color-mix(in srgb,var(--a) 60%,transparent);cursor:pointer}
.player video{display:block;width:100%;height:auto}
.play{position:absolute;inset:0;width:100%;border:0;background:rgba(7,6,13,.28);
  display:grid;place-items:center;cursor:pointer;transition:background .3s}
.player:hover .play{background:rgba(7,6,13,.14)}
.play span{width:clamp(64px,7vw,92px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(120deg,var(--a),var(--b));display:grid;place-items:center;
  box-shadow:0 16px 50px -16px color-mix(in srgb,var(--a) 80%,transparent);transition:transform .3s,background var(--t)}
.play span::after{content:"";width:0;height:0;margin-left:6px;
  border-left:clamp(18px,2vw,26px) solid #0b0710;border-top:clamp(11px,1.2vw,16px) solid transparent;border-bottom:clamp(11px,1.2vw,16px) solid transparent}
.player:hover .play span{transform:scale(1.07)}

/* ── цена ──────────────────────────────────────────────── */
/* ── Mac ───────────────────────────────────────────────── */
.mac{max-width:var(--maxw);margin:0 auto}
.mac .cta{justify-content:flex-start;margin-top:clamp(22px,3vh,34px)}
.mac .lead{margin-top:14px}
/* Шаги с обходом Gatekeeper — не мелким шрифтом: человек читает их в момент, когда
   система уже предложила отправить скачанное в Корзину. */
.mac .howbuy{margin-top:clamp(26px,4vh,44px);font-size:1em}
.mac .howbuy strong{color:var(--text)}
.mac .muted{margin:clamp(18px,2.4vh,26px) 0 0;max-width:70ch;font-size:.94em}
.maclink{color:var(--b);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--b) 45%,transparent)}
.maclink:hover{color:var(--a);border-bottom-color:color-mix(in srgb,var(--a) 45%,transparent)}

/* ── Windows: предупреждения при первом запуске ─────────── */
/* Как и у Mac — обычным кеглем: это читают в момент, когда установщик уже заблокирован. */
.winhelp{max-width:var(--maxw);margin:0 auto}
.winhelp .lead{margin-top:14px;max-width:62ch}
.winhelp h3{font-size:clamp(19px,1.7vw,24px);margin:clamp(30px,4.4vh,48px) 0 0}
.winhelp .winnote{color:var(--dim);max-width:70ch;margin:14px 0 0;font-size:.97em}
.winhelp .howbuy{margin-top:clamp(16px,2.2vh,24px);font-size:1em}
.winhelp .howbuy strong{color:var(--text)}
.winhelp .muted{margin:clamp(18px,2.4vh,26px) 0 0;max-width:70ch;font-size:.94em}

.buy{max-width:var(--maxw);margin:0 auto}
.buy-grid{display:grid;gap:clamp(18px,2.4vw,28px);grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.buy-card{background:var(--card);border:1px solid var(--line);border-radius:24px;
  padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:18px;
  }
.buy-card.accent{border-color:color-mix(in srgb,var(--a) 45%,transparent);
  background:linear-gradient(165deg,color-mix(in srgb,var(--a) 14%,var(--card)),var(--card) 60%)}
.buy-card .eyebrow{margin:0}
/* Шрифт цены ужат: на крупном «Бесплатно» строка вылезала за правый край карточки. */
.price{font-size:clamp(24px,2.3vw,34px);overflow-wrap:break-word}
/* Вторая строка цены — всегда блоком: у всех карточек заголовок и цена занимают
   одинаковое число строк, поэтому списки под ними начинаются на одной высоте. */
.price span{display:block;font-size:.42em;font-weight:600;color:var(--dim);
  margin-top:8px;white-space:nowrap}
@media (min-width:901px){ .buy-card .eyebrow{white-space:nowrap} }
.buy-card ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;color:var(--dim);font-size:.97em}
.buy-card li{padding-left:22px;position:relative}
.buy-card li::before{content:"";position:absolute;left:2px;top:.45em;width:9px;height:5px;
  border-left:2px solid var(--b);border-bottom:2px solid var(--b);rotate:-45deg;transition:border-color var(--t)}
.buy-card .btn{margin-top:auto;align-self:flex-start}
.howbuy{margin:clamp(34px,6vh,60px) 0 0;padding:0 0 0 26px;color:var(--dim);
  display:grid;gap:12px;max-width:70ch;font-size:.97em}
.howbuy li::marker{color:var(--a);font-weight:700}

/* ── подвал ────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding:clamp(40px,6vh,64px) var(--pad) 30px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.35))}
.foot-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;
  justify-content:space-between;align-items:flex-start}
.foot-brand{font-size:1.15em;margin:0 0 6px}
.foot-inner p{margin:0}
.foot-links{display:grid;gap:10px;font-size:.95em}
.foot-links a{color:var(--dim);transition:color .25s}
.foot-links a:hover{color:var(--ink)}
.copy{max-width:var(--maxw);margin:clamp(28px,4vh,44px) auto 0;font-size:.85em}

/* ── адаптив ───────────────────────────────────────────── */
@media (max-width:900px){
  .product-inner{grid-template-columns:1fr;gap:0}
  .product-side{position:static;padding:clamp(60px,9vh,90px) 0 clamp(24px,4vh,36px)}
  .panel{min-height:auto;padding:clamp(30px,5vh,48px) 0}
  .nav-links{display:none}
  .hero{min-height:auto;padding-top:clamp(40px,10vh,70px)}
  .hero-pair{grid-template-columns:1fr}
  .scroll-hint{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  .scroll-hint span{animation:none}
  *{transition-duration:.01ms !important}
}