:root{
  --ink:#111217;
  --ink-2:#33343d;
  /* обидва тримають AA (≥4.5:1) для дрібного тексту (п.28 в IMPROVEMENTS.md):
     --muted 5.2:1 на білому, 4.8:1 на --soft; --muted-2 4.6:1 — тільки на білому.
     Не освітлювати: було #7d7e8a (4.0:1) і #a7a8b2 (2.5:1), обидва падали AA. */
  --muted:#6b6c78;
  --muted-2:#737480;
  --focus:#4f46e5;
  --line:#e9e9ef;
  --line-2:#dfdfe6;
  --bg:#ffffff;
  --soft:#f6f6f9;
  --soft-2:#f0f0f4;
  --accent:#4f46e5;
  --accent-ink:#4338ca;
  --accent-soft:#eeecfb;
  --radius:18px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --anchor-gap:28px; /* повітря між шапкою та заголовком секції після якірної прокрутки */
}
*{box-sizing:border-box}
/* --scroll-pad = реальна висота шапки, оновлює main.js (fallback: 78px) */
html{scroll-behavior:smooth;scroll-padding-top:var(--scroll-pad,78px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.08;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.serif{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
.up{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:600}

/* фокус: видно тільки при навігації з клавіатури (п.27).
   :focus-visible, а не :focus — щоб рамка не спалахувала на кожен клік мишею.
   Поля форми мають власний фокус нижче (.lf-field), тут вони виключені. */
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.btn:focus-visible,.icon-btn:focus-visible,.phone:focus-visible{outline-offset:4px}
.lf-field input:focus-visible,.lf-field textarea:focus-visible{outline:none}
/* main отримує програмний фокус зі skip-link — рамку там не показуємо */
main:focus{outline:none}

/* skip-link: сховано, поки не отримає фокус (п.29) */
.skip-link{position:fixed;top:8px;left:8px;z-index:100;transform:translateY(-160%);
  background:var(--accent);color:#fff;padding:12px 20px;border-radius:10px;
  font-size:14px;font-weight:600;transition:transform .2s var(--ease)}
.skip-link:focus{transform:none}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s}
header.scrolled{border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:21px;letter-spacing:-.04em}
.logo img{height:26px;width:auto;display:block}
.nav-mid{display:flex;gap:30px}
.nav-mid a{color:var(--ink-2);font-size:14.5px;font-weight:500;transition:color .2s;position:relative}
.nav-mid a:hover{color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:20px}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:#fff;display:grid;place-items:center;
  cursor:pointer;color:var(--ink);transition:.2s}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.nav-socials{display:flex;gap:8px}
.phone{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;transition:color .2s}
.phone:hover{color:var(--accent)}
.phone svg{color:var(--accent);flex-shrink:0}
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:13px 24px;font-weight:600;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:1px solid transparent;transition:.28s var(--ease)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink);transform:translateY(-2px);box-shadow:0 12px 26px rgba(79,70,229,.28)}
.btn-outline{background:#fff;border-color:var(--line-2);color:var(--ink)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}

/* hero */
.hero{position:relative;z-index:0;padding:72px 32px 80px}
.hero::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100vw;
  background:
    radial-gradient(70% 120% at 12% 6%,#ecebfb 0%,transparent 55%),
    radial-gradient(60% 120% at 93% 14%,#e2ecff 0%,transparent 52%),
    radial-gradient(85% 130% at 82% 108%,#f2e9ff 0%,transparent 55%),
    linear-gradient(180deg,#f7f7fc 0%,#ffffff 100%)}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
.hero-stats{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(255,255,255,.9);border-radius:20px;overflow:hidden;
  background:rgba(255,255,255,.55);backdrop-filter:blur(6px);box-shadow:0 20px 50px rgba(40,30,90,.08)}
.hero-stats .hstat{padding:26px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.hero-stats .hstat:nth-child(2n){border-right:0}
.hero-stats .hstat:nth-child(n+3){border-bottom:0}
.hero-stats .hstat b{display:block;font-size:clamp(28px,3.2vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1}
.hero-stats .hstat>span{display:block;color:var(--muted);font-size:14px;margin-top:6px}
.eyebrow{color:var(--muted);margin-bottom:26px}
.hero h1{font-size:clamp(40px,6vw,74px);letter-spacing:-.04em}
.hero h1 .serif{font-weight:500}
.hero .lead{max-width:none;color:var(--muted);font-size:17px;margin:26px 0 0}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
/* --ink-2, а не --muted: рядок про безкоштовну консультацію тримаємо контрастнішим за решту дрібного тексту */
.hero-note{display:flex;align-items:center;gap:8px;margin:18px 0 0;color:var(--ink-2);font-size:14px;font-weight:500}
.hero-note svg{width:16px;height:16px;flex-shrink:0;color:var(--accent)}

/* section shell */
/* --pad-t дублює padding-top секції: якірна прокрутка з’їдає його негативним scroll-margin,
   щоб заголовок ставав під шапку з відступом --anchor-gap, а не через увесь відступ секції */
section{padding:96px 0;--pad-t:96px;scroll-margin-top:calc(var(--anchor-gap,28px) - var(--pad-t))}
/* точкові відступи між секціями */
#services{padding-top:56px;padding-bottom:104px;--pad-t:56px}
#work{padding-top:56px;padding-bottom:132px;--pad-t:56px}
#process{padding-top:56px;--pad-t:56px}
#team{--pad-t:0px} /* padding-top:0 задано інлайном у розмітці */
.sec-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:48px;flex-wrap:wrap}
.sec-top .l{max-width:560px}
#services .sec-top .l{max-width:660px}
.sec-top h2{font-size:clamp(30px,4.6vw,50px)}
.sec-top h2 .serif{font-weight:500}
.sec-top p{color:var(--muted);margin:18px 0 0;font-size:16px}

/* services accordion */
.svc-list{border-top:1px solid var(--line)}
.svc-item{border-bottom:1px solid var(--line)}
/* .svc-head — <button>, щоб акордеон відкривався з клавіатури (п.25); скидаємо вигляд кнопки */
.svc-head{display:flex;align-items:center;gap:20px;width:100%;padding:26px 6px;
  background:none;border:0;font:inherit;color:inherit;text-align:left;
  cursor:pointer;transition:padding .3s var(--ease)}
.svc-head:hover{padding-left:14px}
.svc-head:focus-visible{outline-offset:-3px}
.svc-num{font-size:13px;color:var(--muted-2);font-weight:600;width:34px;flex-shrink:0}
.svc-title{font-size:clamp(20px,2.6vw,26px);font-weight:600;letter-spacing:-.02em;flex:1}
.svc-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;
  flex-shrink:0;transition:.3s var(--ease);color:var(--ink)}
.svc-item.open .svc-arrow,.svc-head:hover .svc-arrow,.svc-head:focus-visible .svc-arrow{background:var(--accent);border-color:var(--accent);color:#fff}
.svc-item.open .svc-arrow{transform:rotate(180deg)}
/* visibility, а не лише max-height: інакше скрінрідер читає вміст усіх восьми
   згорнутих панелей. Клас .closing навішує main.js на час анімації згортання —
   без нього вміст зникав би різко, а transition на visibility тут не працює. */
.svc-panel{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .45s var(--ease)}
.svc-item.open .svc-panel,.svc-panel.closing{visibility:visible}
.svc-panel-in{padding:0 60px 30px;color:var(--muted);font-size:15.5px;max-width:760px}
.svc-panel-in .tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.svc-panel-in .tags span{font-size:12.5px;color:var(--ink-2);padding:6px 13px;border:1px solid var(--line-2);border-radius:999px}
.svc-cta{margin-top:40px}

/* portfolio */
.portfolio{background:var(--soft)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:.4s var(--ease);
  display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(30,25,60,.12);border-color:transparent}
.card-img{position:relative;aspect-ratio:16/11;overflow:hidden;background:#eee;border-bottom:1px solid var(--line)}
.card-img .base{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 1s var(--ease)}
.card:hover .card-img:not(.ready) .base{transform:scale(1.05)}
/* Hover: замість зуму сайт «прокручується». .scroll — той самий скріншот цілком у пропорції
   16/25, тобто в кадр 16/11 влазить 11/25 = 44% висоти. Хід до низу = решта, -56%.
   Обидві цифри тримає tools/make-cards.php — міняти тільки разом. */
.card-img .scroll{position:absolute;top:0;left:0;width:100%;height:auto;opacity:0;
  transition:opacity .2s linear,transform .5s var(--ease)}
.card-img.ready .scroll{opacity:1}
.card:hover .card-img.ready .scroll,.card:focus-visible .card-img.ready .scroll{
  transform:translateY(-56%);transition:opacity .2s linear,transform 4.5s cubic-bezier(.4,0,.25,1)}
.card-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.card .domain{color:var(--accent);font-size:13px;font-weight:600;margin-bottom:8px}
.card h3{font-size:20px;margin-bottom:10px;letter-spacing:-.02em}
.card p{color:var(--muted);font-size:14px;margin:0 0 18px;flex:1}
.card .tline{display:flex;flex-wrap:wrap;gap:7px}
.card .tline span{font-size:11.5px;color:var(--ink-2);padding:5px 10px;background:var(--soft-2);border-radius:7px;font-weight:500}

/* stats + about */
.proc-list{display:flex;flex-direction:column;gap:20px;margin-bottom:44px}
.proc-step{display:flex;gap:22px;align-items:flex-start;width:80%;
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 30px;transition:.35s var(--ease)}
.proc-step:nth-child(even){align-self:flex-end}
.proc-step:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(30,25,60,.10);border-color:transparent}
.proc-step .pnum{flex-shrink:0;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;
  background:var(--accent-soft);color:var(--accent-ink);font-weight:800;font-size:18px}
.proc-step .p-body h3{font-size:20px;letter-spacing:-.02em;margin-bottom:8px}
.proc-step .p-body p{color:var(--muted);font-size:15px;margin:0}
.proc-step.highlight{border-color:#c9c4f7;box-shadow:0 14px 40px rgba(79,70,229,.10)}
.proc-step .p-accent{margin-top:14px;display:flex;align-items:flex-start;gap:10px;
  background:var(--accent-soft);border:1px solid #d9d5f7;border-radius:12px;padding:12px 15px;
  color:var(--accent-ink);font-size:14.5px;line-height:1.5}
.proc-step .p-accent svg{width:18px;height:18px;flex-shrink:0;margin-top:1px;color:var(--accent)}
.proc-step .p-accent b{font-weight:700}
.proc-step a.p-accent{align-items:center;text-decoration:none;transition:.25s var(--ease)}
.proc-step a.p-accent .arr{margin-left:auto;font-weight:700;font-size:16px}
.proc-step a.p-accent:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.proc-step a.p-accent:hover svg{color:#fff}
.about{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:80px}
.about .txt p{color:var(--ink-2);margin:0 0 18px;font-size:16.5px}
.about .txt p.lead{color:var(--ink-2);font-size:16.5px;font-weight:400}
.about-author{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.about-author img{width:88px;height:88px;border-radius:18px;object-fit:cover;object-position:center top;flex-shrink:0;
  box-shadow:0 10px 28px rgba(30,25,60,.16);border:3px solid #fff}
.about-author p.lead{margin:0}
.team{display:flex;flex-direction:column}
.trow{display:flex;align-items:center;gap:16px;padding:18px 4px;border-top:1px solid var(--line)}
.trow:first-child{border-top:0}
.trow .av{width:42px;height:42px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;
  font-weight:700;font-size:15px;flex-shrink:0}
.trow .av svg{width:20px;height:20px}
.trow b{display:block;font-size:15px}
.trow span{color:var(--muted);font-size:13.5px}

/* cta — світла панель: аргументи й прямі контакти ліворуч, картка форми праворуч */
.cta{padding-top:136px;padding-bottom:64px;--pad-t:136px}
.cta-split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;
  border:1px solid var(--line);border-radius:28px;padding:56px 48px;
  background:
    radial-gradient(58% 110% at 10% 0%,#ecebfb 0%,transparent 58%),
    radial-gradient(52% 110% at 97% 6%,#e2ecff 0%,transparent 55%),
    var(--soft)}
.cta-split .up{color:var(--accent);margin-bottom:14px}
.cta-split h2{font-size:clamp(30px,4.2vw,46px)}
.cta-split h2 .serif{font-weight:500}
.cta-lead{color:var(--muted);font-size:17px;margin:18px 0 0}

/* аргументи: заголовок пункту жирним, пояснення нижче тим самим span */
.cta-facts{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.cta-facts li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--muted)}
.cta-facts svg{width:20px;height:20px;flex-shrink:0;color:var(--accent);margin-top:1px}
.cta-facts b{display:block;font-weight:700;color:var(--ink)}

.cta-direct{margin-top:30px;padding-top:26px;border-top:1px solid var(--line-2)}
.cta-direct .up{color:var(--muted);margin-bottom:14px}
.contact-links{display:flex;gap:10px;flex-wrap:wrap}
.c-link{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;
  border:1px solid var(--line-2);background:#fff;color:var(--ink);font-weight:600;font-size:14px;
  transition:.25s var(--ease)}
.c-link svg{width:17px;height:17px;color:var(--accent);flex-shrink:0}
.c-link:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

/* картка форми */
.lead-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px;
  box-shadow:0 24px 60px rgba(40,30,90,.1)}
.lead-card h3{font-size:20px;margin:0 0 4px}
.lc-sub{color:var(--muted);font-size:14px;margin:0 0 22px}
.lead-card .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* плаваючі підписи: span іде ПІСЛЯ поля, тримається на :not(:placeholder-shown),
   тому в розмітці обов’язковий placeholder=" " */
.lf-field{display:block;position:relative;margin-bottom:14px}
.lf-field input,.lf-field textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:24px 15px 9px;
  transition:border-color .2s,box-shadow .2s;resize:vertical}
.lf-field textarea{padding-top:28px;min-height:104px}
.lf-field>span{position:absolute;left:16px;top:16px;font-size:15px;color:var(--muted);
  pointer-events:none;transition:.16s var(--ease)}
.lf-field input:focus,.lf-field textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.lf-field input:focus+span,.lf-field input:not(:placeholder-shown)+span,
.lf-field textarea:focus+span,.lf-field textarea:not(:placeholder-shown)+span{
  top:9px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.lead-card .invalid{border-color:#f5726b}
.lead-card .invalid:focus{box-shadow:0 0 0 3px rgba(245,114,107,.18)}

.lf-submit{width:100%;justify-content:center;padding:16px 24px;margin-top:6px;border:0}
.lf-submit[disabled]{opacity:.6;cursor:default}
.lf-status{display:block;margin-top:12px;text-align:center;font-size:14px;font-weight:600;min-height:21px}
.lf-status.ok{color:#1f8a53}
.lf-status.err{color:#c2453c}
.lf-note{font-size:12px;line-height:1.5;color:var(--muted-2);margin:12px 0 0;text-align:center}

/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 40px}
.foot{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.foot-desc{color:var(--muted);font-size:14px;max-width:440px;margin:0}
.fbottom{margin-top:4px;width:100%;display:flex;justify-content:center;
  color:var(--muted-2);font-size:13.5px;text-align:center}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media(max-width:960px){
  /* visibility — щоб згорнуте меню не ловило фокус табом і не читалось скрінрідером.
     .closing навішує main.js, поки меню їде вгору (див. коментар до .svc-panel) */
  .nav-mid{position:fixed;inset:78px 0 auto 0;flex-direction:column;background:#fff;padding:26px 32px;gap:20px;
    border-bottom:1px solid var(--line);transform:translateY(-130%);visibility:hidden;
    transition:transform .4s var(--ease)}
  .nav-mid.open{transform:none}
  .nav-mid.open,.nav-mid.closing{visibility:visible}
  .burger{display:flex}
  .nav-socials{display:flex}
  /* телефон — кругла іконка (номер набирається при кліку), без тексту */
  .phone span{display:none}
  .phone{width:38px;height:38px;justify-content:center;gap:0;border:1px solid var(--line-2);border-radius:50%;background:#fff}
  .phone:hover{border-color:var(--accent)}
  .nav-right{gap:12px}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .grid{grid-template-columns:1fr 1fr}
  .proc-step{width:92%}
  .about{grid-template-columns:1fr;gap:40px}
  .cta-split{grid-template-columns:1fr;gap:36px;padding:48px 36px}
}
@media(max-width:600px){
  .wrap{padding:0 20px}
  /* компактна шапка: 3 соцмережі + телефон + бургер */
  .nav-right{gap:8px}
  .nav-socials{gap:6px}
  .icon-btn,.phone{width:34px;height:34px}
  header .nav{gap:8px}
  section{padding:64px 0;--pad-t:64px}
  .hero{padding:48px 20px 56px}
  #services{padding-bottom:88px}
  #work{padding-top:40px;padding-bottom:88px;--pad-t:40px}
  #process{padding-top:40px;--pad-t:40px}
  .cta{padding-top:88px;padding-bottom:48px;--pad-t:88px}
  .grid{grid-template-columns:1fr}
  .proc-step{width:100%;align-self:auto}
  /* вставки (Експрес-дизайн, Демо-адмінка) — на всю ширину картки */
  .proc-step .p-accent{margin-left:calc(-52px - 22px)}
  .cta-split{padding:32px 20px;border-radius:22px;gap:32px}
  .lead-card{padding:24px 20px;border-radius:20px}
}

/* ============================================================
   SERVICE SCENES — анімовані ілюстрації всередині акордеона
   ============================================================ */
.svc-item{position:relative;overflow:hidden}
/* праворуч резервуємо смугу під сцену, щоб текст під неї не заїжджав */
.svc-panel-in{max-width:none;min-height:150px;
  padding:0 calc(min(36%,344px) + 66px) 26px 60px}
.svc-copy{max-width:560px}
/* сцена стартує на рівні назви послуги і не заважає кліку по заголовку */
.svc-stage{position:absolute;top:6px;right:58px;width:min(36%,344px);pointer-events:none;
  opacity:0;transform:translateY(16px) scale(.96);
  transition:opacity .6s var(--ease) .1s,transform .7s var(--ease) .1s}
.svc-item.open .svc-stage{opacity:1;transform:none}
.scene{display:block;width:100%;height:auto;font-family:'Manrope',system-ui,sans-serif;overflow:visible}

/* спільні токени сцен */
.sc-fr{fill:#fff;stroke:var(--line-2);stroke-width:2}
.sc-scr{fill:#f7f7fb}
.sc-w,.sc-w-f{fill:#fff}
.sc-ln{fill:var(--line)}
.sc-dot{fill:#e2e2ea}
.sc-mut{fill:#e1e1ec}
.sc-mut2,.sc-mut2-f{fill:#eeeef4}
.sc-mut-f{fill:#d6d6e2}
.sc-card{fill:#fff;stroke:var(--line);stroke-width:1}
.sc-acc{fill:var(--accent)}
/* напівпрозорі заливки — через fill-opacity, щоб не конфліктувати з opacity в анімаціях */
.sc-acc-s{fill:var(--accent);fill-opacity:.45}
.sc-acc-s2{fill:var(--accent);fill-opacity:.3}
.sc-acc-s3{fill:var(--accent);fill-opacity:.16}
.sc-soft,.sc-soft-f{fill:var(--accent-soft)}
.sc-ok,.sc-ok-f{fill:#22c55e}
.sc-bad{fill:#ef4444}
.sc-ink{fill:var(--ink-2)}
.sc-ink-f{fill:var(--ink)}
.sc-base{fill:#e6e6ef}
.sc-base2{fill:#d4d4e0}
.sc-stroke{fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sc-acc-stroke{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sc-ok-stroke{fill:none;stroke:#22c55e;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sc-strk{stroke:var(--line-2);stroke-width:1.4}
.sc-strk-only{fill:none;stroke:var(--line-2);stroke-width:1.4}
.sc-shadow{filter:drop-shadow(0 8px 16px rgba(40,30,90,.10))}
.s3-w1{fill:rgba(255,255,255,.9)}
.s3-w2{fill:rgba(255,255,255,.62)}
.s3-w2-f{fill:#fff}

/* ---------- 01 · інтернет-магазин ---------- */
.s1-shine{fill:#fff;opacity:.55;animation:s1shine 3.2s var(--ease) infinite}
@keyframes s1shine{0%{transform:translateX(0) skewX(-18deg)}55%,100%{transform:translateX(240px) skewX(-18deg)}}
.s1-card{animation:s1card 6s var(--ease) infinite}
.s1-d2{animation-delay:.12s}
.s1-d3{animation-delay:.24s}
@keyframes s1card{0%{opacity:0;transform:translateY(12px)}12%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(12px)}}
.s1-hl{animation:s1hl 6s var(--ease) infinite}
@keyframes s1hl{0%,26%{stroke:var(--line)}32%,74%{stroke:var(--accent)}80%,100%{stroke:var(--line)}}
.s1-ripple{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:s1ripple 6s linear infinite}
@keyframes s1ripple{0%,26%{transform:scale(.4);opacity:0}28%{opacity:.55}40%{transform:scale(3.4);opacity:0}100%{transform:scale(3.4);opacity:0}}
.s1-fly{opacity:0;animation:s1fly 6s var(--ease) infinite}
@keyframes s1fly{0%,29%{transform:translate(0,0);opacity:0}32%{opacity:1}36%{transform:translate(40px,-74px)}42%{transform:translate(71px,-96px);opacity:1}45%,100%{transform:translate(71px,-96px);opacity:0}}
.s1-badge{transform-box:fill-box;transform-origin:center;animation:s1badge 6s var(--ease) infinite}
@keyframes s1badge{0%,43%{transform:scale(1)}47%{transform:scale(1.45)}52%,100%{transform:scale(1)}}
.s1-n{fill:#fff;font-size:8px;font-weight:800;text-anchor:middle}
.s1-n1{animation:s1n1 6s steps(1,end) infinite}
.s1-n2{opacity:0;animation:s1n2 6s steps(1,end) infinite}
@keyframes s1n1{0%,44%{opacity:1}45%,100%{opacity:0}}
@keyframes s1n2{0%,44%{opacity:0}45%,100%{opacity:1}}
.s1-progress{transform-box:fill-box;transform-origin:left center;animation:s1prog 6s var(--ease) infinite}
@keyframes s1prog{0%,62%{transform:scaleX(0)}80%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.s1-cursor{opacity:0;animation:s1cur 6s var(--ease) infinite}
.s1-cursor path{fill:var(--ink);stroke:#fff;stroke-width:1.4;paint-order:stroke}
@keyframes s1cur{
  0%{transform:translate(266px,192px);opacity:0}
  8%{opacity:1}
  22%{transform:translate(186px,124px) scale(1)}
  27%{transform:translate(186px,124px) scale(.82)}
  31%{transform:translate(186px,124px) scale(1)}
  56%{transform:translate(160px,142px) scale(1)}
  60%{transform:translate(160px,142px) scale(.82)}
  64%{transform:translate(160px,142px) scale(1)}
  92%{transform:translate(160px,142px) scale(1);opacity:1}
  100%{transform:translate(266px,192px) scale(1);opacity:0}}

/* ---------- 02 · CRM-дашборд ---------- */
.s2-live{animation:s2live 1.8s ease-in-out infinite}
@keyframes s2live{0%,100%{opacity:1}50%{opacity:.25}}
.s2-navpill{opacity:.14;animation:s2nav 6s var(--ease) infinite}
@keyframes s2nav{0%,20%{transform:translateY(0)}25%,45%{transform:translateY(22px)}50%,70%{transform:translateY(44px)}75%,95%{transform:translateY(66px)}100%{transform:translateY(0)}}
.s2-big{fill:var(--ink);font-size:15px;font-weight:800}
.s2-mid{fill:var(--ink);font-size:10px;font-weight:700}
.s2-c{text-anchor:middle}
.s2-roll{animation:s2roll 6s cubic-bezier(.7,0,.2,1) infinite}
@keyframes s2roll{0%,20%{transform:translateY(0)}27%,45%{transform:translateY(-18px)}52%,70%{transform:translateY(-36px)}77%,100%{transform:translateY(-54px)}}
.s2-meter{transform-box:fill-box;transform-origin:left center;animation:s2meter 6s var(--ease) infinite}
@keyframes s2meter{0%{transform:scaleX(0)}30%,92%{transform:scaleX(.86)}100%{transform:scaleX(0)}}
.s2-spark{stroke-width:1.8;stroke-dasharray:60;stroke-dashoffset:60;animation:s2draw 6s var(--ease) infinite}
@keyframes s2draw{0%{stroke-dashoffset:60}28%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:60}}
.s2-bar{transform-box:fill-box;transform-origin:bottom center;animation:s2bar 6s var(--ease) infinite}
.s2-bar:nth-of-type(2){animation-delay:.09s}
.s2-bar:nth-of-type(3){animation-delay:.18s}
.s2-bar:nth-of-type(4){animation-delay:.27s}
.s2-bar:nth-of-type(5){animation-delay:.36s}
.s2-bar:nth-of-type(6){animation-delay:.45s}
@keyframes s2bar{0%{transform:scaleY(0)}22%{transform:scaleY(1.06)}28%,88%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.s2-track{fill:none;stroke:#eeeef4;stroke-width:8}
.s2-ring{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-dasharray:125.6;stroke-dashoffset:125.6;
  transform-box:view-box;transform-origin:280px 126px;transform:rotate(-90deg);animation:s2ring 6s var(--ease) infinite}
@keyframes s2ring{0%{stroke-dashoffset:125.6}35%,90%{stroke-dashoffset:35}100%{stroke-dashoffset:125.6}}
.s2-lg{opacity:0;animation:s2lg 6s var(--ease) infinite}
.s2-lg2{animation-delay:.12s}
.s2-lg3{animation-delay:.24s}
@keyframes s2lg{0%{opacity:0;transform:translateX(-8px)}30%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-8px)}}

/* ---------- 03 · мобільний застосунок ---------- */
.s3-float{animation:s3float 6s ease-in-out infinite}
.s3-f2{animation-delay:-3s}
@keyframes s3float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.s3-spark{stroke-width:2;stroke-dasharray:70;stroke-dashoffset:70;animation:s3spark 7s var(--ease) infinite}
@keyframes s3spark{0%{stroke-dashoffset:70}25%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:70}}
.s3-bar{transform-box:fill-box;transform-origin:bottom center;animation:s3bars 7s var(--ease) infinite}
.s3-b2{animation-delay:.1s}.s3-b3{animation-delay:.2s}.s3-b4{animation-delay:.3s}
@keyframes s3bars{0%{transform:scaleY(.15)}20%,86%{transform:scaleY(1)}100%{transform:scaleY(.15)}}
.s3-screenA{animation:s3sa 7s var(--ease) infinite}
@keyframes s3sa{0%,40%{transform:translateX(0)}50%,84%{transform:translateX(-100px)}94%,100%{transform:translateX(0)}}
.s3-screenB{animation:s3sb 7s var(--ease) infinite}
@keyframes s3sb{0%,40%{transform:translateX(100px)}50%,84%{transform:translateX(0)}94%,100%{transform:translateX(100px)}}
.s3-row{opacity:0;animation:s3row 7s var(--ease) infinite}
.s3-r2{animation-delay:.1s}.s3-r3{animation-delay:.2s}
@keyframes s3row{0%{opacity:0;transform:translateY(10px)}14%,38%{opacity:1;transform:none}48%{opacity:1}56%,100%{opacity:1;transform:none}}
.s3-line{stroke-dasharray:90;stroke-dashoffset:90;animation:s3line 7s var(--ease) infinite}
@keyframes s3line{0%,48%{stroke-dashoffset:90}62%,84%{stroke-dashoffset:0}100%{stroke-dashoffset:90}}
.s3-pt{opacity:0;animation:s3pt 7s var(--ease) infinite}
@keyframes s3pt{0%,60%{opacity:0;transform:scale(.4)}66%,84%{opacity:1;transform:none}100%{opacity:0}}
.s3-pill{animation:s3pill 7s var(--ease) infinite}
.s3-p2{animation-delay:.1s}
@keyframes s3pill{0%,52%{opacity:0}60%,86%{opacity:1}100%{opacity:0}}
.s3-tab,.s3-ti{animation:s3tab 7s var(--ease) infinite}
@keyframes s3tab{0%,40%{transform:translateX(0)}50%,84%{transform:translateX(24px)}94%,100%{transform:translateX(0)}}
.s3-notif{animation:s3notif 7s var(--ease) infinite}
@keyframes s3notif{0%,16%{opacity:0;transform:translateY(-34px)}24%,40%{opacity:1;transform:translateY(0)}50%,100%{opacity:0;transform:translateY(-34px)}}
.s3-fab{transform-box:fill-box;transform-origin:center;animation:s3fab 2.6s ease-in-out infinite}
@keyframes s3fab{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.s3-fabring{fill:none;stroke:var(--accent);stroke-width:2;transform-box:fill-box;transform-origin:center;
  animation:s3ring 2.6s var(--ease) infinite}
@keyframes s3ring{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(2);opacity:0}}
.s3-plus{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}

/* ---------- 04 · AI ---------- */
.s4-type{transform-box:fill-box;transform-origin:left center;animation:s4type 6s steps(9,end) infinite}
@keyframes s4type{0%{transform:scaleX(0)}22%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.s4-type2{transform-box:fill-box;transform-origin:left center;animation:s4type 6s steps(7,end) infinite;animation-delay:.5s}
.s4-caret{animation:s4caret 6s steps(9,end) infinite,s4blink .9s steps(1,end) infinite}
@keyframes s4caret{0%{transform:translateX(0)}22%,92%{transform:translateX(64px)}100%{transform:translateX(0)}}
@keyframes s4blink{0%,49%{opacity:1}50%,100%{opacity:.15}}
.s4-wire{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:.5;stroke-dasharray:4 6;animation:s4wire 1.2s linear infinite}
.s4-w2{animation-delay:-.6s}
@keyframes s4wire{to{stroke-dashoffset:-20}}
.s4-ring1{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:.32;stroke-dasharray:2 8;stroke-linecap:round}
.s4-ring2{fill:none;stroke:var(--accent);stroke-width:1;opacity:.22;stroke-dasharray:26 14}
.s4-orbit{transform-box:view-box;transform-origin:170px 110px;animation:s4spin 18s linear infinite}
.s4-orbit2{transform-box:view-box;transform-origin:170px 110px;animation:s4spinr 12s linear infinite}
@keyframes s4spin{to{transform:rotate(360deg)}}
@keyframes s4spinr{to{transform:rotate(-360deg)}}
.s4-glow{fill:var(--accent);opacity:.1;transform-box:fill-box;transform-origin:center;animation:s4glow 3s ease-in-out infinite}
@keyframes s4glow{0%,100%{transform:scale(.86);opacity:.08}50%{transform:scale(1.1);opacity:.18}}
.s4-core{stroke-width:1.6;opacity:.55;stroke-dasharray:24;stroke-dashoffset:24;animation:s4core 4s var(--ease) infinite}
@keyframes s4core{0%{stroke-dashoffset:24}40%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:24}}
.s4-node{transform-box:fill-box;transform-origin:center;animation:s4node 2.4s ease-in-out infinite}
.s4-n2{animation-delay:.2s}.s4-n3{animation-delay:.4s}.s4-n4{animation-delay:.6s}.s4-n5{animation-delay:.8s}.s4-n6{animation-delay:1s}
@keyframes s4node{0%,100%{transform:scale(.75);opacity:.35}50%{transform:scale(1.15);opacity:1}}
/* канали звернень: пошта й месенджер — вузли-іконки замість крапок */
.s4-chan{transform-box:view-box;animation:s4chan 2.4s ease-in-out infinite}
.s4-chan.s4-n6{transform-origin:130px 87px}
.s4-chan.s4-n5{transform-origin:130px 133px}
.s4-ico{fill:none;stroke:var(--accent);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
@keyframes s4chan{0%,100%{transform:scale(.94);opacity:.55}50%{transform:scale(1.06);opacity:1}}
.s4-p1{offset-path:path("M102 102C122 102 122 110 138 110");animation:s4move 2.4s linear infinite}
.s4-p2{offset-path:path("M202 110C218 110 218 96 238 96");animation:s4move 2.4s linear infinite;animation-delay:1.2s}
@keyframes s4move{0%{offset-distance:0%;opacity:0}15%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
.s4-l1,.s4-l2,.s4-l3,.s4-l4{transform-box:fill-box;transform-origin:left center;animation:s4line 6s var(--ease) infinite}
.s4-l1{animation-delay:2.4s}.s4-l2{animation-delay:2.7s}.s4-l3{animation-delay:3s}.s4-l4{animation-delay:3.3s}
@keyframes s4line{0%{transform:scaleX(0);opacity:0}8%,88%{transform:scaleX(1);opacity:1}100%{transform:scaleX(0);opacity:0}}
.s4-star{stroke-width:1.4;transform-box:fill-box;transform-origin:center;animation:s4star 3s ease-in-out infinite}
@keyframes s4star{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.2)}}
.s4-spark path{fill:var(--accent)}
.s4-spark{opacity:0;transform-box:fill-box;transform-origin:center;animation:s4twk 3.4s ease-in-out infinite}
.s4-s2{animation-delay:1.1s}.s4-s3{animation-delay:2.2s}
@keyframes s4twk{0%,100%{opacity:0;transform:scale(.4)}40%{opacity:.75;transform:scale(1)}}

/* ---------- 05 · парсери ---------- */
.s5-scan{fill:var(--accent);opacity:.55;animation:s5scan 2.6s var(--ease) infinite}
.s5-s2{animation-delay:.5s}.s5-s3{animation-delay:1s}
@keyframes s5scan{0%{transform:translateY(0);opacity:0}10%{opacity:.6}82%{opacity:.6}92%,100%{transform:translateY(45px);opacity:0}}
.s5-wire{fill:none;stroke:var(--accent);stroke-width:1.4;opacity:.35;stroke-dasharray:4 6;animation:s5wire 1.4s linear infinite}
.s5-w2{animation-delay:-.5s}.s5-w3{animation-delay:-.9s}
@keyframes s5wire{to{stroke-dashoffset:-20}}
.s5-p1{offset-path:path("M94 42C140 42 150 92 200 92");animation:s5move 2.6s var(--ease) infinite}
.s5-p2{offset-path:path("M94 110C140 110 150 100 200 98");animation:s5move 2.6s var(--ease) infinite;animation-delay:.5s}
.s5-p3{offset-path:path("M94 178C140 178 150 110 200 104");animation:s5move 2.6s var(--ease) infinite;animation-delay:1s}
@keyframes s5move{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
.s5-fill{fill-opacity:.5;animation:s5fill 6s var(--ease) infinite}
@keyframes s5fill{0%{transform:translateY(84px);opacity:0}8%{opacity:1}86%{transform:translateY(12px);opacity:1}96%,100%{transform:translateY(12px);opacity:0}}
.s5-live{animation:s2live 1.4s ease-in-out infinite}
.s5-row{opacity:0;animation:s5row 2.6s var(--ease) infinite}
.s5-r2{animation-delay:.45s}.s5-r3{animation-delay:.9s}
@keyframes s5row{0%{opacity:0;transform:translateX(-10px)}18%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-10px)}}

/* ---------- 06 · Telegram-бот ---------- */
.s6-plane-sm{fill:#fff}
.s6-hd{fill:#cfcfdd}
.s6-hd2{fill:#dfdfe9}
.s6-b1{opacity:0;animation:s6in 6.5s var(--ease) infinite;animation-delay:.2s}
.s6-b2{opacity:0;animation:s6in 6.5s var(--ease) infinite;animation-delay:2.2s}
.s6-b3{opacity:0;animation:s6in 6.5s var(--ease) infinite;animation-delay:4.4s}
.s6-btns{opacity:0;animation:s6in 6.5s var(--ease) infinite;animation-delay:3.2s}
@keyframes s6in{0%{opacity:0;transform:translateY(10px) scale(.96)}6%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(10px) scale(.96)}}
.s6-typing{opacity:0;animation:s6typ 6.5s var(--ease) infinite}
@keyframes s6typ{0%,16%{opacity:0}20%,32%{opacity:1}36%,100%{opacity:0}}
.s6-t1,.s6-t2,.s6-t3{animation:s6dot .9s ease-in-out infinite}
.s6-t2{animation-delay:.15s}.s6-t3{animation-delay:.3s}
@keyframes s6dot{0%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-3px);opacity:1}}
.s6-btn1{animation:s6press 6.5s var(--ease) infinite}
@keyframes s6press{0%,60%{fill:#fff;stroke:var(--line)}66%,88%{fill:var(--accent);stroke:var(--accent)}100%{fill:#fff;stroke:var(--line)}}
.s6-bt1{animation:s6presst 6.5s var(--ease) infinite}
@keyframes s6presst{0%,60%{fill:#e6e6ee}66%,88%{fill:rgba(255,255,255,.75)}100%{fill:#e6e6ee}}
.s6-check{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;animation:s6chk 6.5s var(--ease) infinite}
@keyframes s6chk{0%,70%{stroke-dashoffset:26}78%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:26}}
.s6-caret{animation:s4blink .9s steps(1,end) infinite}

/* ---------- 07 · WordPress ---------- */
.s7-w{fill:none;stroke:#fff;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.s7-gear path{fill:#e2e2ea}
.s7-gear circle{fill:#fff}
.s7-gear{transform-box:view-box;transform-origin:302px 30px;animation:s4spin 9s linear infinite}
.s7-arc-bg{fill:none;stroke:#eeeef4;stroke-width:9;stroke-linecap:round}
.s7-arc{fill:none;stroke:url(#s7g);stroke-width:9;stroke-linecap:round;stroke-dasharray:170;stroke-dashoffset:170;
  animation:s7arc 6s var(--ease) infinite}
@keyframes s7arc{0%,6%{stroke-dashoffset:170}45%,92%{stroke-dashoffset:14}100%{stroke-dashoffset:170}}
.s7-needle path{fill:var(--ink)}
.s7-needle{transform-box:view-box;transform-origin:106px 148px;animation:s7ndl 6s var(--ease) infinite}
@keyframes s7ndl{0%,6%{transform:rotate(-132deg)}38%{transform:rotate(52deg)}45%,92%{transform:rotate(44deg)}100%{transform:rotate(-132deg)}}
.s7-score{fill:var(--ink);font-size:19px;font-weight:800;text-anchor:middle;transform-box:fill-box;transform-origin:center;
  animation:s7sc 6s var(--ease) infinite}
@keyframes s7sc{0%,30%{opacity:0;transform:scale(.7)}44%{opacity:1;transform:scale(1.08)}50%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.7)}}
.s7-item{--d:0s}
.s7-i2{--d:.7s}
.s7-i3{--d:1.4s}
.s7-dot{animation:s7dot 6s var(--ease) infinite;animation-delay:var(--d)}
@keyframes s7dot{0%,18%{opacity:1}26%,100%{opacity:0}}
.s7-spin{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:14 30;opacity:0;
  transform-box:fill-box;transform-origin:center;
  animation:s7sp 6s var(--ease) infinite,s4spin .9s linear infinite;animation-delay:var(--d),0s}
@keyframes s7sp{0%,16%{opacity:0}24%,44%{opacity:1}50%,100%{opacity:0}}
.s7-ok{opacity:0;transform-box:fill-box;transform-origin:center;animation:s7ok 6s var(--ease) infinite;animation-delay:var(--d)}
@keyframes s7ok{0%,46%{opacity:0;transform:scale(.4)}54%{opacity:1;transform:scale(1.2)}60%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.4)}}
.s7-check{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;
  animation:s7chk 6s var(--ease) infinite;animation-delay:var(--d)}
@keyframes s7chk{0%,52%{stroke-dashoffset:14}62%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:14}}
.s7-ver{font-size:12px;font-weight:800;text-anchor:middle;fill:var(--accent)}
.s7-v1{animation:s7v1 6s var(--ease) infinite}
.s7-v2{opacity:0;animation:s7v2 6s var(--ease) infinite}
@keyframes s7v1{0%,58%{opacity:1;transform:translateY(0)}66%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes s7v2{0%,58%{opacity:0;transform:translateY(8px)}68%,100%{opacity:1;transform:translateY(0)}}

/* ---------- 08 · безпека ---------- */
.s8-shield{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linejoin:round;stroke-dasharray:470;stroke-dashoffset:470;
  animation:s8sh 7s var(--ease) infinite}
@keyframes s8sh{0%{stroke-dashoffset:470}30%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:470}}
.s8-shield-fill{fill:var(--accent-soft);opacity:0;animation:s8fill 7s var(--ease) infinite}
@keyframes s8fill{0%{opacity:0}30%{opacity:.5}44%{opacity:.85}60%,92%{opacity:.6}100%{opacity:0}}
.s8-radar{transform-box:view-box;transform-origin:170px 102px;animation:s4spin 3.5s linear infinite}
.s8-grid{fill:none;stroke:var(--accent);stroke-width:1;opacity:.18}
.s8-blip{opacity:0;transform-box:fill-box;transform-origin:center;animation:s8blip 3.5s linear infinite}
.s8-bl1{animation-delay:.4s}.s8-bl2{animation-delay:2.2s}.s8-bl3{animation-delay:3.2s}
@keyframes s8blip{0%{opacity:0;transform:scale(.4)}4%{opacity:1;transform:scale(1.3)}40%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(.4)}}
.s8-lock{transform-box:fill-box;transform-origin:center;animation:s8lock 7s var(--ease) infinite}
@keyframes s8lock{0%,34%{opacity:0;transform:scale(.5)}44%{opacity:1;transform:scale(1.12)}50%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.5)}}
.s8-shackle{fill:none;stroke:var(--accent);stroke-width:3.2;stroke-linecap:round}
.s8-tick{fill:none;stroke:#22c55e;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;
  animation:s8tick 7s var(--ease) infinite}
@keyframes s8tick{0%,54%{stroke-dashoffset:40}64%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:40}}
.s8-atk path{fill:none;stroke:#ef4444;stroke-width:2;stroke-linecap:round;opacity:.45}
.s8-atk circle{fill:#ef4444}
.s8-a1{opacity:0;animation:s8a1 7s linear infinite}
.s8-a2{opacity:0;animation:s8a2 7s linear infinite}
.s8-a3{opacity:0;animation:s8a3 7s linear infinite}
@keyframes s8a1{0%{transform:translate(6px,70px);opacity:0}22%{opacity:1}30%{transform:translate(86px,70px);opacity:1}34%,100%{transform:translate(88px,70px);opacity:0}}
@keyframes s8a2{0%,38%{transform:translate(330px,110px) rotate(180deg);opacity:0}44%{opacity:1}52%{transform:translate(252px,110px) rotate(180deg);opacity:1}56%,100%{transform:translate(250px,110px) rotate(180deg);opacity:0}}
@keyframes s8a3{0%,60%{transform:translate(16px,146px);opacity:0}66%{opacity:1}74%{transform:translate(98px,146px);opacity:1}78%,100%{transform:translate(100px,146px);opacity:0}}
.s8-hit{fill:none;stroke:#ef4444;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:s8hit 7s var(--ease) infinite}
.s8-h1{animation-delay:2.1s}.s8-h2{animation-delay:3.64s}.s8-h3{animation-delay:5.18s}
@keyframes s8hit{0%{transform:scale(.2);opacity:.7}10%{transform:scale(3.2);opacity:0}100%{transform:scale(3.2);opacity:0}}
.s8-stat{opacity:0;animation:s8st 7s var(--ease) infinite}
.s8-st1{animation-delay:.2s}.s8-st2{animation-delay:.45s}.s8-st3{animation-delay:.7s}
@keyframes s8st{0%{opacity:0;transform:translateY(8px)}12%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8px)}}
.s8-sc{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* пауза анімацій у згорнутих послугах */
.svc-item:not(.open) .svc-stage *{animation-play-state:paused!important}
/* перезапуск сцени при відкритті послуги */
.svc-stage.sc-restart *{animation:none!important}

@media(max-width:880px){
  .svc-panel-in{min-height:0;padding:0 60px 26px}
  .svc-copy{max-width:none}
  .svc-stage{position:static;width:100%;max-width:400px;margin-top:20px}
}
@media(max-width:600px){
  .svc-panel-in{padding:0 0 26px}
  .svc-stage{max-width:100%}
}
/* ============================================================
   HERO — живий фон, сузір’я під статистикою, лічильники, чипи
   ============================================================ */
.hero{--mx:0;--my:0}
.hero-bg{position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;overflow:hidden;pointer-events:none;
  transform:translateX(-50%) translate3d(calc(var(--mx)*-14px),calc(var(--my)*-9px),0);
  transition:transform .7s var(--ease)}
.hb{position:absolute;display:block;border-radius:50%;will-change:transform}
.hb1{width:54vw;height:54vw;max-width:660px;max-height:660px;left:-10vw;top:-26%;
  background:radial-gradient(circle,rgba(124,110,255,.22),rgba(124,110,255,0) 68%);
  animation:hbFloat1 24s ease-in-out infinite}
.hb2{width:48vw;height:48vw;max-width:580px;max-height:580px;right:-8vw;top:-20%;
  background:radial-gradient(circle,rgba(96,165,250,.20),rgba(96,165,250,0) 68%);
  animation:hbFloat2 29s ease-in-out infinite}
.hb3{width:42vw;height:42vw;max-width:540px;max-height:540px;left:48%;bottom:-46%;
  background:radial-gradient(circle,rgba(167,139,250,.20),rgba(167,139,250,0) 68%);
  animation:hbFloat3 34s ease-in-out infinite}
@keyframes hbFloat1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(5vw,4%) scale(1.12)}66%{transform:translate(-3vw,7%) scale(.95)}}
@keyframes hbFloat2{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-5vw,6%) scale(1.1)}70%{transform:translate(2vw,-4%) scale(.94)}}
@keyframes hbFloat3{0%,100%{transform:translate(0,0) scale(1)}45%{transform:translate(-6vw,-8%) scale(1.14)}75%{transform:translate(4vw,-3%) scale(.96)}}
.hb-grid{position:absolute;inset:-40px;opacity:.55;
  background-image:radial-gradient(circle,rgba(79,70,229,.22) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(64% 62% at 52% 42%,#000 0%,transparent 76%);
  mask-image:radial-gradient(64% 62% at 52% 42%,#000 0%,transparent 76%);
  animation:hbGrid 34s linear infinite}
@keyframes hbGrid{to{transform:translate(28px,28px)}}

.hero-aside{position:relative}
/* явні width/height: у абсолютного SVG (replaced element) bottom/right ігноруються */
.hero-viz{position:absolute;left:-46px;top:-96px;width:calc(100% + 92px);height:calc(100% + 192px);z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(72% 74% at 52% 46%,#000 42%,rgba(0,0,0,.4) 76%,transparent 100%);
  mask-image:radial-gradient(72% 74% at 52% 46%,#000 42%,rgba(0,0,0,.4) 76%,transparent 100%);
  transform:translate3d(calc(var(--mx)*16px),calc(var(--my)*11px),0);transition:transform .6s var(--ease)}
.hv-ring1{fill:none;stroke:var(--accent);stroke-width:1;opacity:.16;stroke-dasharray:3 11;stroke-linecap:round}
.hv-ring2{fill:none;stroke:var(--accent);stroke-width:1;opacity:.13;stroke-dasharray:34 20}
.hv-orbit{transform-box:view-box;transform-origin:230px 160px;animation:hvSpin 46s linear infinite}
.hv-orbit2{transform-box:view-box;transform-origin:230px 160px;animation:hvSpinR 34s linear infinite}
@keyframes hvSpin{to{transform:rotate(360deg)}}
@keyframes hvSpinR{to{transform:rotate(-360deg)}}
.hv-net{fill:none;stroke:var(--accent);stroke-width:1;opacity:.22;stroke-linecap:round;stroke-linejoin:round}
.hv-net-g{transform-box:view-box;transform-origin:230px 160px;animation:hvDrift 28s ease-in-out infinite}
@keyframes hvDrift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-10px,8px) rotate(2deg)}}
.hv-n{fill:var(--accent);fill-opacity:.5;transform-box:fill-box;transform-origin:center;
  animation:hvNode 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*.21s)}
.hv-big{fill-opacity:.75}
@keyframes hvNode{0%,100%{transform:scale(.7);fill-opacity:.3}50%{transform:scale(1.25);fill-opacity:.85}}
.hv-pk{fill:var(--accent);opacity:0}
.hv-pk1{offset-path:path("M36 58L118 26 212 70 318 34 420 86");animation:hvPk 6s linear infinite}
.hv-pk2{offset-path:path("M58 148L92 238 198 222 300 252 408 212");animation:hvPk 7.5s linear infinite;animation-delay:-2.5s}
.hv-pk3{offset-path:path("M148 116L252 152 356 128");animation:hvPk 5s linear infinite;animation-delay:-1.2s}
@keyframes hvPk{0%{offset-distance:0%;opacity:0}10%{opacity:.9}85%{opacity:.9}100%{offset-distance:100%;opacity:0}}

.hero-stats .hstat b{font-variant-numeric:tabular-nums}
.hero-stats::after{content:"";position:absolute;top:-20%;left:-45%;width:34%;height:140%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.65),rgba(255,255,255,0));
  transform:skewX(-14deg);animation:hsShine 8s var(--ease) infinite}
@keyframes hsShine{0%{transform:translateX(0) skewX(-14deg)}45%,100%{transform:translateX(420%) skewX(-14deg)}}

.hero-chips{position:absolute;inset:0;z-index:3;pointer-events:none;
  transform:translate3d(calc(var(--mx)*24px),calc(var(--my)*17px),0);transition:transform .5s var(--ease)}
.hero-chip{position:absolute;opacity:0;transform:translateY(16px) scale(.92);
  animation:chipIn .8s var(--ease) forwards}
.hero-chip>span{display:flex;align-items:center;padding:8px 15px;border-radius:999px;white-space:nowrap;
  font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 10px 26px rgba(40,30,90,.14);animation:chipFloat 7s ease-in-out infinite}
@keyframes chipIn{to{opacity:1;transform:none}}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hc1{top:-24px;left:-18px;animation-delay:.45s}
.hc2{top:26%;right:-38px;animation-delay:.6s}
.hc3{bottom:-24px;left:12%;animation-delay:.75s}
.hc4{bottom:-24px;right:8%;animation-delay:.9s}
.hc2>span{animation-duration:8.5s;animation-delay:-2s}
.hc3>span{animation-duration:6.5s;animation-delay:-4s}
.hc4>span{animation-duration:9s;animation-delay:-1s}

@media(max-width:960px){
  .hero-viz{left:-24px;top:-28px;width:calc(100% + 48px);height:calc(100% + 96px)}
  .hc1{top:-22px;left:-6px}
  .hc2{top:-22px;right:-6px}
  .hc3{bottom:-20px;left:8%}
  .hc4{bottom:-20px;right:8%}
}
@media(max-width:600px){
  .hb-grid{opacity:.35}
  .hero-chip>span{font-size:11.5px;padding:7px 12px}
  .hc3{left:2%}
  .hc4{right:2%}
}

/* доступність: без руху — сцени завмирають у «зібраному» стані */
@media(prefers-reduced-motion:reduce){
  .svc-stage *{animation-play-state:paused!important;animation-delay:-3s!important}
  .svc-stage{transition:none}
  .hero-bg *,.hero-viz *,.hero-stats::after{animation:none!important}
  .hero-chip{opacity:1;transform:none;animation:none}
  .hero-chip>span{animation:none}
  .hero-bg,.hero-viz,.hero-chips{transition:none;transform:none}
  .hero-bg{transform:translateX(-50%)}
  /* картка портфоліо: без прокрутки скріншота — main.js навіть не вантажить смугу */
  .card-img .scroll{display:none}
  .card:hover .card-img .base{transform:none}
}