/* ===============================================================
   Mostly — global stylesheet
   v1.0 · Chereз-белый минимал + лаймовый акцент (#d4ff00)
   Consumed by all pages under mostly.by
=============================================================== */

:root{
  --fg:#0a0a0a;
  --bg:#fff;
  --mute:#5a5a5a;
  --mute-2:#888;
  --band:#f4f4f4;
  --band-2:#efefef;
  --line:#e6e6e6;
  --acc:#d4ff00;          /* лаймовый — единственный акцент */
  --dark:#0f0f0f;
  --code-bg:#f6f6f6;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip;max-width:100%}
body{font-family:'TildaSans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--fg);background:var(--bg);line-height:1.55;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%;position:relative}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--acc);color:var(--fg)}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:900px;margin:0 auto;padding:0 24px}
.wrap-mid{max-width:820px;margin:0 auto;padding:0 24px}

/* ===== NAV ===== */
.nav{position:sticky;top:0;background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:100;border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px;gap:24px}
.nav__logo{font-size:22px;font-weight:800;letter-spacing:-0.02em;color:var(--fg)}
.nav__links{display:flex;gap:28px;align-items:center}
.nav__links a{font-size:15px;color:var(--mute);transition:color 0.15s}
.nav__links a:hover,.nav__links a.is-active{color:var(--fg)}
.nav__cta{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:var(--acc);color:var(--fg);border-radius:100px;font-weight:700;font-size:14px;transition:transform 0.15s, background 0.15s, box-shadow 0.15s}
.nav__cta:hover{background:#e8ff4d;transform:translateY(-1px);box-shadow:0 6px 18px rgba(212,255,0,0.4)}
.nav__burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none}
.nav__burger span{width:24px;height:2px;background:var(--fg);border-radius:2px;transition:transform 0.2s, opacity 0.2s}
.nav__burger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.is-active span:nth-child(2){opacity:0}
.nav__burger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav__mob-menu{display:none;position:fixed;top:57px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:16px 24px 24px;z-index:99;max-height:calc(100vh - 57px);overflow-y:auto}
.nav__mob-menu a{display:block;padding:14px 0;font-size:17px;border-bottom:1px solid var(--line);color:var(--fg)}
.nav__mob-menu a:last-child{border-bottom:0}
.nav__mob-menu.is-open{display:block}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:100px;font-weight:600;font-size:16px;transition:transform 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s;cursor:pointer;border:0;font-family:inherit;text-decoration:none}
.btn--primary{background:var(--acc);color:var(--fg)}
.btn--primary:hover{background:#c1eb00;transform:translateY(-1px);box-shadow:0 8px 24px rgba(212,255,0,0.35)}
.btn--ghost{background:transparent;color:var(--fg);border:1.5px solid var(--fg)}
.btn--ghost:hover{background:var(--fg);color:#fff;transform:translateY(-1px)}
.btn--acc{background:var(--acc);color:var(--fg)}
.btn--acc:hover{background:#e8ff4d;transform:translateY(-1px);box-shadow:0 8px 24px rgba(212,255,0,0.35)}
.btn__arrow{display:inline-block;transition:transform 0.15s}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* ===== HERO (index-style) ===== */
.hero{padding:80px 0 60px;position:relative;overflow:hidden}
.hero__badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:var(--band);border-radius:100px;font-size:13px;font-weight:600;color:var(--mute);margin-bottom:24px}
.hero__badge::before{content:"";width:6px;height:6px;background:var(--acc);border-radius:50%;box-shadow:0 0 0 4px rgba(212,255,0,0.25)}
.hero__h1{font-size:clamp(40px, 7vw, 76px);line-height:1.02;font-weight:800;letter-spacing:-0.03em;margin:0 0 24px;max-width:900px}
/* .hero__h1 em restyled above */
.hero__sub{font-size:20px;color:var(--mute);max-width:640px;margin:0 0 40px;line-height:1.5}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap}

/* ===== METRICS ROW ===== */
.metrics{padding:40px 0 100px;border-bottom:1px solid var(--line)}
.metrics__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.metric{padding:24px 0}
.metric__num{font-size:56px;font-weight:800;letter-spacing:-0.03em;line-height:1;margin-bottom:8px}
.metric__num sup{font-size:24px;font-weight:700;vertical-align:top;margin-left:2px;color:var(--mute)}
.metric__label{font-size:14px;color:var(--mute);line-height:1.4}

/* ===== SECTION generic ===== */
.section{padding:100px 0}
.section--dark{background:var(--dark);color:#eaeaea}
.section--dark .section__eyebrow{color:#888}
.section--dark .section__title{color:#fff}
.section--band{background:var(--band)}
.section__eyebrow{display:inline-block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--mute);margin-bottom:16px}
.section__title{font-size:clamp(32px, 4.5vw, 56px);line-height:1.05;font-weight:800;letter-spacing:-0.025em;margin:0 0 20px;max-width:900px}
.section__lead{font-size:19px;color:var(--mute);max-width:720px;margin:0 0 60px;line-height:1.5}
.section--dark .section__lead{color:#aaa}

/* ===== SERVICES CARDS ===== */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.service{padding:36px 32px;border:1px solid var(--line);border-radius:20px;background:#fff;transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s;display:flex;flex-direction:column;gap:16px}
.service:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,0.06);border-color:var(--fg)}
.service__icon{width:56px;height:56px;background:var(--acc);border-radius:16px;display:flex;align-items:center;justify-content:center}
.service__icon svg{width:28px;height:28px}
.service__title{font-size:24px;font-weight:800;letter-spacing:-0.01em;margin:0}
.service__desc{color:var(--mute);font-size:15px;line-height:1.55;margin:0}
.service__list{list-style:none;padding:0;margin:8px 0 0;font-size:14px;color:var(--fg)}
.service__list li{padding:6px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}
.service__list li:first-child{border-top:0}
.service__list b{font-weight:700}
.service__price{color:var(--mute);font-size:13px}
.service__more{margin-top:auto;padding-top:16px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px;color:var(--fg)}

/* ===== PROCESS STEPS ===== */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{padding:0;position:relative}
.step__num{font-size:14px;font-weight:800;letter-spacing:0.08em;color:var(--acc);margin-bottom:16px;display:block}
.step__title{font-size:22px;font-weight:800;letter-spacing:-0.01em;margin:0 0 12px;color:#fff}
.step__desc{color:#aaa;font-size:15px;line-height:1.55;margin:0}

/* ===== CASES GRID ===== */
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.case{padding:32px;border:1px solid var(--line);border-radius:20px;background:var(--band);transition:transform 0.2s, box-shadow 0.2s;display:flex;flex-direction:column;gap:16px;min-height:280px}
.case:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,0.06)}
.case__tag{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--mute)}
.case__title{font-size:26px;font-weight:800;letter-spacing:-0.01em;margin:0}
.case__desc{color:var(--mute);font-size:15px;margin:0}
.case__kpi{display:flex;gap:24px;margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.case__kpi-item{font-size:13px;color:var(--mute)}
.case__kpi-item b{display:block;font-size:26px;font-weight:800;color:var(--fg);letter-spacing:-0.02em;line-height:1;margin-bottom:4px}
.case--dead{opacity:0.55;pointer-events:none}
.case--dead .case__title::after{content:" · завершён";font-weight:600;color:var(--mute);font-size:14px}

/* ===== QUOTE BLOCK ===== */
.quote-block{padding:80px 0}
.quote{font-size:clamp(24px, 3vw, 36px);line-height:1.35;font-weight:600;letter-spacing:-0.015em;color:var(--fg);margin:0 0 32px;max-width:900px}
.quote::before{content:"«";font-size:80px;line-height:0.7;color:var(--acc);vertical-align:-8px;margin-right:8px;font-weight:800}
.quote::after{content:"»";font-size:80px;line-height:0.7;color:var(--acc);vertical-align:-8px;margin-left:4px;font-weight:800}
.quote__author-line{font-size:14px;color:var(--mute)}
.quote__author-line b{color:var(--fg);font-weight:700}

/* ===== FAQ ===== */
.faq__list{max-width:900px;margin:0 auto}
.faq__item{border-top:1px solid var(--line);padding:24px 0}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__q{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;cursor:pointer;font-size:20px;font-weight:700;letter-spacing:-0.01em;list-style:none}
.faq__q::-webkit-details-marker{display:none}
.faq__toggle{width:28px;height:28px;border-radius:50%;background:var(--fg);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;transition:transform 0.2s;font-size:20px;line-height:1}
.faq__item[open] .faq__toggle{transform:rotate(45deg)}
.faq__a{margin-top:16px;color:var(--mute);font-size:16px;line-height:1.6;padding-right:52px}
.faq__a a{text-decoration:underline;text-underline-offset:3px}

/* ===== BIG CTA ===== */
.big-cta{padding:100px 0;background:var(--fg);color:#fff;text-align:center}
.big-cta__title{font-size:clamp(36px, 5vw, 64px);line-height:1.15;font-weight:800;letter-spacing:-0.03em;margin:0 0 20px;color:#fff}
.big-cta__title em{font-style:normal;background:var(--acc);color:var(--fg);padding:2px 14px;border-radius:8px;display:inline-block;line-height:1.1;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero__h1 em{font-style:normal;background:var(--acc);color:var(--fg);padding:2px 12px;border-radius:8px;display:inline-block;line-height:1.05;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.big-cta__sub{font-size:19px;color:#bbb;max-width:600px;margin:0 auto 40px}
.big-cta__buttons{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ===== BREADCRUMBS ===== */
.crumbs{padding:24px 0 0;font-size:14px;color:var(--mute)}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover{color:var(--fg)}

/* ===== ARTICLE (blog longread, case longread, privacy doc) ===== */
.article-hero{padding:40px 0 48px}
.article-hero h1{font-size:clamp(30px, 4.5vw, 44px);line-height:1.15;font-weight:800;letter-spacing:-0.02em;margin:0 0 16px;max-width:820px}
.article-hero .meta{color:var(--mute);font-size:14px;display:flex;gap:16px;flex-wrap:wrap}
.article-hero .meta span+span::before{content:"·";margin-right:16px;color:var(--mute-2)}

article.post, .article{padding:8px 0 64px;font-size:17px;max-width:100%;overflow-wrap:break-word;word-break:break-word}
article.post h2, .article h2{font-size:26px;line-height:1.3;margin:44px 0 14px;font-weight:800;letter-spacing:-0.01em}
article.post h3, .article h3{font-size:19px;margin:24px 0 10px;font-weight:700}
article.post p, .article p{margin:0 0 14px}
article.post ul, article.post ol, .article ul, .article ol{margin:0 0 14px;padding-left:22px}
article.post ul li, article.post ol li, .article ul li, .article ol li{margin-bottom:6px}
article.post a.inline, .article a.inline{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
article.post code, .article code{background:var(--code-bg);border-radius:4px;padding:2px 6px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;word-break:break-all}
article.post pre, .article pre{background:var(--code-bg);border-radius:8px;padding:16px 20px;overflow-x:auto;max-width:100%;margin:0 0 18px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;line-height:1.5}
article.post blockquote, .article blockquote{margin:20px 0;padding:16px 24px;border-left:3px solid var(--acc);background:var(--band);border-radius:0 8px 8px 0;color:#222}
article.post blockquote p, .article blockquote p{margin:0}
article.post .note, .article .note{background:#f6ffe0;border:1px solid #e5f28f;border-radius:10px;padding:16px 22px;margin:20px 0}
article.post .note strong, .article .note strong{display:block;margin-bottom:6px}
article.post .tldr, .article .tldr{margin-top:0}
.tldr{background:var(--band);border-radius:12px;padding:20px 24px;margin:0 0 36px}
.tldr strong{display:block;font-size:13px;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;color:var(--mute)}
.tldr p{margin:0;font-size:16px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0;border-radius:12px;border:1px solid var(--line)}
.table-scroll table{margin:0;width:100%;border-collapse:collapse;font-size:15px}
.table-scroll th,.table-scroll td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.table-scroll th{background:var(--band);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:0.06em;color:var(--mute)}
.table-scroll tr:last-child td{border-bottom:0}

/* ===== ARTICLE HERO / CASE HERO variants ===== */
.case-hero{background:var(--band);padding:48px 0 40px}
.case-hero .tag{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--mute);margin-bottom:12px}
.case-hero h1{font-size:clamp(30px, 5vw, 48px);line-height:1.1;font-weight:800;letter-spacing:-0.02em;margin:0 0 16px;max-width:820px}
.case-hero .lead{font-size:19px;color:var(--mute);max-width:720px;margin:0 0 32px;line-height:1.5}
.case-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 8px}
.case-kpi .card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.case-kpi .num{font-size:32px;font-weight:800;line-height:1;margin-bottom:6px;letter-spacing:-0.02em}
.case-kpi .lbl{color:var(--mute);font-size:13px;line-height:1.35}

/* ===== BLOG LIST GRID ===== */
.posts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.post-card{padding:28px;border:1px solid var(--line);border-radius:18px;background:#fff;transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s;display:flex;flex-direction:column;gap:12px;min-height:220px;color:var(--fg)}
.post-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,0.06);border-color:var(--fg)}
.post-card .meta{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--mute)}
.post-card h2{font-size:22px;line-height:1.25;font-weight:800;letter-spacing:-0.01em;margin:0}
.post-card p{color:var(--mute);font-size:15px;margin:0}
.post-card .more{margin-top:auto;padding-top:12px;font-weight:600;font-size:14px;display:inline-flex;gap:6px;align-items:center}

/* ===== PRICE CARDS ===== */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0 0 32px}
.price{padding:32px 28px;border:1px solid var(--line);border-radius:20px;background:#fff;display:flex;flex-direction:column;gap:16px}
.price--highlight{background:var(--dark);color:#fff;border-color:var(--dark)}
.price--highlight .price__old,.price--highlight ul li{color:#bbb}
.price__label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--mute)}
.price--highlight .price__label{color:var(--acc)}
.price__num{font-size:36px;font-weight:800;letter-spacing:-0.02em;line-height:1}
.price__num sup{font-size:16px;font-weight:700;vertical-align:top;color:var(--mute)}
.price--highlight .price__num sup{color:#888}
.price__cadence{font-size:14px;color:var(--mute)}
.price--highlight .price__cadence{color:#aaa}
.price ul{list-style:none;padding:0;margin:8px 0 0;font-size:14px}
.price ul li{padding:8px 0;border-top:1px solid var(--line);display:flex;gap:10px;align-items:flex-start}
.price ul li::before{content:"✓";color:var(--acc);font-weight:800;flex-shrink:0}
.price--highlight ul li{border-top-color:#2a2a2a}
.price ul li:first-child{border-top:0}
.price .btn{margin-top:auto;justify-content:center}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px){
  .nav__links, .nav__cta{display:none}
  .nav__burger{display:flex}
  .hero{padding:48px 0 32px}
  .hero__h1{font-size:clamp(32px, 8vw, 48px)}
  .hero__sub{font-size:17px}
  .btn{padding:14px 22px;font-size:15px}
  .metrics{padding:24px 0 60px}
  .metrics__grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .metric__num{font-size:40px}
  .section{padding:60px 0}
  .cards-3{grid-template-columns:1fr}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .cases-grid{grid-template-columns:1fr}
  .posts-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .case-kpi{grid-template-columns:1fr}
  .quote-block{padding:48px 0}
  .quote::before, .quote::after{font-size:56px}
  .faq__q{font-size:17px;gap:16px}
  .faq__a{padding-right:0;font-size:15px}
  .big-cta{padding:60px 0}
  article.post, .article{font-size:16px}
  article.post h, .article h2{font-size:22px}
  .table-scroll{margin:14px -24px;padding:0}
  .table-scroll th,.table-scroll td{padding:8px 10px;white-space:nowrap;font-size:13px}
  .article-hero h1{font-size:28px}
  .case-hero h1{font-size:32px}
}

/* ===== FOOTER (mstl-foot) — same as before, kept for consistency ===== */
.mstl-foot{background:#0f0f0f;color:#d4d4d4;padding:56px 0 24px;font-size:14px;line-height:1.6}
.mstl-foot__wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.mstl-foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1.4fr;gap:48px;margin-bottom:40px;align-items:start}
.mstl-foot__col{display:flex;flex-direction:column;gap:6px}
.mstl-foot__col--brand{gap:12px}
.mstl-foot__logo{font-size:22px;font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:-0.01em}
.mstl-foot__tag{color:#9a9a9a;font-size:14px;line-height:1.5}
.mstl-foot__h{color:#fff;font-weight:600;font-size:12px;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.06em}
.mstl-foot__link{color:#d4d4d4;text-decoration:none;transition:color 0.15s ease;display:block;padding:2px 0}
.mstl-foot__link:hover{color:#fff}
.mstl-foot__mute{color:#7a7a7a}
.mstl-foot__bar{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid #1f1f1f;color:#7a7a7a;gap:16px;flex-wrap:wrap;font-size:13px}
.mstl-foot__link--muted{color:#7a7a7a}
.mstl-foot__link--muted:hover{color:#d4d4d4}
@media (max-width:820px){.mstl-foot__grid{grid-template-columns:1fr 1fr;gap:32px}.mstl-foot__col--brand{grid-column:1/-1}}
@media (max-width:520px){.mstl-foot__grid{grid-template-columns:1fr}}

/* ===============================================================
   CASE-PAGE LEGACY CLASSES (artbeauty / kariby / konferenc-zal / salskselmash)
   Старые шаблоны кейсов используют .kpi / .card / .num / .cap / .imgblock / .lead / .link / .cta
=============================================================== */
.hero .lead{font-size:19px;color:var(--mute);max-width:720px;margin:0 0 28px;line-height:1.55}
.hero .kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:32px 0}
.hero .kpi .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;transition:transform 0.15s, box-shadow 0.15s}
.hero .kpi .card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,0.06)}
.hero .kpi .num{font-size:32px;font-weight:800;letter-spacing:-0.02em;line-height:1;margin-bottom:6px}
.hero .kpi .cap{font-size:13px;color:var(--mute);line-height:1.4}
.hero a.btn{display:inline-flex;padding:14px 26px;border-radius:100px;font-weight:600;font-size:15px;margin-top:12px;text-decoration:none;transition:background 0.15s, transform 0.15s;gap:8px;align-items:center}
.hero a.btn:hover{transform:translateY(-1px)}
a.link{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
a.link:hover{color:var(--mute)}
.imgblock{margin:20px 0}
.imgblock img{width:100%;border-radius:14px;border:1px solid var(--line);display:block}
.imgblock .cap{margin-top:8px;font-size:13px;color:var(--mute);text-align:center;line-height:1.4}

/* Case section — compact padding (в case-pages секции короткие, глобальный 100px — оверкилл) */
body.is-case .section{padding:32px 0}
body.is-case .hero{padding:48px 0 24px}
body.is-case .hero h1{font-size:clamp(28px, 4.5vw, 42px);line-height:1.15;font-weight:800;letter-spacing:-0.02em;margin:0 0 16px;max-width:820px}
body.is-case .section h2{font-size:26px;font-weight:800;letter-spacing:-0.02em;margin:0 0 14px}
body.is-case .section h3{font-size:19px;font-weight:700;margin:16px 0 8px}
body.is-case .section p, body.is-case .section ul, body.is-case .section ol{font-size:17px;line-height:1.6;max-width:820px}
body.is-case .section ul, body.is-case .section ol{padding-left:22px}
body.is-case .section li{margin-bottom:6px}
body.is-case .cta{padding:56px 32px;background:var(--fg);color:#fff;text-align:center;border-radius:24px;margin:40px 24px;display:flex;flex-direction:column;align-items:center;gap:0}
body.is-case .cta h2{font-size:clamp(24px, 3.5vw, 34px);font-weight:800;margin:0 0 12px;color:#fff}
body.is-case .cta p{color:#bbb;margin:0 0 24px;font-size:17px;max-width:520px}
body.is-case .cta .cta-buttons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;width:100%}
body.is-case .cta a.btn{background:var(--acc);color:var(--fg);padding:14px 28px;border-radius:100px;font-weight:600;display:inline-flex;text-decoration:none;font-size:16px;margin:0;border:2px solid var(--acc);transition:background 0.15s, color 0.15s, transform 0.15s}
body.is-case .cta a.btn + a.btn{margin-top:12px}
body.is-case .cta a.btn:hover{background:#c1eb00;border-color:#c1eb00;transform:translateY(-1px)}
body.is-case .cta a.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
body.is-case .cta a.btn.ghost:hover{background:transparent;color:var(--acc);border-color:var(--acc)}
@media (max-width:900px){
  body.is-case .hero .kpi{grid-template-columns:1fr;gap:12px}
  body.is-case .cta{padding:40px 20px;margin:24px 12px}
}

/* ===============================================================
   POPUP CONTACT FORM (единая для всей главной, услуг, цен, кейсов и т.д.)
=============================================================== */
.mstl-form{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:24px}
.mstl-form[hidden]{display:none}
.mstl-form__overlay{position:absolute;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer}
.mstl-form__box{position:relative;background:#fff;border-radius:24px;max-width:520px;width:100%;padding:40px 32px 32px;box-shadow:0 30px 80px rgba(0,0,0,0.35);z-index:1;max-height:calc(100vh - 48px);overflow-y:auto;animation:mstlFormIn 0.2s ease-out}
@keyframes mstlFormIn{from{opacity:0;transform:scale(0.95) translateY(20px)}to{opacity:1;transform:none}}
.mstl-form__close{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:999px;background:#0a0a0a;border:2px solid #0a0a0a;font-size:26px;font-weight:400;cursor:pointer;line-height:1;color:#fff;display:flex;align-items:center;justify-content:center;transition:.2s;z-index:5;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.mstl-form__close:hover{background:#d4ff00;border-color:#d4ff00;color:#0a0a0a;transform:scale(1.08)}
.mstl-form__box h3{font-size:26px;font-weight:800;letter-spacing:-0.02em;margin:0 0 8px;color:var(--fg)}
.mstl-form__box > p{color:var(--mute);margin:0 0 24px;font-size:15px}
.mstl-form__box form{display:flex;flex-direction:column;gap:12px}
.mstl-form__box input,.mstl-form__box textarea{padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;font-family:inherit;font-size:15px;color:var(--fg);background:#fff;transition:border-color 0.15s;width:100%}
.mstl-form__box input:focus,.mstl-form__box textarea:focus{outline:0;border-color:var(--fg)}
.mstl-form__box textarea{resize:vertical;min-height:100px;font-family:inherit}
.mstl-form__box button[type="submit"]{margin-top:4px;padding:14px 28px;background:var(--fg);color:#fff;border-radius:100px;font-weight:600;font-size:16px;border:0;cursor:pointer;transition:background 0.15s, transform 0.15s;font-family:inherit}
.mstl-form__box button[type="submit"]:hover{background:#333;transform:translateY(-1px)}
.mstl-form__box button[type="submit"]:disabled{background:#888;cursor:wait;transform:none}
.mstl-form__hint{font-size:12px;color:var(--mute);margin-top:8px;line-height:1.5}
.mstl-form__hint a{text-decoration:underline}
.mstl-form__success{padding:24px 12px;text-align:center;color:var(--fg)}
.mstl-form__success svg{width:64px;height:64px;margin:0 auto 16px;display:block}
.mstl-form__success h4{font-size:22px;font-weight:800;margin:0 0 8px;letter-spacing:-0.01em}
.mstl-form__success p{color:var(--mute);margin:0;font-size:15px}
@media (max-width:520px){
  .mstl-form{padding:12px}
  .mstl-form__box{padding:32px 24px 24px;border-radius:20px}
  .mstl-form__box h3{font-size:22px}
}

/* ===== COOKIE NOTICE ===== */
.mstl-cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;background:#fff;color:#0f0f0f;border:1px solid #e0e0e0;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.12);padding:16px 20px;font-size:14px;line-height:1.5;max-width:720px;margin:0 auto}
.mstl-cookie[hidden]{display:none}
.mstl-cookie__wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.mstl-cookie__text{flex:1;min-width:200px}
.mstl-cookie__text a{color:inherit;text-decoration:underline}
.mstl-cookie__btn{border:0;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;background:#0f0f0f;color:#fff;transition:background 0.15s ease}
.mstl-cookie__btn:hover{background:#333}

/* ===============================================================
   CASES CAROUSEL (главная — 2026-09-16 v2)
   Горизонтальный scroll-snap слайдер для блока кейсов на главной.
   Причина: сейчас .cases-grid растёт вертикально по мере добавления,
   при 10-15 кейсах страница станет неприемлемо длинной.
=============================================================== */
.cases-scroll{ position: relative; margin: 0 -24px; }
.cases-scroll__track{
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 24px 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cases-scroll__track::-webkit-scrollbar{ display: none; }
.cases-scroll__track > .case{
  flex: 0 0 min(380px, 85vw);
  scroll-snap-align: start;
  min-height: 280px;
}
.cases-scroll::before,
.cases-scroll::after{
  content: '';
  position: absolute;
  top: 0; bottom: 24px;
  width: 40px;
  z-index: 2;
  pointer-events: none;
}
.cases-scroll::before{ left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.cases-scroll::after{ right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }

/* Nav arrows — desktop only */
.cases-scroll__nav{
  display: none;
  position: absolute;
  top: calc(50% - 12px);
  transform: translateY(-50%);
  z-index: 3;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--fg);
  color: #fff;
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 26px; line-height: 1;
  padding: 0 0 3px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: transform 0.15s ease, background 0.15s ease;
  font-family: inherit;
}
.cases-scroll__nav:hover{ background: #333; transform: translateY(-50%) scale(1.06); }
.cases-scroll__nav--prev{ left: 8px; }
.cases-scroll__nav--next{ right: 8px; }
@media (min-width: 900px){
  .cases-scroll__nav{ display: flex; }
  .cases-scroll::before,
  .cases-scroll::after{ width: 60px; }
}

/* Индикатор прогресса под слайдером */
.cases-scroll__progress{
  position: relative;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  margin: 16px 24px 0;
  overflow: hidden;
}
.cases-scroll__progress-bar{
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--acc);
  border-radius: 2px;
  transition: width 0.2s ease, left 0.2s ease;
  width: 30%;
}

/* ===============================================================
   CASES: HOVER-PREVIEW MODIFIER  (added 2026-09-16 — вариант B)
   При наведении фон карточки становится скрином клиентского сайта
   с затемнением; текст перевёрнут в белый. Активно только на устройствах
   с настоящим hover — на touch-устройствах карточка остаётся text-only.
=============================================================== */
.case--visual{ position: relative; overflow: hidden; }
.case--visual .case__shot{
  position: absolute; inset: 0;
  background-size: cover; background-position: top center;
  opacity: 0; transition: opacity 0.3s ease;
  z-index: 0;
  pointer-events: none;
}
.case--visual .case__shot::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(15,15,15,0.15) 0%, rgba(15,15,15,0.55) 45%, rgba(15,15,15,0.88) 100%);
}
.case--visual > *:not(.case__shot){
  position: relative; z-index: 1;
  transition: color 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover){
  .case--visual:hover{ transform: translateY(-4px); box-shadow: 0 22px 44px rgba(0,0,0,0.18); border-color: transparent; }
  .case--visual:hover .case__shot{ opacity: 1; }
  .case--visual:hover .case__title,
  .case--visual:hover .case__desc,
  .case--visual:hover .case__kpi-item,
  .case--visual:hover .case__kpi-item b{ color: #fff; }
  .case--visual:hover .case__tag{ color: var(--acc); background: rgba(212,255,0,0.15); }
  .case--visual:hover .case__kpi{ border-top-color: rgba(255,255,255,0.22); }
}


/* ===============================================================
   BUTTONS: UNIFORM LIME HOVER  (2026-09-16 — по Владу)
   Все hover-состояния кнопок → лайм var(--acc). Единый доминирующий
   цвет по всему сайту, чтоб пользователь везде видел один и тот же
   активный цвет (принцип «25-го кадра»).
=============================================================== */
.btn--primary:hover{
  background: var(--acc) !important;
  color: var(--fg) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(212,255,0,0.35);
}
.btn--ghost:hover{
  background: var(--acc) !important;
  color: var(--fg) !important;
  border-color: var(--acc) !important;
  transform: translateY(-1px);
}
.btn--acc:hover{
  background: #e8ff4d;
  color: var(--fg);
}
.hero a.btn:hover{
  background: var(--acc) !important;
  color: var(--fg) !important;
}
.mstl-form__box button[type="submit"]:hover{
  background: var(--acc) !important;
  color: var(--fg) !important;
}
.mstl-cookie__btn:hover{
  background: var(--acc) !important;
  color: var(--fg) !important;
}

/* .cases-grid → responsive 3-2-1 */
@media (max-width: 1024px){
  .cases-grid{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px){
  .cases-grid{ grid-template-columns: 1fr !important; }
}

/* ===============================================================
   CASES: PHOTO-VISIBLE VARIANT (2026-09-16 v6 — вариант A)
   Скрин клиентского сайта — на верху карточки, всегда виден.
   Aspect 8:5 (совпадает с /assets/cases-preview/*.jpg 800x500).
   При hover — микро-зум скрина + подсветка карточки.
=============================================================== */
.case--photo{
  padding: 0 !important;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.case--photo .case__shot{
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: var(--band);
  z-index: 0;
  opacity: 1 !important;   /* перекрывает старое hover-preview opacity:0 */
}
.case--photo .case__shot::after{ display: none !important; }  /* убираем градиент затемнения из варианта B */
.case--photo .case__shot img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  transition: transform 0.4s ease;
}
.case--photo:hover .case__shot img{ transform: scale(1.04); }
.case--photo:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.10);
  border-color: transparent !important;
}
.case--photo .case__body{
  padding: 22px 24px 24px;
  display: flex; flex-direction: column;
  gap: 12px;
  flex: 1;
}
.case--photo .case__kpi{ margin-top: auto; }

/* ===============================================================
   BLOG CATEGORIES (2026-09-16 v7)
   Chip-фильтр над списком статей + метки категорий на карточках
   и в hero каждого поста.
=============================================================== */

.blog-filter{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 32px;
}
.blog-filter__chip{
  display: inline-flex; align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
  color: var(--fg);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1;
}
.blog-filter__chip:hover{
  background: var(--acc);
  border-color: var(--acc);
  color: var(--fg);
}
.blog-filter__chip.is-active{
  background: var(--fg);
  border-color: var(--fg);
  color: #fff;
}
.blog-filter__chip.is-active:hover{
  background: var(--acc);
  border-color: var(--acc);
  color: var(--fg);
}

/* Метка категории на post-card */
.post-card{ position: relative; }
.post-card__cat{
  display: inline-block;
  padding: 4px 10px;
  background: var(--band);
  border-radius: 6px;
  font-size: 11px; font-weight: 700;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  margin-right: 10px;
  vertical-align: middle;
}
.post-card__date{
  display: inline-block;
  font-size: 13px;
  color: var(--mute);
  vertical-align: middle;
}

/* Chip категории в hero поста (под H1) */
.post-cat-tag{
  display: inline-block;
  margin-top: 14px;
  padding: 6px 14px;
  background: var(--acc);
  color: var(--fg);
  border-radius: 100px;
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.post-cat-tag:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(212,255,0,0.4);
}

/* Lead под H1 на /blog/ и /blog/category/... */
.article-hero__lead{
  color: var(--mute); font-size: 17px; line-height: 1.5;
  max-width: 720px; margin: 12px 0 0;
}


/* ===============================================================
   INFOGRAPHICS (2026-09-16 v8) — timeline, growth chart, vs-block
=============================================================== */

/* Timeline / Process */
.step{ position: relative; }
.step__head{
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.step__num-circle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--acc);
  color: var(--fg);
  font-weight: 800; font-size: 15px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.step__icon{
  width: 24px; height: 24px;
  color: var(--acc);
}
.section--dark .step__icon{ color: var(--acc); }
.step__num{
  display: block;
  font-size: 11px; font-weight: 700;
  color: var(--acc);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
/* Connector line — на десктопе между step'ами */
@media (min-width: 900px){
  .process-grid{ position: relative; }
  .process-grid::before{
    content: '';
    position: absolute;
    top: 21px; /* центр step__num-circle */
    left: 21px; right: 21px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(212,255,0,0.25) 8%, rgba(212,255,0,0.25) 92%, transparent 100%);
    z-index: 0;
  }
  .step{ background: var(--dark); z-index: 1; padding-top: 0; }
  .step__num-circle{ box-shadow: 0 0 0 6px var(--dark); }
}

/* Growth chart в цитате */
.growth-chart{
  margin-top: 28px;
  padding: 20px 24px 16px;
  background: var(--band);
  border-radius: 16px;
  max-width: 620px;
  margin-left: auto; margin-right: auto;
}
.growth-chart svg{ width: 100%; height: auto; display: block; }
.growth-chart__cap{
  text-align: center;
  color: var(--mute);
  font-size: 12px;
  margin-top: 4px;
}

/* SEO vs Контекст — 2 колонки */
.vs-grid{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.vs-col{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 28px 24px;
  display: flex; flex-direction: column;
}
.vs-col__head{ margin-bottom: 20px; }
.vs-col__badge{
  display: inline-block;
  padding: 4px 12px;
  background: var(--acc);
  color: var(--fg);
  border-radius: 6px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.vs-col__badge--ctx{ background: var(--fg); color: #fff; }
.vs-col__title{
  font-size: 22px; font-weight: 800;
  margin: 0; letter-spacing: -0.01em;
}
.vs-list{
  list-style: none; padding: 0; margin: 0 0 20px;
  flex: 1;
}
.vs-list li{
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  align-items: baseline;
}
.vs-list li:first-child{ border-top: 0; }
.vs-list__k{ color: var(--mute); flex-shrink: 0; }
.vs-list__v{
  color: var(--fg); font-weight: 600; text-align: right;
}
.vs-good{ color: #2e7d1b; }
.vs-col__bar{
  height: 8px;
  background: var(--band);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}
.vs-col__bar-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--acc), #b8e600);
  border-radius: 4px;
  transition: width 0.6s ease;
}
.vs-col__bar-cap{
  font-size: 11px; color: var(--mute);
  margin-top: 6px;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600;
}
.vs-hint{
  margin-top: 24px;
  padding: 20px 24px;
  background: var(--fg);
  color: #d4d4d4;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.55;
}
@media (max-width: 900px){
  .vs-grid{ grid-template-columns: 1fr; }
  .vs-col{ padding: 22px 22px 20px; }
}

/* ===============================================================
   LOGO DOT + FAVICON HELPERS  (2026-09-16 v12)
=============================================================== */
.nav__logo{
  position: relative;
  padding-right: 14px;
  display: inline-flex; align-items: center;
  font-weight: 800; font-size: 22px; letter-spacing: -0.02em;
  color: var(--fg); text-decoration: none;
}
.nav__logo-text{ display:inline-block; }
.nav__logo-dot{
  position: absolute;
  right: 0; bottom: 5px;
  width: 8px; height: 8px;
  background: var(--acc);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(212,255,0,0.25);
}
.mstl-foot__logo{ position: relative; padding-right: 12px; display:inline-flex; align-items:center; }
.mstl-foot__logo-dot{
  position: absolute; right: 0; bottom: 4px;
  width: 7px; height: 7px;
  background: var(--acc);
  border-radius: 50%;
}

/* ===============================================================
   CARDS-2 — сетка на 2 карточки услуг (после удаления «Контекст»)
=============================================================== */
.cards-2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 720px){
  .cards-2{ grid-template-columns: 1fr; }
}

/* ===============================================================
   MOBILE READABILITY — 2026-09-16 v12
   Визуальное разделение секций на моб без серых band'ов
   (по правилу [[2026-09-16]] — тонкая линия + больше воздуха + контрастный eyebrow)
=============================================================== */
@media (max-width: 720px){
  /* Тонкая граница между смежными белыми секциями */
  section + section:not(.section--dark):not(.big-cta):not(.quote-block){
    border-top: 1px solid var(--line);
  }
  /* Больше вертикального воздуха на моб */
  .section{ padding: 56px 0 !important; }
  .metrics{ padding: 32px 0 48px !important; border-bottom: 1px solid var(--line); }
  .quote-block{ padding: 48px 0 !important; border-top: 1px solid var(--line); }
  /* Более крупный H2 на моб */
  .section__title{ font-size: clamp(28px, 6.5vw, 36px) !important; }
  /* Eyebrow — темный chip с лаймовой левой границей */
  .section__eyebrow{
    display: inline-block;
    padding: 6px 12px 6px 10px;
    background: var(--fg); color: #fff;
    border-radius: 6px;
    border-left: 4px solid var(--acc);
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
  }
  .section--dark .section__eyebrow{
    background: var(--acc); color: var(--fg);
    border-left-color: #fff;
  }
  /* Карусель — увеличиваем видимость свайпа */
  .cases-scroll__track > .case{ flex-basis: min(320px, 88vw); }
  .cases-scroll__track{ padding-bottom: 32px; }
  /* Scroll-hint под каруселью */
  .cases-scroll::after{
    content: '';
    position: absolute;
    bottom: 8px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    background: var(--line);
    border-radius: 2px;
    opacity: 1;
  }
  .cases-scroll::before{ display: none; }
}

/* ===============================================================
   PRICE grid — более пружинистый layout на десктопе
=============================================================== */
.price-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.price{
  padding: 32px 28px 28px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #fff;
  display: flex; flex-direction: column;
  gap: 8px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.price:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  border-color: transparent;
}
.price--highlight{
  background: var(--fg);
  color: #fff;
  border-color: var(--fg);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.14);
  position: relative;
}
.price--highlight::before{
  content: 'Популярный';
  position: absolute;
  top: -12px; left: 24px;
  background: var(--acc); color: var(--fg);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em;
}
.price--highlight ul li{ color: #d4d4d4; border-color: #1f1f1f; }
.price--highlight .price__label,
.price--highlight .price__cadence{ color: #b0b0b0; }
.price__label{ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); }
.price__num{ font-size: 44px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; margin: 6px 0 2px; }
.price__num sup{ font-size: 14px; font-weight: 700; color: var(--mute); vertical-align: super; margin-left: 4px; }
.price--highlight .price__num sup{ color: #b0b0b0; }
.price__cadence{ font-size: 13px; color: var(--mute); margin-bottom: 12px; }
.price ul{ list-style: none; padding: 0; margin: 6px 0 20px; flex: 1; }
.price ul li{ padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.price ul li:first-child{ border-top: 0; }
.price .btn{ margin-top: auto; }

@media (max-width: 1024px){ .price-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .price-grid{ grid-template-columns: 1fr; } .price--highlight{ transform: none; } }

/* ===============================================================
   CARDS-2 WIDE + SERVICE HORIZONTAL  (2026-09-16 v13)
   Компактный layout секции «Что делаем» — плитки во всю ширину,
   иконка слева, текст справа.
=============================================================== */
.cards-2--wide{
  max-width: none !important;
  gap: 24px !important;
}
.service--horizontal{
  flex-direction: row !important;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 32px !important;
}
.service--horizontal .service__icon{
  flex-shrink: 0;
  width: 56px; height: 56px;
  margin-top: 4px;
}
.service--horizontal .service__body{
  display: flex; flex-direction: column;
  gap: 10px;
  flex: 1;
}
.service--horizontal .service__title{ margin: 0; }
.service--horizontal .service__desc{ margin: 0; }
.service--horizontal .service__more{ margin-top: 6px; }
@media (max-width: 640px){
  .service--horizontal{
    flex-direction: column !important;
    gap: 14px;
    padding: 22px 22px !important;
  }
}

/* ===============================================================
   SERVICE PRICE CHIPS (v14)
=============================================================== */
.service__prices{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.service__price-chip{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  background: var(--band);
  border-radius: 100px;
  font-size: 12px;
  color: var(--mute);
  line-height: 1.4;
  white-space: nowrap;
}
.service__price-chip b{
  color: var(--fg);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.service__price-chip--acc{
  background: var(--fg);
  color: #d4d4d4;
}
.service__price-chip--acc b{
  color: var(--acc);
}

/* ===============================================================
   DASHBOARD MOCKUP — эпичная секция роста (v14)
=============================================================== */
.dashboard-section{ position: relative; }
.dashboard-section::before{
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 90% 20%, rgba(212,255,0,0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.dashboard-section > .wrap{ position: relative; z-index: 1; }

.dashboard{
  margin-top: 32px;
  background: #fff;
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px rgba(0,0,0,0.08), 0 10px 30px rgba(0,0,0,0.04);
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
}
.dashboard__head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.dashboard__brand{ display: flex; align-items: center; gap: 12px; }
.dashboard__logo{
  width: 40px; height: 40px;
  background: var(--band);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.dashboard__logo svg{ width: 24px; height: 24px; }
.dashboard__title{ font-size: 15px; font-weight: 700; color: var(--fg); letter-spacing: -0.01em; }
.dashboard__sub{ font-size: 12px; color: var(--mute); margin-top: 2px; }
.dashboard__period{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--band);
  border-radius: 100px;
  font-size: 12px; color: var(--mute); font-weight: 600;
}
.dashboard__dot{
  width: 8px; height: 8px;
  background: #2e7d1b;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(46,125,27,0.2);
  animation: pulseGreen 2s ease-in-out infinite;
}
@keyframes pulseGreen{
  0%,100%{ box-shadow: 0 0 0 3px rgba(46,125,27,0.2); }
  50%{ box-shadow: 0 0 0 6px rgba(46,125,27,0.08); }
}

/* Metrics row */
.dashboard__metrics{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.dm{
  background: var(--band);
  border-radius: 14px;
  padding: 14px 16px 12px;
  display: flex; flex-direction: column;
  gap: 6px;
  min-height: 106px;
  position: relative;
  overflow: hidden;
}
.dm__label{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute); font-weight: 700; }
.dm__row{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dm__value{ font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--fg); }
.dm__delta{
  font-size: 12px; font-weight: 700;
  color: #2e7d1b;
  background: rgba(46,125,27,0.1);
  padding: 3px 8px;
  border-radius: 6px;
}
.dm__spark{ width: 100%; height: 32px; margin-top: 4px; display: block; }

/* Main chart */
.dashboard__chart{
  background: var(--band);
  border-radius: 14px;
  padding: 20px 20px 12px;
}
.dashboard__chart-head{
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  margin-bottom: 12px;
}
.dashboard__chart-label{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute); font-weight: 700; }
.dashboard__chart-value{
  font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--fg);
  margin-top: 4px;
}
.dashboard__chart-value span{
  font-size: 12px; font-weight: 500; color: var(--mute);
  margin-left: 8px;
}
.dashboard__legend{ display: flex; gap: 16px; }
.dashboard__legend-item{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--mute); font-weight: 600;
}
.dashboard__swatch{ width: 12px; height: 12px; border-radius: 3px; }
.dashboard__swatch--bar{ background: var(--fg); }
.dashboard__swatch--line{ background: var(--acc); height: 3px; }
.dashboard__chart-svg{ width: 100%; height: auto; display: block; }

/* Footer stats */
.dashboard__footer{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-top: 8px;
}
.dashboard__foot-item{
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px;
  border-left: 3px solid var(--acc);
  background: var(--band);
  border-radius: 0 10px 10px 0;
  font-size: 12px; color: var(--mute); font-weight: 600;
  line-height: 1.4;
}
.dashboard__foot-item b{
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}

@media (max-width: 900px){
  .dashboard__metrics{ grid-template-columns: repeat(2,1fr); }
  .dashboard__footer{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
  .dashboard{ padding: 20px 18px 24px; border-radius: 16px; }
  .dashboard__head{ flex-direction: column; align-items: flex-start; }
  .dashboard__metrics{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .dashboard__footer{ grid-template-columns: 1fr; }
  .dm{ min-height: auto; padding: 12px 14px; }
  .dm__value{ font-size: 20px; }
  .dashboard__chart{ padding: 16px 12px 8px; }
}

/* ================================================================
   ANIMATED HERO — dark theme + particle net + growth graph
   v15 · adds this block, prior mstl.css untouched.
   Applies to .hero and .article-hero (all pages, all layouts).
================================================================ */

.hero, .article-hero{
  position:relative; overflow:hidden;
  background: radial-gradient(1200px 700px at 15% 30%, rgba(30,45,20,.45), transparent 60%), #0a0a0a;
  color:#fff;
  z-index:0;
}
.hero{ padding: 120px 0 80px; min-height: auto; display:block; }
body.is-home .hero{ padding: 140px 0 120px; min-height: 100vh; display:flex; align-items:center; }
.article-hero{ padding: 120px 0 80px; min-height: auto; }
body.is-case .hero{ padding: 120px 0 60px; min-height: auto; display:block; }
.hero > .wrap, .hero > .hero__inner, .article-hero > .wrap{ position:relative; z-index:2; width:100%; }

/* dark theme text colors */
.hero h1, .hero .hero__h1, .article-hero h1{ color:#fff; }
.hero p, .hero p.lead, .hero .lead, .article-hero p, .article-hero__lead{ color: rgba(255,255,255,.72); }
.hero__sub{ font-size: clamp(16px, 1.25vw, 20px); max-width:640px; margin:0 0 40px; line-height:1.55; color: rgba(255,255,255,.72); }
.article-hero h1{ font-size: clamp(30px, 4.5vw, 44px); }
.article-hero .meta{ color: rgba(255,255,255,.6); }
.article-hero .meta span+span::before{ color: rgba(255,255,255,.35); }
.article-hero__lead{ color: rgba(255,255,255,.72); }
body.is-case .hero div[style*="color:var(--mute)"]{ color: rgba(255,255,255,.6); }
body.is-case .hero div[style*="color:var(--mute)"] a.link{ color:#d4ff00; }
body.is-case .hero div[style*="color:var(--mute)"] a.link:hover{ color:#e4ff40; }

/* Particle canvas + growth SVG */
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.55; pointer-events:none; }
.hero__graph{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.hero__graph path.line{
  fill:none; stroke:#d4ff00; stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
  filter: drop-shadow(0 0 10px rgba(212,255,0,.65)) drop-shadow(0 0 28px rgba(212,255,0,.3));
  stroke-dasharray:3200; stroke-dashoffset:3200;
  animation: heroDraw 4.2s cubic-bezier(.6,.15,.2,1) .4s forwards, heroPulse 6s ease-in-out 5s infinite;
}
.hero__graph path.fill{ fill:url(#gradFill); stroke:none; opacity:0; animation: heroFade 1.2s ease-out 3.8s forwards; }
.hero__graph circle{ fill:#d4ff00; opacity:0; transform-origin:center; animation: heroPop .4s cubic-bezier(.5,1.6,.4,1) forwards; }
.hero__graph circle:nth-of-type(1){ animation-delay: 1.1s }
.hero__graph circle:nth-of-type(2){ animation-delay: 1.9s }
.hero__graph circle:nth-of-type(3){ animation-delay: 2.7s }
.hero__graph circle:nth-of-type(4){ animation-delay: 3.5s }
.hero__graph circle:nth-of-type(5){ animation-delay: 4.3s }
@keyframes heroDraw{ to { stroke-dashoffset:0 } }
@keyframes heroPulse{
  0%,100%{ filter: drop-shadow(0 0 10px rgba(212,255,0,.65)) drop-shadow(0 0 28px rgba(212,255,0,.3)) }
  50%{ filter: drop-shadow(0 0 18px rgba(212,255,0,.9)) drop-shadow(0 0 44px rgba(212,255,0,.5)) }
}
@keyframes heroFade{ to { opacity:1 } }
@keyframes heroPop{ 0%{ opacity:0; transform:scale(.4) } 100%{ opacity:1; transform:scale(1) } }
@keyframes heroBlink{ 50%{ opacity:.35 } }
@keyframes heroCursor{ 50%{ opacity:0 } }

.hero__inner{ padding: 140px 0 120px; width:100%; }

.hero__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.18); border-radius:100px;
  font-size:13px; color:rgba(255,255,255,.82);
  margin-bottom:24px; font-weight:500;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hero__badge::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:#d4ff00; box-shadow:0 0 10px #d4ff00;
  animation: heroBlink 2s ease-in-out infinite;
}
.hero__badge b{ color:#d4ff00; font-weight:600; }

.hero__h1{
  font-size: clamp(38px, 6vw, 76px); line-height:1.02;
  font-weight:800; letter-spacing:-0.02em;
  margin:0 0 24px; max-width:900px; color:#fff;
}
.hero__h1 .accent{ color:#d4ff00; background:none; padding:0; border-radius:0; }
.hero__cursor{
  display:inline-block; width:.06em; background:#d4ff00; margin-left:.04em;
  animation: heroCursor 1s step-end infinite;
  height:.85em; transform:translateY(.05em);
}

/* KPI cards on dark hero (case longreads) */
.hero .kpi{ margin: 32px 0; }
.hero .kpi .card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  box-shadow: none;
}
.hero .kpi .card:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.hero .kpi .num{ color:#fff; }
.hero .kpi .cap{ color: rgba(255,255,255,.7); }

/* Buttons on dark hero */
.hero a.btn:not(.btn--primary):not(.btn--ghost):not(.ghost){
  background:#d4ff00; color:#0a0a0a;
}
.hero a.btn:hover{ background:#e4ff40; color:#0a0a0a; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(212,255,0,.35); }
.hero a.btn.ghost{ background: transparent; border:1px solid rgba(255,255,255,.28); color:#fff; }
.hero a.btn.ghost:hover{ border-color:#d4ff00; color:#d4ff00; background: transparent; }
.hero .btn--primary{ background:#d4ff00; color:#0a0a0a; }
.hero .btn--primary:hover{ background:#e4ff40; color:#0a0a0a; transform:translateY(-2px); box-shadow: 0 8px 28px rgba(212,255,0,.35); }
.hero .btn--ghost{ background:transparent; border:1px solid rgba(255,255,255,.28); color:#fff; }
.hero .btn--ghost:hover{ border-color:#d4ff00; color:#d4ff00; background:transparent; }

/* Blog-post + privacy hero: no .wrap, direct h1 — apply padding to inner content */
.hero > h1, .hero > .meta{ position:relative; z-index:2; max-width:1152px; margin-left:auto; margin-right:auto; padding-left:24px; padding-right:24px; }
.hero > .meta{ color: rgba(255,255,255,.6); }

/* Corner labels + floats (main page only) */
.hero__label{
  position:absolute; left:24px; bottom:24px;
  font-size:11px; letter-spacing:.14em;
  color:rgba(255,255,255,.4); text-transform:uppercase; z-index:3;
}
.hero__label b{ color:#d4ff00; font-weight:600; }
.hero__floats{
  position:absolute; right:24px; bottom:24px;
  display:flex; gap:24px; z-index:3;
}
.hero__float{ text-align:right; }
.hero__float b{
  display:block; font-size:22px; font-weight:800;
  color:#d4ff00; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-0.01em;
}
.hero__float span{
  font-size:11px; letter-spacing:.1em;
  color:rgba(255,255,255,.5);
  text-transform:uppercase; margin-top:4px; display:inline-block;
}
@media (max-width:900px){ .hero__floats{ display:none } }
@media (max-width:640px){
  .hero{ padding: 100px 0 60px; min-height: auto; }
  .hero__inner{ padding: 100px 0 60px }
  .article-hero{ padding: 100px 0 60px }
  body.is-case .hero{ padding: 100px 0 40px }
  .hero__label{ left: 16px; bottom: 16px }
}
@media (prefers-reduced-motion: reduce){
  .hero__graph path.line{ animation:none; stroke-dashoffset:0 }
  .hero__graph path.fill{ opacity:1; animation:none }
  .hero__graph circle{ opacity:1; animation:none }
  .hero__badge::before{ animation:none }
  .hero__cursor{ animation:none }
}

/* Crumbs (breadcrumbs on portfolio listing) still appear ABOVE .article-hero on light bg.
   Leave them as-is — user sees them on white before hero. */

/* ================================================================
   NAV ADAPTIVE — transparent over dark hero, opaque on scroll
   Toggled by hero.js via body class or nav.is-scrolled.
================================================================ */
/* Default state (over dark hero) — solid dark, matches hero base color #0a0a0a.
   Above it: particle canvas (mirrors hero vibe) + animated lime accent line at the bottom edge. */
.nav{
  background: #0a0a0a !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background 0.25s ease, box-shadow 0.25s ease;
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: hidden;
}
/* particle layer, mounted by hero.js */
.nav__canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: .5;
  pointer-events: none;
  transition: opacity .3s ease;
}
.nav .wrap, .nav__mob-menu{ position: relative; z-index: 3; }

/* animated lime line at the bottom of nav — mirrors the hero growth graph */
.nav::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212,255,0,0.0) 10%,
    rgba(212,255,0,0.9) 45%,
    rgba(212,255,0,1) 55%,
    rgba(212,255,0,0.0) 90%,
    transparent 100%);
  background-size: 220% 100%;
  background-position: -110% 0;
  animation: navLineSweep 5.5s cubic-bezier(.55,.15,.35,.9) infinite;
  filter: drop-shadow(0 0 10px rgba(212,255,0,.7)) drop-shadow(0 0 22px rgba(212,255,0,.35));
  z-index: 2;
  pointer-events: none;
}
@keyframes navLineSweep{
  0%   { background-position: -120% 0; opacity: .35; }
  40%  { background-position: 20% 0; opacity: 1; }
  70%  { background-position: 110% 0; opacity: 1; }
  100% { background-position: 220% 0; opacity: .35; }
}
.nav__logo, .nav__logo-text{ color: #fff !important; transition: color 0.25s ease; }
.nav__logo-dot{ background: #d4ff00; box-shadow: 0 0 8px rgba(212,255,0,.5); }
.nav__links a{ color: rgba(255,255,255,.72) !important; }
.nav__links a:hover, .nav__links a.is-active{ color: #fff !important; }
.nav__burger span{ background: #fff !important; }

/* Scrolled state (over light content) — solid white, matches body #fff.
   Hide particle canvas + animated lime line — nav becomes plain white. */
.nav.is-scrolled{
  background: #ffffff !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
}
.nav.is-scrolled .nav__canvas{ opacity: 0; }
.nav.is-scrolled::after{ opacity: 0; animation: none; }
.nav.is-scrolled .nav__logo, .nav.is-scrolled .nav__logo-text{ color: var(--fg) !important; }
.nav.is-scrolled .nav__logo-dot{ box-shadow: none; }
.nav.is-scrolled .nav__links a{ color: var(--mute) !important; }
.nav.is-scrolled .nav__links a:hover, .nav.is-scrolled .nav__links a.is-active{ color: var(--fg) !important; }
.nav.is-scrolled .nav__burger span{ background: var(--fg) !important; }

/* Mobile menu — dark when nav is over hero, light otherwise */
.nav__mob-menu{ background: #0a0a0a; border-bottom-color: rgba(255,255,255,.08); }
.nav__mob-menu a{ color: #fff; border-bottom-color: rgba(255,255,255,.06); }
.nav.is-scrolled ~ .nav__mob-menu,
.nav.is-scrolled .nav__mob-menu{ background: #fff; border-bottom-color: var(--line); }
.nav.is-scrolled ~ .nav__mob-menu a,
.nav.is-scrolled .nav__mob-menu a{ color: var(--fg); border-bottom-color: var(--line); }

/* ================================================================
   SERVICE ACCORDION (details/summary) — for /uslugi/ раскрывающиеся карточки
================================================================ */
.service-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 900px){ .service-list{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .service-list{ grid-template-columns: 1fr; gap: 14px; } }

details.service-item{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
details.service-item:hover{
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.08);
}
details.service-item[open]{
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  border-color: var(--acc);
}

details.service-item > summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0;
  margin: 0;
}
details.service-item > summary::-webkit-details-marker{ display: none; }
details.service-item > summary::marker{ content: ''; display: none; }

.service-item__icon{
  width: 44px; height: 44px; flex: 0 0 44px;
  background: var(--band);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
details.service-item[open] .service-item__icon{ background: var(--acc); }
.service-item__icon svg{ width: 22px; height: 22px; color: var(--fg); }

.service-item__head{ flex: 1; min-width: 0; }
.service-item__title{
  font-size: 19px; font-weight: 700;
  margin: 0 0 6px; color: var(--fg);
  letter-spacing: -0.01em; line-height: 1.25;
}
.service-item__short{
  color: var(--mute); font-size: 15px;
  line-height: 1.45; margin: 0;
}

.service-item__toggle{
  flex: 0 0 24px; margin-top: 8px; color: var(--mute-2);
  transition: transform .25s ease, color .2s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.service-item__toggle svg{ width: 20px; height: 20px; }
details.service-item[open] .service-item__toggle{
  transform: rotate(180deg); color: var(--fg);
}

.service-item__body{
  padding: 18px 0 0;
  margin-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--fg);
  animation: serviceOpen .2s ease-out;
}
@keyframes serviceOpen{
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.service-item__body p{
  margin: 0 0 12px; font-size: 15px;
  line-height: 1.6; color: var(--mute);
}
.service-item__body p:last-child{ margin-bottom: 0; }
.service-item__body ul{
  margin: 8px 0 12px; padding: 0 0 0 18px;
  font-size: 15px; color: var(--fg);
}
.service-item__body ul li{ margin-bottom: 6px; line-height: 1.5; }
.service-item__body ul li b{ color: var(--fg); font-weight: 700; }

.service-item__meta{
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 16px;
}
.service-item__chip{
  padding: 6px 12px;
  background: var(--band); border-radius: 100px;
  font-size: 13px; color: var(--mute); font-weight: 500;
  white-space: nowrap;
}
.service-item__chip b{ color: var(--fg); font-weight: 700; }
.service-item__chip--acc{ background: var(--acc); color: var(--fg); }
.service-item__chip--acc b{ color: var(--fg); }

.service-item__link{
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px; color: var(--fg); font-weight: 600;
  font-size: 14px; text-decoration: none;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}
.service-item__link:hover{ color: #333; border-color: #333; }

.service-item__pic{
  margin: 16px 0 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.service-item__pic img{
  width: 100%; height: auto; display: block;
}

/* ================================================================
   PORTFOLIO PAGE — full-screen hero + 2×4 grid of larger cases
   Only for body.is-portfolio (page-scoped)
================================================================ */
body.is-portfolio .hero{
  min-height: 100vh;
  padding: 120px 0 120px;
  display: flex;
  align-items: center;
}
body.is-portfolio .hero > .wrap{ width: 100%; }
body.is-portfolio .hero__crumbs{
  font-size: 13px;
  color: rgba(255,255,255,.5);
  margin-bottom: 20px;
  letter-spacing: .04em;
}
body.is-portfolio .hero__crumbs a{
  color: rgba(255,255,255,.55);
  transition: color .15s ease;
}
body.is-portfolio .hero__crumbs a:hover{ color: #d4ff00; }
body.is-portfolio .hero__ctas{
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 12px;
}
body.is-portfolio .hero__ctas .btn{
  padding: 16px 28px;
  border-radius: 100px;
  font-weight: 600; font-size: 15px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

/* Scroll hint at the bottom of hero — pulsing arrow */
.hero__scroll-hint{
  position: absolute;
  left: 50%; bottom: 32px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  color: rgba(255,255,255,.5);
  transition: color .2s ease;
  animation: heroBob 2.4s ease-in-out infinite;
}
.hero__scroll-hint:hover{ color: #d4ff00; }
.hero__scroll-hint svg{ width: 28px; height: 28px; }
.hero__scroll-hint span{
  display: block; width: 1px; height: 28px;
  background: linear-gradient(to bottom, transparent, rgba(212,255,0,.6));
}
@keyframes heroBob{
  0%,100%{ transform: translate(-50%, 0); }
  50%{ transform: translate(-50%, 8px); }
}
@media (max-width: 640px){
  .hero__scroll-hint{ bottom: 16px; }
  .hero__scroll-hint svg{ width: 22px; height: 22px; }
}

/* 3-in-a-row grid of cases — desktop; steps down responsively */
body.is-portfolio .cases-grid{
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px;
}
body.is-portfolio .case--photo .case__shot{
  height: 260px;
}
body.is-portfolio .case__title{
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.01em;
}
body.is-portfolio .case__desc{
  font-size: 15px;
  line-height: 1.5;
}
body.is-portfolio .case__body{
  padding: 22px 22px 24px;
  gap: 12px;
  display: flex;
  flex-direction: column;
}
body.is-portfolio .case__tag{
  font-size: 12px;
  margin-bottom: 4px;
}
body.is-portfolio .case__kpi{
  padding-top: 18px;
  gap: 22px;
  margin-top: auto;
}
body.is-portfolio .case__kpi-item{
  font-size: 13px;
}
body.is-portfolio .case__kpi-item b{
  font-size: 24px;
  margin-bottom: 2px;
}
@media (max-width: 900px){
  body.is-portfolio .cases-grid{ grid-template-columns: repeat(2, 1fr) !important; }
  body.is-portfolio .case--photo .case__shot{ height: 240px; }
}
@media (max-width: 560px){
  body.is-portfolio .cases-grid{ grid-template-columns: 1fr !important; gap: 16px; }
  body.is-portfolio .case--photo .case__shot{ height: 220px; }
}

/* ================================================================
   CLIENTS marquee — на главной, секция "С кем работали"
   Бесконечная бегущая лента с текстовыми лого клиентов.
================================================================ */
.section.clients{ padding: 100px 0 100px; }
.clients__marquee{
  overflow: hidden;
  margin-top: 48px;
  padding: 24px 0;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.clients__track{
  display: flex;
  gap: 20px;
  width: max-content;
  animation: clientsMarquee 45s linear infinite;
}
.clients__marquee:hover .clients__track{ animation-play-state: paused; }
@keyframes clientsMarquee{
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.client-tile{
  flex: 0 0 auto;
  width: 240px;
  height: 140px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  text-decoration: none;
}
.client-tile:hover{
  border-color: #0a0a0a;
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
.client-tile__logo{
  max-width: 100%;
  max-height: 56px;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
  opacity: .7;
  transition: filter .25s ease, opacity .25s ease;
}
.client-tile:hover .client-tile__logo{
  filter: grayscale(0%);
  opacity: 1;
}
.client-tile__niche{
  font-size: 12px;
  color: var(--mute);
  letter-spacing: .02em;
  text-align: center;
  line-height: 1.3;
  transition: color .25s ease;
}
.client-tile:hover .client-tile__niche{ color: var(--fg); }
@media (max-width: 640px){
  .client-tile{ width: 200px; height: 120px; padding: 18px 22px; }
  .client-tile__logo{ max-height: 44px; }
  .clients__track{ animation-duration: 30s; }
}
@media (prefers-reduced-motion: reduce){
  .clients__track{ animation: none; }
  .clients__marquee{ overflow: auto; }
}

/* ================================================================
   OWNER — блок "Кто ведёт проекты" (E-E-A-T: Expertise + Experience)
================================================================ */
.section.owner{ padding: 100px 0; }
.owner__grid{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 60px;
  align-items: start;
  margin-top: 48px;
}
/* SEO-copy block at the bottom of pages */
.seo-copy{
  padding: 60px 0 80px;
  background: #0a0a0a;
  color: rgba(255,255,255,.72);
  border-top: 1px solid rgba(255,255,255,.08);
}
.seo-copy__title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 20px;
  max-width: 900px;
}
.seo-copy__body{
  max-width: 900px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.55);
}
.seo-copy__body p{ margin: 0 0 12px; }
.seo-copy__body strong{ color: rgba(255,255,255,.85); font-weight: 700; }
.owner__avatar{
  width: 260px; height: 260px;
  border-radius: 24px;
  overflow: hidden;
  background: #0a0a0a;
}
.owner__avatar svg{ width: 100%; height: 100%; display: block; }
.owner__body{ padding-top: 8px; }
.owner__name{
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--fg);
}
.owner__role{
  font-size: 15px;
  color: var(--mute);
  margin: 0 0 24px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.owner__bio{
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg);
  max-width: 680px;
  margin: 0 0 28px;
}
.owner__facts{
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
}
.owner__facts li{
  font-size: 15px;
  color: var(--mute);
  line-height: 1.4;
}
.owner__facts b{
  color: var(--fg);
  font-weight: 800;
  margin-right: 4px;
}
.owner__contacts{
  display: flex; gap: 12px; flex-wrap: wrap;
}
.owner__contact{
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: 100px;
  background: #f4f4f4;
  color: var(--fg);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.owner__contact:hover{
  background: #0a0a0a;
  color: #d4ff00;
  transform: translateY(-1px);
}
@media (max-width: 780px){
  .owner__grid{ grid-template-columns: 1fr; gap: 24px; }
  .owner__avatar{ width: 200px; height: 200px; margin: 0 auto; }
  .owner__body{ text-align: center; }
  .owner__facts{ text-align: left; }
  .owner__contacts{ justify-content: center; }
}

/* ================================================================
   TESTIMONIALS — отзывы клиентов (E-E-A-T: Trust)
================================================================ */
.section.testimonials{ padding: 100px 0; }
.testimonials__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.testimonial{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 28px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.testimonial:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
  border-color: transparent;
}
.testimonial::before{
  content: '"';
  position: absolute;
  top: 8px; left: 22px;
  font-size: 78px;
  line-height: 1;
  color: var(--acc);
  font-family: Georgia, serif;
  font-weight: 700;
}
.testimonial blockquote{
  margin: 0;
  padding: 20px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  font-style: normal;
  flex: 1;
}
.testimonial figcaption{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.testimonial__author{
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
}
.testimonial__meta{
  font-size: 13px;
  color: var(--mute);
}
.testimonial__meta a{
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--acc);
  text-underline-offset: 3px;
}
.testimonial__meta a:hover{ color: var(--acc); }
@media (max-width: 900px){
  .testimonials__grid{ grid-template-columns: 1fr; gap: 16px; }
}

/* ================================================================
   TOP-STRIP — тонкая полоска над nav с цифрами и CTA (E-E-A-T якорь)
================================================================ */
.top-strip{
  position: relative;
  z-index: 101;
  background: #0a0a0a;
  color: rgba(255,255,255,.6);
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.top-strip .wrap{
  display: flex; align-items: center;
  gap: 14px; flex-wrap: wrap;
}
.top-strip__item{
  color: rgba(255,255,255,.65);
  letter-spacing: .01em;
  white-space: nowrap;
}
.top-strip__item b{ color: #d4ff00; font-weight: 700; margin-right: 4px; }
.top-strip__dot{
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  flex: 0 0 auto;
}
.top-strip__cta{ display: none !important; } /* Vlad: убрал дубль CTA — уже есть в nav */
@media (max-width: 720px){
  .top-strip{ font-size: 12px; padding: 6px 0; }
  .top-strip .wrap{ gap: 8px; }
  .top-strip__cta{ display: none; }
  .top-strip__item:nth-child(n+4){ display: none; }
  .top-strip__dot:nth-child(n+4){ display: none; }
}

/* ================================================================
   WHY-ME — 6 карточек "Почему со мной спокойно" (E-E-A-T Trust)
================================================================ */
.section.why-me{ padding: 100px 0; }
.why__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.why__card{
  padding: 32px 28px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.why__card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  border-color: transparent;
}
.why__num{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--acc);
  background: #0a0a0a;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  align-self: flex-start;
}
.why__title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--fg);
  line-height: 1.2;
}
.why__desc{
  font-size: 15px;
  line-height: 1.55;
  color: var(--mute);
  margin: 0;
}
.why__desc a{
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--acc);
  text-underline-offset: 2px;
}
.why__desc a:hover{ color: var(--acc); }
@media (max-width: 900px){
  .why__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .why__grid{ grid-template-columns: 1fr; }
}

/* ================================================================
   BLOG-LATEST — 3 свежие статьи блога на главной (E-E-A-T Experience)
================================================================ */
.section.blog-latest{ padding: 100px 0; }
.blog-latest__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.blog-latest__card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 28px 28px;
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.blog-latest__card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  border-color: transparent;
}
.blog-latest__cat{
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg);
  background: var(--acc);
  padding: 4px 10px;
  border-radius: 6px;
  align-self: flex-start;
}
.blog-latest__date{
  font-size: 13px;
  color: var(--mute-2);
}
.blog-latest__title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--fg);
  margin: 0 0 4px;
  line-height: 1.25;
}
.blog-latest__desc{
  font-size: 15px;
  line-height: 1.55;
  color: var(--mute);
  margin: 0;
  flex: 1;
}
.blog-latest__more{
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 14px;
  color: var(--fg);
  margin-top: 8px;
}
.blog-latest__card:hover .blog-latest__more{ color: var(--acc); }
@media (max-width: 900px){
  .blog-latest__grid{ grid-template-columns: 1fr; }
}

/* ================================================================
   Fixes 2026-09-17: dark logo invert + section dividers + owner center
================================================================ */
/* Invert light logos (4kolesa is white-on-transparent) so they render dark on white tile */
.client-tile--invert .client-tile__logo{
  filter: invert(1) grayscale(1);
  opacity: .8;
}
.client-tile--invert:hover .client-tile__logo{
  filter: invert(1);
  opacity: 1;
}

/* Stronger visual separation between adjacent sections */
.section + .section:not(.section--dark):not(.section--band){
  border-top: 1px solid var(--line);
}
.section--band + .section--band{ border-top: 1px solid rgba(0,0,0,.05); }

/* Owner: single letter avatar centered */
.owner__avatar text{ dominant-baseline: middle; }

/* Site-wide breadcrumbs completely hidden — Vlad removed as noise */
.crumbs{ display: none !important; }

/* ================================================================
   Fixes 2026-09-17 v29: services 1-col, testimonials equal height,
   clients decorative graphic
================================================================ */

/* SERVICE ACCORDION — переверстка в 1 колонку (без пустоты справа) */
.service-list{
  grid-template-columns: 1fr !important;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  gap: 14px !important;
}
@media (max-width: 640px){
  .service-list{ max-width: 100%; }
}

/* TESTIMONIALS — стретч по высоте (grid по умолчанию align-items:stretch),
   но forcing внутренностей чтобы все были одинаковой visible высоты */
.testimonials__grid{ align-items: stretch; }
.testimonial{
  height: 100%;
  min-height: 320px;
}
.testimonial blockquote{ flex: 1; }
.testimonial figcaption{
  padding-top: 20px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
/* убрали автора — оставили только meta */
.testimonial__meta{
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.5;
}
.testimonial__meta a{
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--acc);
  text-underline-offset: 3px;
  font-weight: 700;
}
.testimonial__meta a:hover{ color: var(--acc); }

/* CLIENTS — декоративная SVG-линия под заголовком */
.clients__gfx{
  display: block;
  width: 100%;
  height: 80px;
  margin: 24px 0 -12px;
  max-width: 100%;
}
@media (max-width: 640px){
  .clients__gfx{ height: 50px; margin-top: 16px; }
}

/* ================================================================
   Fixes 2026-09-17 v30: mobile burger fullscreen + mobile carousels
   for why-me, testimonials, blog-latest, service-list
================================================================ */

/* Full-screen burger menu — always covers whole viewport */
.nav__mob-menu{
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh !important;
  max-height: 100vh !important;
  background: #0a0a0a !important;
  padding: 90px 24px 40px !important;
  z-index: 200 !important;
  overflow-y: auto;
  border-bottom: none !important;
}
.nav__mob-menu a{
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  display: block;
}
.nav__mob-menu a:last-child{
  border-bottom: none !important;
  margin-top: 24px;
  background: var(--acc);
  color: var(--fg) !important;
  border-radius: 100px;
  padding: 18px 26px !important;
  text-align: center;
  font-size: 17px !important;
}
/* Dedicated close button lives INSIDE the fullscreen overlay — no
   stacking-context conflicts with sticky nav's backdrop-filter. Injected
   by hero.js initMobMenuClose(). */
.nav__mob-close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  padding: 0;
  transition: background .2s ease, transform .2s ease;
}
.nav__mob-close:hover, .nav__mob-close:focus{
  background: rgba(255,255,255,.14);
  transform: scale(1.05);
  outline: none;
}
.nav__mob-close span{
  display: block;
  transform: translateY(-2px);
  font-weight: 300;
}
/* Body scroll-lock while mob-menu overlay is open — .is-menu-open is
   toggled by hero.js initMobMenuClose() via MutationObserver on menu class.
   Plus hide top-strip so it doesn't peek above the overlay on mobile. */
body.is-menu-open{
  overflow: hidden !important;
  touch-action: none;
  overscroll-behavior: contain;
}
body.is-menu-open .top-strip{ display: none !important; }

/* ============================================================
   Laptop-height hero fix — на 15" ноутах (viewport height ~720-800px)
   hero с padding 140+120 + H1 clamp(76px) + sub + CTAs + floats не помещался
   в один экран, H1 «сайтов в Минске» уползал за фолд.
   ============================================================ */
@media (max-height: 820px) and (min-width: 900px){
  body.is-home .hero{
    min-height: auto !important;
    padding: 80px 0 48px !important;
  }
  body.is-home .hero__h1{
    font-size: clamp(36px, 4.6vw, 58px) !important;
    line-height: 1.05 !important;
    margin: 12px 0 !important;
  }
  body.is-home .hero__badge{
    margin-bottom: 12px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
  }
  body.is-home .hero__sub{
    font-size: 15px !important;
    margin: 14px 0 20px !important;
    max-width: 620px !important;
  }
  body.is-home .hero__ctas{
    gap: 12px !important;
    margin-top: 18px !important;
  }
  body.is-home .hero__ctas .btn{
    padding: 12px 22px !important;
    font-size: 14px !important;
  }
  body.is-home .hero__floats{ display: none !important; }
  body.is-home .hero__label{ display: none !important; }
}
@media (max-height: 680px) and (min-width: 900px){
  body.is-home .hero{ padding: 68px 0 36px !important; }
  body.is-home .hero__h1{ font-size: clamp(32px, 4vw, 46px) !important; }
  body.is-home .hero__sub{ font-size: 14px !important; margin: 10px 0 14px !important; }
  body.is-home .top-strip{ display: none !important; }
}

/* Mobile hero — убираем min-height 100vh и flex-center, чтобы текст был
   сверху а не в середине экрана. Влад 09-18 попросил поднять текст выше. */
@media (max-width: 720px){
  body.is-home .hero{
    min-height: auto !important;
    padding: 24px 0 40px !important;
    display: block !important;
  }
  body.is-home .hero__inner{
    padding: 12px 0 0 !important;
  }
  body.is-home .hero__badge{ margin-top: 0 !important; }
}

/* ============================================================
   Floating Action Button (FAB) — «Обсудить проект» справа снизу.
   Появляется после скролла ниже hero через JS (initFab).
   ============================================================ */
.mstl-fab{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: #d4ff00;
  color: #0a0a0a;
  border: none;
  border-radius: 999px;
  font-family: 'TildaSans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
  transform: translateY(80px) scale(.9);
  opacity: 0;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease, box-shadow .2s ease;
  will-change: transform, opacity;
}
.mstl-fab.is-visible{
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.mstl-fab:hover{
  box-shadow: 0 12px 32px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.1);
  transform: translateY(-2px);
}
.mstl-fab__arrow{
  display: inline-block;
  transition: transform .2s ease;
}
.mstl-fab:hover .mstl-fab__arrow{ transform: translateX(3px); }
@media (max-width: 720px){
  .mstl-fab{
    right: 16px;
    bottom: 16px;
    padding: 12px 18px;
    font-size: 14px;
  }
  body.is-menu-open .mstl-fab{ opacity: 0 !important; pointer-events: none !important; }
}

/* ============================================================
   Quiz «Экспресс-аудит за 60 секунд» — модалка, 5 шагов
   ============================================================ */
.mstl-quiz{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.mstl-quiz[data-open="1"]{ display: flex; }
.mstl-quiz__overlay{
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,.72);
  backdrop-filter: blur(6px);
}
.mstl-quiz__box{
  position: relative;
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 20px;
  padding: 40px 36px 32px;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  max-height: 90vh;
  overflow-y: auto;
}
.mstl-quiz__close{
  position: absolute;
  top: 14px; right: 14px;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: #0a0a0a;
  border: 2px solid #0a0a0a;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  transition: .2s;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.mstl-quiz__close:hover{
  background: #d4ff00;
  border-color: #d4ff00;
  color: #0a0a0a;
  transform: scale(1.08);
}
.mstl-quiz__close span{ display: block; transform: translateY(-1px); }
.mstl-quiz__progress{
  height: 4px;
  background: #eee;
  border-radius: 999px;
  margin-bottom: 24px;
  overflow: hidden;
}
.mstl-quiz__progress-bar{
  height: 100%;
  background: #d4ff00;
  border-radius: 999px;
  transition: width .35s ease;
  width: 20%;
}
.mstl-quiz__step-num{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #999;
  font-weight: 600;
  margin-bottom: 6px;
}
.mstl-quiz__step-title{
  font-family: 'TildaSans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #0a0a0a;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.mstl-quiz__step-hint{
  font-size: 13px;
  color: #777;
  margin: 0 0 22px;
  line-height: 1.5;
}
.mstl-quiz__step{ display: none; }
.mstl-quiz__step.is-active{ display: block; }
.mstl-quiz__field{
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  color: #0a0a0a;
  background: #fafafa;
  transition: .2s;
  margin-bottom: 10px;
}
.mstl-quiz__field:focus{
  outline: none;
  border-color: #0a0a0a;
  background: #fff;
}
.mstl-quiz__options{
  display: grid;
  gap: 10px;
}
.mstl-quiz__option{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1.5px solid #e5e5e5;
  border-radius: 12px;
  cursor: pointer;
  transition: .2s;
  background: #fff;
  user-select: none;
  font-size: 14px;
  color: #0a0a0a;
  font-weight: 500;
}
.mstl-quiz__option:hover{ border-color: #0a0a0a; background: #fafafa; }
.mstl-quiz__option input{ position: absolute; opacity: 0; pointer-events: none; }
.mstl-quiz__option input:checked ~ *{ color: #0a0a0a; }
.mstl-quiz__option.is-checked{
  border-color: #0a0a0a;
  background: linear-gradient(0deg, rgba(212,255,0,.14), rgba(212,255,0,.14)), #fff;
}
.mstl-quiz__option-mark{
  width: 18px; height: 18px;
  border: 1.5px solid #ccc;
  border-radius: 4px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
}
.mstl-quiz__option.is-checked .mstl-quiz__option-mark{
  background: #0a0a0a;
  border-color: #0a0a0a;
}
.mstl-quiz__option.is-checked .mstl-quiz__option-mark::after{
  content: '';
  width: 6px;
  height: 10px;
  border: solid #d4ff00;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.mstl-quiz__option[data-type="radio"] .mstl-quiz__option-mark{ border-radius: 999px; }
.mstl-quiz__option[data-type="radio"].is-checked .mstl-quiz__option-mark::after{
  content: '';
  width: 8px;
  height: 8px;
  border: none;
  background: #d4ff00;
  border-radius: 999px;
  transform: none;
}
.mstl-quiz__nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.mstl-quiz__back{
  padding: 12px 18px;
  background: transparent;
  border: 1px solid #ddd;
  border-radius: 10px;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: .2s;
}
.mstl-quiz__back:hover{ background: #f5f5f5; color: #0a0a0a; }
.mstl-quiz__back:disabled{ opacity: .4; cursor: not-allowed; }
.mstl-quiz__next{
  padding: 12px 24px;
  background: #0a0a0a;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mstl-quiz__next:hover{ background: #d4ff00; color: #0a0a0a; }
.mstl-quiz__next:disabled{ opacity: .4; cursor: not-allowed; }
.mstl-quiz__success{
  display: none;
  text-align: center;
  padding: 20px 0;
}
.mstl-quiz__success.is-active{ display: block; }
.mstl-quiz__success svg{ margin: 0 auto 16px; display: block; }
.mstl-quiz__success h3{
  font-family: 'TildaSans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size: 24px;
  color: #0a0a0a;
  margin: 0 0 8px;
}
.mstl-quiz__success p{
  font-size: 14px;
  color: #666;
  margin: 0 0 20px;
  line-height: 1.55;
}
@media (max-width: 520px){
  .mstl-quiz__box{ padding: 32px 22px 24px; border-radius: 16px; max-height: 92vh; }
  .mstl-quiz__step-title{ font-size: 19px; }
}

/* ============================================================
   Popup form с графикой (2-column: illustration + form)
   ============================================================ */
.mstl-form__box{
  max-width: 780px !important;
}
.mstl-form__grid{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: stretch;
}
.mstl-form__illustration{
  background: #0a0a0a;
  border-radius: 12px;
  padding: 24px 20px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.mstl-form__illustration-svg{
  width: 100%;
  height: 130px;
  display: block;
  margin: 12px 0;
}
.mstl-form__illustration-eyebrow{
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #d4ff00;
  font-weight: 700;
}
.mstl-form__illustration-title,
.mstl-form__box .mstl-form__illustration-title{
  font-family: 'TildaSans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  margin: 8px 0 !important;
  letter-spacing: -.01em;
  color: #fff !important;
}
.mstl-form__illustration-facts{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  font-size: 11px;
  color: rgba(255,255,255,.75);
}
.mstl-form__illustration-facts b{
  color: #d4ff00;
  font-size: 13px;
  font-weight: 700;
}
@media (max-width: 620px){
  .mstl-form__grid{ grid-template-columns: 1fr; gap: 16px; }
  .mstl-form__illustration{ padding: 16px; }
  .mstl-form__illustration-svg{ height: 80px; }
}

/* ============================================================
   Clients vertical timeline (замена сети + marquee)
   ============================================================ */
.clients__timeline{
  max-width: 760px;
  margin: 40px auto 20px;
  padding: 0 24px;
  position: relative;
}
.clients__step{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 28px;
  padding: 6px 0 44px;
  position: relative;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
  text-decoration: none;
  color: inherit;
}
.clients__step.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.clients__step::before{
  content: '';
  position: absolute;
  left: 31px;
  top: 60px;
  bottom: -4px;
  width: 2px;
  background: repeating-linear-gradient(180deg,#dcdcdc 0 6px,transparent 6px 12px);
}
.clients__step:last-child::before{ display: none; }
.clients__step-num{
  width: 64px; height: 64px;
  border-radius: 999px;
  background: #0a0a0a;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700;
  position: relative;
  z-index: 2;
  border: 4px solid #fff;
  box-shadow: 0 0 0 1px #ebebeb, 0 4px 16px rgba(0,0,0,.06);
  font-family: 'TildaSans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  letter-spacing: -0.01em;
  transition: background .3s ease, transform .3s ease, color .3s ease;
}
.clients__step:hover .clients__step-num{
  background: #d4ff00;
  color: #0a0a0a;
  transform: scale(1.06);
}
.clients__step-body{ padding-top: 14px; }
.clients__step-name{
  font-size: 22px; font-weight: 700; color: #0a0a0a;
  margin: 0 0 4px; letter-spacing: -.01em;
  font-family: 'TildaSans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.clients__step-meta{
  font-size: 12px; color: #8a8a8a;
  text-transform: uppercase; letter-spacing: .14em;
  margin-bottom: 12px; font-weight: 600;
}
.clients__step-result{
  font-size: 15px; color: #333; line-height: 1.55;
  margin: 0;
}
.clients__step-result b{
  color: #0a0a0a;
  border-bottom: 2px solid #d4ff00;
  padding-bottom: 1px;
  font-weight: 600;
}
.clients__step-more{
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  font-size: 13px; font-weight: 600; color: #0a0a0a;
  opacity: .6;
  transition: opacity .2s ease, gap .2s ease;
}
.clients__step:hover .clients__step-more{
  opacity: 1;
  gap: 10px;
}
@media (max-width: 720px){
  .clients__timeline{
    padding: 0 20px;
    margin: 24px auto 8px;
  }
  .clients__step{
    grid-template-columns: 48px 1fr;
    gap: 20px;
    padding: 4px 0 32px;
  }
  .clients__step::before{ left: 23px; top: 48px; }
  .clients__step-num{
    width: 48px; height: 48px;
    font-size: 16px;
    border-width: 3px;
  }
  .clients__step-body{ padding-top: 8px; }
  .clients__step-name{ font-size: 18px; }
  .clients__step-result{ font-size: 14px; }
}

/* ============================================================
   Global scroll-reveal (managed by hero.js initScrollReveal)
   ============================================================ */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  [data-reveal], .clients__step{opacity:1; transform:none; transition:none}
}

/* Mobile carousels: force horizontal scroll-snap on key grids */
@media (max-width: 720px){
  .why__grid,
  .testimonials__grid,
  .blog-latest__grid{
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 14px !important;
    padding: 0 24px 24px !important;
    margin: 24px -24px 0 !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .why__grid::-webkit-scrollbar,
  .testimonials__grid::-webkit-scrollbar,
  .blog-latest__grid::-webkit-scrollbar{ display: none; }
  .why__grid > *,
  .testimonials__grid > *,
  .blog-latest__grid > *{
    flex: 0 0 82%;
    scroll-snap-align: start;
    min-width: 82%;
    height: auto;
  }
  /* Swipe hint removed — the pseudo-element attaches at the end of the
     whole section and overlaps the "Все статьи / Все кейсы" button that
     sits under the carousel. Scroll-snap + peek of the next card is
     enough of a hint on its own. */
}

/* Pagination — blog listing + category hubs (added 2026-09-19, v=46). */
.pagination{display:flex;gap:8px;justify-content:center;margin:40px auto 0;flex-wrap:wrap;font-size:14px;font-family:'TildaSans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.pagination__num,.pagination__prev,.pagination__next{padding:8px 14px;border:1px solid var(--line);border-radius:8px;color:var(--fg);text-decoration:none;transition:background .2s ease,color .2s ease;background:#fff}
.pagination__num:hover,.pagination__prev:hover,.pagination__next:hover{background:var(--fg);color:#fff}
.pagination__num.is-active,.pagination__num[aria-current="page"]{background:var(--fg);color:#fff;cursor:default;pointer-events:none}

/* Service subpage hero image (added 2026-09-21, v=47). */
.service-hero-img{max-width:1200px;margin:24px auto 0;padding:0 24px}
.service-hero-img picture,.service-hero-img img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 4px 16px rgba(10,10,10,.05)}
@media(max-width:640px){.service-hero-img{padding:0 16px;margin-top:16px}.service-hero-img picture,.service-hero-img img{border-radius:10px}}