:root{
--bg:#F5F5F3;--bg-alt:#F1F1EF;--white:#FFFFFF;
--ink:#1A1A1D;--ink-dk:#0F0F10;--mute:#5A6068;
--burgundy:#7A2F3C;--burgundy-dk:#5E1F2B;--burgundy-lt:#C74A5C;
--gold:#B08D57;--gold-dk:#8E6F44;--gold-lt:#D4B07A;
/* Золотой акцент с ролапа — используем точечно (подписи, заголовки разделов) */
--gold:#C9A05C;--gold-dk:#A17E3B;--gold-lt:#E3C48A;
--marble:#DCE4EC; /* голубоватый мрамор с ролапа — для отдельных блоков */
--divider:rgba(15,15,16,0.08);
--side-pad:3vw;
--rad-lg:32px; /* большие блоки (hero, stats, footer) */
--rad-md:24px; /* средние блоки (разделители) */
--rad-sm:20px; /* карточки */
--hdr-gap:0.6vw; /* ЕДИНЫЙ зазор: шапка↔hero = шапка↔мегаменю */
/* === Брейкпоинты (для справки, в JS использовать те же значения) ===
Десктоп ≥ 1200px — текущая резинка на vw
Планшет 768–1199px — фиксированные размеры через clamp
Мобилка ≤ 767px — фиксированные размеры в px/rem */
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Manrope',sans-serif;background:var(--bg);color:var(--ink);font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
/* ============ HEADER (pill) — поверх hero ============ */
/* ШАПКА — sticky. В потоке всегда, прилипает при скролле. */
.page-top{
position:sticky;
top:0;
padding:var(--hdr-gap) var(--side-pad) 0;
z-index:50;
width:100%;
/* Фон прозрачный изначально, ничего не рисуется */
}
.hdr{
background:transparent;
border-radius:100px;
padding:1.1vh 1.2vw 1.1vh 2.2vw;
display:flex;align-items:center;gap:2vw;
border:1px solid transparent;
box-shadow:none;
position:relative;
transition:border-color 0.5s ease, box-shadow 0.5s ease;
}
/* Псевдоэлемент со стеклом — плавно появляется через opacity */
.hdr::before{
content:"";
position:absolute;inset:0;
border-radius:inherit;
background:rgba(255,255,255,0.6);
backdrop-filter:blur(30px) saturate(180%);
-webkit-backdrop-filter:blur(30px) saturate(180%);
opacity:0;
transition:opacity 0.5s ease;
z-index:-1;
}
.page-top.is-scrolled .hdr::before{opacity:1}
.page-top.is-scrolled .hdr{
border-color:rgba(255,255,255,0.4);
box-shadow:0 8px 32px rgba(15,17,21,0.1), inset 0 0 0 1px rgba(255,255,255,0.3);
}
.hdr-logo{display:flex;align-items:center;gap:0.9vw;flex-shrink:0}
.hdr-logo-venzel{
width:3.5vw;height:3.5vw;min-width:52px;min-height:52px;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
padding:0.3vw;border-radius:10px;
background:linear-gradient(135deg,rgba(255,255,255,0.75) 0%,rgba(255,255,255,0.45) 100%),linear-gradient(180deg,#FFFFFF 0%,#F5F5F3 100%);
border:1px solid rgba(255,255,255,0.9);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.95),inset 0 -1px 0 rgba(15,15,16,0.04),0 2px 8px rgba(15,15,16,0.06);
backdrop-filter:blur(14px) saturate(160%);
-webkit-backdrop-filter:blur(14px) saturate(160%);
transition:background .3s,border-color .3s,box-shadow .3s,padding .3s,border-radius .3s;
}
.page-top.is-scrolled .hdr-logo-venzel{
background:transparent;
border-color:transparent;
box-shadow:none;
padding:0;
border-radius:0;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
.hdr-logo-venzel{width:2.4vw;height:2.4vw;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hdr-logo-venzel svg{width:100%;height:100%;color:var(--burgundy)}
.hdr-logo-text{display:flex;flex-direction:column;line-height:1.1}
.hdr-logo-name{font-weight:800;font-size:1.3vw;color:var(--ink-dk);white-space:nowrap;letter-spacing:-0.015em}
.hdr-logo-sub{font-size:0.8vw;color:var(--mute);white-space:nowrap;margin-top:0.3vh;letter-spacing:0.02em}
.hdr-nav{display:flex;gap:1.6vw;margin-left:auto;align-items:center}
.hdr-nav-item{position:static;display:flex;align-items:center}
.hdr-nav-item > a{font-size:1.05vw;font-weight:500;color:var(--ink);transition:color 0.2s;display:inline-flex;align-items:center;gap:0.4vw;padding:1vh 0;white-space:nowrap;line-height:1}
.hdr-nav-item > a:hover{color:var(--burgundy)}
.hdr-nav-item.is-active > a{color:var(--burgundy);font-weight:700}
.hdr-nav-item.is-active > a::after{
content:"";display:block;height:2px;background:var(--gold);
margin-top:4px;border-radius:2px;
}
.hdr-nav-item.has-mega > a{padding:1vh 0}
.hdr-nav-item.has-mega{padding-bottom:0;margin-bottom:0}
.hdr-nav-item.has-mega > a .caret-svg{width:0.6vw;height:0.6vw;transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);color:var(--mute);flex-shrink:0}
.hdr-nav-item.has-mega:hover > a .caret-svg,
.mega-overlay.is-open ~ * .hdr-nav-item.has-mega > a .caret-svg,
.hdr-nav-item.has-mega.is-mega-open > a .caret-svg{color:var(--burgundy);transform:rotate(-180deg)}
/* КОНТАКТЫ в шапке: телефон + email */
.hdr-contacts{display:flex;flex-direction:column;align-items:flex-end;gap:0.2vh;margin-left:0.8vw}
.hdr-phone{font-size:1.14vw;font-weight:700;color:var(--ink-dk);white-space:nowrap;line-height:1.1;transition:color 0.2s}
.hdr-phone:hover{color:var(--gold)}
.hdr-email{font-size:1vw;color:var(--mute);white-space:nowrap;line-height:1.1;transition:color 0.2s}
.hdr-email:hover{color:var(--gold)}
.hdr-cta{background:var(--burgundy);color:#fff;padding:1.2vw 1.9vw;border-radius:100px;font-size:1.02vw;font-weight:600;transition:all 0.25s;white-space:nowrap}
.hdr-search{
display:inline-flex;align-items:center;justify-content:center;
width:2.6vw;height:2.6vw;
margin-left:0.1vw;margin-right:0;
border-radius:50%;
color:var(--gold);
background:rgba(176,141,87,0.10);
border:1px solid rgba(176,141,87,0.35);
cursor:pointer;
transition:all 0.25s ease;
}
.hdr-search svg{width:1.25vw;height:1.25vw;stroke-width:1.8;display:block;transition:transform 0.25s ease}
.hdr-search:hover{
color:#fff;
background:var(--burgundy);
border-color:var(--burgundy);
transform:translateY(-1px);
box-shadow:0 6px 16px rgba(122,47,60,0.30);
}
.hdr-search:hover svg{transform:scale(1.08)}
.page-top.is-scrolled .hdr-search{color:var(--gold);background:rgba(176,141,87,0.10);border-color:rgba(176,141,87,0.35)}
.page-top.is-scrolled .hdr-search:hover{color:#fff;background:var(--burgundy);border-color:var(--burgundy)}
.hdr-cta:hover{background:var(--gold);transform:translateY(-2px);box-shadow:0 8px 20px rgba(176,141,87,0.4)}
.page-top.is-scrolled .hdr-cta{background:var(--gold);color:#fff;box-shadow:0 4px 12px rgba(176,141,87,0.3)}
.page-top.is-scrolled .hdr-cta:hover{background:var(--gold-dk);box-shadow:0 8px 20px rgba(176,141,87,0.4)}
/* ============ МЕГАМЕНЮ ============ */
.mega-overlay{
position:absolute;
top:100%; /* под низом шапки */
left:0;right:0;
padding:var(--hdr-gap) var(--side-pad) 0; /* ТОТ ЖЕ зазор что и у hero */
pointer-events:none;z-index:45;
opacity:0;visibility:hidden;transform:translateY(-12px);
transition:opacity 0.28s cubic-bezier(0.22,1,0.36,1) 0.2s,
transform 0.28s cubic-bezier(0.22,1,0.36,1) 0.2s,
visibility 0s linear 0.48s;
}
.mega-overlay.is-open{
opacity:1;visibility:visible;transform:translateY(0);
pointer-events:auto;
transition:opacity 0.28s cubic-bezier(0.22,1,0.36,1),
transform 0.28s cubic-bezier(0.22,1,0.36,1),
visibility 0s linear;
}
.mega{
background:rgba(255,255,255,0.92);
backdrop-filter:blur(40px) saturate(200%);
-webkit-backdrop-filter:blur(40px) saturate(200%);
border-radius:28px;
box-shadow:0 20px 60px rgba(15,17,21,0.18), inset 0 0 0 1px rgba(255,255,255,0.55);
border:1px solid rgba(255,255,255,0.6);
padding:2.8vw;pointer-events:auto;
}
.mega-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.15fr;gap:2.2vw;align-items:stretch}
/* D-вариант: отдельные услуги с подзаголовком */
.mega-split-item{
display:flex;align-items:center;gap:0.8vw;
padding:1vh 1vw;margin:0 -1vw;
border-radius:14px;
position:relative;
transition:background 0.25s, transform 0.25s;
}
.mega-split-item::before{
content:"";
position:absolute;left:0.4vw;top:50%;transform:translateY(-50%);
width:3px;height:0;
background:var(--gold);border-radius:2px;
transition:height 0.3s cubic-bezier(.22,1,.36,1);
}
.mega-split-item::after{
content:"→";
font-size:1vw;color:var(--gold);
margin-left:auto;flex-shrink:0;
opacity:0;transform:translateX(-6px);
transition:opacity 0.25s, transform 0.3s cubic-bezier(.22,1,.36,1);
font-weight:600;line-height:1;
}
.mega-split-item:hover{
background:linear-gradient(135deg, rgba(122,47,60,0.06) 0%, rgba(176,141,87,0.06) 100%);
transform:translateX(2px);
}
.mega-split-item:hover::before{height:60%}
.mega-split-item:hover::after{opacity:1;transform:translateX(0)}
.mega-split-item:hover .msi-name{color:var(--burgundy)}
/* Активный пункт мега-меню (текущая подуслуга) */
.mega-split-item.is-active{
background:linear-gradient(135deg, rgba(122,47,60,0.10) 0%, rgba(176,141,87,0.10) 100%);
}
.mega-split-item.is-active::before{height:60%}
.mega-split-item.is-active::after{opacity:1;transform:translateX(0)}
.mega-split-item.is-active .msi-name{color:var(--burgundy)}
.msi-name{display:block;font-size:0.95vw;font-weight:700;color:var(--ink-dk);line-height:1.3;margin-bottom:0;transition:color 0.25s}
.msi-sub{display:none}
.mega-col{display:flex;flex-direction:column;gap:0.4vh}
.mega-col h4{font-size:0.75vw;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);font-weight:800;margin-bottom:1.5vh;line-height:1.3;padding-bottom:1.2vh;border-bottom:1px solid rgba(176,141,87,0.2);position:relative}
.mega-col h4::after{content:"";position:absolute;left:0;bottom:-1px;width:2vw;height:2px;background:var(--gold);border-radius:2px}
.mega-col h4.mega-col-sub{margin-top:2.5vh}
.mega-col ul{list-style:none;display:flex;flex-direction:column;gap:0.2vh;padding:0;margin:0}
.mega-link{display:block;font-size:0.92vw;font-weight:600;color:var(--ink-dk);line-height:1.3;padding:0.5vh 0;transition:color 0.2s,padding-left 0.2s}
.mega-link:hover{color:var(--burgundy);padding-left:0.3vw}
/* Колонка-контейнер для промо и статьи */
.mega-promo-col{display:flex;flex-direction:column;gap:0.8vh;height:100%;min-height:0}
.mega-promo{background:linear-gradient(135deg,#1a1a1d 0%,#2d2528 100%);border:none;border-radius:20px;padding:1.4vw 1.4vw;color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;min-height:0;flex:1 1 0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.mega-promo::before{content:"";position:absolute;top:-40%;right:-30%;width:90%;height:90%;background:radial-gradient(circle,rgba(122,47,60,0.35) 0%,transparent 70%)}
.mega-promo > *{position:relative;z-index:1}
.mega-promo-label{font-size:0.68vw;letter-spacing:0.1em;text-transform:uppercase;color:var(--burgundy-lt);font-weight:700;margin-bottom:0.6vh}
.mega-promo-num{font-size:1.7vw;font-weight:800;letter-spacing:-0.025em;line-height:1;margin-bottom:0.5vh;color:#fff}
.mega-promo-text{font-size:0.78vw;color:rgba(255,255,255,0.7);line-height:1.4;margin-bottom:1vh;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mega-promo-meta{display:flex;gap:1.2vw;margin-bottom:1vh}
.mega-promo-meta-item .lbl{font-size:0.62vw;color:rgba(255,255,255,0.5);letter-spacing:0.1em;text-transform:uppercase;font-weight:600;margin-bottom:0.3vh}
.mega-promo-meta-item .val{font-size:0.88vw;font-weight:700;color:#fff}
.mega-promo-btn{display:inline-flex;align-items:center;gap:0.5vw;font-size:0.72vw;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;color:var(--burgundy-lt);transition:gap 0.25s}
.mega-promo-btn:hover{gap:0.8vw}
.mega-promo-btn svg{width:0.75vw;height:0.75vw}
/* Карточка статьи под промо-кейсом */
.mega-article{
background:
linear-gradient(135deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.2) 100%),
linear-gradient(180deg,rgba(212,176,122,0.4) 0%,rgba(176,141,87,0.32) 100%);
border:1px solid rgba(255,255,255,0.6);
border-radius:20px;padding:1.4vw 1.4vw;
display:flex;flex-direction:column;gap:0.6vh;
flex:1 1 0;min-height:0;
backdrop-filter:blur(12px) saturate(160%);
-webkit-backdrop-filter:blur(12px) saturate(160%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.85),
inset 0 -1px 0 rgba(15,15,16,0.04),
0 4px 12px rgba(176,141,87,0.15);
transition:transform 0.25s, box-shadow 0.25s;
position:relative;overflow:hidden;
}
.mega-article::before{
content:"";position:absolute;top:-30%;left:-20%;width:60%;height:80%;
background:radial-gradient(circle,rgba(212,176,122,0.4) 0%,transparent 65%);
pointer-events:none;
}
.mega-article > *{position:relative;z-index:1}
.mega-article:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 10px 24px rgba(176,141,87,0.22)}
.mega-article-head{
display:flex;align-items:center;gap:0.5vw;
font-size:0.68vw;letter-spacing:0.1em;text-transform:uppercase;
color:var(--gold-dk);font-weight:700;margin-bottom:0.6vh;
}
.mega-article-head svg{width:0.85vw;height:0.85vw;flex-shrink:0}
.mega-article-date{margin-left:auto;color:var(--mute);font-weight:600}
.mega-article-title{font-size:0.88vw;font-weight:700;color:var(--ink-dk);line-height:1.3}
.mega-article-btn{
display:inline-flex;align-items:center;gap:0.5vw;margin-top:auto;
font-size:0.72vw;letter-spacing:0.1em;text-transform:uppercase;
font-weight:700;color:var(--gold-dk);transition:gap 0.25s;
}
.mega-article-btn:hover{gap:0.8vw}
.mega-article-btn svg{width:0.75vw;height:0.75vw}
/* ============ HERO: ПОСТЕР-АФИША ============ */
.hero-poster{padding:var(--hdr-gap) var(--side-pad) 0}
.poster{position:relative;border-radius:var(--rad-lg);overflow:hidden;aspect-ratio:21/10;background:var(--white);border:1px solid var(--divider);box-shadow:0 24px 60px rgba(15,17,21,0.10), 0 6px 18px rgba(15,17,21,0.06)}
.poster-img{
position:absolute;top:0;right:0;bottom:0;width:100%;
background:url("../images/hero/hero-color.jpg") center/cover no-repeat;
will-change:transform;z-index:0;
}
.poster-fade{position:absolute;inset:0;background:transparent;pointer-events:none;z-index:2}
.poster-fade-vert{position:absolute;inset:0;background:transparent;pointer-events:none;z-index:2}
.poster-silhouette{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0;opacity:0.06}
.poster-silhouette img{width:100%;height:100%;object-fit:cover}
.poster-grain{position:absolute;inset:0;opacity:0.1;pointer-events:none;background-image:url("data:image/svg+xml;utf8,")}
.poster-fade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0.92) 35%,rgba(255,255,255,0.45) 60%,rgba(255,255,255,0.1) 80%,rgba(255,255,255,0) 100%);pointer-events:none;z-index:2}
.poster-fade-vert{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,0.45) 100%);pointer-events:none;z-index:2}
/* Переключатель фото в hero */
.poster-photo-switcher{
position:absolute;bottom:2.5vw;right:2.5vw;z-index:15;
display:flex;gap:0.5vw;
background:rgba(15,15,16,0.4);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
padding:0.5vw;border-radius:100px;
border:1px solid rgba(255,255,255,0.15);
}
.poster-photo-switcher button{
background:transparent;border:none;cursor:pointer;
padding:0.6vw 1.2vw;border-radius:100px;
font:inherit;font-size:0.72vw;letter-spacing:0.1em;text-transform:uppercase;
color:rgba(255,255,255,0.65);font-weight:700;
transition:all 0.25s;
}
.poster-photo-switcher button:hover{color:#fff}
.poster-photo-switcher button.active{background:var(--burgundy);color:#fff}
/* Слои фото убраны — используем силуэт весов .poster-scales-bg */
.poster-content{position:absolute;top:0;left:0;right:0;bottom:0;padding:5vh 5vw;display:flex;flex-direction:column;justify-content:center;z-index:3;color:var(--ink-dk)}
.poster-kicker{font-family:'Caveat',cursive;font-size:2.9vw;color:var(--gold);font-weight:600;margin-bottom:2.5vh;line-height:1.1;letter-spacing:0.005em;max-width:50vw}
.poster-title{font-size:4.4vw;font-weight:900;line-height:1;letter-spacing:-0.035em;color:var(--ink-dk);max-width:55vw;margin-bottom:3vh}
.poster-title em{font-style:normal;color:var(--burgundy)}
.poster-title .word{display:inline-block;overflow:hidden;vertical-align:top}
.poster-title .word-inner{display:inline-block;transform:translateY(110%)}
.poster-desc{font-size:0.95vw;color:var(--mute);line-height:1.65;margin-bottom:4vh;max-width:42vw;opacity:0;transform:translateY(20px)}
.poster-desc .line{display:block;margin-bottom:0.3vh}
.poster-actions{display:flex;gap:1.2vw;align-items:center;opacity:0;transform:translateY(20px)}
.poster-cta{display:inline-flex;align-items:center;gap:0.8vw;background:var(--burgundy);color:#fff;padding:1.3vw 2.2vw;border-radius:100px;font-size:1vw;font-weight:700;transition:all 0.25s}
.poster-cta:hover{background:var(--burgundy-dk);transform:translateY(-2px)}
.poster-cta .arrow{font-size:1.1vw;transition:transform .3s}
.poster-cta:hover .arrow{transform:translateX(3px)}
.poster-ghost{display:inline-flex;align-items:center;gap:0.6vw;color:#fff;font-size:0.88vw;font-weight:600;padding:1.1vw 1.6vw;border:1px solid rgba(255,255,255,0.3);border-radius:100px;transition:all 0.25s}
.poster-ghost:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.5)}
/* Код в углу (Season / Chapter) */
.poster-code-br{position:absolute;bottom:2.5vw;right:3vw;color:rgba(255,255,255,0.65);z-index:4;text-align:right;font-size:0.7vw;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;line-height:1.8}
.poster-code-bl{position:absolute;bottom:2.5vw;left:3vw;color:rgba(255,255,255,0.65);z-index:4;font-size:0.7vw;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;line-height:1.8}
/* ============ STATS ============ */
.stats-section{padding:0;position:relative}
.stats-wrap{position:relative;margin:8vh var(--side-pad) 0;padding:6vw 4vw;border-radius:var(--rad-lg);background:var(--white);border:1px solid var(--divider);box-shadow:0 2px 10px rgba(15,17,21,0.03);overflow:hidden;z-index:1}
/* SVG-силуэт колонн на фон всего блока */
.stats-bg-svg{
position:absolute;
inset:0;
color:var(--ink-dk);
opacity:0.04;
pointer-events:none;
z-index:0;
display:flex;
}
.stats-bg-svg svg{width:100%;height:100%;display:block}
.stats-head{display:grid;grid-template-columns:1fr 1fr;gap:3vw;align-items:end;margin-bottom:6vh;position:relative;z-index:2}
.stats-right{display:flex;flex-direction:column;gap:2.5vh;align-items:flex-end}
.stats-badges{display:flex;flex-direction:column;gap:1.5vh;align-items:flex-end}
.stats-badges-label{font-size:0.8vw;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);font-weight:700}
.stats-badges-row{display:flex;gap:1vw;align-items:center}
.stats-badge{display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:8px;background:transparent;border:none;box-shadow:none;transition:transform .25s;height:4vw;min-width:5vw;overflow:hidden}
.stats-badge:hover{transform:translateY(-2px)}
.stats-badge img{max-height:100%;max-width:100%;object-fit:contain;display:block;border-radius:8px}
/* Право-300 крупнее на 20% — лого «правее» визуально мельче из-за деталей */
.stats-badge--pravo{height:4.8vw;min-width:6vw}
.stats-badge--tj{height:3.5vw;min-width:3.5vw;max-width:3.8vw}
.stats-badge--tj img{width:100%;height:100%;object-fit:contain}
.stats-right .stats-desc{text-align:left;width:100%}
.section-kicker{font-size:0.82vw;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:1.5vh;display:flex;align-items:center;gap:0.8vw}
.section-kicker::before{content:"";width:2vw;height:1px;background:var(--gold)}
.stats-title{font-size:3vw;font-weight:800;line-height:1.05;letter-spacing:-0.025em;color:var(--ink-dk)}
.stats-title em{font-style:normal;color:var(--burgundy)}
.stats-desc{font-size:0.95vw;line-height:1.6;color:var(--mute)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;z-index:2}
.stat-card{padding:3vw 2vw;position:relative;border-left:1px solid var(--divider)}
.stat-card:first-child{border-left:none;padding-left:0}
.stat-card:last-child{padding-right:0}
.stat-num{font-size:4.4vw;font-weight:800;letter-spacing:-0.035em;line-height:0.9;color:var(--burgundy);margin-bottom:1.8vh}
.stat-num-sfx{font-size:0.35em;letter-spacing:0;font-weight:700;color:var(--ink)}
.stat-label{font-size:0.9vw;color:var(--ink);line-height:1.45;font-weight:500;max-width:95%}
/* ============ ФУТЕР (светлый) ============ */
.ftr{background:var(--white);color:var(--ink);padding:8vh var(--side-pad) 4vh;border-top-left-radius:var(--rad-lg);border-top-right-radius:var(--rad-lg);margin-top:2vh;position:relative;overflow:hidden;border:1px solid var(--divider);border-bottom:none}
.ftr::before{content:"";position:absolute;bottom:-20%;right:-10%;width:50%;height:180%;background:radial-gradient(circle, rgba(122,47,60,0.06) 0%, transparent 60%);pointer-events:none}
.ftr-main{display:grid;grid-template-columns:1.5fr 1fr 1.3fr 1.2fr;gap:3vw;margin-bottom:5vh;position:relative;z-index:1}
.ftr-brand{display:flex;align-items:center;gap:1vw;margin-bottom:2.5vh}
.ftr-brand-logo{width:3vw;height:3vw;flex-shrink:0;color:var(--burgundy)}
.ftr-brand-logo svg{width:100%;height:100%}
.ftr-brand-title{font-size:1.2vw;font-weight:800;line-height:1.1;color:var(--ink-dk)}
.ftr-brand-sub{font-size:0.78vw;color:var(--mute);font-weight:500}
.ftr-legal{font-size:0.85vw;line-height:1.6;color:var(--mute)}
.ftr-legal strong{color:var(--ink-dk);font-weight:600;display:block;margin-bottom:1vh}
.ftr-legal .reqs{display:flex;flex-direction:column;gap:0.3vh;margin-top:1vh;font-size:0.78vw;color:var(--mute)}
.ftr-col h4{font-size:0.78vw;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:2vh}
.ftr-col ul{list-style:none;display:flex;flex-direction:column;gap:1vh}
.ftr-col ul a{font-size:0.95vw;color:var(--ink);font-weight:500;transition:color 0.25s}
.ftr-col ul a:hover{color:var(--gold)}
.ftr-col ul li.is-active > a{color:var(--burgundy);font-weight:700}
.ftr-col ul li.is-active > a::before{
content:"→ ";color:var(--gold);font-weight:800;
}
.ftr-contacts .phone{display:block;font-size:1.25vw;font-weight:800;color:var(--ink-dk);margin-bottom:1vh;transition:color 0.25s}
.ftr-contacts .phone:hover{color:var(--burgundy)}
.ftr-contacts .email{display:block;font-size:0.9vw;color:var(--ink);margin-bottom:1.5vh;transition:color 0.25s}
.ftr-contacts .email:hover{color:var(--burgundy)}
.ftr-contacts .address{font-size:0.88vw;color:var(--mute);line-height:1.5;margin-bottom:0.5vh}
.ftr-contacts .hours{font-size:0.85vw;color:var(--mute);margin-bottom:2vh}
.ftr-msg{display:grid;grid-template-columns:repeat(3,1fr);gap:0.9vw;margin-top:0.5vh;max-width:11vw;justify-items:start}
.ftr-msg a{width:2.8vw;height:2.8vw;min-width:44px;min-height:44px;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.4) 100%),linear-gradient(180deg,#F1F1EF 0%,#E5E7E3 100%);border:1px solid rgba(176,141,87,0.3);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),inset 0 -1px 0 rgba(15,15,16,0.04),0 1px 3px rgba(15,15,16,0.06);display:flex;align-items:center;justify-content:center;color:var(--gold);transition:all .3s cubic-bezier(.22,1,.36,1);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}
.ftr-msg .ftr-msg-tenchat img{width:22px;height:22px;display:block}
.ftr-msg a:hover{background:var(--gold);border-color:var(--gold);color:#fff;transform:translateY(-3px);box-shadow:0 10px 24px rgba(176,141,87,0.35)}
.ftr-msg svg{width:1.3vw;height:1.3vw;fill:currentColor;transition:fill .25s}
/* VK 2.8vw, MAX 2.3vw — у этих SVG glyph занимает только часть viewBox */
.ftr-msg a[title="ВКонтакте"] svg{width:2.8vw !important;height:2.8vw !important}
.ftr-msg a[title="MAX мессенджер"] svg{width:2.0vw !important;height:2.0vw !important}
.ftr-bottom{border-top:1px solid var(--divider);padding-top:3vh;display:flex;justify-content:space-between;align-items:center;font-size:0.78vw;color:var(--mute);flex-wrap:wrap;gap:2vw;position:relative;z-index:1}
.ftr-bottom-links{display:flex;gap:2vw}
.ftr-bottom-links a{transition:color 0.25s}
.ftr-bottom-links a:hover{color:var(--burgundy)}
/* --- Футер обновлённый --- */
.ftr-slogan{font-family:'Caveat',cursive;font-size:1.6vw;color:var(--gold);line-height:1.2;margin:0 0 2.2vh 0;font-weight:500;letter-spacing:0.01em}
.ftr-badges{display:flex;gap:0.8vw;margin-top:2vh;align-items:center}
.ftr-badge{display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:6px;background:transparent;border:none;box-shadow:none;transition:transform .25s;height:2.8vw;min-width:3.6vw;overflow:hidden}
.ftr-badge:hover{transform:translateY(-2px)}
.ftr-badge img{max-height:100%;max-width:100%;object-fit:contain;display:block;border-radius:6px}
.ftr-badge--pravo{height:3.36vw;min-width:4.32vw}
.ftr-badge--tj{height:2.4vw;min-width:2.4vw;max-width:2.5vw}
.ftr-badge--tj img{width:100%;height:100%;object-fit:contain}
/* Заглушка "тут будут остальные секции" */
.stub{padding:12vh var(--side-pad);text-align:center;background:var(--bg)}
.stub h3{font-size:1.6vw;font-weight:800;margin-bottom:1.5vh;color:var(--ink-dk);letter-spacing:-0.02em}
.stub p{font-size:0.95vw;color:var(--mute);max-width:40vw;margin:0 auto;line-height:1.6}
/* ================ АДАПТИВНЫЕ БРЕЙКПОИНТЫ ================
Десктоп ≥1200px — текущая резинка на vw (всё что выше — без media queries)
Планшет 768–1199px — отдельный режим (будет добавлен на Этапе 1/2)
Мобилка ≤767px — отдельный режим (будет добавлен на Этапе 1/2)
============================================================== */
a{color:inherit;text-decoration:none}
.services{
padding:6vw 4vw;
margin:8vh var(--side-pad) 0;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
box-shadow:0 2px 10px rgba(15,17,21,0.03);
display:grid;grid-template-columns:repeat(6,1fr);
grid-auto-rows:minmax(0,auto);gap:1.2vw;align-items:stretch;
}
.services > .services-head{grid-column:1 / -1;grid-row:1}
/* Явные позиции каждой карточки */
.service-card.pos-1{grid-column:1 / 5;grid-row:2} /* Стройка 2/3 */
.service-card.pos-2{grid-column:5 / 7;grid-row:2} /* Долги 1/3 */
.service-card.pos-3{grid-column:1 / 3;grid-row:3} /* Абонентка 1/3 */
.service-card.pos-4{grid-column:3 / 7;grid-row:3} /* Госконтракты 2/3 */
.service-card.pos-5{grid-column:1 / 3;grid-row:4} /* Убытки */
.service-card.pos-6{grid-column:3 / 5;grid-row:4} /* Банкротство */
.service-card.pos-7{grid-column:5 / 7;grid-row:4} /* Корп.право */
.service-card.pos-8{grid-column:1 / 3;grid-row:5} /* Сопровождение */
.service-card.pos-9{grid-column:3 / 5;grid-row:5} /* Договорная */
.service-card.pos-10{grid-column:5 / 7;grid-row:5} /* Форма */
/* Обёртка для доп.услуг (pos-5..9): на ПК прозрачная — карточки внутри встают на свои grid-позиции */
.services-extras{display:contents}
.services-extras-track{display:contents}
.service-cta-banner{
grid-column:1 / -1;order:10;
display:flex;align-items:center;justify-content:space-between;gap:3vw;
padding:3.2vw 3vw;border-radius:var(--rad-md);
background:linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-dk) 100%);
color:#fff;margin-top:1.2vw;
box-shadow:0 12px 40px rgba(122,47,60,0.2);
transition:transform .4s, box-shadow .4s;
}
.service-cta-banner:hover{transform:translateY(-3px);box-shadow:0 20px 56px rgba(122,47,60,0.28)}
.sctab-text h3{font-size:1.8vw;font-weight:800;letter-spacing:-0.02em;line-height:1.15;margin-bottom:1vh;color:#fff}
.sctab-text p{font-size:1vw;line-height:1.55;color:rgba(255,255,255,0.88);max-width:38vw}
.sctab-btn{
display:inline-flex;align-items:center;gap:0.6vw;white-space:nowrap;
font-size:1vw;font-weight:700;color:var(--burgundy);
padding:1.2vw 2vw;border-radius:100px;background:#fff;
transition:all .3s;
}
.sctab-btn:hover{transform:translateY(-2px);background:var(--marble)}
.sctab-btn .arrow{font-size:1.1vw;transition:transform .3s}
.sctab-btn:hover .arrow{transform:translateX(3px)}
.services-head{margin-bottom:4vh;max-width:90vw}
.section-kicker{
font-size:0.82vw;letter-spacing:0.1em;text-transform:uppercase;
color:var(--gold);font-weight:700;margin-bottom:1.5vh;
display:inline-flex;align-items:center;gap:0.8vw;
}
.section-kicker::before{content:"";width:2vw;height:1px;background:var(--gold)}
.services-title{
font-size:3vw;font-weight:800;line-height:1.1;letter-spacing:-0.025em;color:var(--ink-dk);
}
.services-title em{font-style:normal;color:var(--burgundy)}
.service-card{
position:relative;
background:var(--bg);
border:1px solid var(--divider);
border-radius:var(--rad-md);
overflow:hidden;
box-shadow:0 1px 2px rgba(15,17,21,0.02);
transition:box-shadow .4s, transform .4s;
display:flex;flex-direction:column;
}
.service-card:hover{box-shadow:0 14px 32px rgba(15,17,21,0.08);transform:translateY(-3px)}
.card-img{
position:relative;width:100%;height:14vw;overflow:hidden;
background:
linear-gradient(135deg, rgba(212,176,122,0.18) 0%, rgba(176,141,87,0.12) 50%, rgba(142,111,68,0.18) 100%),
linear-gradient(180deg, #2d2520 0%, #3d3128 50%, #2a221c 100%);
color:#D4B07A;display:flex;
}
.silhouette{width:100%;height:100%;opacity:0.85}
.silhouette path{fill:url(#cardGoldGrad)}
.card-img::before{
content:"";position:absolute;top:0;left:0;right:0;height:100%;
background:radial-gradient(ellipse at 30% 20%,rgba(212,176,122,0.35) 0%,transparent 60%);
pointer-events:none;z-index:1;
}
.card-img::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(255,255,255,0.06) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0.25) 100%);
pointer-events:none;z-index:2;
}
/* === КАРТОЧКА С ФОТОГРАФИЕЙ === */
.card-img.has-photo{
background:#1a1a1d;
}
.card-img.has-photo::before{
content:"";position:absolute;inset:0;z-index:1;
background-size:cover;background-position:center;
background-repeat:no-repeat;
transition:transform 0.6s ease;
}
.card-img.has-photo::after{
content:"";position:absolute;inset:0;z-index:2;
background:linear-gradient(180deg,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0.5) 100%);
pointer-events:none;
}
.service-card:hover .card-img.has-photo::before{transform:scale(1.04)}
/* blur-up для фото-обложек услуг */
.card-img.has-photo{
background:linear-gradient(135deg,#E5E7E9 0%,#D8DCE0 50%,#E5E7E9 100%);
background-size:200% 200%;
animation:shimmer 1.8s ease-in-out infinite;
}
.card-img.has-photo.cover-loading::before{
opacity:0;
filter:blur(20px);
}
.card-img.has-photo::before{
opacity:1;
filter:blur(0);
transition:opacity .6s ease, filter .6s ease, transform 0.6s ease;
}
.card-img.has-photo.cover-loaded{animation:none;background:#1a1a1d}
.card-img.photo-stroy::before{background-image:url("../images/services/01-stroy.jpg")}
.card-img.photo-goscontract::before{background-image:url("../images/services/02-goscontract.jpg")}
.card-img.photo-debt::before{background-image:url("../images/services/03-debt.jpg")}
.card-img.photo-losses::before{background-image:url("../images/services/04-losses.jpg")}
.card-img.photo-abon::before{background-image:url("../images/services/05-abon.jpg")}
.card-img.photo-bankrot::before{background-image:url("../images/services/06-bankrot.jpg")}
.card-img.photo-corp::before{background-image:url("../images/services/07-corp.jpg")}
.card-img.photo-deals::before{background-image:url("../images/services/08-deals.jpg")}
.card-img.photo-contract::before{background-image:url("../images/services/09-contract.jpg")}
.card-num{display:none}
/* Большие карточки имеют более высокую обложку */
.service-card.big .card-img{height:20vw}
.service-card.big .card-body{padding:2.4vw 2.2vw 2.2vw;display:flex;flex-direction:column;gap:2vh;flex:1}
.service-card.big .card-head{max-width:none}
.service-card.big h3{font-size:2.4vw;font-weight:800;letter-spacing:-0.02em;color:var(--ink-dk);line-height:1.1;margin-bottom:1.2vh}
.service-card.big .card-desc{font-size:1.18vw;color:var(--ink);line-height:1.55;margin-bottom:1.8vh;max-width:none}
.service-card.light .card-body{padding:2.2vw 2.2vw 2vw;display:flex;flex-direction:column;gap:1.4vh;max-width:none;flex:1}
.service-card.light.text-only .card-body{padding:2.4vw 2.2vw 2.2vw}
.service-card.light h3{font-size:1.95vw;font-weight:800;letter-spacing:-0.02em;color:var(--ink-dk);line-height:1.1}
.service-card.light .card-desc{font-size:1.12vw;color:var(--ink);line-height:1.55;max-width:none}
.service-card.form-card{background:linear-gradient(135deg,#5E1F2B 0%,#7A2F3C 50%,#3a1820 100%);color:#fff;border:none;overflow:hidden;position:relative}
.service-card.form-card::before{content:"";position:absolute;top:-30%;right:-30%;width:100%;height:100%;background:radial-gradient(circle,rgba(212,176,122,0.55) 0%,transparent 60%);animation:formCardGlow 9s ease-in-out infinite;pointer-events:none}
.service-card.form-card::after{content:"";position:absolute;bottom:-30%;left:-20%;width:80%;height:80%;background:radial-gradient(circle,rgba(176,141,87,0.32) 0%,transparent 70%);animation:formCardGlow2 11s ease-in-out infinite;pointer-events:none}
@keyframes formCardGlow{
0%,100%{transform:translate(0,0) scale(1);opacity:1}
50%{transform:translate(-20%,20%) scale(1.15);opacity:0.85}
}
@keyframes formCardGlow2{
0%,100%{transform:translate(0,0) scale(1);opacity:0.9}
50%{transform:translate(25%,-15%) scale(1.2);opacity:1}
}
.service-card.form-card > *{position:relative;z-index:1}
.service-card.form-card .card-body{padding:2.2vw 2.2vw 2vw;display:flex;flex-direction:column;gap:1.4vh;flex:1}
.service-card.form-card h3{font-size:1.5vw;font-weight:800;letter-spacing:-0.02em;color:#fff;line-height:1.15}
.service-card.form-card .card-desc{font-size:0.9vw;color:rgba(255,255,255,0.7);line-height:1.55;margin-bottom:1vh}
.card-form{display:flex;flex-direction:column;gap:0.7vh;margin-top:auto}
.card-form input{font-family:inherit;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);color:#fff;border-radius:100px;padding:0.9vw 1.3vw;font-size:0.88vw;outline:none;transition:background .2s, border-color .2s}
.card-form input::placeholder{color:rgba(255,255,255,0.45)}
.card-form input:focus{background:rgba(255,255,255,0.14);border-color:rgba(199,74,92,0.5)}
.card-form input:invalid{box-shadow:none}
.card-form-btn{font-family:inherit;cursor:pointer;background:var(--gold);color:#fff;border:none;border-radius:100px;padding:0.95vw 1.4vw;font-size:0.88vw;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:0.6vw;transition:all .3s;margin-top:0.5vh;box-shadow:0 4px 12px rgba(176,141,87,0.3)}
.card-form-btn:hover{transform:translateY(-2px);background:var(--gold-dk);box-shadow:0 10px 24px rgba(176,141,87,0.45)}
.card-form .hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.card-form-agree{display:flex;align-items:center;gap:0.7vw;cursor:pointer;margin-top:0.3vh;padding:0.2vh 0;user-select:none}
.card-form-agree input[type="checkbox"]{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.card-form-agree-box{flex-shrink:0;width:1.1vw;height:1.1vw;border:1.5px solid rgba(255,255,255,0.35);border-radius:5px;background:rgba(255,255,255,0.08);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;position:relative}
.card-form-agree-box::after{content:"";width:0.45vw;height:0.22vw;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-0.08vw);opacity:0;transition:opacity .15s}
.card-form-agree input:checked + .card-form-agree-box{background:var(--burgundy-lt);border-color:var(--burgundy-lt)}
.card-form-agree input:checked + .card-form-agree-box::after{opacity:1}
.card-form-agree input:focus-visible + .card-form-agree-box{outline:2px solid rgba(255,255,255,0.5);outline-offset:2px}
.card-form-agree-text{font-size:0.72vw;color:rgba(255,255,255,0.9);line-height:1.4}
.card-form-agree-text a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,0.5);text-underline-offset:2px;transition:text-decoration-color .2s}
.card-form-agree-text a:hover{text-decoration-color:#fff}
.card-cta{
display:inline-flex;align-items:center;gap:0.6vw;
font-size:1vw;font-weight:700;color:var(--burgundy);
padding:0.85vw 1.4vw;border:1px solid var(--burgundy);border-radius:100px;
transition:all .3s;align-self:flex-start;
margin-top:auto !important;
}
.card-body > .card-cta{margin-top:auto !important}
.card-cta:hover{background:var(--burgundy);color:#fff;transform:translateY(-2px)}
.card-cta .arrow{font-size:1vw;transition:transform .3s}
.card-cta:hover .arrow{transform:translateX(2px)}
.tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:0.8vw;width:100%;grid-auto-flow:row dense}
.tile{
grid-column:span 4;
position:relative;overflow:hidden;
display:flex;align-items:center;gap:0.9vw;
padding:1.4vw 1.4vw;border-radius:var(--rad-sm);
cursor:pointer;
text-decoration:none; /* для — без подчёркивания */
color:inherit; /* наследует цвет текста карточки */
background:
linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.25) 100%),
linear-gradient(180deg, #EDEFF2 0%, #E2E5E9 100%);
border:1px solid rgba(255,255,255,0.8);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.9),
inset 0 -1px 0 rgba(15,15,16,0.04),
0 1px 3px rgba(15,15,16,0.04);
backdrop-filter:blur(10px) saturate(140%);
-webkit-backdrop-filter:blur(10px) saturate(140%);
transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s;
}
/* БЛОК СТРОЙКИ (7 плиток): 4+4+4 / 6+6 / 4+8 */
.tile.w4{grid-column:span 4}
.tile.w6{grid-column:span 6}
.tile.w8{grid-column:span 8}
.tile.w12{grid-column:span 12}
.tile::before{
content:"";position:absolute;top:-40%;left:-10%;width:70%;height:90%;
background:radial-gradient(ellipse at center, rgba(255,255,255,0.55) 0%, transparent 60%);
transform:rotate(-12deg);pointer-events:none;
}
.tile::after{
content:"";position:absolute;bottom:-30%;right:-10%;width:55%;height:75%;
background:radial-gradient(ellipse at center, rgba(212,176,122,0.16) 0%, transparent 65%);
pointer-events:none;
}
.tile:hover{
transform:translateY(-3px);
border-color:rgba(176,141,87,0.45);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.95),
inset 0 -1px 0 rgba(15,15,16,0.05),
0 14px 28px rgba(15,17,21,0.1);
}
.tile-ic-wrap{
flex-shrink:0;z-index:2;position:relative;
width:2vw;height:2vw;
display:flex;align-items:center;justify-content:center;
color:var(--burgundy);
transition:color .25s, transform .3s cubic-bezier(.22,1,.36,1);
}
.sv-ic{width:2vw;height:2vw;display:block;min-width:24px;min-height:24px}
.tile:hover .tile-ic-wrap{transform:scale(1.1);color:var(--burgundy-dk)}
.tile-text{display:flex;align-items:center;z-index:2;position:relative;flex:1;min-width:0}
.tile-title{font-size:1.05vw;font-weight:700;color:var(--ink-dk);line-height:1.25;letter-spacing:-0.005em}
.tile-sub{display:none}
.divider{
padding:3vh 0 4vh;display:flex;align-items:center;gap:1.5vw;
font-size:0.78vw;letter-spacing:0.1em;text-transform:uppercase;
color:var(--mute);font-weight:700;
}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--divider)}
/* --- TEAM section --- */
.team{
padding:6vw 0 6vw;
margin:8vh var(--side-pad) 0;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
box-shadow:0 2px 10px rgba(15,17,21,0.03);
position:relative;overflow:hidden;
display:grid;
grid-template-columns:32vw 1fr;
gap:3vw;
align-items:start;
}
.team-head{
padding:0 0 0 4vw;
display:flex;flex-direction:column;gap:1.5vh;
align-self:start;
}
.team-head .section-kicker{margin-bottom:1vh}
.team-title{
font-size:2.4vw;font-weight:800;line-height:1.1;letter-spacing:-0.025em;color:var(--ink-dk);
}
.team-title em{font-style:normal;color:var(--burgundy)}
.team-sub{
font-size:0.95vw;color:var(--mute);line-height:1.55;
max-width:28vw;margin-top:1vh;
}
.team-scroll{
padding:0;
overflow-x:auto;overflow-y:hidden;
-webkit-overflow-scrolling:touch;
cursor:grab;
user-select:none;
scrollbar-width:none;
mask-image:linear-gradient(90deg,#000 0%,#000 88%,transparent 100%);
-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 88%,transparent 100%);
}
.team-scroll::-webkit-scrollbar{display:none} /* Chrome/Safari */
.team-scroll.dragging{cursor:grabbing}
.team-scroll.dragging *{pointer-events:none} /* отключаем клики по карточкам во время drag */
.team-track{
display:flex;gap:1.2vw;
padding-right:4vw;
}
.team-card{
flex:0 0 auto;
width:15vw;min-width:210px;
aspect-ratio:16/22;
border-radius:var(--rad-md);
overflow:hidden;
background:var(--bg);
border:1px solid var(--divider);
box-shadow:0 1px 2px rgba(15,17,21,0.02);
transition:box-shadow .4s, transform .4s;
display:flex;flex-direction:column;
position:relative;
}
.team-card:hover{box-shadow:0 14px 32px rgba(15,17,21,0.08);transform:translateY(-4px)}
.team-card-photo{
flex:1;
background:linear-gradient(180deg,#FAFAF9 0%,#F0F0EE 100%);
display:flex;align-items:center;justify-content:center;
position:relative;overflow:hidden;
border-bottom:1px solid var(--divider);
}
.team-card-photo img{
width:100%;height:100%;object-fit:cover;display:block;
}
.team-card-placeholder{
font-size:0.75vw;letter-spacing:0.1em;text-transform:uppercase;
color:var(--mute);font-weight:700;
}
.team-card-body{
padding:1.8vh 1.4vw 2vh;
border-left:3px solid var(--burgundy);
background:var(--white);
}
.team-card-name{
font-size:0.95vw;font-weight:800;letter-spacing:-0.015em;
color:var(--ink-dk);line-height:1.2;margin-bottom:0.4vh;
}
.team-card-role{
font-size:0.75vw;color:var(--mute);line-height:1.4;
}
/* fade-маска справа — намекает что есть продолжение */
.team::after{
content:"";position:absolute;top:0;right:0;bottom:0;
width:4vw;
background:linear-gradient(90deg,rgba(245,245,243,0) 0%,rgba(245,245,243,1) 100%);
pointer-events:none;z-index:2;
}
/* --- CASES --- */
.cases{
padding:6vw 4vw;
margin:8vh var(--side-pad) 0;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
box-shadow:0 2px 10px rgba(15,17,21,0.03);
position:relative;
}
.cases-head{display:flex;align-items:end;justify-content:space-between;gap:3vw;margin-bottom:4vh;flex-wrap:wrap}
.cases-head-left{max-width:50vw}
.cases-head .section-kicker{margin-bottom:1.5vh}
.cases-title{font-size:3vw;font-weight:800;line-height:1.1;letter-spacing:-0.025em;color:var(--ink-dk)}
.cases-title em{font-style:normal;color:var(--burgundy)}
.cases-cta{display:inline-flex;align-items:center;gap:0.6vw;font-size:0.9vw;font-weight:700;color:var(--burgundy);padding:0.95vw 1.6vw;border:1px solid var(--burgundy);border-radius:100px;transition:all .3s;white-space:nowrap;margin-bottom:0.5vh}
.cases-cta:hover{background:var(--burgundy);color:#fff;transform:translateY(-2px)}
.cases-cta .arrow{font-size:1vw;transition:transform .3s}
.cases-cta:hover .arrow{transform:translateX(3px)}
.cases-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2vw;align-items:stretch}
.case-card{
background:var(--bg);
border:1px solid var(--divider);
border-radius:var(--rad-md);
overflow:hidden;
box-shadow:0 1px 2px rgba(15,17,21,0.02);
transition:box-shadow .4s, transform .4s;
display:flex;flex-direction:column;
position:relative;
border-left:3px solid var(--burgundy);
}
.case-card:hover{box-shadow:0 14px 32px rgba(15,17,21,0.08);transform:translateY(-3px)}
/* Обложка кейса (если задан thumbnail) */
.case-card-thumb{
display:block;
width:100%;
aspect-ratio:16/8;
overflow:hidden;
position:relative;
background:linear-gradient(180deg,#FAFAF9 0%,#F0F0EE 100%);
}
.case-card-thumb img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.case-card:hover .case-card-thumb img{transform:scale(1.04)}
/* У больших кейсов обложка повыше */
.case-card.big .case-card-thumb{aspect-ratio:16/7}
/* После обложки золотая полоска (как сепаратор) */
.case-card.has-thumb .case-card-thumb::after{
content:"";position:absolute;left:0;right:0;bottom:0;
height:3px;
background:linear-gradient(90deg,var(--gold) 0%,var(--burgundy) 50%,var(--gold) 100%);
opacity:0.7;
}
/* Контент карточки — теперь в .case-card-body */
.case-card-body{
display:flex;flex-direction:column;
flex:1;
position:relative;z-index:1;
}
.case-card.big .case-card-body{padding:2.5vw 2.2vw 2.2vw}
.case-card.small .case-card-body{padding:2vw 1.8vw 1.8vw}
.case-card.big{
grid-row:span 2;
background:
linear-gradient(135deg,rgba(255,255,255,0.55) 0%,rgba(255,255,255,0.25) 100%),
linear-gradient(180deg,rgba(212,176,122,0.35) 0%,rgba(176,141,87,0.25) 100%);
border:1px solid rgba(255,255,255,0.7);
border-left:3px solid var(--gold);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.9),
inset 0 -1px 0 rgba(15,15,16,0.04),
0 4px 12px rgba(176,141,87,0.1);
backdrop-filter:blur(14px) saturate(160%);
-webkit-backdrop-filter:blur(14px) saturate(160%);
overflow:hidden;
position:relative;
}
.case-card.big::before{
content:"";position:absolute;top:-40%;right:-20%;width:60%;height:80%;
background:radial-gradient(ellipse at center,rgba(212,176,122,0.4) 0%,transparent 65%);
pointer-events:none;
z-index:0;
}
.case-card.big > *{position:relative;z-index:1}
.case-tags{display:flex;align-items:center;gap:0.5vw;margin-bottom:2vh;flex-wrap:wrap}
.case-kicker{font-size:0.72vw;letter-spacing:0.1em;text-transform:uppercase;color:var(--burgundy);font-weight:700;padding:0.55vw 1vw;border-radius:100px;background:linear-gradient(135deg,rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.5) 100%),linear-gradient(180deg,#F5F5F3 0%,#E5E7E3 100%);border:1px solid rgba(255,255,255,0.9);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 1px 2px rgba(15,15,16,0.04);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}
.case-fresh{font-size:0.68vw;letter-spacing:0.1em;text-transform:uppercase;color:#fff;font-weight:800;padding:0.55vw 1vw;border-radius:100px;background:var(--burgundy);box-shadow:0 2px 8px rgba(122,47,60,0.25);position:relative}
.case-fresh::after{content:"";position:absolute;top:50%;left:0.7vw;width:0.35vw;height:0.35vw;border-radius:50%;background:#fff;transform:translateY(-50%);box-shadow:0 0 0 2px rgba(255,255,255,0.3);animation:freshPulse 2s ease-in-out infinite}
.case-fresh{padding-left:1.6vw}
@keyframes freshPulse{
0%,100%{box-shadow:0 0 0 2px rgba(255,255,255,0.3)}
50%{box-shadow:0 0 0 5px rgba(255,255,255,0)}
}
.case-date{font-size:0.72vw;letter-spacing:0.05em;color:var(--mute);font-weight:600;padding:0.55vw 1vw;border-radius:100px;background:linear-gradient(135deg,rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.5) 100%),linear-gradient(180deg,#F5F5F3 0%,#E5E7E3 100%);border:1px solid rgba(255,255,255,0.9);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 1px 2px rgba(15,15,16,0.04);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}
.case-card.big .case-num{font-size:3.5vw;font-weight:900;line-height:1;letter-spacing:-0.04em;color:var(--ink-dk);margin-bottom:1.5vh}
.case-card.big .case-num em{font-style:normal;color:var(--burgundy);font-size:0.5em;font-weight:800;margin-left:0.2em;letter-spacing:0;vertical-align:0.3em}
.case-card.big .case-title{font-size:1.3vw;font-weight:800;line-height:1.25;letter-spacing:-0.015em;color:var(--ink-dk);margin-bottom:1.5vh}
.case-card.big .case-desc{font-size:0.95vw;color:var(--ink);line-height:1.55;margin-bottom:2.5vh}
.case-card.small .case-num{font-size:2.4vw;font-weight:900;line-height:1;letter-spacing:-0.03em;color:var(--ink-dk);margin-bottom:1vh}
.case-card.small .case-num em{font-style:normal;color:var(--burgundy);font-size:0.55em;font-weight:800;margin-left:0.2em;letter-spacing:0;vertical-align:0.2em}
.case-card.small .case-title{font-size:1.05vw;font-weight:800;line-height:1.25;letter-spacing:-0.015em;color:var(--ink-dk);margin-bottom:1vh}
.case-card.small .case-desc{font-size:0.85vw;color:var(--ink);line-height:1.5;margin-bottom:1.8vh}
.case-meta{display:flex;gap:1.8vw;padding-top:1.8vh;border-top:1px solid rgba(15,15,16,0.08);flex-wrap:wrap;margin-bottom:1.8vh}
.case-meta-item{display:flex;flex-direction:column;gap:0.2vh}
.case-meta-item .lbl{font-size:0.65vw;letter-spacing:0.1em;text-transform:uppercase;color:var(--mute);font-weight:700}
.case-meta-item .val{font-size:0.8vw;color:var(--ink-dk);font-weight:700}
.case-card.small .case-meta-item .val{font-size:0.75vw}
.case-more{display:inline-flex;align-items:center;gap:0.5vw;font-size:0.82vw;font-weight:700;color:var(--burgundy);transition:gap .25s, color .25s;margin-top:auto;align-self:flex-start}
.case-more .arrow{transition:transform .25s}
.case-more:hover{gap:0.8vw}
.case-more:hover .arrow{transform:translateX(3px)}
/* --- BIG LEAD FORM --- */
.lead{padding:0;margin:0;position:relative}
.lead-wrap{
position:relative;overflow:hidden;
border-radius:var(--rad-lg);
background:var(--white);
border:1px solid var(--divider);
box-shadow:0 2px 10px rgba(15,17,21,0.03);
margin:8vh var(--side-pad) 0;
padding:5vh 4vw;
display:grid;grid-template-columns:1.1fr 1fr;gap:4vw;
align-items:center;
}
.lead-wrap::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(ellipse 60% 55% at 85% 85%,rgba(176,141,87,0.28) 0%,transparent 60%),
radial-gradient(ellipse 50% 45% at 15% 15%,rgba(212,176,122,0.25) 0%,transparent 60%);
pointer-events:none;z-index:0;
}
.lead-scales-bg{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
opacity:0.12;
pointer-events:none;z-index:0;
overflow:hidden;
}
.lead-scales-bg img{width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:multiply}
.lead-left,.lead-right{position:relative;z-index:1}
.lead-left{order:2}
.lead-right{order:1}
.lead-left .section-kicker{margin-bottom:1.5vh}
.lead-title{font-size:3vw;font-weight:800;line-height:1.1;letter-spacing:-0.025em;color:var(--ink-dk);margin-bottom:2vh}
.lead-title em{font-style:normal;color:var(--burgundy)}
.lead-desc{font-size:1vw;color:var(--mute);line-height:1.55;margin-bottom:3vh;max-width:30vw}
.lead-benefits{display:flex;flex-direction:column;gap:1.4vh;margin-top:1vh}
.lead-benefit{display:flex;align-items:flex-start;gap:0.8vw;font-size:0.92vw;color:var(--ink);line-height:1.45}
.lead-benefit-icon{flex-shrink:0;width:1.3vw;height:1.3vw;border-radius:50%;background:var(--burgundy);display:inline-flex;align-items:center;justify-content:center;margin-top:0.2vh}
.lead-benefit-icon svg{width:0.8vw;height:0.8vw;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.lead-form{
background:linear-gradient(135deg,rgba(255,255,255,0.55) 0%,rgba(255,255,255,0.3) 100%),linear-gradient(180deg,#EDEFF2 0%,#DCE4EC 100%);
border:1px solid rgba(255,255,255,0.85);
border-radius:var(--rad-md);
padding:2.5vw 2.2vw;
backdrop-filter:blur(30px) saturate(180%);
-webkit-backdrop-filter:blur(30px) saturate(180%);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.95),inset 0 -1px 0 rgba(15,15,16,0.05),0 18px 50px rgba(15,17,21,0.1);
display:flex;flex-direction:column;gap:1.2vh;
position:relative;overflow:hidden;
}
.lead-form::before{
content:"";position:absolute;top:0;left:0;right:0;height:50%;
background:linear-gradient(180deg,rgba(255,255,255,0.35) 0%,transparent 100%);
pointer-events:none;border-radius:var(--rad-md) var(--rad-md) 0 0;
}
.lead-form > *{position:relative;z-index:1}
.lead-form h3{font-size:1.4vw;font-weight:800;letter-spacing:-0.015em;color:var(--ink-dk);margin-bottom:0.8vh;line-height:1.2}
.lead-form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.8vw}
.lead-form input,.lead-form select,.lead-form textarea{
font-family:inherit;
background:rgba(255,255,255,0.5);
border:1px solid rgba(255,255,255,0.7);
color:var(--ink-dk);border-radius:12px;
padding:1vw 1.2vw;font-size:0.92vw;
outline:none;transition:border-color .2s, background .2s;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
.lead-form input::placeholder,.lead-form textarea::placeholder{color:var(--mute)}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{
border-color:var(--burgundy);background:rgba(255,255,255,0.85);
}
.lead-form select{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 1.2vw center;padding-right:3vw}
.lead-form textarea{resize:vertical;min-height:5vh;font-family:inherit}
.lead-form-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.lead-form-btn{
font-family:inherit;cursor:pointer;
background:var(--burgundy);color:#fff;border:none;
border-radius:100px;padding:1.1vw 1.6vw;
font-size:0.95vw;font-weight:700;
display:inline-flex;align-items:center;justify-content:center;gap:0.6vw;
transition:all .3s;margin-top:0.5vh;
}
.lead-form-btn:hover{transform:translateY(-2px);background:var(--burgundy-dk);box-shadow:0 10px 24px rgba(122,47,60,0.28)}
.lead-form-agree{display:flex;align-items:center;gap:0.7vw;cursor:pointer;padding:0.2vh 0;user-select:none}
.lead-form-agree input[type="checkbox"]{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.lead-form-agree-box{flex-shrink:0;width:1.1vw;height:1.1vw;border:1.5px solid var(--divider);border-radius:5px;background:var(--white);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;position:relative}
.lead-form-agree-box::after{content:"";width:0.45vw;height:0.22vw;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-0.08vw);opacity:0;transition:opacity .15s}
.lead-form-agree input:checked + .lead-form-agree-box{background:var(--burgundy);border-color:var(--burgundy)}
.lead-form-agree input:checked + .lead-form-agree-box::after{opacity:1}
.lead-form-agree-text{font-size:0.75vw;color:var(--mute);line-height:1.4}
.lead-form-agree-text a{color:var(--ink-dk);text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.lead-form-agree-text a:hover{color:var(--burgundy)}
.lead-form-fallback{font-size:0.82vw;color:var(--mute);line-height:1.5;margin-top:0.5vh;padding-top:1vh;border-top:1px solid var(--divider)}
.lead-form-fallback a{color:var(--gold);font-weight:700;transition:color .2s;text-decoration:underline;text-decoration-color:rgba(176,141,87,0.35);text-underline-offset:3px;text-decoration-thickness:1px}
.lead-form-fallback a:hover{color:var(--gold-dk,#8C6F44);text-decoration-color:var(--gold)}
/* --- FAQ --- */
.faq{
padding:6vw 4vw;
margin:8vh var(--side-pad) 0;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
box-shadow:0 2px 10px rgba(15,17,21,0.03);
position:relative;
display:grid;
grid-template-columns:32vw 1fr;
gap:3vw;
align-items:start;
}
.faq-head{
padding:0;
display:flex;flex-direction:column;gap:1.5vh;
position:sticky;top:14vh;
}
.faq-head .section-kicker{margin-bottom:1vh}
.faq-title{font-size:2.4vw;font-weight:800;line-height:1.1;letter-spacing:-0.025em;color:var(--ink-dk)}
.faq-title em{font-style:normal;color:var(--burgundy)}
.faq-sub{font-size:0.95vw;color:var(--mute);line-height:1.55;max-width:26vw;margin-top:1vh}
.faq-cta{
display:inline-flex;align-items:center;gap:0.5vw;
font-size:0.85vw;font-weight:700;color:var(--burgundy);
padding:0.95vw 1.5vw;border:1px solid var(--burgundy);border-radius:100px;
transition:all .3s;margin-top:2vh;align-self:flex-start;
}
.faq-cta:hover{background:var(--burgundy);color:#fff;transform:translateY(-2px)}
.faq-cta .arrow{font-size:1vw;transition:transform .3s}
.faq-cta:hover .arrow{transform:translateX(3px)}
.faq-list{display:flex;flex-direction:column;gap:0.8vh}
.faq-item{
background:linear-gradient(135deg,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.3) 100%),linear-gradient(180deg,#EDEFF2 0%,#DCE4EC 100%);
border:1px solid rgba(255,255,255,0.8);
border-left:3px solid transparent;
border-radius:var(--rad-md);
overflow:hidden;
backdrop-filter:blur(14px) saturate(160%);
-webkit-backdrop-filter:blur(14px) saturate(160%);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),inset 0 -1px 0 rgba(15,15,16,0.04),0 2px 8px rgba(15,17,21,0.04);
transition:border-left-color .3s, box-shadow .3s, transform .3s;
}
.faq-item.open{border-left-color:var(--gold);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 18px 40px rgba(15,17,21,0.08)}
.faq-q{
width:100%;
display:flex;align-items:center;justify-content:space-between;gap:1.5vw;
padding:1.8vw 1.8vw;
background:transparent;border:none;
font:inherit;
font-size:1.05vw;font-weight:700;letter-spacing:-0.01em;
color:var(--ink-dk);text-align:left;cursor:pointer;
transition:color .2s;
}
.faq-q:hover{color:var(--gold)}
.faq-icon{
flex-shrink:0;
width:2vw;height:2vw;min-width:32px;min-height:32px;
border-radius:50%;
background:linear-gradient(135deg,rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.4) 100%),linear-gradient(180deg,#F1F1EF 0%,#E5E7E3 100%);
border:1px solid rgba(176,141,87,0.3);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 1px 2px rgba(15,15,16,0.04);
display:inline-flex;align-items:center;justify-content:center;
position:relative;
transition:background .3s, transform .4s cubic-bezier(.22,1,.36,1);
}
.faq-item.open .faq-icon{background:var(--gold);border-color:var(--gold);transform:rotate(45deg);box-shadow:0 4px 12px rgba(176,141,87,0.35)}
.faq-icon::before,.faq-icon::after{
content:"";position:absolute;
background:var(--gold);
transition:background .3s;
}
.faq-icon::before{width:0.8vw;height:1.5px;min-width:14px}
.faq-icon::after{width:1.5px;height:0.8vw;min-height:14px}
.faq-item.open .faq-icon::before,.faq-item.open .faq-icon::after{background:#fff}
.faq-a{
max-height:0;
overflow:hidden;
transition:max-height .5s cubic-bezier(.22,1,.36,1);
}
.faq-item.open .faq-a{max-height:60vh}
.faq-a-inner{
padding:0 1.8vw 2.2vw;
font-size:0.95vw;color:var(--ink);line-height:1.6;
}
.faq-a-inner a{color:var(--burgundy);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* --- BLOG --- */
/* Используем section.blog (не просто .blog) чтобы стиль не применялся к body.blog
которое WordPress автоматически добавляет на странице записей */
section.blog{
padding:6vw 4vw;
margin:8vh var(--side-pad) 8vh;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
box-shadow:0 2px 10px rgba(15,17,21,0.03);
position:relative;
}
.blog-head{display:flex;align-items:end;justify-content:space-between;gap:3vw;margin-bottom:5vh;flex-wrap:wrap}
.blog-head-left{max-width:55vw}
.blog-head .section-kicker{margin-bottom:1.5vh}
.blog-title{font-size:3vw;font-weight:800;line-height:1.1;letter-spacing:-0.025em;color:var(--ink-dk)}
.blog-title em{font-style:normal;color:var(--burgundy)}
.blog-cta{display:inline-flex;align-items:center;gap:0.6vw;font-size:0.9vw;font-weight:700;color:var(--burgundy);padding:0.95vw 1.6vw;border:1px solid var(--burgundy);border-radius:100px;transition:all .3s;white-space:nowrap;margin-bottom:0.5vh}
.blog-cta:hover{background:var(--burgundy);color:#fff;transform:translateY(-2px)}
.blog-cta .arrow{font-size:1vw;transition:transform .3s}
.blog-cta:hover .arrow{transform:translateX(3px)}
.blog-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5vw}
.blog-card{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-md);
overflow:hidden;
box-shadow:0 6px 24px rgba(15,17,21,0.04);
transition:box-shadow .4s, transform .4s;
display:flex;flex-direction:column;
text-decoration:none;
color:inherit;
}
.blog-card:hover{box-shadow:0 22px 48px rgba(15,17,21,0.1);transform:translateY(-4px)}
.blog-cover{
aspect-ratio:16/10;
overflow:hidden;
position:relative;
background:linear-gradient(135deg,#2d2528 0%,#1a1a1d 100%);
}
.blog-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.blog-card:hover .blog-cover img{transform:scale(1.04)}
.blog-cover-placeholder{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#2d2528 0%,#1a1a1d 100%);
overflow:hidden;
}
.blog-cover-placeholder::before{
content:"";position:absolute;inset:0;
background:radial-gradient(ellipse 60% 50% at 30% 20%,rgba(122,47,60,0.35) 0%,transparent 60%);
}
.blog-cover-placeholder-num{
font-size:6vw;font-weight:900;color:rgba(255,255,255,0.08);
letter-spacing:-0.04em;line-height:1;position:relative;z-index:1;
}
.blog-card-body{padding:2.2vh 1.6vw 2.4vh;display:flex;flex-direction:column;flex:1}
.blog-rubric{
font-size:0.7vw;letter-spacing:0.1em;text-transform:uppercase;
color:var(--gold);font-weight:700;margin-bottom:1.2vh;
display:inline-flex;align-items:center;gap:0.5vw;
}
.blog-rubric::before{content:"";width:1.2vw;height:1px;background:var(--gold)}
.blog-card h3{
font-size:1.1vw;font-weight:800;line-height:1.3;letter-spacing:-0.01em;
color:var(--ink-dk);margin-bottom:1vh;
}
.blog-excerpt{
font-size:0.85vw;color:var(--mute);line-height:1.55;
margin-bottom:2vh;
}
.blog-meta{
margin-top:auto;padding-top:1.5vh;border-top:1px solid var(--divider);
display:flex;align-items:center;justify-content:space-between;gap:0.8vw;
font-size:0.72vw;color:var(--mute);
}
.blog-meta-date{letter-spacing:0.02em;font-weight:600}
.blog-meta-read{display:inline-flex;align-items:center;gap:0.4vw}
.blog-more{
display:inline-flex;align-items:center;gap:0.4vw;
font-size:0.82vw;font-weight:700;color:var(--gold);
transition:gap .25s;
}
.blog-card:hover .blog-more{gap:0.7vw}
/* === УНИВЕРСАЛЬНАЯ БЕЛАЯ ПЛАШКА СЕКЦИЙ === */
.section-wrap{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
box-shadow:0 2px 10px rgba(15,17,21,0.03);
position:relative;
}
/* === BLUR-UP ЗАГРУЗКА КАРТИНОК === */
img.lazy-img{
opacity:0;
transition:opacity .6s ease, filter .6s ease;
filter:blur(20px);
}
img.lazy-img.loaded{
opacity:1;
filter:blur(0);
}
/* Контейнер картинки со скелетоном */
.img-wrap{
position:relative;
overflow:hidden;
background:linear-gradient(135deg,#E5E7E9 0%,#D8DCE0 50%,#E5E7E9 100%);
background-size:200% 200%;
animation:shimmer 1.8s ease-in-out infinite;
}
.img-wrap.img-loaded{
animation:none;
background:var(--bg);
}
@keyframes shimmer{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
/* Hero-картинка через background — делаем через отдельный span с blur-up */
.poster-img.loading{filter:blur(30px);opacity:0}
.poster-img.loaded{filter:none;opacity:1;transition:opacity .8s ease, filter .8s ease}
/* ============================================================
ШАПКА — АДАПТИВ + МОБИЛЬНОЕ МЕНЮ
Брейкпоинты: ≥1200 PC | 768–1199 планшет | ≤767 мобилка
============================================================ */
/* --- ШАПКА: элементы только для мобилки (скрыты на ПК) --- */
.hdr-burger,
.hdr-phone-icon{display:none}
/* hdr-cta-short спрятан на ПК (виден краткий вариант на планшете) */
.hdr-cta .hdr-cta-short{display:none}
.hdr-cta .hdr-cta-full{display:inline}
/* ====== ПЛАНШЕТ 768–1199 ====== */
@media (max-width:1199px){
/* Меньше боковых паддингов, фиксированные размеры */
.page-top{padding:8px 18px 0}
.hdr{padding:10px 10px 10px 16px;gap:12px;border-radius:100px}
/* Сбрасываем glass-плашку логотипа — на адаптиве голый SVG */
.hdr-logo{gap:10px}
.hdr-logo-venzel{
width:38px;height:38px;
min-width:0;min-height:0;
padding:0;border-radius:0;
background:none;border:none;box-shadow:none;
backdrop-filter:none;-webkit-backdrop-filter:none;
}
.hdr-logo-name{font-size:15px}
.hdr-logo-sub{font-size:10px;margin-top:2px}
/* Десктопное меню скрыто — оно в бургере */
.hdr-nav,
.mega-overlay{display:none !important}
/* Контакты компактные — телефон остаётся, email скрыт */
.hdr-contacts{margin-left:auto;gap:1px}
.hdr-phone{font-size:14px}
.hdr-email{display:none}
.hdr-search{width:38px;height:38px}
.hdr-search svg{width:16px;height:16px}
/* CTA сокращается до короткого варианта */
.hdr-cta{padding:11px 16px;font-size:13px;border-radius:100px}
.hdr-cta .hdr-cta-full{display:none}
.hdr-cta .hdr-cta-short{display:inline}
/* Бургер появляется */
.hdr-burger{
display:flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:10px;
background:rgba(15,15,16,0.06);
border:1px solid rgba(15,15,16,0.08);
color:var(--ink-dk);
transition:background .25s, border-color .25s;
cursor:pointer;
}
.hdr-burger:hover{background:rgba(15,15,16,0.10);border-color:rgba(15,15,16,0.12)}
.hdr-burger svg{width:18px;height:18px;display:block}
}
/* ====== МОБИЛКА ≤767 ====== */
@media (max-width:767px){
.page-top{padding:6px 10px 0}
.hdr{padding:8px 8px 8px 14px;gap:8px}
.hdr-logo{gap:8px}
.hdr-logo-venzel{
width:32px;height:32px;
min-width:0;min-height:0;
padding:0;border-radius:0;
background:none;border:none;box-shadow:none;
backdrop-filter:none;-webkit-backdrop-filter:none;
}
.hdr-logo-name{font-size:14px}
.hdr-logo-sub{display:none}
/* Скрываем текстовые контакты и CTA — они в меню. Лупа остаётся! */
.hdr-contacts,
.hdr-cta{display:none !important}
/* Лупа — первая "правая" иконка после лого, остальные жмутся к ней */
.hdr-search{
width:38px;height:38px;
margin-left:auto;flex-shrink:0;
}
.hdr-search svg{width:16px;height:16px}
/* Телефон-иконка — заметная (бордовый круг). Без margin-left — он на лупе */
.hdr-phone-icon{
display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:50%;
background:var(--burgundy);color:#fff;
flex-shrink:0;
box-shadow:0 4px 12px rgba(122,47,60,0.25);
transition:background .25s, transform .25s, box-shadow .25s;
text-decoration:none;
}
.hdr-phone-icon:hover{background:var(--burgundy-dk);transform:translateY(-1px);box-shadow:0 6px 16px rgba(122,47,60,0.35)}
.hdr-phone-icon svg{width:16px;height:16px;display:block}
.hdr-burger{margin-left:0;flex-shrink:0}
}
/* ============================================================
МОБИЛЬНОЕ МЕНЮ — fullscreen + push-навигация
============================================================ */
.mob-menu{
position:fixed;inset:0;z-index:101;
background:var(--bg);
display:flex;flex-direction:column;
visibility:hidden;opacity:0;transform:scale(0.97);
transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.mob-menu.is-open{
visibility:visible;opacity:1;transform:scale(1);
transition:opacity .35s cubic-bezier(0.22,1,0.36,1), transform .35s cubic-bezier(0.22,1,0.36,1);
}
/* Скрываем на десктопе на всякий случай (если кто-то заберётся через DOM) */
@media (min-width:1200px){
.mob-menu{display:none !important}
}
/* === Шапка меню === */
.mob-menu__head{
display:flex;align-items:center;justify-content:space-between;
padding:18px 20px;flex-shrink:0;
background:rgba(245,245,243,0.95);
backdrop-filter:blur(20px) saturate(180%);
-webkit-backdrop-filter:blur(20px) saturate(180%);
border-bottom:1px solid var(--divider);
position:relative;z-index:5;
}
.mob-menu__brand{
display:flex;align-items:center;gap:10px;
text-decoration:none;color:inherit;
}
.mob-menu__venzel{width:32px;height:32px;color:var(--burgundy);flex-shrink:0}
.mob-menu__venzel svg{width:100%;height:100%;display:block}
.mob-menu__brand-text{display:flex;flex-direction:column;line-height:1.1}
.mob-menu__brand-name{font-size:15px;font-weight:800;color:var(--ink-dk);letter-spacing:-0.01em}
.mob-menu__brand-sub{font-size:10px;color:var(--mute);margin-top:2px}
.mob-menu__close{
width:38px;height:38px;border-radius:50%;
background:rgba(15,15,16,0.05);border:none;color:var(--ink-dk);
display:flex;align-items:center;justify-content:center;
cursor:pointer;flex-shrink:0;
transition:background .2s, transform .25s;
}
.mob-menu__close:hover{background:rgba(15,15,16,0.10);transform:rotate(90deg)}
.mob-menu__close svg{width:18px;height:18px;display:block}
/* === Push-контейнер === */
.mob-menu__body{
flex:1;position:relative;overflow:hidden;
}
.mob-menu__pane{
position:absolute;inset:0;
display:flex;flex-direction:column;
background:var(--bg);
transform:translateX(100%);
transition:transform .35s cubic-bezier(0.22,1,0.36,1);
overflow-y:auto;-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
}
.mob-menu__pane.is-active{transform:translateX(0)}
.mob-menu__pane.is-pushed{transform:translateX(-25%)}
.mob-menu__pane[data-pane="root"]{transform:translateX(0)}
.mob-menu__pane[data-pane="root"].is-pushed{transform:translateX(-25%)}
/* "Назад" хэдер в дочерних pane'ах */
.mob-menu__back{
display:flex;align-items:center;gap:8px;
padding:14px 20px;width:100%;text-align:left;
background:rgba(255,255,255,0.6);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border:none;border-bottom:1px solid var(--divider);
font-family:inherit;font-size:14px;font-weight:600;color:var(--burgundy);
position:sticky;top:0;z-index:2;cursor:pointer;
transition:background .2s;
}
.mob-menu__back:hover{background:rgba(255,255,255,0.85)}
.mob-menu__back-arrow{width:14px;height:14px;flex-shrink:0;display:block}
.mob-menu__back-title{
margin-left:auto;color:var(--ink-dk);font-weight:800;
font-size:15px;letter-spacing:-0.01em;
}
/* === Список и пункты === */
.mob-menu__list{display:flex;flex-direction:column}
/* Простой пункт-ссылка (a) или раскрывающий пункт без url (button) */
.mob-menu__item{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:16px 20px;width:100%;text-align:left;
background:none;border:none;border-bottom:1px solid var(--divider);
font-family:inherit;color:var(--ink-dk);text-decoration:none;
cursor:pointer;
transition:background .15s;
}
.mob-menu__item:hover{background:rgba(15,15,16,0.03)}
.mob-menu__item:active{background:rgba(15,15,16,0.06)}
/* SPLIT-LINK: текст = переход, стрелка = раскрытие подуровня */
.mob-menu__split{
display:flex;align-items:stretch;
border-bottom:1px solid var(--divider);
}
.mob-menu__split-link{
flex:1;min-width:0;
padding:16px 12px 16px 20px;
color:var(--ink-dk);text-decoration:none;
display:flex;flex-direction:column;justify-content:center;
transition:background .15s;
}
.mob-menu__split-link:hover{background:rgba(15,15,16,0.03)}
.mob-menu__split-link:active{background:rgba(15,15,16,0.06)}
.mob-menu__split-toggle{
flex:0 0 56px;
display:flex;align-items:center;justify-content:center;
background:none;border:none;
border-left:1px solid var(--divider);
color:var(--mute);cursor:pointer;
transition:background .15s, color .15s;
}
.mob-menu__split-toggle:hover{background:rgba(15,15,16,0.04);color:var(--burgundy)}
.mob-menu__split-toggle:active{background:rgba(15,15,16,0.08)}
/* Названия и подписи */
.mob-menu__name-plain{
font-size:16px;font-weight:600;color:var(--ink-dk);
letter-spacing:-0.005em;
}
.mob-menu__content,
.mob-menu__split-link{
display:flex;flex-direction:column;min-width:0;
}
.mob-menu__name{
font-size:15px;font-weight:700;color:var(--ink-dk);
letter-spacing:-0.01em;margin-bottom:3px;
}
.mob-menu__sub{
font-size:12px;color:var(--mute);
font-weight:500;line-height:1.45;
}
/* Шеврон */
.mob-menu__chev{
width:14px;height:14px;flex-shrink:0;display:block;
color:var(--mute);
}
.mob-menu__item:hover .mob-menu__chev{color:var(--burgundy)}
/* === Подвал === */
.mob-menu__foot{
flex-shrink:0;border-top:1px solid var(--divider);
background:var(--white);padding:18px 20px 22px;
/* Учитываем safe-area для iPhone с домашней полосой */
padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px));
}
.mob-menu__contacts{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.mob-menu__phone{
font-size:20px;font-weight:800;color:var(--ink-dk);
letter-spacing:-0.01em;text-decoration:none;
}
.mob-menu__email{
font-size:13px;color:var(--mute);text-decoration:none;
}
.mob-menu__cta{
display:block;text-align:center;
background:var(--burgundy);color:#fff;text-decoration:none;
padding:14px 18px;border-radius:100px;
font-size:14px;font-weight:700;letter-spacing:0.01em;
transition:background .25s, transform .15s;
}
.mob-menu__cta:hover{background:var(--burgundy-dk)}
.mob-menu__cta:active{transform:scale(0.98)}
/* Lock body when menu open */
body.mm-locked{overflow:hidden;touch-action:none}
/* ============================================================
ФУТЕР — АДАПТИВ
≥1200 — 4 колонки (текущая резинка на vw, без изменений)
768–1199 — 2×2: Бренд + Связаться сверху | Меню + Услуги снизу
≤767 — 1 колонка стопкой
============================================================ */
/* ====== ПЛАНШЕТ 768–1199 ====== */
@media (max-width:1199px){
.ftr{padding:48px 24px 28px;border-top-left-radius:24px;border-top-right-radius:24px}
.ftr-main{
grid-template-columns:1fr 1fr;
gap:36px 32px;
margin-bottom:32px;
}
/* Порядок: Бренд (1) | Связаться (2) | Меню (3) | Услуги (4)
В DOM сейчас: Бренд → Меню → Услуги → Связаться
Перетасуем через order */
.ftr-main > *:nth-child(1){order:1} /* Бренд */
.ftr-main > *:nth-child(2){order:3} /* Меню — вниз */
.ftr-main > *:nth-child(3){order:4} /* Услуги — вниз */
.ftr-main > *:nth-child(4){order:2} /* Связаться — вверх рядом с брендом */
/* Бренд */
.ftr-brand{gap:12px;margin-bottom:18px}
.ftr-brand-logo{width:42px;height:42px}
.ftr-brand-title{font-size:18px}
.ftr-brand-sub{font-size:11px}
.ftr-slogan{font-size:22px;margin-bottom:18px}
.ftr-legal{font-size:13px;line-height:1.55}
.ftr-legal .reqs{font-size:12px;gap:3px}
.ftr-badges{gap:10px;margin-top:18px}
.ftr-badge{height:36px;min-width:54px}
.ftr-badge--pravo{height:43px;min-width:65px}
.ftr-badge--tj{height:32px;min-width:32px;max-width:36px}
/* Колонки */
.ftr-col h4{font-size:11px;margin-bottom:14px}
.ftr-col ul{gap:10px}
.ftr-col ul a{font-size:14px}
/* Связаться */
.ftr-contacts .phone{font-size:22px;margin-bottom:8px}
.ftr-contacts .email{font-size:14px;margin-bottom:14px}
.ftr-contacts .address{font-size:13px;margin-bottom:6px}
.ftr-contacts .hours{font-size:13px;margin-bottom:18px}
.ftr-msg{gap:10px;margin-top:6px;grid-template-columns:repeat(3,42px);max-width:none}
.ftr-msg a{width:42px;height:42px;min-width:42px;min-height:42px}
.ftr-msg svg{width:18px;height:18px}
.ftr-msg a[title="ВКонтакте"] svg{width:36px !important;height:36px !important}
.ftr-msg a[title="MAX мессенджер"] svg{width:30px !important;height:30px !important}
/* Низ */
.ftr-bottom{
padding-top:22px;font-size:12px;gap:14px;
flex-direction:column;align-items:flex-start;
}
.ftr-bottom-links{gap:18px;flex-wrap:wrap}
}
/* ====== МОБИЛКА ≤767 ====== */
@media (max-width:767px){
.ftr{padding:36px 16px 22px;border-top-left-radius:20px;border-top-right-radius:20px;margin-top:14px}
/* Убираем декоративный бордовый радиальный фон — на мобилке чистый белый */
.ftr::before{display:none}
.ftr-main{
grid-template-columns:1fr;
gap:28px;
margin-bottom:24px;
}
/* Сбрасываем order — на мобиле порядок DOM нормальный (бренд → меню → услуги → связаться) */
.ftr-main > *{order:initial}
/* Бренд */
.ftr-brand{gap:10px;margin-bottom:14px}
.ftr-brand-logo{width:38px;height:38px}
.ftr-brand-title{font-size:17px}
.ftr-brand-sub{font-size:11px}
.ftr-slogan{font-size:20px;margin-bottom:14px}
.ftr-legal{font-size:13px;line-height:1.55}
.ftr-legal strong{margin-bottom:6px}
.ftr-legal .reqs{font-size:12px}
.ftr-badges{gap:10px;margin-top:14px}
.ftr-badge{height:32px;min-width:48px}
.ftr-badge--pravo{height:38px;min-width:58px}
/* Колонки */
.ftr-col h4{font-size:11px;margin-bottom:12px}
.ftr-col ul{gap:10px}
.ftr-col ul a{font-size:14px}
/* Связаться */
.ftr-contacts .phone{font-size:22px;margin-bottom:6px}
.ftr-contacts .email{font-size:14px;margin-bottom:12px}
.ftr-contacts .address{font-size:13px;margin-bottom:6px}
.ftr-contacts .hours{font-size:13px;margin-bottom:16px}
.ftr-msg{gap:10px;margin-top:4px;flex-wrap:wrap}
.ftr-msg a{width:42px;height:42px;min-width:42px;min-height:42px}
.ftr-msg svg{width:18px;height:18px}
.ftr-msg a[title="ВКонтакте"] svg{width:36px !important;height:36px !important}
.ftr-msg a[title="MAX мессенджер"] svg{width:30px !important;height:30px !important}
/* Низ */
.ftr-bottom{
padding-top:18px;font-size:11px;gap:12px;
flex-direction:column;align-items:flex-start;
line-height:1.5;
}
.ftr-bottom-links{
gap:6px 14px;
flex-direction:column;
}
/* Safe-area для iPhone X+ */
.ftr{padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px))}
}
/* ============================================================
HERO — АДАПТИВ
≥1200 — постер 21:10, фото фоном, текст поверх (как было)
768–1199 — постер 16:10 (ниже), фиксированные шрифты
≤767 — Вариант 1: фото сверху (4:3) → текст снизу стопкой
============================================================ */
/* ====== ПЛАНШЕТ 768–1199 ====== */
@media (max-width:1199px){
.hero-poster{padding:8px 0 0}
.poster{
aspect-ratio:16/10;
border-radius:20px;
border-left:none;
border-right:none;
}
.poster-content{padding:36px 32px}
.poster-kicker{
font-size:26px;margin-bottom:14px;
max-width:none;
}
.poster-title{
font-size:42px;line-height:1.02;
max-width:75%;margin-bottom:20px;
letter-spacing:-0.03em;
}
.poster-desc{
font-size:14px;line-height:1.55;
max-width:65%;margin-bottom:26px;
}
.poster-actions{gap:12px}
.poster-cta{
padding:14px 24px;font-size:14px;
gap:10px;
}
.poster-cta .arrow{font-size:16px}
/* Фейд ослабляем (фото мельче, не такой сильный нужен) */
.poster-fade{
background:linear-gradient(90deg,
rgba(255,255,255,0.95) 0%,
rgba(255,255,255,0.85) 40%,
rgba(255,255,255,0.4) 65%,
rgba(255,255,255,0.05) 85%,
rgba(255,255,255,0) 100%);
}
}
/* ====== МОБИЛКА ≤767 — ВАРИАНТ 1: стопкой ====== */
@media (max-width:767px){
.hero-poster{padding:6px 0 0}
/* .poster — больше не position:relative с aspect-ratio,
а обычный flex-контейнер: фото сверху, текст снизу */
.poster{
aspect-ratio:auto;
border-radius:16px;
border-left:none;
border-right:none;
display:flex;
flex-direction:column;
box-shadow:0 12px 30px rgba(15,17,21,0.08);
}
/* Фото — обычный блочный элемент сверху (был absolute) */
.poster-img{
position:relative; /* было absolute */
inset:auto; /* сбрасываем top/right/bottom */
width:100%;
height:auto;
aspect-ratio:4/3;
background-position:center right;
flex-shrink:0;
}
/* Скрываем декоративные слои фона — на мобилке они не нужны
(фейд имеет смысл только когда текст НА фоне, а у нас текст под фото) */
.poster-grain,
.poster-fade,
.poster-fade-vert,
.poster-silhouette{display:none}
/* Контент — обычный блочный элемент снизу (был absolute) */
.poster-content{
position:relative; /* было absolute */
inset:auto;
padding:24px 22px 28px;
display:flex;
flex-direction:column;
}
.poster-kicker{
font-family:'Caveat',cursive;
font-size:22px;
margin-bottom:12px;
line-height:1.1;
max-width:none;
}
.poster-title{
font-size:26px;
font-weight:900;
line-height:1.05;
letter-spacing:-0.025em;
margin-bottom:14px;
max-width:none;
/* Только overflow-wrap — позволяет переносить длинные слова если иначе вылезут.
НЕ word-break:break-word (он ломал посреди слова, было «бизн / еса») */
overflow-wrap:break-word;
}
/* Сбрасываем word-by-word анимацию (там translateY:110% — на мобилке без анимации некрасиво) */
.poster-title .word{
overflow:visible;
display:inline;
}
.poster-title .word-inner{
transform:none;
display:inline;
}
.poster-desc{
font-size:14px;
line-height:1.55;
margin-bottom:22px;
max-width:none;
/* Снимаем opacity:0 / translateY — это анимация ПК-версии, на мобиле сразу видим */
opacity:1;
transform:none;
}
.poster-desc .line{
display:inline; /* было block — теперь весь текст одним абзацем */
margin-bottom:0;
}
/* Между строками — пробел вместо переноса */
.poster-desc .line + .line::before{content:" "}
.poster-actions{
display:block; /* было flex с gap, теперь блок чтобы кнопка во всю ширину */
opacity:1;
transform:none;
}
/* Кнопка — во всю ширину, центрирована */
.poster-cta{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
width:100%;
padding:16px 22px;
font-size:15px;
font-weight:700;
box-shadow:0 6px 18px rgba(122,47,60,0.3);
}
.poster-cta .arrow{
font-size:18px;
}
/* poster-code-br (мелкий текст в углу) — скрываем, не для мобилки */
.poster-code-br{display:none}
/* poster-photo-switcher (если используется) — тоже скрываем */
.poster-photo-switcher{display:none}
}
/* ============================================================
STATS — АДАПТИВ
≥1200 — head 2 колонки, grid 4 в ряд (как было)
768–1199 — head 2 колонки, grid 2×2
≤767 — head стопкой, grid 1 колонка стопкой, бейджи перенесены вниз
============================================================ */
/* По умолчанию (десктоп) — мобильные бейджи скрыты, head-бейджи видны */
.stats-badges--mobile{display:none}
/* ====== ПЛАНШЕТ 768–1199 ====== */
@media (max-width:1199px){
.stats-wrap{
margin:32px 24px 0;
padding:36px 28px;
border-radius:24px;
}
/* Head — 2 колонки оставляем */
.stats-head{
grid-template-columns:1fr 1fr;
gap:24px;
margin-bottom:32px;
}
.section-kicker{
font-size:11px;
margin-bottom:12px;
gap:10px;
}
.section-kicker::before{width:24px}
.stats-title{font-size:32px;line-height:1.1}
.stats-desc{font-size:14px;line-height:1.55}
/* Бейджи в head — компактнее */
.stats-right{gap:18px}
.stats-badges{gap:10px}
.stats-badges-label{font-size:10px}
.stats-badges-row{gap:10px}
.stats-badge{height:36px;min-width:54px}
.stats-badge--pravo{height:43px;min-width:65px}
/* Grid — 2×2 */
.stats-grid{
grid-template-columns:1fr 1fr;
gap:0;
}
.stat-card{
padding:24px 20px;
border-left:1px solid var(--divider);
border-top:1px solid var(--divider);
}
/* Сбрасываем "первый ряд без top-border" и "первая колонка без left-border" */
.stat-card:nth-child(1),
.stat-card:nth-child(2){border-top:none;padding-top:0}
.stat-card:nth-child(1),
.stat-card:nth-child(3){border-left:none;padding-left:0}
.stat-card:nth-child(2),
.stat-card:nth-child(4){padding-right:0}
.stat-card:nth-child(3),
.stat-card:nth-child(4){padding-bottom:0}
.stat-num{font-size:46px;margin-bottom:10px;line-height:0.95}
.stat-num-sfx{font-size:0.36em}
.stat-label{font-size:13px;line-height:1.45;max-width:100%}
}
/* ====== МОБИЛКА ≤767 ====== */
@media (max-width:767px){
.stats-wrap{
margin:16px 14px 0;
padding:28px 20px;
border-radius:20px;
}
/* Скрываем SVG-силуэт на фоне (он в opacity:0.04 — на мобилке съедает производительность) */
.stats-bg-svg{display:none}
/* Head — стопкой */
.stats-head{
grid-template-columns:1fr;
gap:18px;
margin-bottom:24px;
}
.stats-right{
align-items:flex-start;
gap:0;
}
/* Скрываем head-бейджи на мобилке — они дублируются ниже после цифр */
.stats-badges--head{display:none}
.section-kicker{
font-size:11px;
margin-bottom:10px;
gap:8px;
}
.section-kicker::before{width:20px}
.stats-title{
font-size:26px;
line-height:1.15;
letter-spacing:-0.02em;
}
.stats-desc{
font-size:14px;
line-height:1.55;
text-align:left;
}
.stats-right .stats-desc{text-align:left}
/* Grid — 2×2 (как на планшете, только цифры покрупнее, паддинги поменьше) */
.stats-grid{
grid-template-columns:1fr 1fr;
gap:0;
}
.stat-card{
padding:18px 12px;
border-left:1px solid var(--divider);
border-top:1px solid var(--divider);
}
.stat-card:nth-child(1),
.stat-card:nth-child(2){border-top:none;padding-top:0}
.stat-card:nth-child(1),
.stat-card:nth-child(3){border-left:none;padding-left:0}
.stat-card:nth-child(2),
.stat-card:nth-child(4){padding-right:0}
.stat-card:nth-child(3),
.stat-card:nth-child(4){padding-bottom:0}
.stat-num{
font-size:34px;
margin-bottom:6px;
line-height:0.95;
}
.stat-num-sfx{font-size:0.4em}
.stat-label{
font-size:12px;
line-height:1.4;
max-width:100%;
}
/* Бейджи — показываем мобильную версию, скрытую на ПК */
.stats-badges--mobile{
display:flex;
flex-direction:column;
gap:12px;
margin-top:28px;
padding-top:24px;
border-top:1px solid var(--divider);
align-items:flex-start;
}
.stats-badges--mobile .stats-badges-label{
font-size:10px;
letter-spacing:0.1em;
}
.stats-badges--mobile .stats-badges-row{
gap:14px;
align-items:center;
}
.stats-badges--mobile .stats-badge{
height:36px;
min-width:54px;
}
.stats-badges--mobile .stats-badge--pravo{
height:43px;
min-width:65px;
}
}
/* ============================================================
SERVICES — АДАПТИВ
≥1200 — bento 6 колонок (как было)
768–1199 — bento 2 колонки, плитки в стопку
≤767 — 1 колонка, плитки тоже стопкой
============================================================ */
/* ====== ПЛАНШЕТ 768–1199 ====== */
@media (max-width:1199px){
.services{
grid-template-columns:1fr 1fr;
gap:16px;
padding:48px 24px 32px;
}
.services > .services-head{
grid-column:1 / -1;
margin-bottom:8px;
}
.services-head{max-width:none}
.services-title{font-size:32px;line-height:1.1;letter-spacing:-0.02em}
/* Сбрасываем все pos-* — карточки идут стопкой по DOM-порядку */
.service-card[class*="pos-"]{
grid-column:auto;
grid-row:auto;
}
/* Big-карточки (Стройка, Госконтракты) — на всю ширину 2 колонок */
.service-card.big{
grid-column:1 / -1;
}
/* Карточка-форма — тоже на всю ширину */
.service-card.form-card,
.service-card.pos-10{
grid-column:1 / -1;
}
/* Высоты картинок */
.service-card.big .card-img{height:280px}
.service-card .card-img{height:200px}
/* Тексты */
.service-card.big .card-body{padding:24px 22px;gap:14px}
.service-card.big h3{font-size:26px;line-height:1.1;margin-bottom:8px}
.service-card.big .card-desc{font-size:14px;line-height:1.55;margin-bottom:12px}
.service-card.light .card-body{padding:22px 20px;gap:12px}
.service-card.light h3{font-size:21px;line-height:1.15}
.service-card.light .card-desc{font-size:13.5px;line-height:1.5}
/* Плитки внутри карточки — на планшете 2 колонки */
.tiles{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}
.tile{
grid-column:auto !important;
padding:12px 14px;
}
.tile.w4,.tile.w6{grid-column:auto !important}
.tile-title{font-size:13px;line-height:1.2}
.tile-sub{font-size:11px;line-height:1.35}
/* Иконки крупнее + фон-кружок для контраста */
.tile-ic-wrap{
width:32px;height:32px;
background:rgba(122,47,60,0.08);
border-radius:50%;
flex-shrink:0;
}
.tile-ic-wrap .sv-ic{width:18px;height:18px}
/* Кнопка "Подробнее" во всю ширину, заметная */
.card-cta{
width:100%;
justify-content:center;
padding:13px 18px;
font-size:14px;
gap:8px;
border-radius:100px;
border-width:1.5px;
}
.card-cta .arrow{font-size:16px}
.service-cta-banner{
grid-column:1 / -1;
padding:24px 22px;
font-size:16px;
border-radius:20px;
}
}
/* ====== МОБИЛКА ≤767 ====== */
@media (max-width:767px){
.services{
grid-template-columns:1fr;
gap:14px;
padding:32px 14px 22px;
}
.services > .services-head{
grid-column:1 / -1;
margin-bottom:6px;
}
.services-title{font-size:26px;line-height:1.15}
/* Все карточки на всю ширину */
.service-card[class*="pos-"]{
grid-column:1 / -1;
grid-row:auto;
}
.service-card{border-radius:20px}
/* Высоты картинок поменьше */
.service-card.big .card-img{height:220px}
.service-card .card-img{height:160px}
/* Body padding меньше */
.service-card.big .card-body{padding:22px 20px;gap:12px}
.service-card.big h3{font-size:24px;line-height:1.1;margin-bottom:8px}
.service-card.big .card-desc{font-size:14px;line-height:1.55;margin-bottom:10px}
.service-card.light .card-body{padding:20px 18px;gap:10px}
.service-card.light h3{font-size:20px;line-height:1.15}
.service-card.light .card-desc{font-size:13.5px;line-height:1.5}
/* Плитки — 1 колонка на узких экранах */
.tiles{
display:grid;
grid-template-columns:1fr;
gap:8px;
}
.tile,
.tile.w4,
.tile.w6{
grid-column:auto !important;
padding:12px 14px;
}
.tile-title{font-size:13.5px;line-height:1.2}
.tile-sub{font-size:11.5px;line-height:1.35}
/* Иконки крупнее + фон-кружок */
.tile-ic-wrap{
width:32px;height:32px;
background:rgba(122,47,60,0.08);
border-radius:50%;
flex-shrink:0;
}
.tile-ic-wrap .sv-ic{width:18px;height:18px}
/* Кнопка "Подробнее" во всю ширину */
.card-cta{
width:100%;
justify-content:center;
padding:13px 18px;
font-size:14px;
gap:8px;
border-radius:100px;
border-width:1.5px;
}
.card-cta .arrow{font-size:16px}
/* CTA-баннер */
.service-cta-banner{
padding:22px 18px;
font-size:15px;
border-radius:18px;
line-height:1.3;
}
/* Карточка-форма — компактная */
.service-card.form-card .card-body{padding:24px 20px}
.service-card.form-card h3{font-size:22px}
/* card-num (нумерация на фото) — оставляем, но компактнее */
.card-num{font-size:14px;padding:6px 10px}
}
/* ============================================================
КАРУСЕЛЬ ДОП.УСЛУГ (≤1199) — services-extras превращается в скролл
============================================================ */
@media (max-width:1199px){
/* Обёртка перестаёт быть прозрачной — становится grid-ячейкой во всю ширину */
.services-extras{
display:block;
grid-column:1 / -1;
margin-left:calc(var(--section-pad-x) * -1);
margin-right:calc(var(--section-pad-x) * -1);
overflow:hidden;
}
.services-extras-track{
display:flex;
gap:14px;
overflow-x:auto;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
/* V6: padding=0, отступы через margin на first/last карточке */
padding:0 !important;
/* scroll-padding-left чтобы snap правильно работал с margin'ом */
scroll-padding-left:var(--section-pad-x);
}
.services-extras-track::-webkit-scrollbar{display:none}
/* Карточки внутри карусели — фиксированная ширина для scroll-snap */
.services-extras-track > .service-card{
/* На планшете 800px = 3 видимых */
flex:0 0 calc(33.33% - 9px);
grid-column:auto !important;
grid-row:auto !important;
margin:0;
scroll-snap-align:start;
}
/* Отступы первой и последней карточки — 18px от краёв экрана */
.services-extras-track > .service-card:first-child{
margin-left:var(--section-pad-x);
}
.services-extras-track > .service-card:last-child{
margin-right:var(--section-pad-x);
}
/* Принудительно — даже big-карточки в карусели должны быть фиксированной ширины
(на случай если в обёртке окажется big) */
.services-extras-track > .service-card.big{
grid-column:auto !important;
}
/* Body карточек в карусели — компактнее */
.services-extras-track .card-img{height:160px}
.services-extras-track .card-body{padding:18px 16px;gap:10px}
.services-extras-track h3{font-size:18px;line-height:1.2}
.services-extras-track .card-desc{font-size:13px;line-height:1.45;margin-bottom:8px}
}
/* На мобилке — карточки карусели почти на всю ширину, виден край следующей */
@media (max-width:767px){
.services-extras-track > .service-card{
flex:0 0 75%;
}
}
/* ============================================================
КНОПКА "ПОДРОБНЕЕ" ПРИЖАТА К НИЗУ КАРТОЧКИ
============================================================ */
@media (max-width:1199px){
/* card-body должен растягиваться по высоте, чтобы margin-top:auto на cta работал */
.service-card{display:flex;flex-direction:column}
.service-card .card-body{
display:flex;
flex-direction:column;
flex:1;
}
/* Кнопка — прижата к низу */
.card-cta{
margin-top:auto !important;
}
}
/* ============================================================
ФОРМА ЗАЯВКИ (pos-10 / form-card) — адаптация под мобилку/планшет
============================================================ */
@media (max-width:1199px){
.service-card.form-card .card-body{
padding:24px 22px;
gap:14px;
}
.service-card.form-card h3{
font-size:22px;
font-weight:800;
letter-spacing:-0.015em;
line-height:1.15;
}
.service-card.form-card .card-desc{
font-size:13.5px;
line-height:1.5;
margin-bottom:4px;
color:rgba(255,255,255,0.75);
}
.card-form{
display:flex;
flex-direction:column;
gap:10px;
margin-top:auto;
}
.card-form input{
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.14);
color:#fff;
border-radius:100px;
padding:14px 18px;
font-size:15px;
width:100%;
}
.card-form input::placeholder{color:rgba(255,255,255,0.45)}
.card-form input:focus{
background:rgba(255,255,255,0.14);
border-color:rgba(199,74,92,0.5);
}
.card-form-agree{
display:flex;
align-items:flex-start;
gap:10px;
margin-top:6px;
}
.card-form-agree-box{
width:18px;
height:18px;
border-radius:5px;
margin-top:1px;
flex-shrink:0;
}
.card-form-agree-box::after{
width:7px;
height:4px;
transform:rotate(-45deg) translateY(-1px);
}
.card-form-agree-text{
font-size:11.5px;
line-height:1.45;
color:rgba(255,255,255,0.9);
}
.card-form-btn{
padding:15px 22px;
font-size:15px;
gap:8px;
margin-top:6px;
width:100%;
box-shadow:0 4px 12px rgba(176,141,87,0.3);
}
.card-form-btn .arrow{font-size:16px}
}
/* ============================================================
УНИФИКАЦИЯ БЕЛЫХ СЕКЦИЙ НА АДАПТИВЕ
============================================================
Логика на ≥1200: margin: 8vh var(--side-pad) 0 (~80px)
padding: 6vw 4vw, border-radius: 32px
→ блок с отступом от краёв, скруглённый
Логика на ≤1199: margin: var(--section-gap) 0 0 (без боковых margin)
padding: var(--section-gap) var(--side-pad)
→ блок во всю ширину, БЕЗ border-radius
Содержимое внутри отстоит от края на var(--side-pad)
— то же визуальное расстояние что в шапке/hero
============================================================ */
/* ==== ПЛАНШЕТ 768–1199 ==== */
@media (max-width:1199px){
:root{
--section-gap:36px;
--section-pad-x:24px; /* боковой padding ВНУТРИ блока */
}
/* Все белые обёртки — на всю ширину, скругление только сверху+снизу */
.stats-wrap,
.services,
.cases,
.team,
.lead-wrap,
.faq,
section.blog{
margin:var(--section-gap) 0 0 !important;
border-radius:20px !important; /* радиус есть, но левая+правая стороны прижаты к краям экрана */
border-left:none !important;
border-right:none !important;
padding-left:var(--section-pad-x) !important;
padding-right:var(--section-pad-x) !important;
}
/* Вертикальные паддинги — единые */
.stats-wrap,
.services,
.cases,
.team,
.faq,
section.blog{
padding-top:var(--section-gap) !important;
padding-bottom:var(--section-gap) !important;
}
.lead-wrap{
padding-top:32px !important;
padding-bottom:32px !important;
}
/* Между hero и первой секцией — тот же section-gap */
.stats-section{margin-top:0}
}
/* ==== МОБИЛКА ≤767 ==== */
@media (max-width:767px){
:root{
--section-gap:28px;
--section-pad-x:18px;
}
.stats-wrap,
.services,
.cases,
.team,
.lead-wrap,
.faq,
section.blog{
border-radius:16px !important;
}
}
/* Footer на адаптиве — единый отступ сверху, скругление сохраняем */
@media (max-width:1199px){
.ftr{
margin-top:var(--section-gap) !important;
}
}
/* ============================================================
TEAM — АДАПТИВ
≥1200 — grid: слева текст, справа карусель (как было)
≤1199 — стопкой: текст сверху, карусель ниже на всю ширину
============================================================ */
@media (max-width:1199px){
.team{
grid-template-columns:1fr !important;
gap:24px !important;
/* padding управляется глобальной унификацией секций */
}
.team-head{
padding:0 !important;
max-width:none;
}
.team-title{
font-size:32px;
line-height:1.1;
letter-spacing:-0.02em;
}
.team-sub{
font-size:14px;
line-height:1.55;
max-width:none;
margin-top:8px;
}
/* Карусель — расширяется до краёв белого блока */
.team-scroll{
margin-left:calc(var(--section-pad-x) * -1);
margin-right:calc(var(--section-pad-x) * -1);
/* Убираем мягкую маску справа — там теперь честный отступ */
mask-image:none;
-webkit-mask-image:none;
/* scroll-padding-left чтобы snap'ил с правильным отступом */
scroll-padding-left:var(--section-pad-x);
}
.team-track{
gap:14px;
padding:0 !important;
scroll-snap-type:x mandatory;
}
/* Spacer справа — псевдо-flex-child вместо margin-right (Chrome не учитывает margin-right в overflow scroll) */
.team-track::after{
content:"";
flex:0 0 6px;
align-self:stretch;
pointer-events:none;
}
.team-card{
/* На планшете 2.5 карточки видны */
width:calc(40% - 8px);
min-width:0;
scroll-snap-align:start;
aspect-ratio:16/22;
border-radius:18px;
}
/* Отступ первой карточки — через margin (margin-left работает для flex-child) */
.team-track > .team-card:first-child{
margin-left:var(--section-pad-x);
}
.team-card-body{
padding:14px 14px 16px;
border-left-width:2px;
}
.team-card-name{
font-size:14px;
line-height:1.2;
margin-bottom:4px;
}
.team-card-role{
font-size:11.5px;
line-height:1.35;
}
/* Скрываем правую fade-маску — она была для ПК */
.team::after{display:none}
}
@media (max-width:767px){
.team-title{
font-size:26px;
line-height:1.15;
}
.team-card{
/* На мобилке 1.5 карточки видны */
width:65%;
border-radius:16px;
}
.team-card-body{
padding:12px 12px 14px;
}
.team-card-name{font-size:13.5px}
.team-card-role{font-size:11px}
}
/* ============================================================
BOTTOM-BAR — нижняя навигация для мобилки ≤767
============================================================ */
/* По умолчанию скрыта (на ПК и планшете) */
.bbar{display:none}
@media (max-width:767px){
/* Шапка перестаёт быть sticky — уезжает с контентом */
.page-top{
position:static !important;
}
/* Отключаем glassmorphism is-scrolled на мобилке */
.page-top.is-scrolled .hdr::before{opacity:0 !important}
.page-top.is-scrolled .hdr{
border-color:rgba(255,255,255,0.6) !important;
box-shadow:0 4px 16px rgba(15,17,21,0.05) !important;
}
/* Bottom-bar — жидкое стекло, скруглённые верхние углы, прижат к низу */
.bbar{
/* Flex с явными ширинами — самое надёжное против переноса */
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
align-items:stretch;
justify-content:space-between;
position:fixed;
left:0;right:0;bottom:0;
width:100%;
z-index:100;
background:rgba(255,255,255,0.55);
backdrop-filter:blur(32px) saturate(200%);
-webkit-backdrop-filter:blur(32px) saturate(200%);
border-top:1px solid rgba(255,255,255,0.6);
border-radius:24px 24px 0 0;
box-shadow:
0 -8px 32px rgba(15,17,21,0.10),
0 -2px 8px rgba(15,17,21,0.04),
inset 0 1px 0 rgba(255,255,255,0.7);
padding:10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
box-sizing:border-box;
transform:translateY(100%);
transition:transform .4s cubic-bezier(0.22,1,0.36,1);
will-change:transform;
}
.bbar.is-shown{
transform:translateY(0);
}
/* Каждая кнопка — точно 25% ширины родителя минус gap'ы */
.bbar-item{
/* flex-basis: 25% — занять ровно четверть; flex-shrink:1 — позволяет сжиматься
если контент > 25% (но не переноситься, потому что nowrap у родителя) */
flex:1 1 0 !important;
width:25% !important;
max-width:25% !important;
min-width:0 !important;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
padding:6px 2px;
border-radius:14px;
background:none;
border:none;
color:var(--mute);
font-family:inherit;
font-size:10.5px;
font-weight:600;
letter-spacing:0.01em;
text-align:center;
text-decoration:none;
cursor:pointer;
transition:color .15s, background .15s;
-webkit-tap-highlight-color:transparent;
white-space:nowrap;
box-sizing:border-box;
/* На случай длинного текста — обрезаем с многоточием */
overflow:hidden;
text-overflow:ellipsis;
}
.bbar-item.is-active{color:var(--burgundy)}
.bbar-item.is-active svg{stroke-width:2}
.bbar-item:active{background:rgba(15,15,16,0.05)}
.bbar-item svg{
width:24px;height:24px;
stroke-width:1.7;
fill:none;
stroke:currentColor;
stroke-linecap:round;
stroke-linejoin:round;
transition:stroke-width .15s;
}
/* Звонок — зелёная точка-индикатор "доступны" */
.bbar-call{
position:relative;
}
.bbar-call::after{
content:"";
position:absolute;
top:4px;
left:50%;
margin-left:6px;
width:8px;height:8px;
border-radius:50%;
background:#22c55e;
border:2px solid rgba(255,255,255,0.95);
box-shadow:0 0 0 1px rgba(34,197,94,0.3), 0 0 8px rgba(34,197,94,0.4);
pointer-events:none;
}
/* Body не должен закрываться под bbar */
body{
padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px));
}
}
/* ============================================================
Скрытие "Услуги" в мобильном меню при открытии из bottom-bar "Меню"
============================================================ */
.mob-menu[data-from-bbar="menu"] .mob-menu__pane[data-pane="root"] [data-push="root-uslugi"],
.mob-menu[data-from-bbar="menu"] .mob-menu__pane[data-pane="root"] .mob-menu__split:has([data-push="root-uslugi"]){
display:none;
}
/* ============================================================
CASES — АДАПТИВ
≥1200 — bento 2 колонки (большая слева, 2 малых справа стопкой) — как было
≤1199 — стопкой 1 колонка, кнопка "Все кейсы" внизу во всю ширину
============================================================ */
/* По умолчанию (ПК): мобильная кнопка скрыта */
.cases-cta--mobile{display:none}
@media (max-width:1199px){
/* Cases-head — на мобилке prosto kicker + title (без кнопки справа) */
.cases-head{
display:block;
margin-bottom:20px;
}
.cases-head-left{max-width:none}
.cases-title{
font-size:24px;
line-height:1.15;
letter-spacing:-0.02em;
}
/* Скрываем верхнюю кнопку — она вынесена вниз */
.cases-head .cases-cta:not(.cases-cta--mobile){
display:none;
}
/* Сетка — 1 колонка, всё стопкой */
.cases-grid{
display:flex;
flex-direction:column;
gap:14px;
align-items:stretch;
}
/* Большая карточка — премиум-стиль сохраняется */
.case-card.big{
grid-row:auto;
}
.case-card.big .case-card-body{padding:24px 20px}
.case-card.small .case-card-body{padding:20px 18px}
/* Обложка на планшете/мобилке — чуть выше */
.case-card-thumb{aspect-ratio:16/9}
.case-card.big .case-card-thumb{aspect-ratio:16/8}
/* Tags */
.case-tags{
gap:6px;
margin-bottom:14px;
}
.case-kicker{
font-size:9.5px;
padding:4px 10px;
}
.case-fresh{
font-size:9px;
padding:4px 10px 4px 18px;
}
.case-fresh::after{
left:8px;
width:5px;height:5px;
}
.case-date{
font-size:9.5px;
padding:4px 10px;
}
/* Цифры — big и small */
.case-card.big .case-num{
font-size:48px;
line-height:1;
margin-bottom:10px;
}
.case-card.big .case-num em{
font-size:0.42em;
margin-left:0.2em;
vertical-align:0.3em;
}
.case-card.small .case-num{
font-size:32px;
line-height:1;
margin-bottom:8px;
}
.case-card.small .case-num em{
font-size:0.5em;
}
/* Заголовки и описания */
.case-card.big .case-title{
font-size:18px;
line-height:1.25;
margin-bottom:10px;
}
.case-card.big .case-desc{
font-size:13.5px;
line-height:1.55;
margin-bottom:16px;
}
.case-card.small .case-title{
font-size:16px;
line-height:1.25;
margin-bottom:8px;
}
.case-card.small .case-desc{
font-size:13px;
line-height:1.5;
margin-bottom:14px;
}
/* Мета */
.case-meta{
gap:14px;
padding-top:12px;
margin-bottom:14px;
}
.case-meta-item .lbl{font-size:9.5px}
.case-meta-item .val{font-size:11.5px}
.case-card.small .case-meta-item .val{font-size:11.5px}
/* "Подробнее" в карточке */
.case-more{
font-size:13px;
gap:6px;
}
/* Мобильная кнопка "Все кейсы" — внизу во всю ширину */
.cases-cta--mobile{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin-top:18px;
padding:14px 20px;
border:1.5px solid var(--burgundy);
color:var(--burgundy);
border-radius:100px;
font-size:14px;
font-weight:700;
text-decoration:none;
width:100%;
background:transparent;
transition:background .25s, color .25s;
}
.cases-cta--mobile:hover{
background:var(--burgundy);
color:#fff;
}
.cases-cta--mobile .arrow{font-size:16px}
}
@media (max-width:767px){
.cases-title{
font-size:22px;
}
/* На мобилке у big-кейса нет визуального превосходства — делаем такой же как small */
.case-card.big .case-num{font-size:32px;line-height:1;margin-bottom:8px}
.case-card.big .case-num em{font-size:0.5em;vertical-align:0.2em}
.case-card.big .case-title{font-size:17px;line-height:1.3;margin-bottom:8px}
.case-card.big .case-desc{font-size:14px;line-height:1.55;margin-bottom:16px}
}
/* ============================================================
LEAD-ФОРМА — АДАПТИВ
≥1200 — grid 2 колонки (форма справа, текст слева — как было)
≤1199 — стопкой: текст сверху, форма снизу
============================================================ */
@media (max-width:1199px){
/* lead-wrap превращается в обычный flex stack */
.lead-wrap{
display:flex !important;
flex-direction:column !important;
gap:0 !important;
padding:32px var(--section-pad-x) !important;
align-items:stretch !important;
}
/* Меняем порядок: текст сверху, форма снизу */
.lead-left{
order:1 !important;
margin-bottom:24px;
}
.lead-right{
order:2 !important;
}
/* Заголовок и описание */
.lead-title{
font-size:24px;
line-height:1.15;
margin-bottom:12px;
}
.lead-desc{
font-size:13.5px;
line-height:1.55;
margin-bottom:18px;
max-width:none;
}
/* Benefits */
.lead-benefits{
gap:10px;
margin-top:0;
}
.lead-benefit{
gap:10px;
font-size:13px;
line-height:1.45;
}
.lead-benefit-icon{
width:20px;
height:20px;
margin-top:1px;
}
.lead-benefit-icon svg{
width:11px;
height:11px;
}
/* === Форма === */
.lead-form{
padding:22px 18px !important;
gap:12px !important;
border-radius:16px;
}
.lead-form h3{
font-size:18px;
margin-bottom:4px;
}
/* На мобилке поля имя+телефон стопкой (НЕ 2 колонки) */
.lead-form-row{
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.lead-form input,
.lead-form select,
.lead-form textarea{
font-size:15px !important;
padding:14px 18px !important;
border-radius:100px !important;
}
.lead-form textarea{
border-radius:14px !important;
min-height:80px !important;
}
.lead-form select{
background-position:right 16px center !important;
padding-right:42px !important;
}
/* Чекбокс согласия */
.lead-form-agree{
align-items:flex-start !important;
gap:10px !important;
margin-top:4px;
}
.lead-form-agree-box{
width:18px !important;
height:18px !important;
margin-top:1px;
}
.lead-form-agree-box::after{
width:7px !important;
height:4px !important;
transform:rotate(-45deg) translateY(-1px) !important;
}
.lead-form-agree-text{
font-size:11.5px !important;
line-height:1.45 !important;
}
/* Кнопка отправки — во всю ширину */
.lead-form-btn{
padding:15px 22px !important;
font-size:15px !important;
gap:8px !important;
margin-top:6px !important;
width:100%;
}
/* Fallback — телефон/email */
.lead-form-fallback{
font-size:11.5px !important;
text-align:center;
margin-top:8px;
padding-top:14px !important;
}
}
@media (max-width:767px){
.lead-wrap{
padding:28px var(--section-pad-x) !important;
}
.lead-title{
font-size:22px;
}
.lead-form{
padding:20px 16px !important;
}
}
/* ============================================================
FAQ — АДАПТИВ
≥1200 — grid 2 колонки (head sticky слева, вопросы справа)
≤1199 — flex-column: head сверху, вопросы снизу, кнопка внизу
============================================================ */
/* По умолчанию (ПК) мобильная кнопка скрыта */
.faq-cta--mobile{display:none}
@media (max-width:1199px){
/* faq превращается в обычный flex stack — head сверху, list снизу */
.faq{
display:flex !important;
flex-direction:column !important;
gap:0 !important;
align-items:stretch !important;
}
/* Head — без sticky, без max-width на sub */
.faq-head{
position:static !important;
top:auto !important;
gap:8px !important;
margin-bottom:20px;
}
.faq-title{
font-size:24px;
line-height:1.15;
letter-spacing:-0.02em;
}
.faq-sub{
font-size:13.5px;
line-height:1.55;
max-width:none;
margin-top:6px;
}
/* Скрываем верхнюю кнопку — она вынесена вниз */
.faq-head .faq-cta:not(.faq-cta--mobile){
display:none;
}
/* Список вопросов */
.faq-list{
gap:8px;
}
/* Карточка-вопрос */
.faq-item{
border-radius:14px;
border-left-width:3px;
}
/* Кнопка-заголовок вопроса */
.faq-q{
padding:16px 18px !important;
gap:14px !important;
font-size:14.5px !important;
line-height:1.35 !important;
/* Гарантируем тап-зону минимум 44px высотой */
min-height:56px;
}
/* Иконка +/× */
.faq-icon{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
}
.faq-icon::before{
width:12px !important;
min-width:12px !important;
height:1.5px !important;
}
.faq-icon::after{
height:12px !important;
min-height:12px !important;
width:1.5px !important;
}
/* Текст ответа */
.faq-a-inner{
padding:0 18px 18px !important;
font-size:13.5px !important;
line-height:1.55 !important;
}
/* Мобильная кнопка «Задать свой вопрос» — внизу во всю ширину */
.faq-cta--mobile{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin-top:18px;
padding:14px 20px;
border:1.5px solid var(--burgundy);
color:var(--burgundy);
border-radius:100px;
font-size:14px;
font-weight:700;
text-decoration:none;
width:100%;
background:transparent;
transition:background .25s, color .25s;
}
.faq-cta--mobile:hover{
background:var(--burgundy);
color:#fff;
}
.faq-cta--mobile .arrow{font-size:16px}
}
@media (max-width:767px){
.faq-title{
font-size:22px;
}
.faq-q{
padding:14px 16px !important;
font-size:14px !important;
}
.faq-a-inner{
padding:0 16px 16px !important;
font-size:13px !important;
}
}
/* ============================================================
BLOG — АДАПТИВ — карусель
≥1200 — grid 3 колонки (как было)
≤1199 — flex горизонтальный scroll-snap
============================================================ */
/* По умолчанию (ПК) мобильная кнопка скрыта */
.blog-cta--mobile{display:none}
@media (max-width:1199px){
/* Head — block (без flex), скрываем верхнюю кнопку */
.blog-head{
display:block !important;
margin-bottom:20px;
}
.blog-head-left{max-width:none}
.blog-title{
font-size:24px;
line-height:1.15;
letter-spacing:-0.02em;
}
.blog-head .blog-cta:not(.blog-cta--mobile){
display:none;
}
/* Сетка превращается в горизонтальную карусель */
.blog-grid{
display:flex !important;
grid-template-columns:none !important;
gap:14px !important;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
/* Расширяем за края белого блока */
margin-left:calc(var(--section-pad-x) * -1);
margin-right:calc(var(--section-pad-x) * -1);
scroll-padding-left:var(--section-pad-x);
}
.blog-grid::-webkit-scrollbar{display:none}
/* Карточка — фиксированная ширина для scroll-snap */
.blog-card{
flex:0 0 auto;
width:75%;
scroll-snap-align:start;
border-radius:14px;
}
/* Отступы первой и последней карточки */
.blog-grid > .blog-card:first-child{
margin-left:var(--section-pad-x);
}
.blog-grid > .blog-card:last-child{
margin-right:var(--section-pad-x);
}
/* Body — компактнее */
.blog-card-body{
padding:16px 16px 18px !important;
}
.blog-rubric{
font-size:10.5px !important;
letter-spacing:0.1em;
margin-bottom:8px;
gap:6px !important;
}
.blog-rubric::before{
width:14px !important;
}
.blog-card h3{
font-size:16px !important;
line-height:1.3;
margin-bottom:8px;
}
.blog-excerpt{
font-size:13px !important;
line-height:1.5;
margin-bottom:14px;
}
.blog-meta{
padding-top:12px !important;
gap:8px !important;
flex-wrap:wrap;
}
.blog-meta-date,
.blog-meta-read{
font-size:11px !important;
}
/* Мобильная кнопка «Все статьи» */
.blog-cta--mobile{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin-top:18px;
padding:14px 20px;
border:1.5px solid var(--burgundy);
color:var(--burgundy);
border-radius:100px;
font-size:14px;
font-weight:700;
text-decoration:none;
width:100%;
background:transparent;
transition:background .25s, color .25s;
}
.blog-cta--mobile:hover{
background:var(--burgundy);
color:#fff;
}
.blog-cta--mobile .arrow{font-size:16px}
}
/* На планшете 768-1199 — больше карточек видно */
@media (min-width:768px) and (max-width:1199px){
.blog-card{
width:42%;
}
}
@media (max-width:767px){
.blog-title{
font-size:22px;
}
}
/* ============================================================
ВСПОМОГАТЕЛЬНЫЕ — visually-hidden + блокировка скролла + спиннер
============================================================ */
.visually-hidden{
position:absolute !important;
width:1px !important; height:1px !important;
padding:0 !important; margin:-1px !important;
overflow:hidden !important; clip:rect(0,0,0,0) !important;
white-space:nowrap !important; border:0 !important;
}
body.ye-no-scroll{overflow:hidden !important}
.ye-spinner{
display:inline-block;
width:14px;height:14px;
border:2px solid rgba(255,255,255,0.4);
border-top-color:#fff;
border-radius:50%;
animation:yeSpin .7s linear infinite;
vertical-align:-2px;
margin-right:6px;
}
@keyframes yeSpin{to{transform:rotate(360deg)}}
/* Status сообщения внутри форм */
.lead-form-status{
font-size:13px;line-height:1.5;
text-align:center;
margin-top:6px;
min-height:18px;
}
.lead-form-status[data-type="success"]{color:#15803d;font-weight:600}
.lead-form-status[data-type="error"]{color:#b91c1c;font-weight:600}
.lead-form-status[data-type="warning"]{color:#a16207;font-weight:600}
.lead-form-status[data-type="info"]{color:var(--mute)}
/* На тёмной мини-форме (.card-form) status должен быть на тёмном фоне читаем */
.card-form .lead-form-status{color:rgba(255,255,255,0.7)}
.card-form .lead-form-status[data-type="success"]{color:#86efac}
.card-form .lead-form-status[data-type="error"]{color:#fca5a5}
.card-form .lead-form-status[data-type="warning"]{color:#fcd34d}
/* Status в card-form (мини-форма с тёмным фоном) */
.card-form-status{
font-size:13px;line-height:1.5;
text-align:center;
margin-top:6px;
min-height:18px;
color:rgba(255,255,255,0.7);
}
.card-form-status[data-type="success"]{color:#86efac;font-weight:600}
.card-form-status[data-type="error"]{color:#fca5a5;font-weight:600}
.card-form-status[data-type="warning"]{color:#fcd34d;font-weight:600}
/* ============================================================
SEARCH OVERLAY — fullscreen поисковая панель
============================================================ */
.search-overlay{
position:fixed; inset:0;
z-index:9999;
background:rgba(245,245,243,0.94);
backdrop-filter:blur(24px) saturate(180%);
-webkit-backdrop-filter:blur(24px) saturate(180%);
display:flex; flex-direction:column;
opacity:0;
transform:translateY(-30px);
pointer-events:none;
transition:opacity .3s, transform .35s cubic-bezier(0.22,1,0.36,1);
}
.search-overlay[hidden]{display:none !important}
.search-overlay.is-open{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}
.search-overlay-head{
padding:18px 24px;
border-bottom:1px solid var(--divider);
background:rgba(255,255,255,0.55);
}
.search-overlay-form{
display:flex; align-items:center; gap:14px;
max-width:900px; margin:0 auto;
}
.search-overlay-input-wrap{
flex:1;
display:flex; align-items:center; gap:12px;
background:#fff;
border:1px solid var(--divider);
border-radius:100px;
padding:12px 22px;
transition:border-color .2s, box-shadow .2s;
}
.search-overlay-input-wrap:focus-within{
border-color:var(--burgundy);
box-shadow:0 4px 20px rgba(122,47,60,0.12);
}
.search-overlay-input-icon{
width:20px; height:20px; color:var(--mute);
flex-shrink:0;
}
.search-overlay-input{
flex:1;
border:none; outline:none; background:none;
font-family:inherit;
font-size:16px; color:var(--ink);
}
.search-overlay-input::placeholder{color:var(--mute)}
.search-overlay-cancel{
font-family:inherit; cursor:pointer;
background:none; border:none;
font-size:15px; font-weight:600;
color:var(--burgundy);
padding:8px 12px;
white-space:nowrap;
border-radius:8px;
transition:background .2s;
}
.search-overlay-cancel:hover{background:rgba(122,47,60,0.08)}
.search-overlay-body{
flex:1;
overflow-y:auto;
padding:32px 24px 60px;
}
.search-overlay-section{
max-width:900px;
margin:0 auto 32px;
}
.search-overlay-section-title{
font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
color:var(--burgundy); font-weight:700;
display:flex; align-items:center; gap:10px;
margin-bottom:14px;
}
.search-overlay-section-title::before{
content:""; width:28px; height:1px;
background:currentColor;
}
.search-popular{
display:flex; flex-wrap:wrap; gap:8px;
list-style:none; padding:0; margin:0;
}
.search-popular-chip{
font-family:inherit; cursor:pointer;
font-size:14px; font-weight:500;
background:rgba(255,255,255,0.7);
border:1px solid var(--divider);
border-radius:100px;
padding:9px 16px;
color:var(--ink-dk);
transition:all .2s;
}
.search-popular-chip:hover{
background:var(--burgundy);
border-color:var(--burgundy);
color:#fff;
transform:translateY(-1px);
}
.search-suggest{
display:flex; flex-direction:column;
background:#fff;
border:1px solid var(--divider);
border-radius:14px;
overflow:hidden;
list-style:none; padding:0; margin:0;
}
.search-suggest-item{
display:flex; align-items:center; gap:14px;
padding:14px 18px;
border-bottom:1px solid var(--divider);
text-decoration:none; color:inherit;
transition:background .2s;
}
.search-suggest > li:last-child .search-suggest-item{border-bottom:none}
.search-suggest-item:hover{background:rgba(15,15,16,0.03)}
.search-suggest-icon{
width:36px; height:36px;
border-radius:50%;
background:rgba(122,47,60,0.08);
display:flex; align-items:center; justify-content:center;
color:var(--burgundy); flex-shrink:0;
}
.search-suggest-icon svg{width:16px;height:16px}
.search-suggest-text{flex:1; min-width:0}
.search-suggest-text-main{
font-size:15px; font-weight:600; color:var(--ink-dk);
display:block;
}
.search-suggest-text-sub{
font-size:12.5px; color:var(--mute);
display:block; margin-top:2px;
}
/* Адаптив поиска — на мобилке поменьше */
@media (max-width:767px){
.search-overlay-head{padding:14px 16px}
.search-overlay-form{gap:8px}
.search-overlay-input-wrap{padding:10px 18px;gap:10px}
.search-overlay-input{font-size:15px}
.search-overlay-cancel{padding:6px 8px;font-size:14px}
.search-overlay-body{padding:22px 16px 80px}
.search-overlay-section{margin-bottom:24px}
.search-popular-chip{font-size:13px;padding:8px 14px}
.search-suggest-item{padding:12px 14px;gap:12px}
.search-suggest-icon{width:32px;height:32px}
.search-suggest-text-main{font-size:14px}
.search-suggest-text-sub{font-size:11.5px}
}
/* ============================================================
LEAD POPUP — модалка заявки (центр)
============================================================ */
.lead-modal{
position:fixed; inset:0;
z-index:9998;
display:flex; align-items:center; justify-content:center;
padding:20px;
opacity:0;
pointer-events:none;
transition:opacity .25s;
}
.lead-modal[hidden]{display:none !important}
.lead-modal.is-open{opacity:1; pointer-events:auto}
.lead-modal-backdrop{
position:absolute; inset:0;
background:rgba(15,15,16,0.55);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
cursor:pointer;
}
.lead-modal-window{
position:relative; z-index:1;
background:#fff;
border-radius:20px;
width:100%; max-width:480px;
max-height:calc(100vh - 40px);
overflow-y:auto;
transform:scale(0.95) translateY(10px);
transition:transform .35s cubic-bezier(0.22,1,0.36,1);
box-shadow:0 30px 80px rgba(0,0,0,0.3);
}
.lead-modal.is-open .lead-modal-window{
transform:scale(1) translateY(0);
}
.lead-modal-close{
position:absolute; top:14px; right:14px;
width:38px; height:38px;
border-radius:50%;
background:rgba(15,15,16,0.06);
border:none; cursor:pointer;
display:flex; align-items:center; justify-content:center;
color:var(--ink-dk);
z-index:10;
transition:background .2s;
}
.lead-modal-close:hover{background:rgba(15,15,16,0.12)}
.lead-modal-close svg{width:14px;height:14px}
.lead-modal-body{padding:36px 28px 28px}
.lead-modal-title{
font-size:24px; font-weight:900; letter-spacing:-0.02em;
color:var(--ink-dk); line-height:1.2;
margin-bottom:8px;
}
.lead-modal-title em{color:var(--burgundy); font-style:normal}
.lead-modal-sub{
font-size:13.5px; color:var(--mute); line-height:1.55;
margin-bottom:22px;
}
/* Стили формы внутри попапа — переопределяем .lead-form чтобы было компактнее */
.lead-form--popup{
display:flex; flex-direction:column; gap:11px;
background:none; border:none; padding:0; box-shadow:none;
}
.lead-form--popup::before{display:none}
.lead-form--popup .lead-form-row{
display:flex; flex-direction:column; gap:11px;
}
.lead-form--popup input,
.lead-form--popup select,
.lead-form--popup textarea{
font-size:14.5px;
padding:13px 18px;
border-radius:100px;
background:var(--bg);
border:1px solid var(--divider);
}
.lead-form--popup textarea{
border-radius:14px;
resize:vertical;
min-height:75px;
}
.lead-form--popup input:focus,
.lead-form--popup select:focus,
.lead-form--popup textarea:focus{
border-color:var(--burgundy);
background:#fff;
}
.lead-form--popup .lead-form-btn{
margin-top:6px;
padding:14px 22px;
font-size:14.5px;
width:100%;
}
.lead-form--popup .lead-form-fallback{
font-size:11.5px;text-align:center;
margin-top:6px; padding-top:12px;
border-top:1px solid var(--divider);
color:var(--mute);
}
.lead-form--popup .lead-form-fallback a{
color:var(--burgundy); font-weight:600; text-decoration:none;
}
/* Caption SmartCaptcha + политика */
.lead-captcha-note{
font-size:10.5px; color:var(--mute); text-align:center;
line-height:1.5;
margin-top:8px;
}
.lead-captcha-note a{color:var(--burgundy); text-decoration:underline}
/* Адаптив попапа */
@media (max-width:767px){
.lead-modal{padding:16px}
.lead-modal-body{padding:30px 22px 22px}
.lead-modal-title{font-size:22px}
}
/* ============================================================
FAB — плавающая кнопка связи с веером
============================================================ */
.ye-fab{
position:fixed;
right:22px;
bottom:22px;
z-index:9990;
display:flex; flex-direction:column-reverse; align-items:center;
gap:14px;
pointer-events:none;
}
/* Когда есть mobile bottom-bar — поднимем FAB чуть выше */
@media (max-width:767px){
.ye-fab{
right:18px;
bottom:calc(76px + env(safe-area-inset-bottom, 0px));
}
}
.ye-fab-overlay{
position:fixed; inset:0; z-index:-1;
background:rgba(15,15,16,0.4);
backdrop-filter:blur(2px);
opacity:0;
pointer-events:none;
transition:opacity .3s;
}
.ye-fab.is-open .ye-fab-overlay{
opacity:1;
pointer-events:auto;
}
.ye-fab-trigger{
width:58px; height:58px;
border-radius:50%;
background:var(--burgundy);
color:#fff;
border:none; cursor:pointer;
display:flex; align-items:center; justify-content:center;
box-shadow:0 8px 24px rgba(122,47,60,0.4), 0 2px 6px rgba(0,0,0,0.1);
transition:transform .35s cubic-bezier(0.22,1,0.36,1), background .2s;
pointer-events:auto;
position:relative; z-index:2;
}
.ye-fab-trigger:hover{transform:scale(1.05)}
.ye-fab-trigger svg{width:26px; height:26px}
/* Перо в открытом состоянии — крупнее */
.ye-fab-trigger .ye-fab-icon-default svg{width:30px; height:30px}
/* X в закрытом — поменьше для баланса */
.ye-fab-trigger .ye-fab-icon-close svg{width:22px; height:22px}
.ye-fab-trigger .ye-fab-icon-default,
.ye-fab-trigger .ye-fab-icon-close{
position:absolute;
display:flex; align-items:center; justify-content:center;
inset:0;
transition:opacity .2s, transform .35s cubic-bezier(0.22,1,0.36,1);
}
.ye-fab-trigger .ye-fab-icon-close{opacity:0; transform:rotate(-90deg)}
.ye-fab.is-open .ye-fab-trigger{
background:var(--ink-dk);
}
.ye-fab.is-open .ye-fab-trigger .ye-fab-icon-default{
opacity:0; transform:rotate(90deg);
}
.ye-fab.is-open .ye-fab-trigger .ye-fab-icon-close{
opacity:1; transform:rotate(0);
}
.ye-fab-list{
display:flex; flex-direction:column; gap:12px;
align-items:center;
list-style:none; padding:0; margin:0;
pointer-events:none;
}
.ye-fab-item{
width:50px; height:50px;
border-radius:50%;
display:flex; align-items:center; justify-content:center;
text-decoration:none; color:#fff;
pointer-events:auto;
cursor:pointer;
position:relative;
box-shadow:0 6px 16px rgba(0,0,0,0.18);
opacity:0;
transform:translateY(20px) scale(0.6);
transition:opacity .25s, transform .35s cubic-bezier(0.22,1,0.36,1), box-shadow .2s;
}
.ye-fab-item:hover{
box-shadow:0 10px 24px rgba(0,0,0,0.25);
transform:translateY(-2px) scale(1);
}
.ye-fab-item svg{width:22px;height:22px}
/* VK — большие отступы внутри viewBox, увеличиваем (2.8vw на ПК) */
.ye-fab-item--vk svg{width:2.8vw;height:2.8vw;min-width:34px;min-height:34px}
/* MAX — фон-градиент как в оригинальном SVG (синий → фиолетовый → пурпурный) */
.ye-fab-item--max{
background:
radial-gradient(circle at 25% 90%, #00f 0%, transparent 60%),
linear-gradient(135deg, #4cf 0%, #53e 66%, #93d 100%) !important;
}
.ye-fab-item--max svg{width:2.0vw;height:2.0vw;min-width:24px;min-height:24px}
.ye-fab-item--max:hover{box-shadow:0 10px 24px rgba(83,46,238,0.4)}
/* Brand colors */
.ye-fab-item--tg{background:#229ED9}
.ye-fab-item--wa{background:#25D366}
.ye-fab-item--vk{background:#0077FF}
.ye-fab-item--phone{background:var(--burgundy)}
.ye-fab-item--email{background:#3a3a3d}
/* Тултип-лейбл слева от кнопки */
.ye-fab-item-label{
position:absolute;
right:60px; top:50%;
transform:translateY(-50%) translateX(8px);
background:var(--ink-dk); color:#fff;
font-size:12.5px; font-weight:600;
padding:6px 12px; border-radius:8px;
white-space:nowrap;
opacity:0; pointer-events:none;
transition:opacity .2s, transform .2s;
box-shadow:0 4px 12px rgba(0,0,0,0.2);
}
.ye-fab-item-label::after{
content:"";
position:absolute;
right:-4px; top:50%;
transform:translateY(-50%) rotate(45deg);
width:8px; height:8px;
background:var(--ink-dk);
}
.ye-fab-item:hover .ye-fab-item-label{
opacity:1;
transform:translateY(-50%) translateX(0);
}
/* На мобилке тултипы скрываем — нет hover */
@media (max-width:767px){
.ye-fab-item-label{display:none}
}
/* Анимация открытия — последовательное появление */
.ye-fab.is-open .ye-fab-item{
opacity:1;
transform:translateY(0) scale(1);
}
.ye-fab.is-open .ye-fab-item:nth-child(1){transition-delay:0.04s}
.ye-fab.is-open .ye-fab-item:nth-child(2){transition-delay:0.08s}
.ye-fab.is-open .ye-fab-item:nth-child(3){transition-delay:0.12s}
.ye-fab.is-open .ye-fab-item:nth-child(4){transition-delay:0.16s}
.ye-fab.is-open .ye-fab-item:nth-child(5){transition-delay:0.20s}
.ye-fab.is-open .ye-fab-item:nth-child(6){transition-delay:0.24s}
/* ============================================================
SEARCH RESULTS PAGE — search.php
На ПК — резинка vw, как остальной сайт.
На адаптиве — px и фиксированные размеры.
============================================================ */
/* Внешняя обёртка (как у других секций главной — отступ vw, белый блок) */
.page-content.search-results{
padding:0 0 8vh;
min-height:60vh;
}
.search-results .page-container{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:5vh 4vw;
margin:var(--hdr-gap) var(--side-pad) 0;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
/* Хлебные крошки */
.search-results .breadcrumbs{
font-size:0.82vw;
color:var(--mute);
margin-bottom:1.5vh;
}
.search-results .breadcrumbs a{
color:var(--mute);
text-decoration:none;
transition:color .2s;
}
.search-results .breadcrumbs a:hover{color:var(--burgundy)}
.search-results .breadcrumbs .sep{
margin:0 0.5vw;
color:rgba(15,15,16,0.2);
}
.search-results .breadcrumbs .current{
color:var(--ink-dk);
font-weight:600;
}
/* Заголовок страницы — как hero */
.search-results .page-header{
margin-bottom:3vh;
}
.search-results .page-title{
font-size:2.6vw;
font-weight:800;
letter-spacing:-0.02em;
color:var(--ink-dk);
line-height:1.15;
}
.search-results .page-title em{
font-style:normal;
color:var(--burgundy);
}
/* Форма поиска */
.search-results .search-form-wrap{
margin-bottom:4vh;
}
.search-results .search-form-inner{
display:flex;
align-items:center;
background:var(--bg);
border:1px solid var(--divider);
border-radius:100px;
padding:0.4vw 0.4vw 0.4vw 1.6vw;
gap:0.7vw;
box-shadow:0 4px 16px rgba(15,17,21,0.04);
transition:border-color .2s, box-shadow .2s;
}
.search-results .search-form-inner:focus-within{
border-color:var(--burgundy);
background:#fff;
box-shadow:0 4px 20px rgba(122,47,60,0.12);
}
.search-results .search-form-icon{
width:1.2vw;
height:1.2vw;
min-width:18px;min-height:18px;
color:var(--mute);
flex-shrink:0;
}
.search-results .search-form-input{
flex:1;
border:none;
outline:none;
background:none;
font-family:inherit;
font-size:1vw;
color:var(--ink);
padding:0.85vw 0;
}
.search-results .search-form-input::placeholder{color:var(--mute)}
.search-results .search-form-submit{
background:var(--burgundy);
color:#fff;
border:none;
cursor:pointer;
border-radius:100px;
padding:0.85vw 1.6vw;
font-family:inherit;
font-size:0.95vw;
font-weight:700;
transition:background .25s, transform .2s;
white-space:nowrap;
}
.search-results .search-form-submit:hover{
background:var(--burgundy-dk);
transform:translateY(-1px);
}
/* Список результатов */
.search-results .search-list{
display:flex;
flex-direction:column;
gap:1vh;
}
.search-results .search-item{
display:block;
background:var(--bg);
border:1px solid var(--divider);
border-radius:var(--rad-md);
padding:2vh 1.8vw;
transition:border-color .25s, box-shadow .25s, transform .25s;
text-decoration:none; /* теперь это */
color:inherit;
}
.search-results .search-item:hover{
border-color:rgba(122,47,60,0.3);
box-shadow:0 6px 20px rgba(15,17,21,0.05);
transform:translateY(-2px);
}
.search-results .search-item:hover .search-item-title{
color:var(--burgundy);
}
/* Тип записи (Услуга/Кейс/Статья/Страница) */
.search-results .search-item-type{
display:inline-block;
font-size:0.7vw;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--burgundy);
font-weight:700;
padding:0.4vh 0.8vw;
border-radius:100px;
background:rgba(122,47,60,0.08);
margin-bottom:0.8vh;
}
/* Заголовок результата (теперь не , просто ) */
.search-results .search-item-title{
font-size:1.2vw;
font-weight:800;
line-height:1.3;
letter-spacing:-0.01em;
margin-bottom:0.4vh;
color:var(--ink-dk);
transition:color .2s;
}
/* Excerpt */
.search-results .search-item-excerpt{
font-size:0.9vw;
color:var(--mute);
line-height:1.5;
margin-bottom:0.6vh;
}
/* URL подпись */
.search-results .search-item-url{
font-size:0.78vw;
color:var(--gold);
font-family:'SF Mono','Menlo','Consolas',monospace;
word-break:break-all;
}
/* "Ничего не найдено" */
.search-results .no-results{
text-align:center;
padding:6vh 2vw;
background:var(--bg);
border:1px solid var(--divider);
border-radius:var(--rad-md);
}
.search-results .no-results p{
font-size:1vw;
color:var(--mute);
line-height:1.6;
margin-bottom:0.5vh;
}
.search-results .no-results p:last-child{margin-bottom:0}
.search-results .no-results a{
color:var(--burgundy);
font-weight:600;
text-decoration:none;
}
.search-results .no-results a:hover{text-decoration:underline}
/* ============================================================
ПАГИНАЦИЯ — общая для всех страниц (search, archive, blog)
the_posts_pagination() рендерит:
============================================================ */
.page-content nav.pagination,
.page-content .pagination{
margin-top:4vh;
}
.page-content nav.pagination .nav-links{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:0.5vw;
}
.page-content nav.pagination .screen-reader-text{
position:absolute;
width:1px;height:1px;
margin:-1px;padding:0;
overflow:hidden;clip:rect(0,0,0,0);
white-space:nowrap;border:0;
}
.page-content .page-numbers{
min-width:2.6vw;
height:2.6vw;
min-height:38px;
padding:0 0.8vw;
border-radius:100px;
background:var(--bg);
border:1px solid var(--divider);
color:var(--ink-dk);
font-size:0.95vw;
font-weight:600;
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
transition:all .2s;
}
.page-content .page-numbers:hover{
border-color:var(--burgundy);
color:var(--burgundy);
}
.page-content .page-numbers.current{
background:var(--burgundy);
border-color:var(--burgundy);
color:#fff;
}
.page-content .page-numbers.dots{
border:none;
background:transparent;
color:var(--mute);
}
/* ============================================================
АДАПТИВ search.php — px вместо vw
============================================================ */
@media (max-width:1199px){
.page-content.search-results{
/* padding убран */
}
.search-results .page-container{
padding:32px 28px;
margin:8px 0 0;
border-radius:20px;
border-left:none;
border-right:none;
}
.search-results .breadcrumbs{
font-size:12px;
margin-bottom:14px;
}
.search-results .breadcrumbs .sep{margin:0 6px}
.search-results .page-header{margin-bottom:20px}
.search-results .page-title{
font-size:24px;
line-height:1.2;
}
.search-results .search-form-wrap{margin-bottom:24px}
.search-results .search-form-inner{
padding:5px 5px 5px 18px;
gap:8px;
}
.search-results .search-form-icon{width:18px;height:18px}
.search-results .search-form-input{
font-size:14.5px;
padding:11px 0;
}
.search-results .search-form-submit{
padding:11px 18px;
font-size:13.5px;
}
.search-results .search-list{gap:10px}
.search-results .search-item{
padding:18px 20px;
border-radius:14px;
}
.search-results .search-item-type{
font-size:10.5px;
padding:4px 10px;
margin-bottom:8px;
}
.search-results .search-item-title{
font-size:17px;
margin-bottom:6px;
}
.search-results .search-item-excerpt{
font-size:13.5px;
margin-bottom:8px;
}
.search-results .search-item-url{font-size:11.5px}
.search-results .no-results{
padding:48px 20px;
border-radius:14px;
}
.search-results .no-results p{font-size:14.5px}
.search-results .pagination,
.page-content nav.pagination{
margin-top:24px;
}
.page-content nav.pagination .nav-links{
gap:6px;
}
.page-content .page-numbers{
min-width:38px;
height:38px;
padding:0 12px;
font-size:14px;
}
}
@media (max-width:767px){
.page-content.search-results{
/* padding убран */
}
.search-results .page-container{
padding:28px 22px;
margin:6px 0 0;
border-radius:16px;
border-left:none;
border-right:none;
}
.search-results .page-title{
font-size:22px;
line-height:1.2;
}
.search-results .search-form-input{
font-size:14px;
padding:10px 0;
}
.search-results .search-form-submit{
padding:10px 14px;
font-size:13px;
}
.search-results .search-item{padding:16px 18px}
.search-results .search-item-title{font-size:16px}
.search-results .search-item-excerpt{font-size:13px}
.search-results .search-item-url{font-size:11px}
.search-results .no-results{padding:36px 16px}
}
/* ============================================================
FAB — скрыть на мобилке (там используется bottom-sheet через bbar-contact)
============================================================ */
@media (max-width:767px){
.ye-fab{display:none !important}
}
/* ============================================================
BOTTOM-SHEET «Связаться» — раскрытие снизу при тапе на bbar-contact
Только для мобилки ≤767px.
============================================================ */
.bsheet{
position:fixed; inset:0;
z-index:9990;
display:flex; align-items:flex-end;
pointer-events:none;
opacity:0;
transition:opacity .25s;
}
.bsheet[hidden]{display:none !important}
.bsheet.is-open{
opacity:1;
pointer-events:auto;
}
.bsheet-backdrop{
position:absolute; inset:0;
background:rgba(15,15,16,0.55);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
.bsheet-window{
position:relative; z-index:1;
width:100%;
background:#fff;
border-radius:22px 22px 0 0;
padding:8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
max-height:85vh;
overflow-y:auto;
transform:translateY(100%);
transition:transform .35s cubic-bezier(0.22,1,0.36,1);
box-shadow:0 -10px 30px rgba(0,0,0,0.18);
}
.bsheet.is-open .bsheet-window{
transform:translateY(0);
}
/* Свайп-индикатор сверху (как в iOS) */
.bsheet-grabber{
display:block;
width:42px; height:5px;
border-radius:100px;
background:rgba(15,15,16,0.18);
border:none;
margin:8px auto 14px;
cursor:pointer;
padding:0;
transition:background .2s;
}
.bsheet-grabber:hover{background:rgba(15,15,16,0.3)}
/* Заголовок шита */
.bsheet-head{
text-align:center;
margin-bottom:18px;
padding:0 12px;
}
.bsheet-title{
font-size:18px; font-weight:800; letter-spacing:-0.01em;
color:var(--ink-dk);
margin-bottom:4px;
}
.bsheet-sub{
font-size:12.5px; color:var(--mute);
line-height:1.45;
}
/* Список способов связи */
.bsheet-list{
list-style:none; padding:0; margin:0;
display:flex; flex-direction:column; gap:8px;
}
.bsheet-item{
display:flex; align-items:center; gap:14px;
padding:13px 14px;
background:var(--bg);
border:1px solid var(--divider);
border-radius:14px;
text-decoration:none; color:inherit;
transition:all .2s;
}
.bsheet-item:hover,
.bsheet-item:active{
background:#fff;
border-color:var(--burgundy);
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(15,17,21,0.06);
}
.bsheet-icon{
flex-shrink:0;
width:44px; height:44px;
border-radius:50%;
display:flex; align-items:center; justify-content:center;
color:#fff;
}
.bsheet-icon svg{width:22px; height:22px}
/* Brand colors — те же что в FAB */
.bsheet-item--phone .bsheet-icon{background:var(--burgundy)}
.bsheet-item--tg .bsheet-icon{background:#229ED9}
.bsheet-item--max .bsheet-icon{
background:
radial-gradient(circle at 25% 90%, #00f 0%, transparent 60%),
linear-gradient(135deg, #4cf 0%, #53e 66%, #93d 100%);
}
.bsheet-item--max .bsheet-icon svg{width:30px;height:30px}
.bsheet-item--wa .bsheet-icon{background:#25D366}
.bsheet-item--vk .bsheet-icon{background:#0077FF}
.bsheet-item--vk .bsheet-icon svg{width:36px;height:36px}
.bsheet-item--email .bsheet-icon{background:#3a3a3d}
.bsheet-text{flex:1; min-width:0}
.bsheet-text-main{
display:block;
font-size:15px; font-weight:700;
color:var(--ink-dk);
margin-bottom:2px;
}
.bsheet-text-sub{
display:block;
font-size:12.5px; color:var(--mute);
line-height:1.4;
}
.bsheet-arrow{
flex-shrink:0;
font-size:18px;
color:var(--mute);
transition:transform .2s, color .2s;
}
.bsheet-item:hover .bsheet-arrow{
transform:translateX(3px);
color:var(--burgundy);
}
/* ============================================================
ЮРИДИЧЕСКИЕ СТРАНИЦЫ — page-legal.php (Политика, Согласие, Cookie)
============================================================ */
.page-content.legal-page{
/* padding убран — отступы у legal-container */
padding:0 0 8vh;
}
.page-content.legal-page .legal-container{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:5vh 4vw;
margin:var(--hdr-gap) var(--side-pad) 0;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
/* Хлебные крошки */
.legal-breadcrumbs{
font-size:0.82vw;color:var(--mute);margin-bottom:3vh;
}
.legal-breadcrumbs a{color:var(--mute);text-decoration:none;transition:color .2s}
.legal-breadcrumbs a:hover{color:var(--burgundy)}
.legal-breadcrumbs .sep{margin:0 0.5vw;color:rgba(15,15,16,0.2)}
/* Заголовок */
.legal-header{
margin-bottom:5vh;padding-bottom:3vh;
border-bottom:1px solid var(--divider);
}
.legal-kicker{
font-family:'Caveat',cursive;
font-size:1.6vw;color:var(--gold);
font-weight:600;line-height:1;
margin-bottom:0.8vh;
}
.legal-title{
font-size:2.8vw;font-weight:800;
letter-spacing:-0.02em;line-height:1.15;
color:var(--ink-dk);
margin-bottom:1vh;
}
.legal-meta{
display:flex;align-items:center;gap:1vw;
font-size:0.78vw;color:var(--mute);letter-spacing:0.04em;
flex-wrap:wrap;
}
.legal-meta-dot{
display:inline-block;
width:0.3vw;height:0.3vw;
min-width:4px;min-height:4px;
border-radius:50%;background:var(--gold);
}
/* Layout: TOC + контент */
.legal-layout{
display:grid;
grid-template-columns:240px 1fr;
gap:4vw;align-items:start;
}
/* Sidebar TOC */
.legal-toc{
/* sticky под шапкой с воздушным зазором (шапка ~7vh + зазор ~5vh) */
position:sticky;top:12vh;
font-size:0.85vw;
/* Чтобы TOC влезал в окно и при необходимости скроллился внутри себя */
max-height:calc(100vh - 14vh);
overflow-y:auto;
}
.legal-toc-title{
font-size:0.7vw;letter-spacing:0.15em;text-transform:uppercase;
color:var(--burgundy);font-weight:700;
margin-bottom:1.5vh;
}
.legal-toc-list{
list-style:none;padding:0;margin:0;
display:flex;flex-direction:column;gap:0.3vh;
}
.legal-toc-list a{
display:block;
padding:0.7vh 1vw;
color:var(--ink);text-decoration:none;
border-left:2px solid transparent;
transition:all .2s;
font-weight:500;line-height:1.4;
}
.legal-toc-list a:hover{
color:var(--burgundy);
border-left-color:rgba(122,47,60,0.3);
background:rgba(122,47,60,0.03);
}
.legal-toc-list a.is-active{
color:var(--burgundy);
border-left-color:var(--burgundy);
background:rgba(122,47,60,0.06);
font-weight:700;
}
/* Контент */
.legal-content{
font-size:0.95vw;line-height:1.7;color:var(--ink);
}
.legal-section{
margin-bottom:4vh;
/* Учёт высоты sticky-шапки + воздушный зазор, чтобы заголовок не прилипал к шапке */
scroll-margin-top:11vh;
}
.legal-section:last-of-type{margin-bottom:0}
.legal-section-num{
font-size:0.78vw;letter-spacing:0.15em;text-transform:uppercase;
color:var(--gold-dk);font-weight:700;
margin-bottom:0.8vh;
}
.legal-section-title{
font-size:1.3vw;font-weight:800;
letter-spacing:-0.01em;line-height:1.25;
color:var(--ink-dk);
margin-bottom:1.5vh;
}
.legal-content p{margin-bottom:1.2vh}
.legal-content p:last-child{margin-bottom:0}
.legal-content ul,
.legal-content ol{
padding-left:1.5vw;margin-bottom:1.2vh;
}
.legal-content li{margin-bottom:0.6vh;line-height:1.6}
.legal-content li:last-child{margin-bottom:0}
.legal-content strong{color:var(--ink-dk);font-weight:700}
.legal-content a{
color:var(--burgundy);font-weight:600;
text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
transition:color .2s;
}
.legal-content a:hover{color:var(--burgundy-dk)}
.legal-content em{color:var(--burgundy);font-style:normal;font-weight:600}
/* Callout-блок (можно вставить через HTML в Gutenberg) */
.legal-callout{
background:var(--bg);
border-left:3px solid var(--burgundy);
padding:2vh 1.6vw;margin:2vh 0;
border-radius:0 var(--rad-md) var(--rad-md) 0;
}
.legal-callout-title{
font-weight:700;color:var(--ink-dk);
margin-bottom:0.6vh;font-size:1vw;
}
.legal-callout p{font-size:0.9vw;margin-bottom:0.5vh}
.legal-callout p:last-child{margin-bottom:0}
/* Контактный блок в конце */
.legal-contact-box{
margin-top:5vh;padding:3vh 2vw;
background:var(--bg);
border-radius:var(--rad-md);
text-align:center;
}
.legal-contact-box-title{
font-size:1.3vw;font-weight:800;
color:var(--ink-dk);margin-bottom:1vh;
}
.legal-contact-box-desc{
font-size:0.9vw;color:var(--mute);margin-bottom:2vh;
}
.legal-contact-box-actions{
display:flex;gap:0.8vw;justify-content:center;flex-wrap:wrap;
}
.legal-contact-box-actions a{
display:inline-flex;align-items:center;gap:0.5vw;
padding:1vw 1.8vw;
border-radius:100px;
font-size:0.9vw;font-weight:700;
text-decoration:none;
transition:all .2s;
}
.legal-cta-primary{
background:var(--burgundy);color:#fff !important;
}
.legal-cta-primary:hover{
background:var(--burgundy-dk);
transform:translateY(-1px);
}
.legal-cta-ghost{
background:#fff;color:var(--ink-dk) !important;
border:1px solid var(--divider);
}
.legal-cta-ghost:hover{
border-color:var(--burgundy);
color:var(--burgundy) !important;
}
/* Адаптив: планшет */
@media (max-width:1199px){
.page-content.legal-page{
/* padding убран — у legal-container свои отступы */
}
.page-content.legal-page .legal-container{
padding:32px 28px;
border-radius:20px;
border-left:none;
border-right:none;
margin:8px 0 0;
}
.legal-breadcrumbs{font-size:12px;margin-bottom:14px}
.legal-breadcrumbs .sep{margin:0 6px}
.legal-header{margin-bottom:32px;padding-bottom:24px}
.legal-kicker{font-size:24px;margin-bottom:6px}
.legal-title{font-size:32px;margin-bottom:8px}
.legal-meta{font-size:11.5px;gap:12px}
/* TOC сверху, контент снизу */
.legal-layout{grid-template-columns:1fr;gap:24px}
.legal-toc{
position:static;
background:var(--bg);
border-radius:14px;
padding:18px 20px;
font-size:14px;
}
.legal-toc-title{font-size:11px;margin-bottom:10px}
.legal-toc-list a{padding:6px 10px;border-radius:8px;border-left:none}
.legal-toc-list a:hover,
.legal-toc-list a.is-active{
border-left:none;
background:#fff;
color:var(--burgundy);
}
.legal-content{font-size:14.5px;line-height:1.65}
.legal-section{
margin-bottom:32px;
scroll-margin-top:110px; /* высота шапки на планшете + зазор */
}
.legal-section-num{font-size:11px;margin-bottom:6px}
.legal-section-title{font-size:18px;margin-bottom:12px}
.legal-content ul,
.legal-content ol{padding-left:22px}
.legal-callout{padding:14px 18px;margin:16px 0}
.legal-callout-title{font-size:14.5px}
.legal-callout p{font-size:13.5px}
.legal-contact-box{margin-top:36px;padding:24px 20px}
.legal-contact-box-title{font-size:18px}
.legal-contact-box-desc{font-size:13.5px;margin-bottom:16px}
.legal-contact-box-actions{gap:8px}
.legal-contact-box-actions a{padding:12px 22px;font-size:13.5px;gap:6px}
}
@media (max-width:767px){
.page-content.legal-page{
/* padding убран */
}
.page-content.legal-page .legal-container{
padding:28px 22px;
border-radius:16px;
border-left:none;
border-right:none;
margin:6px 0 0;
}
.legal-title{font-size:26px}
.legal-kicker{font-size:20px}
.legal-meta{flex-wrap:wrap;gap:8px;font-size:11px}
.legal-section-title{font-size:17px}
.legal-content{font-size:14px}
.legal-contact-box-actions{flex-direction:column;width:100%;gap:8px}
.legal-contact-box-actions a{width:100%;justify-content:center}
}
/* ============================================================
ОБЩИЕ СТРАНИЦЫ — page.php, archive-ye_case.php, index.php, single-ye_case.php
Базовый паттерн как у search-results и legal-page:
• Внешний .page-content на vw padding на ПК, без боковых на адаптиве
• Внутренний .page-container — белый блок с border-radius
============================================================ */
/* Корневая обёртка для обычных WP-страниц (page.php — Партнёрам и т.п.) */
.page-content:not(.search-results):not(.legal-page):not(.case-page):not(.case-archive-page):not(.blog-archive-page):not(.blog-single-page):not(.kontakty-page):not(.stoimost-page):not(.o-kompanii-page):not(.partneram-page):not(.service-hub-page):not(.service-page):not(.subservice-page){
padding:0 0 8vh;
}
.page-content:not(.search-results):not(.legal-page):not(.case-page):not(.case-archive-page):not(.blog-archive-page):not(.blog-single-page):not(.kontakty-page):not(.stoimost-page):not(.o-kompanii-page):not(.partneram-page):not(.service-hub-page):not(.service-page):not(.subservice-page) > .page-container{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:5vh 4vw;
margin:var(--hdr-gap) var(--side-pad) 0 !important;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
/* Хлебные крошки — общий стиль (для обычных страниц page.php — pills на светлом фоне) */
.page-content .breadcrumbs{
display:flex;align-items:center;gap:0.5vw;flex-wrap:wrap;
font-size:0.82vw;
color:var(--ink);
margin-bottom:3vh;
font-weight:500;
}
.page-content .breadcrumbs a{
color:var(--ink);
text-decoration:none;
padding:0.4vh 0.8vw;
border-radius:100px;
background:rgba(15,17,21,0.05);
border:1px solid rgba(15,17,21,0.06);
transition:background .2s, color .2s, border-color .2s;
}
.page-content .breadcrumbs a:hover{
background:rgba(122,47,60,0.08);
border-color:rgba(122,47,60,0.20);
color:var(--burgundy);
}
.page-content .breadcrumbs .sep{
color:rgba(15,15,16,0.25);
font-size:0.75vw;padding:0 0.1vw;
}
.page-content .breadcrumbs .current{
color:var(--ink-dk);font-weight:600;
padding:0.4vh 0.8vw;
border-radius:100px;
background:#FAFAF9;
border:1px solid rgba(15,17,21,0.04);
}
/* Заголовок страницы */
.page-content .page-header{margin-bottom:3vh}
.page-content .page-title{
font-size:2.6vw;font-weight:800;
letter-spacing:-0.02em;line-height:1.15;
color:var(--ink-dk);margin-bottom:1vh;
/* Разрешаем перенос длинных слов и связок через wbr/неразрывные дефисы */
overflow-wrap:break-word;
word-break:keep-all; /* keep-all = не ломаем русские слова, ломаем только по пробелам/wbr */
hyphens:auto;
}
.page-content .page-lead{
font-size:1vw;color:var(--mute);
line-height:1.6;max-width:48vw;
}
/* Контент */
.page-content .page-body{
font-size:0.95vw;line-height:1.7;color:var(--ink);
}
.page-content .page-body p{margin-bottom:1.2vh}
.page-content .page-body h2{
font-size:1.5vw;font-weight:800;
letter-spacing:-0.01em;line-height:1.25;
color:var(--ink-dk);
margin:3vh 0 1.5vh;
}
.page-content .page-body h3{
font-size:1.2vw;font-weight:700;
margin:2.5vh 0 1.2vh;
}
.page-content .page-body ul,
.page-content .page-body ol{
padding-left:1.5vw;margin-bottom:1.2vh;
}
.page-content .page-body li{margin-bottom:0.6vh;line-height:1.6}
.page-content .page-body strong{color:var(--ink-dk);font-weight:700}
.page-content .page-body a{
color:var(--burgundy);font-weight:600;
text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
transition:color .2s;
}
.page-content .page-body a:hover{color:var(--burgundy-dk)}
/* Адаптив: планшет */
@media (max-width:1199px){
.page-content:not(.search-results):not(.legal-page):not(.case-page):not(.case-archive-page):not(.blog-archive-page):not(.blog-single-page):not(.kontakty-page):not(.stoimost-page):not(.o-kompanii-page):not(.partneram-page):not(.service-hub-page):not(.service-page):not(.subservice-page){
/* padding убран — у каждой страницы свои отступы */
}
.page-content:not(.search-results):not(.legal-page):not(.case-page):not(.case-archive-page):not(.blog-archive-page):not(.blog-single-page):not(.kontakty-page):not(.stoimost-page):not(.o-kompanii-page):not(.partneram-page):not(.service-hub-page):not(.service-page):not(.subservice-page) > .page-container{
padding:32px 28px;
margin:8px 0 0 !important;
border-radius:20px;
border-left:none;
border-right:none;
}
.page-content .breadcrumbs{font-size:12px;margin-bottom:20px;gap:6px}
.page-content .breadcrumbs a,
.page-content .breadcrumbs .current{padding:4px 10px;font-size:12px}
.page-content .breadcrumbs .sep{margin:0;font-size:10.5px}
.page-content .page-title{font-size:30px;margin-bottom:8px}
.page-content .page-lead{font-size:14.5px;max-width:none}
.page-content .page-body{font-size:14.5px;line-height:1.65}
.page-content .page-body h2{font-size:20px;margin:24px 0 12px}
.page-content .page-body h3{font-size:17px;margin:20px 0 10px}
.page-content .page-body ul,
.page-content .page-body ol{padding-left:22px}
}
/* Адаптив: мобилка */
@media (max-width:767px){
.page-content:not(.search-results):not(.legal-page):not(.case-page):not(.case-archive-page):not(.blog-archive-page):not(.blog-single-page):not(.kontakty-page):not(.stoimost-page):not(.o-kompanii-page):not(.partneram-page):not(.service-hub-page):not(.service-page):not(.subservice-page){
/* padding убран — у каждой страницы свои отступы */
}
.page-content:not(.search-results):not(.legal-page):not(.case-page):not(.case-archive-page):not(.blog-archive-page):not(.blog-single-page):not(.kontakty-page):not(.stoimost-page):not(.o-kompanii-page):not(.partneram-page):not(.service-hub-page):not(.service-page):not(.subservice-page) > .page-container{
padding:28px 22px;
margin:6px 0 0 !important;
border-radius:16px;
border-left:none;
border-right:none;
}
.page-content .breadcrumbs{font-size:11.5px;margin-bottom:16px;gap:5px}
.page-content .breadcrumbs a,
.page-content .breadcrumbs .current{padding:3px 8px;font-size:11.5px}
.page-content .breadcrumbs .sep{font-size:10px}
.page-content .page-title{font-size:24px}
.page-content .page-lead{font-size:13.5px}
.page-content .page-body{font-size:14px}
.page-content .page-body h2{font-size:18px}
.page-content .page-body h3{font-size:16px}
}
/* ============================================================
COOKIE-BANNER — уведомление о cookie снизу на всю ширину
============================================================ */
.cookie-banner{
position:fixed;
left:0;right:0;bottom:0;
background:#fff;
border-top:1px solid var(--divider);
box-shadow:0 -8px 24px rgba(15,17,21,0.08);
padding:1.4vh 2vw;
z-index:9000;
transform:translateY(100%);
transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);
/* Учёт safe-area на мобильных устройствах */
padding-bottom:calc(1.4vh + env(safe-area-inset-bottom, 0px));
}
.cookie-banner[hidden]{display:none !important}
.cookie-banner.is-shown{transform:translateY(0)}
.cookie-banner-inner{
max-width:1400px;margin:0 auto;
display:flex;align-items:center;gap:2vw;
}
.cookie-banner-content{flex:1;min-width:0}
.cookie-banner-title{
display:flex;align-items:center;gap:0.5vw;
font-size:1vw;font-weight:800;
color:var(--ink-dk);
margin-bottom:0.4vh;
letter-spacing:-0.005em;
}
.cookie-banner-icon{display:inline-flex;align-items:center;justify-content:center;width:1.2vw;height:1.2vw;min-width:18px;min-height:18px;color:currentColor}.cookie-banner-icon svg{width:100%;height:100%}
.cookie-banner-text{
font-size:0.85vw;color:var(--mute);
line-height:1.5;
margin:0;
}
.cookie-banner-line1,
.cookie-banner-line2{display:block}
.cookie-banner-line2{margin-top:2px}
.cookie-banner-text a{
color:var(--burgundy);font-weight:600;
text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
}
.cookie-banner-text a:hover{color:var(--burgundy-dk)}
.cookie-banner-actions{
display:flex;gap:0.7vw;align-items:center;
flex-shrink:0;
}
.cookie-banner-btn{
padding:0.95vw 1.8vw;
border-radius:100px;
font-size:0.9vw;font-weight:700;
text-decoration:none;cursor:pointer;
border:none;
font-family:inherit;
transition:all 0.25s;
white-space:nowrap;
display:inline-flex;align-items:center;justify-content:center;gap:0.4vw;
}
.cookie-banner-btn-primary{
background:var(--burgundy);color:#fff;
}
.cookie-banner-btn-primary:hover{
background:var(--burgundy-dk);
transform:translateY(-1px);
}
.cookie-banner-btn-ghost{
background:transparent;color:var(--ink-dk);
}
.cookie-banner-btn-ghost:hover{
color:var(--burgundy);
}
/* Когда баннер виден — небольшой отступ снизу для bottom-bar чтобы не наезжали */
.cookie-banner.is-shown ~ .bbar.is-shown{
/* bbar и cookie-banner оба снизу — bbar поднимается над баннером */
/* Реализовано через JS — расчёт высоты баннера */
}
/* Адаптив: планшет */
@media (max-width:1199px){
.cookie-banner{padding:14px 24px;padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px))}
.cookie-banner-inner{gap:18px}
.cookie-banner-title{font-size:14px;margin-bottom:4px;gap:6px}
.cookie-banner-icon{width:16px;height:16px;min-width:16px;min-height:16px}
.cookie-banner-text{font-size:13px}
.cookie-banner-actions{gap:8px}
.cookie-banner-btn{
padding:11px 22px;
font-size:13px;
gap:6px;
}
}
/* Адаптив: мобилка */
@media (max-width:767px){
.cookie-banner{
padding:14px 14px;
padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
}
.cookie-banner-inner{
flex-direction:column;
align-items:stretch;
gap:12px;
}
.cookie-banner-title{font-size:14px}
.cookie-banner-text{font-size:12.5px;line-height:1.5}
.cookie-banner-actions{
width:100%;
gap:0;
}
/* Скрываем «Подробнее» на мобиле — оставляем только Принять */
.cookie-banner-btn-link{display:none !important}
.cookie-banner-btn-primary{
width:100%;
padding:13px 22px;
font-size:13.5px;
}
}
/* Когда есть bottom-bar (.bbar.is-shown) на мобилке — поднимаем cookie-banner над ним */
@media (max-width:767px){
body.has-cookie-banner .bbar.is-shown{
/* bbar остаётся как был — cookie banner перекрывает его */
}
}
/* ============================================================
EMPTY-STATE — пустой блог/архив кейсов
Красивый «нет публикаций» блок с иконкой и подсказкой
============================================================ */
.cases-empty{
text-align:center;
padding:6vh 4vw;
background:var(--bg);
border-radius:var(--rad-md);
margin-top:3vh;
}
.cases-empty p{
margin:0 0 1.2vh;
font-size:1.1vw;
color:var(--ink-dk);
font-weight:600;
}
.cases-empty p:last-child{margin-bottom:0}
.cases-empty .cases-empty-hint{
font-size:0.9vw;
color:var(--mute);
font-weight:400;
}
.cases-empty .cases-empty-hint strong{
color:var(--burgundy);
font-weight:600;
}
@media (max-width:1199px){
.cases-empty{padding:32px 24px;margin-top:24px}
.cases-empty p{font-size:16px}
.cases-empty .cases-empty-hint{font-size:13.5px}
}
@media (max-width:767px){
.cases-empty{padding:24px 18px}
.cases-empty p{font-size:15px}
.cases-empty .cases-empty-hint{font-size:13px}
}
/* page-lead: убираем лишние отступы у параграфов внутри */
.page-content .page-lead{
font-size:1vw;
color:var(--mute);
line-height:1.6;
max-width:48vw;
margin-bottom:0;
}
.page-content .page-lead p{margin:0 0 0.6vh}
.page-content .page-lead p:last-child{margin-bottom:0}
@media (max-width:1199px){
.page-content .page-lead{font-size:14.5px;max-width:none}
}
@media (max-width:767px){
.page-content .page-lead{font-size:13.5px}
}
/* ============================================================
SmartCaptcha Shield — скрываем плавающий бейдж Яндекса
(вынесены в отдельные правила чтобы при необходимости
отключить проще найти)
============================================================ */
.SmartCaptcha-Shield,
[data-testid="shield"]{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
pointer-events:none !important;
}
/* ============================================================
КАСТОМНЫЙ СКРОЛЛБАР — эффект «жидкого стекла»
Только на ПК (≥1024px) и устройствах с hover.
============================================================ */
/* Скрываем нативный скроллбар только на ПК */
@media (min-width: 1024px) and (hover: hover) {
html {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/old Edge */
}
html::-webkit-scrollbar {
width: 0;
height: 0;
background: transparent;
}
body::-webkit-scrollbar {
width: 0;
height: 0;
}
}
/* Сам кастомный скроллбар */
.ye-scrollbar {
position: fixed;
top: 16px;
right: 8px;
bottom: 16px;
width: 6px;
z-index: 9990;
border-radius: 100px;
pointer-events: none; /* до показа — клики проходят сквозь */
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
width 0.25s cubic-bezier(0.22, 1, 0.36, 1);
/* Glass-фон трека */
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 4px 12px rgba(15, 17, 21, 0.06);
}
/* Появление при скролле */
.ye-scrollbar.is-visible {
opacity: 1;
pointer-events: auto;
}
/* Когда body заблокирован (открыт попап/моб.меню) — скрываем кастомный bar */
body.ye-no-scroll .ye-scrollbar {
display: none !important;
}
/* Hover — расширяется чуть-чуть */
.ye-scrollbar:hover {
width: 10px;
background: rgba(255, 255, 255, 0.14);
}
/* Сам ползунок (thumb) */
.ye-scrollbar-thumb {
position: absolute;
top: 0;
left: 1px;
right: 1px;
border-radius: 100px;
cursor: grab;
will-change: transform, height;
/* Бордовый градиент с золотыми бликами — фирменный стиль темы */
background: linear-gradient(
180deg,
rgba(122, 47, 60, 0.85) 0%,
rgba(94, 31, 43, 0.92) 50%,
rgba(122, 47, 60, 0.85) 100%
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 0 rgba(0, 0, 0, 0.15),
0 1px 4px rgba(122, 47, 60, 0.35);
transition: background 0.2s, box-shadow 0.2s;
}
.ye-scrollbar:hover .ye-scrollbar-thumb {
background: linear-gradient(
180deg,
rgba(122, 47, 60, 0.95) 0%,
rgba(94, 31, 43, 1) 50%,
rgba(122, 47, 60, 0.95) 100%
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.35),
inset 0 -1px 0 rgba(0, 0, 0, 0.2),
0 2px 10px rgba(122, 47, 60, 0.5);
}
.ye-scrollbar-thumb:active {
cursor: grabbing;
background: linear-gradient(
180deg,
rgba(212, 176, 122, 0.9) 0%,
rgba(176, 141, 87, 1) 50%,
rgba(212, 176, 122, 0.9) 100%
);
}
/* Скрываем кастомный бар на печать и в режиме reduced-motion (доступность) */
@media print {
.ye-scrollbar { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
.ye-scrollbar {
transition: opacity 0.1s linear;
}
.ye-scrollbar-thumb {
transition: none;
}
}
/* ============================================================
ВНУТРЕННИЕ СКРОЛЛБАРЫ (попапы, моб.меню, прочие блоки с overflow)
Применяются ТОЛЬКО к конкретным элементам, не глобально (* было причиной
побочных скроллбаров у карточек в карусели).
============================================================ */
/* Список селекторов где у нас может быть внутренний скролл */
.lead-modal-window,
.ye-mobile-menu,
.bottom-sheet,
.search-overlay-results,
.lead-popup-inner,
.ye-mobile-menu-inner,
.bottom-sheet-inner,
textarea,
.ye-admin-panel pre,
pre,
code {
scrollbar-width: thin;
scrollbar-color: rgba(122, 47, 60, 0.5) transparent;
}
.lead-modal-window::-webkit-scrollbar,
.ye-mobile-menu::-webkit-scrollbar,
.bottom-sheet::-webkit-scrollbar,
.search-overlay-results::-webkit-scrollbar,
.lead-popup-inner::-webkit-scrollbar,
textarea::-webkit-scrollbar,
pre::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.lead-modal-window::-webkit-scrollbar-track,
.ye-mobile-menu::-webkit-scrollbar-track,
.bottom-sheet::-webkit-scrollbar-track,
.search-overlay-results::-webkit-scrollbar-track,
.lead-popup-inner::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track {
background: transparent;
border-radius: 100px;
}
.lead-modal-window::-webkit-scrollbar-thumb,
.ye-mobile-menu::-webkit-scrollbar-thumb,
.bottom-sheet::-webkit-scrollbar-thumb,
.search-overlay-results::-webkit-scrollbar-thumb,
.lead-popup-inner::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb {
background: linear-gradient(
180deg,
rgba(122, 47, 60, 0.55) 0%,
rgba(94, 31, 43, 0.75) 50%,
rgba(122, 47, 60, 0.55) 100%
);
border-radius: 100px;
transition: background 0.2s;
}
.lead-modal-window::-webkit-scrollbar-thumb:hover,
.ye-mobile-menu::-webkit-scrollbar-thumb:hover,
.bottom-sheet::-webkit-scrollbar-thumb:hover,
.search-overlay-results::-webkit-scrollbar-thumb:hover,
.lead-popup-inner::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover,
pre::-webkit-scrollbar-thumb:hover {
background: linear-gradient(
180deg,
rgba(122, 47, 60, 0.85) 0%,
rgba(94, 31, 43, 1) 50%,
rgba(122, 47, 60, 0.85) 100%
);
}
/* Карусели — ОБЯЗАТЕЛЬНО без скроллбара (свайп пальцем) */
.team-scroll,
.services-extras-track,
.blog-grid {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.team-scroll::-webkit-scrollbar,
.services-extras-track::-webkit-scrollbar,
.blog-grid::-webkit-scrollbar,
.team-scroll::-webkit-scrollbar-track,
.services-extras-track::-webkit-scrollbar-track,
.blog-grid::-webkit-scrollbar-track,
.team-scroll::-webkit-scrollbar-thumb,
.services-extras-track::-webkit-scrollbar-thumb,
.blog-grid::-webkit-scrollbar-thumb {
display: none !important;
width: 0 !important;
height: 0 !important;
background: transparent !important;
}
/* ============================================================
СТРАНИЦА КЕЙСА (single-ye_case.php) — версия 3
- Hero на полную ширину с фото, breadcrumbs внутри сверху
- Блок «Ход дела» — Задача / Решение / Результат
- 2-колоночная секция: контент слева, форма (service-card form-card) + параметры справа
- Похожие кейсы — БЕЛАЯ ОБЁРТКА с .case-card.small карточками с главной
============================================================ */
.page-content.case-page{
background:var(--bg);
}
/* Хлебные крошки внутри hero — стеклянные pills */
.case-breadcrumbs{
position:absolute;
top:5vh;left:4vw;right:4vw;
z-index:3;
display:flex;align-items:center;gap:0.5vw;flex-wrap:wrap;
font-size:0.78vw;
color:rgba(255,255,255,0.85);
font-weight:500;
}
.case-breadcrumbs a{
color:rgba(255,255,255,0.85);
text-decoration:none;
padding:0.4vh 0.8vw;
border-radius:100px;
background:rgba(255,255,255,0.12);
backdrop-filter:blur(10px) saturate(120%);
-webkit-backdrop-filter:blur(10px) saturate(120%);
border:1px solid rgba(255,255,255,0.15);
transition:background .2s, color .2s;
}
.case-breadcrumbs a:hover{
background:rgba(255,255,255,0.22);
color:#fff;
}
.case-breadcrumbs .sep{
color:rgba(255,255,255,0.5);
font-size:0.7vw;
}
.case-breadcrumbs .current{
color:rgba(255,255,255,0.85);
padding:0.4vh 0.8vw;
border-radius:100px;
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.1);
}
/* ============================================================
HERO
============================================================ */
.case-hero{
margin:var(--hdr-gap) var(--side-pad) 0;
border-radius:var(--rad-lg);
overflow:hidden;
border:1px solid var(--divider);
background:var(--white);
box-shadow:
0 24px 60px rgba(15,17,21,0.10),
0 6px 18px rgba(15,17,21,0.06);
position:relative;
}
.case-hero-cover{
position:relative;
aspect-ratio:21/8;
background-color:#2a1810;
background-size:cover;
background-position:center;
}
/* Blur-up подгрузка фона до полной загрузки */
.case-hero-cover.cover-loading{
filter:blur(30px);
transform:scale(1.02);
}
.case-hero-cover.cover-loaded{
filter:none;
transform:none;
transition:filter .8s ease, transform .8s ease;
}
.case-hero-cover::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(ellipse at 30% 60%,rgba(176,141,87,0.30) 0%,transparent 55%),
radial-gradient(ellipse at 70% 30%,rgba(122,47,60,0.25) 0%,transparent 50%);
pointer-events:none;
}
.case-hero-overlay{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.15) 35%,rgba(0,0,0,0.65) 70%,rgba(0,0,0,0.82) 100%);
pointer-events:none;
}
.case-hero-tags{
position:absolute;left:4vw;top:calc(5vh + 5vh);right:4vw;
display:flex;gap:0.5vw;flex-wrap:wrap;
z-index:2;
}
.case-hero-pill{
display:inline-flex;align-items:center;
font-size:0.7vw;letter-spacing:0.1em;text-transform:uppercase;
color:#fff;font-weight:700;
padding:0.6vh 1vw;border-radius:100px;
background:rgba(255,255,255,0.15);
backdrop-filter:blur(10px) saturate(120%);
-webkit-backdrop-filter:blur(10px) saturate(120%);
border:1px solid rgba(255,255,255,0.2);
}
.case-hero-pill--fresh{
background:var(--burgundy);
border-color:var(--burgundy);
font-weight:800;
padding-left:1.6vw;
position:relative;
box-shadow:0 2px 10px rgba(122,47,60,0.3);
}
.case-hero-pill--fresh .dot{
position:absolute;top:50%;left:0.7vw;
width:0.4vw;height:0.4vw;min-width:5px;min-height:5px;
border-radius:50%;background:#fff;
transform:translateY(-50%);
box-shadow:0 0 0 2px rgba(255,255,255,0.25);
animation:freshPulse 2s ease-in-out infinite;
}
/* Текст-блок поверх фото: H1 + подзаголовок, ширина 50% на ПК */
.case-hero-textblock{
position:absolute;left:4vw;bottom:5vh;right:4vw;
z-index:2;
max-width:50%;
}
.case-hero-title{
font-size:1.9vw;font-weight:900;
letter-spacing:-0.025em;line-height:1.15;
color:#fff;
margin:0 0 0.8vh;
text-shadow:0 2px 16px rgba(0,0,0,0.5);
}
.case-hero-sub{
font-size:0.95vw;
line-height:1.55;
color:rgba(255,255,255,0.88);
margin:0;font-weight:500;
text-shadow:0 1px 8px rgba(0,0,0,0.5);
}
.case-hero-stats{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:0;
padding:2vh 2vw;
background:linear-gradient(90deg,#B08D57 0%,#9b7a48 50%,#B08D57 100%);
color:#fff;
position:relative;
}
.case-hero-stats::before{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(255,255,255,0.08) 0%,transparent 100%);
pointer-events:none;
}
.case-hero-stat{
padding:0 1.5vw;position:relative;z-index:1;
}
.case-hero-stat:not(:first-child){
border-left:1px solid rgba(255,255,255,0.2);
}
.case-hero-stat .lbl{
font-size:0.65vw;letter-spacing:0.12em;text-transform:uppercase;
opacity:0.85;font-weight:700;margin-bottom:0.4vh;
}
.case-hero-stat .val{
font-size:1.7vw;font-weight:900;
letter-spacing:-0.02em;line-height:1;
white-space:nowrap;
}
.case-hero-stat .val em{
font-style:normal;font-size:0.6em;font-weight:700;
letter-spacing:0;opacity:0.85;
}
/* ============================================================
БЛОК «ХОД ДЕЛА»
============================================================ */
.case-flow{
padding:6vw 4vw;
margin:8vh var(--side-pad) 0;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
box-shadow:0 2px 10px rgba(15,17,21,0.03);
position:relative;
}
.case-flow-head{margin-bottom:5vh}
.case-flow-title{
font-size:3vw;font-weight:800;
letter-spacing:-0.025em;line-height:1.1;
color:var(--ink-dk);
margin:0;
}
.case-flow-title em{font-style:normal;color:var(--burgundy)}
/* ============================================================
TIMELINE — серые шарики заполняются бордовым по скроллу
============================================================ */
.case-timeline{
position:relative;
padding-left:5vw;
--timeline-axis-h:100%;
}
/* Серая фоновая ось — высота задаётся JS (от центра 1-го до центра последнего шарика) */
.case-timeline::before{
content:"";
position:absolute;
left:1.85vw;
top:1.55vw;
width:3px;
height:var(--timeline-axis-h);
background:rgba(15,17,21,0.10);
border-radius:100px;
}
/* Бордовая ось — растёт по скроллу через CSS variable */
.case-timeline::after{
content:"";
position:absolute;
left:1.85vw;
top:1.55vw;
width:3px;
height:calc(var(--timeline-axis-h) * var(--timeline-progress, 0) / 100);
background:linear-gradient(180deg, var(--burgundy) 0%, var(--gold) 100%);
border-radius:100px;
transition:height .3s ease-out;
}
/* Каждый шаг */
.case-step{
position:relative;
padding:0 0 4vh;
}
.case-step:last-child{padding-bottom:0}
/* Шарик (серый по умолчанию) */
.case-step-bullet{
position:absolute;
left:-5vw;
top:-2px;
width:3.7vw;
height:3.7vw;
min-width:48px;
min-height:48px;
border-radius:50%;
background:var(--white);
border:2px solid rgba(15,17,21,0.15);
display:flex;align-items:center;justify-content:center;
z-index:2;
transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.case-step-bullet .num{
font-size:1.1vw;
font-weight:800;
letter-spacing:-0.02em;
color:rgba(15,17,21,0.35);
transition:color .35s ease;
}
/* Активное состояние шарика — бордовая заливка + белая цифра */
.case-step.is-active .case-step-bullet{
background:var(--burgundy);
border-color:var(--burgundy);
box-shadow:0 4px 16px rgba(122,47,60,0.3);
}
.case-step.is-active .case-step-bullet .num{
color:#fff;
}
/* Кикер этапа — Caveat курсив (как «Мы защищаем деньги бизнеса» на главной) */
.case-step-kicker{
font-family:'Caveat',cursive;
font-size:1.7vw;
color:rgba(15,17,21,0.35);
font-weight:600;
margin-bottom:1vh;
line-height:1.1;
letter-spacing:0.005em;
transition:color .35s ease;
}
.case-step.is-active .case-step-kicker{color:var(--burgundy)}
.case-step--result.is-active .case-step-kicker{color:var(--gold)}
/* Заголовок шага */
.case-step-title{
font-size:1.3vw;
font-weight:800;
color:var(--ink-dk);
line-height:1.3;
margin:0 0 1.2vh;
letter-spacing:-0.01em;
}
/* Текст шага — на всю ширину */
.case-step-body{
font-size:1vw;
line-height:1.7;
color:var(--ink);
}
.case-step-body p{margin:0 0 1vh}
.case-step-body p:last-child{margin-bottom:0}
.case-step-body ul,
.case-step-body ol{padding-left:1.4vw;margin:1vh 0}
.case-step-body li{margin-bottom:0.5vh}
.case-step-body strong{color:var(--ink-dk);font-weight:700}
/* Третий шаг (Результат) — золотой шарик с галочкой когда активен */
.case-step--result .case-step-bullet{
position:absolute;
}
.case-step--result .case-step-bullet svg{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
width:1.4vw;height:1.4vw;
min-width:18px;min-height:18px;
opacity:0;
transition:opacity .35s ease;
color:#fff;
pointer-events:none;
display:block;
}
.case-step--result .case-step-bullet .num{display:inline-block}
.case-step--result.is-active .case-step-bullet{
background:var(--gold);
border-color:var(--gold);
box-shadow:0 4px 16px rgba(176,141,87,0.4);
}
.case-step--result.is-active .case-step-bullet .num{display:none}
.case-step--result.is-active .case-step-bullet svg{
opacity:1;
}
/* Результат — золотая плашка */
.case-step--result .case-step-result-card{
margin-top:1.5vh;
background:linear-gradient(135deg,rgba(255,255,255,0.55) 0%,rgba(255,255,255,0.25) 100%),
linear-gradient(180deg,rgba(212,176,122,0.30) 0%,rgba(176,141,87,0.20) 100%);
border:1px solid rgba(255,255,255,0.7);
border-radius:var(--rad-md);
padding:2.4vh 2vw;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(176,141,87,0.08);
backdrop-filter:blur(10px) saturate(140%);
-webkit-backdrop-filter:blur(10px) saturate(140%);
}
.case-step-result-text{
font-size:1vw;line-height:1.7;color:var(--ink);
}
.case-step-result-text p{margin:0 0 1vh}
.case-step-result-text p:last-child{margin-bottom:0}
.case-step-result-text ul,
.case-step-result-text ol{padding-left:1.4vw;margin:1vh 0}
.case-step-result-text li{margin-bottom:0.5vh}
.case-step-result-text strong{color:var(--ink-dk);font-weight:700}
/* ============================================================
ДВУХКОЛОНОЧНАЯ СЕКЦИЯ
============================================================ */
.case-detail{
margin:8vh var(--side-pad) 0;
display:grid;
grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
gap:1vw;
align-items:stretch;
}
.case-detail-main{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
display:flex;flex-direction:column;
}
.case-detail-main-head{margin-bottom:5vh}
.case-detail-title{
font-size:3vw;font-weight:800;
letter-spacing:-0.025em;line-height:1.1;
color:var(--ink-dk);margin:0;
}
.case-detail-title em{font-style:normal;color:var(--burgundy)}
.case-detail-body{
font-size:1vw;line-height:1.75;color:var(--ink);
}
.case-detail-body p{margin:0 0 1.4vh}
.case-detail-body p:last-child{margin-bottom:0}
.case-detail-body h2{
font-size:1.3vw;font-weight:800;color:var(--ink-dk);
margin:3vh 0 1.5vh;
}
.case-detail-body h3{
font-size:1.1vw;font-weight:700;color:var(--ink-dk);
margin:2.4vh 0 1vh;
}
.case-detail-body ul,
.case-detail-body ol{padding-left:1.4vw;margin:1.5vh 0}
.case-detail-body li{margin-bottom:0.6vh}
.case-detail-body strong{color:var(--ink-dk);font-weight:700}
.case-detail-keypoint{
margin-top:auto;
padding-top:3vh;
}
.case-detail-keypoint-kicker{
font-size:0.7vw;letter-spacing:0.12em;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:1.2vh;
}
.case-detail-keypoint-tags{
display:flex;flex-wrap:wrap;gap:0.5vw;
padding:1.8vh 1.6vw;
background:var(--bg);
border-left:3px solid var(--gold);
border-radius:0 var(--rad-md) var(--rad-md) 0;
}
.case-detail-tag{
display:inline-block;padding:0.4vh 0.9vw;
background:rgba(122,47,60,0.08);color:var(--burgundy);
border-radius:100px;font-size:0.78vw;font-weight:600;
}
/* ПРАВАЯ КОЛОНКА */
.case-detail-side{
display:flex;flex-direction:column;gap:1vw;
}
/* Форма — наследует все стили .service-card.form-card + .card-form (с главной) */
.case-form-card .card-body{
padding:3vh 2vw 3vh !important;
}
.case-form-card h3{
font-size:1.5vw !important;
}
.case-form-card .card-desc{
font-size:0.9vw !important;
}
/* Параметры дела */
.case-detail-params{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-md);
padding:3vh 2vw;
display:flex;flex-direction:column;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.case-detail-params-kicker{
font-size:0.7vw;letter-spacing:0.12em;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:1.6vh;
}
.case-detail-params-tbl{
width:100%;font-size:0.85vw;border-collapse:collapse;
}
.case-detail-params-tbl tr td{
padding:1vh 0;border-bottom:1px dashed rgba(15,17,21,0.12);
vertical-align:top;
}
.case-detail-params-tbl tr:last-child td{border-bottom:none}
.case-detail-params-tbl td:first-child{
color:var(--mute);width:35%;font-weight:500;
}
.case-detail-params-tbl td:last-child{
color:var(--ink-dk);font-weight:700;text-align:right;
}
.case-detail-params-link{
display:inline-flex;align-items:center;gap:0.4vw;
margin-top:1.5vh;
font-size:0.85vw;color:var(--burgundy);font-weight:700;
text-decoration:none;
}
.case-detail-params-link .arrow{
font-size:1vw;display:inline-block;transition:transform .25s;
}
.case-detail-params-link:hover .arrow{transform:translateX(3px)}
/* ====== Карточка «Решение суда» ====== */
.case-court-side{
display:flex;align-items:center;gap:1vw;
background:linear-gradient(135deg, #15161A 0%, #2C2D31 100%);
border-radius:var(--rad-md);
padding:2vh 1.6vw;
text-decoration:none;color:#fff;
transition:transform .25s, box-shadow .25s;
box-shadow:0 2px 10px rgba(15,17,21,0.10);
}
.case-court-side:hover{
transform:translateY(-2px);
box-shadow:0 14px 40px rgba(15,17,21,0.18);
}
.case-court-side-icon{
width:3vw;height:3vw;min-width:42px;min-height:42px;
flex-shrink:0;
background:rgba(176,141,87,0.2);
border-radius:12px;
display:flex;align-items:center;justify-content:center;
color:var(--gold);
}
.case-court-side-icon svg{
width:1.4vw;height:1.4vw;min-width:20px;min-height:20px;
}
.case-court-side-content{flex:1;min-width:0}
.case-court-side-kicker{
font-size:0.65vw;letter-spacing:0.12em;text-transform:uppercase;
color:rgba(212,176,122,0.95);font-weight:800;margin-bottom:0.3vh;
}
.case-court-side-title{
font-size:0.92vw;font-weight:700;line-height:1.3;color:#fff;
margin-bottom:0.2vh;
}
.case-court-side-meta{
font-size:0.78vw;color:rgba(255,255,255,0.55);
}
.case-court-side-arrow{
font-size:1.2vw;color:var(--gold);flex-shrink:0;
transition:transform .25s;
}
.case-court-side:hover .case-court-side-arrow{
transform:translateX(4px);
}
/* ============================================================
ПОХОЖИЕ КЕЙСЫ — БЕЛАЯ ОБЁРТКА + .case-card.small с главной
============================================================ */
.case-related-wrap{
padding:6vw 4vw;
margin:8vh var(--side-pad) 8vh;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
box-shadow:0 2px 10px rgba(15,17,21,0.03);
position:relative;
}
.case-related-head{display:flex;align-items:end;justify-content:space-between;gap:3vw;margin-bottom:5vh;flex-wrap:wrap}
.case-related-head-left{max-width:55vw}
.case-related-head .section-kicker{margin-bottom:1.5vh}
.case-related-title{font-size:3vw;font-weight:800;line-height:1.1;letter-spacing:-0.025em;color:var(--ink-dk);margin:0}
.case-related-title em{font-style:normal;color:var(--burgundy)}
.case-related-wrap .case-related-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5vw}
/* Карточка кейса в "Похожих" — с обложкой, кликабельная целиком */
.case-related-wrap .case-card{
display:flex;flex-direction:column;
overflow:hidden;
text-decoration:none;color:inherit;
transition:transform .25s, box-shadow .25s;
}
/* Если у карточки есть обложка — убираем бордовую полоску слева */
.case-related-wrap .case-card.has-cover,
.case-related-wrap .case-card:has(.case-card-cover){
border-left:1px solid var(--divider);
}
.case-related-wrap .case-card:hover{
transform:translateY(-4px);
box-shadow:0 14px 40px rgba(15,17,21,0.10);
}
.case-related-wrap .case-card-cover{
position:relative;
aspect-ratio:16/9;
background-color:#2a1810;
background-size:cover;
background-position:center;
overflow:hidden;
}
.case-related-wrap .case-card-cover.cover-loading{
filter:blur(20px);
transform:scale(1.04);
}
.case-related-wrap .case-card-cover.cover-loaded{
filter:none;
transform:none;
transition:filter .6s ease, transform .6s ease;
}
.case-related-wrap .case-card-cover-overlay{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%);
pointer-events:none;
}
.case-related-wrap .case-card-body{
flex:1;display:flex;flex-direction:column;
}
.case-related-wrap .case-more{
margin-top:auto;
display:inline-flex;align-items:center;gap:0.4vw;
}
.case-related-wrap .case-card .case-more .arrow{
display:inline-block;transition:transform .2s;
}
.case-related-wrap .case-card:hover .case-more .arrow{
transform:translateX(4px);
}
/* ============================================================
АДАПТИВ: ПЛАНШЕТ (≤1199px)
============================================================ */
@media (max-width:1199px){
.case-hero{
margin:8px 0 0;
border-radius:20px;
border-left:none;
border-right:none;
}
.case-hero-cover{aspect-ratio:16/8}
.case-breadcrumbs{
top:32px;left:28px;right:28px;
font-size:11px;gap:6px;
}
.case-breadcrumbs a,
.case-breadcrumbs .current{padding:4px 10px}
.case-breadcrumbs .sep{font-size:10px}
.case-breadcrumbs .current{
max-width:55%;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.case-hero-tags{left:28px;top:72px;right:28px;gap:6px}
.case-hero-pill{font-size:10px;padding:5px 11px}
.case-hero-pill--fresh{padding-left:18px}
.case-hero-pill--fresh .dot{left:8px;width:5px;height:5px}
.case-hero-textblock{
left:28px;right:28px;bottom:32px;
max-width:75%;
}
.case-hero-title{
font-size:24px;line-height:1.15;
margin-bottom:8px;
}
.case-hero-sub{
font-size:13.5px;line-height:1.5;
}
.case-hero-stats{padding:14px 18px}
.case-hero-stat{padding:0 14px}
.case-hero-stat .lbl{font-size:9.5px}
.case-hero-stat .val{font-size:18px}
.case-flow{
margin:6vh 0 0;
padding:32px 28px;
border-radius:20px;
border-left:none;
border-right:none;
}
.case-flow-title{font-size:30px;max-width:100%;line-height:1.05}
/* Timeline планшет */
.case-timeline{padding-left:64px}
.case-timeline::before,
.case-timeline::after{
left:23px;top:11px;width:3px;
}
.case-step{padding-bottom:32px}
.case-step-bullet{
left:-64px;width:46px;height:46px;
min-width:46px;min-height:46px;
}
.case-step-bullet .num{font-size:15px}
.case-step--result .case-step-bullet svg{width:20px;height:20px;min-width:20px;min-height:20px}
.case-step-kicker{font-size:24px;margin-bottom:10px}
.case-step-title{font-size:18px;margin-bottom:10px}
.case-step-body{font-size:14.5px;line-height:1.7}
.case-step--result .case-step-result-card{
padding:22px 22px;
margin-top:14px;
}
.case-step-result-text{font-size:14.5px}
.case-detail{
margin:6vh 0 0;
grid-template-columns:1fr;gap:12px;
}
.case-detail-main{
padding:32px 28px;border-radius:20px;
border-left:none;border-right:none;
}
.case-detail-main-head{margin-bottom:24px}
.case-detail-title{font-size:30px;line-height:1.05}
.case-detail-body{font-size:14.5px;max-width:none}
.case-detail-body h2{font-size:18px}
.case-detail-body h3{font-size:15.5px}
.case-detail-keypoint{margin-top:24px}
.case-detail-keypoint-kicker{font-size:10.5px}
.case-detail-keypoint-tags{padding:14px 16px}
.case-detail-tag{font-size:11.5px;padding:3px 10px}
.case-detail-side{
display:flex;flex-direction:column;gap:12px;
}
/* Параметры и форма — на всю ширину (без боковых границ) */
.case-detail-params,
.case-form-card{
border-left:none;
border-right:none;
border-radius:18px;
}
.case-form-card .card-body{padding:24px 22px !important}
.case-form-card h3{font-size:20px !important}
.case-form-card .card-desc{font-size:13.5px !important}
.case-detail-params{padding:22px 22px}
.case-detail-params-kicker{font-size:10.5px}
.case-detail-params-tbl{font-size:13px}
.case-detail-params-tbl tr td{padding:8px 0}
.case-detail-params-link{font-size:13px;padding-top:14px;gap:6px}
.case-detail-params-link .arrow{font-size:16px}
/* Решение суда планшет — с боковыми отступами 5px */
.case-court-side{
padding:16px 18px;gap:14px;
border-radius:18px;
margin:0 5px;
}
.case-court-side-icon{
width:42px;height:42px;
min-width:42px;min-height:42px;
border-radius:12px;
}
.case-court-side-icon svg{width:20px;height:20px;min-width:20px;min-height:20px}
.case-court-side-kicker{font-size:9.5px}
.case-court-side-title{font-size:13px}
.case-court-side-meta{font-size:11.5px}
.case-court-side-arrow{font-size:18px}
.case-related-wrap{
margin:6vh 0 6vh;
padding:32px 28px;
border-radius:20px;
border-left:none;
border-right:none;
}
/* Head — block, скрываем верхнюю кнопку */
.case-related-head{
display:block !important;
margin-bottom:20px;
}
.case-related-head-left{max-width:none}
.case-related-title{
font-size:24px;
line-height:1.15;
letter-spacing:-0.02em;
}
.case-related-head .cases-cta:not(.cases-cta--mobile){
display:none;
}
/* Сетка превращается в горизонтальную карусель */
.case-related-wrap .case-related-grid{
display:flex !important;
grid-template-columns:none !important;
gap:14px !important;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
/* Расширяем за края белого блока */
margin-left:calc(var(--section-pad-x) * -1);
margin-right:calc(var(--section-pad-x) * -1);
scroll-padding-left:var(--section-pad-x);
}
.case-related-wrap .case-related-grid::-webkit-scrollbar{display:none}
/* Карточка — фиксированная ширина */
.case-related-wrap .case-card{
flex:0 0 auto;
width:75%;
scroll-snap-align:start;
border-radius:14px;
}
.case-related-wrap .case-related-grid > .case-card:first-child{
margin-left:var(--section-pad-x);
}
.case-related-wrap .case-related-grid > .case-card:last-child{
margin-right:var(--section-pad-x);
}
}
/* На планшете 768-1199 — больше карточек видно */
@media (min-width:768px) and (max-width:1199px){
.case-related-wrap .case-card{
width:42%;
}
}
/* ============================================================
АДАПТИВ: МОБИЛКА (≤767px)
============================================================ */
@media (max-width:767px){
.case-hero{
margin:6px 0 0;
border-radius:16px;
border-left:none;
border-right:none;
}
.case-hero-cover{aspect-ratio:4/5;min-height:0}
.case-breadcrumbs{
top:28px;left:22px;right:22px;
font-size:10.5px;gap:4px;flex-wrap:nowrap;
}
.case-breadcrumbs a,
.case-breadcrumbs .current{padding:3px 8px}
.case-breadcrumbs .current{
max-width:60%;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.case-hero-tags{left:22px;top:62px;right:22px}
.case-hero-pill{font-size:9.5px;padding:4px 10px}
.case-hero-pill--fresh{padding-left:16px}
.case-hero-textblock{
left:22px;right:22px;bottom:28px;
max-width:100%;
}
.case-hero-title{
font-size:20px;line-height:1.2;
margin-bottom:6px;
}
.case-hero-sub{
font-size:13px;line-height:1.5;
}
.case-hero-stats{
grid-template-columns:1fr 1fr 1fr;padding:12px 12px;
}
.case-hero-stat{padding:0 6px}
.case-hero-stat:first-child{padding-left:0}
.case-hero-stat .lbl{font-size:8.5px;letter-spacing:0.1em}
.case-hero-stat .val{font-size:14px}
.case-hero-stat .val em{font-size:0.7em}
.case-flow{
margin:28px 0 0;
padding:28px 22px;
border-radius:16px;
border-left:none;
border-right:none;
}
.case-flow-title{font-size:24px;line-height:1.05}
/* Timeline мобила */
.case-timeline{padding-left:50px}
.case-timeline::before,
.case-timeline::after{
left:17px;top:8px;width:2px;
}
.case-step{padding-bottom:24px}
.case-step-bullet{
left:-50px;width:36px;height:36px;
min-width:36px;min-height:36px;
}
.case-step-bullet .num{font-size:13px}
.case-step--result .case-step-bullet svg{width:15px;height:15px;min-width:15px;min-height:15px}
.case-step-kicker{font-size:20px;margin-bottom:8px}
.case-step-title{font-size:16px;margin-bottom:8px}
.case-step-body{font-size:13.5px;line-height:1.65}
.case-step--result .case-step-result-card{
padding:18px 16px;
margin-top:12px;
}
.case-step-result-text{font-size:13.5px}
.case-detail{margin:28px 0 0}
.case-detail-main{
padding:28px 22px;border-radius:16px;
border-left:none;border-right:none;
}
.case-detail-main-head{margin-bottom:18px}
.case-detail-title{font-size:24px;line-height:1.05}
.case-detail-body{font-size:14px}
.case-detail-body h2{font-size:17px}
.case-detail-body h3{font-size:15px}
.case-detail-keypoint{margin-top:18px}
.case-detail-side{
display:flex;flex-direction:column;gap:10px;
}
/* Параметры и форма — на всю ширину (без боковых границ) */
.case-detail-params,
.case-form-card{
border-left:none;
border-right:none;
border-radius:14px;
}
.case-form-card .card-body{padding:22px 18px !important}
.case-form-card h3{font-size:18px !important}
.case-detail-params{padding:22px 18px}
.case-detail-params-tbl{font-size:12.5px}
.case-detail-params-link{font-size:13px;gap:6px}
.case-detail-params-link .arrow{font-size:16px}
/* Решение суда мобила — с боковыми отступами 5px */
.case-court-side{
padding:14px 16px;gap:12px;
border-radius:14px;
margin:0 5px;
}
.case-court-side-icon{
width:38px;height:38px;
min-width:38px;min-height:38px;
border-radius:10px;
}
.case-court-side-icon svg{width:18px;height:18px;min-width:18px;min-height:18px}
.case-court-side-kicker{font-size:9px}
.case-court-side-title{font-size:12.5px}
.case-court-side-meta{font-size:11px}
.case-court-side-arrow{font-size:16px}
.case-related-wrap{
margin:28px 0 28px;
padding:24px 22px;
border-radius:16px;
border-left:none;
border-right:none;
}
.case-related-title{
font-size:22px;
}
.case-related-wrap .case-card{
width:84%;
}
}
/* ============================================================
АРХИВ КЕЙСОВ (/kejsy/) и ТАКСОНОМИЯ (/kejsy/napravlenie//)
Единый белый блок: hero (заголовок, лид, фильтры) + сетка карточек
============================================================ */
.case-archive-page{padding:0 0 8vh}
/* Главный белый блок — отступы как у .page-container страниц (О компании и т.д.) */
.case-archive-wrap{
margin:var(--hdr-gap) var(--side-pad) 0;
padding:5vh 4vw;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.case-archive-head{margin-bottom:5vh}
.case-archive-head .breadcrumbs{margin-bottom:3vh}
.case-archive-kicker{
font-size:0.78vw;letter-spacing:0.18em;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:1.5vh;
display:flex;align-items:center;gap:0.6vw;
}
.case-archive-kicker::before{
content:"";display:inline-block;width:1.6vw;height:1px;background:var(--gold);
}
.case-archive-title{
font-size:4vw;font-weight:800;
letter-spacing:-0.025em;line-height:1.05;
color:var(--ink-dk);margin:0 0 2.5vh;
}
.case-archive-title em{font-style:normal;color:var(--burgundy)}
.case-archive-lead{
font-size:1.05vw;line-height:1.65;color:var(--ink);
max-width:60vw;margin:0 0 4vh;
}
/* Фильтр-pill'ы */
.case-filter{
display:flex;flex-wrap:wrap;gap:0.6vw;
margin-top:2vh;
}
.case-filter-pill{
display:inline-flex;align-items:center;gap:0.5vw;
padding:0.7vw 1.3vw;
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:100px;
font-size:0.85vw;font-weight:600;
color:var(--ink-dk);
text-decoration:none;
transition:background .25s, color .25s, border-color .25s, transform .25s;
white-space:nowrap;
}
.case-filter-pill:hover{
background:#fff;
border-color:var(--burgundy);
color:var(--burgundy);
transform:translateY(-1px);
}
.case-filter-pill.is-active{
background:var(--burgundy);
border-color:var(--burgundy);
color:#fff;
}
.case-filter-pill.is-active:hover{
background:var(--burgundy-dk);
color:#fff;
}
.case-filter-count{
font-size:0.75vw;font-weight:700;
padding:0.15vw 0.55vw;border-radius:100px;
background:rgba(15,17,21,0.06);
color:var(--mute);
min-width:1.5vw;text-align:center;
line-height:1.4;
}
.case-filter-pill:hover .case-filter-count{
background:rgba(122,47,60,0.10);
color:var(--burgundy);
}
.case-filter-pill.is-active .case-filter-count{
background:rgba(255,255,255,0.18);
color:#fff;
}
/* Сетка карточек — внутри .case-archive-wrap */
.case-archive-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:1.5vw;
}
/* Empty state */
.case-archive-empty{
text-align:center;
padding:4vw 2vw;
font-size:1vw;color:var(--mute);
}
.case-archive-empty .cases-cta{margin-top:2vh}
/* Адаптив — Планшет (768-1199) */
@media (max-width:1199px){
.case-archive-page{padding-bottom:0}
.case-archive-wrap{
margin:8px 0 0;
padding:32px 28px;
border-radius:20px;
border-left:none;border-right:none;
}
.case-archive-head{margin-bottom:28px}
.case-archive-head .breadcrumbs{margin-bottom:18px}
.case-archive-kicker{font-size:11px;margin-bottom:12px}
.case-archive-kicker::before{width:18px}
.case-archive-title{font-size:42px;line-height:1.05;margin-bottom:14px}
.case-archive-lead{font-size:15px;max-width:none;margin-bottom:20px}
.case-filter{gap:8px;margin-top:14px}
.case-filter-pill{padding:9px 16px;font-size:13px;gap:7px}
.case-filter-count{font-size:11px;padding:1px 7px;min-width:18px}
.case-archive-grid{
grid-template-columns:repeat(2, minmax(0,1fr));
gap:14px;
}
.case-archive-empty{font-size:14.5px;padding:32px 14px}
}
/* Адаптив — Мобила (≤767) */
@media (max-width:767px){
.case-archive-page{padding-bottom:0}
.case-archive-wrap{
margin:6px 0 0;
padding:28px 22px;
border-radius:16px;
border-left:none;border-right:none;
}
.case-archive-head{margin-bottom:22px}
.case-archive-head .breadcrumbs{margin-bottom:14px}
.case-archive-kicker{font-size:10.5px;margin-bottom:10px}
.case-archive-title{font-size:32px;line-height:1.05;margin-bottom:12px}
.case-archive-lead{font-size:14px;line-height:1.6;margin-bottom:16px}
.case-filter{gap:7px;margin-top:10px}
.case-filter-pill{padding:8px 13px;font-size:12.5px;gap:6px}
.case-filter-count{font-size:10.5px;padding:1px 6px}
.case-archive-grid{
grid-template-columns:1fr;
gap:12px;
}
.case-archive-empty{font-size:13.5px;padding:28px 14px}
}
/* ============================================================
БЛОГ — АРХИВ /blog/ + ТАКСОНОМИЯ /blog/rubrika//
Структура зеркалит .case-archive-* (единый стиль)
============================================================ */
.blog-archive-page{padding:0 0 8vh}
.blog-archive-wrap{
margin:var(--hdr-gap) var(--side-pad) 0;
padding:5vh 4vw;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.blog-archive-head{margin-bottom:5vh}
.blog-archive-head .breadcrumbs{margin-bottom:3vh}
.blog-archive-kicker{
font-size:0.78vw;letter-spacing:0.18em;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:1.5vh;
display:flex;align-items:center;gap:0.6vw;
}
.blog-archive-kicker::before{
content:"";display:inline-block;width:1.6vw;height:1px;background:var(--gold);
}
.blog-archive-title{
font-size:4vw;font-weight:800;
letter-spacing:-0.025em;line-height:1.05;
color:var(--ink-dk);margin:0 0 2.5vh;
}
.blog-archive-title em{font-style:normal;color:var(--burgundy)}
.blog-archive-lead{
font-size:1.05vw;line-height:1.65;color:var(--ink);
max-width:60vw;margin:0 0 4vh;
}
.blog-filter{
display:flex;flex-wrap:wrap;gap:0.6vw;
margin-top:2vh;
}
.blog-filter-pill{
display:inline-flex;align-items:center;gap:0.5vw;
padding:0.7vw 1.3vw;
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:100px;
font-size:0.85vw;font-weight:600;
color:var(--ink-dk);
text-decoration:none;
transition:background .25s, color .25s, border-color .25s, transform .25s;
white-space:nowrap;
}
.blog-filter-pill:hover{
background:#fff;
border-color:var(--burgundy);
color:var(--burgundy);
transform:translateY(-1px);
}
.blog-filter-pill.is-active{
background:var(--burgundy);
border-color:var(--burgundy);
color:#fff;
}
.blog-filter-pill.is-active:hover{
background:var(--burgundy-dk);
color:#fff;
}
.blog-filter-count{
font-size:0.75vw;font-weight:700;
padding:0.15vw 0.55vw;border-radius:100px;
background:rgba(15,17,21,0.06);
color:var(--mute);
min-width:1.5vw;text-align:center;line-height:1.4;
}
.blog-filter-pill:hover .blog-filter-count{
background:rgba(122,47,60,0.10);
color:var(--burgundy);
}
.blog-filter-pill.is-active .blog-filter-count{
background:rgba(255,255,255,0.18);
color:#fff;
}
/* Сетка карточек блога — внутри .blog-archive-wrap */
.blog-archive-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:1.5vw;
}
/* Карточка статьи в сетке */
.blog-card-archive{
display:flex;flex-direction:column;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-md);
text-decoration:none;color:inherit;
overflow:hidden;
transition:transform .35s, box-shadow .35s, border-color .35s;
box-shadow:0 1px 2px rgba(15,17,21,0.02);
}
.blog-card-archive:hover{
transform:translateY(-4px);
box-shadow:0 16px 40px rgba(15,17,21,0.10);
border-color:rgba(122,47,60,0.25);
}
.blog-card-archive-cover{
position:relative;
aspect-ratio:16/9;
background-color:#2a1810;
background-size:cover;
background-position:center;
overflow:hidden;
}
.blog-card-archive-cover.cover-loading{filter:blur(20px);transform:scale(1.04)}
.blog-card-archive-cover.cover-loaded{filter:none;transform:none;transition:filter .6s ease, transform .6s ease}
.blog-card-archive-cover-overlay{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.30) 100%);
pointer-events:none;
}
.blog-card-archive-body{
display:flex;flex-direction:column;
padding:1.6vw 1.6vw;
flex:1;
}
.blog-card-archive-tags{
display:flex;flex-wrap:wrap;gap:0.5vw;
margin-bottom:1.2vh;
}
.blog-card-archive-rubric{
font-size:0.72vw;letter-spacing:0.1em;text-transform:uppercase;
font-weight:800;color:var(--burgundy);
padding:0.3vw 0.8vw;
background:rgba(122,47,60,0.08);
border-radius:100px;
}
.blog-card-archive-fresh{
font-size:0.72vw;letter-spacing:0.05em;
font-weight:800;color:#fff;
padding:0.3vw 0.8vw;
background:var(--burgundy);
border-radius:100px;
display:inline-flex;align-items:center;gap:0.4vw;
}
.blog-card-archive-fresh::before{
content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--gold);
}
.blog-card-archive-title{
font-size:1.15vw;font-weight:800;line-height:1.25;
color:var(--ink-dk);margin:0 0 1.2vh;
letter-spacing:-0.01em;
}
.blog-card-archive-excerpt{
font-size:0.9vw;line-height:1.55;color:var(--ink);
margin:0 0 1.5vh;
}
.blog-card-archive-meta{
display:flex;flex-wrap:wrap;gap:1vw;
font-size:0.78vw;color:var(--mute);
margin:auto 0 1.2vh;
padding-top:1.2vh;
border-top:1px solid var(--divider);
}
.blog-card-archive-more{
display:inline-flex;align-items:center;gap:0.4vw;
font-size:0.85vw;color:var(--burgundy);font-weight:700;
}
.blog-card-archive-more .arrow{
font-size:1vw;display:inline-block;transition:transform .25s;
}
.blog-card-archive:hover .blog-card-archive-more .arrow{transform:translateX(3px)}
/* Empty state */
.blog-archive-empty{
text-align:center;
padding:4vw 2vw;
font-size:1vw;color:var(--mute);
}
.blog-archive-empty .cases-cta{margin-top:2vh}
/* Адаптив — Планшет */
@media (max-width:1199px){
.blog-archive-page{padding-bottom:0}
.blog-archive-wrap{
margin:8px 0 0;
padding:32px 28px;
border-radius:20px;
border-left:none;border-right:none;
}
.blog-archive-head{margin-bottom:28px}
.blog-archive-head .breadcrumbs{margin-bottom:18px}
.blog-archive-kicker{font-size:11px;margin-bottom:12px}
.blog-archive-kicker::before{width:18px}
.blog-archive-title{font-size:42px;line-height:1.05;margin-bottom:14px}
.blog-archive-lead{font-size:15px;max-width:none;margin-bottom:20px}
.blog-filter{gap:8px;margin-top:14px}
.blog-filter-pill{padding:9px 16px;font-size:13px;gap:7px}
.blog-filter-count{font-size:11px;padding:1px 7px;min-width:18px}
.blog-archive-grid{
grid-template-columns:repeat(2, minmax(0,1fr));
gap:14px;
}
.blog-card-archive-body{padding:18px 18px}
.blog-card-archive-rubric,
.blog-card-archive-fresh{font-size:10.5px;padding:4px 10px}
.blog-card-archive-title{font-size:17px;line-height:1.3}
.blog-card-archive-excerpt{font-size:13.5px;line-height:1.55}
.blog-card-archive-meta{font-size:12px;gap:14px}
.blog-card-archive-more{font-size:13px}
.blog-card-archive-more .arrow{font-size:15px}
.blog-archive-empty{font-size:14.5px;padding:32px 14px}
}
/* Адаптив — Мобила */
@media (max-width:767px){
.blog-archive-wrap{
margin:6px 0 0;
padding:28px 22px;
border-radius:16px;
}
.blog-archive-head{margin-bottom:22px}
.blog-archive-head .breadcrumbs{margin-bottom:14px}
.blog-archive-kicker{font-size:10.5px;margin-bottom:10px}
.blog-archive-title{font-size:32px;line-height:1.05;margin-bottom:12px}
.blog-archive-lead{font-size:14px;line-height:1.6;margin-bottom:16px}
.blog-filter{gap:7px;margin-top:10px}
.blog-filter-pill{padding:8px 13px;font-size:12.5px;gap:6px}
.blog-filter-count{font-size:10.5px;padding:1px 6px}
.blog-archive-grid{
grid-template-columns:1fr;
gap:12px;
}
.blog-card-archive-body{padding:18px 16px}
.blog-card-archive-rubric,
.blog-card-archive-fresh{font-size:10px;padding:3px 9px}
.blog-card-archive-title{font-size:16px;line-height:1.3}
.blog-card-archive-excerpt{font-size:13px;line-height:1.55}
.blog-card-archive-meta{font-size:11.5px;gap:12px}
.blog-card-archive-more{font-size:12.5px}
.blog-archive-empty{font-size:13.5px;padding:28px 14px}
}
/* ============================================================
БЛОГ — ОДНА СТАТЬЯ (single.php)
============================================================ */
.blog-single-page{padding:0}
/* HERO статьи — копия .case-hero без аспект-рейшн с фото на весь блок */
.blog-single-hero{
position:relative;
margin:var(--hdr-gap) var(--side-pad) 0;
border-radius:var(--rad-lg);
overflow:hidden;
background:var(--ink-dk);
border:1px solid var(--divider);
box-shadow:
0 24px 60px rgba(15,17,21,0.10),
0 6px 18px rgba(15,17,21,0.06);
}
.blog-single-hero-cover{
position:relative;
aspect-ratio:21/8;
background-color:#2a1810;
background-size:cover;
background-position:center;
}
.blog-single-hero-cover::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(ellipse at 30% 60%,rgba(176,141,87,0.30) 0%,transparent 55%),
radial-gradient(ellipse at 70% 30%,rgba(122,47,60,0.25) 0%,transparent 50%);
pointer-events:none;
}
.blog-single-hero-cover.cover-loading{filter:blur(30px);transform:scale(1.02)}
.blog-single-hero-cover.cover-loaded{filter:none;transform:none;transition:filter .8s ease, transform .8s ease}
.blog-single-hero-overlay{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.10) 30%,rgba(0,0,0,0.65) 75%,rgba(0,0,0,0.86) 100%);
pointer-events:none;
}
/* Верхняя часть hero — крошки + рубрика (position absolute) */
.blog-single-hero-top{
position:absolute;left:4vw;top:5vh;right:4vw;
z-index:3;
display:flex;flex-direction:column;gap:1.2vh;
}
.blog-single-hero-top .breadcrumbs{
margin:0;
display:flex;flex-wrap:wrap;gap:0.4vw;
}
.blog-single-hero-top .breadcrumbs a,
.blog-single-hero-top .breadcrumbs .current{
background:rgba(255,255,255,0.12);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,0.16);
color:#fff;
padding:0.4vw 0.9vw;
border-radius:100px;
font-size:0.8vw;
}
.blog-single-hero-top .breadcrumbs a{transition:background .25s}
.blog-single-hero-top .breadcrumbs a:hover{background:rgba(255,255,255,0.22)}
.blog-single-hero-top .breadcrumbs .sep{color:rgba(255,255,255,0.3);padding:0 0.2vw}
.blog-single-tags{
display:flex;flex-wrap:wrap;gap:0.6vw;margin:0;
}
.blog-single-rubric{
font-size:0.78vw;letter-spacing:0.1em;text-transform:uppercase;
font-weight:800;color:var(--gold);
padding:0.45vw 1vw;
background:rgba(176,141,87,0.18);
border:1px solid rgba(176,141,87,0.35);
border-radius:100px;
text-decoration:none;
transition:background .25s;
}
a.blog-single-rubric:hover{background:rgba(176,141,87,0.28)}
/* Нижняя часть hero — заголовок + подзаголовок + meta (position absolute) */
.blog-single-hero-bottom{
position:absolute;left:4vw;bottom:5vh;right:4vw;
z-index:2;
max-width:75%;
}
.blog-single-title{
font-size:2.4vw;font-weight:900;
letter-spacing:-0.025em;line-height:1.1;
color:#fff;margin:0 0 1.6vh;
text-shadow:0 2px 16px rgba(0,0,0,0.5);
}
.blog-single-sub{
font-size:1.05vw;line-height:1.55;
color:rgba(255,255,255,0.88);
margin:0 0 2vh;max-width:80%;
font-weight:500;
text-shadow:0 1px 8px rgba(0,0,0,0.5);
}
.blog-single-meta{
display:flex;flex-wrap:wrap;gap:1.6vw;
font-size:0.85vw;color:rgba(255,255,255,0.80);
}
.blog-single-meta span{display:inline-flex;align-items:center;gap:0.4vw}
.blog-single-meta svg{width:0.95vw;height:0.95vw;min-width:14px;min-height:14px;color:var(--gold)}
/* ОСНОВНОЙ КОНТЕНТ + SIDEBAR */
.blog-single-body{
display:grid;
grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
gap:1vw;
margin:8vh var(--side-pad) 0;
align-items:start;
}
.blog-single-content{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
font-size:1.05vw;
line-height:1.75;
color:var(--ink);
display:flex;flex-direction:column;
}
.blog-single-content > *:first-child{margin-top:0}
.blog-single-content > *:last-child{margin-bottom:0}
.blog-single-content p{margin:0 0 1.6vh}
.blog-single-content h2{
font-size:1.8vw;font-weight:800;color:var(--ink-dk);
margin:4vh 0 2vh;letter-spacing:-0.02em;line-height:1.2;
}
.blog-single-content h3{
font-size:1.4vw;font-weight:700;color:var(--ink-dk);
margin:3vh 0 1.4vh;letter-spacing:-0.01em;line-height:1.3;
}
.blog-single-content h4{
font-size:1.15vw;font-weight:700;color:var(--ink-dk);
margin:2.4vh 0 1vh;
}
.blog-single-content ul,
.blog-single-content ol{
padding-left:1.8vw;margin:1.6vh 0;
}
.blog-single-content li{margin-bottom:0.7vh}
.blog-single-content strong{color:var(--ink-dk);font-weight:700}
.blog-single-content a{
color:var(--burgundy);text-decoration:underline;
text-decoration-thickness:1px;text-underline-offset:2px;
transition:color .25s;
}
.blog-single-content a:hover{color:var(--burgundy-dk)}
.blog-single-content blockquote{
margin:2.4vh 0;padding:2vh 1.8vw;
background:#FAFAF9;
border-left:3px solid var(--gold);
border-radius:12px;
font-size:1.05vw;font-style:italic;
color:var(--ink-dk);
}
.blog-single-content blockquote p:last-child{margin-bottom:0}
.blog-single-content code{
background:#FAFAF9;border:1px solid var(--divider);
padding:1px 6px;border-radius:6px;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:0.95em;color:var(--burgundy);
}
.blog-single-content pre{
background:#15161A;color:#e6e6e6;
padding:1.8vh 1.4vw;border-radius:14px;
overflow-x:auto;margin:2vh 0;font-size:0.9vw;
line-height:1.6;
}
.blog-single-content pre code{
background:transparent;border:none;padding:0;color:inherit;
}
.blog-single-content img{
max-width:100%;height:auto;border-radius:14px;
margin:2vh 0;
}
.blog-single-content table{
width:100%;border-collapse:collapse;margin:2vh 0;
font-size:0.95vw;
}
.blog-single-content table th,
.blog-single-content table td{
padding:1vh 1vw;text-align:left;
border-bottom:1px solid var(--divider);
}
.blog-single-content table th{
font-weight:700;color:var(--ink-dk);background:#FAFAF9;
}
.blog-single-content hr{
border:none;height:1px;background:var(--divider);
margin:3vh 0;
}
/* SIDEBAR */
.blog-single-side{
display:flex;flex-direction:column;gap:1vw;
position:sticky;top:12vh;
}
.blog-side-service{
display:flex;align-items:center;gap:1vw;
padding:2vh 1.6vw;
background:linear-gradient(135deg, var(--burgundy-dk) 0%, var(--burgundy) 100%);
border-radius:var(--rad-md);
text-decoration:none;color:#fff;
transition:transform .25s, box-shadow .25s;
}
.blog-side-service:hover{
transform:translateY(-2px);
box-shadow:0 14px 40px rgba(122,47,60,0.20);
}
.blog-side-service-icon{
width:3vw;height:3vw;min-width:42px;min-height:42px;flex-shrink:0;
background:rgba(255,255,255,0.14);
border-radius:12px;
display:flex;align-items:center;justify-content:center;
color:var(--gold);
}
.blog-side-service-icon svg{width:1.4vw;height:1.4vw;min-width:20px;min-height:20px}
.blog-side-service-content{flex:1;min-width:0}
.blog-side-service-kicker{
font-size:0.7vw;letter-spacing:0.12em;text-transform:uppercase;
color:rgba(212,176,122,0.95);font-weight:800;margin-bottom:0.3vh;
}
.blog-side-service-title{
font-size:1vw;font-weight:700;line-height:1.3;color:#fff;
}
.blog-side-service-arrow{
font-size:1.2vw;color:var(--gold);flex-shrink:0;
transition:transform .25s;
}
.blog-side-service:hover .blog-side-service-arrow{transform:translateX(4px)}
.blog-form-card .card-body{
padding:3vh 2vw 3vh !important;
}
.blog-form-card h3{font-size:1.5vw !important}
.blog-form-card .card-desc{font-size:0.9vw !important}
/* Похожие статьи */
.blog-related-wrap{
padding:6vw 4vw;
margin:8vh var(--side-pad) 8vh;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.blog-related-head{
display:flex;align-items:end;justify-content:space-between;
gap:3vw;margin-bottom:5vh;flex-wrap:wrap;
}
.blog-related-head-left{max-width:55vw}
.blog-related-head .section-kicker{margin-bottom:1.5vh}
.blog-related-title{
font-size:3vw;font-weight:800;line-height:1.1;
letter-spacing:-0.025em;color:var(--ink-dk);margin:0;
}
.blog-related-title em{font-style:normal;color:var(--burgundy)}
.blog-related-grid{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5vw;
}
.cases-cta--mobile{display:none}
/* === АДАПТИВ blog-single — Планшет === */
@media (max-width:1199px){
.blog-single-page{padding-bottom:0}
.blog-single-hero{
margin:8px 0 0;
border-radius:20px;
border-left:none;border-right:none;
}
.blog-single-hero-cover{aspect-ratio:16/8}
.blog-single-hero-top{
left:28px;top:32px;right:28px;gap:10px;
}
.blog-single-hero-top .breadcrumbs{font-size:11px;gap:6px}
.blog-single-hero-top .breadcrumbs a,
.blog-single-hero-top .breadcrumbs .current{
padding:5px 11px;font-size:11px;
}
.blog-single-tags{gap:8px}
.blog-single-rubric{font-size:11px;padding:5px 12px}
.blog-single-hero-bottom{
left:28px;bottom:32px;right:28px;
max-width:none;
}
.blog-single-title{font-size:28px;line-height:1.1;margin-bottom:10px}
.blog-single-sub{font-size:14.5px;line-height:1.5;max-width:none;margin-bottom:14px}
.blog-single-meta{gap:18px;font-size:13px}
.blog-single-meta svg{width:14px;height:14px}
.blog-single-body{
grid-template-columns:1fr;gap:12px;
margin:6vh 0 0;
}
.blog-single-content{
padding:32px 28px;border-radius:20px;
border-left:none;border-right:none;
font-size:15.5px;line-height:1.75;
}
.blog-single-content h2{font-size:24px;margin:32px 0 16px}
.blog-single-content h3{font-size:20px;margin:24px 0 14px}
.blog-single-content h4{font-size:17px;margin:18px 0 10px}
.blog-single-content blockquote{padding:18px 22px;font-size:15px}
.blog-single-content pre{font-size:13.5px;padding:18px}
.blog-single-content table{font-size:14px}
.blog-single-side{
flex-direction:column;gap:12px;
padding:0 12px;
}
.blog-side-service{padding:16px 18px;gap:14px;border-radius:18px}
.blog-side-service-icon{width:42px;height:42px;border-radius:11px}
.blog-side-service-icon svg{width:20px;height:20px}
.blog-side-service-kicker{font-size:10.5px}
.blog-side-service-title{font-size:14.5px}
.blog-side-service-arrow{font-size:18px}
.blog-form-card{
border-left:none;border-right:none;border-radius:18px;
}
.blog-form-card .card-body{padding:24px 22px !important}
.blog-form-card h3{font-size:20px !important}
.blog-form-card .card-desc{font-size:13.5px !important}
.blog-related-wrap{
margin:6vh 0 0;
padding:32px 28px;border-radius:20px;
border-left:none;border-right:none;
}
.blog-related-head{
margin-bottom:24px;
flex-direction:column;align-items:flex-start;gap:0;
}
.blog-related-head-left{max-width:none}
.blog-related-title{font-size:30px}
/* На планшете — карусель карточек, расширяется за края блока */
.blog-related-grid{
display:flex;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;
gap:12px;
padding-bottom:8px;
scrollbar-width:none;
/* Расширяем за края белого блока */
margin-left:-28px;
margin-right:-28px;
scroll-padding-left:28px;
}
.blog-related-grid::-webkit-scrollbar{display:none}
.blog-related-grid > .blog-card-archive{
flex:0 0 auto;
width:60%;
max-width:380px;
scroll-snap-align:start;
}
/* Первая карточка — отступ слева чтоб не прилипла к краю */
.blog-related-grid > .blog-card-archive:first-child{margin-left:28px}
.blog-related-grid > .blog-card-archive:last-child{margin-right:28px}
/* Скрыть верхнюю кнопку, показать мобильную */
.blog-related-head .cases-cta:not(.cases-cta--mobile){display:none}
.cases-cta--mobile{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
margin-top:18px;width:100%;
}
}
/* === АДАПТИВ blog-single — Мобила === */
@media (max-width:767px){
.blog-single-hero{
margin:6px 0 0;
border-radius:16px;
}
.blog-single-hero-cover{aspect-ratio:4/5;min-height:0}
.blog-single-hero-top{
left:22px;top:28px;right:22px;gap:8px;
}
.blog-single-hero-top .breadcrumbs{font-size:10.5px;gap:4px;flex-wrap:nowrap;overflow:hidden}
.blog-single-hero-top .breadcrumbs a,
.blog-single-hero-top .breadcrumbs .current{padding:3px 8px;font-size:10.5px}
.blog-single-hero-top .breadcrumbs .current{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
min-width:0;flex:1;
}
.blog-single-rubric{font-size:10px;padding:4px 10px;letter-spacing:0.08em}
.blog-single-hero-bottom{
left:22px;bottom:28px;right:22px;
max-width:none;
}
.blog-single-title{font-size:22px;line-height:1.12;margin-bottom:8px}
.blog-single-sub{font-size:13.5px;line-height:1.5;margin-bottom:12px}
.blog-single-meta{gap:14px;font-size:12px}
.blog-single-meta svg{width:13px;height:13px}
.blog-single-body{
margin:28px 0 0;
gap:10px;
}
.blog-single-content{
padding:28px 22px;border-radius:16px;
font-size:15px;line-height:1.7;
}
.blog-single-content h2{font-size:20px;margin:24px 0 12px}
.blog-single-content h3{font-size:17px;margin:18px 0 10px}
.blog-single-content h4{font-size:15.5px}
.blog-single-content blockquote{padding:16px 18px;font-size:14.5px}
.blog-single-content pre{font-size:12.5px;padding:14px}
.blog-single-side{gap:10px;padding:0 12px}
.blog-side-service{padding:14px 16px;gap:12px;border-radius:14px}
.blog-side-service-icon{width:38px;height:38px;border-radius:10px}
.blog-side-service-icon svg{width:18px;height:18px}
.blog-side-service-kicker{font-size:9.5px}
.blog-side-service-title{font-size:13.5px}
.blog-side-service-arrow{font-size:16px}
.blog-form-card{border-radius:14px}
.blog-form-card .card-body{padding:22px 18px !important}
.blog-form-card h3{font-size:18px !important}
.blog-related-wrap{
margin:28px 0 0;
padding:28px 22px;border-radius:16px;
}
.blog-related-title{font-size:22px}
/* Карусель — расширяется за края блока */
.blog-related-grid{
margin-left:-22px;
margin-right:-22px;
scroll-padding-left:22px;
}
.blog-related-grid > .blog-card-archive{width:84%;max-width:none}
.blog-related-grid > .blog-card-archive:first-child{margin-left:22px}
.blog-related-grid > .blog-card-archive:last-child{margin-right:22px}
}
/* ============================================================
СТРАНИЦА КОНТАКТОВ /kontakty/
Структура полностью зеркалит кейс/блог-статью
============================================================ */
.kontakty-page{padding:0 0 8vh}
/* HERO — копия .case-hero / .blog-single-hero */
.kontakty-hero{
position:relative;
margin:var(--hdr-gap) var(--side-pad) 0;
border-radius:var(--rad-lg);
overflow:hidden;
background:var(--ink-dk);
border:1px solid var(--divider);
box-shadow:
0 24px 60px rgba(15,17,21,0.10),
0 6px 18px rgba(15,17,21,0.06);
}
.kontakty-hero-cover{
position:relative;
aspect-ratio:21/8;
background-color:#2a1810;
background-size:cover;
background-position:center;
}
.kontakty-hero-cover.cover-loading{filter:blur(30px);transform:scale(1.02)}
.kontakty-hero-cover.cover-loaded{filter:none;transform:none;transition:filter .8s ease, transform .8s ease}
.kontakty-hero-cover::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(ellipse at 30% 60%,rgba(176,141,87,0.30) 0%,transparent 55%),
radial-gradient(ellipse at 70% 30%,rgba(122,47,60,0.25) 0%,transparent 50%);
pointer-events:none;
}
.kontakty-hero-overlay{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.10) 30%,rgba(0,0,0,0.65) 75%,rgba(0,0,0,0.86) 100%);
pointer-events:none;
}
/* Верхняя часть hero — крошки */
.kontakty-hero-top{
position:absolute;left:4vw;top:5vh;right:4vw;
z-index:3;
}
.kontakty-hero-top .breadcrumbs{
margin:0;display:flex;flex-wrap:wrap;gap:0.4vw;
}
.kontakty-hero-top .breadcrumbs a,
.kontakty-hero-top .breadcrumbs .current{
background:rgba(255,255,255,0.12);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,0.16);
color:#fff;
padding:0.4vw 0.9vw;
border-radius:100px;
font-size:0.8vw;
}
.kontakty-hero-top .breadcrumbs a{transition:background .25s}
.kontakty-hero-top .breadcrumbs a:hover{background:rgba(255,255,255,0.22)}
.kontakty-hero-top .breadcrumbs .sep{color:rgba(255,255,255,0.3);padding:0 0.2vw}
/* Нижняя часть hero — заголовок (выше stats полосы) */
.kontakty-hero-bottom{
position:absolute;left:4vw;bottom:calc(10vh + 4vh);right:4vw;
z-index:2;
max-width:75%;
}
.kontakty-hero-kicker{
font-size:0.78vw;letter-spacing:0.18em;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:1.2vh;
display:flex;align-items:center;gap:0.6vw;
}
.kontakty-hero-kicker::before{
content:"";display:inline-block;width:1.6vw;height:1px;background:var(--gold);
}
.kontakty-hero-title{
font-size:3.4vw;font-weight:900;
letter-spacing:-0.025em;line-height:1.05;
color:#fff;margin:0 0 1.6vh;
text-shadow:0 2px 16px rgba(0,0,0,0.5);
}
.kontakty-hero-sub{
font-size:1.05vw;line-height:1.55;
color:rgba(255,255,255,0.88);
margin:0 0 2vh;max-width:80%;
font-weight:500;
text-shadow:0 1px 8px rgba(0,0,0,0.5);
}
.kontakty-hero-meta{
display:flex;flex-wrap:wrap;gap:1.4vw;
font-size:0.85vw;color:rgba(255,255,255,0.85);
margin:0;
}
.kontakty-hero-meta-item{
display:inline-flex;align-items:center;gap:0.4vw;
padding:0.5vh 0.9vw;
background:rgba(255,255,255,0.10);
border:1px solid rgba(255,255,255,0.16);
border-radius:100px;
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
.kontakty-hero-meta-item svg{
width:0.95vw;height:0.95vw;min-width:14px;min-height:14px;
color:var(--gold);
}
.kontakty-hero-meta-item--off{
color:rgba(255,255,255,0.55);
}
/* Stats — золотистая полоса внизу */
.kontakty-hero-stats{
position:absolute;left:0;right:0;bottom:0;
z-index:3;
display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
padding:1.4vw 2vw;
background:linear-gradient(135deg, rgba(176,141,87,0.92) 0%, rgba(176,141,87,0.86) 100%);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border-top:1px solid rgba(255,255,255,0.20);
}
.kontakty-hero-stat{
padding:0 1vw;
border-right:1px solid rgba(255,255,255,0.20);
}
.kontakty-hero-stat:last-child{border-right:none}
.kontakty-hero-stat .lbl{
font-size:0.7vw;letter-spacing:0.12em;text-transform:uppercase;
color:rgba(255,255,255,0.85);font-weight:700;margin-bottom:0.3vh;
}
.kontakty-hero-stat .val{
font-size:1.15vw;font-weight:800;color:#fff;
line-height:1.2;text-decoration:none;display:block;
}
a.kontakty-hero-stat .val,
.kontakty-hero-stat a.val{transition:color .2s}
.kontakty-hero-stat a.val:hover{color:#fff;text-decoration:underline}
/* ============================================================
2 КОЛОНКИ: контакты + форма (копия .case-detail)
============================================================ */
.kontakty-detail{
display:grid;
grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
gap:1vw;
margin:8vh var(--side-pad) 0;
align-items:stretch;
}
.kontakty-detail-main{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
display:flex;flex-direction:column;
}
/* Карточки контактов растянуты, кнопки месс. снизу */
/* Карточки контактов остаются вверху — без margin-bottom */
.kontakty-detail-main .kontakty-cards{margin-bottom:3vh}
.kontakty-detail-head{margin-bottom:4vh}
.kontakty-detail-head .section-kicker{margin-bottom:1.5vh}
.kontakty-detail-title{
font-size:2.4vw;font-weight:800;
letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0 0 2vh;
}
.kontakty-detail-lead{
font-size:1vw;line-height:1.65;color:var(--ink);
margin:0;
}
/* Карточки контактов */
.kontakty-cards{
display:grid;grid-template-columns:1fr 1fr;
gap:1vw;
margin-bottom:3vh;
}
.kontakty-card{
display:flex;align-items:flex-start;gap:1vw;
padding:1.6vw 1.4vw;
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:var(--rad-md);
text-decoration:none;color:inherit;
transition:transform .25s, border-color .25s, box-shadow .25s;
}
.kontakty-card:not(.kontakty-card--static){cursor:pointer}
.kontakty-card:not(.kontakty-card--static):hover{
transform:translateY(-3px);
border-color:rgba(122,47,60,0.30);
box-shadow:0 12px 32px rgba(15,17,21,0.08);
background:#fff;
}
.kontakty-card-icon{
flex-shrink:0;width:2.6vw;height:2.6vw;min-width:38px;min-height:38px;
display:flex;align-items:center;justify-content:center;
background:rgba(122,47,60,0.08);
border-radius:12px;color:var(--burgundy);
transition:background .25s;
}
.kontakty-card-icon svg{
width:1.3vw;height:1.3vw;min-width:20px;min-height:20px;
}
.kontakty-card:not(.kontakty-card--static):hover .kontakty-card-icon{
background:var(--burgundy);color:#fff;
}
.kontakty-card-body{flex:1;min-width:0}
.kontakty-card-label{
font-size:0.75vw;letter-spacing:0.1em;text-transform:uppercase;
color:var(--mute);font-weight:700;margin-bottom:0.5vh;
}
.kontakty-card-value{
font-size:1.15vw;font-weight:800;color:var(--ink-dk);
line-height:1.25;margin-bottom:0.5vh;
word-break:break-word;
}
.kontakty-card-hint{
font-size:0.82vw;color:var(--mute);line-height:1.4;
}
/* Мессенджеры */
.kontakty-messengers{
display:flex;align-items:center;gap:1.2vw;flex-wrap:wrap;
padding:2vh 0 0;border-top:1px solid var(--divider);
margin-top:auto; /* прижимает блок к низу .kontakty-detail-main (который flex column) */
}
.kontakty-messengers-label{
font-size:0.85vw;color:var(--mute);font-weight:600;
}
.kontakty-messengers-list{
display:flex;gap:0.6vw;flex-wrap:wrap;
}
.kontakty-messenger{
display:inline-flex;align-items:center;gap:0.5vw;
padding:0.7vw 1.2vw;
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:100px;
font-size:0.85vw;font-weight:700;
color:var(--ink-dk);text-decoration:none;
transition:transform .25s, background .25s, border-color .25s, color .25s;
}
.kontakty-messenger svg{
width:0.95vw;height:0.95vw;min-width:14px;min-height:14px;
color:var(--burgundy);transition:color .25s;
}
.kontakty-messenger:hover{
background:var(--burgundy);
border-color:var(--burgundy);
color:#fff;
transform:translateY(-1px);
}
.kontakty-messenger:hover svg{color:var(--gold)}
/* Тёмная карточка реквизитов (PDF) — стиль как .case-court-side */
.kontakty-pdf{
display:flex;align-items:center;gap:1vw;
background:linear-gradient(135deg, #15161A 0%, #2C2D31 100%);
border-radius:var(--rad-md);
padding:2vh 1.6vw;
text-decoration:none;color:#fff;
transition:transform .25s, box-shadow .25s;
box-shadow:0 2px 10px rgba(15,17,21,0.10);
}
.kontakty-pdf:hover{
transform:translateY(-2px);
box-shadow:0 14px 40px rgba(15,17,21,0.18);
}
.kontakty-pdf-icon{
width:3vw;height:3vw;min-width:42px;min-height:42px;
flex-shrink:0;
background:rgba(176,141,87,0.2);
border-radius:12px;
display:flex;align-items:center;justify-content:center;
color:var(--gold);
}
.kontakty-pdf-icon svg{
width:1.4vw;height:1.4vw;min-width:20px;min-height:20px;
}
.kontakty-pdf-content{flex:1;min-width:0}
.kontakty-pdf-kicker{
font-size:0.65vw;letter-spacing:0.12em;text-transform:uppercase;
color:rgba(212,176,122,0.95);font-weight:800;margin-bottom:0.3vh;
}
.kontakty-pdf-title{
font-size:0.92vw;font-weight:700;line-height:1.3;color:#fff;
margin-bottom:0.2vh;
}
.kontakty-pdf-meta{
font-size:0.78vw;color:rgba(255,255,255,0.55);
}
.kontakty-pdf-arrow{
font-size:1.2vw;color:var(--gold);flex-shrink:0;
transition:transform .25s;
}
.kontakty-pdf:hover .kontakty-pdf-arrow{transform:translateY(3px)}
/* SIDEBAR — форма + PDF */
.kontakty-detail-side{
display:flex;flex-direction:column;gap:1vw;
/* align-items: stretch у grid сделает колонку растянутой по высоте */
}
/* Форма растягивается чтобы PDF-карточка ушла вниз */
.kontakty-detail-side .kontakty-form-card{flex:1;display:flex}
.kontakty-detail-side .kontakty-form-card .card-body{flex:1;display:flex;flex-direction:column}
.kontakty-detail-side .kontakty-form-card .card-form{flex:1;display:flex;flex-direction:column}
.kontakty-detail-side .kontakty-form-card .card-form-status{margin-top:auto}
.kontakty-form-card .card-body{
padding:3vh 2vw 3vh !important;
}
.kontakty-form-card h3{font-size:1.5vw !important}
.kontakty-form-card .card-desc{font-size:0.9vw !important}
.kontakty-form-card textarea{
width:100%;
resize:vertical;min-height:90px;
padding:0.9vw 1vw;
border:1px solid var(--divider);border-radius:14px;
font:inherit;font-size:0.95vw;
background:#FAFAF9;
transition:border-color .2s, background .2s;
}
.kontakty-form-card textarea:focus{
outline:none;border-color:var(--burgundy);background:#fff;
}
/* ============================================================
КАРТА
============================================================ */
.kontakty-map-wrap{
margin:8vh var(--side-pad) 0;
padding:6vw 4vw;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.kontakty-map-head{margin-bottom:4vh}
.kontakty-map-head .section-kicker{margin-bottom:1.5vh}
.kontakty-map-title{
font-size:2.4vw;font-weight:800;
letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0;
}
.kontakty-map{
width:100%;
height:50vh;min-height:380px;
border-radius:var(--rad-md);
overflow:hidden;
background:#EDEFF2;
border:1px solid var(--divider);
position:relative;
}
.kontakty-map-fallback{
padding:3vh 3vw;text-align:center;color:var(--mute);
font-size:1vw;line-height:1.6;
}
/* ============================================================
Кастомная метка на карте — белый круг с тенью + вензель
============================================================ */
/* Обёртка — точка нулевого размера на координатах карты.
Круг абсолютно позиционирован вокруг неё. */
.ye-marker{
position:relative;
width:0;height:0;
}
.ye-marker-circle{
position:absolute;left:0;top:0;
transform:translate(-50%,-50%);
width:56px;height:56px;
background:#fff;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
padding:11px;
box-sizing:border-box;
box-shadow:
0 6px 18px rgba(15,17,21,0.30),
0 2px 6px rgba(15,17,21,0.20);
cursor:pointer;
transition:transform .25s, box-shadow .25s;
}
.ye-marker-circle:hover{
transform:translate(-50%,-50%) scale(1.06);
box-shadow:
0 10px 26px rgba(15,17,21,0.38),
0 3px 8px rgba(15,17,21,0.25);
}
.ye-marker-circle svg{
width:100%;height:100%;display:block;
color:var(--burgundy);
}
/* ==== Балун Yandex Maps — наш фирменный layout .ye-balloon ====
Скрываем все стандартные обёртки Яндекса (фон, рамку, тень, крестик),
рендерим только наш .ye-balloon. */
.kontakty-map ymaps[class*="-balloon"],
.kontakty-map ymaps[class*="-balloon__layout"],
.kontakty-map ymaps[class*="-balloon__content"]{
background:transparent !important;
border:none !important;
box-shadow:none !important;
padding:0 !important;
margin:0 !important;
filter:none !important;
}
/* Скрываем стандартный крестик закрытия Яндекса */
.kontakty-map ymaps[class*="-balloon__close"],
.kontakty-map ymaps[class*="-balloon__close-button"]{display:none !important}
/* Прячем стандартный «хвостик» Яндекса полностью — у нас свой стиль */
.kontakty-map ymaps[class*="-balloon__tail"]{display:none !important}
/* ====== «Жидкое стекло» (frosted glass / liquid glass) ====== */
.ye-balloon{
position:relative;
width:320px;max-width:80vw;
background:rgba(255,255,255,0.72);
-webkit-backdrop-filter:blur(22px) saturate(180%);
backdrop-filter:blur(22px) saturate(180%);
border-radius:20px;
border:1px solid rgba(255,255,255,0.55);
box-shadow:
0 22px 60px rgba(15,17,21,0.28),
inset 0 1px 0 rgba(255,255,255,0.85),
inset 0 -1px 0 rgba(15,17,21,0.04);
overflow:hidden;
font-family:inherit;
}
.ye-balloon-close{
position:absolute;top:10px;right:10px;
width:28px;height:28px;
background:rgba(255,255,255,0.30);
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,0.45);
border-radius:50%;
color:#fff;
font-size:13px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:background .2s, color .2s, transform .2s;
z-index:3;
font-weight:700;
}
.ye-balloon-close svg{width:12px;height:12px;display:block}
.ye-balloon-close:hover{
background:rgba(255,255,255,0.45);
transform:rotate(90deg);
}
/* Шапка — бордово-золотой градиент с прозрачностью для эффекта «через стекло» */
.ye-balloon-head{
padding:18px 22px 16px;
background:linear-gradient(135deg, rgba(92,31,43,0.95) 0%, rgba(122,47,60,0.95) 100%);
color:#fff;
position:relative;
overflow:hidden;
}
.ye-balloon-head::after{
content:"";position:absolute;left:0;right:0;bottom:0;
height:2px;
background:linear-gradient(90deg, transparent 0%, #B08D57 50%, transparent 100%);
}
.ye-balloon-kicker{
font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
font-weight:800;color:rgba(212,176,122,0.95);
margin-bottom:4px;
}
.ye-balloon-title{
font-size:18px;font-weight:800;line-height:1.2;color:#fff;
letter-spacing:-0.01em;
text-shadow:0 1px 2px rgba(0,0,0,0.18);
}
/* Тело */
.ye-balloon-body{
padding:14px 22px 16px;
display:flex;flex-direction:column;gap:10px;
}
.ye-balloon-row{
display:flex;align-items:flex-start;gap:10px;
font-size:13.5px;line-height:1.45;color:var(--ink-dk);
font-weight:500;
}
.ye-balloon-ic{
width:16px;height:16px;flex-shrink:0;
color:var(--burgundy);margin-top:2px;
}
.ye-balloon-link{
color:var(--burgundy);font-weight:700;
text-decoration:none;border-bottom:1px solid transparent;
transition:border-color .2s;
}
.ye-balloon-link:hover{border-bottom-color:var(--burgundy)}
/* Подвал */
.ye-balloon-foot{
padding:0 22px 18px;
}
.ye-balloon-cta{
display:inline-flex;align-items:center;gap:6px;
padding:9px 16px;
background:rgba(255,255,255,0.55);
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,0.7);
border-radius:100px;
font-size:12.5px;font-weight:700;
color:var(--ink-dk);
text-decoration:none;
transition:background .2s, border-color .2s, color .2s, transform .2s;
}
.ye-balloon-cta svg{
width:13px;height:13px;color:var(--gold);
transition:transform .25s;
}
.ye-balloon-cta:hover{
background:var(--burgundy);
border-color:var(--burgundy);
color:#fff;
transform:translateX(2px);
}
.ye-balloon-cta:hover svg{color:var(--gold)}
/* Skip extra section */
.kontakty-extra{
margin:8vh var(--side-pad) 0;
padding:4vw 4vw;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
font-size:1vw;line-height:1.7;color:var(--ink);
}
/* ============================================================
АДАПТИВ — Планшет (768-1199)
============================================================ */
@media (max-width:1199px){
.kontakty-page{padding-bottom:0}
/* Hero */
.kontakty-hero{
margin:8px 0 0;
border-radius:20px;
border-left:none;border-right:none;
}
.kontakty-hero-cover{aspect-ratio:16/9}
.kontakty-hero-top{left:28px;top:32px;right:28px}
.kontakty-hero-top .breadcrumbs{font-size:11px;gap:6px}
.kontakty-hero-top .breadcrumbs a,
.kontakty-hero-top .breadcrumbs .current{padding:5px 11px;font-size:11px}
.kontakty-hero-bottom{
left:28px;bottom:90px;right:28px;
max-width:none;
}
.kontakty-hero-kicker{font-size:11px;margin-bottom:10px}
.kontakty-hero-kicker::before{width:18px}
.kontakty-hero-title{font-size:34px;line-height:1.05;margin-bottom:10px}
.kontakty-hero-sub{font-size:14.5px;line-height:1.5;max-width:none}
.kontakty-hero-stats{
padding:14px 16px;
grid-template-columns:1fr 1fr 1fr;
}
.kontakty-hero-stat{padding:0 10px}
.kontakty-hero-stat .lbl{font-size:9.5px;letter-spacing:0.1em;margin-bottom:2px}
.kontakty-hero-stat .val{font-size:13px;line-height:1.2}
/* Detail block */
.kontakty-detail{
grid-template-columns:1fr;gap:12px;
margin:6vh 0 0;
}
.kontakty-detail-main{
padding:32px 28px;border-radius:20px;
border-left:none;border-right:none;
}
.kontakty-detail-head{margin-bottom:24px}
.kontakty-detail-title{font-size:28px;line-height:1.1;margin-bottom:12px}
.kontakty-detail-lead{font-size:15px;line-height:1.6}
.kontakty-cards{
grid-template-columns:1fr 1fr;gap:12px;
margin-bottom:24px;
}
.kontakty-card{padding:18px 18px;gap:14px;border-radius:16px}
.kontakty-card-icon{width:42px;height:42px;border-radius:11px}
.kontakty-card-icon svg{width:20px;height:20px}
.kontakty-card-label{font-size:10.5px;margin-bottom:4px}
.kontakty-card-value{font-size:15.5px;line-height:1.25;margin-bottom:4px}
.kontakty-card-hint{font-size:12.5px}
.kontakty-messengers{padding:16px 0 0;gap:14px}
.kontakty-messengers-label{font-size:13px}
.kontakty-messengers-list{gap:8px}
.kontakty-messenger{padding:9px 16px;font-size:13px;gap:8px}
.kontakty-messenger svg{width:14px;height:14px}
.kontakty-pdf{padding:18px;gap:14px;border-radius:18px}
.kontakty-pdf-icon{width:46px;height:46px;border-radius:12px}
.kontakty-pdf-icon svg{width:22px;height:22px}
.kontakty-pdf-kicker{font-size:10.5px;margin-bottom:3px}
.kontakty-pdf-title{font-size:15px;margin-bottom:4px}
.kontakty-pdf-meta{font-size:12px;line-height:1.4}
.kontakty-pdf-arrow{font-size:22px}
.kontakty-rekvizity{font-size:12.5px;gap:6px}
.kontakty-detail-side{padding:0;gap:12px}
.kontakty-detail-side .kontakty-pdf{margin:0 5px}
.kontakty-form-card{
border-left:none;border-right:none;border-radius:18px;
}
.kontakty-form-card .card-body{padding:24px 22px !important}
.kontakty-form-card h3{font-size:20px !important}
.kontakty-form-card .card-desc{font-size:13.5px !important}
.kontakty-form-card textarea{font-size:14px;padding:12px 14px}
/* Карта */
.kontakty-map-wrap{
margin:6vh 0 0;padding:32px 28px;
border-radius:20px;border-left:none;border-right:none;
}
.kontakty-map-head{margin-bottom:20px}
.kontakty-map-title{font-size:28px}
.kontakty-map{height:42vh;min-height:340px;border-radius:16px}
.kontakty-extra{
margin:6vh 0 0;padding:24px 28px;
border-radius:20px;border-left:none;border-right:none;
font-size:14.5px;
}
}
/* ============================================================
АДАПТИВ — Мобила (≤767)
============================================================ */
@media (max-width:767px){
.kontakty-hero{
margin:6px 0 0;
border-radius:16px;
}
.kontakty-hero-cover{aspect-ratio:4/5;min-height:0}
.kontakty-hero-top{left:22px;top:28px;right:22px}
.kontakty-hero-top .breadcrumbs{
font-size:10.5px;gap:4px;
flex-wrap:nowrap;
max-width:100%;
}
.kontakty-hero-top .breadcrumbs a,
.kontakty-hero-top .breadcrumbs .current{
padding:3px 8px;font-size:10.5px;
white-space:nowrap;
min-width:0;
overflow:hidden;text-overflow:ellipsis;
}
.kontakty-hero-top .breadcrumbs .sep{flex-shrink:0}
.kontakty-hero-bottom{
left:22px;bottom:130px;right:22px;
}
.kontakty-hero-kicker{font-size:10px;margin-bottom:8px}
.kontakty-hero-title{font-size:26px;line-height:1.1;margin-bottom:8px}
.kontakty-hero-sub{font-size:13px;line-height:1.5}
.kontakty-hero-stats{
grid-template-columns:1fr;
padding:12px 14px;gap:0;
}
.kontakty-hero-stat{
padding:8px 0;
border-right:none;
border-bottom:1px solid rgba(255,255,255,0.20);
}
.kontakty-hero-stat:last-child{border-bottom:none}
.kontakty-hero-stat .lbl{font-size:9px;margin-bottom:2px}
.kontakty-hero-stat .val{font-size:13px}
/* Detail */
.kontakty-detail{margin:28px 0 0;gap:10px}
.kontakty-detail-main{padding:28px 22px;border-radius:16px}
.kontakty-detail-head{margin-bottom:20px}
.kontakty-detail-title{font-size:22px;line-height:1.1;margin-bottom:10px}
.kontakty-detail-lead{font-size:14px;line-height:1.6}
.kontakty-cards{grid-template-columns:1fr;gap:10px;margin-bottom:20px}
.kontakty-card{padding:16px;gap:12px;border-radius:14px}
.kontakty-card-icon{width:38px;height:38px;border-radius:10px}
.kontakty-card-icon svg{width:18px;height:18px}
.kontakty-card-label{font-size:10px}
.kontakty-card-value{font-size:14.5px}
.kontakty-card-hint{font-size:12px}
.kontakty-messengers{
flex-direction:column;align-items:flex-start;gap:10px;
padding:14px 0 0;
}
.kontakty-messengers-list{gap:6px}
.kontakty-messenger{padding:8px 13px;font-size:12.5px}
.kontakty-pdf{padding:14px;gap:12px;border-radius:14px}
.kontakty-pdf-icon{width:40px;height:40px;border-radius:10px}
.kontakty-pdf-icon svg{width:20px;height:20px}
.kontakty-pdf-kicker{font-size:9.5px}
.kontakty-pdf-title{font-size:14px}
.kontakty-pdf-meta{font-size:11.5px}
.kontakty-pdf-arrow{font-size:20px}
.kontakty-rekvizity{font-size:12px;gap:6px}
.kontakty-rekvizity-row{flex-direction:column;gap:2px}
.kontakty-detail-side{padding:0;gap:10px}
.kontakty-detail-side .kontakty-pdf{margin:0 5px}
.kontakty-form-card{border-radius:14px}
.kontakty-form-card .card-body{padding:22px 18px !important}
.kontakty-form-card h3{font-size:18px !important}
.kontakty-form-card textarea{font-size:14px;padding:11px 13px;min-height:80px}
.kontakty-map-wrap{margin:28px 0 0;padding:28px 22px;border-radius:16px}
.kontakty-map-title{font-size:22px}
.kontakty-map{height:80vw;min-height:340px;border-radius:14px}
/* Балун компактнее на мобиле — по ширине карты с отступами */
.ye-balloon{
width:calc(100vw - 80px);
max-width:280px;
border-radius:16px;
}
.ye-balloon-head{padding:14px 18px 12px}
.ye-balloon-title{font-size:16px}
.ye-balloon-kicker{font-size:9.5px}
.ye-balloon-body{padding:12px 18px 14px;gap:8px}
.ye-balloon-row{font-size:12.5px;gap:8px}
.ye-balloon-ic{width:14px;height:14px}
.ye-balloon-foot{padding:0 18px 14px}
.ye-balloon-cta{padding:8px 14px;font-size:11.5px}
.ye-balloon-close{width:26px;height:26px;font-size:12px;top:8px;right:8px}
/* Метка чуть меньше на мобиле */
.ye-marker{width:0;height:0}
.ye-marker-circle{width:46px;height:46px;padding:9px}
.kontakty-extra{margin:28px 0 0;padding:24px 22px;border-radius:16px;font-size:14px}
}
/* ============================================================
СТРАНИЦА СТОИМОСТЬ /stoimost/
Структура зеркалит кейсы/блог
============================================================ */
.stoimost-page{padding:0 0 8vh}
/* === HERO (без обложки, чистый стиль) === */
.stoimost-hero{
margin:var(--hdr-gap) var(--side-pad) 0;
}
.stoimost-hero-inner{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:5vh 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
position:relative;
overflow:hidden;
}
.stoimost-hero-inner::before{
content:"";
position:absolute;left:0;top:0;
width:100%;height:6px;
background:linear-gradient(90deg, var(--burgundy) 0%, var(--gold) 100%);
}
.stoimost-hero-inner .breadcrumbs{margin-bottom:3vh}
.stoimost-hero-kicker{
font-size:0.78vw;letter-spacing:0.18em;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:1.5vh;
display:flex;align-items:center;gap:0.6vw;
}
.stoimost-hero-kicker::before{
content:"";display:inline-block;width:1.6vw;height:1px;background:var(--gold);
}
.stoimost-hero-title{
font-size:3.2vw;font-weight:900;
letter-spacing:-0.025em;line-height:1.05;
color:var(--ink-dk);margin:0 0 2vh;
}
.stoimost-hero-sub{
font-size:1.05vw;line-height:1.6;
color:var(--ink);margin:0;font-weight:500;
max-width:65%;
}
/* === КАЛЬКУЛЯТОР === */
.stoimost-calc{
margin:8vh var(--side-pad) 0;
}
.stoimost-calc-inner{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.stoimost-calc-head{margin-bottom:5vh;max-width:60%}
.stoimost-calc-head .section-kicker{margin-bottom:1.5vh}
.stoimost-calc-title{
font-size:2.4vw;font-weight:800;
letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0 0 2vh;
}
.stoimost-calc-lead{
font-size:1vw;line-height:1.65;color:var(--ink);margin:0;
}
.stoimost-calc-body{
display:grid;
grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
gap:2vw;
align-items:start;
}
/* Левая колонка — настройки */
.stoimost-calc-form{
display:flex;flex-direction:column;gap:3.2vh;
}
.stoimost-calc-group{display:flex;flex-direction:column;gap:1.4vh}
.stoimost-calc-label{
font-size:0.78vw;letter-spacing:0.12em;text-transform:uppercase;
color:var(--mute);font-weight:700;
}
/* Pills (категория) */
.stoimost-calc-pills{
display:flex;flex-wrap:wrap;gap:0.5vw;
}
.stoimost-pill{
padding:0.9vh 1.1vw;
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:100px;
font-size:0.85vw;font-weight:600;
color:var(--ink);cursor:pointer;
transition:background .2s, border-color .2s, color .2s, transform .2s;
}
.stoimost-pill:hover{
background:#fff;border-color:rgba(122,47,60,0.30);
color:var(--burgundy);
}
.stoimost-pill.is-active{
background:var(--burgundy);border-color:var(--burgundy);
color:#fff;
box-shadow:0 6px 18px rgba(122,47,60,0.20);
}
/* Сегменты (сумма иска, темп) */
.stoimost-calc-segments{
display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:0.4vw;
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:14px;
padding:0.4vw;
}
.stoimost-seg{
padding:1vh 0;
background:transparent;border:none;
border-radius:10px;
font-size:0.9vw;font-weight:600;
color:var(--ink);cursor:pointer;
transition:background .2s, color .2s;
}
.stoimost-seg:hover{color:var(--burgundy)}
.stoimost-seg.is-active{
background:#fff;color:var(--ink-dk);
box-shadow:0 2px 6px rgba(15,17,21,0.06);
}
/* Доп. услуги (чекбоксы) */
.stoimost-calc-extras{
display:flex;flex-direction:column;gap:0.6vh;
}
.stoimost-extra{
display:flex;align-items:center;gap:0.9vw;
padding:1.1vh 1.2vw;
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:14px;
cursor:pointer;
transition:background .2s, border-color .2s;
}
.stoimost-extra:hover{
background:#fff;border-color:rgba(122,47,60,0.20);
}
.stoimost-extra input{position:absolute;opacity:0;pointer-events:none}
.stoimost-extra-box{
flex-shrink:0;width:20px;height:20px;
border:1.5px solid var(--divider);
border-radius:6px;background:#fff;
display:flex;align-items:center;justify-content:center;
transition:background .2s, border-color .2s;
}
.stoimost-extra-box::after{
content:"";
width:10px;height:6px;
border-left:2px solid #fff;
border-bottom:2px solid #fff;
transform:rotate(-45deg) translateY(-1px);
opacity:0;
transition:opacity .2s;
}
.stoimost-extra input:checked + .stoimost-extra-box{
background:var(--burgundy);border-color:var(--burgundy);
}
.stoimost-extra input:checked + .stoimost-extra-box::after{opacity:1}
.stoimost-extra-text{flex:1;font-size:0.95vw;color:var(--ink-dk);font-weight:500}
.stoimost-extra-price{
font-size:0.85vw;color:var(--mute);font-weight:700;
}
.stoimost-extra input:checked ~ .stoimost-extra-price{color:var(--burgundy)}
/* Правая колонка — sticky результат */
.stoimost-calc-result{
position:sticky;top:12vh;
}
.stoimost-calc-result-card{
background:linear-gradient(135deg, #15161A 0%, #2C2D31 100%);
border-radius:var(--rad-lg);
padding:2.4vw 2vw;
color:#fff;
box-shadow:0 12px 36px rgba(15,17,21,0.16);
position:relative;overflow:hidden;
}
.stoimost-calc-result-card::before{
content:"";position:absolute;left:0;top:0;
width:100%;height:3px;
background:linear-gradient(90deg, var(--burgundy) 0%, var(--gold) 100%);
}
.stoimost-calc-result-kicker{
font-size:0.7vw;letter-spacing:0.14em;text-transform:uppercase;
color:rgba(212,176,122,0.95);font-weight:800;
margin-bottom:1.5vh;
}
.stoimost-calc-result-price{
display:flex;align-items:baseline;gap:0.5vw;
margin-bottom:0.8vh;
}
.stoimost-calc-result-prefix{
font-size:1.3vw;color:rgba(255,255,255,0.55);font-weight:600;
}
.stoimost-calc-result-value{
font-size:3vw;font-weight:900;color:#fff;
letter-spacing:-0.025em;line-height:1;
}
.stoimost-calc-result-hint{
font-size:0.8vw;color:rgba(255,255,255,0.55);line-height:1.4;
}
.stoimost-calc-result-divider{
height:1px;background:rgba(255,255,255,0.10);
margin:2.5vh 0;
}
.stoimost-calc-result-includes-label{
font-size:0.75vw;letter-spacing:0.12em;text-transform:uppercase;
color:rgba(212,176,122,0.85);font-weight:700;
margin-bottom:1.2vh;
}
.stoimost-calc-result-list{
list-style:none;padding:0;margin:0 0 2.5vh;
display:flex;flex-direction:column;gap:0.8vh;
}
.stoimost-calc-result-list li{
position:relative;padding-left:1.4vw;
font-size:0.92vw;color:rgba(255,255,255,0.85);
line-height:1.5;
}
.stoimost-calc-result-list li::before{
content:"";position:absolute;left:0;top:0.7vh;
width:0.5vw;height:0.5vw;min-width:6px;min-height:6px;
background:var(--gold);border-radius:50%;
}
.stoimost-calc-cta{
width:100%;
display:inline-flex;align-items:center;justify-content:center;gap:0.5vw;
padding:1.4vh 1.5vw;
background:var(--burgundy);
color:#fff;border:none;border-radius:100px;
font-size:0.95vw;font-weight:700;cursor:pointer;
transition:background .25s, transform .25s, box-shadow .25s;
}
.stoimost-calc-cta:hover{
background:var(--burgundy-dk);
transform:translateY(-2px);
box-shadow:0 14px 32px rgba(122,47,60,0.30);
}
.stoimost-calc-cta .arrow{
display:inline-block;
transition:transform .25s;
}
.stoimost-calc-cta:hover .arrow{transform:translateX(4px)}
/* === ТАРИФНЫЕ ПЛАНЫ === */
.stoimost-plans{
margin:8vh var(--side-pad) 0;
}
.stoimost-plans-inner{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.stoimost-plans-head{margin-bottom:5vh}
.stoimost-plans-head .section-kicker{margin-bottom:1.5vh}
.stoimost-plans-title{
font-size:2.4vw;font-weight:800;
letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0;
}
.stoimost-plans-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:1.5vw;align-items:stretch;
}
.stoimost-plan{
position:relative;
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:var(--rad-md);
padding:2.5vw 2vw;
display:flex;flex-direction:column;
transition:transform .25s, box-shadow .25s, border-color .25s;
}
.stoimost-plan:hover{
transform:translateY(-4px);
border-color:rgba(122,47,60,0.20);
box-shadow:0 14px 32px rgba(15,17,21,0.06);
}
.stoimost-plan.is-highlight{
background:#fff;
border:2px solid var(--burgundy);
box-shadow:0 14px 40px rgba(122,47,60,0.12);
}
.stoimost-plan.is-highlight:hover{
box-shadow:0 22px 56px rgba(122,47,60,0.20);
}
.stoimost-plan-badge{
position:absolute;top:-12px;left:50%;transform:translateX(-50%);
padding:5px 14px;
background:linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-dk) 100%);
color:#fff;border-radius:100px;
font-size:11px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;
box-shadow:0 4px 12px rgba(122,47,60,0.30);
white-space:nowrap;
}
.stoimost-plan-kicker{
font-size:0.72vw;letter-spacing:0.14em;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:1.2vh;
}
.stoimost-plan-title{
font-size:1.55vw;font-weight:800;line-height:1.15;
color:var(--ink-dk);margin:0 0 2vh;letter-spacing:-0.015em;
}
.stoimost-plan-price{
display:flex;align-items:baseline;gap:0.4vw;flex-wrap:wrap;
margin-bottom:1vh;
}
.stoimost-plan-price .value{
font-size:1.8vw;font-weight:900;color:var(--ink-dk);line-height:1;
letter-spacing:-0.02em;
}
.stoimost-plan-price .period{
font-size:0.85vw;color:var(--mute);font-weight:600;
}
.stoimost-plan-desc{
font-size:0.92vw;line-height:1.55;color:var(--ink);
margin:0 0 2.5vh;
}
.stoimost-plan-features{
list-style:none;padding:0;margin:0 0 3vh;
display:flex;flex-direction:column;gap:1vh;
}
.stoimost-plan-features li{
display:flex;align-items:flex-start;gap:0.7vw;
font-size:0.9vw;line-height:1.45;color:var(--ink-dk);
}
.stoimost-plan-features svg{
flex-shrink:0;width:14px;height:14px;
color:var(--burgundy);margin-top:0.4vh;
}
.stoimost-plan-cta{
margin-top:auto;
display:inline-flex;align-items:center;justify-content:center;gap:0.5vw;
padding:1.3vh 1.4vw;
background:#fff;
color:var(--ink-dk);
border:1.5px solid var(--ink-dk);
border-radius:100px;
font-size:0.92vw;font-weight:700;cursor:pointer;
transition:background .25s, color .25s, transform .25s, border-color .25s;
}
.stoimost-plan-cta:hover{
background:var(--ink-dk);color:#fff;
transform:translateY(-2px);
}
.stoimost-plan.is-highlight .stoimost-plan-cta{
background:var(--burgundy);
color:#fff;
border-color:var(--burgundy);
}
.stoimost-plan.is-highlight .stoimost-plan-cta:hover{
background:var(--burgundy-dk);border-color:var(--burgundy-dk);
}
.stoimost-plan-cta .arrow{transition:transform .25s}
.stoimost-plan-cta:hover .arrow{transform:translateX(4px)}
/* FAQ на странице Стоимость использует общий .faq стиль */
/* ============================================================
АДАПТИВ — Планшет (768-1199)
============================================================ */
@media (max-width:1199px){
.stoimost-page{padding-bottom:0}
/* Hero */
.stoimost-hero{margin:8px 0 0}
.stoimost-hero-inner{
padding:32px 28px;border-radius:20px;
border-left:none;border-right:none;
}
.stoimost-hero-inner .breadcrumbs{margin-bottom:18px}
.stoimost-hero-kicker{font-size:11px;margin-bottom:10px}
.stoimost-hero-kicker::before{width:18px}
.stoimost-hero-title{font-size:30px;line-height:1.1}
.stoimost-hero-sub{font-size:14.5px;max-width:none}
/* Калькулятор */
.stoimost-calc{margin:6vh 0 0}
.stoimost-calc-inner{
padding:32px 28px;border-radius:20px;
border-left:none;border-right:none;
}
.stoimost-calc-head{max-width:none;margin-bottom:24px}
.stoimost-calc-title{font-size:26px;margin-bottom:10px}
.stoimost-calc-lead{font-size:14.5px}
.stoimost-calc-body{
grid-template-columns:1fr;
gap:24px;
}
.stoimost-calc-form{gap:22px}
.stoimost-calc-label{font-size:11px}
.stoimost-calc-pills{gap:8px}
.stoimost-pill{padding:8px 14px;font-size:13px}
.stoimost-calc-segments{padding:4px}
.stoimost-seg{padding:10px 0;font-size:13px}
.stoimost-extra{padding:12px 14px;gap:12px}
.stoimost-extra-text{font-size:14px}
.stoimost-extra-price{font-size:12.5px}
.stoimost-calc-result{position:static;top:auto}
.stoimost-calc-result-card{padding:24px 22px;border-radius:18px}
.stoimost-calc-result-kicker{font-size:10.5px}
.stoimost-calc-result-prefix{font-size:18px}
.stoimost-calc-result-value{font-size:38px}
.stoimost-calc-result-hint{font-size:12.5px}
.stoimost-calc-result-divider{margin:20px 0}
.stoimost-calc-result-includes-label{font-size:11px;margin-bottom:10px}
.stoimost-calc-result-list li{
font-size:14px;padding-left:18px;
}
.stoimost-calc-result-list li::before{
width:7px;height:7px;top:8px;
}
.stoimost-calc-cta{padding:14px 18px;font-size:14px;gap:6px}
/* Тарифы */
.stoimost-plans{margin:6vh 0 0}
.stoimost-plans-inner{
padding:32px 28px;border-radius:20px;
border-left:none;border-right:none;
}
.stoimost-plans-head{margin-bottom:24px}
.stoimost-plans-title{font-size:26px}
/* Планы — карусель на планшете и мобиле */
.stoimost-plans-grid{
display:flex !important;
grid-template-columns:none;
gap:14px;
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;
scrollbar-width:none;
/* Расширяем за края белого блока */
margin-left:-28px;
margin-right:-28px;
padding:14px 0 8px; /* верх — для бейджа «Популярный» */
scroll-padding-left:28px;
}
.stoimost-plans-grid::-webkit-scrollbar{display:none}
.stoimost-plan{
flex:0 0 70%;
max-width:380px;
padding:24px 22px;border-radius:18px;
scroll-snap-align:start;
}
.stoimost-plans-grid > .stoimost-plan:first-child{margin-left:28px}
.stoimost-plans-grid > .stoimost-plan:last-child{margin-right:28px}
.stoimost-plan-kicker{font-size:10.5px}
.stoimost-plan-title{font-size:22px;margin-bottom:14px}
.stoimost-plan-price .value{font-size:28px}
.stoimost-plan-price .period{font-size:13px}
.stoimost-plan-desc{font-size:14px}
.stoimost-plan-features li{font-size:13.5px}
.stoimost-plan-cta{padding:13px 18px;font-size:13.5px}
/* FAQ */
.stoimost-faq{margin:6vh 0 0}
}
/* ============================================================
АДАПТИВ — Мобила (≤767)
============================================================ */
@media (max-width:767px){
.stoimost-hero{margin:6px 0 0}
.stoimost-hero-inner{padding:28px 22px;border-radius:16px}
.stoimost-hero-title{font-size:24px}
.stoimost-hero-sub{font-size:13.5px}
.stoimost-calc{margin:28px 0 0}
.stoimost-calc-inner{padding:28px 22px;border-radius:16px}
.stoimost-calc-title{font-size:22px}
.stoimost-calc-lead{font-size:14px}
.stoimost-calc-segments{
grid-template-columns:1fr 1fr;
}
.stoimost-seg{font-size:12.5px}
.stoimost-calc-pills{gap:10px}
.stoimost-pill{padding:8px 14px;font-size:12.5px}
.stoimost-extra{padding:11px 13px;flex-wrap:wrap}
.stoimost-extra-text{font-size:13.5px;min-width:0;flex:1}
.stoimost-extra-price{font-size:12px;flex-shrink:0}
.stoimost-calc-result-card{padding:22px 20px;border-radius:14px}
.stoimost-calc-result-prefix{font-size:16px}
.stoimost-calc-result-value{font-size:32px}
.stoimost-plans{margin:28px 0 0}
.stoimost-plans-inner{padding:28px 22px;border-radius:16px}
.stoimost-plans-title{font-size:22px}
/* Карусель тарифов на мобиле — расширяется за края (-22px) */
.stoimost-plans-grid{
margin-left:-22px;
margin-right:-22px;
scroll-padding-left:22px;
gap:12px;
}
.stoimost-plan{
flex:0 0 84%;
max-width:none;
padding:22px 20px;border-radius:14px;
}
.stoimost-plans-grid > .stoimost-plan:first-child{margin-left:22px}
.stoimost-plans-grid > .stoimost-plan:last-child{margin-right:22px}
.stoimost-plan-title{font-size:20px}
.stoimost-plan-price .value{font-size:24px}
.stoimost-faq{margin:28px 0 0}
}
/* ============================================================
СТРАНИЦА О КОМПАНИИ /o-kompanii/
============================================================ */
.okompanii-page{padding:0 0 8vh}
/* === HERO === */
.okompanii-hero{
position:relative;
margin:var(--hdr-gap) var(--side-pad) 0;
border-radius:var(--rad-lg);
overflow:hidden;
background:var(--white);
border:1px solid var(--divider);
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.okompanii-hero.has-photo{
background:var(--ink-dk);
box-shadow:0 24px 60px rgba(15,17,21,0.10);
}
.okompanii-hero-cover{
position:relative;
aspect-ratio:21/8;
background-color:#2a1810;
background-size:cover;
background-position:center;
}
.okompanii-hero-cover.cover-loading{filter:blur(30px);transform:scale(1.02)}
.okompanii-hero-cover.cover-loaded{filter:none;transform:none;transition:filter .8s ease, transform .8s ease}
.okompanii-hero-cover::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(ellipse at 30% 60%,rgba(176,141,87,0.30) 0%,transparent 55%),
radial-gradient(ellipse at 70% 30%,rgba(122,47,60,0.25) 0%,transparent 50%);
pointer-events:none;
}
.okompanii-hero-overlay{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.10) 30%,rgba(0,0,0,0.65) 75%,rgba(0,0,0,0.86) 100%);
}
/* Inner — text над cover (если фото) или просто на белом */
.okompanii-hero-inner{
padding:5vh 4vw;
position:relative;z-index:2;
}
.okompanii-hero.has-photo .okompanii-hero-inner{
position:absolute;left:0;right:0;bottom:5vw;
padding:0 2vw;
color:#fff;
}
.okompanii-hero-inner .breadcrumbs{margin-bottom:3vh}
.okompanii-hero.has-photo .breadcrumbs{
position:absolute;top:-22vw;left:0;
}
.okompanii-hero-kicker{
font-size:0.78vw;letter-spacing:0.18em;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:1.5vh;
display:flex;align-items:center;gap:0.6vw;
}
.okompanii-hero-kicker::before{
content:"";display:inline-block;width:1.6vw;height:1px;background:var(--gold);
}
.okompanii-hero-title{
font-size:3.4vw;font-weight:900;
letter-spacing:-0.025em;line-height:1.05;
color:var(--ink-dk);margin:0 0 2vh;
}
.okompanii-hero.has-photo .okompanii-hero-title{
color:#fff;text-shadow:0 2px 16px rgba(0,0,0,0.5);
}
.okompanii-hero-sub{
font-size:1.05vw;line-height:1.6;
color:var(--ink);margin:0;font-weight:500;
max-width:75%;
}
.okompanii-hero.has-photo .okompanii-hero-sub{
color:rgba(255,255,255,0.88);
text-shadow:0 1px 8px rgba(0,0,0,0.5);
}
/* Stats — золотая полоса внизу hero (выравнивание со стороны заголовка) */
.okompanii-hero-stats{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
padding:1.4vw 4vw;
background:linear-gradient(135deg, rgba(176,141,87,0.92) 0%, rgba(176,141,87,0.86) 100%);
position:relative;z-index:3;
}
.okompanii-hero.has-photo .okompanii-hero-stats{
position:absolute;left:0;right:0;bottom:0;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
.okompanii-hero-stat{
padding-right:1vw;
border-right:1px solid rgba(255,255,255,0.20);
text-align:left;
}
.okompanii-hero-stat + .okompanii-hero-stat{padding-left:1vw}
.okompanii-hero-stat:last-child{border-right:none}
.okompanii-hero-stat .value{
font-size:1.8vw;font-weight:900;color:#fff;
line-height:1;letter-spacing:-0.02em;
margin-bottom:0.4vh;
}
.okompanii-hero-stat .label{
font-size:0.78vw;color:rgba(255,255,255,0.88);font-weight:600;
}
/* === О КОМПАНИИ — текст === */
.okompanii-about{margin:8vh var(--side-pad) 0}
.okompanii-about-inner{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.okompanii-about-inner.has-image{
display:grid;
grid-template-columns:1.3fr 1fr;
gap:4vw;
align-items:start;
}
.okompanii-about-text{min-width:0}
.okompanii-about-head{margin-bottom:4vh}
.okompanii-about-head .section-kicker{margin-bottom:1.5vh}
.okompanii-about-title{
font-size:2.4vw;font-weight:800;
letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0;
}
.okompanii-about-body{
font-size:1.05vw;line-height:1.75;color:var(--ink);
max-width:55em;
}
.okompanii-about-inner.has-image .okompanii-about-body{max-width:none}
.okompanii-about-body p{margin:0 0 2vh}
.okompanii-about-body p:last-child{margin-bottom:0}
.okompanii-about-body strong{color:var(--ink-dk)}
/* Картинка справа */
.okompanii-about-image{
position:sticky;top:12vh;
}
.okompanii-about-image-wrap{
position:relative;
aspect-ratio:5/4;
background-color:#2a1810;
background-size:cover;
background-position:center;
border-radius:var(--rad-md);
overflow:hidden;
box-shadow:0 18px 48px rgba(15,17,21,0.15);
}
.okompanii-about-image-wrap::before{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(15,17,21,0.35) 100%);
}
.okompanii-about-image-mark{
position:absolute;left:1.4vw;bottom:1.4vw;
width:3vw;height:3vw;min-width:44px;min-height:44px;
background:rgba(255,255,255,0.92);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:var(--burgundy);
box-shadow:0 6px 18px rgba(0,0,0,0.25);
}
.okompanii-about-image-mark svg{
width:1.4vw;height:1.4vw;min-width:20px;min-height:20px;
}
/* === ПРИНЦИПЫ === */
.okompanii-principles{margin:8vh var(--side-pad) 0}
.okompanii-principles-inner{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.okompanii-principles-head{margin-bottom:5vh}
.okompanii-principles-head .section-kicker{margin-bottom:1.5vh}
.okompanii-principles-title{
font-size:2.4vw;font-weight:800;
letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0;
}
.okompanii-principles-grid{
display:grid;grid-template-columns:repeat(4,1fr);
gap:1.5vw;
}
.okompanii-principle{
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:var(--rad-md);
padding:2.5vw 2vw;
transition:transform .25s, border-color .25s, box-shadow .25s;
}
.okompanii-principle:hover{
transform:translateY(-3px);
border-color:rgba(122,47,60,0.20);
box-shadow:0 14px 32px rgba(15,17,21,0.06);
background:#fff;
}
.okompanii-principle-icon{
width:3.4vw;height:3.4vw;min-width:48px;min-height:48px;
background:rgba(122,47,60,0.08);
border-radius:14px;
display:flex;align-items:center;justify-content:center;
color:var(--burgundy);
margin-bottom:2vh;
transition:background .25s, color .25s;
}
.okompanii-principle:hover .okompanii-principle-icon{
background:var(--burgundy);color:#fff;
}
.okompanii-principle-icon svg{
width:1.6vw;height:1.6vw;min-width:22px;min-height:22px;
}
.okompanii-principle-title{
font-size:1.3vw;font-weight:800;color:var(--ink-dk);
line-height:1.2;margin:0 0 1.2vh;letter-spacing:-0.01em;
}
.okompanii-principle-desc{
font-size:0.9vw;line-height:1.55;color:var(--ink);margin:0;
}
/* === НАГРАДЫ === */
.okompanii-awards{margin:8vh var(--side-pad) 0}
.okompanii-awards-inner{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.okompanii-awards-head{margin-bottom:5vh}
.okompanii-awards-head .section-kicker{margin-bottom:1.5vh}
.okompanii-awards-title{
font-size:2.4vw;font-weight:800;
letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0;
}
.okompanii-awards-grid{
display:grid;grid-template-columns:repeat(3, 1fr);
gap:0;
align-items:stretch;
width:100%;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
overflow:hidden;
}
.okompanii-award{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:16px;
padding:48px 32px;
text-align:center;
text-decoration:none;
color:inherit;
position:relative;
transition:background .25s ease;
}
.okompanii-award:not(:last-child)::after{
content:'';
position:absolute;
top:25%;right:0;bottom:25%;
width:1px;
background:var(--divider);
}
.okompanii-award.is-link{
cursor:pointer;
}
.okompanii-award:hover{
background:rgba(176, 141, 87, 0.04);
}
.okompanii-award-logo{
height:64px;
display:flex;align-items:center;justify-content:center;
}
.okompanii-award-logo img{
max-height:64px;
max-width:180px;
width:auto;
object-fit:contain;
}
.okompanii-award-title{
font-size:11px;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--mute);
font-weight:500;
transition:color .25s ease;
}
.okompanii-award:hover .okompanii-award-title{
color:var(--burgundy);
}
/* === FALLBACK: текстовые бейджи если логотипов нет === */
.okompanii-awards.is-fallback .okompanii-awards-grid{
grid-template-columns:repeat(3, 1fr);
}
.okompanii-award-badge{
width:100%;
display:flex;align-items:center;gap:1vw;
padding:1.6vw 1.6vw;
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:var(--rad-md);
text-align:left;
transition:transform .25s, border-color .25s, box-shadow .25s, background .25s;
}
.okompanii-award-badge:hover{
transform:translateY(-3px);
border-color:rgba(122,47,60,0.20);
box-shadow:0 14px 32px rgba(15,17,21,0.06);
background:#fff;
}
.okompanii-award-badge-icon{
flex-shrink:0;
width:3vw;height:3vw;min-width:44px;min-height:44px;
background:rgba(176,141,87,0.12);
border-radius:14px;
display:flex;align-items:center;justify-content:center;
color:var(--gold);
transition:background .25s, color .25s;
}
.okompanii-award-badge:hover .okompanii-award-badge-icon{
background:var(--gold);color:#fff;
}
.okompanii-award-badge-icon svg{
width:1.4vw;height:1.4vw;min-width:22px;min-height:22px;
}
.okompanii-award-badge-content{flex:1;min-width:0}
.okompanii-award-badge-title{
font-size:1.05vw;font-weight:800;color:var(--ink-dk);
line-height:1.15;letter-spacing:-0.01em;
margin-bottom:0.4vh;
}
.okompanii-award-badge-sub{
font-size:0.82vw;color:var(--mute);font-weight:500;
line-height:1.35;
}
/* ============================================================
АДАПТИВ — Планшет (768-1199)
============================================================ */
@media (max-width:1199px){
.okompanii-page{padding-bottom:0}
.okompanii-hero{margin:8px 0 0;border-radius:20px;border-left:none;border-right:none}
.okompanii-hero-cover{aspect-ratio:16/9}
.okompanii-hero-inner{padding:32px 28px}
.okompanii-hero.has-photo{padding-bottom:80px;position:relative}
.okompanii-hero.has-photo .okompanii-hero-inner{
position:absolute;bottom:80px;padding:0 18px;
}
.okompanii-hero.has-photo .breadcrumbs{position:static;top:auto;margin-bottom:14px}
.okompanii-hero-kicker{font-size:11px;margin-bottom:10px}
.okompanii-hero-kicker::before{width:18px}
.okompanii-hero-title{font-size:32px;line-height:1.05;margin-bottom:12px}
.okompanii-hero-sub{font-size:14.5px;max-width:none}
.okompanii-hero-stats{padding:14px 28px}
.okompanii-hero-stat .value{font-size:22px}
.okompanii-hero-stat .label{font-size:11.5px}
/* Блоки — без боковых границ */
.okompanii-about,
.okompanii-principles,
.okompanii-awards{margin:6vh 0 0}
.okompanii-about-inner,
.okompanii-principles-inner,
.okompanii-awards-inner{
padding:32px 28px;border-radius:20px;border-left:none;border-right:none;
}
/* About image на планшете — стек, фото снизу */
.okompanii-about-inner.has-image{
grid-template-columns:1fr;gap:28px;
}
.okompanii-about-image{position:static;top:auto}
.okompanii-about-image-wrap{aspect-ratio:5/4}
.okompanii-about-image-mark{width:50px;height:50px;left:14px;bottom:14px}
.okompanii-about-image-mark svg{width:22px;height:22px}
.okompanii-about-head,
.okompanii-principles-head,
.okompanii-awards-head{margin-bottom:24px}
.okompanii-about-title,
.okompanii-principles-title,
.okompanii-awards-title{font-size:26px}
.okompanii-about-body{font-size:15px;max-width:none}
.okompanii-principles-grid{grid-template-columns:1fr 1fr;gap:14px}
.okompanii-principle{padding:24px 22px;border-radius:16px}
.okompanii-principle-icon{width:48px;height:48px;border-radius:12px;margin-bottom:14px}
.okompanii-principle-icon svg{width:22px;height:22px}
.okompanii-principle-title{font-size:18px;margin-bottom:8px}
.okompanii-principle-desc{font-size:13.5px}
.okompanii-awards-grid{gap:18px}
.okompanii-award-logo{height:80px;min-height:60px}
.okompanii-award-title{font-size:12px}
/* Fallback бейджи на планшете — 2 колонки */
.okompanii-awards.is-fallback .okompanii-awards-grid{
grid-template-columns:1fr 1fr;
}
.okompanii-award-badge{padding:18px;gap:14px;border-radius:16px}
.okompanii-award-badge-icon{width:48px;height:48px;border-radius:12px}
.okompanii-award-badge-icon svg{width:24px;height:24px}
.okompanii-award-badge-title{font-size:16px}
.okompanii-award-badge-sub{font-size:12.5px}
}
/* ============================================================
АДАПТИВ — Мобила (≤767)
============================================================ */
@media (max-width:767px){
.okompanii-hero{margin:6px 0 0;border-radius:16px}
.okompanii-hero-cover{aspect-ratio:4/5}
.okompanii-hero-inner{padding:28px 22px}
.okompanii-hero.has-photo{padding-bottom:90px}
.okompanii-hero.has-photo .okompanii-hero-inner{bottom:90px;padding:0 14px}
.okompanii-hero-title{font-size:24px}
.okompanii-hero-sub{font-size:13.5px}
.okompanii-hero-stats{
grid-template-columns:1fr;
padding:12px 22px;gap:0;
}
.okompanii-hero-stat{
padding:8px 0;
border-right:none;
border-bottom:1px solid rgba(255,255,255,0.20);
}
.okompanii-hero-stat + .okompanii-hero-stat{padding-left:0}
.okompanii-hero-stat:last-child{border-bottom:none}
.okompanii-hero-stat .value{font-size:18px}
.okompanii-hero-stat .label{font-size:11px}
.okompanii-about,
.okompanii-principles,
.okompanii-awards{margin:28px 0 0}
.okompanii-about-inner,
.okompanii-principles-inner,
.okompanii-awards-inner{padding:28px 22px;border-radius:16px}
.okompanii-about-inner.has-image{gap:22px}
.okompanii-about-image-wrap{aspect-ratio:5/4;border-radius:14px}
.okompanii-about-image-mark{width:42px;height:42px;left:12px;bottom:12px}
.okompanii-about-image-mark svg{width:18px;height:18px}
.okompanii-about-title,
.okompanii-principles-title,
.okompanii-awards-title{font-size:22px}
.okompanii-about-body{font-size:14.5px;line-height:1.65}
.okompanii-principles-grid{grid-template-columns:1fr;gap:10px}
.okompanii-principle{padding:20px 18px;border-radius:14px}
.okompanii-principle-title{font-size:17px}
.okompanii-principle-desc{font-size:13.5px}
.okompanii-awards-grid{grid-template-columns:1fr 1fr;gap:14px}
.okompanii-award-logo{height:60px}
/* Fallback бейджи на мобиле — 1 колонка */
.okompanii-awards.is-fallback .okompanii-awards-grid{
grid-template-columns:1fr;gap:10px;
}
.okompanii-award-badge{padding:14px;gap:12px;border-radius:14px}
.okompanii-award-badge-icon{width:42px;height:42px;border-radius:10px}
.okompanii-award-badge-icon svg{width:20px;height:20px}
.okompanii-award-badge-title{font-size:15px}
.okompanii-award-badge-sub{font-size:12px}
}
/* ============================================================
СТРАНИЦА ПАРТНЁРАМ /partneram/
============================================================ */
.partneram-page{padding:0 0 8vh}
/* === HERO === */
.partneram-hero{
margin:var(--hdr-gap) var(--side-pad) 0;
border-radius:var(--rad-lg);
overflow:hidden;
background:var(--white);
border:1px solid var(--divider);
box-shadow:0 2px 10px rgba(15,17,21,0.03);
position:relative;
}
.partneram-hero::before{
content:"";
position:absolute;left:0;top:0;
width:100%;height:6px;
background:linear-gradient(90deg, var(--burgundy) 0%, var(--gold) 100%);
}
.partneram-hero-inner{
padding:5vh 4vw;
position:relative;z-index:2;
}
.partneram-hero-inner .breadcrumbs{margin-bottom:3vh}
.partneram-hero-kicker{
font-size:0.78vw;letter-spacing:0.18em;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:1.5vh;
display:flex;align-items:center;gap:0.6vw;
}
.partneram-hero-kicker::before{
content:"";display:inline-block;width:1.6vw;height:1px;background:var(--gold);
}
.partneram-hero-title{
font-size:3.2vw;font-weight:900;
letter-spacing:-0.025em;line-height:1.05;
color:var(--ink-dk);margin:0 0 2vh;
max-width:80%;
}
.partneram-hero-sub{
font-size:1.05vw;line-height:1.6;
color:var(--ink);margin:0 0 4vh;font-weight:500;
max-width:65%;
}
.partneram-hero-cta{
display:flex;align-items:center;gap:1.5vw;flex-wrap:wrap;
}
.partneram-hero-cta-btn{
display:inline-flex;align-items:center;gap:0.5vw;
padding:1.4vh 2vw;
background:var(--burgundy);
color:#fff;border:none;border-radius:100px;
font-size:1vw;font-weight:700;cursor:pointer;
text-decoration:none;
transition:background .25s, transform .25s, box-shadow .25s;
}
.partneram-hero-cta-btn:hover{
background:var(--burgundy-dk);
transform:translateY(-2px);
box-shadow:0 14px 32px rgba(122,47,60,0.30);
}
.partneram-hero-cta-btn .arrow{transition:transform .25s}
.partneram-hero-cta-btn:hover .arrow{transform:translateX(4px)}
.partneram-hero-cta-link{
font-size:0.95vw;color:var(--ink);font-weight:600;
text-decoration:none;
border-bottom:1px solid var(--divider);
padding-bottom:2px;
transition:color .2s, border-color .2s;
}
.partneram-hero-cta-link:hover{
color:var(--burgundy);border-color:var(--burgundy);
}
/* Stats — золотая полоса внизу hero */
.partneram-hero-stats{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
padding:1.4vw 4vw;
background:linear-gradient(135deg, rgba(176,141,87,0.92) 0%, rgba(176,141,87,0.86) 100%);
position:relative;z-index:3;
}
.partneram-hero-stat{
padding-right:1vw;
border-right:1px solid rgba(255,255,255,0.20);
text-align:left;
}
.partneram-hero-stat + .partneram-hero-stat{padding-left:1vw}
.partneram-hero-stat:last-child{border-right:none}
.partneram-hero-stat .value{
font-size:1.8vw;font-weight:900;color:#fff;
line-height:1;letter-spacing:-0.02em;
margin-bottom:0.4vh;
}
.partneram-hero-stat .label{
font-size:0.78vw;color:rgba(255,255,255,0.88);font-weight:600;
}
/* === ФОРМАТЫ === */
.partneram-formats{margin:8vh var(--side-pad) 0}
.partneram-formats-inner{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.partneram-formats-head{margin-bottom:5vh;max-width:60%}
.partneram-formats-head .section-kicker{margin-bottom:1.5vh}
.partneram-formats-title{
font-size:2.4vw;font-weight:800;
letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0 0 2vh;
}
.partneram-formats-lead{
font-size:1vw;line-height:1.65;color:var(--ink);margin:0;
}
.partneram-formats-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:1.5vw;align-items:stretch;
}
.partneram-format{
position:relative;
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:var(--rad-md);
padding:2.5vw 2vw;
display:flex;flex-direction:column;
transition:transform .25s, box-shadow .25s, border-color .25s;
}
.partneram-format:hover{
transform:translateY(-4px);
border-color:rgba(122,47,60,0.20);
box-shadow:0 14px 32px rgba(15,17,21,0.06);
}
.partneram-format.is-highlight{
background:#fff;
border:2px solid var(--burgundy);
box-shadow:0 14px 40px rgba(122,47,60,0.12);
}
.partneram-format.is-highlight:hover{
box-shadow:0 22px 56px rgba(122,47,60,0.20);
}
.partneram-format-badge{
position:absolute;top:-12px;left:50%;transform:translateX(-50%);
padding:5px 14px;
background:linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-dk) 100%);
color:#fff;border-radius:100px;
font-size:11px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;
box-shadow:0 4px 12px rgba(122,47,60,0.30);
white-space:nowrap;
}
.partneram-format-icon{
width:3.6vw;height:3.6vw;min-width:52px;min-height:52px;
background:rgba(122,47,60,0.08);
border-radius:14px;
display:flex;align-items:center;justify-content:center;
color:var(--burgundy);
margin-bottom:2.5vh;
transition:background .25s, color .25s;
}
.partneram-format:hover .partneram-format-icon{
background:var(--burgundy);color:#fff;
}
.partneram-format-icon svg{
width:1.7vw;height:1.7vw;min-width:24px;min-height:24px;
}
.partneram-format.is-highlight .partneram-format-icon{
background:var(--burgundy);color:#fff;
}
.partneram-format-kicker{
font-size:0.72vw;letter-spacing:0.14em;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:1.2vh;
}
.partneram-format-title{
font-size:1.55vw;font-weight:800;line-height:1.15;
color:var(--ink-dk);margin:0 0 1.6vh;letter-spacing:-0.015em;
}
.partneram-format-desc{
font-size:0.92vw;line-height:1.55;color:var(--ink);
margin:0 0 2.5vh;
}
.partneram-format-features{
list-style:none;padding:0;margin:0 0 3vh;
display:flex;flex-direction:column;gap:1vh;
}
.partneram-format-features li{
display:flex;align-items:flex-start;gap:0.7vw;
font-size:0.9vw;line-height:1.45;color:var(--ink-dk);
}
.partneram-format-features svg{
flex-shrink:0;width:14px;height:14px;
color:var(--burgundy);margin-top:0.4vh;
}
.partneram-format-cta{
margin-top:auto;
display:inline-flex;align-items:center;justify-content:center;gap:0.5vw;
padding:1.3vh 1.4vw;
background:#fff;
color:var(--ink-dk);
border:1.5px solid var(--ink-dk);
border-radius:100px;
font-size:0.92vw;font-weight:700;cursor:pointer;
text-decoration:none;
transition:background .25s, color .25s, transform .25s, border-color .25s;
}
.partneram-format-cta:hover{
background:var(--ink-dk);color:#fff;
transform:translateY(-2px);
}
.partneram-format.is-highlight .partneram-format-cta{
background:var(--burgundy);color:#fff;border-color:var(--burgundy);
}
.partneram-format.is-highlight .partneram-format-cta:hover{
background:var(--burgundy-dk);border-color:var(--burgundy-dk);
}
.partneram-format-cta .arrow{transition:transform .25s}
.partneram-format-cta:hover .arrow{transform:translateX(4px)}
/* === УСЛОВИЯ === */
.partneram-conditions{margin:8vh var(--side-pad) 0}
.partneram-conditions-inner{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.partneram-conditions-head{margin-bottom:5vh}
.partneram-conditions-head .section-kicker{margin-bottom:1.5vh}
.partneram-conditions-title{
font-size:2.4vw;font-weight:800;
letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0;
}
.partneram-conditions-grid{
display:grid;grid-template-columns:repeat(4,1fr);
gap:1.5vw;
}
.partneram-condition{
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:var(--rad-md);
padding:2.4vw 2vw;
transition:transform .25s, border-color .25s, box-shadow .25s, background .25s;
}
.partneram-condition:hover{
transform:translateY(-3px);
background:#fff;
border-color:rgba(176,141,87,0.30);
box-shadow:0 14px 32px rgba(15,17,21,0.06);
}
.partneram-condition-icon{
width:3vw;height:3vw;min-width:44px;min-height:44px;
background:rgba(176,141,87,0.12);
border-radius:12px;
display:flex;align-items:center;justify-content:center;
color:var(--gold);
margin-bottom:2vh;
transition:background .25s, color .25s;
}
.partneram-condition:hover .partneram-condition-icon{
background:var(--gold);color:#fff;
}
.partneram-condition-icon svg{
width:1.5vw;height:1.5vw;min-width:22px;min-height:22px;
}
.partneram-condition-title{
font-size:1.15vw;font-weight:800;color:var(--ink-dk);
line-height:1.2;margin:0 0 1vh;letter-spacing:-0.01em;
}
.partneram-condition-desc{
font-size:0.88vw;line-height:1.55;color:var(--ink);margin:0;
}
/* === КОМУ ПОДХОДИТ === */
.partneram-audience{margin:8vh var(--side-pad) 0}
.partneram-audience-inner{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.partneram-audience-head{margin-bottom:5vh}
.partneram-audience-head .section-kicker{margin-bottom:1.5vh}
.partneram-audience-title{
font-size:2.4vw;font-weight:800;
letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0;
}
.partneram-audience-grid{
display:grid;grid-template-columns:repeat(2,1fr);
gap:1.5vw;
}
.partneram-audience-item{
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:var(--rad-md);
padding:2vw 2vw;
transition:transform .25s, border-color .25s, box-shadow .25s, background .25s;
}
.partneram-audience-item:hover{
transform:translateY(-3px);
background:#fff;
border-color:rgba(122,47,60,0.20);
box-shadow:0 10px 28px rgba(15,17,21,0.06);
}
.partneram-audience-badge{
display:inline-block;
padding:0.3vw 0.9vw;
background:rgba(122,47,60,0.10);
color:var(--burgundy);
border-radius:100px;
font-size:0.78vw;font-weight:700;letter-spacing:0.04em;
margin-bottom:1.5vh;
}
.partneram-audience-title-card{
font-size:1.3vw;font-weight:800;
color:var(--ink-dk);line-height:1.2;
margin:0 0 1.2vh;letter-spacing:-0.01em;
}
.partneram-audience-desc{
font-size:0.95vw;line-height:1.55;color:var(--ink);margin:0;
}
/* === ПРОЦЕСС === */
.partneram-process{margin:8vh var(--side-pad) 0}
.partneram-process-inner{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.partneram-process-head{margin-bottom:5vh}
.partneram-process-head .section-kicker{margin-bottom:1.5vh}
.partneram-process-title{
font-size:2.4vw;font-weight:800;
letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0;
}
.partneram-process-steps{
display:grid;grid-template-columns:repeat(4,1fr);
gap:1.5vw;position:relative;
}
.partneram-step{
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:var(--rad-md);
padding:2vw 2vw;
position:relative;
transition:transform .25s, border-color .25s, box-shadow .25s;
}
.partneram-step:hover{
transform:translateY(-3px);
border-color:rgba(122,47,60,0.20);
box-shadow:0 10px 28px rgba(15,17,21,0.06);
}
.partneram-step-num{
font-family:'Caveat',cursive;
font-size:3vw;color:var(--gold);font-weight:600;
line-height:1;margin-bottom:1.5vh;
}
.partneram-step-title{
font-size:1.2vw;font-weight:800;
color:var(--ink-dk);line-height:1.2;
margin:0 0 1vh;letter-spacing:-0.01em;
}
.partneram-step-desc{
font-size:0.9vw;line-height:1.5;color:var(--ink);margin:0;
}
/* ============================================================
АДАПТИВ — Планшет (768-1199)
============================================================ */
@media (max-width:1199px){
.partneram-page{padding-bottom:0}
.partneram-hero{margin:8px 0 0;border-radius:20px;border-left:none;border-right:none}
.partneram-hero-inner{padding:32px 28px}
.partneram-hero-inner .breadcrumbs{margin-bottom:18px}
.partneram-hero-kicker{font-size:11px;margin-bottom:10px}
.partneram-hero-kicker::before{width:18px}
.partneram-hero-title{font-size:30px;line-height:1.1;max-width:none}
.partneram-hero-sub{font-size:14.5px;max-width:none;margin-bottom:24px}
.partneram-hero-cta{gap:14px}
.partneram-hero-cta-btn{padding:13px 22px;font-size:14px;gap:6px}
.partneram-hero-cta-link{font-size:13.5px}
.partneram-hero-stats{padding:14px 28px}
.partneram-hero-stat .value{font-size:22px}
.partneram-hero-stat .label{font-size:11.5px}
/* Форматы */
.partneram-formats,
.partneram-conditions,
.partneram-audience,
.partneram-process{margin:6vh 0 0}
.partneram-formats-inner,
.partneram-conditions-inner,
.partneram-audience-inner,
.partneram-process-inner{
padding:32px 28px;border-radius:20px;border-left:none;border-right:none;
}
.partneram-formats-head{max-width:none;margin-bottom:24px}
.partneram-formats-title,
.partneram-conditions-title,
.partneram-audience-title,
.partneram-process-title{font-size:26px}
.partneram-formats-lead{font-size:14.5px}
/* Форматы — карусель на планшете */
.partneram-formats-grid{
display:flex !important;
grid-template-columns:none;
gap:14px;
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;
scrollbar-width:none;
margin-left:-28px;
margin-right:-28px;
padding:14px 0 8px;
scroll-padding-left:28px;
}
.partneram-formats-grid::-webkit-scrollbar{display:none}
.partneram-format{
flex:0 0 70%;
max-width:380px;
padding:24px 22px;border-radius:18px;
scroll-snap-align:start;
}
.partneram-formats-grid > .partneram-format:first-child{margin-left:28px}
.partneram-formats-grid > .partneram-format:last-child{margin-right:28px}
.partneram-format-icon{width:52px;height:52px;border-radius:12px;margin-bottom:18px}
.partneram-format-icon svg{width:24px;height:24px}
.partneram-format-kicker{font-size:10.5px}
.partneram-format-title{font-size:22px;margin-bottom:12px}
.partneram-format-desc{font-size:14px}
.partneram-format-features li{font-size:13.5px}
.partneram-format-cta{padding:13px 18px;font-size:13.5px}
/* Условия */
.partneram-conditions-grid{
grid-template-columns:1fr 1fr;gap:14px;
}
.partneram-condition{padding:24px 22px;border-radius:16px}
.partneram-condition-icon{width:48px;height:48px;border-radius:12px;margin-bottom:14px}
.partneram-condition-icon svg{width:22px;height:22px}
.partneram-condition-title{font-size:17px;margin-bottom:8px}
.partneram-condition-desc{font-size:13.5px}
/* Аудитория */
.partneram-audience-grid{
grid-template-columns:1fr 1fr;gap:14px;
}
.partneram-audience-item{padding:22px 20px;border-radius:16px}
.partneram-audience-badge{padding:4px 12px;font-size:11px;margin-bottom:14px}
.partneram-audience-title-card{font-size:18px;margin-bottom:10px}
.partneram-audience-desc{font-size:14px}
/* Процесс */
.partneram-process-steps{
grid-template-columns:1fr 1fr;gap:14px;
}
.partneram-step{padding:22px 20px;border-radius:16px}
.partneram-step-num{font-size:36px;margin-bottom:10px}
.partneram-step-title{font-size:17px;margin-bottom:8px}
.partneram-step-desc{font-size:13.5px}
}
/* ============================================================
АДАПТИВ — Мобила (≤767)
============================================================ */
@media (max-width:767px){
.partneram-hero{margin:6px 0 0;border-radius:16px}
.partneram-hero-inner{padding:28px 22px}
.partneram-hero-title{font-size:24px}
.partneram-hero-sub{font-size:13.5px}
.partneram-hero-cta{flex-direction:column;align-items:flex-start;gap:12px}
.partneram-hero-cta-btn{padding:13px 22px;font-size:13.5px;width:auto}
.partneram-hero-stats{
grid-template-columns:1fr;
padding:12px 22px;gap:0;
}
.partneram-hero-stat{
padding:8px 0;
border-right:none;
border-bottom:1px solid rgba(255,255,255,0.20);
}
.partneram-hero-stat + .partneram-hero-stat{padding-left:0}
.partneram-hero-stat:last-child{border-bottom:none}
.partneram-hero-stat .value{font-size:18px}
.partneram-hero-stat .label{font-size:11px}
.partneram-formats,
.partneram-conditions,
.partneram-audience,
.partneram-process{margin:28px 0 0}
.partneram-formats-inner,
.partneram-conditions-inner,
.partneram-audience-inner,
.partneram-process-inner{padding:28px 22px;border-radius:16px}
.partneram-formats-title,
.partneram-conditions-title,
.partneram-audience-title,
.partneram-process-title{font-size:22px}
/* Форматы — карусель на мобиле */
.partneram-formats-grid{
margin-left:-22px;margin-right:-22px;
scroll-padding-left:22px;
gap:12px;
}
.partneram-format{
flex:0 0 84%;
max-width:none;
padding:22px 20px;border-radius:14px;
}
.partneram-formats-grid > .partneram-format:first-child{margin-left:22px}
.partneram-formats-grid > .partneram-format:last-child{margin-right:22px}
/* Условия 1 кол */
.partneram-conditions-grid{grid-template-columns:1fr;gap:10px}
.partneram-condition{padding:20px 18px;border-radius:14px}
.partneram-condition-title{font-size:16px}
/* Аудитория 1 кол */
.partneram-audience-grid{grid-template-columns:1fr;gap:10px}
.partneram-audience-item{padding:20px 18px;border-radius:14px}
.partneram-audience-title-card{font-size:17px}
/* Процесс 1 кол */
.partneram-process-steps{grid-template-columns:1fr;gap:10px}
.partneram-step{padding:20px 18px;border-radius:14px}
.partneram-step-num{font-size:32px}
.partneram-step-title{font-size:16px}
.partneram-faq{margin:28px 0 0}
}
/* ============================================================
РАЗВОДЯЩИЕ СТРАНИЦЫ УСЛУГ /stroitelnye-spory/, /goskontrakty-44-fz-223-fz/
page-service-hub.php
============================================================ */
.service-hub-page{padding:0 0 8vh}
/* === HERO === */
.service-hub-hero{
margin:var(--hdr-gap) var(--side-pad) 0;
border-radius:var(--rad-lg);
overflow:hidden;
background:var(--white);
border:1px solid var(--divider);
box-shadow:0 2px 10px rgba(15,17,21,0.03);
position:relative;
}
.service-hub-hero::before{
content:"";position:absolute;left:0;top:0;
width:100%;height:6px;
background:linear-gradient(90deg, var(--burgundy) 0%, var(--gold) 100%);
}
.service-hub-hero-inner{
padding:5vh 4vw;
position:relative;z-index:2;
}
.service-hub-hero-inner .breadcrumbs{margin-bottom:3vh}
.service-hub-hero-kicker{
font-size:0.78vw;letter-spacing:0.18em;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:1.5vh;
display:flex;align-items:center;gap:0.6vw;
}
.service-hub-hero-kicker::before{
content:"";display:inline-block;width:1.6vw;height:1px;background:var(--gold);
}
.service-hub-hero-title{
font-size:3.2vw;font-weight:900;
letter-spacing:-0.025em;line-height:1.05;
color:var(--ink-dk);margin:0 0 2vh;
max-width:85%;
}
.service-hub-hero-title em{font-style:normal;color:var(--burgundy)}
.service-hub-hero-sub{
font-size:1.05vw;line-height:1.6;
color:var(--ink);margin:0 0 4vh;font-weight:500;
max-width:65%;
}
.service-hub-hero-cta{
display:flex;align-items:center;gap:1.5vw;flex-wrap:wrap;
}
.service-hub-hero-cta-btn{
display:inline-flex;align-items:center;gap:0.5vw;
padding:1.4vh 2vw;
background:var(--burgundy);
color:#fff;border:none;border-radius:100px;
font-size:1vw;font-weight:700;cursor:pointer;
text-decoration:none;
transition:background .25s, transform .25s, box-shadow .25s;
}
.service-hub-hero-cta-btn:hover{
background:var(--burgundy-dk);
transform:translateY(-2px);
box-shadow:0 14px 32px rgba(122,47,60,0.30);
}
.service-hub-hero-cta-btn .arrow{transition:transform .25s}
.service-hub-hero-cta-btn:hover .arrow{transform:translateX(4px)}
.service-hub-hero-cta-link{
font-size:0.95vw;color:var(--ink);font-weight:600;
text-decoration:none;
border-bottom:1px solid var(--divider);
padding-bottom:2px;
transition:color .2s, border-color .2s;
}
.service-hub-hero-cta-link:hover{color:var(--burgundy);border-color:var(--burgundy)}
/* Stats — золотая полоса */
.service-hub-hero-stats{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
padding:1.4vw 4vw;
background:linear-gradient(135deg, rgba(176,141,87,0.92) 0%, rgba(176,141,87,0.86) 100%);
position:relative;z-index:3;
}
.service-hub-hero-stat{
padding-right:1vw;
border-right:1px solid rgba(255,255,255,0.20);
text-align:left;
}
.service-hub-hero-stat + .service-hub-hero-stat{padding-left:1vw}
.service-hub-hero-stat:last-child{border-right:none}
.service-hub-hero-stat .value{
font-size:1.8vw;font-weight:900;color:#fff;
line-height:1;letter-spacing:-0.02em;
margin-bottom:0.4vh;
}
.service-hub-hero-stat .label{
font-size:0.78vw;color:rgba(255,255,255,0.88);font-weight:600;
}
/* === ABOUT — что мы делаем === */
.service-hub-about{margin:8vh var(--side-pad) 0}
.service-hub-about-inner{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.service-hub-about-head{margin-bottom:4vh}
.service-hub-about-head .section-kicker{margin-bottom:1.5vh}
.service-hub-about-title{
font-size:2.4vw;font-weight:800;
letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0;
}
.service-hub-about-body{
font-size:1.05vw;line-height:1.75;color:var(--ink);
margin-bottom:5vh;
}
.service-hub-about-body p{margin:0 0 2vh}
.service-hub-about-body p:last-child{margin-bottom:0}
.service-hub-features{
display:grid;grid-template-columns:repeat(2,1fr);
gap:2vw 1.6vw;
}
.service-hub-feature{
display:flex;flex-direction:column;align-items:flex-start;
padding:0;
}
.service-hub-feature-icon{
width:3vw;height:3vw;min-width:44px;min-height:44px;
background:rgba(122,47,60,0.08);
border-radius:12px;
display:flex;align-items:center;justify-content:center;
color:var(--burgundy);
margin-bottom:1.6vh;
}
.service-hub-feature-icon svg{
width:1.4vw;height:1.4vw;min-width:22px;min-height:22px;
}
.service-hub-feature-title{
font-size:1.15vw;font-weight:800;color:var(--ink-dk);
line-height:1.2;margin:0 0 0.8vh;letter-spacing:-0.01em;
}
.service-hub-feature-desc{
font-size:0.92vw;line-height:1.55;color:var(--ink);margin:0;
}
/* === ПОДУСЛУГИ — карточки в стиле блога === */
.service-hub-subs{margin:8vh var(--side-pad) 0}
.service-hub-subs-inner{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.service-hub-subs-head{margin-bottom:5vh;max-width:60%}
.service-hub-subs-head .section-kicker{margin-bottom:1.5vh}
.service-hub-subs-title{
font-size:2.4vw;font-weight:800;
letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0 0 2vh;
}
.service-hub-subs-lead{
font-size:1vw;line-height:1.65;color:var(--ink);margin:0;
}
.service-hub-subs-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:1.5vw;
}
.service-hub-sub-card{
display:flex;flex-direction:column;
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:var(--rad-md);
text-decoration:none;
transition:transform .25s, border-color .25s, box-shadow .25s, background .25s;
overflow:hidden;
}
.service-hub-sub-card:hover{
transform:translateY(-3px);
background:#fff;
border-color:rgba(122,47,60,0.20);
box-shadow:0 14px 32px rgba(15,17,21,0.06);
}
.service-hub-sub-card-body{
padding:2vw 2vw 1.8vw;
display:flex;flex-direction:column;height:100%;
}
.service-hub-sub-card-kicker{
font-size:0.7vw;letter-spacing:0.14em;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:1.2vh;
}
.service-hub-sub-card-title{
font-size:1.3vw;font-weight:800;color:var(--ink-dk);
line-height:1.2;margin:0 0 1.5vh;letter-spacing:-0.01em;
}
.service-hub-sub-card-excerpt{
font-size:0.92vw;line-height:1.55;color:var(--ink);
margin:0 0 2vh;
}
.service-hub-sub-card-more{
margin-top:auto;
display:inline-flex;align-items:center;gap:0.4vw;
font-size:0.92vw;font-weight:700;color:var(--burgundy);
}
.service-hub-sub-card-more .arrow{transition:transform .25s}
.service-hub-sub-card:hover .service-hub-sub-card-more .arrow{transform:translateX(4px)}
/* === СВЯЗАННЫЕ КЕЙСЫ === */
.service-hub-cases{margin:8vh var(--side-pad) 0}
.service-hub-cases-inner{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.service-hub-cases-head{
margin-bottom:5vh;display:flex;flex-wrap:wrap;align-items:flex-end;
gap:2vw;justify-content:space-between;
}
.service-hub-cases-head-text{flex:1;max-width:60%}
.service-hub-cases-head .section-kicker{margin-bottom:1.5vh}
.service-hub-cases-title{
font-size:2.4vw;font-weight:800;
letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0 0 2vh;
}
.service-hub-cases-lead{
font-size:1vw;line-height:1.65;color:var(--ink);margin:0;
}
.service-hub-cases-all{
display:inline-flex;align-items:center;gap:0.6vw;
padding:0.95vw 1.6vw;
background:transparent;
color:var(--burgundy);
border:1px solid var(--burgundy);
border-radius:100px;
font-size:0.9vw;font-weight:700;
text-decoration:none;
transition:all .3s;
white-space:nowrap;flex-shrink:0;
margin-bottom:0.5vh;
}
.service-hub-cases-all--mobile{display:none}
.service-hub-cases-all:hover{
background:var(--burgundy);color:#fff;transform:translateY(-2px);
}
.service-hub-cases-all .arrow{font-size:1vw;transition:transform .3s}
.service-hub-cases-all:hover .arrow{transform:translateX(3px)}
.service-hub-cases-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:1.5vw;
}
/* Если кейсов меньше 3 — карточки не растягиваются на всю ширину */
.service-hub-cases-grid.is-count-1{
grid-template-columns:minmax(0, 32%);
}
.service-hub-cases-grid.is-count-2{
grid-template-columns:minmax(0, 32%) minmax(0, 32%);
}
.service-hub-case-card{
display:flex;flex-direction:column;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-md);
text-decoration:none;
transition:transform .25s, border-color .25s, box-shadow .25s;
overflow:hidden;
}
.service-hub-case-card:hover{
transform:translateY(-4px);
border-color:rgba(122,47,60,0.20);
box-shadow:0 18px 40px rgba(15,17,21,0.10);
}
.service-hub-case-cover{
position:relative;
aspect-ratio:16/9;
background-color:#2a1810;
background-size:cover;background-position:center;
}
.service-hub-case-cover-overlay{
position:absolute;inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%);
}
.service-hub-case-body{
padding:2vw 1.8vw 1.8vw;
display:flex;flex-direction:column;flex:1;
}
.service-hub-case-tag{
display:inline-block;align-self:flex-start;
padding:0.3vw 0.9vw;
background:rgba(122,47,60,0.10);
color:var(--burgundy);
border-radius:100px;
font-size:0.72vw;font-weight:700;letter-spacing:0.06em;
text-transform:uppercase;
margin-bottom:1.5vh;
}
.service-hub-case-title{
font-size:1.2vw;font-weight:800;color:var(--ink-dk);
line-height:1.2;margin:0 0 1.2vh;letter-spacing:-0.01em;
}
.service-hub-case-excerpt{
font-size:0.9vw;line-height:1.55;color:var(--ink);
margin:0 0 1.8vh;
}
.service-hub-case-more{
margin-top:auto;
display:inline-flex;align-items:center;gap:0.4vw;
font-size:0.9vw;font-weight:700;color:var(--burgundy);
}
.service-hub-case-more .arrow{transition:transform .25s}
.service-hub-case-card:hover .service-hub-case-more .arrow{transform:translateX(4px)}
/* ============================================================
АДАПТИВ — Планшет (768-1199)
============================================================ */
@media (max-width:1199px){
.service-hub-page{padding-bottom:0}
.service-hub-hero{margin:8px 0 0;border-radius:20px;border-left:none;border-right:none}
.service-hub-hero-inner{padding:32px 28px}
.service-hub-hero-inner .breadcrumbs{margin-bottom:18px}
.service-hub-hero-kicker{font-size:11px;margin-bottom:10px}
.service-hub-hero-kicker::before{width:18px}
.service-hub-hero-title{font-size:30px;line-height:1.1;max-width:none}
.service-hub-hero-sub{font-size:14.5px;max-width:none;margin-bottom:24px}
.service-hub-hero-cta{gap:14px}
.service-hub-hero-cta-btn{padding:13px 22px;font-size:14px;gap:6px}
.service-hub-hero-cta-link{font-size:13.5px}
.service-hub-hero-stats{padding:14px 28px}
.service-hub-hero-stat .value{font-size:22px}
.service-hub-hero-stat .label{font-size:11.5px}
.service-hub-about,
.service-hub-subs,
.service-hub-cases{margin:6vh 0 0}
.service-hub-about-inner,
.service-hub-subs-inner,
.service-hub-cases-inner{
padding:32px 28px;border-radius:20px;border-left:none;border-right:none;
}
.service-hub-about-head,
.service-hub-subs-head,
.service-hub-cases-head{margin-bottom:24px}
.service-hub-subs-head{max-width:none}
.service-hub-about-title,
.service-hub-subs-title,
.service-hub-cases-title{font-size:26px}
.service-hub-about-body{font-size:15px;max-width:none;margin-bottom:24px}
.service-hub-subs-lead,
.service-hub-cases-lead{font-size:14.5px}
.service-hub-features{
grid-template-columns:1fr 1fr;gap:22px 18px;
}
.service-hub-feature-icon{width:48px;height:48px;border-radius:12px;margin-bottom:12px}
.service-hub-feature-icon svg{width:22px;height:22px}
.service-hub-feature-title{font-size:16.5px}
.service-hub-feature-desc{font-size:14px}
/* Подуслуги — 2 колонки на планшете */
.service-hub-subs-grid{
grid-template-columns:1fr 1fr;gap:14px;
}
.service-hub-sub-card-body{padding:22px 22px 20px}
.service-hub-sub-card-kicker{font-size:10.5px;margin-bottom:10px}
.service-hub-sub-card-title{font-size:18px;margin-bottom:10px}
.service-hub-sub-card-excerpt{font-size:14px;margin-bottom:14px}
.service-hub-sub-card-more{font-size:13.5px}
/* Кейсы — карусель на планшете */
.service-hub-cases-head{flex-direction:column;align-items:flex-start;gap:18px}
.service-hub-cases-head-text{max-width:none}
/* Скрываем основную кнопку (она в head), показываем мобильную внизу */
.service-hub-cases-head .service-hub-cases-all{display:none}
.service-hub-cases-all--mobile{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin-top:18px;
padding:14px 20px;
border:1.5px solid var(--burgundy);
color:var(--burgundy);
border-radius:100px;
font-size:14px;
font-weight:700;
text-decoration:none;
width:100%;
background:transparent;
transition:background .25s, color .25s;
}
.service-hub-cases-all--mobile:hover{background:var(--burgundy);color:#fff}
.service-hub-cases-all--mobile .arrow{font-size:16px;transition:transform .25s}
.service-hub-cases-all--mobile:hover .arrow{transform:translateX(3px)}
.service-hub-cases-grid{
display:flex !important;
grid-template-columns:none;
gap:14px;
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;
scrollbar-width:none;
margin-left:-28px;
margin-right:-28px;
padding:14px 0 8px;
scroll-padding-left:28px;
}
.service-hub-cases-grid::-webkit-scrollbar{display:none}
.service-hub-case-card{
flex:0 0 70%;
max-width:380px;
scroll-snap-align:start;
}
.service-hub-cases-grid > .service-hub-case-card:first-child{margin-left:28px}
.service-hub-cases-grid > .service-hub-case-card:last-child{margin-right:28px}
.service-hub-case-body{padding:22px 20px 20px}
.service-hub-case-tag{font-size:10.5px;padding:4px 12px}
.service-hub-case-title{font-size:17px}
.service-hub-case-excerpt{font-size:13.5px}
.service-hub-case-more{font-size:13.5px}
}
/* ============================================================
АДАПТИВ — Мобила (≤767)
============================================================ */
@media (max-width:767px){
.service-hub-hero{margin:6px 0 0;border-radius:16px}
.service-hub-hero-inner{padding:28px 22px}
.service-hub-hero-title{font-size:24px}
.service-hub-hero-sub{font-size:13.5px}
.service-hub-hero-cta{flex-direction:column;align-items:flex-start;gap:12px}
.service-hub-hero-stats{
grid-template-columns:1fr;
padding:12px 22px;gap:0;
}
.service-hub-hero-stat{
padding:8px 0;
border-right:none;
border-bottom:1px solid rgba(255,255,255,0.20);
}
.service-hub-hero-stat + .service-hub-hero-stat{padding-left:0}
.service-hub-hero-stat:last-child{border-bottom:none}
.service-hub-hero-stat .value{font-size:18px}
.service-hub-hero-stat .label{font-size:11px}
.service-hub-about,
.service-hub-subs,
.service-hub-cases{margin:28px 0 0}
.service-hub-about-inner,
.service-hub-subs-inner,
.service-hub-cases-inner{padding:28px 22px;border-radius:16px}
.service-hub-about-title,
.service-hub-subs-title,
.service-hub-cases-title{font-size:22px}
/* Features 1 колонка */
.service-hub-features{grid-template-columns:1fr;gap:18px}
.service-hub-feature{padding:0}
/* Подуслуги 1 колонка */
.service-hub-subs-grid{grid-template-columns:1fr;gap:10px}
.service-hub-sub-card-body{padding:20px 18px}
.service-hub-sub-card-title{font-size:17px}
.service-hub-sub-card-excerpt{font-size:13.5px}
/* Кейсы — карусель -22px */
.service-hub-cases-grid{
margin-left:-22px;margin-right:-22px;
scroll-padding-left:22px;
gap:12px;
}
.service-hub-case-card{
flex:0 0 84%;
max-width:none;
}
.service-hub-cases-grid > .service-hub-case-card:first-child{margin-left:22px}
.service-hub-cases-grid > .service-hub-case-card:last-child{margin-right:22px}
.service-hub-case-body{padding:20px 18px}
.service-hub-case-title{font-size:16px}
/* Mobile-cta для мобилы (мельче) */
.service-hub-cases-all--mobile{
margin-top:14px;
padding:13px 18px;
font-size:13.5px;
}
.service-hub-faq{margin:28px 0 0}
}
/* ============================================================
СТРАНИЦА УСЛУГИ /vzyskanie-dolgov-s-yurlic/, /abonentskoe-soprovozhdenie/ и т.д.
page-service.php
============================================================ */
.service-page{padding:0 0 8vh}
/* === HERO с фото-фоном === */
.service-hero{
position:relative;
margin:var(--hdr-gap) var(--side-pad) 0;
border-radius:var(--rad-lg);
overflow:hidden;
background:var(--ink-dk);
border:1px solid var(--divider);
box-shadow:0 24px 60px rgba(15,17,21,0.10), 0 6px 18px rgba(15,17,21,0.06);
}
.service-hero-cover{
position:absolute;inset:0;
background-size:cover;
background-position:center bottom !important;
background-repeat:no-repeat;
background-color:#2a1810;
}
.service-hero-overlay{
position:absolute;inset:0;
background:linear-gradient(135deg, rgba(15,17,21,0.65) 0%, rgba(15,17,21,0.55) 50%, rgba(15,17,21,0.75) 100%);
}
.service-hero-top{
position:absolute;left:4vw;top:5vh;right:4vw;
z-index:3;
}
.service-hero-top .breadcrumbs{
margin:0;display:flex;flex-wrap:wrap;gap:0.4vw;
}
.service-hero-top .breadcrumbs a,
.service-hero-top .breadcrumbs .current{
background:rgba(255,255,255,0.12);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,0.16);
color:#fff;
padding:0.4vw 0.9vw;
border-radius:100px;
font-size:0.8vw;
}
.service-hero-top .breadcrumbs a{transition:background .25s}
.service-hero-top .breadcrumbs a:hover{background:rgba(255,255,255,0.22)}
.service-hero-top .breadcrumbs .sep{color:rgba(255,255,255,0.3);padding:0 0.2vw}
/* Контент hero — по центру/слева */
.service-hero-bottom{
position:relative;z-index:2;
padding:22.5vh 4vw 5vh !important;
max-width:75%;
}
.service-hero-kicker{
font-size:0.78vw;letter-spacing:0.18em;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:1.5vh;
display:flex;align-items:center;gap:0.6vw;
}
.service-hero-kicker::before{
content:"";display:inline-block;width:1.6vw;height:1px;background:var(--gold);
}
.service-hero-title{
font-size:3.2vw;font-weight:900;
letter-spacing:-0.025em;line-height:1.05;
color:#fff;margin:0 0 2vh;
text-shadow:0 2px 16px rgba(0,0,0,0.40);
}
.service-hero-title em{font-style:normal;color:var(--gold)}
.service-hero-sub{
font-size:1.05vw;line-height:1.6;
color:rgba(255,255,255,0.92);margin:0 0 4vh;font-weight:500;
text-shadow:0 1px 8px rgba(0,0,0,0.35);
max-width:90%;
}
.service-hero-cta{
display:flex;align-items:center;gap:1.5vw;flex-wrap:wrap;
}
.service-hero-cta-btn{
display:inline-flex;align-items:center;gap:0.5vw;
padding:1.4vh 2vw;
background:var(--burgundy);
color:#fff;border:none;border-radius:100px;
font-size:1vw;font-weight:700;cursor:pointer;
text-decoration:none;
transition:background .25s, transform .25s, box-shadow .25s;
}
.service-hero-cta-btn:hover{
background:var(--burgundy-dk);
transform:translateY(-2px);
box-shadow:0 14px 32px rgba(122,47,60,0.40);
}
.service-hero-cta-btn .arrow{transition:transform .25s}
.service-hero-cta-btn:hover .arrow{transform:translateX(4px)}
.service-hero-cta-link{
font-size:0.95vw;color:#fff;font-weight:600;
text-decoration:none;
border-bottom:1px solid rgba(255,255,255,0.40);
padding-bottom:2px;
transition:border-color .2s;
}
.service-hero-cta-link:hover{border-color:#fff}
/* Stats — золотая полоса внизу hero (поверх фото) */
.service-hero-stats{
position:relative;z-index:3;
display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
padding:1.4vw 4vw;
background:linear-gradient(135deg, rgba(176,141,87,0.92) 0%, rgba(176,141,87,0.86) 100%);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.service-hero-stat{
padding-right:1vw;
border-right:1px solid rgba(255,255,255,0.20);
text-align:left;
}
.service-hero-stat + .service-hero-stat{padding-left:1vw}
.service-hero-stat:last-child{border-right:none}
.service-hero-stat .value{
font-size:1.8vw;font-weight:900;color:#fff;
line-height:1;letter-spacing:-0.02em;
margin-bottom:0.4vh;
}
.service-hero-stat .label{
font-size:0.78vw;color:rgba(255,255,255,0.92);font-weight:600;
}
/* === FEATURES — что входит (split-layout: текст слева, список 2 колонки справа) === */
.service-features{margin:8vh var(--side-pad) 0}
.service-features-inner{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
display:grid;grid-template-columns:1fr 1.6fr;gap:4vw;
align-items:start;
}
.service-features-text{position:sticky;top:14vh}
.service-features-text .section-kicker{margin-bottom:1.5vh}
.service-features-title{
font-size:2.6vw;font-weight:800;
letter-spacing:-0.025em;line-height:1.05;
color:var(--ink-dk);margin:0 0 2.5vh;
}
.service-features-title em{font-style:normal;color:var(--burgundy)}
.service-features-lead{
font-size:1.05vw;line-height:1.65;color:var(--ink);
margin:0 0 3vh;
}
.service-features-cta{
display:inline-flex;align-items:center;gap:0.5vw;
padding:1.4vh 2vw;
background:var(--burgundy);
color:#fff;border:none;border-radius:100px;
font-size:1vw;font-weight:700;cursor:pointer;
text-decoration:none;
transition:background .25s, transform .25s, box-shadow .25s;
}
.service-features-cta:hover{
background:var(--burgundy-dk);
transform:translateY(-2px);
box-shadow:0 14px 32px rgba(122,47,60,0.30);
}
.service-features-cta .arrow{transition:transform .25s}
.service-features-cta:hover .arrow{transform:translateX(4px)}
/* Сетка списка — 2 колонки */
.service-features-list{
display:grid;grid-template-columns:1fr 1fr;gap:1vw;
}
.service-feature{
display:flex;align-items:flex-start;gap:1vw;
padding:1.6vw 1.4vw;
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:18px;
transition:transform .25s, border-color .25s, background .25s, box-shadow .25s;
}
.service-feature:hover{
background:#fff;
border-color:rgba(122,47,60,0.18);
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(15,17,21,0.06);
}
/* Иконка в стиле главной — без плашки, тонкая бордовая */
.service-feature-icon{
flex-shrink:0;
width:2.2vw;height:2.2vw;min-width:32px;min-height:32px;
display:flex;align-items:center;justify-content:center;
color:var(--burgundy);
transition:color .25s, transform .25s;
}
.service-feature:hover .service-feature-icon{
color:var(--burgundy-dk);
transform:scale(1.1);
}
.service-feature-icon svg{
width:2vw;height:2vw;min-width:28px;min-height:28px;
stroke-width:1.6;
}
.service-feature-content{flex:1;min-width:0}
.service-feature-title{
font-size:1.1vw;font-weight:800;color:var(--ink-dk);
letter-spacing:-0.01em;margin:0 0 0.5vh;line-height:1.25;
}
.service-feature-desc{
font-size:0.92vw;line-height:1.5;color:var(--ink);margin:0;
}
/* === ПРОЦЕСС — этапы === */
.service-process{margin:8vh var(--side-pad) 0}
.service-process-inner{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.service-process-head{margin-bottom:5vh}
.service-process-head .section-kicker{margin-bottom:1.5vh}
.service-process-title{
font-size:2.4vw;font-weight:800;
letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0;
}
.service-process-steps{
display:grid;grid-template-columns:repeat(4,1fr);
gap:1.5vw;
}
.service-step{
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:var(--rad-md);
padding:2vw 2vw;
position:relative;
transition:transform .25s, border-color .25s, box-shadow .25s;
}
.service-step:hover{
transform:translateY(-3px);
border-color:rgba(122,47,60,0.20);
box-shadow:0 10px 28px rgba(15,17,21,0.06);
}
.service-step-num{
font-family:'Caveat',cursive;
font-size:3vw;color:var(--gold);font-weight:600;
line-height:1;margin-bottom:1.5vh;
}
.service-step-title{
font-size:1.2vw;font-weight:800;
color:var(--ink-dk);line-height:1.2;
margin:0 0 1vh;letter-spacing:-0.01em;
}
.service-step-desc{
font-size:0.9vw;line-height:1.5;color:var(--ink);margin:0;
}
/* === КЕЙСЫ === */
.service-cases{margin:8vh var(--side-pad) 0}
.service-cases-inner{
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.service-cases-head{
margin-bottom:5vh;display:flex;flex-wrap:wrap;align-items:flex-end;
gap:2vw;justify-content:space-between;
}
.service-cases-head-text{flex:1;max-width:60%}
.service-cases-head .section-kicker{margin-bottom:1.5vh}
.service-cases-title{
font-size:2.4vw;font-weight:800;
letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0 0 2vh;
}
.service-cases-lead{
font-size:1vw;line-height:1.65;color:var(--ink);margin:0;
}
.service-cases-all{
display:inline-flex;align-items:center;gap:0.6vw;
padding:0.95vw 1.6vw;
background:transparent;
color:var(--burgundy);
border:1px solid var(--burgundy);
border-radius:100px;
font-size:0.9vw;font-weight:700;
text-decoration:none;
transition:all .3s;
white-space:nowrap;flex-shrink:0;
margin-bottom:0.5vh;
}
.service-cases-all--mobile{display:none}
.service-cases-all:hover{
background:var(--burgundy);color:#fff;transform:translateY(-2px);
}
.service-cases-all .arrow{font-size:1vw;transition:transform .3s}
.service-cases-all:hover .arrow{transform:translateX(3px)}
.service-cases-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:1.5vw;
}
.service-cases-grid.is-count-1{grid-template-columns:minmax(0, 32%)}
.service-cases-grid.is-count-2{grid-template-columns:minmax(0, 32%) minmax(0, 32%)}
.service-case-card{
display:flex;flex-direction:column;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-md);
text-decoration:none;
transition:transform .25s, border-color .25s, box-shadow .25s;
overflow:hidden;
}
.service-case-card:hover{
transform:translateY(-4px);
border-color:rgba(122,47,60,0.20);
box-shadow:0 18px 40px rgba(15,17,21,0.10);
}
.service-case-cover{
position:relative;aspect-ratio:16/9;
background-color:#2a1810;background-size:cover;background-position:center;
}
.service-case-cover-overlay{
position:absolute;inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%);
}
.service-case-body{
padding:2vw 1.8vw 1.8vw;
display:flex;flex-direction:column;flex:1;
}
.service-case-tag{
display:inline-block;align-self:flex-start;
padding:0.3vw 0.9vw;
background:rgba(122,47,60,0.10);
color:var(--burgundy);
border-radius:100px;
font-size:0.72vw;font-weight:700;letter-spacing:0.06em;
text-transform:uppercase;
margin-bottom:1.5vh;
}
.service-case-title{
font-size:1.2vw;font-weight:800;color:var(--ink-dk);
line-height:1.2;margin:0 0 1.2vh;letter-spacing:-0.01em;
}
.service-case-excerpt{
font-size:0.9vw;line-height:1.55;color:var(--ink);margin:0 0 1.8vh;
}
.service-case-more{
margin-top:auto;
display:inline-flex;align-items:center;gap:0.4vw;
font-size:0.9vw;font-weight:700;color:var(--burgundy);
}
.service-case-more .arrow{transition:transform .25s}
.service-case-card:hover .service-case-more .arrow{transform:translateX(4px)}
/* === СТОИМОСТЬ — бордовый градиент === */
.service-price{margin:8vh var(--side-pad) 0}
.service-price-inner{
background:linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-dk) 100%);
border-radius:var(--rad-lg);
padding:6vw 4vw;
position:relative;overflow:hidden;
}
.service-price-inner::before{
content:"";position:absolute;top:-30%;right:-20%;
width:60%;aspect-ratio:1/1;
background:radial-gradient(circle, rgba(176,141,87,0.30) 0%, rgba(176,141,87,0) 60%);
pointer-events:none;
}
.service-price-inner::after{
content:"";position:absolute;bottom:-20%;left:-10%;
width:40%;aspect-ratio:1/1;
background:radial-gradient(circle, rgba(176,141,87,0.18) 0%, rgba(176,141,87,0) 60%);
pointer-events:none;
}
.service-price-head{
margin-bottom:4vh;position:relative;z-index:2;
}
.service-price-head .section-kicker{
color:var(--gold);margin-bottom:1.5vh;
}
.service-price-title{
font-size:3vw;font-weight:900;
letter-spacing:-0.025em;line-height:1.05;
color:#fff;margin:0 0 2vh;
}
.service-price-title em{font-style:normal;color:var(--gold)}
.service-price-lead{
font-size:1.05vw;line-height:1.6;color:rgba(255,255,255,0.85);margin:0;
}
.service-price-grid{
display:flex;flex-direction:column;
gap:1vh;
margin-bottom:4vh;
position:relative;z-index:2;
}
.service-price-item{
display:flex;align-items:center;justify-content:space-between;gap:2vw;
padding:1.6vh 1.6vw;
background:rgba(255,255,255,0.06);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,0.10);
border-radius:14px;
transition:background .25s, border-color .25s;
}
.service-price-item:hover{
background:rgba(255,255,255,0.10);
border-color:rgba(176,141,87,0.30);
}
.service-price-item-text{
font-size:1.05vw;color:#fff;font-weight:500;
}
.service-price-item-value{
font-size:1.2vw;color:var(--gold);font-weight:800;
white-space:nowrap;
}
/* Белая прозрачная кнопка с белым текстом */
.service-price-cta{
position:relative;z-index:2;
display:inline-flex;align-items:center;gap:0.5vw;
padding:1.6vh 2.2vw;
background:rgba(255,255,255,0.08);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
color:#fff;
border:1.5px solid rgba(255,255,255,0.50);
border-radius:100px;
font-size:1vw;font-weight:700;cursor:pointer;
text-decoration:none;
transition:all .25s;
}
.service-price-cta:hover{
background:#fff;
color:var(--burgundy);
border-color:#fff;
transform:translateY(-2px);
box-shadow:0 14px 32px rgba(255,255,255,0.20);
}
.service-price-cta .arrow{transition:transform .25s}
.service-price-cta:hover .arrow{transform:translateX(4px)}
/* ============================================================
АДАПТИВ — Планшет (768-1199)
============================================================ */
@media (max-width:1199px){
.service-page{padding-bottom:0}
.service-hero{margin:8px 0 0;border-radius:20px;border-left:none;border-right:none;aspect-ratio:auto}
.service-hero-top{left:28px;top:32px;right:28px}
.service-hero-top .breadcrumbs{font-size:11px;gap:6px}
.service-hero-top .breadcrumbs a,
.service-hero-top .breadcrumbs .current{padding:5px 11px;font-size:11px}
.service-hero-bottom{
padding:175px 28px 40px !important;max-width:none;
}
.service-hero-kicker{font-size:11px;margin-bottom:10px}
.service-hero-kicker::before{width:18px}
.service-hero-title{font-size:30px;line-height:1.1}
.service-hero-sub{font-size:14.5px;max-width:none;margin-bottom:24px}
.service-hero-cta{gap:14px}
.service-hero-cta-btn{padding:13px 22px;font-size:14px;gap:6px}
.service-hero-cta-link{font-size:13.5px}
.service-hero-stats{padding:14px 28px}
.service-hero-stat .value{font-size:22px}
.service-hero-stat .label{font-size:11.5px}
.service-features,
.service-process,
.service-cases,
.service-price{margin:6vh 0 0}
.service-features-inner{
display:block !important;
padding:32px 28px;border-radius:20px;border-left:none;border-right:none;
}
.service-features-text{position:static;margin-bottom:28px}
.service-features-text .section-kicker{margin-bottom:10px}
.service-features-title{font-size:26px;margin-bottom:14px}
.service-features-lead{font-size:14.5px;margin-bottom:18px}
.service-features-cta{padding:13px 22px;font-size:14px;gap:6px}
.service-features-list{grid-template-columns:1fr 1fr;gap:12px}
.service-feature{padding:18px 16px;gap:12px;border-radius:14px}
.service-feature-icon{width:32px;height:32px}
.service-feature-icon svg{width:28px;height:28px}
.service-feature-title{font-size:15.5px;margin-bottom:4px}
.service-feature-desc{font-size:13.5px;line-height:1.5}
.service-process-inner,
.service-cases-inner,
.service-price-inner{padding:32px 28px;border-radius:20px;border-left:none;border-right:none}
.service-process-head,
.service-cases-head,
.service-price-head{margin-bottom:24px;max-width:none}
.service-process-title,
.service-cases-title{font-size:26px}
.service-price-title{font-size:30px}
.service-price-lead{font-size:14.5px}
.service-process-steps{grid-template-columns:1fr 1fr;gap:14px}
.service-step{padding:22px 20px;border-radius:16px}
.service-step-num{font-size:36px;margin-bottom:10px}
.service-step-title{font-size:17px}
.service-step-desc{font-size:13.5px}
/* Кейсы — карусель */
.service-cases-head{flex-direction:column;align-items:flex-start;gap:18px}
.service-cases-head-text{max-width:none}
.service-cases-head .service-cases-all{display:none}
.service-cases-all--mobile{
display:flex;align-items:center;justify-content:center;gap:8px;
margin-top:18px;padding:14px 20px;
border:1.5px solid var(--burgundy);color:var(--burgundy);
border-radius:100px;font-size:14px;font-weight:700;
text-decoration:none;width:100%;background:transparent;
transition:background .25s, color .25s;
}
.service-cases-all--mobile:hover{background:var(--burgundy);color:#fff}
.service-cases-all--mobile .arrow{font-size:16px;transition:transform .25s}
.service-cases-all--mobile:hover .arrow{transform:translateX(3px)}
.service-cases-grid{
display:flex !important;
grid-template-columns:none;
gap:14px;
overflow-x:auto;overflow-y:visible;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;
scrollbar-width:none;
margin-left:-28px;margin-right:-28px;
padding:14px 0 8px;
scroll-padding-left:28px;
}
.service-cases-grid::-webkit-scrollbar{display:none}
.service-case-card{flex:0 0 70%;max-width:380px;scroll-snap-align:start}
.service-cases-grid > .service-case-card:first-child{margin-left:28px}
.service-cases-grid > .service-case-card:last-child{margin-right:28px}
.service-case-body{padding:22px 20px 20px}
.service-case-tag{font-size:10.5px;padding:4px 12px}
.service-case-title{font-size:17px}
.service-case-excerpt{font-size:13.5px}
.service-case-more{font-size:13.5px}
/* Цена */
.service-price-grid{margin-bottom:24px;gap:8px}
.service-price-item{padding:14px 18px;flex-wrap:wrap;gap:8px;border-radius:12px}
.service-price-item-text{font-size:14.5px}
.service-price-item-value{font-size:16px}
.service-price-cta{padding:14px 22px;font-size:14px}
}
/* ============================================================
АДАПТИВ — Мобила (≤767)
============================================================ */
@media (max-width:767px){
.service-hero{margin:6px 0 0;border-radius:16px}
.service-hero-top{left:22px;top:28px;right:22px}
.service-hero-top .breadcrumbs{font-size:10.5px;gap:4px;flex-wrap:nowrap;overflow:hidden}
.service-hero-top .breadcrumbs a,
.service-hero-top .breadcrumbs .current{
padding:3px 8px;font-size:10.5px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
min-width:0;
}
.service-hero-bottom{padding:150px 22px 35px !important}
.service-hero-title{font-size:24px}
.service-hero-sub{font-size:13.5px}
.service-hero-cta{flex-direction:column;align-items:flex-start;gap:12px}
.service-hero-cta-btn{padding:13px 22px;font-size:13.5px}
.service-hero-stats{
grid-template-columns:1fr;padding:12px 22px;gap:0;
}
.service-hero-stat{
padding:8px 0;border-right:none;
border-bottom:1px solid rgba(255,255,255,0.20);
}
.service-hero-stat + .service-hero-stat{padding-left:0}
.service-hero-stat:last-child{border-bottom:none}
.service-hero-stat .value{font-size:18px}
.service-hero-stat .label{font-size:11px}
.service-features,
.service-process,
.service-cases,
.service-price{margin:28px 0 0}
.service-features-inner,
.service-process-inner,
.service-cases-inner,
.service-price-inner{padding:28px 22px;border-radius:16px}
.service-features-title,
.service-process-title,
.service-cases-title{font-size:22px}
.service-price-title{font-size:24px}
.service-features-inner{padding:28px 22px;border-radius:16px}
.service-features-text{margin-bottom:22px}
.service-features-title{font-size:22px}
.service-features-lead{font-size:14px}
.service-features-cta{padding:13px 22px;font-size:13.5px}
.service-features-list{grid-template-columns:1fr;gap:10px}
.service-feature{padding:16px 14px;gap:12px}
.service-feature-title{font-size:15px}
.service-feature-desc{font-size:13px}
.service-process-steps{grid-template-columns:1fr;gap:10px}
.service-step{padding:20px 18px;border-radius:14px}
.service-step-num{font-size:32px}
.service-step-title{font-size:16px}
/* Кейсы — карусель -22px */
.service-cases-grid{
margin-left:-22px;margin-right:-22px;
scroll-padding-left:22px;gap:12px;
}
.service-case-card{flex:0 0 84%;max-width:none}
.service-cases-grid > .service-case-card:first-child{margin-left:22px}
.service-cases-grid > .service-case-card:last-child{margin-right:22px}
.service-case-body{padding:20px 18px}
.service-case-title{font-size:16px}
.service-cases-all--mobile{
margin-top:14px;padding:13px 18px;font-size:13.5px;
}
/* Цена */
.service-price-grid{margin-bottom:20px;gap:8px}
.service-price-item{padding:12px 14px;border-radius:10px}
.service-price-item-text{font-size:13.5px}
.service-price-item-value{font-size:14.5px}
.service-price-cta{padding:13px 22px;font-size:13.5px}
.service-faq{margin:28px 0 0}
}
/* ============================================================
ПОДУСЛУГИ — общие переменные и контейнер
============================================================ */
.subservice-page{padding:0 0 8vh}
/* (старые .breadcrumbs удалены — теперь используется .breadcrumbs через ye_breadcrumbs()) */
/* ============================================================
СТИЛЬ A — БОЛЬ И РЕШЕНИЕ (.subservice-pain)
============================================================ */
.sub-pain-hero{
margin:var(--hdr-gap) var(--side-pad) 0;
display:grid;grid-template-columns:1.2fr 1fr;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
overflow:hidden;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
position:relative;
}
.sub-pain-hero::before{
content:"";position:absolute;left:0;top:0;width:100%;height:6px;z-index:3;
background:linear-gradient(90deg, var(--burgundy) 0%, var(--gold) 100%);
}
.sub-pain-hero-left{padding:5vh 4vw 4vh}
.sub-pain-hero-left .breadcrumbs{margin-top:0;margin-bottom:2vh}
.sub-pain-tag-row{display:flex;align-items:center;gap:0.8vw;margin-bottom:2vh}
.sub-pain-tag{
font-size:0.78vw;letter-spacing:0.18em;text-transform:uppercase;
color:var(--gold);font-weight:800;
display:flex;align-items:center;gap:0.6vw;
}
.sub-pain-tag::before{
content:"";display:inline-block;width:1.6vw;height:1px;background:var(--gold);
}
.sub-pain-title{
font-size:3vw;font-weight:900;letter-spacing:-0.025em;line-height:1.05;
color:var(--ink-dk);margin:0 0 2vh;
}
.sub-pain-title em{font-style:normal;color:var(--burgundy)}
.sub-pain-sub{
font-size:1.05vw;line-height:1.6;color:var(--ink);margin-bottom:3vh;
}
.sub-pain-stats{
display:flex;gap:2.5vw;margin-bottom:3vh;
padding:2vh 0;
border-top:1px solid var(--divider);
border-bottom:1px solid var(--divider);
}
.sub-pain-stat .v{
font-size:1.8vw;font-weight:900;color:var(--burgundy);
line-height:1;letter-spacing:-0.02em;margin-bottom:0.4vh;
}
.sub-pain-stat .l{font-size:0.78vw;color:var(--mute);font-weight:600}
.sub-pain-cta{display:flex;gap:1vw;flex-wrap:wrap}
.sub-pain-btn{
display:inline-flex;align-items:center;gap:0.5vw;
padding:1.4vh 1.8vw;
background:var(--burgundy);color:#fff;
border-radius:100px;font-size:1vw;font-weight:700;
text-decoration:none;
transition:all .25s;
}
.sub-pain-btn:hover{background:var(--burgundy-dk);transform:translateY(-2px);box-shadow:0 14px 32px rgba(122,47,60,0.30)}
.sub-pain-btn-2{
display:inline-flex;align-items:center;gap:0.5vw;
padding:1.4vh 1.8vw;
background:transparent;color:var(--ink-dk);
border:1.5px solid var(--ink-dk);
border-radius:100px;font-size:1vw;font-weight:700;
text-decoration:none;
transition:all .25s;
}
.sub-pain-btn-2:hover{background:var(--ink-dk);color:#fff;transform:translateY(-2px)}
.sub-pain-hero-right{
background:linear-gradient(135deg, #FAF8F4 0%, #F4F1EC 100%);
padding:5vh 4vw 4vh;position:relative;
}
.sub-pain-hero-right::before{
content:"";position:absolute;
top:-30px;right:-30px;width:200px;height:200px;
background:radial-gradient(circle,rgba(176,141,87,0.18) 0%,rgba(176,141,87,0) 70%);
}
.sub-pain-checklist-title{
font-size:0.78vw;letter-spacing:0.12em;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:1.5vh;
position:relative;z-index:2;
}
.sub-pain-checklist-h{
font-size:1.4vw;font-weight:800;color:var(--ink-dk);
letter-spacing:-0.015em;line-height:1.2;margin:0 0 2.5vh;
position:relative;z-index:2;
}
.sub-pain-checklist{
display:flex;flex-direction:column;gap:1vh;
position:relative;z-index:2;
}
.sub-pain-check-item{
display:flex;align-items:flex-start;gap:0.8vw;
padding:1.2vh 1.2vw;
background:rgba(255,255,255,0.7);
border:1px solid rgba(122,47,60,0.10);
border-radius:14px;
transition:all .2s;
}
.sub-pain-check-item:hover{
background:#fff;
border-color:rgba(122,47,60,0.25);
transform:translateX(4px);
}
.sub-pain-check-icon{
flex-shrink:0;width:24px;height:24px;
background:var(--burgundy);color:#fff;border-radius:50%;
display:flex;align-items:center;justify-content:center;
}
.sub-pain-check-icon svg{width:13px;height:13px;stroke-width:3}
.sub-pain-check-text{
font-size:0.92vw;line-height:1.45;color:var(--ink-dk);font-weight:600;
}
/* Шахматка проблема→решение */
.sub-pain-pairs{
margin:8vh var(--side-pad) 0;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.sub-pain-pairs-head{margin-bottom:5vh}
.sub-pain-pairs-head .section-kicker{margin-bottom:1.5vh}
.sub-pain-pairs-title{
font-size:2.4vw;font-weight:800;letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0;
}
.sub-pain-pairs-title em{font-style:normal;color:var(--burgundy)}
.sub-pain-pairs-list{display:flex;flex-direction:column;gap:1vh}
.sub-pain-pair{
display:grid;grid-template-columns:1fr 60px 1fr;gap:1vw;
align-items:stretch;
}
.sub-pain-pair-problem{
padding:2vh 1.6vw;
background:#FBF6F6;
border:1px solid rgba(184,69,69,0.20);
border-left:4px solid #B84545;
border-radius:14px;
}
.sub-pain-pair-arrow{
display:flex;align-items:center;justify-content:center;color:var(--gold);
}
.sub-pain-pair-arrow svg{width:32px;height:32px}
.sub-pain-pair-solution{
padding:2vh 1.6vw;
background:#F6FAF6;
border:1px solid rgba(79,127,74,0.20);
border-left:4px solid #4F7F4A;
border-radius:14px;
}
.sub-pain-pair-label{
font-size:0.7vw;letter-spacing:0.10em;text-transform:uppercase;
font-weight:800;margin-bottom:0.5vh;
}
.sub-pain-pair-problem .sub-pain-pair-label{color:#B84545}
.sub-pain-pair-solution .sub-pain-pair-label{color:#4F7F4A}
.sub-pain-pair-text{
font-size:1vw;line-height:1.5;color:var(--ink-dk);font-weight:600;
}
/* ============================================================
СТИЛЬ B — КАЛЬКУЛЯТОР ШАНСОВ (.subservice-quiz)
============================================================ */
.sub-quiz-hero{
margin:var(--hdr-gap) var(--side-pad) 0;
position:relative;
background:
linear-gradient(135deg, rgba(122,47,60,0.85) 0%, rgba(15,17,21,0.95) 50%, rgba(26,31,43,0.95) 100%),
url("data:image/svg+xml;utf8,");
border-radius:var(--rad-lg);overflow:hidden;
display:grid;grid-template-columns:1fr 1fr;
box-shadow:0 24px 60px rgba(15,17,21,0.30);
isolation:isolate;
}
.sub-quiz-hero::before{display:none}
.sub-quiz-hero::after{
content:"";position:absolute;
bottom:-30%;right:-10%;width:60%;height:60%;
background:radial-gradient(circle,rgba(122,47,60,0.40) 0%,rgba(122,47,60,0) 60%);
pointer-events:none;
z-index:1;
}
.sub-quiz-hero-left{
padding:5vh 4vw 4vh;
position:relative;z-index:2;
color:#fff;
display:flex;flex-direction:column;
}
.sub-quiz-hero-left .breadcrumbs{margin-bottom:auto;padding-bottom:3vh}
.sub-quiz-hero-left .sub-quiz-kicker{margin-top:auto}
.sub-quiz-kicker{
font-size:0.78vw;letter-spacing:0.18em;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:1.5vh;
display:flex;align-items:center;gap:0.6vw;
}
.sub-quiz-kicker::before{
content:"";display:inline-block;width:1.6vw;height:1px;background:var(--gold);
}
.sub-quiz-title{
font-size:3vw;font-weight:900;letter-spacing:-0.025em;line-height:1.05;
color:#fff;margin:0 0 2vh;
}
.sub-quiz-title em{font-style:normal;color:var(--gold)}
.sub-quiz-sub{
font-size:1.05vw;line-height:1.6;color:rgba(255,255,255,0.85);
margin-bottom:3vh;
}
.sub-quiz-stats{display:flex;gap:2.5vw}
.sub-quiz-stat .v{
font-size:1.8vw;font-weight:900;color:#fff;
line-height:1;letter-spacing:-0.02em;margin-bottom:0.4vh;
}
.sub-quiz-stat .l{font-size:0.78vw;color:rgba(255,255,255,0.60);font-weight:600}
.sub-quiz-card{
position:relative;z-index:2;
background:rgba(255,255,255,0.10);
-webkit-backdrop-filter:blur(24px) saturate(1.4);
backdrop-filter:blur(24px) saturate(1.4);
border:1px solid rgba(255,255,255,0.18);
margin:3vh 4vw 3vh 0;
border-radius:24px;
padding:2.5vw;
box-shadow:
0 24px 60px rgba(0,0,0,0.30),
inset 0 1px 0 rgba(255,255,255,0.20);
display:flex;flex-direction:column;
align-self:center;
color:#fff;
}
.sub-quiz-head{display:flex;align-items:center;gap:0.8vw;margin-bottom:0.8vh}
.sub-quiz-badge{
display:inline-flex;align-items:center;gap:6px;
padding:5px 12px;
background:rgba(176,141,87,0.20);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border:1px solid rgba(176,141,87,0.30);
color:var(--gold);border-radius:100px;
font-size:0.7vw;font-weight:800;letter-spacing:0.06em;
text-transform:uppercase;
}
.sub-quiz-card-title{
font-size:1.4vw;font-weight:800;color:#fff;
letter-spacing:-0.015em;margin-bottom:0.6vh;line-height:1.2;
}
.sub-quiz-card-sub{
font-size:0.88vw;color:rgba(255,255,255,0.65);margin-bottom:2.5vh;
}
.sub-quiz-progress{
display:flex;gap:6px;margin-bottom:2.5vh;
}
.sub-quiz-progress-step{
flex:1;height:4px;
background:rgba(255,255,255,0.15);
border-radius:2px;
transition:background .3s;
}
.sub-quiz-progress-step.is-active{background:var(--gold)}
.sub-quiz-progress-step.is-done{background:rgba(176,141,87,0.6)}
.sub-quiz-step{display:none}
.sub-quiz-step.is-active{display:block}
.sub-quiz-q{
font-size:1.1vw;font-weight:800;color:#fff;
margin-bottom:2vh;line-height:1.3;
}
.sub-quiz-options{display:flex;flex-direction:column;gap:0.8vh;margin-bottom:2.5vh}
.sub-quiz-option{
display:flex;align-items:center;gap:0.8vw;
padding:1.5vh 1.2vw;
background:rgba(255,255,255,0.06);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border:1.5px solid rgba(255,255,255,0.14);
border-radius:14px;
font-size:0.95vw;font-weight:600;color:#fff;
cursor:pointer;
transition:all .2s;
}
.sub-quiz-option:hover{
background:rgba(255,255,255,0.12);
border-color:rgba(176,141,87,0.50);
transform:translateX(4px);
}
.sub-quiz-option-radio{
flex-shrink:0;width:20px;height:20px;
border:2px solid rgba(255,255,255,0.30);
border-radius:50%;
transition:all .2s;
position:relative;
}
.sub-quiz-option:hover .sub-quiz-option-radio{border-color:var(--gold)}
.sub-quiz-option.is-checked{
background:rgba(176,141,87,0.20);
border-color:var(--gold);
}
.sub-quiz-option.is-checked .sub-quiz-option-radio{
border-color:var(--gold);
background:var(--gold);
}
.sub-quiz-option.is-checked .sub-quiz-option-radio::after{
content:"";position:absolute;inset:3px;background:var(--ink-dk);border-radius:50%;
}
.sub-quiz-footer{
display:flex;justify-content:space-between;align-items:center;
}
.sub-quiz-prev{
background:transparent;border:none;color:rgba(255,255,255,0.60);
font-size:0.92vw;font-weight:600;cursor:pointer;
}
.sub-quiz-prev:hover{color:#fff}
.sub-quiz-prev:disabled{opacity:0.3;cursor:not-allowed}
.sub-quiz-next{
display:inline-flex;align-items:center;gap:0.5vw;
padding:1.3vh 1.8vw;
background:var(--gold);color:var(--ink-dk);
border:none;border-radius:100px;
font-size:0.95vw;font-weight:700;cursor:pointer;
transition:all .25s;
}
.sub-quiz-next:hover:not(:disabled){background:var(--gold-soft, #C9A06B);transform:translateY(-2px);box-shadow:0 14px 32px rgba(176,141,87,0.40)}
.sub-quiz-next:disabled{opacity:0.4;cursor:not-allowed}
/* Результат квиза */
.sub-quiz-result{text-align:center;padding:1vh 0}
.sub-quiz-result-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:1.5vh;color:#7a2f3c}
.sub-quiz-result-icon svg{width:100%;height:100%}
.sub-quiz-result-title{
font-size:1.6vw;font-weight:900;color:#fff;
margin-bottom:1.5vh;letter-spacing:-0.015em;
}
.sub-quiz-result-title span{color:var(--gold)}
.sub-quiz-result-text{
font-size:1vw;line-height:1.55;color:rgba(255,255,255,0.85);margin-bottom:2.5vh;
}
.sub-quiz-btn{
display:inline-flex;align-items:center;gap:0.5vw;
padding:1.5vh 2vw;
background:var(--gold);color:var(--ink-dk);
border-radius:100px;font-size:1vw;font-weight:800;
text-decoration:none;
transition:all .25s;
}
.sub-quiz-btn:hover{background:var(--gold-soft, #C9A06B);transform:translateY(-2px);box-shadow:0 14px 32px rgba(176,141,87,0.40)}
/* ============================================================
СТИЛЬ C — КЕЙС/TIMELINE (.subservice-case)
============================================================ */
.sub-case-hero{
position:relative;
margin:var(--hdr-gap) var(--side-pad) 0;
border-radius:var(--rad-lg);
overflow:hidden;
background:var(--ink-dk);
border:1px solid var(--divider);
min-height:60vh;
box-shadow:0 24px 60px rgba(15,17,21,0.10);
}
.sub-case-hero-bg{
position:absolute;inset:0;
background-size:cover;background-position:center;
background-color:#2a1810;
}
.sub-case-hero-overlay{
position:absolute;inset:0;
background:linear-gradient(135deg,rgba(15,17,21,0.85) 0%,rgba(15,17,21,0.65) 50%,rgba(15,17,21,0.85) 100%);
}
.sub-case-hero-top{
position:absolute;left:4vw;top:5vh;right:4vw;z-index:3;
}
/* (стили крошек на тёмном фото — ниже в общем блоке .subservice-case) */
.sub-case-hero-content{
position:relative;z-index:2;
padding:18vh 4vw 4vh;
display:grid;grid-template-columns:1.3fr 1fr;gap:4vw;
align-items:end;
color:#fff;
}
.sub-case-kicker{
font-size:0.78vw;letter-spacing:0.18em;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:1.5vh;
display:flex;align-items:center;gap:0.6vw;
}
.sub-case-kicker::before{
content:"";display:inline-block;width:1.6vw;height:1px;background:var(--gold);
}
.sub-case-title{
font-size:3vw;font-weight:900;letter-spacing:-0.025em;line-height:1.05;
color:#fff;margin:0 0 2vh;
text-shadow:0 2px 16px rgba(0,0,0,0.40);
}
.sub-case-title em{font-style:normal;color:var(--gold)}
.sub-case-sub{
font-size:1.05vw;line-height:1.6;color:rgba(255,255,255,0.92);
margin-bottom:3vh;
}
.sub-case-cta{display:flex;gap:1vw;flex-wrap:wrap}
.sub-case-btn{
display:inline-flex;align-items:center;gap:0.5vw;
padding:1.4vh 1.8vw;
background:var(--burgundy);color:#fff;
border-radius:100px;font-size:1vw;font-weight:700;
text-decoration:none;
transition:all .25s;
}
.sub-case-btn:hover{background:var(--burgundy-dk);transform:translateY(-2px);box-shadow:0 14px 32px rgba(122,47,60,0.40)}
.sub-case-btn-2{
display:inline-flex;align-items:center;gap:0.5vw;
padding:1.4vh 1.8vw;
background:rgba(255,255,255,0.10);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
color:#fff;border:1.5px solid rgba(255,255,255,0.30);
border-radius:100px;font-size:1vw;font-weight:700;
text-decoration:none;
transition:all .25s;
}
.sub-case-btn-2:hover{background:#fff;color:var(--ink-dk);border-color:#fff}
.sub-case-result{
background:rgba(255,255,255,0.08);
-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,0.16);
border-radius:24px;
padding:2.5vw 2vw;
box-shadow:0 24px 60px rgba(0,0,0,0.30);
}
.sub-case-result-label{
font-size:0.75vw;letter-spacing:0.14em;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:1.5vh;
}
.sub-case-result-num{
font-size:4vw;font-weight:900;color:#fff;
letter-spacing:-0.03em;line-height:1;margin-bottom:1vh;
}
.sub-case-result-num em{font-style:normal;color:var(--gold);font-size:0.5em;font-weight:800}
.sub-case-result-title{
font-size:1.05vw;line-height:1.4;color:rgba(255,255,255,0.90);
font-weight:600;margin-bottom:2vh;
}
.sub-case-result-meta{
display:flex;gap:1.4vw;flex-wrap:wrap;
padding-top:1.8vh;border-top:1px solid rgba(255,255,255,0.16);
font-size:0.85vw;color:rgba(255,255,255,0.65);
}
.sub-case-result-meta strong{color:#fff;font-weight:700}
/* Timeline в стиле кейса (с анимацией заполнения) */
.sub-case-timeline-block{
margin:8vh var(--side-pad) 0;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.sub-case-timeline-head{margin-bottom:5vh}
.sub-case-timeline-head .section-kicker{margin-bottom:1.5vh}
.sub-case-timeline-title{
font-size:2.4vw;font-weight:800;letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0 0 2vh;
max-width:900px;
}
.sub-case-timeline-title em{font-style:normal;color:var(--burgundy)}
.sub-case-timeline-lead{font-size:1.05vw;line-height:1.6;color:var(--ink);margin:0}
/* Используем уже существующий стиль .case-timeline (с анимацией) */
.sub-case-timeline-block .case-timeline{padding-left:5vw}
.sub-case-timeline-block .case-step{padding-bottom:4vh}
.sub-case-timeline-block .case-step-bullet{
width:3.7vw;height:3.7vw;min-width:48px;min-height:48px;
}
.sub-case-timeline-block .case-step-meta{
margin-top:1.2vh;
display:inline-flex;align-items:center;gap:0.6vw;
padding:1vh 1.2vw;
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:12px;
}
.sub-case-timeline-block .case-step-meta-l{
font-size:0.7vw;letter-spacing:0.10em;text-transform:uppercase;
color:var(--gold);font-weight:800;
}
.sub-case-timeline-block .case-step-meta-v{
font-size:0.92vw;font-weight:700;color:var(--ink-dk);
}
/* CTA после timeline */
.sub-case-cta-block{
margin:8vh var(--side-pad) 0;
background:linear-gradient(135deg,var(--burgundy) 0%,var(--burgundy-dk) 100%);
border-radius:var(--rad-lg);
padding:6vw 4vw;
position:relative;overflow:hidden;
text-align:center;
}
.sub-case-cta-block::before{
content:"";position:absolute;
top:-30%;right:-20%;width:60%;aspect-ratio:1/1;
background:radial-gradient(circle,rgba(176,141,87,0.30) 0%,rgba(176,141,87,0) 60%);
}
.sub-case-cta-title{
font-size:2.6vw;font-weight:900;letter-spacing:-0.02em;line-height:1.1;
color:#fff;margin-bottom:1.5vh;position:relative;z-index:2;
}
.sub-case-cta-title em{font-style:normal;color:var(--gold)}
.sub-case-cta-lead{
font-size:1.05vw;line-height:1.55;color:rgba(255,255,255,0.85);
margin:0 auto 3vh;max-width:42em;position:relative;z-index:2;
}
.sub-case-cta-btn{
display:inline-flex;align-items:center;gap:0.5vw;
padding:1.6vh 2.2vw;
background:var(--gold);color:var(--ink-dk);
border-radius:100px;font-size:1.05vw;font-weight:800;
text-decoration:none;
position:relative;z-index:2;
transition:all .25s;
}
.sub-case-cta-btn:hover{background:var(--gold-soft, #C9A06B);transform:translateY(-2px);box-shadow:0 14px 32px rgba(176,141,87,0.40)}
/* ============================================================
ОБЩИЕ БЛОКИ — Кейсы и Блог
============================================================ */
.sub-cases,
.sub-blog{
margin:8vh var(--side-pad) 0;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
/* Кейсы — повторяем стиль service-cases */
.sub-cases-head,
.sub-blog-head{
margin-bottom:5vh;display:flex;flex-wrap:wrap;align-items:flex-end;
gap:2vw;justify-content:space-between;
}
.sub-cases-head-text,
.sub-blog-head-text{flex:1;max-width:60%}
.sub-cases-head .section-kicker,
.sub-blog-head .section-kicker{margin-bottom:1.5vh}
.sub-cases-title,
.sub-blog-title{
font-size:2.4vw;font-weight:800;letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0 0 2vh;
}
.sub-cases-title em,
.sub-blog-title em{font-style:normal;color:var(--burgundy)}
.sub-cases-lead,
.sub-blog-lead{font-size:1vw;line-height:1.65;color:var(--ink);margin:0}
.sub-cases-all,
.sub-blog-all{
display:inline-flex;align-items:center;gap:0.6vw;
padding:0.95vw 1.6vw;
background:transparent;color:var(--burgundy);
border:1px solid var(--burgundy);border-radius:100px;
font-size:0.9vw;font-weight:700;text-decoration:none;
transition:all .3s;white-space:nowrap;
}
.sub-cases-all:hover,
.sub-blog-all:hover{background:var(--burgundy);color:#fff;transform:translateY(-2px)}
.sub-cases-all--mobile,
.sub-blog-all--mobile{display:none}
.sub-cases-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:1.5vw;
}
.sub-cases-grid.is-count-1{grid-template-columns:minmax(0, 32%)}
.sub-cases-grid.is-count-2{grid-template-columns:minmax(0, 32%) minmax(0, 32%)}
.sub-case-card{
display:flex;flex-direction:column;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-md);
text-decoration:none;
transition:all .25s;overflow:hidden;
}
.sub-case-card:hover{transform:translateY(-4px);border-color:rgba(122,47,60,0.20);box-shadow:0 18px 40px rgba(15,17,21,0.10)}
.sub-case-cover{
position:relative;aspect-ratio:16/9;
background-color:#2a1810;background-size:cover;background-position:center;
}
.sub-case-cover-ovl{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,0.45) 100%);
}
.sub-case-body{padding:2vw 1.8vw 1.8vw;display:flex;flex-direction:column;flex:1}
.sub-case-tag{
display:inline-block;align-self:flex-start;
padding:0.3vw 0.9vw;
background:rgba(122,47,60,0.10);color:var(--burgundy);
border-radius:100px;font-size:0.72vw;font-weight:700;letter-spacing:0.06em;
text-transform:uppercase;margin-bottom:1.5vh;
}
.sub-case-card-title{
font-size:1.2vw;font-weight:800;color:var(--ink-dk);
line-height:1.2;margin:0 0 1.2vh;letter-spacing:-0.01em;
}
.sub-case-card-excerpt{
font-size:0.9vw;line-height:1.55;color:var(--ink);margin:0 0 1.8vh;
}
.sub-case-more{
margin-top:auto;
display:inline-flex;align-items:center;gap:0.4vw;
font-size:0.9vw;font-weight:700;color:var(--burgundy);
}
/* Блог */
.sub-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5vw}
.sub-blog-card{
display:flex;flex-direction:column;
background:#FAFAF9;border:1px solid var(--divider);
border-radius:var(--rad-md);text-decoration:none;
transition:all .25s;overflow:hidden;
}
.sub-blog-card:hover{
background:#fff;border-color:rgba(122,47,60,0.18);
transform:translateY(-3px);box-shadow:0 14px 32px rgba(15,17,21,0.06);
}
.sub-blog-card-cover{
aspect-ratio:16/9;
background-size:cover;background-position:center;
background-color:#2a1810;
}
.sub-blog-card-body{padding:1.8vw 1.6vw;flex:1;display:flex;flex-direction:column}
.sub-blog-card-meta{
font-size:0.7vw;letter-spacing:0.10em;text-transform:uppercase;
color:var(--gold);font-weight:800;margin-bottom:1vh;
}
.sub-blog-card-title{
font-size:1.1vw;font-weight:800;color:var(--ink-dk);
letter-spacing:-0.01em;margin-bottom:1vh;line-height:1.25;
}
.sub-blog-card-excerpt{
font-size:0.88vw;line-height:1.5;color:var(--ink);margin-bottom:1.4vh;
}
.sub-blog-card-more{
margin-top:auto;
display:inline-flex;align-items:center;gap:0.4vw;
font-size:0.88vw;font-weight:700;color:var(--burgundy);
}
/* ============================================================
АДАПТИВ — Планшет и мобила
============================================================ */
@media (max-width:1199px){
.subservice-page{padding-bottom:0}
.breadcrumbs{font-size:11.5px;gap:6px}
/* PAIN адаптив */
.sub-pain-hero{
margin:8px 0 0;border-radius:20px;border-left:none;border-right:none;
grid-template-columns:1fr;
}
.sub-pain-hero-left,
.sub-pain-hero-right{padding:32px 28px}
.sub-pain-tag{font-size:11px}
.sub-pain-title{font-size:30px}
.sub-pain-sub{font-size:14.5px}
.sub-pain-stats{gap:24px}
.sub-pain-stat .v{font-size:22px}
.sub-pain-stat .l{font-size:11.5px}
.sub-pain-btn,.sub-pain-btn-2{padding:13px 22px;font-size:14px}
.sub-pain-checklist-title{font-size:11px}
.sub-pain-checklist-h{font-size:20px;margin-bottom:18px}
.sub-pain-check-item{padding:12px 14px;gap:12px}
.sub-pain-check-text{font-size:14px}
.sub-pain-pairs{margin:6vh 0 0;border-radius:20px;border-left:none;border-right:none;padding:32px 28px}
.sub-pain-pairs-head{margin-bottom:24px}
.sub-pain-pairs-title{font-size:26px}
.sub-pain-pair{grid-template-columns:1fr;gap:8px}
.sub-pain-pair-arrow{transform:rotate(90deg);padding:4px 0}
.sub-pain-pair-arrow svg{width:24px;height:24px}
.sub-pain-pair-problem,
.sub-pain-pair-solution{padding:18px 20px}
.sub-pain-pair-text{font-size:14.5px}
.sub-pain-pair-label{font-size:10.5px}
/* QUIZ адаптив */
.sub-quiz-hero{
margin:8px 0 0;border-radius:20px;border-left:none;border-right:none;
grid-template-columns:1fr;
}
.sub-quiz-hero-left{padding:32px 28px}
.sub-quiz-kicker{font-size:11px}
.sub-quiz-kicker::before{width:18px}
.sub-quiz-title{font-size:30px}
.sub-quiz-sub{font-size:14.5px}
.sub-quiz-stats{gap:20px}
.sub-quiz-stat .v{font-size:22px}
.sub-quiz-stat .l{font-size:11.5px}
.sub-quiz-card{margin:0 28px 28px;padding:24px;border-radius:18px}
.sub-quiz-badge{font-size:10.5px}
.sub-quiz-card-title{font-size:18px}
.sub-quiz-card-sub{font-size:13px}
.sub-quiz-q{font-size:15.5px}
.sub-quiz-options{gap:8px}
.sub-quiz-option{font-size:14px;padding:13px 14px;gap:12px}
.sub-quiz-prev{font-size:13px}
.sub-quiz-next{padding:11px 18px;font-size:13.5px;gap:6px}
.sub-quiz-result-title{font-size:22px}
.sub-quiz-result-text{font-size:14px}
.sub-quiz-btn{padding:13px 22px;font-size:14px}
/* CASE адаптив */
.sub-case-hero{margin:8px 0 0;border-radius:20px;border-left:none;border-right:none;min-height:auto}
.sub-case-hero-top{left:28px;top:32px;right:28px}
.sub-case-hero-top .breadcrumbs a,
.sub-case-hero-top .breadcrumbs span{padding:5px 11px;font-size:11px}
.sub-case-hero-content{
padding:140px 28px 32px;
grid-template-columns:1fr;gap:28px;
}
.sub-case-kicker{font-size:11px}
.sub-case-kicker::before{width:18px}
.sub-case-title{font-size:30px}
.sub-case-sub{font-size:14.5px}
.sub-case-btn,.sub-case-btn-2{padding:13px 22px;font-size:14px}
.sub-case-result{padding:28px 24px;border-radius:18px}
.sub-case-result-label{font-size:11px}
.sub-case-result-num{font-size:42px}
.sub-case-result-title{font-size:14.5px}
.sub-case-result-meta{font-size:12px;gap:14px;flex-wrap:wrap}
.sub-case-timeline-block{margin:6vh 0 0;border-radius:20px;border-left:none;border-right:none;padding:32px 28px}
.sub-case-timeline-head{margin-bottom:24px}
.sub-case-timeline-title{font-size:26px}
.sub-case-timeline-lead{font-size:14.5px}
.sub-case-timeline-block .case-timeline{padding-left:64px}
.sub-case-timeline-block .case-timeline::before,
.sub-case-timeline-block .case-timeline::after{left:23px;top:11px;width:3px}
.sub-case-timeline-block .case-step{padding-bottom:24px}
.sub-case-timeline-block .case-step-bullet{
left:-64px;width:48px;height:48px;
min-width:48px;min-height:48px;top:-2px;
}
.sub-case-timeline-block .case-step-meta{padding:8px 12px}
.sub-case-timeline-block .case-step-meta-l{font-size:10.5px}
.sub-case-timeline-block .case-step-meta-v{font-size:13px}
.sub-case-cta-block{margin:6vh 0 0;border-radius:20px;border-left:none;border-right:none;padding:48px 28px}
.sub-case-cta-title{font-size:26px}
.sub-case-cta-lead{font-size:14.5px}
.sub-case-cta-btn{padding:14px 24px;font-size:14px}
/* Кейсы и Блог */
.sub-cases,
.sub-blog{margin:6vh 0 0;border-radius:20px;border-left:none;border-right:none;padding:32px 28px}
.sub-cases-head,
.sub-blog-head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:24px}
.sub-cases-head-text,
.sub-blog-head-text{max-width:none}
.sub-cases-title,
.sub-blog-title{font-size:26px}
.sub-cases-lead,
.sub-blog-lead{font-size:14.5px}
.sub-cases-head .sub-cases-all,
.sub-blog-head .sub-blog-all{display:none}
.sub-cases-all--mobile,
.sub-blog-all--mobile{
display:flex;align-items:center;justify-content:center;gap:8px;
margin-top:18px;padding:14px 20px;
border:1.5px solid var(--burgundy);color:var(--burgundy);
border-radius:100px;font-size:14px;font-weight:700;
text-decoration:none;width:100%;background:transparent;
transition:background .25s, color .25s;
}
.sub-cases-all--mobile:hover,
.sub-blog-all--mobile:hover{background:var(--burgundy);color:#fff}
.sub-cases-grid,
.sub-blog-grid{
display:flex !important;
grid-template-columns:none;
gap:14px;overflow-x:auto;overflow-y:visible;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;
scrollbar-width:none;
margin-left:-28px;margin-right:-28px;
padding:14px 0 8px;scroll-padding-left:28px;
}
.sub-cases-grid::-webkit-scrollbar,
.sub-blog-grid::-webkit-scrollbar{display:none}
.sub-case-card,
.sub-blog-card{flex:0 0 70%;max-width:380px;scroll-snap-align:start}
.sub-cases-grid > .sub-case-card:first-child,
.sub-blog-grid > .sub-blog-card:first-child{margin-left:28px}
.sub-cases-grid > .sub-case-card:last-child,
.sub-blog-grid > .sub-blog-card:last-child{margin-right:28px}
.sub-case-body,
.sub-blog-card-body{padding:22px 20px}
.sub-case-tag{font-size:10.5px;padding:4px 12px}
.sub-case-card-title,
.sub-blog-card-title{font-size:17px}
.sub-case-card-excerpt,
.sub-blog-card-excerpt{font-size:13.5px}
.sub-case-more,
.sub-blog-card-more{font-size:13.5px}
.sub-blog-card-meta{font-size:10.5px}
}
@media (max-width:767px){
.sub-pain-hero,
.sub-quiz-hero,
.sub-case-hero{margin:6px 0 0;border-radius:16px}
.sub-pain-hero-left,
.sub-pain-hero-right,
.sub-quiz-hero-left{padding:28px 22px}
.sub-pain-title,
.sub-quiz-title,
.sub-case-title{font-size:24px}
.sub-pain-cta,
.sub-case-cta{flex-direction:column;align-items:flex-start;gap:12px}
.sub-pain-stats{gap:16px;flex-wrap:wrap}
.sub-pain-stat .v{font-size:18px}
.sub-quiz-stats{gap:16px;flex-wrap:wrap}
.sub-quiz-stat .v{font-size:18px}
.sub-pain-pairs,
.sub-case-timeline-block,
.sub-cases,
.sub-blog{padding:28px 22px;border-radius:16px;margin:28px 0 0}
.sub-pain-pairs-title,
.sub-case-timeline-title,
.sub-cases-title,
.sub-blog-title{font-size:22px}
/* Timeline на мобиле — компактнее */
.sub-case-timeline-block .case-timeline{padding-left:50px}
.sub-case-timeline-block .case-timeline::before,
.sub-case-timeline-block .case-timeline::after{left:18px;top:9px;width:2px}
.sub-case-timeline-block .case-step-bullet{
left:-50px;width:38px;height:38px;
min-width:38px;min-height:38px;
}
.sub-case-timeline-block .case-step-bullet .num{font-size:13px}
.sub-quiz-card{margin:0 22px 22px;padding:20px;border-radius:14px}
.sub-quiz-card-title{font-size:16px}
.sub-case-hero-top{left:22px;top:24px;right:22px}
.sub-case-hero-content{padding:120px 22px 28px}
.sub-case-result-num{font-size:34px}
.sub-case-cta-block{padding:36px 22px;border-radius:16px;margin:28px 0 0}
.sub-case-cta-title{font-size:22px}
.sub-cases-grid,
.sub-blog-grid{
margin-left:-22px;margin-right:-22px;
scroll-padding-left:22px;gap:12px;
}
.sub-case-card,
.sub-blog-card{flex:0 0 84%;max-width:none}
.sub-cases-grid > .sub-case-card:first-child,
.sub-blog-grid > .sub-blog-card:first-child{margin-left:22px}
.sub-cases-grid > .sub-case-card:last-child,
.sub-blog-grid > .sub-blog-card:last-child{margin-right:22px}
.sub-cases-all--mobile,
.sub-blog-all--mobile{margin-top:14px;padding:13px 18px;font-size:13.5px}
.sub-faq{margin:28px 0 0}
}
/* ============================================================
БЛОК ПЕРЕЛИНКОВКИ "Другие услуги"
============================================================ */
.sub-other{
margin:8vh var(--side-pad) 0;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.sub-other-head{
margin-bottom:5vh;display:flex;flex-wrap:wrap;align-items:flex-end;
gap:2vw;justify-content:space-between;
}
.sub-other-head-text{flex:1;max-width:60%}
.sub-other-head .section-kicker{margin-bottom:1.5vh}
.sub-other-title{
font-size:2.4vw;font-weight:800;letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0;
}
.sub-other-title em{font-style:normal;color:var(--burgundy)}
.sub-other-all{
display:inline-flex;align-items:center;gap:0.6vw;
padding:0.95vw 1.6vw;
background:transparent;color:var(--burgundy);
border:1px solid var(--burgundy);border-radius:100px;
font-size:0.9vw;font-weight:700;text-decoration:none;
transition:all .3s;white-space:nowrap;
}
.sub-other-all--mobile{display:none}
.sub-other-all:hover{background:var(--burgundy);color:#fff;transform:translateY(-2px)}
.sub-other-grid{
display:grid;
grid-template-columns:repeat(12, 1fr);
gap:1vw;
}
/* По умолчанию каждая карточка 4 колонки (3 в ряд) */
.sub-other-card{
grid-column:span 4;
display:flex;flex-direction:column;
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:var(--rad-md);
text-decoration:none;
transition:all .25s;
padding:0;
overflow:hidden;
position:relative;
}
/* Кирпичная кладка для 7 карточек: 3 + 4 */
/* 4-я, 5-я, 6-я, 7-я — по 3 колонки (4 в ряд) */
.sub-other-grid > .sub-other-card:nth-child(4),
.sub-other-grid > .sub-other-card:nth-child(5),
.sub-other-grid > .sub-other-card:nth-child(6),
.sub-other-grid > .sub-other-card:nth-child(7){
grid-column:span 3;
}
/* Сетка 3×2 для 6 карточек (госконтракты) — все одинакового размера */
.sub-other-grid--3x2 > .sub-other-card,
.sub-other-grid--3x2 > .sub-other-card:nth-child(4),
.sub-other-grid--3x2 > .sub-other-card:nth-child(5),
.sub-other-grid--3x2 > .sub-other-card:nth-child(6),
.sub-other-grid--3x2 > .sub-other-card:nth-child(7){
grid-column:span 4;
}
.sub-other-card::before{
content:"";position:absolute;left:0;top:0;width:3px;height:100%;
background:linear-gradient(180deg, var(--burgundy) 0%, var(--gold) 100%);
opacity:0;transition:opacity .25s;
}
.sub-other-card:hover{
background:#fff;
border-color:rgba(122,47,60,0.25);
transform:translateY(-3px);
box-shadow:0 14px 32px rgba(15,17,21,0.06);
}
.sub-other-card:hover::before{opacity:1}
.sub-other-card-body{padding:1.8vw 1.6vw;display:flex;flex-direction:column;flex:1}
.sub-other-card-title{
font-size:1.15vw;font-weight:800;color:var(--ink-dk);
letter-spacing:-0.01em;margin:0 0 1vh;line-height:1.25;
}
.sub-other-card-desc{
font-size:0.9vw;line-height:1.5;color:var(--ink);margin:0 0 1.4vh;
}
.sub-other-card-more{
margin-top:auto;
display:inline-flex;align-items:center;gap:0.4vw;
font-size:0.88vw;font-weight:700;color:var(--burgundy);
}
.sub-other-card-more span{transition:transform .25s}
.sub-other-card:hover .sub-other-card-more span{transform:translateX(4px)}
@media (max-width:1199px){
.sub-other{margin:6vh 0 0;border-radius:20px;border-left:none;border-right:none;padding:32px 28px}
.sub-other-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:24px}
.sub-other-head-text{max-width:none}
.sub-other-title{font-size:26px}
.sub-other-head .sub-other-all{display:none}
.sub-other-all--mobile{
display:flex;align-items:center;justify-content:center;gap:8px;
margin-top:18px;padding:14px 20px;
border:1.5px solid var(--burgundy);color:var(--burgundy);
border-radius:100px;font-size:14px;font-weight:700;
text-decoration:none;width:100%;background:transparent;
transition:background .25s, color .25s;
}
.sub-other-all--mobile:hover{background:var(--burgundy);color:#fff}
.sub-other-all--mobile span{transition:transform .25s}
.sub-other-all--mobile:hover span{transform:translateX(3px)}
.sub-other-grid{grid-template-columns:1fr 1fr;gap:10px}
.sub-other-grid > .sub-other-card,
.sub-other-grid > .sub-other-card:nth-child(4),
.sub-other-grid > .sub-other-card:nth-child(5),
.sub-other-grid > .sub-other-card:nth-child(6),
.sub-other-grid > .sub-other-card:nth-child(7){
grid-column:span 1;
}
.sub-other-card-body{padding:18px 18px}
.sub-other-card-title{font-size:16px}
.sub-other-card-desc{font-size:13.5px}
.sub-other-card-more{font-size:13px}
}
@media (max-width:767px){
.sub-other{padding:28px 22px;border-radius:16px;margin:28px 0 0}
.sub-other-title{font-size:22px}
.sub-other-grid{grid-template-columns:1fr}
.sub-other-grid > .sub-other-card,
.sub-other-grid > .sub-other-card:nth-child(4),
.sub-other-grid > .sub-other-card:nth-child(5),
.sub-other-grid > .sub-other-card:nth-child(6),
.sub-other-grid > .sub-other-card:nth-child(7){
grid-column:span 1;
}
.sub-other-all--mobile{margin-top:14px;padding:13px 18px;font-size:13.5px}
}
/* ============================================================
Хлебные крошки на тёмных hero подуслуг (case + quiz)
============================================================ */
.subservice-case .sub-case-hero-top .breadcrumbs,
.subservice-quiz .sub-quiz-hero-left .breadcrumbs{
margin-bottom:0;
}
.subservice-case .sub-case-hero-top .breadcrumbs a,
.subservice-quiz .sub-quiz-hero-left .breadcrumbs a{
color:rgba(255,255,255,0.85);
background:rgba(255,255,255,0.10);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,0.18);
}
.subservice-case .sub-case-hero-top .breadcrumbs a:hover,
.subservice-quiz .sub-quiz-hero-left .breadcrumbs a:hover{
color:#fff;
background:rgba(176,141,87,0.25);
border-color:rgba(176,141,87,0.40);
}
.subservice-case .sub-case-hero-top .breadcrumbs .sep,
.subservice-quiz .sub-quiz-hero-left .breadcrumbs .sep{
color:rgba(255,255,255,0.30);
}
.subservice-case .sub-case-hero-top .breadcrumbs .current,
.subservice-quiz .sub-quiz-hero-left .breadcrumbs .current{
color:var(--ink-dk);font-weight:700;
background:rgba(255,255,255,0.95);
border:1px solid rgba(255,255,255,0.95);
}
/* ============================================================
ПОДУСЛУГИ — Доп.блоки: features, process, price, trust
============================================================ */
/* Что входит в услугу — split-layout как у обычных услуг */
.sub-features{
margin:8vh var(--side-pad) 0;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
display:grid;grid-template-columns:1fr 1.6fr;gap:4vw;
align-items:start;
}
.sub-features-text{position:sticky;top:14vh}
.sub-features-text .section-kicker{margin-bottom:1.5vh}
.sub-features-title{
font-size:2.4vw;font-weight:800;letter-spacing:-0.025em;line-height:1.05;
color:var(--ink-dk);margin:0 0 2.5vh;
}
.sub-features-title em{font-style:normal;color:var(--burgundy)}
.sub-features-lead{
font-size:1.05vw;line-height:1.65;color:var(--ink);margin:0 0 3vh;
}
.sub-features-cta{
display:inline-flex;align-items:center;gap:0.5vw;
padding:1.4vh 2vw;
background:var(--burgundy);color:#fff;border-radius:100px;
font-size:1vw;font-weight:700;text-decoration:none;
transition:all .25s;
}
.sub-features-cta:hover{background:var(--burgundy-dk);transform:translateY(-2px);box-shadow:0 14px 32px rgba(122,47,60,0.30)}
.sub-features-cta span{transition:transform .25s}
.sub-features-cta:hover span{transform:translateX(4px)}
.sub-features-list{
display:grid;grid-template-columns:1fr 1fr;gap:1vw;
}
.sub-feature{
display:flex;align-items:flex-start;gap:1vw;
padding:1.6vw 1.4vw;
background:#FAFAF9;
border:1px solid var(--divider);
border-radius:18px;
transition:all .25s;
}
.sub-feature:hover{
background:#fff;
border-color:rgba(122,47,60,0.18);
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(15,17,21,0.06);
}
.sub-feature-icon{
flex-shrink:0;
width:2.2vw;height:2.2vw;min-width:32px;min-height:32px;
display:flex;align-items:center;justify-content:center;
color:var(--burgundy);
transition:color .25s, transform .25s;
}
.sub-feature:hover .sub-feature-icon{color:var(--burgundy-dk);transform:scale(1.1)}
.sub-feature-icon svg{width:2vw;height:2vw;min-width:28px;min-height:28px;stroke-width:1.6}
.sub-feature-content{flex:1;min-width:0}
.sub-feature-title{
font-size:1.1vw;font-weight:800;color:var(--ink-dk);
letter-spacing:-0.01em;margin:0 0 0.5vh;line-height:1.25;
}
.sub-feature-desc{font-size:0.92vw;line-height:1.5;color:var(--ink);margin:0}
/* Этапы работы */
.sub-process{
margin:8vh var(--side-pad) 0;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.sub-process-head{margin-bottom:5vh}
.sub-process-head .section-kicker{margin-bottom:1.5vh}
.sub-process-title{
font-size:2.4vw;font-weight:800;letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0;
}
.sub-process-title em{font-style:normal;color:var(--burgundy)}
.sub-process-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:1.5vw}
.sub-step{
background:#FAFAF9;
border:1px solid var(--divider);
border-left:4px solid var(--gold);
border-radius:18px;
padding:2vw 1.6vw;
transition:all .25s;
position:relative;
}
.sub-step:hover{
background:#fff;
border-color:rgba(122,47,60,0.18);
border-left-color:var(--burgundy);
transform:translateY(-3px);
box-shadow:0 14px 32px rgba(15,17,21,0.06);
}
.sub-step-num{
font-family:'Caveat', cursive;
font-size:3vw;font-weight:600;color:var(--gold);
line-height:1;letter-spacing:-0.02em;margin-bottom:1.5vh;
}
.sub-step-title{
font-size:1.15vw;font-weight:800;color:var(--ink-dk);
letter-spacing:-0.01em;margin:0 0 1vh;line-height:1.25;
}
.sub-step-desc{font-size:0.92vw;line-height:1.5;color:var(--ink);margin:0}
/* Стоимость — бордовый градиент как у обычных услуг */
.sub-price{margin:8vh var(--side-pad) 0}
.sub-price-inner{
background:linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-dk) 100%);
border-radius:var(--rad-lg);
padding:6vw 4vw;
position:relative;overflow:hidden;
}
.sub-price-inner::before{
content:"";position:absolute;top:-30%;right:-20%;
width:60%;aspect-ratio:1/1;
background:radial-gradient(circle, rgba(176,141,87,0.30) 0%, rgba(176,141,87,0) 60%);
pointer-events:none;
}
.sub-price-inner::after{
content:"";position:absolute;bottom:-20%;left:-10%;
width:40%;aspect-ratio:1/1;
background:radial-gradient(circle, rgba(176,141,87,0.18) 0%, rgba(176,141,87,0) 60%);
pointer-events:none;
}
.sub-price-head{margin-bottom:4vh;position:relative;z-index:2}
.sub-price-head .section-kicker{color:var(--gold);margin-bottom:1.5vh}
.sub-price-title{
font-size:3vw;font-weight:900;letter-spacing:-0.025em;line-height:1.05;
color:#fff;margin:0 0 2vh;
}
.sub-price-title em{font-style:normal;color:var(--gold)}
.sub-price-lead{font-size:1.05vw;line-height:1.6;color:rgba(255,255,255,0.85);margin:0}
.sub-price-grid{
display:flex;flex-direction:column;gap:1vh;
margin-bottom:4vh;position:relative;z-index:2;
}
.sub-price-item{
display:flex;align-items:center;justify-content:space-between;gap:2vw;
padding:1.6vh 1.6vw;
background:rgba(255,255,255,0.06);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,0.10);
border-radius:14px;
transition:background .25s, border-color .25s;
}
.sub-price-item:hover{background:rgba(255,255,255,0.10);border-color:rgba(176,141,87,0.30)}
.sub-price-item-text{font-size:1.05vw;color:#fff;font-weight:500}
.sub-price-item-value{font-size:1.2vw;color:var(--gold);font-weight:800;white-space:nowrap}
/* Кнопка с белым текстом и прозрачным фоном (как было решено) */
.sub-price-cta{
position:relative;z-index:2;
display:inline-flex;align-items:center;gap:0.5vw;
padding:1.6vh 2.2vw;
background:rgba(255,255,255,0.08);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
color:#fff;
border:1.5px solid rgba(255,255,255,0.50);
border-radius:100px;
font-size:1vw;font-weight:700;text-decoration:none;
transition:all .25s;
}
.sub-price-cta:hover{
background:#fff;color:var(--burgundy);border-color:#fff;
transform:translateY(-2px);
box-shadow:0 14px 32px rgba(255,255,255,0.20);
}
.sub-price-cta .arrow{transition:transform .25s}
.sub-price-cta:hover .arrow{transform:translateX(4px)}
/* Преимущества / Доверие — 4 карточки */
.sub-trust{
margin:8vh var(--side-pad) 0;
background:var(--white);
border:1px solid var(--divider);
border-radius:var(--rad-lg);
padding:6vw 4vw;
box-shadow:0 2px 10px rgba(15,17,21,0.03);
}
.sub-trust-head{margin-bottom:5vh}
.sub-trust-head .section-kicker{margin-bottom:1.5vh}
.sub-trust-title{
font-size:2.4vw;font-weight:800;letter-spacing:-0.02em;line-height:1.1;
color:var(--ink-dk);margin:0;
}
.sub-trust-title em{font-style:normal;color:var(--burgundy)}
.sub-trust-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:1.5vw}
.sub-trust-item{
background:linear-gradient(135deg, #FAFAF9 0%, #F4F1EC 100%);
border:1px solid var(--divider);
border-radius:18px;
padding:2.5vw 1.6vw 2vw;
position:relative;overflow:hidden;
transition:all .25s;
}
.sub-trust-item::before{
content:"";position:absolute;
top:-50px;right:-50px;width:150px;height:150px;
background:radial-gradient(circle, rgba(176,141,87,0.15) 0%, rgba(176,141,87,0) 70%);
pointer-events:none;
}
.sub-trust-item:hover{
background:#fff;
border-color:rgba(122,47,60,0.18);
transform:translateY(-3px);
box-shadow:0 14px 32px rgba(15,17,21,0.06);
}
.sub-trust-num{
font-size:4vw;font-weight:900;
background:linear-gradient(135deg, var(--burgundy) 0%, var(--gold) 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
line-height:1;letter-spacing:-0.04em;
margin-bottom:0.5vh;
position:relative;z-index:2;
display:inline-block;
}
.sub-trust-num sup{font-size:0.5em;font-weight:800}
.sub-trust-num-suffix{
display:inline-block;margin-left:0.4vw;
font-size:1.2vw;color:var(--gold);font-weight:800;
vertical-align:top;margin-top:0.6vw;
letter-spacing:0.06em;text-transform:uppercase;
}
.sub-trust-title-small{
font-size:1.1vw;font-weight:800;color:var(--ink-dk);
letter-spacing:-0.01em;margin:1.5vh 0 1vh;line-height:1.25;
position:relative;z-index:2;
}
.sub-trust-desc{
font-size:0.92vw;line-height:1.55;color:var(--ink);margin:0;
position:relative;z-index:2;
}
/* Адаптив — планшет */
@media (max-width:1199px){
.sub-features{
margin:6vh 0 0;border-radius:20px;border-left:none;border-right:none;
padding:32px 28px;
display:block !important;
}
.sub-features-text{position:static;margin-bottom:28px}
.sub-features-title{font-size:26px;margin-bottom:14px}
.sub-features-lead{font-size:14.5px;margin-bottom:18px}
.sub-features-cta{padding:13px 22px;font-size:14px;gap:6px}
.sub-features-list{grid-template-columns:1fr 1fr;gap:12px}
.sub-feature{padding:18px 16px;gap:12px;border-radius:14px}
.sub-feature-icon{width:32px;height:32px}
.sub-feature-icon svg{width:28px;height:28px}
.sub-feature-title{font-size:15.5px;margin-bottom:4px}
.sub-feature-desc{font-size:13.5px;line-height:1.5}
.sub-process{margin:6vh 0 0;border-radius:20px;border-left:none;border-right:none;padding:32px 28px}
.sub-process-head{margin-bottom:24px}
.sub-process-title{font-size:26px}
.sub-process-grid{grid-template-columns:1fr 1fr;gap:14px}
.sub-step{padding:22px 20px;border-radius:16px}
.sub-step-num{font-size:36px;margin-bottom:10px}
.sub-step-title{font-size:17px}
.sub-step-desc{font-size:13.5px}
.sub-price-inner{padding:32px 28px;border-radius:20px;border-left:none;border-right:none}
.sub-price{margin:6vh 0 0}
.sub-price-head{margin-bottom:24px}
.sub-price-title{font-size:30px}
.sub-price-lead{font-size:14.5px}
.sub-price-grid{margin-bottom:24px;gap:8px}
.sub-price-item{padding:14px 18px;flex-wrap:wrap;gap:8px;border-radius:12px}
.sub-price-item-text{font-size:14.5px}
.sub-price-item-value{font-size:16px}
.sub-price-cta{padding:14px 22px;font-size:14px}
.sub-trust{margin:6vh 0 0;border-radius:20px;border-left:none;border-right:none;padding:32px 28px}
.sub-trust-head{margin-bottom:24px}
.sub-trust-title{font-size:26px}
.sub-trust-grid{grid-template-columns:1fr 1fr;gap:14px}
.sub-trust-item{padding:28px 22px 22px;border-radius:16px}
.sub-trust-num{font-size:48px}
.sub-trust-num-suffix{font-size:14px;margin-top:8px}
.sub-trust-title-small{font-size:16px;margin:14px 0 8px}
.sub-trust-desc{font-size:13.5px}
}
/* Адаптив — мобила */
@media (max-width:767px){
.sub-features,
.sub-process,
.sub-price,
.sub-trust{margin:28px 0 0}
.sub-features,
.sub-process,
.sub-trust{padding:28px 22px;border-radius:16px}
.sub-price-inner{padding:28px 22px;border-radius:16px}
.sub-features-title,
.sub-process-title,
.sub-trust-title{font-size:22px}
.sub-price-title{font-size:26px}
.sub-features-list{grid-template-columns:1fr;gap:10px}
.sub-process-grid,
.sub-trust-grid{grid-template-columns:1fr;gap:10px}
.sub-price-item{padding:12px 14px;border-radius:10px}
.sub-price-item-text{font-size:13.5px}
.sub-trust-num{font-size:40px}
.sub-trust-num-suffix{font-size:13px}
.sub-trust-title-small{font-size:15px}
.sub-trust-desc{font-size:13px}
}
/* ============================================================
Blur-эффект появления картинок (lazy-load fade)
Все ![]()
начинают загрузку с лёгким размытием и opacity:0
После загрузки получают класс .ye-img-loaded → плавно резкие
============================================================ */
img:not(.ye-img-skip){
filter:blur(14px);
opacity:0;
transform:scale(1.02);
transition:filter .55s ease, opacity .45s ease, transform .55s ease;
will-change:filter, opacity, transform;
}
img.ye-img-loaded,
img[src=""]:not(.ye-img-skip),
.no-js img:not(.ye-img-skip){
filter:blur(0);
opacity:1;
transform:scale(1);
}
/* SVG-иконки и логотипы не блюрим */
img[src$=".svg"],
.hdr-logo img,
.sub-feature-icon svg,
.sub-step svg,
.faq-icon,
img.no-blur{
filter:none !important;
opacity:1 !important;
transform:none !important;
}
/* Чтобы не было «прыжка» — фон-плейсхолдер пока картинка не загружена */
.case-card-img,
.blog-card-img,
.sub-case-hero img,
.team-member-photo{
background:linear-gradient(135deg, #F4F1EC 0%, #FAFAF9 100%);
}
/* ============================================================================
ПОПАП ПОДПИСКИ НА СОЦСЕТИ
============================================================================ */
.subscribe-popup{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.subscribe-popup.is-open{display:flex;animation:subPopFadeIn .3s ease}
@keyframes subPopFadeIn{from{opacity:0}to{opacity:1}}
.subscribe-popup-overlay{position:absolute;inset:0;background:rgba(15,15,16,0.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);cursor:pointer}
.subscribe-popup-window{position:relative;background:var(--white);border-radius:var(--rad-lg);max-width:920px;width:100%;max-height:92vh;overflow:hidden;box-shadow:0 30px 80px rgba(15,15,16,0.25);animation:subPopScaleIn .35s cubic-bezier(.16,1,.3,1)}
@keyframes subPopScaleIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.subscribe-popup-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;background:rgba(15,15,16,0.05);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .2s,color .2s;z-index:2}
.subscribe-popup-close:hover{background:var(--burgundy);color:var(--white)}
.subscribe-popup-close svg{width:18px;height:18px}
.subscribe-popup-content{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:440px}
.subscribe-popup-text{padding:48px 44px 44px;display:flex;flex-direction:column;justify-content:center}
.subscribe-popup-title{font-family:'Manrope',sans-serif;font-size:32px;line-height:1.15;font-weight:700;color:var(--ink-dk);margin-bottom:14px;letter-spacing:-0.01em}
.subscribe-popup-subtitle{font-size:15px;line-height:1.55;color:var(--mute);margin-bottom:28px}
/* Кнопки соцсетей — круглые цветные с иконкой внутри, как в FAB */
.subscribe-popup-channels{display:grid;grid-template-columns:repeat(4,52px);gap:14px;justify-content:start}
.subscribe-popup-channel{
display:inline-flex;align-items:center;justify-content:center;
width:52px;height:52px;
border-radius:50%;
background:var(--ch-color);
color:#FFFFFF;
text-decoration:none;
transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
box-shadow:0 4px 12px rgba(15,15,16,0.10);
}
.subscribe-popup-channel:hover{
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(15,15,16,0.18);
filter:brightness(1.08);
}
/* Обычная иконка 22px (TG, WhatsApp, TenChat, Threads) */
.subscribe-popup-channel svg{width:22px;height:22px;display:block;color:#FFFFFF;fill:#FFFFFF}
/* VK — viewBox 1024×1024 с огромными отступами вокруг буквы. Компенсируем как в FAB */
.subscribe-popup-channel[data-channel="vk"] svg{width:50px;height:50px}
/* MAX — фирменный фон-градиент (синий → фиолетовый → пурпурный), как в FAB */
.subscribe-popup-channel.is-max{
background:
radial-gradient(circle at 25% 90%, #00f 0%, transparent 60%),
linear-gradient(135deg, #4cf 0%, #53e 66%, #93d 100%) !important;
}
.subscribe-popup-channel.is-max svg{width:28px;height:28px}
/* Threads — белая иконка на чёрном */
.subscribe-popup-channel[data-channel="th"] svg{color:#FFFFFF;fill:#FFFFFF}
/* РБК и Т-Ж — лого как картинки на белом фоне */
.subscribe-popup-channel.is-img{
background:#FFFFFF;
border:1px solid rgba(15,15,16,0.10);
padding:0;
}
.subscribe-popup-channel.is-img img{display:block}
.subscribe-popup-channel[data-channel="rbc"].is-img img{width:28px;height:28px;object-fit:contain}
.subscribe-popup-channel[data-channel="tj"].is-img img{width:30px;height:30px;object-fit:contain}
.subscribe-popup-image{position:relative;overflow:hidden;background:var(--bg-alt)}
.subscribe-popup-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.subscribe-popup-image::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(122,47,60,0.10) 0%,transparent 50%,rgba(201,160,92,0.10) 100%);pointer-events:none}
/* Планшет */
@media (max-width:1023px){
.subscribe-popup-window{max-width:760px}
.subscribe-popup-text{padding:36px 32px 32px}
.subscribe-popup-title{font-size:26px}
.subscribe-popup-subtitle{font-size:14px;margin-bottom:22px}
.subscribe-popup-channels{grid-template-columns:repeat(4,48px);gap:12px}
.subscribe-popup-channel{width:48px;height:48px}
.subscribe-popup-channel svg{width:20px;height:20px}
.subscribe-popup-channel[data-channel="vk"] svg{width:46px;height:46px}
.subscribe-popup-channel.is-max svg{width:26px;height:26px}
.subscribe-popup-channel[data-channel="rbc"].is-img img{width:26px;height:26px}
.subscribe-popup-channel[data-channel="tj"].is-img img{width:28px;height:28px}
}
/* Мобильные: компактная вертикальная компоновка */
@media (max-width:767px){
.subscribe-popup{padding:16px;align-items:center}
.subscribe-popup-window{max-width:100%;max-height:92vh;border-radius:18px;overflow-y:auto}
.subscribe-popup-content{grid-template-columns:1fr;min-height:0}
/* Картинка сверху — высокий баннер 180px для атмосферы */
.subscribe-popup-image{order:-1;height:180px;border-radius:18px 18px 0 0}
.subscribe-popup-image img{height:180px;object-position:center 50%}
.subscribe-popup-text{padding:24px 22px 26px}
.subscribe-popup-title{font-size:22px;line-height:1.2;padding-right:30px;margin-bottom:10px}
.subscribe-popup-subtitle{font-size:13.5px;line-height:1.5;margin-bottom:20px}
/* Кнопки 4 в ряд, увеличенные */
.subscribe-popup-channels{grid-template-columns:repeat(4,1fr);gap:12px;justify-items:center}
.subscribe-popup-channel{width:52px;height:52px}
.subscribe-popup-channel svg{width:22px;height:22px}
.subscribe-popup-channel[data-channel="vk"] svg{width:50px;height:50px}
.subscribe-popup-channel.is-max svg{width:28px;height:28px}
.subscribe-popup-channel[data-channel="rbc"].is-img img{width:28px;height:28px}
.subscribe-popup-channel[data-channel="tj"].is-img img{width:30px;height:30px}
.subscribe-popup-close{top:10px;right:10px;width:32px;height:32px;background:rgba(255,255,255,0.92)}
.subscribe-popup-close svg{width:14px;height:14px}
}
/* Кликабельные бейджи РБК / Право-300: лёгкий hover */
a.stats-badge,a.ftr-badge{display:inline-flex;transition:transform .2s ease,opacity .2s ease}
a.stats-badge:hover,a.ftr-badge:hover{transform:translateY(-2px);opacity:.85}
/* Награды на «О компании» — мобильная адаптация */
@media (max-width:767px){
.okompanii-awards-grid{grid-template-columns:1fr;border-radius:14px}
.okompanii-award{padding:28px 22px;gap:12px}
.okompanii-award:not(:last-child)::after{
top:auto;left:25%;right:25%;bottom:0;width:auto;height:1px;
}
.okompanii-award-logo{height:48px}
.okompanii-award-logo img{max-height:48px;max-width:140px}
.okompanii-award-title{font-size:10px}
}
@media (max-width:480px){
.okompanii-awards-grid{grid-template-columns:1fr}
}
/* Т-Ж на странице «О компании» — увеличиваем чтобы выровнять с РБК и Право-300 */
.okompanii-award img[alt="Т—Ж"]{
width:64px;height:64px;max-width:64px;max-height:64px;
}
@media (max-width:767px){
.okompanii-award img[alt="Т—Ж"]{width:48px;height:48px;max-width:48px;max-height:48px}
}