/* ============================================================
   lp/vibe — флагман Vibe Marketing. Верстка v2 (напрямок E+).
   Самодостатній файл: дизайн-система сайту тут НЕ використовується
   (дозвіл оператора, sprint-10). Кольори — бренд-токени yellows.one.
   Шрифти: Onest + IBM Plex Mono.
   ============================================================ */
:root{
  --bg:#ffffff;
  --surface:#f7f9fc;
  --surface-blue:#eef6fd;
  --ink:#141824;

  --primary:#0073b9;
  --primary-dark:#005a94;
  --accent:#fcd214;
  --accent-dark:#e5bd00;
  --accent-text:#111111;

  --text:#1a1f2e;
  --text-2:#4a5568;
  --muted:#5b6675;
  --border:#e2e8f0;

  --sh-sm:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --sh-md:0 8px 18px rgba(16,24,40,.07), 0 2px 6px rgba(16,24,40,.04);
  --sh-lg:0 26px 48px -22px rgba(16,24,40,.28), 0 4px 10px rgba(16,24,40,.05);
  --sh-xl:0 44px 80px -40px rgba(16,24,40,.40), 0 6px 14px rgba(16,24,40,.05);

  --f:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;

  --maxw:1200px;
  --prose:62ch;
  --gut:40px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--f);
  font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--primary); outline-offset:2px; border-radius:4px}
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-.035em; line-height:1.05; text-wrap:balance}
.tnum{font-variant-numeric:tabular-nums}
.nb{white-space:nowrap}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ── дрібні елементи ───────────────────────────────── */
.kicker{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--fm);
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--primary);
}
.kicker::before{content:""; width:26px; height:2px; background:var(--accent); flex:0 0 auto}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px; text-decoration:none;
  background:var(--accent); color:var(--accent-text); font-weight:700; font-size:17px; line-height:1;
  padding:19px 34px; border-radius:8px; box-shadow:0 2px 0 rgba(16,24,40,.16);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover{background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 4px 0 rgba(16,24,40,.16)}
.btn--lg{font-size:18px; padding:23px 42px}
.btn svg{transition:transform .18s ease}
.btn:hover svg{transform:translateX(3px)}
.btn--sm{font-size:14px; padding:11px 18px; border-radius:6px; box-shadow:none}
.btn--sm:hover{box-shadow:none; transform:none}
.dot-live{
  display:inline-block; width:7px; height:7px; border-radius:50%; background:#22a06b;
  box-shadow:0 0 0 0 rgba(34,160,107,.45); animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(34,160,107,0)} 100%{box-shadow:0 0 0 0 rgba(34,160,107,0)}}

.bar{position:fixed; top:0; left:0; height:3px; width:0; background:var(--accent); z-index:70}
@supports (animation-timeline:scroll()){
  .bar{width:100%; transform-origin:0 50%; transform:scaleX(0); animation:read linear both; animation-timeline:scroll(root)}
  @keyframes read{to{transform:scaleX(1)}}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{animation:rise both ease-out; animation-timeline:view(); animation-range:entry 5% entry 55%}
    @keyframes rise{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}}
  }
}

/* ── ШАПКА ─────────────────────────────────────────── */
.hdr{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.hdr .in{display:flex; align-items:center; justify-content:space-between; padding:13px 0}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; font-size:18px; text-decoration:none}
.logo .dot{width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(252,210,20,.28)}
.hdr .right{display:flex; align-items:center; gap:14px}
.hdr .live{display:flex; align-items:center; gap:8px; font-family:var(--fm); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--text)}

/* ── ГЕРОЙ ─────────────────────────────────────────── */
.hero{position:relative; padding:50px 0 72px; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:-180px -10% auto -10%; height:820px; pointer-events:none;
  background:
    radial-gradient(760px 380px at 16% 6%, rgba(0,115,185,.13), transparent 64%),
    radial-gradient(620px 340px at 86% 0%, rgba(252,210,20,.16), transparent 66%);
}
.hero-in{position:relative; display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.86fr); gap:56px; align-items:center}
.hero h1{font-size:clamp(34px,4.15vw,58px); margin-top:18px; line-height:1.02}
.mark{position:relative; white-space:nowrap; z-index:0}
.mark::after{
  content:""; position:absolute; left:-.07em; right:-.07em; top:.16em; bottom:.14em;
  background:rgba(252,210,20,.8); z-index:-1; border-radius:4px; transform:rotate(-.4deg);
}
.lead{margin-top:20px; font-size:20px; color:var(--text); font-weight:500; max-width:34ch}
.sub{margin-top:14px; font-size:17px; color:var(--text-2); max-width:46ch}
.cta{margin-top:26px; display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.cta .side{font-size:15px; color:var(--muted); max-width:24ch}
.why{margin-top:20px; padding:13px 0 13px 18px; border-left:3px solid var(--primary); font-size:15px; color:var(--text-2); max-width:52ch}
.why b{color:var(--text); font-weight:600}

/* мокап відділу */
.collage{position:relative; padding:52px 0 96px}
.card{background:#fff; border:1px solid #d5deea; border-radius:16px; box-shadow:var(--sh-xl)}
.dept{overflow:hidden}
.dept .top{display:flex; align-items:center; gap:10px; padding:14px 18px; background:var(--surface); border-bottom:1px solid var(--border)}
.dept .top .tl{display:flex; gap:6px}
.dept .top .tl i{width:9px; height:9px; border-radius:50%; background:#d7dfea; display:block}
.dept .top .t{font-family:var(--fm); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.dept .top .cl{margin-left:auto; font-family:var(--fm); font-size:11px; color:#9aa5b4}
.r{display:flex; align-items:center; gap:13px; padding:14px 18px; border-bottom:1px solid var(--border)}
.r:last-of-type{border-bottom:0}
.av{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-weight:700; font-size:13px; color:var(--primary); background:var(--surface-blue)}
.r .nm{font-size:16px; font-weight:600; line-height:1.25}
.r .tk{font-size:13px; color:var(--muted); line-height:1.3}
.prog{display:block; height:3px; width:132px; margin-top:8px; border-radius:2px; background:var(--border); overflow:hidden}
.prog i{display:block; height:100%; border-radius:2px; background:var(--primary); width:46%; animation:fill 4.2s ease-in-out infinite alternate}
.prog.y i{background:var(--accent-dark); animation-delay:1.1s}
@keyframes fill{from{width:26%} to{width:82%}}
.st{margin-left:auto; font-family:var(--fm); font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:6px 10px; border-radius:999px; background:var(--surface); color:var(--muted); border:1px solid var(--border)}
.st.ok{background:var(--surface-blue); color:var(--primary); border-color:rgba(0,115,185,.2)}
.st.go{background:#fff8d6; color:#8a6d00; border-color:rgba(252,210,20,.5)}
.dept .bot{display:flex; align-items:center; gap:10px; padding:14px 18px; border-top:1px solid var(--border); background:#fff}
.dept .bot .tx{font-size:15px; color:var(--text-2)}
.dept .bot .tx b{color:var(--text); font-weight:700}
.chip{position:absolute; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--sh-lg); padding:13px 16px}
.chip.pay{top:0; right:-8px; display:flex; align-items:center; gap:12px}
.chip.pay .ic{width:32px; height:32px; border-radius:9px; background:var(--surface-blue); color:var(--primary); display:grid; place-items:center}
.chip.pay .l{display:block; font-family:var(--fm); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.chip.pay .v{display:block; font-size:15px; font-weight:700; margin-top:3px}
.chip.stat{left:-26px; bottom:0; background:var(--ink); border-color:var(--ink); border-left:4px solid var(--accent); padding-left:16px}
.chip.stat .v{font-size:24px; font-weight:800; letter-spacing:-.03em; color:var(--accent)}
.chip.stat .l{font-family:var(--fm); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.65); margin-top:5px}

/* ── БІЖУЧА СТРІЧКА ────────────────────────────────── */
.ticker{background:var(--ink); color:#fff; overflow:hidden}
.ticker .track{display:flex; width:max-content; animation:marq 34s linear infinite}
.ticker .row{display:flex; align-items:center; gap:34px; padding:19px 34px 19px 0; white-space:nowrap;
  font-family:var(--fm); font-size:12px; letter-spacing:.16em; text-transform:uppercase}
.ticker .d{color:var(--accent); font-size:9px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ── СЕКЦІЇ ────────────────────────────────────────── */
section{position:relative; padding:96px 0}
section.tight{padding:72px 0}
.sec--surface{background:#f2f6fb; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.sec--blue{background:var(--surface-blue); border-top:1px solid #d8e9f8; border-bottom:1px solid #d8e9f8}
.sec--dark{background:var(--ink); color:rgba(255,255,255,.82)}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark .kicker{color:var(--accent)}
.sec--dark .flow p{color:rgba(255,255,255,.78)}
.sec--dark .flow p.big,.sec--dark .flow p.beat,.sec--dark .flow b{color:#fff}
.sec--dark .flow b.hl{color:var(--accent)}
.ghost{position:absolute; right:calc(50% - var(--maxw)/2 + var(--gut)); top:48px; font-size:190px; font-weight:800;
  letter-spacing:-.06em; color:var(--surface); line-height:.8; pointer-events:none; user-select:none}
.sec--surface .ghost{color:#e6ecf5}
.ghost--w{font-size:104px; top:64px; letter-spacing:-.04em}
.sec--blue .ghost{color:#e3f0fb}
.sec--dark .ghost{color:rgba(255,255,255,.045)}
.s-head{position:relative; max-width:none}
.s-head h2{font-size:clamp(28px,3vw,40px); margin-top:16px; max-width:580px}
.s-lead{margin-top:18px; font-size:18px; color:var(--text-2); max-width:56ch}
.sec--dark .s-lead{color:rgba(255,255,255,.7)}

/* текстовий потік */
.flow{margin-top:32px; max-width:var(--prose)}
.flow p{margin-bottom:18px; font-size:18px; color:var(--text-2)}
.flow p.big{font-size:19px; font-weight:600; color:var(--text); letter-spacing:-.015em; line-height:1.45}
.flow p.beat{font-size:22px; font-weight:700; color:var(--text); letter-spacing:-.02em; line-height:1.35}
.flow p:last-child{margin-bottom:0}
.flow b{color:var(--text); font-weight:700}
.flow--wide{max-width:62ch}
/* темні секції: сильні біти = стейтменти, а не жирний абзац */
.sec--dark .flow p.big{font-size:clamp(24px,2.3vw,30px); font-weight:700; letter-spacing:-.025em;
  line-height:1.2; max-width:26ch; margin:30px 0 22px}
/* довгі .big лишаються акцентним абзацом, не стейтментом (інакше кричить гучніше за H2) */
.sec--dark .flow p.big.big--long{font-size:21px; font-weight:600; letter-spacing:-.015em;
  line-height:1.45; max-width:var(--prose); margin:0 0 18px}
.sec--dark .dr{border:0; height:1px; background:rgba(255,255,255,.12); margin:36px 0}

/* врізки */
.pull{margin:26px 0; padding:22px 26px; background:var(--surface-blue); border-left:4px solid var(--primary); border-radius:12px; font-size:18px; color:var(--text)}
.pull.warm{background:#fffbe8; border-left-color:var(--accent-dark)}
.sec--dark .pull{background:rgba(255,255,255,.06); border-left-color:var(--accent); color:#fff}
.note{margin:22px 0; padding:16px 0 16px 18px; border-left:3px solid var(--border); font-size:16px; color:var(--muted)}
.chain{margin:32px 0; padding:0; display:grid; gap:10px; counter-reset:ch}
.chain li{position:relative; list-style:none; background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:15px 18px 15px 60px; box-shadow:var(--sh-sm); font-size:17px; color:var(--text-2)}
.chain li b{color:var(--text); font-weight:700}
.chain li::before{
  counter-increment:ch; content:counter(ch); position:absolute; left:17px; top:14px;
  width:28px; height:28px; border-radius:50%;
  background:var(--surface-blue); color:var(--primary); font-family:var(--fm); font-size:12px; font-weight:500;
  display:grid; place-items:center;
}
.bul{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:12px}
.bul li{display:flex; gap:12px; align-items:flex-start; font-size:17px; color:var(--text-2)}
.bul .dm{flex:0 0 auto; width:9px; height:9px; margin-top:9px; background:var(--accent); transform:rotate(45deg); border-radius:1px}

/* ── СМУГА-ЗАЯВА (розбиває полотно тексту) ─────────── */
.statement{
  position:relative; background:var(--ink); color:#fff; padding:76px 0; overflow:hidden;
}
.statement::before{
  content:""; position:absolute; inset:auto -5% -60% 40%; height:420px; pointer-events:none;
  background:radial-gradient(520px 260px at 50% 50%, rgba(252,210,20,.14), transparent 70%);
}
.statement .wrap{position:relative}
.statement p{
  font-size:clamp(27px,3.5vw,50px); font-weight:800; letter-spacing:-.035em; line-height:1.06;
  max-width:20ch; text-wrap:balance;
}
.statement p+p{margin-top:18px; font-size:clamp(18px,1.7vw,22px); font-weight:500; letter-spacing:-.02em;
  color:rgba(255,255,255,.72); max-width:34ch; line-height:1.4}
.statement .mk{color:var(--accent)}
.statement--light{background:var(--accent); color:var(--accent-text)}
.statement--light::before{display:none}
.statement--light p+p{color:rgba(17,17,17,.7)}

/* ── БЛОК ПРОДУКТУ ─────────────────────────────────── */
.step{position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.9fr); gap:60px; margin-top:44px; align-items:start}
.step--rev{grid-template-columns:minmax(0,.9fr) minmax(0,1.02fr)}
.step--rev>aside{order:-1}
@media (min-width:901px){ .step>aside{position:sticky; top:96px} }
.num{display:inline-flex; align-items:center; gap:11px; margin-bottom:20px;
  font-family:var(--fm); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.num i{width:38px; height:38px; border-radius:50%; font-style:normal; background:var(--primary); color:#fff;
  display:grid; place-items:center; font-family:var(--f); font-weight:800; font-size:16px}
.q{font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.35; margin-bottom:6px}
.a{color:var(--text-2); margin-bottom:24px; font-size:17px}
.means{background:var(--surface-blue); border-radius:12px; padding:24px 26px; border-left:4px solid var(--primary)}
.means .l{font-family:var(--fm); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--primary); margin-bottom:9px}
.means p{font-size:17px}

/* картка-якір */
.pricecard{background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--sh-lg); overflow:hidden}
.pricecard .hd{padding:26px 28px 22px; background:linear-gradient(180deg,var(--surface),#fff)}
/* акорди: та сама анатомія, різний хедер — розкидано по стеку, без кореляції з ціною */
.pricecard--ink .hd{background:var(--ink)}
.pricecard--ink .hd .l{color:rgba(255,255,255,.55)}
.pricecard--ink .hd .v{color:#fff}
.pricecard--ink .hd .v span{color:var(--accent)}
.pricecard--ink .hd .c{color:rgba(255,255,255,.55)}
.pricecard--tint .hd{background:linear-gradient(180deg,var(--surface-blue),#fff)}
.pricecard .l{font-family:var(--fm); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.pricecard .v{font-size:42px; font-weight:800; letter-spacing:-.045em; line-height:1; margin-top:12px;
  display:inline-block; padding-bottom:6px; border-bottom:3px solid var(--accent)}
.pricecard .v span{font-size:20px; font-weight:700; color:var(--muted)}
.pricecard .c{font-size:15px; color:var(--muted); margin-top:9px}
.pricecard .bd{padding:22px 28px; border-top:1px solid var(--border); font-size:16px; color:var(--text-2)}
.pricecard .ft{padding:22px 28px; border-top:1px solid var(--border); background:var(--surface-blue); display:flex; gap:13px; align-items:flex-start}
.pricecard .ft .ic{flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--primary); color:#fff; display:grid; place-items:center}
.pricecard .ft p{font-size:17px; font-weight:600; line-height:1.42}
.vs{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-top:1px solid var(--border)}
.vs .c{padding:18px 24px}
.vs .c+.c{border-left:1px solid var(--border); background:var(--surface-blue)}
.vs .l{font-family:var(--fm); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.vs .c+.c .l{color:var(--primary)}
.vs .v{font-size:17px; font-weight:700; letter-spacing:-.02em; margin-top:8px; line-height:1.25;
  border-bottom:0; padding-bottom:0; display:block}
.vs .c+.c .v{border-bottom:2px solid var(--accent); padding-bottom:4px; display:inline-block}
/* мини-панель «что агент кладет тебе на стол» */
.deliver{margin-top:16px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--sh-sm); overflow:hidden}
.deliver .dh{display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--border)}
.deliver .dh .t{font-family:var(--fm); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.deliver .dh .who{margin-left:auto; font-family:var(--fm); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--primary); background:var(--surface-blue); border:1px solid rgba(0,115,185,.18); padding:4px 8px; border-radius:999px}
.deliver ul{margin:0; padding:6px 0; list-style:none}
.deliver li{display:flex; align-items:center; gap:11px; padding:11px 16px; font-size:15px; color:var(--text)}
.deliver li+li{border-top:1px solid var(--border)}
.deliver li .ic{flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--primary); color:#fff; display:grid; place-items:center}
.deliver li .st2{margin-left:auto; font-family:var(--fm); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

.underproof{margin-top:20px; display:flex; gap:12px; font-size:15px; color:var(--text-2)}
.underproof .b{flex:0 0 auto; width:4px; background:var(--accent); border-radius:2px}
.underproof b{color:var(--text)}

/* ── МОДУЛІ КУРСУ ──────────────────────────────────── */
.modules{display:grid; gap:16px; margin-top:32px}
.module{background:#fff; border:1px solid var(--border); border-radius:16px; padding:28px 30px; box-shadow:var(--sh-sm)}
.module .tag{display:inline-flex; align-items:center; gap:9px; font-family:var(--fm); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--primary)}
.module .tag i{width:22px; height:2px; background:var(--accent); font-style:normal}
.module h3{font-size:21px; margin:12px 0 14px}
.module p{margin-bottom:14px; color:var(--text-2); font-size:17px; max-width:var(--prose)}
.module p:last-child{margin-bottom:0}

/* ── РОСТЕР ────────────────────────────────────────── */
.roster{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:32px}
.role{background:#fff; border:1px solid var(--border); border-radius:16px; padding:22px 24px; box-shadow:var(--sh-sm)}
.role .nm{display:flex; align-items:center; gap:11px; font-size:18px; font-weight:700; letter-spacing:-.02em}
.role .nm i{width:30px; height:30px; border-radius:9px; background:var(--surface-blue); color:var(--primary);
  display:grid; place-items:center; font-style:normal; font-family:var(--fm); font-weight:500; font-size:11px}
.role p{margin-top:10px; font-size:16px; color:var(--text-2)}

/* ── МАТЕМАТИКА ────────────────────────────────────── */
.math{background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--sh-lg); overflow:hidden; margin-top:32px}
.math .row{display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:17px 28px; border-bottom:1px solid var(--border)}
.math .row .k{font-size:17px; color:var(--text-2)}
.math .row .v{font-size:20px; font-weight:700; letter-spacing:-.02em}
.math .total{background:var(--ink); border-bottom:0; padding:24px 28px}
.math .total .k{color:rgba(255,255,255,.7); font-size:11px; font-family:var(--fm); letter-spacing:.16em; text-transform:uppercase}
.math .total .v{font-size:30px; color:var(--accent)}
.math .foot{padding:20px 28px; background:var(--surface); font-size:15px; color:var(--muted)}

/* ── ДЕНЬ ──────────────────────────────────────────── */
.day{display:grid; margin-top:32px; border-left:2px solid var(--border)}
.day .t{position:relative; padding:0 0 28px 30px}
.day .t::before{content:""; position:absolute; left:-7px; top:6px; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--primary)}
.day .t:last-child{padding-bottom:0}
.day .t .h{font-family:var(--fm); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--primary); margin-bottom:8px}
.day .t p{margin-bottom:12px; color:var(--text-2); font-size:17px; max-width:var(--prose)}
.day .t p:last-child{margin-bottom:0}

/* ── КЕЙСИ ─────────────────────────────────────────── */
.cases{display:grid; gap:20px; margin-top:32px}
.case{background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--sh-sm); overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
.case .txt{padding:28px 30px; display:grid; align-content:center}
.case .nm{font-size:20px; font-weight:800; letter-spacing:-.025em}
.case .figv{font-size:clamp(30px,3vw,40px); font-weight:800; letter-spacing:-.04em; line-height:1.05; margin-top:10px;
  display:inline-block; justify-self:start; padding-bottom:5px; border-bottom:3px solid var(--accent)}
.case .after{margin-top:14px; font-size:16px; color:var(--text-2)}
.case blockquote{margin:14px 0 0; font-size:17px; font-weight:600; color:var(--text)}
.case .shotwrap{border-left:1px solid var(--border); background:var(--surface); padding:18px; display:grid;
  grid-template-rows:minmax(0,1fr) auto; align-items:center}
/* у Полины в колонке пруфа стоять два елементи (відео + скрін), їм потрібен зазор.
   Модифікатор стоїть ПІСЛЯ базового .shotwrap, інакше каскад його гасить (L40) */
.case .shotwrap--stack{gap:16px}
.case .frame{aspect-ratio:4/3; border-radius:10px; border:1px solid var(--border); background:linear-gradient(180deg,#fbfcfe,var(--surface));
  display:grid; place-items:center; text-align:center; padding:16px; font-family:var(--fm); font-size:10.5px;
  letter-spacing:.13em; text-transform:uppercase; color:#9aa5b4}
.case .cap{margin-top:10px; font-family:var(--fm); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--primary)}
/* головний кейс важчий за інші (ПІСЛЯ базових правил .case — інакше каскад їх гасить) */
.case--lead{border-color:#cfe0f0; box-shadow:var(--sh-lg); grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
.case--lead .txt{padding:38px 40px}
.case--lead .nm{font-size:24px}
.case--lead .figv{font-size:clamp(36px,3.6vw,48px); margin-top:12px}
.case--lead blockquote{font-size:19px; margin-top:18px}
.case--lead .after{font-size:17px}
.case--lead .shotwrap{background:var(--surface-blue)}
.case--lead .badge{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--fm); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--primary); background:#fff; border:1px solid #cfe0f0;
  padding:6px 10px; border-radius:999px; margin-bottom:14px;
}

.figs{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px}
.figs .f{background:#fff; border:1px solid var(--border); border-radius:16px; padding:26px; box-shadow:var(--sh-sm)}
.figs .v{font-size:clamp(26px,2.7vw,36px); font-weight:800; letter-spacing:-.04em; line-height:1;
  display:inline-block; padding-bottom:5px; border-bottom:3px solid var(--accent)}
.figs .k{font-family:var(--fm); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:14px}

.quote{background:var(--ink); color:#fff; border-radius:16px; padding:34px 36px; box-shadow:var(--sh-lg)}
.quote .qm{font-size:84px; line-height:.45; color:var(--accent); font-weight:800; opacity:.9}
.quote p{font-size:22px; font-weight:600; letter-spacing:-.02em; line-height:1.35; margin-top:16px}
.quote cite{display:block; margin-top:20px; font-family:var(--fm); font-size:11px; font-style:normal; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6)}
.quote .after{margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); font-size:16px; font-weight:400; color:rgba(255,255,255,.78); letter-spacing:0}

.shot{background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--sh-lg)}
.shot .fr{aspect-ratio:4/3; border-radius:10px; border:1px solid var(--border); background:linear-gradient(180deg,#fbfcfe,var(--surface));
  display:grid; place-items:center; text-align:center; padding:20px; font-family:var(--fm); font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; color:#9aa5b4}
.shot .cp{display:flex; gap:12px; padding:14px 6px 4px; align-items:flex-start}
.shot .cp .n{font-family:var(--fm); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); white-space:nowrap; padding-top:3px}
.shot .cp .t{font-size:15px; color:var(--text-2); line-height:1.5}

/* реальные скрины-пруфы: единая рама для всех доказательств */
.shot a.zoom,.case a.zoom{display:block; text-decoration:none; cursor:zoom-in; position:relative}
a.zoom .proofwin::after{content:"⌕"; position:absolute; right:10px; bottom:10px; width:30px; height:30px;
  display:grid; place-items:center; background:#fff; color:var(--primary); border:1px solid var(--border);
  border-radius:8px; font-size:17px; line-height:1; box-shadow:var(--sh-sm); pointer-events:none}
a.zoom .proofwin.zt::after{top:10px; bottom:auto}
a.zoom:hover .proofwin::after{border-color:var(--primary)}
a.zoom:hover .proofwin img{opacity:.94}
/* вікно пруфа: фіксована пропорція, кроп зверху, бар-хром як у панелі відділу */
.proofwin{position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:12px; border:1px solid var(--border); background:#fff}
.proofwin img{width:100%; height:100%; object-fit:cover; object-position:top; border:0; border-radius:0; max-height:none; margin:0}
.proofwin--tall{aspect-ratio:3/4}
.proofbar{display:flex; align-items:center; gap:6px; padding:9px 12px; background:var(--surface);
  border:1px solid var(--border); border-bottom:0; border-radius:12px 12px 0 0}
.proofbar i{width:8px; height:8px; border-radius:50%; background:#d7dfea; display:block}
.proofbar+* .proofwin, .proofbar+.proofwin, a.zoom .proofbar~.proofwin{border-radius:0 0 12px 12px}
.case .shotwrap .proofimg{max-height:420px; object-fit:contain; object-position:top}
.case .shotwrap .proofwin img{object-fit:cover; max-height:none}

/* ютуб: постер + клик, iframe грузится только по клику */
.yt{position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:var(--ink); aspect-ratio:16/9}
.sec--dark .yt{border-color:rgba(255,255,255,.14)}
.yt img,.yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover}
.yt button{
  position:absolute; inset:0; display:grid; place-items:center; background:rgba(10,12,18,.28);
  border:0; cursor:pointer; width:100%; height:100%; transition:background .2s ease;
}
.yt button:hover{background:rgba(10,12,18,.12)}
.yt .play{
  width:74px; height:74px; border-radius:50%; background:var(--accent); display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .2s ease;
}
.yt button:hover .play{transform:scale(1.06)}
.yt .cap{margin-top:12px; font-size:15px; color:var(--text-2); line-height:1.5}
.sec--dark .yt .cap{color:rgba(255,255,255,.7)}
/* відео дихає з обох боків: знизу відступу не було взагалі (сусідній <p> має тільки margin-bottom) */
.videoblock{margin:40px 0 36px}
.videoblock .lbl{font-family:var(--fm); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--primary); margin-bottom:10px}
.sec--dark .videoblock .lbl{color:var(--accent)}
.pg{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:52px; margin-top:36px; align-items:start}

/* ── КРОКИ ─────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px}
.stp{background:#fff; border:1px solid var(--border); border-radius:16px; padding:22px 24px; box-shadow:var(--sh-sm);
  display:flex; align-items:center; gap:16px}
.stp .n{flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:var(--primary); color:#fff; display:grid; place-items:center; font-weight:800; font-size:15px}
.stp p{margin:0; font-size:17px; font-weight:600; letter-spacing:-.01em}

/* ── FAQ ───────────────────────────────────────────── */
#zayavka .s-head h2{font-size:clamp(32px,3.4vw,46px)}
.faq{margin-top:32px; display:grid; gap:12px; max-width:84ch; counter-reset:fq}
.faq details{background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--sh-sm); overflow:hidden}
.faq details[open]{border-color:#cfe0f0; box-shadow:inset 3px 0 0 var(--accent), var(--sh-md)}
.faq summary{list-style:none; cursor:pointer; padding:21px 26px; font-size:18px; font-weight:700; letter-spacing:-.02em;
  display:flex; align-items:center; gap:18px}
.faq summary::before{counter-increment:fq; content:counter(fq,decimal-leading-zero);
  flex:0 0 auto; font-family:var(--fm); font-size:11px; font-weight:500; letter-spacing:.16em; color:var(--primary)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:0 0 auto; margin-left:auto; width:10px; height:10px; background:var(--accent);
  border-radius:1px; transform:rotate(45deg); transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq .ans{padding:0 26px 24px; font-size:17px; color:var(--text-2); max-width:66ch}

/* ── ДВА ШЛЯХИ ─────────────────────────────────────── */
.paths{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:20px; margin-top:32px; align-items:start}
.path{border-radius:16px; padding:30px 32px; border:1px solid var(--border); background:#fff; box-shadow:var(--sh-sm)}
.path .l{font-family:var(--fm); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.path h3{font-size:21px; margin:12px 0 16px}
.path p{margin-bottom:12px; color:var(--text-2); font-size:17px}
.path p:last-child{margin-bottom:0}
.path--no{background:var(--surface)}
.path--no h3{font-size:19px; color:var(--muted)}
.path--no p{color:var(--muted); font-size:16px}
.path--yes{
  position:relative; background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:var(--sh-xl);
  padding:38px 40px 34px; overflow:hidden;
}
.path--yes::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--accent)}
.path--yes .l{color:var(--accent)}
.path--yes h3{font-size:27px; letter-spacing:-.03em; margin-bottom:18px}
.path--yes p{color:rgba(255,255,255,.82); font-size:17px}
.path--yes .btn{margin-top:24px; width:100%}


/* ── CTA-СМУГА ─────────────────────────────────────── */
.ctaband{margin-top:40px; background:var(--surface-blue); border:1px solid #d8e9f8; border-radius:16px;
  padding:32px 36px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap}
.ctaband--mid{flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px 36px}
.ctaband--mid .bandlive{margin-bottom:0}
.bandlive{display:flex; align-items:center; gap:8px; margin-bottom:10px; font-family:var(--fm); font-size:11px;
  font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7)}
.bandlive--ink{color:var(--muted)}
.s-head .bandlive{margin-bottom:14px}
.enddash{width:56px; height:4px; background:var(--accent); margin-top:30px}
.ctaband .t{font-size:21px; font-weight:700; letter-spacing:-.025em; max-width:44ch}
.ctaband .s{margin-top:8px; font-size:15px; color:var(--muted); font-weight:400; letter-spacing:0}
.sec--dark .ctaband{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#fff}
.sec--dark .ctaband .s{color:rgba(255,255,255,.65)}
/* тёмная CTA-полоса — контраст на длинном скролле */
.ctaband.ctaband--dark{background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:var(--sh-lg)}
.ctaband.ctaband--dark .s{color:rgba(255,255,255,.66)}

/* ── ПІДВАЛ ────────────────────────────────────────── */
.ftr{background:var(--ink); color:rgba(255,255,255,.7); padding:52px 0 44px; border-top:3px solid var(--accent)}
.ftr .in{display:flex; align-items:flex-start; justify-content:space-between; gap:28px; flex-wrap:wrap; font-size:14px}
.ftr .logo{color:#fff}
.ftr .col{display:grid; gap:9px; font-size:13px; color:rgba(255,255,255,.55); line-height:1.5}
.ftr a{color:rgba(255,255,255,.75); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.25)}
.ftr a:hover{color:#fff; border-bottom-color:var(--accent)}
.ftr .mono{font-family:var(--fm); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.45)}

.mcta{display:none}

/* ── АДАПТИВ ───────────────────────────────────────── */
@media (max-width:1180px){ .ghost{right:var(--gut)} }
@media (max-width:1080px){
  :root{--gut:28px}
  .hero-in,.step,.pg{gap:44px}
}
@media (max-width:900px){
  body{font-size:17px}
  :root{--gut:20px}
  .hdr .live{display:none}
  .hdr .btn{display:none}
  .hero{padding:32px 0 36px}
  .hero-in{grid-template-columns:1fr; gap:40px}
  .hero h1{font-size:clamp(29px,7.8vw,42px); line-height:1.07}
  .lead{font-size:19px; max-width:none}
  .sub{max-width:none}
  .cta{flex-direction:column; align-items:stretch}
  .btn{width:100%}
  .cta .side{max-width:none}
  .collage{padding:0 0 10px; display:grid; gap:14px}
  .chip{position:static}
  .chip.pay{position:relative; width:max-content; margin:-14px 12px 0 auto; z-index:2; box-shadow:var(--sh-lg)}
  .chip.stat{position:relative; margin:-10px auto 0 24px; width:calc(100% - 24px); z-index:2}
  .ghost{font-size:110px; top:32px; opacity:.7}
  .ghost--w{font-size:64px; top:26px}
  section{padding:58px 0}
  section.tight{padding:46px 0}
  .statement{padding:44px 0}
  .s-head{max-width:none}
  .s-head h2{font-size:clamp(25px,7vw,32px)}
  .step,.step--rev,.pg,.paths,.steps,.figs{grid-template-columns:1fr; gap:30px}
  .roster{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:start}
  .role{padding:18px 16px}
  .role p{font-size:14px}
  .step--rev>aside{order:0}
  .statement p{max-width:none}
  .case--lead{grid-template-columns:1fr}
  .case--lead .txt{padding:26px 22px}
  .case--lead .figv{font-size:clamp(32px,9vw,40px)}
  .figs,.steps{gap:12px}
  .case{grid-template-columns:1fr}
  .case .txt{padding:24px 22px}
  .case .shotwrap{border-left:0; border-top:1px solid var(--border)}
  .case .figv{border-bottom:0; padding-bottom:0; text-decoration:underline; text-decoration-color:var(--accent);
    text-decoration-thickness:3px; text-underline-offset:7px; text-decoration-skip-ink:none}
  .pricecard .v{font-size:34px}
  .quote{padding:26px 24px}
  .quote p{font-size:19px}
  .ctaband{padding:24px 22px; flex-direction:column; align-items:stretch}
  .ctaband .t{font-size:19px; max-width:none}
  .math .row{padding:15px 20px}
  .math .total .v{font-size:26px}
  .module,.path{padding:24px 22px}
  .flow p{font-size:17px}
  .flow p.big{font-size:19px}
  .faq summary{padding:18px 20px; font-size:17px}
  .faq .ans{padding:0 20px 20px}
  .vs{grid-template-columns:1fr}
  .vs .c+.c{border-left:0; border-top:1px solid var(--border)}
  body{padding-bottom:80px}
  .mcta{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:45; gap:12px; align-items:center;
    padding:11px 20px calc(11px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px); border-top:1px solid var(--border);
    transition:transform .25s ease;
  }
  .mcta.hide{transform:translateY(110%)}
  .mcta .t{flex:1; font-size:13px; color:var(--muted); line-height:1.3}
  .mcta .btn{width:auto; flex:0 0 auto; padding:14px 20px; font-size:16px}
  .btn--sm{padding:15px 18px}          /* тап-таргет >=44px */
  .faq summary{min-height:52px}
  .logo{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
}