:root{--bg:var(--color-bg);--bg2:var(--color-bg-soft);--card:var(--color-surface);--card2:var(--color-surface-raised);--line:var(--color-line);--line2:var(--color-line-soft);--max:var(--container);--ease:cubic-bezier(.22,1,.36,1);--shadow:0 26px 80px color-mix(in srgb,var(--color-black) 48%,transparent)}
/* Limit the document viewport, not the independent gallery/carousel tracks. */
html{overflow-x:hidden;overflow-x:clip}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--color-bg)}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);line-height:var(--type-line-1-5);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(circle at 50% -10%,var(--color-accent-soft),transparent 33%),radial-gradient(circle at 12% 36%,color-mix(in srgb,var(--color-accent) 5%,transparent),transparent 25%),var(--color-bg)}body:after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.25;background-image:linear-gradient(color-mix(in srgb,var(--color-text) 2.5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--color-text) 2%,transparent) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(circle at center,black,transparent 78%)}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input,textarea,select{font:inherit}::selection{background:color-mix(in srgb,var(--color-accent) 34%,transparent)}.skip-link{position:absolute;left:-999px;top:12px;background:var(--color-text);color:var(--color-black);padding:8px 12px;border-radius:var(--radius-sm);z-index:99}.skip-link:focus{left:12px}.hp{display:none!important}
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;padding:0 max(24px,calc((100vw - var(--max))/2));backdrop-filter:blur(10px);transition:.26s var(--ease);border-bottom:1px solid transparent}.topbar.is-scrolled{border-bottom-color:color-mix(in srgb,var(--color-text) 8%,transparent)}.logo{width:82px;height:74px;display:flex;align-items:center;justify-content:flex-start;flex:none;filter:drop-shadow(0 16px 28px color-mix(in srgb,var(--color-black) 75%,transparent))}.logo span{font-family:var(--font-display);font-size:var(--type-size-56px);letter-spacing:var(--type-track-neg-1em);line-height:var(--type-line-1);color:var(--color-text)}.logo img{max-width:82px;max-height:70px;object-fit:contain}.topbar nav{display:flex;align-items:center;gap:32px;color:var(--color-text);white-space:nowrap}.topbar nav a{position:relative;opacity:.92;transition:color .2s var(--ease),transform .2s var(--ease)}.topbar nav a:after{display:none}.topbar nav a:hover{color:var(--accent);opacity:1}.menu-toggle{display:none;margin-left:auto;width:44px;height:42px;background:color-mix(in srgb,var(--color-text) 4%,transparent);border:1px solid var(--color-line-strong);border-radius:var(--radius-md);color:var(--color-text);padding:0}.menu-toggle span{display:block;width:20px;height:1px;background:var(--color-text);margin:6px auto;transition:.22s var(--ease)}
.hero{position:relative;min-height:760px;display:flex;align-items:stretch;background-size:cover;background-position:center right;isolation:isolate;overflow:hidden;transform:translateZ(0);backface-visibility:hidden}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--color-black) 90%,transparent) 0%,color-mix(in srgb,var(--color-black) 63%,transparent) 43%,color-mix(in srgb,var(--color-black) 24%,transparent) 72%,color-mix(in srgb,var(--color-black) 64%,transparent) 100%),linear-gradient(180deg,color-mix(in srgb,var(--color-black) 55%,transparent) 0%,color-mix(in srgb,var(--color-black) 6%,transparent) 45%,var(--color-bg) 100%)}.hero:after{content:"";position:absolute;left:0;right:0;pointer-events:none}.hero__overlay{position:absolute;inset:0;background:radial-gradient(circle at 30% 34%,color-mix(in srgb,var(--color-accent) 16%,transparent),transparent 32%);mix-blend-mode:screen;opacity:.6;pointer-events:none}.hero__inner{position:relative;margin:0 auto;padding:138px 0 58px 116px}.hero-title{font-family:var(--font-display);font-weight:var(--weight-semibold);margin:0 0 34px;text-shadow:0 16px 44px var(--color-black)}.hero-title span,.hero-title em{display:block;font-style:normal}.hero-title em{font-size:var(--type-size-92em);margin-top:0}.hero__text{margin:0 0 30px;color:var(--type-color-rgba-255-255-255-88);text-shadow:0 10px 28px var(--color-black)}.hero-actions{margin:0 0 34px}.hero-metrics{display:flex;gap:92px;margin:0 0 30px}.hero-metrics div{min-width:130px}.hero-metrics i,.hero-features i,.service-card i,.contact-grid i{display:grid;place-items:center;color:var(--accent);font-style:normal}.hero-metrics i{width:28px;height:26px;margin-bottom:8px;font-size:var(--type-size-22px)}.hero-metrics i img,.hero-features i img,.service-card i img,.contact-grid i img{width:100%;height:100%;object-fit:contain}.hero-metrics b{display:block;color:var(--accent)}.hero-metrics span{display:block;margin-top:5px}.hero-features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:960px}.hero-features article{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;padding:20px 16px;border:1px solid var(--color-accent-line);border-radius:11px;background:linear-gradient(180deg,color-mix(in srgb,var(--color-surface) 78%,transparent),color-mix(in srgb,var(--color-bg-soft) 74%,transparent));box-shadow:0 22px 60px color-mix(in srgb,var(--color-black) 52%,transparent);backdrop-filter:blur(8px);transition:.28s var(--ease)}.hero-features i{width:34px;height:34px;font-size:var(--type-size-18px);border:1px solid color-mix(in srgb,var(--color-accent) 28%,transparent);border-radius:50%}.hero-features h3{margin:0 0 8px}.hero-features p{margin:0;color:var(--color-soft)}
.btn{--saint-btn-shadow:0 10px 24px color-mix(in srgb,var(--color-black) 16%,transparent),0 0 18px color-mix(in srgb,var(--color-text) 4%,transparent),inset 0 1px 0 color-mix(in srgb,var(--color-text) 16%,transparent),inset 0 -8px 16px color-mix(in srgb,var(--color-black) 6%,transparent);position:relative;isolation:isolate;min-width:225px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:16px 28px;border:1px solid transparent;cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,filter .22s ease,opacity .22s ease;border-color:inherit;backdrop-filter:blur(10px) saturate(135%);box-shadow:var(--saint-btn-shadow);overflow:hidden}.btn:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--color-text) 20%,transparent) 0%,var(--color-line-soft) 18%,color-mix(in srgb,var(--color-text) 3%,transparent) 40%,transparent 70%),radial-gradient(120% 85% at 50% -10%,var(--color-line-strong),transparent 62%)}.btn:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 var(--color-line-strong),inset 0 0 0 1px color-mix(in srgb,var(--color-text) 5%,transparent);pointer-events:none}.btn--ghost{background:color-mix(in srgb,var(--color-bg-soft) 32%,transparent);border-color:var(--color-soft);color:var(--color-text)}.btn--small{min-width:0;padding:12px 22px;border-radius:var(--radius-md);background:var(--color-accent-soft);border-color:color-mix(in srgb,var(--color-accent) 65%,transparent);color:var(--accent)}
.section{width:min(var(--container),calc(100% - var(--gutter)));margin:0 auto;padding:88px 0;position:relative}.section-head.center{text-align:center;margin-left:auto;margin-right:auto}.section-head p,.eyebrow{margin:0 0 7px;color:var(--accent);font-size:var(--type-size-13px);font-weight:var(--weight-extrabold);text-transform:uppercase;letter-spacing:var(--type-track-14em)}.section-head h2{margin:0 0 10px;font-size:var(--type-size-clamp-30px-3-3vw-48px);letter-spacing:var(--type-track-neg-052em);line-height:var(--type-line-1-05);color:var(--color-text)}.section-head small{display:block;color:var(--muted);font-size:var(--type-size-16px)}.service-grid{display:grid;grid-template-columns:repeat(2,1fr)}.service-card{position:relative;border:1px solid var(--color-line-soft);overflow:hidden}.service-card:before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent) 31%,transparent),transparent 26%,color-mix(in srgb,var(--color-text) 4%,transparent));pointer-events:none}.service-card i{position:absolute;font-size:var(--type-size-14px);border:1px solid color-mix(in srgb,var(--color-accent) 25%,transparent);border-radius:50%;color:var(--accent)}.service-card h3{position:relative;margin:0 0 10px;font-size:var(--type-size-22px)}.service-card p{position:relative;margin:0 0 18px;color:var(--color-muted);font-size:var(--type-size-15px)}.service-card ul,.price-card ul{position:relative;margin:0;padding:0;list-style:none;color:var(--color-muted)}.service-card li,.price-card li{position:relative;margin:8px 0}.filters{flex-wrap:wrap}.filters button{font:inherit;cursor:pointer;transition:.2s var(--ease)}.portfolio-filter-select{display:none;position:relative;width:100%;height:56px;margin:18px auto 24px;background:var(--color-bg);border:2px solid var(--accent);border-radius:10px;overflow:hidden}.portfolio-select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.portfolio-select-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 52px;color:var(--color-text);font-size:var(--type-size-18px);pointer-events:none}.portfolio-select-arrow{position:absolute;right:20px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg)}.gitem,.ph{position:relative;aspect-ratio:1.22/1;background:var(--color-surface-raised);border:1px solid var(--color-line-soft);overflow:hidden}.gitem{cursor:zoom-in}.gitem img{width:100%;height:100%;object-fit:cover}.gitem:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--color-black) 76%,transparent));transition:.28s}.gitem span{position:absolute;left:9px;bottom:9px;z-index:2;background:color-mix(in srgb,var(--color-black) 68%,transparent);border:1px solid color-mix(in srgb,var(--color-text) 16%,transparent);border-radius:var(--radius-pill);padding:5px 10px;opacity:0;transition:.25s var(--ease)}.gitem:hover span,.gitem:hover:after{opacity:1}.gitem.is-hidden{display:none}.ph{display:grid;place-items:center;color:var(--type-color-rgba-255-255-255-45)}.mid-cta{position:relative;margin:38px 0 0;padding:66px 18px;text-align:center;overflow:hidden}.mid-cta:before{content:"";position:absolute;inset:0;background:var(--cta-bg-image,none) center/cover no-repeat;opacity:1;filter:none;transform:none}.mid-cta:after{content:"";position:absolute;inset:0;z-index:0;background:var(--cta-bg-overlay,transparent);pointer-events:none}.mid-cta p{font-size:var(--type-size-22px);margin:0 auto 24px;line-height:var(--type-line-1-28)}.price-grid{display:grid;gap:18px}.price-card{border:1px solid var(--color-line-soft);border-radius:15px;overflow:hidden;background:linear-gradient(180deg,var(--color-surface-raised),var(--color-surface-deep));box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.28s var(--ease)}.price-card:hover{border-color:color-mix(in srgb,var(--color-accent) 40%,transparent)}.price-card>img{height:190px;width:100%;object-fit:cover}.price-card__body{padding:24px;display:flex;flex-direction:column;flex:1}.price-card h3{font-size:var(--type-size-26px);margin:0 0 8px}.price-card p{color:var(--color-muted);margin:0 0 16px}.price-card ul{margin-bottom:22px;flex:1}.price-card li{padding-left:0}.price{margin:4px 0 18px}.price small{display:block;color:var(--type-color-rgba-255-255-255-45);text-decoration:line-through}.price strong{font-size:var(--type-size-25px);color:var(--color-text)}.note{text-align:center;color:var(--type-color-rgba-255-255-255-66);max-width:820px;margin:28px auto 0}.case-tabs button,.ba-tabs button{background:transparent;border:1px solid var(--color-line-strong);color:var(--color-soft);border-radius:var(--radius-pill);padding:10px 14px;cursor:pointer;transition:.2s}.case-tabs button.active,.case-tabs button:hover,.ba-tabs button.active,.ba-tabs button:hover{border-color:var(--accent);color:var(--accent)}.case{display:none;grid-template-columns:.92fr 1.08fr;gap:28px;padding:28px;border:1px solid var(--color-line-soft);border-radius:var(--radius-xl);background:linear-gradient(180deg,var(--color-surface-raised),var(--color-surface-deep));box-shadow:var(--shadow)}.case.active{display:grid}.case h3{margin:0 0 18px;letter-spacing:var(--type-track-neg-04em)}.case h4{color:var(--accent);margin:18px 0 6px}.case p{color:var(--color-muted);margin:0}.case-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.case-thumbs img{height:92px;width:100%;object-fit:cover;border-radius:10px}.ba-grid{gap:18px}.ba{border:1px solid var(--color-line-soft)}.ba figure{margin:0;position:relative}.ba img{height:280px;width:100%;object-fit:cover;border-radius:var(--radius-md)}.ba figcaption{position:absolute;left:10px;top:10px;background:color-mix(in srgb,var(--color-black) 67%,transparent);border:1px solid color-mix(in srgb,var(--color-text) 13%,transparent);border-radius:var(--radius-pill);padding:5px 10px;font-size:var(--type-size-12px)}.ba h3{margin:16px 0 5px}.ba p{margin:0;color:var(--color-muted)}.faq{margin:0 auto}.faq summary{cursor:pointer;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq-cta{text-align:center}.faq-cta h3{margin:0 0 16px}.reviews{display:grid;gap:18px}.review{border:1px solid var(--color-line-soft);border-radius:var(--radius-lg);background:var(--color-surface);padding:24px}.review img{max-height:260px;object-fit:cover;border-radius:var(--radius-md);margin-bottom:14px}.review p{color:var(--color-muted)}.review b{display:block}.review span{color:var(--accent);font-size:var(--type-size-13px)}.contacts{text-align:center;border-top:1px solid color-mix(in srgb,var(--color-text) 8%,transparent)}.contacts h2{margin:0 0 14px;letter-spacing:var(--type-track-neg-06em)}.contacts>p{color:var(--color-muted)}.contact-grid{display:grid;gap:15px;margin:28px 0}.contact-grid a{display:grid;place-items:center;text-align:center;gap:7px;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--color-surface-raised),var(--color-surface-deep));transition:.25s var(--ease)}.contact-grid a:hover{border-color:color-mix(in srgb,var(--color-accent) 45%,transparent)}.contact-grid i{width:42px;height:42px;border-radius:50%;border:1px solid var(--color-accent-line);font-size:var(--type-size-14px)}.contact-grid span{color:var(--color-muted);max-width:250px}.leadform{margin:30px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.leadform input,.leadform textarea{width:100%;border:1px solid var(--color-line);background:var(--color-surface-input);color:var(--color-text);border-radius:var(--radius-md);padding:14px 15px}.leadform textarea,.leadform button,.leadform .agree{grid-column:1/-1}.leadform textarea{resize:vertical}.agree{text-align:left;color:var(--color-subtle);font-size:var(--type-size-13px)}.agree input{width:auto;margin-right:8px}footer{width:min(var(--container),calc(100% - var(--gutter)));margin:0 auto;padding:30px 0 44px;display:flex;gap:18px;flex-wrap:wrap}.cookie{position:fixed;left:18px;right:18px;bottom:18px;z-index:80;max-width:780px;margin:auto;background:color-mix(in srgb,var(--color-bg) 94%,transparent);border:1px solid var(--color-line-strong);border-radius:var(--radius-lg);padding:14px;display:none;gap:14px;align-items:center;box-shadow:0 20px 80px color-mix(in srgb,var(--color-black) 67%,transparent)}.cookie.is-visible{display:flex}.cookie p{margin:0;color:var(--color-muted);font-size:var(--type-size-13px)}.cookie button{margin-left:auto;border:1px solid var(--accent);background:var(--color-accent-soft);color:var(--color-text);border-radius:10px;padding:10px 14px;cursor:pointer}.lightbox{position:fixed;inset:0;z-index:100;background:color-mix(in srgb,var(--color-black) 90%,transparent);display:none;align-items:center;justify-content:center;padding:24px}.lightbox.is-open{display:flex}.lightbox img{max-width:min(1200px,94vw);max-height:88vh;object-fit:contain}.lightbox button{position:absolute;right:22px;top:18px;width:42px;height:42px;border-radius:50%;border:1px solid color-mix(in srgb,var(--color-text) 25%,transparent);background:var(--color-surface);color:var(--color-text);font-size:var(--type-size-28px);cursor:pointer}.reveal,.hero-title,.hero__text,.hero-actions,.hero-metrics,.hero-features{opacity:0;transition:opacity .75s var(--ease),transform .75s var(--ease)}.in-view,.hero.in-view .hero-title,.hero.in-view .hero__text,.hero.in-view .hero-actions,.hero.in-view .hero-metrics,.hero.in-view .hero-features{opacity:1;transform:none}.hero.in-view .hero__text{transition-delay:.08s}.hero.in-view .hero-actions{transition-delay:.16s}.hero.in-view .hero-metrics{transition-delay:.24s}.hero.in-view .hero-features{transition-delay:.32s}
@media(max-width:1100px){.hero__inner{padding-left:46px}.hero-features{grid-template-columns:repeat(2,1fr)}.gallery{grid-template-columns:repeat(3,1fr)}.case{grid-template-columns:1fr}.price-grid{grid-template-columns:1fr}.price-card{max-width:640px;margin:0 auto;width:100%}}
@media(max-width:760px){.topbar{height:66px;padding:0 16px;background:color-mix(in srgb,var(--color-bg-soft) 90%,transparent)}.logo{margin-right:0}.logo span{font-size:var(--type-size-42px)}.topbar nav{position:absolute;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg)}.topbar nav a{display:block;width:100%}.hero{min-height:auto}.hero__inner{width:calc(100% - 28px);padding:118px 0 40px}.hero__text{font-size:var(--type-size-17px)}.hero-metrics{gap:24px}.section{width:calc(100% - 28px);padding:62px 0}.service-grid,.ba-grid,.reviews,.contact-grid,.leadform{grid-template-columns:1fr}.gitem,.ph{aspect-ratio:1/1}.mid-cta p{font-size:var(--type-size-19px)}.case{padding:18px}.ba img{height:220px}.cookie{display:none!important}.btn{min-width:0}.hero-actions{display:grid}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal,.hero-title,.hero__text,.hero-actions,.hero-metrics,.hero-features{opacity:1;transform:none}}

/* =========================================================
   USER PATCH 2026-07-07
   Правки структуры, меню, заголовков, некликабельных карточек и формы
   ========================================================= */

/* Шапка: Telegram слева, меню по центру, логотип справа */
.topbar nav{
  justify-self:center;
  justify-content:center;
}
.logo{
  justify-self:end;
  margin-right:0 !important;
}
.menu-toggle{
  grid-column:3;
  grid-row:1;
  justify-self:end;
}

/* Заголовки и подзаголовки не должны быть зажаты в центре */
.section-head h2{
  max-width:100%;
}
.section-head small{
  margin-left:auto;
  margin-right:auto;
  line-height:var(--type-line-1-55);
}
.section-head.left small{
  margin-left:0;
}

/* Убираем технические верхние подписи: Услуги / Портфолио / Стоимость / Кейсы / FAQ / Отзывы */
.section-head > p{
  display:none !important;
}

/* Некликабельные информационные карточки не должны двигаться или светиться как кнопки */
.hero-features article,
.service-card{
  cursor:default !important;
}
.hero-features article:hover,
.service-card:hover{
  transform:none !important;
}
.hero-features article:hover{
  border-color:var(--color-accent-line) !important;
}
.service-card:hover:before{
  opacity:.55 !important;
}

/* Нижний контактный блок и форма — компактнее и аккуратнее */
.contact-grid{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.contact-grid a{
  min-height:132px;
  padding:18px;
}
.contact-grid a:hover{
  transform:none;
}
.leadform{
  max-width:680px;
  margin-top:24px;
  padding:22px;
  border:1px solid var(--color-line-soft);
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg,color-mix(in srgb,var(--color-surface) 86%,transparent),color-mix(in srgb,var(--color-bg-soft) 86%,transparent));
  box-shadow:0 24px 70px color-mix(in srgb,var(--color-black) 34%,transparent);
}
.leadform input,
.leadform textarea{
  background:var(--color-surface);
  border-color:var(--color-line-strong);
}
.leadform input:focus,
.leadform textarea:focus{
  outline:none;
  border-color:color-mix(in srgb,var(--color-accent) 55%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 8%,transparent);
}
.leadform textarea{
  min-height:96px;
}
.leadform .agree{
  color:var(--type-color-rgba-255-255-255-54);
  font-size:var(--type-size-12px);
  line-height:var(--type-line-1-45);
}

@media(max-width:760px){
  .logo{
    width:56px;
    height:56px;
  }
  .menu-toggle{
    display:block;
  }
  .topbar nav{
    justify-self:stretch;
  }
  .section-head.center,
  .section-head.left{
    max-width:100% !important;
  }
  .contact-grid{
    grid-template-columns:1fr;
  }
  .leadform{
    padding:16px;
  }
}

.locations-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:18px;align-items:stretch}.locations-map{min-height:520px;border:1px solid var(--color-line);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-deep)}.locations-list{display:grid;gap:12px;align-content:start}.location-card{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:12px;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface-raised);cursor:pointer}.location-card__image{height:92px;border-radius:8px;overflow:hidden;background:var(--color-surface-deep)}.location-card__image img{width:100%;height:100%;object-fit:cover}.location-card h3{margin:4px 0 5px;font-size:var(--type-size-18px)}.location-card p{margin:0 0 6px;color:var(--color-muted);font-size:var(--type-size-14px)}.location-card small{color:var(--accent);font-size:var(--type-size-12px)}@media(max-width:760px){.locations-layout{grid-template-columns:1fr}.locations-map{min-height:360px}.location-card{grid-template-columns:76px 1fr}.location-card__image{height:76px}}



/* =========================================================
   USER PATCH 2 — поменять местами Telegram и логотип
   Логотип слева, меню по центру, Telegram справа
   ========================================================= */
@media (min-width: 761px){
  .logo{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:start !important;
    margin-right:0 !important;
  }
  .topbar nav{
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:center !important;
  }
}

@media(max-width:760px){
  .logo{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:start !important;
  }
  .menu-toggle{
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
  }
  .topbar nav{
    grid-column:1 / -1 !important;
  }
}

/* =========================================================
   USER PATCH 3 — hero как в референсе
   Текст левее, ниже и шире. Логотип ближе к левому краю.
   ========================================================= */
@media (min-width: 761px){
  .topbar{
    padding-left:clamp(56px,5.4vw,92px) !important;
    padding-right:clamp(56px,5.4vw,92px) !important;
    grid-template-columns:120px minmax(0,1fr) 150px !important;
  }
  .logo{
    width:96px !important;
    height:86px !important;
  }
  .logo img{
    max-width:96px !important;
    max-height:84px !important;
  }
  .logo span{
    font-size:var(--type-size-66px) !important;
  }
  .topbar nav{
    gap:30px !important;
    font-size:var(--type-size-15px) !important;
  }
  .hero-actions{
    margin-bottom:30px !important;
  }
  .hero-metrics{
    margin-bottom:28px !important;
  }
}

@media (min-width: 1200px){
  .hero__inner{
    padding-left:36px !important;
  }
}

@media (max-width:760px){
  .hero__inner{
    padding-top:110px !important;
  }
  .hero-title{
    font-size:var(--type-size-40px) !important;
    letter-spacing:var(--type-track-neg-035em) !important;
  }
}


/* =========================================================
   USER PATCH 4 — финальная посадка первого экрана
   Ближе к референсу: текст шире, ниже, метрики над кнопками.
   ========================================================= */
@media (min-width: 761px){
  .hero{
    min-height:760px !important;
    background-position:center right !important;
  }
  .hero__inner{
    width:min(1180px, calc(100% - 42px)) !important;
    padding-top:172px !important;
    padding-left:0 !important;
    padding-bottom:46px !important;
  }
  .hero-title{
    max-width:1080px !important;
    font-size:var(--type-size-clamp-44px-3-55vw-57px) !important;
    line-height:var(--type-line-1-03) !important;
    letter-spacing:var(--type-track-neg-035em) !important;
    margin-bottom:30px !important;
  }
  .hero-title span{
    max-width:1040px !important;
  }
  .hero-title em{
    max-width:900px !important;
    font-size:var(--type-size-98em) !important;
    line-height:var(--type-line-1-02) !important;
  }
  .hero__text{
    max-width:820px !important;
    font-size:var(--type-size-clamp-17px-1-18vw-20px) !important;
    line-height:var(--type-line-1-38) !important;
    margin-bottom:30px !important;
  }
  .hero-metrics{
    gap:112px !important;
    margin:0 0 24px !important;
  }
  .hero-metrics i{
    margin-bottom:8px !important;
  }
  .hero-metrics b{
    font-size:var(--type-size-34px) !important;
  }
  .hero-actions{
    margin:0 0 34px !important;
  }
  .hero-features{
    max-width:900px !important;
    gap:16px !important;
  }
  .hero-features article{
    min-height:126px !important;
    padding:18px 16px !important;
  }
}

@media (min-width: 1360px){
  .hero__inner{
    transform:translateX(-18px);
  }
}

@media (max-width: 760px){
  .hero-metrics{
    margin-bottom:22px !important;
  }
  .hero-actions{
    margin-bottom:26px !important;
  }
}

/* =========================================================
   HERO — раскрытие фоновой фотографии вертикальными сегментами.
   ========================================================= */
.hero{
  background-image:none!important;
  background-color:var(--color-bg);
}
.hero__bg{
  transition:opacity .8s var(--ease);
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:var(--hero);
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
  transform:none;
}
.hero-carousel-dots{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:var(--text-lg);gap:var(--text-xs);width:100%}
.hero-carousel-dot{display:grid;place-items:center;width:var(--text-xl);height:var(--text-xl);padding:0;border:0;background:transparent;cursor:pointer;border-radius:var(--radius-pill)}
.hero-carousel-dot:before{content:'';width:var(--radius-sm);height:var(--radius-sm);border-radius:var(--radius-pill);background:var(--color-muted);transition:background var(--transition-fast)}
.hero-carousel-dot[aria-current="true"]:before{background:var(--accent)}
.hero-carousel-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.hero__bg{transition:none}}
.hero:before{
  z-index:1!important;
}
.hero__overlay{
  z-index:2!important;
}
.hero__inner{
  z-index:4!important;
}
/* Маской растворяем само фото в цвет страницы, не оставляя край слоя. */
.hero__bg{
  -webkit-mask-image:linear-gradient(180deg,var(--color-black) 0%,var(--color-black) 50%,color-mix(in srgb,var(--color-black) 80%,transparent) 62%,color-mix(in srgb,var(--color-black) 28%,transparent) 74%,transparent 82%)!important;
  mask-image:linear-gradient(180deg,var(--color-black) 0%,var(--color-black) 50%,color-mix(in srgb,var(--color-black) 80%,transparent) 62%,color-mix(in srgb,var(--color-black) 28%,transparent) 74%,transparent 82%)!important;
}
/* Длинное нижнее затухание фото убирает заметный стык с фоном страницы. */
.hero:after{
  bottom:0!important;
  height:280px!important;
  z-index:3!important;
  background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--color-bg) 22%,transparent) 34%,color-mix(in srgb,var(--color-bg) 72%,transparent) 72%,var(--color-bg) 100%)!important;
}

/* =========================================================
   USER PATCH 7 — единая ширина блоков + свои иконки преимуществ
   Все основные блоки выровнены по той же сетке, что и главный экран.
   ========================================================= */
:root{
  --site-max:var(--container);
  --site-gutter:var(--gutter);
}
.section,.contacts,footer{
  width:min(var(--site-max), calc(100% - var(--site-gutter))) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.hero__inner{
  width:min(var(--site-max), calc(100% - var(--site-gutter))) !important;
}
.mid-cta{
  padding-left:calc(var(--site-gutter) / 2) !important;
  padding-right:calc(var(--site-gutter) / 2) !important;
}
.mid-cta p{
  max-width:min(var(--site-max), calc(100% - var(--site-gutter))) !important;
}
.service-grid,
.gallery,
.price-grid,
.case-list,
.ba-grid,
.reviews{
  width:100% !important;
}
.section-head small{
  max-width:min(900px,100%) !important;
}

/* Кастомные иконки в преимуществах главного блока вместо цифр */
.hero-features i img{
  width:30px !important;
  height:30px !important;
  object-fit:contain !important;
  display:block !important;
}
.hero-features .custom-icon{--icon-size:32px}
.hero-features i:has(img){
  border-color:color-mix(in srgb,var(--color-accent) 42%,transparent) !important;
  background:color-mix(in srgb,var(--color-accent) 6%,transparent) !important;
}
.hero-metrics i img{
  width:28px !important;
  height:28px !important;
  object-fit:contain !important;
}

@media(max-width:760px){
  :root{--site-gutter:28px;}
  .section,.contacts,footer,.hero__inner{
    width:calc(100% - var(--site-gutter)) !important;
  }
}

/* SVG icon color support */
.hero-features i,.service-card i,.contact-grid i,.hero-metrics i{color:var(--accent)}


/* =========================================================
   USER PATCH 9 — Telegram в меню только иконкой
   ========================================================= */

/* =========================================================
   USER PATCH 10 — единая типографика и текстовые правила
   Цель: один визуальный язык для всех заголовков, подзаголовков,
   карточек, кнопок и форм.
   ========================================================= */
:root{
  --text-main:var(--color-text);
  --text-muted:var(--color-muted);
  --text-soft:var(--color-soft);
  --text-dim:var(--color-subtle);
  --fs-section:clamp(34px,3.35vw,52px);
  --fs-hero:clamp(44px,3.65vw,60px);
  --lh-tight:1.05;
  --lh-title:1.12;
  --lh-body:1.56;
  --track-tight:-.042em;
}
html,body{
  color:var(--text-main);
  letter-spacing:var(--type-track-neg-01em);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body,p,li,small,input,textarea,select,button,a{
  font-family:var(--font-body)!important;
}
p,li,small,.hero__text,.service-card p,.price-card p,.case p,.ba p,.review p,.contacts>p,.faq p,.contact-grid span{
  line-height:var(--lh-body)!important;
}
.hero-title{
  font-weight:var(--weight-regular)!important;
  letter-spacing:var(--track-tight)!important;
  color:var(--text-main)!important;
}
.section-head h2,.contacts h2{
  font-weight:var(--weight-regular)!important;
  letter-spacing:var(--type-track-neg-025em)!important;
  color:var(--accent)!important;
}
.mid-cta p{
  font-weight:var(--weight-regular)!important;
  letter-spacing:var(--type-track-neg-025em)!important;
  color:var(--color-text)!important;
}
.hero-title em{
  font-weight:var(--weight-regular)!important;
}
.section-head h2,.contacts h2{
  margin-bottom:14px!important;
}
.hero__text,.section-head small,.contacts>p{
  font-weight:var(--weight-regular)!important;
  letter-spacing:var(--type-track-neg-012em)!important;
}
.topbar nav, .btn, .filters button, .case-tabs button, .faq summary, .leadform input, .leadform textarea{
  font-family:var(--font-body)!important;
}
.topbar nav{
  letter-spacing:var(--type-track-01em)!important;
}
.hero-metrics b{
  font-family:var(--font-body)!important;
  font-weight:var(--weight-extrabold)!important;
  letter-spacing:var(--type-track-neg-035em)!important;
}
.hero-metrics span{
  font-weight:var(--weight-medium)!important;
}
.hero-features h3,
.service-card h3,
.price-card h3,
.case h3,
.ba h3,
.faq-cta h3,
.contact-grid b,
.review b{
  font-family:var(--font-body)!important;
  font-weight:var(--weight-semibold)!important;
  line-height:var(--type-line-1-18)!important;
  letter-spacing:var(--type-track-neg-025em)!important;
  color:var(--text-main)!important;
}
.education-module h3,.location-card h3{
  font-family:var(--font-body);
  font-weight:var(--weight-semibold);
  color:var(--color-text);
}
.hero-features p,
.service-card p,
.price-card p,
.case p,
.ba p,
.review p,
.faq p{
  color:var(--text-soft)!important;
  font-weight:var(--weight-regular)!important;
}
.service-card li,
.price-card li{
  color:var(--text-muted)!important;
}
.gitem span{
  font-family:var(--font-body)!important;
  font-weight:var(--weight-bold)!important;
  letter-spacing:var(--type-track-neg-01em)!important;
}
.price-card .price{
  font-family:var(--font-body)!important;
  font-weight:var(--weight-extrabold)!important;
  letter-spacing:var(--type-track-neg-04em)!important;
}
.faq summary{
  font-weight:var(--weight-semibold)!important;
  letter-spacing:var(--type-track-neg-02em)!important;
}
.leadform input,
.leadform textarea{
  color:var(--color-text)!important;
}
/* Единая ширина текстовых блоков: заголовки широкие, но не размазанные */
.section-head.center,
.section-head.left{
  max-width:960px!important;
}
.section-head.center small,
.section-head.left small{
  max-width:820px!important;
}
.section-head.center small{
  margin-left:auto!important;
  margin-right:auto!important;
}
/* Больше воздуха между разделами, чтобы заголовки не прилипали к карточкам */
.service-card,.price-card,.case,.faq details,.review,.contact-grid a,.leadform{
  letter-spacing:var(--type-track-neg-01em);
}
@media(max-width:760px){
  :root{
    --fs-body:15px;
    --fs-section:clamp(31px,9vw,42px);
    --fs-hero:clamp(38px,10.8vw,46px);
  }
  .hero-title{
    line-height:var(--type-line-1-05)!important;
  }
  .hero__text,
  .section-head small,
  .contacts>p{
    line-height:var(--type-line-1-5)!important;
  }
  .topbar nav{
    font-size:var(--type-size-15px)!important;
  }
}


/* =========================================================
   USER PATCH 11 — соц-иконки в верхнем меню
   ========================================================= */
.topbar{
  grid-template-columns:minmax(120px,170px) minmax(0,1fr) minmax(90px,170px)!important;
}
.topbar-socials{
  justify-self:start;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
@media(max-width:980px){
  .topbar{
    grid-template-columns:auto minmax(0,1fr) auto auto!important;
    gap:10px!important;
  }
  .logo{grid-column:1;grid-row:1;justify-self:start!important}
  .topbar nav{grid-column:1 / -1;grid-row:2}
  .topbar-socials{grid-column:3;grid-row:1;justify-self:end;gap:6px}
  .menu-toggle{grid-column:4;grid-row:1;justify-self:end}
}
@media(max-width:520px){
  .topbar-socials{gap:5px}
}

/* =========================================================
   USER PATCH 12 — компактные карточки услуг + структура пунктов + анимация
   ========================================================= */
.services-section .section-head.left{
  max-width:900px!important;
  margin-bottom:34px!important;
}
.service-grid{
  gap:16px!important;
}
.service-card{
  min-height:0!important;
  padding:24px 26px 24px 26px!important;
  background:
    radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--color-accent) 7.5%,transparent),transparent 38%),
    linear-gradient(180deg,color-mix(in srgb,var(--color-surface-raised) 92%,transparent),color-mix(in srgb,var(--color-bg-soft) 94%,transparent))!important;
  box-shadow:0 22px 56px color-mix(in srgb,var(--color-black) 42%,transparent)!important;
  transform:none!important;
  opacity:0;
  translate:0 22px;
  transition:
    opacity .72s var(--ease),
    translate .72s var(--ease),
    border-color .28s var(--ease),
    background .28s var(--ease),
    box-shadow .28s var(--ease)!important;
}
.service-card:nth-child(1){transition-delay:.04s!important}
.service-card:nth-child(2){transition-delay:.11s!important}
.service-card:nth-child(3){transition-delay:.18s!important}
.service-card:nth-child(4){transition-delay:.25s!important}
.services-section.in-view .service-card{
  opacity:1;
  translate:0 0;
}
.service-card:hover{
  transform:none!important;
  border-color:color-mix(in srgb,var(--color-accent) 34%,transparent)!important;
  box-shadow:0 28px 68px color-mix(in srgb,var(--color-black) 50%,transparent)!important;
}
.service-card:before{
  opacity:.42!important;
}
.service-card:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-accent) 36%,transparent),transparent);
  opacity:.65;
  pointer-events:none;
}
.service-card i{
  right:20px!important;
  top:20px!important;
  width:34px!important;
  height:34px!important;
  background:color-mix(in srgb,var(--color-accent) 3.5%,transparent)!important;
}
.service-card h3{
  max-width:calc(100% - 58px);
  margin-bottom:10px!important;
}
.service-card p{
  max-width:620px;
  margin-bottom:18px!important;
}
.service-card ul{
  display:grid!important;
  gap:8px!important;
  margin-top:0!important;
}
.service-card li{
  position:relative!important;
  margin:0!important;
  padding-left:22px!important;
  color:var(--type-color-rgba-255-255-255-66)!important;
}
.service-card li:before{
  content:"";
  position:absolute;
  left:0;
  top:.58em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--color-accent) 9%,transparent);
}
@media(min-width:981px){
  .service-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .service-card{
    min-height:206px!important;
  }
}
@media(max-width:760px){
  .service-card{
    padding:22px 20px!important;
  }
  .service-card:hover{
    translate:0 0;
  }
  .service-card h3{
    max-width:calc(100% - 54px);
  }
}
@media(prefers-reduced-motion:reduce){
  .service-card{
    opacity:1!important;
    translate:0 0!important;
    transition:none!important;
  }
}

/* PATCH 13: reduce vertical gaps between major sections */
.service-grid{
  margin-bottom:0!important;
}
.gallery,
.price-grid,
.case,
.ba-grid,
.faq,
.reviews{
  margin-top:0!important;
}
@media(max-width:760px){
  .services-section{
    padding-bottom:28px!important;
  }
  .section-head{
    margin-bottom:20px!important;
  }
}


/* PATCH 14: background editor + color discipline */
:root{
  --text:var(--color-text);
  --muted:color-mix(in srgb,var(--color-text) 64%,transparent);
  --soft:var(--color-soft);
  --accent:var(--color-accent);
  --accent2:var(--accent);
}
body,.topbar nav,.service-card h3,.price-card h3,.case h3,.faq summary,.review b{
  color:var(--color-text)!important;
}
.hero__text,.section-head small,.service-card p,.price-card p,.case p,.ba p,.faq p,.review p,.contacts>p,.contact-grid span,footer,.agree,.note{
  color:var(--type-color-rgba-255-255-255-72)!important;
}
.hero-metrics span,
.section-head p,
.eyebrow,
.review span,
.filters button.active,
.filters button:hover,
.hero-title em,
.hero-metrics b,
.faq summary:after{
  color:var(--accent)!important;
}
.btn--main{
  border-color:var(--accent)!important;
}
.btn--small,
.cookie button{
  color:var(--color-text)!important;
}

/* =========================================================
   USER PATCH 16 — аудит размеров шрифтов и единая шкала
   Цель: убрать разнобой размеров после серии правок.
   ========================================================= */
:root{
  --fs-xs:12px;
  --fs-sm:14px;
  --fs-base:16px;
  --fs-lead:18px;
  --fs-card:19px;
  --fs-subtitle:20px;
  --fs-h3:24px;
  --fs-h2:clamp(38px,3.2vw,50px);
  --fs-hero-title:clamp(50px,4.45vw,70px);
  --lh-ui:1.28;
  --lh-copy:1.5;
  --lh-heading:1.06;
}
.topbar nav{
  font-size:var(--menu-desktop)!important;
  font-weight:var(--weight-medium)!important;
}
.hero-title{
  letter-spacing:var(--type-track-neg-055em)!important;
  max-width:980px!important;
}
.hero__text{
  max-width:760px!important;
}
.btn{
  line-height:var(--type-line-1-15)!important;
}
.hero-metrics b{
  font-size:var(--type-size-32px)!important;
  line-height:var(--type-line-1)!important;
}
.hero-metrics span{
  font-size:var(--type-size-13px)!important;
  line-height:var(--type-line-1-25)!important;
}
.hero-features h3{
  font-size:var(--type-size-16px)!important;
  line-height:var(--type-line-1-18)!important;
}
.hero-features p{
  font-size:var(--type-size-13px)!important;
  line-height:var(--type-line-1-35)!important;
}
.section-head h2,.contacts h2{
  letter-spacing:var(--type-track-neg-025em)!important;
}
.service-card h3,
.price-card h3{
  line-height:var(--type-line-1-18)!important;
}
.filters{align-items:center}
.filters button.active,.filters button:hover{border-color:var(--accent)!important}
.filters{padding-bottom:12px!important}
.filters button.active,.filters button:hover{border:0!important;background:transparent!important}
.portfolio-section .section-head h2{text-shadow:none!important}
.contacts{width:min(1040px,calc(100% - var(--gutter)))!important;margin:0 auto 42px!important;border-radius:var(--radius-xl)!important}
.contacts .contact-grid{gap:10px!important}
.contacts .contact-grid a{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:14px!important;text-align:left!important}
.contacts .leadform{max-width:960px;margin:18px auto 0!important;border:1px solid var(--color-line)!important;border-radius:var(--radius-lg)!important;background:color-mix(in srgb,var(--color-black) 18%,transparent)!important}
@media(max-width:760px){.contacts{width:calc(100% - 28px)!important}}
.contacts h2{margin-bottom:6px!important}
.contacts>p{margin-bottom:14px!important}
.contacts .contact-grid{margin:14px auto!important}
.contacts .contact-grid a{min-height:84px!important;padding:12px 16px!important}
.contacts .leadform{margin-top:14px!important;padding:14px!important;gap:10px!important}
.contacts .leadform input{min-height:46px!important;padding:10px 14px!important}
.contacts .leadform textarea{min-height:84px!important;padding:10px 14px!important}
.contacts .leadform button{min-height:52px!important;padding:12px 18px!important}
@media(max-width:760px){.contacts .contact-grid{margin:12px auto!important}.contacts .leadform{padding:10px!important}}
.case-copy{align-self:start;position:sticky;top:96px}
.case-media img{cursor:zoom-in}
.lightbox-prev,.lightbox-next,.lightbox-close{position:absolute;z-index:2;display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:0;background:transparent;color:var(--color-text);font-size:var(--type-size-38px);line-height:var(--type-line-1);cursor:pointer}
.lightbox.is-open~*{pointer-events:none}
body:has(.lightbox.is-open){overflow:hidden!important}
.lightbox-prev{left:clamp(12px,4vw,56px);top:50%;transform:translateY(-50%)}.lightbox-next{right:clamp(12px,4vw,56px);top:50%;transform:translateY(-50%)}.lightbox-close{right:clamp(12px,3vw,40px);top:18px;font-size:var(--type-size-30px)}
.lightbox .lightbox-prev,.lightbox .lightbox-next{top:50%!important;right:auto!important}
.lightbox .lightbox-prev{left:clamp(12px,4vw,56px)!important}.lightbox .lightbox-next{right:clamp(12px,4vw,56px)!important;left:auto!important}
.lightbox .lightbox-close{top:18px!important;right:clamp(12px,3vw,40px)!important}
.lightbox-prev:hover,.lightbox-next:hover,.lightbox-close:hover{color:var(--accent);background:transparent}
.lightbox-prev[hidden],.lightbox-next[hidden]{display:none}
@media(max-width:760px){.case-copy{position:static}}
@media(max-width:760px){}
.topbar{overflow:visible!important}
.topbar .logo{position:relative;z-index:3;width:270px;height:250px;margin-top:24px;margin-right:34px;overflow:visible;align-items:flex-start}
.topbar .logo img{width:270px;max-width:none;height:250px;max-height:none;object-fit:contain;object-position:center top}
.topbar .logo span{font-size:var(--type-size-68px)}
@media(min-width:761px){.topbar .logo,.topbar.is-scrolled .logo{top:104px!important;margin-top:0}}
.topbar .menu-toggle{order:0;flex:none}
.topbar .logo{order:1}
.topbar .navlinks{order:2}
.topbar .navright{order:3;margin-left:auto;display:flex;align-items:center;gap:10px}
.topbar .navright a{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--color-line-strong);border-radius:50%;color:var(--color-soft)}
.topbar .navright a:hover{color:var(--accent);border-color:var(--accent)}
.topbar .menu-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(max-width:760px){
  .topbar .logo{width:76px;height:76px;margin-top:18px;margin-right:0}
  .topbar .logo img{width:76px;height:76px}
  .topbar .logo span{font-size:var(--type-size-52px)}
  .topbar{padding-inline:14px;overflow:visible!important}
  .topbar nav{left:10px;right:10px;width:auto;max-width:none;z-index:4}
  .topbar .logo{order:1}
  .topbar .navlinks{order:initial;display:none}
  .topbar.menu-open .navlinks{display:flex}
  .topbar .navright{order:2;margin-left:auto}
  .topbar .navright a{width:36px;height:36px}
  .topbar nav{display:none;justify-content:flex-start!important;align-items:stretch!important;overflow-y:auto}
  .topbar:not(.menu-open) nav{display:none!important}
  .topbar.menu-open nav{display:flex!important}
  .topbar nav a{white-space:normal}
  body{overflow-x:hidden}
body.menu-is-open{overflow:hidden}
}
.hero-features article:not(:has(> i)){grid-template-columns:1fr}
.hero-features article{min-height:190px;align-content:start}
.hero-features article>div{min-width:0}
.hero-features p{max-width:250px}
.hero-features h3:after{content:"";display:block;width:78px;height:2px;margin-top:12px;background:var(--accent);border-radius:var(--radius-pill)}
.hero-features article>i,.service-card>i,.contact-grid a>i{border:0!important;border-radius:0!important;background:transparent!important}
.gitem span{
  font-size:var(--type-size-13px)!important;
  line-height:var(--type-line-1-25)!important;
}
.price-card .price{
  font-size:var(--type-size-32px)!important;
  line-height:var(--type-line-1)!important;
}
.case h3{
  font-size:var(--type-size-clamp-27px-2-6vw-38px)!important;
  line-height:var(--type-line-1-12)!important;
}
.ba h3,
.faq-cta h3{
  line-height:var(--type-line-1-2)!important;
}
.faq summary{
  font-size:var(--type-size-19px)!important;
  line-height:var(--type-line-1-25)!important;
}
.contact-grid b{
  font-size:var(--type-size-18px)!important;
  line-height:var(--type-line-1-2)!important;
}
.contact-grid span{
  font-size:var(--type-size-14px)!important;
  line-height:var(--type-line-1-38)!important;
}
.leadform input,
.leadform textarea{
  font-size:var(--type-size-15px)!important;
  line-height:var(--type-line-1-4)!important;
}
footer,.agree,.cookie p{
  font-size:var(--type-size-13px)!important;
  line-height:var(--type-line-1-45)!important;
}
@media(max-width:760px){
  :root{
    --fs-base:15px;
    --fs-hero-title:clamp(38px,10.5vw,46px);
    --fs-h2:clamp(31px,8.2vw,40px);
  }
  .hero__text,.section-head small,.contacts>p{
    font-size:var(--type-size-16px)!important;
  }
  .service-card h3,.price-card h3{font-size:var(--type-size-19px)!important}
  .faq summary{font-size:var(--type-size-17px)!important}
  .case h3{font-size:var(--type-size-28px)!important}
}

/* =========================================================
   USER PATCH 17 — галерея, типографика, кнопки, меню, before/after
   ========================================================= */
:root{
  --font-body:var(--font-sans);
}
html,body{font-family:var(--font-body)!important;font-size:var(--fs-body)!important;line-height:var(--lh-body)!important}
.hero-title{font-family:var(--font-display)!important;line-height:var(--lh-title)!important}
.section-head h2,.contacts h2,.mid-cta p{font-family:var(--font-body)!important;line-height:var(--lh-title)!important}
.hero-title{font-size:var(--fs-hero)!important}.section-head h2,.contacts h2{font-size:var(--fs-section)!important}
.section-head small,.contacts>p{font-size:var(--type-size-17px)!important;line-height:var(--type-line-1-48)!important}
.hero__text{font-size:var(--lead-desktop)!important;line-height:var(--type-line-1-48)!important}
@media(max-width:760px){.hero__text{font-size:var(--lead-mobile)!important}}
.service-card h3,.price-card h3,.ba h3,.faq-cta h3{font-size:var(--fs-card)!important}.service-card p,.price-card p,.case p,.ba p,.faq p,.review p{font-size:var(--type-size-15px)!important;line-height:var(--type-line-1-48)!important}.service-card li,.price-card li{font-size:var(--type-size-14px)!important;line-height:var(--type-line-1-42)!important}

/* меньше вертикальные провалы между крупными блоками */.contacts{padding-top:46px!important;padding-bottom:46px!important}.section-head{margin-bottom:24px!important}

/* единый стиль всех кнопок */
.btn,.leadform button,.cookie button,.case-tabs button,.ba-tabs button,.filters button{
  font-family:var(--font-body)!important;
}
.btn,.leadform button{
  min-height:48px!important;
  border-radius:var(--radius-md)!important;
  padding:14px 24px!important;
  font-size:var(--type-size-14px)!important;
  font-weight:var(--weight-extrabold)!important;
  letter-spacing:var(--type-track-neg-005em)!important;
  border:1px solid color-mix(in srgb,var(--color-accent) 72%,transparent)!important;
  box-shadow:0 14px 34px color-mix(in srgb,var(--color-black) 24%,transparent), inset 0 1px 0 var(--color-line-strong)!important;
}
.btn--main,.leadform button{
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--color-accent) 82%,var(--color-black)))!important;
  color:var(--type-color-050505)!important;
}
.btn--ghost,.btn--small{
  background:color-mix(in srgb,var(--color-bg-soft) 42%,transparent)!important;
  color:var(--color-text)!important;
}
.agree a,.leadform .agree a{color:var(--accent)!important;text-decoration:none!important;border-bottom:1px solid color-mix(in srgb,var(--color-accent) 45%,transparent)!important}
.agree a:hover,.leadform .agree a:hover{color:var(--color-text)!important;border-bottom-color:var(--color-text)!important}

/* мобильное меню: визуально отдельная панель, закрывается JS при тапе по экрану */
@media(max-width:980px){
  .topbar.menu-open{background:color-mix(in srgb,var(--color-bg-soft) 96%,transparent)!important}
  .topbar nav{box-shadow:0 26px 70px color-mix(in srgb,var(--color-black) 65%,transparent)!important}
}

/* Галерея: сильнее выделена, desktop 3–6 колонок задаёт JS, mobile 2 колонки; при нечётном числе верхний ряд из 3 */
.portfolio-section{position:relative}
.gallery{--gallery-cols:4}
.gitem,.ph{border-radius:var(--radius-md)!important;border-color:var(--color-line)!important;box-shadow:0 14px 38px color-mix(in srgb,var(--color-black) 32%,transparent);opacity:0;animation:galleryItemIn .72s var(--ease) forwards;animation-delay:calc(var(--i,0) * 45ms)}
.gitem img{transition:transform .72s var(--ease),filter .45s var(--ease),opacity .45s var(--ease)!important}
.gitem:hover img{transform:scale(1.055)!important;filter:contrast(1.05) brightness(1.04)!important}.gitem:after{opacity:.18!important}.gitem:hover:after{opacity:1!important}
@keyframes galleryItemIn{to{opacity:1;transform:none}}
@media(min-width:761px){.gallery[data-cols="3"]{--gallery-cols:3}.gallery[data-cols="4"]{--gallery-cols:4}.gallery[data-cols="5"]{--gallery-cols:5}.gallery[data-cols="6"]{--gallery-cols:6}.gallery[data-cols="5"] .gitem,.gallery[data-cols="6"] .gitem{aspect-ratio:1.12/1}.gallery[data-cols="3"] .gitem{aspect-ratio:1.34/1}}
@media(max-width:760px){.gallery .gitem,.gallery .ph{grid-column:span 3}.gallery.mobile-odd .gitem:nth-of-type(1),.gallery.mobile-odd .gitem:nth-of-type(2),.gallery.mobile-odd .gitem:nth-of-type(3){grid-column:span 2}.portfolio-section{padding-top:20px!important}.mid-cta{padding-top:42px!important;padding-bottom:42px!important}.btn{width:100%!important}
}

/* до/после: один снимок с разделителем, а не две отдельные фотографии */
.ba-grid{grid-template-columns:1fr!important;max-width:920px;margin-left:auto!important;margin-right:auto!important}.ba{padding:16px!important;border-radius:var(--radius-xl)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--color-surface) 95%,transparent),color-mix(in srgb,var(--color-bg-soft) 95%,transparent))!important}.ba-slider{--pos:50%;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:14px;border:1px solid var(--color-line);background:var(--color-surface);user-select:none;touch-action:none}.ba-img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:0!important}.ba-before{position:absolute;inset:0;width:var(--pos);overflow:hidden}.ba-handle{position:absolute;left:var(--pos);top:0;bottom:0;transform:translateX(-50%);width:44px;border:0;background:transparent;color:var(--color-text);cursor:ew-resize;padding:0;z-index:3}.ba-handle span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}.ba-handle span:before,.ba-handle span:after{content:"";position:absolute;top:50%;width:8px;height:8px;border-top:2px solid var(--color-surface);border-left:2px solid var(--color-surface)}.ba-handle span:before{left:9px;transform:translateY(-50%) rotate(-45deg)}.ba-handle span:after{right:9px;transform:translateY(-50%) rotate(135deg)}.ba-range{position:absolute;inset:0;opacity:0;cursor:ew-resize;z-index:4}.ba h3,.ba p{max-width:760px;margin-left:auto!important;margin-right:auto!important;text-align:center}.ba h3{margin-top:18px!important}

/* одинаковая посадка колонок */
.service-grid,.price-grid,.reviews,.contact-grid{align-items:stretch!important}.service-card,.price-card,.review,.contact-grid a{border-radius:var(--card-radius)!important}.price-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.reviews{grid-template-columns:repeat(2,minmax(0,1fr))!important}.contact-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}@media(max-width:980px){.price-grid,.reviews,.contact-grid{grid-template-columns:1fr!important}}

/* более дорогая, но лёгкая анимация секций */
.reveal{opacity:0;filter:blur(5px);transition:opacity .78s var(--ease),transform .78s var(--ease),filter .78s var(--ease)!important}.reveal.in-view{opacity:1;transform:none;filter:none}.section-head h2{opacity:0;transition:opacity .68s var(--ease),transform .68s var(--ease)}.in-view .section-head h2{opacity:1;transform:none}.section-head small{opacity:0;transition:opacity .68s var(--ease) .08s,transform .68s var(--ease) .08s}.in-view .section-head small{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.gitem,.ph{animation:none!important;opacity:1!important;transform:none!important}.reveal,.section-head h2,.section-head small{opacity:1!important;transform:none!important;filter:none!important}}
@media(max-width:760px){}
.ba-before .ba-img{width:var(--ba-width,920px)!important;max-width:none!important;min-width:var(--ba-width,920px)!important}

/* PATCH 18 — cases buttons + desktop gallery row balancing */
.case-tabs button{
  text-transform:none!important;
  cursor:pointer!important;
  position:relative!important;
}
.case-tabs button:before,
.case-tabs button:after{display:none!important;content:none!important}
.case-tabs button:hover{transform:none!important;filter:none!important}
.gallery{
  display:grid!important;
  grid-template-columns:repeat(60,minmax(0,1fr))!important;
  gap:10px!important;
  grid-auto-flow:row dense!important;
}
.gallery .gitem,
.gallery .ph{
  grid-column:span 15;
  aspect-ratio:1.24/1!important;
}
.gallery .gitem.is-hidden{display:none!important}
.gallery .gitem[data-row-size="3"]{aspect-ratio:1.34/1!important}
.gallery .gitem[data-row-size="4"]{aspect-ratio:1.22/1!important}
.gallery .gitem[data-row-size="5"],
.gallery .gitem[data-row-size="6"]{aspect-ratio:1.08/1!important}

@media(max-width:760px){
  .case-tabs{
    justify-content:flex-start!important;
    overflow:auto!important;
    flex-wrap:nowrap!important;
    gap:22px!important;
    max-width:none!important;
    padding-bottom:10px!important;
    margin-bottom:22px!important;
  }
  .case-tabs button{white-space:nowrap!important;font-size:var(--type-size-14px)!important;padding-bottom:10px!important}
  .gallery{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .gallery .gitem,
  .gallery .ph{
    grid-column:span 3!important;
    aspect-ratio:1/1!important;
  }
  .gallery.mobile-odd .gitem.is-mobile-third{grid-column:span 2!important}
}

/* PATCH 19 — contact block cleanup from screenshot */
#contacts.contacts{
  margin:26px auto 34px!important;
}
#contacts.contacts h2{
  margin:0 auto 14px!important;
  text-align:center!important;
  font-size:var(--fs-section)!important;
}
#contacts.contacts>p{
  max-width:760px!important;
  margin:0 auto 30px!important;
  text-align:center!important;
  color:var(--type-color-rgba-255-255-255-72)!important;
  font-size:var(--type-size-17px)!important;
  line-height:var(--type-line-1-42)!important;
}
#contacts .contact-grid a:hover{
  background:linear-gradient(180deg,color-mix(in srgb,var(--color-surface-raised) 90%,transparent),color-mix(in srgb,var(--color-bg-soft) 94%,transparent))!important;
  box-shadow:0 24px 62px color-mix(in srgb,var(--color-black) 36%,transparent),0 0 0 1px color-mix(in srgb,var(--color-accent) 8%,transparent)!important;
}
#contacts .leadform input,
#contacts .leadform textarea{
  min-height:52px!important;
  padding:14px 16px!important;
  font-size:var(--type-size-15px)!important;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)!important;
}
#contacts .leadform input:focus,
#contacts .leadform textarea:focus{
  outline:none!important;
  background:color-mix(in srgb,var(--color-surface) 95%,transparent)!important;
}
#contacts .leadform textarea{
  resize:vertical!important;
}
#contacts .leadform .agree{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  margin:0!important;
  font-size:var(--type-size-13px)!important;
  line-height:var(--type-line-1-35)!important;
}
#contacts .leadform .agree input{
  width:15px!important;
  height:15px!important;
  margin:0!important;
  flex:0 0 auto!important;
  accent-color:var(--accent)!important;
}
#contacts .leadform .agree a{
  color:var(--accent)!important;
  text-decoration:none!important;
  border-bottom:1px solid color-mix(in srgb,var(--color-accent) 45%,transparent)!important;
}
#contacts .leadform .agree a:hover{
  color:var(--color-text)!important;
  border-bottom-color:var(--color-text)!important;
}
#contacts .leadform button{
  width:100%!important;
  border-radius:13px!important;
}
footer{
  text-align:center!important;
  padding-top:28px!important;
  padding-bottom:40px!important;
  color:var(--type-color-rgba-255-255-255-50)!important;
}
footer a{
  color:var(--type-color-rgba-255-255-255-70)!important;
}
footer a:hover{
  color:var(--accent)!important;
}
@media(max-width:760px){
  #contacts.contacts{
    margin-top:20px!important;
  }
  #contacts.contacts h2{
    font-size:var(--type-size-38px)!important;
  }
  #contacts.contacts>p{
    font-size:var(--type-size-15px)!important;
    margin-bottom:22px!important;
  }
}

/* PATCH 20 — admin batch upload, stable header, clean section backgrounds, tabs and contacts */

/* Фон секции появляется только если в админке реально загружено изображение */

/* Ещё плотнее расстояния между большими блоками */
.section{padding-top:34px!important;padding-bottom:34px!important}
.portfolio-section{padding-bottom:34px!important}
.prices-section,.cases-section,.before-section,.faq-section,.reviews-section{padding-top:34px!important;padding-bottom:34px!important}
.mid-cta{margin-top:24px!important;margin-bottom:24px!important;padding-top:42px!important;padding-bottom:42px!important}
.contacts{margin-top:24px!important}

/* Кейсы: убрать непонятную длинную полоску между табами и содержимым */
.case-tabs{
  margin-bottom:22px!important;
}
.case-tabs button{
  padding-bottom:7px!important;
}
/* Обработка: настоящие вкладки. Видна только активная пара до/после */
.ba-tabs{
  display:flex!important;
  justify-content:center!important;
  gap:48px!important;
  margin:0 auto 26px!important;
  max-width:920px!important;
}
.ba-tabs button{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--type-color-rgba-255-255-255-82)!important;
  padding:0 0 14px!important;
  min-height:0!important;
  font-family:var(--font-body)!important;
  font-size:var(--type-size-16px)!important;
  font-weight:var(--weight-semibold)!important;
  position:relative!important;
}
.ba-tabs button.active{
  color:var(--accent)!important;
}
.ba-tabs button.active::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-1px!important;
  height:2px!important;
  background:var(--accent)!important;
}
.ba-panel{display:none!important}
.ba-panel.active{display:block!important}
.ba-grid{display:block!important}

/* Обучение полностью скрыто, даже если осталось в старых данных */

/* Контакты: цельный блок, без кривой посадки карточек и формы */
#contacts .leadform{
  align-self:stretch!important;
}

@media(max-width:980px){
  #contacts .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .topbar,.topbar.is-scrolled{height:66px!important;min-height:66px!important}
  .ba-tabs{gap:22px!important;justify-content:flex-start!important;overflow:auto!important}
  .section{padding-top:28px!important;padding-bottom:28px!important}
}


/* =========================================================
   USER PATCH 21 — фиксированная шапка без изменения размера при скролле
   По скринам: шапка не должна становиться ниже/выше, меню не должно прыгать.
   ========================================================= */
:root{--header-height:72px;}
.topbar,
.topbar.is-scrolled{
  height:var(--header-height)!important;
  min-height:var(--header-height)!important;
  max-height:var(--header-height)!important;
  padding-top:0!important;
  padding-bottom:0!important;
  align-items:center!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--type-color-050505) 86%,transparent),color-mix(in srgb,var(--type-color-050505) 66%,transparent))!important;
  box-shadow:none!important;
  transform:none!important;
  transition:none!important;
}
.topbar > *,
.topbar.is-scrolled > *{
  align-self:center!important;
  transform:none!important;
}
.logo,
.topbar.is-scrolled .logo{
  height:var(--header-height)!important;
  min-height:var(--header-height)!important;
  max-height:var(--header-height)!important;
  display:flex!important;
  align-items:center!important;
  transform:none!important;
}
.logo img,
.topbar.is-scrolled .logo img{
  max-height:none!important;
  width:270px!important;
  height:250px!important;
  object-fit:contain!important;
  transform:none!important;
}
.topbar nav,
.topbar.is-scrolled nav{
  height:var(--header-height)!important;
  min-height:var(--header-height)!important;
  display:flex!important;
  align-items:center!important;
  line-height:var(--type-line-1)!important;
  transform:none!important;
}
.topbar-socials,
.topbar.is-scrolled .topbar-socials{
  height:var(--header-height)!important;
  display:flex!important;
  align-items:center!important;
  transform:none!important;
}
@media(max-width:760px){
  :root{--header-height:66px;}
  .logo img,.topbar.is-scrolled .logo img{max-height:56px!important;}
  .topbar nav,.topbar.is-scrolled nav{
    height:auto!important;
    min-height:0!important;
  }
}

/* PATCH 22 — contacts block normalized and social networks added */
#contacts.contacts{
  width:min(var(--container),calc(100% - var(--gutter)))!important;
  margin-top:24px!important;
  margin-bottom:28px!important;
  padding:clamp(46px,5vw,72px) clamp(28px,5vw,72px)!important;
  background:
    radial-gradient(circle at 12% 0,var(--color-accent-soft),transparent 36%),
    linear-gradient(180deg,color-mix(in srgb,var(--color-bg-soft) 98%,transparent),color-mix(in srgb,var(--type-color-050505) 98%,transparent))!important;
}
#contacts .eyebrow{
  margin-bottom:12px!important;
}
#contacts .contact-grid a:hover{
  transform:none!important;
  border-color:color-mix(in srgb,var(--color-accent) 46%,transparent)!important;
}
#contacts .leadform{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:28px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  border:1px solid color-mix(in srgb,var(--color-text) 10%,transparent)!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--color-surface) 88%,transparent),color-mix(in srgb,var(--color-bg-soft) 94%,transparent))!important;
  box-shadow:0 28px 90px color-mix(in srgb,var(--color-black) 46%,transparent)!important;
}
#contacts .leadform input,
#contacts .leadform textarea{
  border-radius:13px!important;
  border:1px solid var(--color-line-strong)!important;
  background:color-mix(in srgb,var(--color-text) 3.5%,transparent)!important;
  color:var(--color-text)!important;
}
#contacts .leadform input:focus,
#contacts .leadform textarea:focus{
  border-color:color-mix(in srgb,var(--color-accent) 68%,transparent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 10%,transparent)!important;
}
#contacts .leadform textarea,
#contacts .leadform .agree,
#contacts .leadform button{
  grid-column:1/-1!important;
}
#contacts .leadform textarea{
  min-height:128px!important;
}
#contacts .leadform .agree{
  margin-top:2px!important;
  color:var(--color-subtle)!important;
}
#contacts .leadform button{
  min-height:58px!important;
  margin-top:0!important;
}
footer{
  align-items:center!important;
  justify-content:space-between!important;
}
@media(max-width:980px){
  #contacts .contact-grid{max-width:620px!important;margin-left:auto!important;margin-right:auto!important}
}
@media(max-width:760px){
  #contacts.contacts{width:calc(100% - 28px)!important;padding:34px 14px!important;border-radius:20px!important}
  #contacts .leadform{grid-template-columns:1fr!important;padding:16px!important;border-radius:var(--radius-xl)!important}
}

/* =========================================================
   USER PATCH 23 — блок обработки: две нормальные вкладки, не кнопки
   ========================================================= */
.before-section .ba-tabs{
  width:min(920px,100%)!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0!important;
  margin:22px auto 34px!important;
  background:transparent!important;
}
.before-section .ba-tabs button{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  padding:0 18px 16px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--type-color-rgba-255-255-255-72)!important;
  font-family:var(--font-body)!important;
  font-size:var(--type-size-18px)!important;
  line-height:var(--type-line-1-25)!important;
  font-weight:var(--weight-medium)!important;
  text-align:center!important;
  position:relative!important;
  cursor:pointer!important;
}
.before-section .ba-tabs button:hover{
  color:var(--color-text)!important;
}
.before-section .ba-tabs button.active{
  color:var(--accent)!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.before-section .ba-tabs button::after{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-1px!important;
  height:2px!important;
  background:transparent!important;
  transform:none!important;
  width:auto!important;
}
.before-section .ba-panel{display:none!important;}
.before-section .ba-panel.active{display:block!important;}
.before-section .ba-grid{display:block!important;}
.before-section .ba{
  margin-left:auto!important;
  margin-right:auto!important;
}
@media(max-width:760px){
  .before-section .ba-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    overflow:visible!important;
    gap:0!important;
  }
  .before-section .ba-tabs button{
    font-size:var(--type-size-15px)!important;
    padding:0 8px 13px!important;
    white-space:normal!important;
  }
}

.chat-fab{border:0;cursor:pointer;font:inherit}

/* Финальный слой glass-кнопок: расположен после компонентных патчей */
.btn,
.leadform button,
.cookie button,
.case-tabs button,
.ba-tabs button,
.filters button {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-shadow);
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}
.btn::before{background:var(--glass-highlight)}
.btn:hover,.leadform button:hover,.cookie button:hover,.case-tabs button:hover,.ba-tabs button:hover,.filters button:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-hover);box-shadow:var(--glass-shadow-hover)}
.btn:active,.leadform button:active,.cookie button:active,.case-tabs button:active,.ba-tabs button:active,.filters button:active{background:var(--glass-bg-active)}
.btn--main:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--color-accent) 82%,var(--color-text)),var(--color-accent))}

/* Header/menu: поведение и матовое стекло оригинала */
.topbar.menu-open { background: var(--menu-glass-bg); backdrop-filter: blur(var(--menu-glass-blur)) saturate(var(--menu-glass-saturate)); -webkit-backdrop-filter: blur(var(--menu-glass-blur)) saturate(var(--menu-glass-saturate)); box-shadow: var(--menu-glass-shadow); border-bottom-color: var(--menu-glass-border); }
.topbar.menu-open nav { background: var(--menu-glass-bg); border: 1px solid var(--menu-glass-border); box-shadow: var(--menu-glass-shadow); backdrop-filter: blur(var(--menu-glass-blur)) saturate(var(--menu-glass-saturate)); -webkit-backdrop-filter: blur(var(--menu-glass-blur)) saturate(var(--menu-glass-saturate)); }
@media (max-width: 760px) {
  .topbar nav { font-size: var(--menu-mobile); }
  .hero-title { font-size: var(--h1-mobile); }
  .section-head h2 { font-size: var(--h2-mobile); }
  .service-card h3, .price-card h3, .case h3 { font-size: var(--h3-mobile); }
}

.legal-page{width:min(900px,calc(100% - var(--gutter)));margin:0 auto;padding:42px 0 80px}
.legal-back{display:inline-flex;margin-bottom:34px;color:var(--accent);font-weight:var(--weight-bold)}
.legal-content{padding:clamp(24px,5vw,56px);border:1px solid var(--color-line);border-radius:var(--radius-xl);background:linear-gradient(180deg,var(--color-surface-raised),var(--color-surface-deep));box-shadow:var(--shadow-card)}
.legal-content p{margin:0 0 14px;color:var(--color-soft);font-size:var(--text-mobile);line-height:var(--type-line-1-7)}
.legal-content p:first-child{margin-bottom:28px;color:var(--accent);font-family:var(--font-body);font-size:clamp(28px,var(--h2-desktop),42px);font-weight:var(--weight-regular);line-height:var(--type-line-1-15)}
.legal-gap{height:8px}
@media(max-width:760px){.legal-page{width:calc(100% - 28px);padding-top:26px}.legal-content{padding:22px 18px}.legal-content p{font-size:var(--text-mobile)}}

/* FAQ в стиле оригинального блока T1118 */
.faq-section .section-head{max-width:900px;margin-bottom:40px}.faq-section .section-head p{color:var(--accent)}.faq-section .section-head h2{color:var(--accent);font-size:var(--h2-desktop);font-weight:var(--weight-medium)}.faq-section .section-head small{color:var(--color-text);font-size:var(--lead-desktop);font-weight:var(--weight-medium)}.faq{max-width:1040px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;align-items:start}.faq-column{min-width:0;display:flex;flex-direction:column}.faq details{border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);border-radius:0;background:transparent;padding:0}.faq summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;color:var(--color-text)}.faq summary:after{content:'+';float:none;flex:none;place-items:center;border-radius:50%;background:var(--accent);color:var(--color-bg);font-size:var(--type-size-30px);font-weight:var(--weight-light);line-height:var(--type-line-1)}.faq details[open] summary:after{content:'−'}.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}.faq details[open] .faq-answer{grid-template-rows:1fr}.faq-answer__inner{min-height:0;overflow:hidden}.faq p{margin:0;color:var(--color-text);font-weight:var(--weight-regular)}.faq-cta{margin-top:38px}.faq-cta h3{font-size:var(--lead-desktop);font-weight:var(--weight-medium)}@media(max-width:960px){.faq{grid-template-columns:1fr;max-width:760px;gap:0}.faq details{margin-bottom:-2px}}@media(max-width:760px){.faq-section .section-head h2{font-size:var(--h2-mobile)}.faq-section .section-head small{font-size:var(--lead-mobile)}.faq p{font-size:var(--small-mobile);padding-right:42px}.faq summary:after{width:34px;height:34px;font-size:var(--type-size-25px)}}

/* Точная доводка FAQ по оригинальному скриншоту */
.faq summary:focus{outline:none}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.faq summary:after{display:none!important}
.faq .faq-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border:0;border-radius:0;background:transparent;color:var(--accent);font-family:'Material Symbols Outlined';font-size:var(--type-size-0);line-height:var(--type-line-1);font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 34;transition:transform .2s ease}
.faq .faq-icon::before{content:'+';font-family:var(--font-sans);font-size:var(--type-size-34px);font-weight:var(--weight-light);line-height:var(--type-line-1)}
.faq details[open] .faq-icon{transform:rotate(45deg)}
.faq p{font-size:var(--small-desktop);line-height:var(--type-line-1-55)}
@media(max-width:760px){.faq summary{min-height:72px;padding:16px 0}.faq p{padding-bottom:24px}}

/* FAQ использует только токены компонента */
.faq details{border-top-width:var(--faq-border-width);border-bottom-width:var(--faq-border-width)}
.faq summary{min-height:var(--faq-row-height);padding:var(--faq-row-padding)}
.faq p{padding:var(--faq-answer-padding)}
.faq summary:after{width:var(--faq-icon-size);height:var(--faq-icon-size)}
@media(max-width:760px){:root{--faq-row-height:88px;--faq-row-padding:16px 0;--faq-answer-padding:0 42px 24px 0;--faq-icon-size:34px}}
@media(prefers-reduced-motion:reduce){.faq-answer{transition:none}}
/* Админка: понятные карточки и загрузка медиа */

/* Полноценный интерфейс админки */
/* Компактный редактор верхнего меню */
/* Бренд и соцсети в редакторе меню */

/* Компактный логотип в редакторе меню */

/* Единый вертикальный ритм во всех разделах админки */

/* Иконки верхнего меню и единый селект статуса */
.topbar-socials>a{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid color-mix(in srgb,var(--color-text) 16%,transparent);border-radius:50%;background:color-mix(in srgb,var(--color-bg-soft) 35%,transparent);color:var(--accent);transition:var(--transition-fast)}.topbar-socials>a:hover{border-color:color-mix(in srgb,var(--color-accent) 44%,transparent);background:color-mix(in srgb,var(--color-accent) 9%,transparent)}.topbar-socials>a img{display:block;width:20px;height:20px;object-fit:contain}

/* Компактная загрузка любых изображений в админке */

/* Свои выпадающие меню вместо системных */

/* Плотные карточки контента: одинаковый ритм во всех разделах */

/* Плотная компоновка редактора во всех разделах */

/* Компактная и ровная шапка раздела меню */

/* Понятные инструменты выбора токенов */

@media(max-width:760px){.case-tabs{padding-inline:4px}.case-tabs button{flex:0 0 auto}.topbar .socials{display:none}.topbar nav{max-height:calc(100vh - 90px);overflow:auto}}

@media(max-width:760px){.topbar-socials{margin-left:auto;display:flex;gap:8px;align-items:center}.topbar-socials a{width:40px;height:40px}.topbar .logo{z-index:2}}

@media(min-width:1101px){
  .hero-features{width:100%;max-width:1048px!important;grid-template-columns:repeat(4,minmax(0,250px));gap:16px!important}
}
/* Исправления взаимодействий и адаптивных границ. */
body.photo-is-open{overflow:hidden!important}
.filters[hidden],.portfolio-filter-select[hidden]{display:none!important}
.topbar nav a{overflow-wrap:normal}
section[id]{scroll-margin-top:100px}
.portfolio-section .section-head h2{color:var(--accent)!important}
@media(max-width:760px){.case-tabs button{flex-shrink:0!important;width:auto!important}.contacts .contact-grid{grid-template-columns:1fr!important}}
/* Единая линия шапки; высота и поведение меню сохранены. */
.topbar,.topbar.is-scrolled{display:flex!important;gap:clamp(12px,2vw,24px)!important}
.topbar .navright{flex:none}
.topbar .navright a,.topbar .navright a:hover{border:0;border-radius:0;background:transparent;box-shadow:none;transform:none;overflow:visible;width:auto;min-width:40px;height:40px;padding:0 4px;line-height:var(--type-line-1)}
.topbar .navright .custom-icon{--icon-size:22px;display:block}
.topbar .navright a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(min-width:761px){
 .topbar .navlinks{position:static;min-width:0;gap:clamp(10px,2vw,28px);padding:0;margin:0}
 .topbar .navlinks a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:0;line-height:var(--type-line-1-3);white-space:nowrap}
}
@media(max-width:760px){
 .topbar .menu-toggle{margin-left:0}
 .topbar .navlinks a{display:flex;align-items:center;text-align:left}
 .topbar .logo,.topbar.is-scrolled .logo{width:76px!important;height:76px!important}
 .topbar .logo img,.topbar.is-scrolled .logo img{width:76px!important;height:76px!important;max-height:76px!important}
}
.location-route{display:block;margin-top:8px;color:var(--accent);font-size:var(--type-size-13px)}
.mid-cta{background:var(--color-bg)!important}
.mid-cta p,.mid-cta a{position:relative;z-index:1}

/* Сравнение до/после: без лишней внешней карточки, ширина 1280px. */
.before-section .ba-grid{max-width:var(--container)!important}
.before-section .ba,.education-processing-section .ba{max-width:none!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.before-section .ba-slider{border-radius:14px!important}
@media(min-width:761px){.hero{min-height:900px!important}.hero__inner{padding-bottom:26px!important}}
.ba-before{border-right:1px solid color-mix(in srgb,var(--color-text) 90%,transparent)!important;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--color-black) 35%,transparent))!important}
.ba-handle span{width:32px!important;height:32px!important;background:transparent!important;border:0!important;box-shadow:none!important}
.ba-handle span:before,.ba-handle span:after{border-color:var(--color-text)!important}
.contacts{border:0!important;background:transparent!important;padding:56px 0!important;margin-bottom:36px!important}
.contacts .section-head h2{font-size:var(--type-size-clamp-30px-3-3vw-48px)!important;letter-spacing:var(--type-track-neg-052em)!important;line-height:var(--type-line-1-05)!important}.contacts .contact-grid{max-width:820px;grid-template-columns:repeat(2,minmax(0,1fr))}
.contacts .contact-grid a{border-radius:14px!important}
.contacts .contact-grid i{width:34px;height:34px;border:0;border-radius:0;font-size:var(--type-size-20px);flex:none;margin-right:16px}
.contacts .contact-grid span{max-width:none;font-size:var(--type-size-15px)}.contacts .contact-grid b{display:block;font-size:var(--type-size-18px);color:var(--color-text);margin-bottom:3px}.contacts .contact-grid small{display:block}.contact-form-note{display:none}
@media(max-width:760px){.contacts{padding:42px 0!important}}

/* Отзывы: горизонтальная карусель с прокруткой и snap-навигацией. */
.review-carousel{margin:0 auto}
.reviews-section .reviews{display:flex!important;grid-template-columns:none!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.reviews-section .reviews::-webkit-scrollbar{display:none}
.reviews-section .review{min-width:0;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.reviews-section .review img{display:block;width:100%;max-height:480px;object-fit:contain;margin:0 auto 18px}
.review-controls{align-items:center;gap:18px;margin-top:20px}
.review-arrow{display:grid;place-items:center;cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.review-arrow .material-symbols-outlined{font-size:var(--type-size-24px)}
.review-dots{display:flex;align-items:center;justify-content:center;gap:9px}
.review-dots button{width:8px;height:8px;padding:0;border:0;border-radius:var(--radius-pill);background:var(--color-line-strong);cursor:pointer;transition:width .2s var(--ease),background .2s var(--ease)}
.review-dots button[aria-current="true"]{width:24px;background:var(--accent)}
@media(prefers-reduced-motion:reduce){.reviews-section .reviews{scroll-behavior:auto}.review-arrow,.review-dots button{transition:none}}

/* Убираем декоративные горизонтальные разделители; границы карточек сохраняются. */
.topbar,.topbar.is-scrolled,.topbar.menu-open{border-bottom:0!important}
footer{border-top:0!important}
.filters,.case-tabs,.ba-tabs,.before-section .ba-tabs{border-bottom:0!important}
.filters button.active,.filters button:hover{box-shadow:none!important}
.case-tabs button::after,.before-section .ba-tabs button::after{display:none!important;content:none!important}
.faq-column{gap:16px}
.faq details{border:0!important;margin:0!important}
.service-card ul{border-top:0!important;padding-top:0!important}

/* Кейсы: отдельный контейнер шириной до 1280px, не меняя общий токен сайта. */
.cases-section.section,.locations-section.section{width:min(1280px,calc(100% - var(--gutter)))!important}
@media(max-width:760px){.cases-section.section,.locations-section.section{width:calc(100% - 28px)!important}}

/* FAQ: вернуть тонкие акцентные разделители между вопросами. */
#faq .faq-column{gap:0!important}
#faq .faq-column details{border-top:2px solid var(--accent)!important;border-bottom:2px solid var(--accent)!important;margin:0 0 -2px!important}

/* Карусель отзывов: два компактных отзыва на широком экране, один — на мобильном. */
.review-carousel{width:min(1160px,100%)!important}
.reviews-section .reviews{gap:16px!important}
.reviews-section .review{flex:0 0 calc((100% - 16px)/2)!important;width:calc((100% - 16px)/2)!important}
@media(max-width:760px){.reviews-section .reviews{gap:12px!important}.reviews-section .review{flex:0 0 100%!important;width:100%!important}}

/* На телефонах вкладки кейсов заменяются компактным нативным списком выбора. */
@media(max-width:760px){}

/* Отзывы: бесконечная лента без карточной подложки; стрелки лежат поверх фото. */
.review-carousel{position:relative!important;padding-bottom:32px!important;overflow:visible!important}
.reviews-section .review{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
.reviews-section .review img{border-radius:10px!important}
.review-controls{position:absolute!important;left:0!important;right:0!important;bottom:0!important;display:flex!important;justify-content:center!important;margin:0!important;pointer-events:none!important}
.review-dots{pointer-events:auto!important}
.review-arrow{position:absolute!important;z-index:3!important;top:calc((100% - 32px)/2)!important;backdrop-filter:blur(8px);pointer-events:auto!important}
.review-arrow--prev{left:14px!important}
.review-arrow--next{right:14px!important}
.review-arrow:hover{border-color:var(--accent)!important}

/* В сложенной адаптивной карточке кейса текст не должен накрывать галерею при прокрутке. */
@media(max-width:1100px){
  .case-copy{position:static!important;min-width:0!important}
  .case-media,.case-thumbs{min-width:0!important}
  .case-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .case-thumbs img{max-width:100%!important;min-width:0!important}
}

/* Точные отступы по согласованной схеме между указанными блоками. */
.services-section{padding-top:34px!important;padding-bottom:17px!important;background-color:var(--color-bg)!important}
.portfolio-section{padding-top:17px!important}
#contacts.contacts{padding-top:42px!important}

/* Расположение первого экрана по референсу. */
.hero-title{margin-bottom:78px!important}
.hero__text{margin-bottom:64px!important}
.hero-metrics{margin-bottom:19px!important}
.hero-metrics>div{display:grid!important;grid-template-columns:1fr;grid-template-rows:32px 32px auto;align-items:start;row-gap:16px}
.hero-metrics>div>i{grid-column:1;grid-row:1;width:32px!important;height:32px!important;margin:0!important;font-size:var(--type-size-32px)!important;transform:none}
.hero-metrics>div>b{grid-column:1;grid-row:2;font-size:var(--type-size-32px)!important;line-height:var(--type-line-1)!important}
.hero-metrics>div>span{grid-column:1;grid-row:3;margin-top:0!important}
.hero-actions{margin-bottom:48px!important}
.topbar .navlinks{flex:0 0 auto!important;justify-content:flex-start!important}
@media(min-width:761px){.hero__inner{padding-top:165px!important}}
@media(min-width:1101px){.topbar .navlinks{margin-left:32px!important}}
.hero-metrics .custom-icon{--icon-size:32px!important}
.hero-metrics>div>i img{width:32px!important;height:32px!important}

/* CTA FAQ по референсу: полноширинный фотоблок, текст слева, Telegram справа. */
.faq-section .faq-cta{
  position:relative!important;
  isolation:isolate;
  width:100vw!important;
  max-width:none!important;
  min-height:176px;
  margin:64px calc(50% - 50vw) 0!important;
  padding:32px max(28px,calc((100vw - var(--container))/2))!important;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  text-align:left!important;
  overflow:hidden;
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--color-black) 90%,transparent),color-mix(in srgb,var(--color-black) 82%,transparent)),var(--faq-cta-image);
  background-position:center,center 54%;
  background-size:cover;
}
.faq-section .faq-cta h3{position:relative;z-index:1;max-width:760px;margin:0!important;font-size:var(--type-size-clamp-18px-1-45vw-24px)!important;font-weight:var(--weight-regular)!important;line-height:var(--type-line-1-3)!important}
.faq-section .faq-cta .btn{gap:10px}
.faq-cta__telegram-icon{width:20px;height:20px;flex:none}
@media(max-width:760px){.faq-section .faq-cta{min-height:0;margin:40px calc(50% - 50vw) 0!important;padding:24px 20px!important;flex-direction:row;align-items:center;gap:18px}.faq-section .faq-cta h3{flex:1 1 auto;min-width:0;font-size:var(--type-size-18px)!important}.faq-section .faq-cta .btn{flex:0 0 auto;width:fit-content!important;min-width:0!important;max-width:100%;white-space:nowrap}}
@media(max-width:560px){.faq-section .faq-cta{flex-direction:column;align-items:flex-start}.faq-section .faq-cta .btn{align-self:flex-start}}

/* Убираем фотографическую подложку CTA после FAQ. */
.faq-section .faq-cta{background:transparent!important}
.faq-section .faq-cta{width:min(1280px,calc(100vw - var(--gutter)))!important;left:50%;transform:translateX(-50%);margin:64px 0 0!important;padding:32px 0!important}
@media(max-width:760px){.faq-section .faq-cta{width:100%!important;left:auto;transform:none;margin:40px 0 0!important;padding:24px 0!important}}

/* У карточек услуг нет hover-эффектов; сохраняем только появление при прокрутке. */
.services-section .service-card{transition:opacity .72s var(--ease),translate .72s var(--ease)!important}
.services-section .service-card:hover{transform:none!important;translate:0 0!important;border-color:var(--color-line-soft)!important;box-shadow:0 22px 56px color-mix(in srgb,var(--color-black) 42%,transparent)!important}
.services-section .service-card:hover:before{opacity:.42!important}
/* Сетка программы обучения; визуальные стили наследуются от сайта. */
.education-modules-section{width:min(calc(var(--container) + var(--gutter) * 2),calc(100% - var(--gutter)))}
.education-module-grid{display:grid;gap:var(--section-gap-y);margin:0 auto}
.education-processing-section{width:min(calc(var(--container) + var(--gutter) * 2),calc(100% - var(--gutter)))}
.education-processing-section .ba-grid{max-width:none}
.education-presets-overlay{position:absolute;inset:auto 0 0;z-index:5;padding:var(--gutter);background:linear-gradient(transparent,color-mix(in srgb,var(--color-black) 90%,transparent));pointer-events:none}
.education-presets-overlay>div{max-width:60%}
.education-processing-section .education-presets-overlay h3{margin:var(--text-sm) 0!important;text-align:left;color:var(--accent);font-size:var(--text-xl)}
.education-processing-section .education-presets-overlay p{margin:0 0 var(--text-lg)!important;text-align:left;color:var(--color-text);font-size:var(--text-md)}
.education-presets-overlay .btn{pointer-events:auto;min-width:0}
@media(max-width:760px){.education-processing-section .ba-slider{aspect-ratio:4/5}.education-presets-overlay{padding:var(--text-lg)}.education-presets-overlay>div{max-width:100%}.education-presets-overlay .btn{width:100%}}
.education-module{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gutter);align-items:center}
.education-module--with-image{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.education-module--with-image.education-module--reverse{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.education-module__content{min-width:0}
.education-module__image{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--card-radius)}
.education-module--with-image.education-module--reverse .education-module__image{grid-column:1;grid-row:1}
.education-module--with-image.education-module--reverse .education-module__content{grid-column:2;grid-row:1}
@media(max-width:760px){.education-modules-section{width:calc(100% - var(--text-sm) * 2)}.education-module,.education-module--with-image,.education-module--with-image.education-module--reverse{grid-template-columns:minmax(0,1fr);gap:var(--text-xl)}.education-module--with-image.education-module--reverse .education-module__image,.education-module--with-image.education-module--reverse .education-module__content{grid-column:auto;grid-row:auto}}

/* На десктопе резервируем те же строки заголовка и описания, что у Hero главной:
   метрики, кнопки и преимущества обучения остаются на одинаковых координатах. */
@media(min-width:761px){
  .education-page .hero-title{min-height:3.06em}
  .education-page .hero__text{min-height:4.26em}
}

/* Контакты без дополнительной общей подложки; фон из настроек админки сохраняется. */
#contacts.contacts{
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

/* Единая средняя типографика фильтров портфолио и вкладок кейсов. */
.filters,.case-tabs{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:28px!important;
  flex-wrap:wrap!important;
  border:0!important;
}
.filters{margin:18px auto 26px!important;padding:0 0 10px!important}
.case-tabs{width:min(1160px,100%)!important;max-width:1160px!important;margin:0 auto 22px!important;padding:0 0 10px!important}
.filters button,.case-tabs button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  padding:0 0 10px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--color-soft)!important;
  font-family:var(--font-body)!important;
  font-size:var(--type-size-16px)!important;
  font-weight:var(--weight-medium)!important;
  line-height:var(--type-line-1-2)!important;
  letter-spacing:var(--type-track-0)!important;
  white-space:nowrap!important;
  transition:color .22s var(--ease)!important;
}
.filters button.active,.case-tabs button.active,
.filters button:hover,.case-tabs button:hover{color:var(--accent)!important}

/* Финальная мобильная раскладка шапки и футера. */
@media(max-width:760px){
  .topbar,.topbar.is-scrolled{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    align-items:center!important;
    gap:12px!important;
    padding:0 16px!important;
  }
  .topbar .logo,.topbar.is-scrolled .logo{
    position:static!important;
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    margin:0!important;
  }
  .topbar .menu-toggle{
    display:grid!important;
    place-items:center!important;
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    order:initial!important;
    margin:0!important;
    z-index:12!important;
  }
  .topbar .menu-toggle svg{display:block!important;width:20px!important;height:20px!important;place-self:center!important;margin:0!important}
  .topbar .navright{display:none!important}
  .topbar nav,.topbar.menu-open nav{
    opacity:1!important;
  }
  footer{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    justify-content:start!important;
    justify-items:start!important;
    align-items:start!important;
    gap:12px!important;
    width:100%!important;
    margin:28px 0 0!important;
    padding:24px 20px calc(28px + env(safe-area-inset-bottom))!important;
    text-align:left!important;
    font-size:var(--type-size-12px)!important;
    line-height:var(--type-line-1-5)!important;
    overflow-wrap:anywhere!important;
  }
  footer>*{min-width:0!important;margin:0!important}
}

/* Разводим быстрые действия по углам: чат слева, возврат наверх справа. */
.back-to-top{
  position:fixed;right:22px;bottom:22px;z-index:70;
  display:grid;place-items:center;width:50px;height:50px;padding:0;
  border:1px solid var(--glass-border);border-radius:50%;
  background:var(--glass-bg);color:var(--accent);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:var(--glass-shadow);cursor:pointer;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease,transform .2s ease,background .2s ease,border-color .2s ease;
}
.back-to-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.back-to-top:hover{background:var(--glass-bg-hover);border-color:var(--accent)}
.back-to-top span{font-size:var(--type-size-22px)}
.back-to-top:focus-visible,.chat-fab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.chat-fab--icon-only{padding:0;justify-content:center}
.chat-fab--icon-only>span:not(.chat-fab__icon){display:none!important}
@media(max-width:760px){
  .chat-fab--icon-only{left:auto!important;right:0!important;bottom:0!important;padding:0!important;justify-content:center!important}
  .chat-fab--icon-only>span:not(.chat-fab__icon){display:none!important}
}

/* Символьные контролы: без подложки, рамки и самостоятельных эффектов карточек. */
.lightbox .lightbox-prev,.lightbox .lightbox-next,.lightbox .lightbox-close,
.review-arrow,.back-to-top,.chat-fab--icon-only{
  display:grid!important;place-items:center!important;
  width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;
  padding:0!important;border:0!important;border-radius:0!important;
  outline:0!important;background:transparent!important;color:var(--color-text)!important;
  box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  appearance:none!important;-webkit-appearance:none!important;
  transition:color .2s var(--ease)!important;transform:none;
}
.lightbox .lightbox-prev,.lightbox .lightbox-next,.review-arrow{transform:translateY(-50%)!important}
.lightbox .lightbox-prev .material-symbols-outlined,.lightbox .lightbox-next .material-symbols-outlined,
.lightbox .lightbox-close .material-symbols-outlined,.review-arrow .material-symbols-outlined,
.back-to-top .material-symbols-outlined,.chat-fab--icon-only .chat-fab__icon{
  display:grid!important;place-items:center!important;width:24px!important;height:24px!important;
  padding:0!important;background:transparent!important;color:inherit!important;font-size:var(--type-size-24px)!important;line-height:var(--type-line-1)!important;
}
.chat-fab--icon-only::before{display:none!important;content:none!important}
.lightbox .lightbox-prev:hover,.lightbox .lightbox-next:hover,.lightbox .lightbox-close:hover,
.review-arrow:hover,.back-to-top.is-visible:hover,.chat-fab--icon-only:hover,
.lightbox .lightbox-prev:focus-visible,.lightbox .lightbox-next:focus-visible,
.lightbox .lightbox-close:focus-visible,.review-arrow:focus-visible,
.back-to-top:focus-visible,.chat-fab--icon-only:focus-visible{
  outline:0!important;background:transparent!important;border:0!important;box-shadow:none!important;
  color:var(--accent)!important;transform:none;filter:none!important;
}
.lightbox .lightbox-prev:hover,.lightbox .lightbox-next:hover,.review-arrow:hover,
.lightbox .lightbox-prev:focus-visible,.lightbox .lightbox-next:focus-visible,.review-arrow:focus-visible{transform:translateY(-50%)!important}
.lightbox .lightbox-prev:active,.lightbox .lightbox-next:active,.lightbox .lightbox-close:active,
.review-arrow:active,.back-to-top.is-visible:active,.chat-fab--icon-only:active{color:var(--accent)!important;background:transparent!important;box-shadow:none!important}
.lightbox .lightbox-prev[hidden],.lightbox .lightbox-next[hidden]{display:none!important}

/* Финальные мобильные исправления: постоянная доступность «наверх» и ровный ритм hero. */
@media(max-width:760px){
  .back-to-top{
    right:14px!important;bottom:calc(18px + env(safe-area-inset-bottom))!important;z-index:90!important;
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;
  }
  .hero-title{margin-bottom:28px!important}
  .hero__text{margin-bottom:28px!important}
  .hero-metrics{margin-bottom:22px!important}
  .hero-actions{margin-bottom:24px!important}
}

/* Контакты: две равные карточки с настоящим Telegram-знаком и общей осью текста. */
#contacts .contact-grid{
  width:min(820px,100%)!important;max-width:820px!important;margin:28px auto 0!important;
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;align-items:stretch!important;
}
#contacts .contact-grid>a{
  box-sizing:border-box!important;min-width:0!important;min-height:112px!important;padding:20px 24px!important;
  display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;align-items:center!important;
  justify-content:initial!important;column-gap:16px!important;text-align:left!important;
}
#contacts .contact-grid>a>.contact-link-icon{
  width:44px!important;height:44px!important;min-width:44px!important;margin:0!important;
  display:grid!important;place-items:center!important;align-self:center!important;
  border:0!important;border-radius:0!important;background:transparent!important;color:var(--color-text)!important;
  transition:color .2s var(--ease)!important;
}
#contacts .contact-grid>a:hover>.contact-link-icon{color:var(--accent)!important}
#contacts .contact-grid>a>.contact-link-icon svg{display:block!important;width:28px!important;height:28px!important}
#contacts .contact-grid>a>.contact-link-copy{min-width:0!important;display:grid!important;gap:5px!important;align-content:center!important}
#contacts .contact-grid>a>.contact-link-copy b{margin:0!important;font-size:var(--type-size-16px)!important;line-height:var(--type-line-1-25)!important}
#contacts .contact-grid>a>.contact-link-copy small{margin:0!important;font-size:var(--type-size-13px)!important;line-height:var(--type-line-1-4)!important}
@media(max-width:760px){
  #contacts .contact-grid{width:min(440px,100%)!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;margin-top:22px!important}
  #contacts .contact-grid>a{min-height:96px!important;padding:16px 18px!important}
}

/* Единый блок быстрых действий на всех публичных страницах. */
.floating-actions{position:fixed!important;right:22px!important;bottom:108px!important;left:auto!important;top:auto!important;z-index:90!important;width:48px;height:48px;}
.floating-actions .chat-fab--icon-only{position:absolute!important;left:auto!important;right:0!important;bottom:0!important;top:auto!important;z-index:2!important;}
.quick-contact-menu{
  position:absolute!important;left:auto!important;right:0!important;bottom:62px!important;z-index:3!important;
  width:min(340px,calc(100vw - 28px))!important;padding:8px!important;margin:0!important;
  display:grid!important;gap:4px!important;border:1px solid var(--color-line-strong)!important;
  border-radius:14px!important;background:color-mix(in srgb,var(--color-bg) 98%,transparent)!important;color:var(--color-text)!important;
  box-shadow:0 16px 44px color-mix(in srgb,var(--color-black) 55%,transparent)!important;backdrop-filter:blur(14px)!important;
}
.quick-contact-menu[hidden]{display:none!important}
.quick-contact-link{
  min-width:0!important;display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;
  align-items:center!important;gap:12px!important;padding:12px!important;border:0!important;
  border-radius:9px!important;background:transparent!important;color:var(--color-text)!important;
  text-decoration:none!important;transition:background .18s var(--ease),color .18s var(--ease)!important;
}
.quick-contact-link:hover,.quick-contact-link:focus-visible{background:color-mix(in srgb,var(--color-accent) 10%,transparent)!important;color:var(--accent)!important;outline:0!important}
.quick-contact-link svg{width:24px!important;height:24px!important;color:var(--accent)!important}
.quick-contact-link span{min-width:0!important;display:grid!important;gap:3px!important}
.quick-contact-link b{font-size:var(--type-size-14px)!important;line-height:var(--type-line-1-25)!important}
.quick-contact-link small{color:var(--color-muted)!important;font-size:var(--type-size-12px)!important;line-height:var(--type-line-1-35)!important}
@media(max-width:760px){
  .floating-actions{right:14px!important;bottom:calc(102px + env(safe-area-inset-bottom))!important}
  .quick-contact-menu{bottom:62px!important;width:min(340px,calc(100vw - 28px))!important}
}

footer>span{flex:0 0 100%;width:100%;text-align:center}
.hero-actions{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  gap:clamp(8px,1.2vw,15px)!important;
}
.hero-actions>.btn{
  flex:0 1 auto!important;
  width:auto!important;
  min-width:225px!important;
  padding-inline:24px!important;
  font-size:var(--type-size-16px)!important;
  white-space:nowrap!important;
}
@media(max-width:760px){
  .hero-actions>.btn{
    flex:1 1 0!important;
    min-width:0!important;
    max-width:calc((100% - clamp(8px,1.2vw,15px))/2);
    padding-inline:8px!important;
    font-size:var(--type-size-12px)!important;
    white-space:normal!important;
    text-align:center;
    overflow-wrap:anywhere;
  }
  .hero-features{
    align-content:start!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:1fr!important;
    row-gap:12px!important;
    column-gap:10px!important;
  }
  .hero-features article{
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    min-height:0!important;
    height:100%!important;
    align-self:stretch!important;
    align-content:start!important;
    padding:18px 16px!important;
  }
  .hero-features article>i{width:30px!important;height:30px!important}
  .hero-features article>div{min-width:0!important}
  .hero-features h3{font-size:var(--type-size-15px)!important;overflow-wrap:anywhere}
  .hero-features p{font-size:var(--type-size-13px)!important;line-height:var(--type-line-1-4)!important}
}
@media(max-width:760px){
  .filters{display:none!important}
  .portfolio-filter-select{display:block!important}
  #cases .case-tabs{display:none!important}
  #cases .case-filter-select{display:block!important}
}
@media(max-width:760px){
  .topbar nav,.topbar.menu-open nav{
    position:absolute!important;
    top:calc(100% + 6px)!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-height:calc(100vh - 90px)!important;
    padding:8px!important;
    gap:0!important;
    overflow-y:auto!important;
    background:var(--color-surface)!important;
    border:1px solid var(--color-line-strong)!important;
    border-radius:14px!important;
    box-shadow:0 18px 48px color-mix(in srgb,var(--color-black) 72%,transparent)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }
  .topbar,.topbar.is-scrolled,.topbar.menu-open{transition:none!important}
  .topbar.menu-open{background:var(--color-bg-soft)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
  .topbar nav a{min-height:48px!important;padding:12px 16px!important;font-size:var(--type-size-18px)!important;line-height:var(--type-line-1-3)!important;transform:none!important;transition:color .18s ease!important}
  .topbar nav a:hover{transform:none!important}
  .topbar .menu-toggle:focus{outline:none}
  .topbar .menu-toggle:focus-visible{outline:2px solid var(--accent)!important;outline-offset:3px}
}

/* Тарифы: сохраняем одинаковую ширину карточек, на узком экране - горизонтальная карусель. */
.prices-section .price-grid{
  grid-template-columns:repeat(3,374px)!important;
  justify-content:center!important;
  align-items:stretch!important;
}
.prices-section .price-card{
  box-sizing:border-box!important;
  width:374px!important;
  min-width:374px!important;
  max-width:374px!important;
  margin:0!important;
}
@media(max-width:1200px){
  .prices-section .price-grid{
    display:flex!important;
    justify-content:flex-start!important;
    gap:18px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 0 12px!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .prices-section .price-grid::-webkit-scrollbar{display:none}
  .prices-section .price-card{flex:0 0 374px!important;scroll-snap-align:start!important}
}
.mid-cta>a.btn{
  display:inline-flex!important;
  width:fit-content!important;
  min-width:0!important;
  max-width:100%!important;
  margin-inline:auto!important;
  padding:14px 24px!important;
}
.prices-section .price-card:hover{transform:none!important}
/* Переключаем шапку на гамбургер до того, как десктопные ссылки начинают обрезаться. */
@media(max-width:900px){
  .topbar,.topbar.is-scrolled{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important;height:66px!important;padding:0 16px!important}
  .topbar .logo,.topbar.is-scrolled .logo{position:static!important;grid-column:1!important;grid-row:1!important;justify-self:start!important;width:76px!important;height:76px!important;margin:0!important}
  .topbar .logo img,.topbar.is-scrolled .logo img{width:76px!important;height:76px!important;max-height:76px!important}
  .topbar .menu-toggle{display:grid!important;place-items:center!important;grid-column:2!important;grid-row:1!important;justify-self:end!important;margin:0!important;z-index:12!important}
  .topbar .menu-toggle svg{display:block!important;width:20px!important;height:20px!important;place-self:center!important;margin:0!important}
  .topbar .navright{display:none!important}
  .topbar nav,.topbar.is-scrolled nav{position:fixed!important;top:calc(var(--header-height,66px) + 6px)!important;left:12px!important;right:12px!important;width:auto!important;max-height:calc(100dvh - 86px)!important;display:none!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;overflow-y:auto!important;padding:8px!important;background:var(--color-surface)!important;border:1px solid var(--color-line-strong)!important;border-radius:14px!important;box-shadow:0 18px 48px color-mix(in srgb,var(--color-black) 78%,transparent)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;transition:none!important;animation:none!important;z-index:60!important}
  .topbar.menu-open nav,.topbar.menu-open.is-scrolled nav{display:flex!important}
  .topbar nav a{display:flex!important;align-items:center!important;min-height:48px!important;padding:12px 16px!important;font-size:var(--type-size-18px)!important;line-height:var(--type-line-1-3)!important;white-space:normal!important;transform:none!important}
}
.map-page{padding-top:calc(var(--topbar-height) + var(--text-xl));min-height:100vh;width:100%;max-width:none}
.map-page .section-head{margin-bottom:var(--section-gap-y)}
.map-page .section-head h1{font-family:var(--font-body);font-size:clamp(var(--h1-mobile),5vw,var(--h1-desktop));font-weight:var(--weight-regular);color:var(--accent);margin:0 0 var(--text-md);letter-spacing:var(--type-track-neg-025em)}
.map-page .section-head p{color:var(--accent);letter-spacing:var(--tracking-wide);text-transform:uppercase}
.map-page .locations-layout{width:min(var(--container),calc(100% - var(--gutter)));margin:0 auto var(--section-space);grid-template-columns:1fr;gap:var(--text-xl)}
.map-page .locations-map{position:relative;top:auto;height:clamp(360px,60vh,640px);min-height:0;isolation:isolate;z-index:0}
.map-zoom-hint{margin:0;color:var(--color-muted);font-size:var(--text-sm)}
@media(pointer:coarse){.map-zoom-hint{display:none}}
.map-page .locations-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--type-size-12px);align-items:stretch;grid-auto-rows:1fr}
.map-page .location-card[hidden],.locations-more[hidden]{display:none}
.locations-more{justify-self:center}
.map-page .location-card{display:flex;flex-direction:column;padding:var(--type-size-16px);cursor:default;min-width:0}
.map-page .location-card>.location-select{flex-shrink:0}
.map-page .location-card>.location-select+div{margin-top:auto;padding-top:var(--type-size-12px)}
.map-page .location-select{display:grid;grid-template-columns:1fr;gap:var(--type-size-12px);align-items:start}
.map-page .location-card__image{height:auto;aspect-ratio:1;border-radius:var(--radius-sm);margin-bottom:0}
.map-page .location-card.is-selected{border-color:var(--color-accent);background:var(--color-accent-soft)}
.map-page .location-card h3{margin:0}
@media(max-width:1100px){.map-page .locations-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){
 .map-page .locations-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .map-page .location-card{padding:10px}
 .map-page .location-select{grid-template-columns:1fr;gap:8px;align-items:start}
 .map-page .location-card__image{height:auto;aspect-ratio:1}
 .map-page .location-card h3{font-size:var(--text-md)}
 .map-page .location-card>.location-select+div{padding-top:8px;margin-top:auto;margin-left:0}
 .map-page .route-choice{margin-top:4px}
}
.map-back{display:inline-flex;margin:0 max(24px,calc((100% - var(--container))/2)) var(--text-xl);color:var(--color-muted)}

/* Button feedback: warm light and color only, never translate or scale. */
:is(.btn,.leadform button,.cookie button,.case-tabs button,.ba-tabs button,.filters button,.menu-toggle,.chat-fab,.quick-contact-link,.topbar-socials>a){
  transition-property:color,background-color,border-color,box-shadow,filter!important;
  transition-duration:180ms!important;
  transition-timing-function:var(--ease)!important;
}
:is(.btn,.leadform button,.cookie button,.menu-toggle,.chat-fab,.quick-contact-link):hover{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--color-accent) 16%,transparent),0 0 20px color-mix(in srgb,var(--color-accent) 20%,transparent)!important;
  filter:brightness(1.06)!important;
}
/* Floating contact control is icon-only: color feedback, no square halo. */
.floating-actions .chat-fab--icon-only:hover,
.floating-actions .chat-fab--icon-only:focus-visible,
.floating-actions .chat-fab--icon-only:active{
  box-shadow:none!important;filter:none!important;background:transparent!important;border:0!important;
  color:var(--accent)!important;outline:0!important;
}
:is(.btn,.leadform button,.cookie button,.menu-toggle,.chat-fab,.quick-contact-link):active{filter:brightness(1.1)!important}
.topbar-socials .custom-icon{background-color:currentColor!important}
:is(.case-tabs button,.ba-tabs button,.filters button):hover{text-shadow:0 0 14px color-mix(in srgb,var(--color-accent) 35%,transparent)!important}
.topbar nav a:hover{transform:none!important}
@media(max-width:900px){.topbar .logo,.topbar.is-scrolled .logo{transform:translateY(12px)!important}}

/* Keep legal links visible in the cookie notice. */
.cookie p a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* Full-width section photos without widening the content grid. */
[style*="--section-photo:"]{position:relative;isolation:isolate}
[style*="--section-photo:"]::before{content:"";position:absolute;inset-block:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;background-image:linear-gradient(color-mix(in srgb,var(--color-black) var(--section-photo-shade),transparent),color-mix(in srgb,var(--color-black) var(--section-photo-shade),transparent)),var(--section-photo);background-position:center;background-size:cover;background-repeat:no-repeat}
[style*="--section-photo:"]::before{mask-image:linear-gradient(to bottom,transparent 0%,var(--color-black) 22%,var(--color-black) 78%,transparent 100%)}
.hero.has-parallax .hero__bg{inset:-130px 0;transform:translateY(var(--parallax-offset,0px))}
@media(max-width:760px){.hero.has-parallax .hero__bg{inset:-70px 0}}
[style*="--section-photo:"].has-parallax::before{transform:translate(-50%,var(--parallax-offset,0px)) scaleY(1.12)}