/* Общая основа лендингов Черной пятницы Dolphin{cloud} по скиллам landing-page-design, impeccable, cro.
   Бренд с cloud.dolphin.tech (variables.css, tarifs.css): синий #2196F3 → #1565C0, текст #091733, лайм #E9FF64, шрифт Manrope, вес не выше 700, размеры по шкале Tailwind, отступы 2/4/8/12/16/24/32/40/48/64/80/96.
   Фоны плоские, кроме фирменного свечения первого экрана; градиент на тексте заголовка. */
:root{
  --c:#2196F3; --c-d:#1565C0; --c-l:#E3F2FD; --hot:#E9FF64; --ok:#0F8D57; --ok-l:#1AC47A; --ink:#091733; --red:#D62238;
  --acc-t:#64B5F6; --ok-t:#3DDC97;
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/24px var(--font);overflow-x:hidden}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:700}p{margin:0;text-wrap:pretty}
a{color:inherit;text-underline-offset:3px}
::selection{background:var(--c);color:#fff}
:focus-visible{outline:2px solid var(--c);outline-offset:4px;border-radius:8px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:16px}.skip:focus{left:16px;z-index:60;background:var(--c-d);color:#fff;padding:12px 16px;border-radius:8px}

/* Плавающая навигация */
.nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:20;margin:12px auto 0;width:max-content;max-width:calc(100% - 32px);display:flex;align-items:center;gap:24px;padding:8px 8px 8px 16px;border-radius:16px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 24px rgba(0,0,0,.12),inset 0 0 0 1px var(--line)}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:24px;width:auto;display:block}
.logo .lg-l{display:none}
.light{--acc-t:#1565C0;--ok-t:#0B7A4B}
.light .logo .lg-d{display:none}.light .logo .lg-l{display:block}
.nav .btn{font-size:14px;line-height:20px;min-height:44px;padding-inline:16px}
.logo{min-height:44px}

/* Заголовок первого экрана: градиент только на тексте */
.h-hero{max-width:680px;font-size:60px;line-height:1;letter-spacing:-.03em;background:linear-gradient(90deg,var(--h1),var(--h2));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:4px}
.sub{max-width:680px;font-size:18px;line-height:28px;color:var(--fg-2)}
.h2{font-size:48px;line-height:1;letter-spacing:-.03em}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/24px var(--font);padding:8px 12px;border-radius:12px;border:0;background:linear-gradient(180deg,#2196F3,#1565C0);color:#fff;text-decoration:none;cursor:pointer;transition:transform .5s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 24px -10px rgba(33,150,243,.6)}
.btn:active{transform:scale(.98)}
.btn{min-height:44px}
.btn-big{font-size:18px;line-height:28px;padding:12px 24px;border-radius:16px}
.btn svg{width:20px;height:20px;flex:none}
.muted{color:var(--fg-2)}
.small{font-size:14px;line-height:20px}
.xs{font-size:12px;line-height:16px}
.num{font-variant-numeric:tabular-nums}

/* Сегменты (тариф, срок) */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:16px;background:var(--seg)}
.seg button{font:600 14px/20px var(--font);padding:8px 4px;min-height:48px;border-radius:12px;border:0;background:transparent;color:var(--fg-2);cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);display:grid;gap:2px;justify-items:center;align-content:center}
.seg button small{font-weight:700;font-size:12px;line-height:16px;color:var(--acc-t)}
.seg button:hover{color:var(--fg)}
.seg button[aria-pressed="true"]{background:var(--seg-on);color:var(--fg);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.stepper{display:inline-flex;align-items:center;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.stepper button{width:44px;height:44px;border:0;background:transparent;color:inherit;font:600 20px/1 var(--font);cursor:pointer;border-radius:12px}
.stepper button:disabled{opacity:.35;cursor:default}
.stepper output{min-width:24px;text-align:center;font-weight:700}

/* Таймер */
.timer{display:flex;gap:8px}
.timer div{display:grid;justify-items:center;min-width:64px;padding:8px;border-radius:12px;background:var(--seg)}
.timer b{font-weight:700;font-size:30px;line-height:36px;font-variant-numeric:tabular-nums}
.timer span{font-size:12px;line-height:16px;color:var(--fg-2)}

/* Общие секции: шаги, слоган, вопросы, финальный призыв */
.sec{padding-block:96px 0;display:grid;gap:40px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0;margin:0;counter-reset:s}
.steps li{list-style:none;display:grid;gap:8px;align-content:start;padding-top:24px;border-top:1px solid var(--line)}
.steps li::before{counter-increment:s;content:counter(s);font-weight:700;font-size:48px;line-height:1;color:var(--c);font-variant-numeric:tabular-nums}
.steps h3{font-size:20px;line-height:28px}
.tagline{padding-block:96px 0}
.tagline p{font-size:48px;line-height:1;letter-spacing:-.03em;font-weight:700;max-width:880px}
.tagline .w{opacity:.3;transition:opacity .6s var(--ease)}.tagline .w.on{opacity:1}
.faq{display:grid}
.faq details{border-top:1px solid var(--line);padding-block:16px}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{padding-block:8px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-weight:600;font-size:18px;line-height:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:24px;transition:transform .5s var(--ease);flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-top:8px;color:var(--fg-2);max-width:680px}
.final{padding-block:96px;display:grid;gap:24px;justify-items:start}
.final .h2{max-width:680px}
footer.foot{padding-block:32px 48px;border-top:1px solid var(--line);color:var(--fg-2);font-size:14px;line-height:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer.foot nav{display:flex;gap:4px 16px;flex-wrap:wrap}
footer.foot nav a{display:inline-block;padding-block:12px}

.rv{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv:not(.in){opacity:0;transform:translateY(32px)}
[data-phase="over"] .not-over,[data-phase="soon"] .only-live,[data-phase="soon"] .only-over,[data-phase="live"] .only-soon,[data-phase="live"] .only-over,[data-phase="over"] .only-soon,[data-phase="over"] .only-live{display:none!important}

@media (max-width:760px){
  .h-hero{font-size:36px;line-height:40px}
  .sub{font-size:16px;line-height:24px}
  .h2{font-size:30px;line-height:36px}
  .steps{grid-template-columns:1fr}
  .tagline p{font-size:30px;line-height:36px}
  .sec,.tagline{padding-block:64px 0}
  .final{padding-block:64px}
  .timer div{min-width:0;flex:1}
  .timer b{font-size:24px;line-height:32px}
  .seg button{font-size:12px;line-height:16px}
  .nav{gap:12px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.js .rv:not(.in){transform:none}}

/* Пользователи в команде: подпись, степпер, ползунок 1–41 и расчет цены в месяц */
.users{display:grid;gap:8px;min-width:0}
.ub-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ub-l{font-size:14px;line-height:20px;font-weight:600;color:var(--fg-2)}
.ub-r{width:100%;-webkit-appearance:none;appearance:none;height:44px;border-radius:999px;background:linear-gradient(90deg,var(--c) var(--k,0%),var(--seg) var(--k,0%)) center/100% 8px no-repeat;cursor:pointer;margin:0;touch-action:manipulation}
.ub-r::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px var(--c),0 2px 8px rgba(0,0,0,.25);transition:transform .3s var(--ease)}
.ub-r:active::-webkit-slider-thumb{transform:scale(1.15)}
.ub-r::-moz-range-thumb{width:24px;height:24px;box-sizing:border-box;border-radius:50%;background:#fff;border:4px solid var(--c)}
.ub-n{display:flex;justify-content:space-between;gap:8px}
.ub-n [data-seatnote]{color:var(--fg);font-weight:600;text-align:center}

/* Все 4 срока сразу: цена, старая цена, экономия, цена в месяц. Клик выбирает срок */
.periods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.periods.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pd{font:inherit;color:inherit;text-align:left;cursor:pointer;border:0;border-radius:16px;padding:12px;background:var(--seg);display:grid;gap:4px;align-content:start;box-shadow:inset 0 0 0 1px transparent;transition:transform .5s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease);min-width:0}
.pd:hover{transform:translateY(-2px)}
.pd[aria-pressed="true"]{background:var(--seg-on);box-shadow:inset 0 0 0 2px var(--c)}
.pd-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pd-h b{font-size:14px;line-height:20px}
.pd-h i{font-style:normal;font-weight:700;font-size:12px;line-height:16px;padding:2px 8px;border-radius:999px;background:var(--hot);color:var(--ink)}
.pd-p{font-size:24px;line-height:32px;font-weight:700;letter-spacing:-.02em}
.pd-f{color:var(--fg-2)}
.pd-s{color:var(--fg-2)}
.pd-s b{color:var(--ok-t);font-weight:700}
@media (max-width:760px){.btn{min-height:44px}
.btn-big{font-size:16px;line-height:24px;padding:12px 16px}.periods{grid-template-columns:repeat(2,minmax(0,1fr))}.pd-p{font-size:20px;line-height:28px}}

/* Продающий блок: что внутри и отзывы с сайта */
.feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px}
.feats li{display:grid;gap:4px;align-content:start;padding-top:16px;border-top:1px solid var(--line)}
.feats b{font-size:18px;line-height:28px}
.feats span{color:var(--fg-2);font-size:14px;line-height:20px}
.revs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.revs figure{margin:0;padding:24px;border-radius:16px;background:var(--seg);display:grid;gap:12px;align-content:space-between}
.revs blockquote{margin:0;font-size:18px;line-height:28px;font-weight:600}
.revs figcaption{font-size:14px;line-height:20px;color:var(--fg-2)}
@media (max-width:900px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}.revs{grid-template-columns:1fr}}

/* Продающий блок: иконки фич в стиле сайта, отзывы с фото, интеграции, 330 → 20 минут */
.feats li{grid-template-columns:48px 1fr;column-gap:12px;align-items:start}
.feats li img{width:48px;height:48px;grid-row:span 2}
.feats li b,.feats li span{grid-column:2}
.revs figure{grid-template-columns:48px 1fr;column-gap:12px;align-items:center}
.revs blockquote{grid-column:1/-1}
.revs figure img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#fff}
.revs figcaption{grid-column:2}
.integr{display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--fg-2);font-size:14px;line-height:20px}
.integr{gap:24px}.integr img{height:28px;width:auto;filter:brightness(0) invert(1);opacity:.75}
.light .integr img{filter:brightness(0);opacity:.6}
.speed{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end}
.speed figure{margin:0;display:grid;gap:8px;justify-items:center;text-align:center}
.speed img{width:100%;max-width:520px;height:auto}
.speed figcaption{color:var(--fg-2);font-size:14px;line-height:20px}
@media (max-width:760px){.speed{grid-template-columns:1fr}.feats{grid-template-columns:1fr}}

/* Фирменное свечение с главной cloud.dolphin.tech: синие дуги на черном */
.glow-arcs{position:relative;isolation:isolate}
.glow-arcs::before{content:"";position:absolute;inset:auto 0 0;height:min(60vw,520px);background:url(brand/image-68-1.png) center bottom/cover no-repeat;z-index:-1;opacity:.9;pointer-events:none}
.glow-top{position:relative;isolation:isolate}
.glow-top::before{content:"";position:absolute;left:50%;top:-80px;width:1460px;max-width:180%;height:615px;transform:translateX(-50%);background:url(brand/gradient-animation.png) center/cover no-repeat;z-index:-1;opacity:.55;pointer-events:none;animation:breathe 9s var(--ease) infinite alternate}
@keyframes breathe{to{opacity:.85;transform:translateX(-50%) scale(1.06)}}
.laptop{width:100%;max-width:1137px;height:auto;display:block;margin-inline:auto}
main{overflow-x:clip}