/* ==========================================================================
Сторінка «Послуга (лендинг)» (template-service-single.php)
Тарифи / FAQ / CTA-форма використовують ГЛОБАЛЬНІ класи з style.css —
тут лише блоки, яких раніше не існувало.
========================================================================== */
/* --- Херо ---
Раніше секція мала власний СУЦІЛЬНИЙ фон (background:#020A03) — це
перекривало собою спільний декоративний шар .hero-bg-layer (плями +
кільця + шум), який header.php і так малює позаду будь-якої "херо"
сторінки через seoua_has_hero(). Прибрано фон (як в .sp-hero/.c-hero —
той самий, вже перевірений патерн), а .ss-hero-inner отримав
position:relative;z-index:1, щоб текст/картинка гарантовано були
ПОВЕРХ того шару (той самий z-index-фікс, що і на "Контактах"). */
.ss-hero{ padding:72px 0 56px; overflow:hidden; }
.ss-hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:40px; }
.ss-hero-text h1{
font-family:var(--font-display); font-weight:800; font-size:44px; line-height:52px;
color:#fff; margin:0 0 20px;
}
.ss-hero-text p{
font-family:var(--font-body); font-weight:400; font-size:17px; line-height:1.6;
color:rgba(255,255,255,.8); margin:0 0 28px; max-width:520px;
}
/* Картинка раніше масштабувалась лише по ширині колонки (width:100%;
height:auto) — якщо завантажене зображення саме по собі високе
(наприклад, "гора" з великим запасом порожнього простору зверху/знизу
в оригінальному файлі), вся секція розтягувалась під його реальну
висоту (grid-колонка з картинкою — найвищий елемент рядка, і .ss-hero
росте під неї). Обмежено максимальною висотою, картинка більше не
диктує висоту всього херо.
За Figma-спеком картинка (гора) не по центру рядка, а "стоїть" низом
на рівні низу херо — .ss-hero-inner центрує текст (align-items:center
лишається для текстової колонки), а картинку окремо притискаємо до
низу через align-self:flex-end, замість того, щоб вона висіла по
центру з порожнім місцем під низом.
Але align-self:flex-end притискає картинку лише до низу GRID-РЯДКА —
а сам ряд лежить УСЕРЕДИНІ контентної area, ДО нижнього padding секції
(.ss-hero{padding:72px 0 56px}). Тобто між низом картинки і справжнім
нижнім краєм херо-секції (де починається наступний блок) лишалась
порожня смуга висотою рівно в 56px нижнього padding. Від'ємний
margin-bottom, що дорівнює цьому padding, "витягує" картинку за межі
контентної area — вниз, впритул до самого краю секції. */
.ss-hero-media{ align-self:flex-end; display:flex; align-items:flex-end; justify-content:center; margin-bottom:-56px; }
.ss-hero-media img{ display:block; width:auto; max-width:100%; height:auto; max-height:400px; }
@media (max-width:860px){ .ss-hero-media img{ max-height:280px; } }
@media (max-width:860px){ .ss-hero-inner{ grid-template-columns:1fr; } }
/* --- Чому потрібна послуга --- */
.ss-why-need{ background:#FCFCFC; padding:80px 0; }
.ss-why-need .section-title{ color:#0D1710; }
.ss-wn-list{ display:flex; flex-direction:column; gap:16px; margin-top:32px; }
.ss-wn-row{
position:relative; overflow:hidden;
display:flex; align-items:center; gap:20px;
background:#fff; border-radius:16px; padding:24px 28px;
}
.ss-wn-icon{
display:flex; align-items:center; justify-content:center; flex-shrink:0;
width:44px; height:44px; border-radius:12px; background:rgba(9,100,21,.08); color:#096415; font-size:20px;
}
.ss-wn-icon img{ width:24px; height:24px; object-fit:contain; }
.ss-wn-body h3{ font-family:var(--font-display); font-weight:600; font-size:18px; color:#0D1710; margin:0 0 4px; }
.ss-wn-body p{ font-family:var(--font-body); font-size:14px; color:#5B6B58; margin:0; }
.ss-wn-num{
position:absolute; right:20px; top:50%; transform:translateY(-50%);
font-family:var(--font-display); font-weight:800; font-size:56px; line-height:1;
color:rgba(9,100,21,.08); pointer-events:none; z-index:0;
}
/* --- Для кого --- */
/* Раніше секція мала суцільний чорний фон #020A03 без жодних декоративних
плям — за Figma-спеком тут (як і на "Херо" на інших сторінках) мають
бути дві розмиті зелено-помаранчеві плями (Ellipse 35/36) + шумова
текстура зверху (та ж технологія, що й .hero-noise в style.css —
inline SVG fractalNoise, без окремого файлу картинки). */
.ss-for-whom{ position:relative; overflow:hidden; background:#020A03; padding:80px 0; }
.ss-for-whom .container{ position:relative; z-index:1; }
/* overflow:hidden ріже розмиту (filter:blur) пляму рівним прямим краєм —
а в точці зрізу (самий верх/низ секції) вона ще доволі яскрава, тому
без маски це виглядає як груба світла смуга замість плавного згасання.
Маска додатково "розтушовує" цей край по висоті самого шару. */
.ss-fw-bg{
position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 72px);
mask-image:linear-gradient(to bottom, transparent 0, #000 72px);
}
.ss-fw-blob{
position:absolute; border-radius:50%;
background:linear-gradient(98.24deg, #39982A 58.33%, #E9601A 100%);
filter:blur(105px);
}
.ss-fw-blob-1{ width:455px; height:791px; left:716px; top:-334px; transform:rotate(124.29deg); }
.ss-fw-blob-2{ width:384px; height:590px; left:-238px; top:200px; transform:rotate(-57.82deg); }
.ss-fw-noise{
position:absolute; inset:0;
opacity:.22; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
background-size:180px 180px;
}
.ss-fw-grid{ display: grid;
/* Создаем 10 равных колонок для точного соотношения 70/30 (7 и 3 колонки) */
grid-template-columns: repeat(10, 1fr);
/* Определяем строки, чтобы избежать автоматического переноса */
grid-template-rows: auto auto;
column-gap: 24px;
row-gap: 37px;
margin-top: 32px;}
/* Фон/рамка/скруглення — точно за Figma-спеком ("Row 1: Large/Small",
"Row 2: Small/Large"): rgba(255,255,255,.05) + border 2px rgba(16,110,0,.3)
+ backdrop-filter blur(8px) + radius 16px. Раніше картки були без
backdrop-filter (не було "скляного" ефекту поверх фонових плям) і з
іншими border/radius/padding. */
.ss-fw-card{ background: rgba(255, 255, 255, .05);
border: 2px solid rgba(16, 110, 0, .3);
border-radius: 16px;
padding: 32px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
transition: border-color 0.3s ease;}
/* Легка підсвітка рамки при наведенні — колір бренду (не довільний #ff6600) */
.ss-fw-card:hover {
border-color: rgba(255, 146, 45, .6);
}
/* --- Первая строка: 70/30 --- */
/* 1-я карточка («Інтернет-магазини»): занимает 7 колонок (70%) */
.ss-fw-card:nth-child(1) {
grid-column: span 7;
}
/* 2-я карточка («Медичні центри»): занимает 3 колонки (30%) */
.ss-fw-card:nth-child(2) {
grid-column: span 3;
}
/* --- Вторая строка: 30/70 --- */
/* 3-я карточка («B2B Компанії»): занимает 3 колонки (30%) */
.ss-fw-card:nth-child(3) {
grid-column: span 3;
}
/* 4-я карточка («Складна ніша?»): занимает 7 колонок (70%) */
.ss-fw-card:nth-child(4) {
grid-column: span 7;
}
.ss-fw-icon{
display:flex; align-items:center; justify-content:center;
width:40px; height:40px; border-radius:10px; background:rgba(9,100,21,.25); color:#39982A; font-size:18px; margin-bottom:16px;
}
.ss-fw-icon img{ width:22px; height:22px; object-fit:contain; }
.ss-fw-card h3{ font-family:var(--font-display); font-weight:600; font-size:18px; color:#fff; margin:0 0 8px; }
.ss-fw-card p{ font-family:var(--font-body); font-size:14px; color:rgba(255,255,255,.7); margin:0; }
/* Раніше кнопка притискалась до низу через margin-top:auto — це
спрацьовує, лише коли в рядку grid є ВИЩА картка, яка "розтягує"
поточну (align-items:stretch за замовчуванням) і залишає вільне
місце. У картці з кнопкою вільного місця часто НЕМАЄ (вона сама
задає висоту рядка) — auto-margin тоді дорівнює 0, і кнопка
опинялась впритул до тексту без жодного відступу. Замінено на
звичайний фіксований відступ згори (не залежить від висоти рядка). */
.ss-fw-btn{ margin-top:24px; align-self:flex-start; }
@media (max-width:760px){ .ss-fw-grid{ grid-template-columns:1fr; } }
/* --- Експертні послуги --- */
.ss-expert{ background:#FCFCFC; padding:80px 0; }
.ss-expert-inner{ display:grid; grid-template-columns:1fr 1.3fr; gap:60px; align-items:start; }
.ss-expert-intro .section-title{ color:#0D1710; }
.ss-expert-intro p{ font-family:var(--font-body); font-size:15px; color:#5B6B58; margin:0; }
.ss-expert-list{ display:flex; flex-direction:column; }
.ss-expert-item{ padding:22px 0; border-bottom:1px solid #E6EAE3; }
.ss-expert-item:first-child{ padding-top:0; }
.ss-expert-item h3{ font-family:var(--font-display); font-weight:600; font-size:18px; color:#0D1710; margin:0 0 6px; }
.ss-expert-item p{ font-family:var(--font-body); font-size:14px; color:#5B6B58; margin:0; }
@media (max-width:860px){ .ss-expert-inner{ grid-template-columns:1fr; gap:32px; } }
/* --- Наші переваги ---
За Figma-спеком: секція 796px заввишки, контент-ряд ("Container") —
556px, зі зсувом top:120px від верху секції (тобто ~120px "повітря"
зверху і знизу, а не 80px) — і дві колонки ("Container" 609px і картка
"Overlay+Border+OverlayBlur" 609px) з gap:64px, майже порівну, а не
1.2fr/1fr. Раніше було 80px padding + нерівні колонки — через це блок
виглядав вужчим/іншого пропорції, ніж у макеті, і плямі знизу-зліва
(Ellipse 35) банально не вистачало висоти секції, щоб визирнути. */
.ss-advantages{ position:relative; overflow:hidden; background:#020A03; padding:120px 0; }
.ss-adv-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
/* overflow:hidden ріже розмиту пляму рівним зрізом — без маски вгорі це
виглядає як яскрава смуга замість плавного згасання (Ellipse 36 своїм
центром лежить майже впритул до верху секції). Маскуємо лише ВЕРХНІЙ
край: плямі Ellipse 35 знизу-зліва навпаки НЕ вистачає видимості (за
Figma-спеком вона визирає з кута секції) — маскувати й низ теж, як
було раніше, означало б додатково "з'їдати" й без того куций хвостик
цієї плями. */
.ss-adv-bg{
position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 72px);
mask-image:linear-gradient(to bottom, transparent 0, #000 72px);
}
.ss-adv-blob{
position:absolute; border-radius:50%;
background:linear-gradient(98.24deg, #39982A 58.33%, #E9601A 100%);
filter:blur(105px);
}
/* Figma-координати (left:716px/-238px) рахувались від рамки макета
шириною 1442px — на реальному сайті секція на всю ширину екрана
(~1920px), тому пляма №1 "з фіксованим left" опинялась значно лівіше
від правого краю, ніж у макеті. Права пляма тепер прив'язана до
ПРАВОГО краю (завжди близько до нього, на будь-якій ширині екрана),
а ліва — збільшена і зсунута правіше, щоб не губитися в самому кутку. */
.ss-adv-blob-1{ width:455px; height:791px; right:40px; top:-334px; transform:rotate(124.29deg); }
.ss-adv-blob-2{ width:500px; height:768px; left:-60px; top:548px; transform:rotate(-57.82deg); }
.ss-adv-noise{
position:absolute; inset:0;
opacity:.22; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
background-size:180px 180px;
}
/* Розміри нижче зведені 1:1 з Figma-спеком (раніше тут були приблизні,
помітно менші значення — 17/14px замість 24/16px, стат-цифри 40px
замість 80px тощо, картка "Результати" мала свій зелений градієнт
замість прозорого скла — через це весь блок виходив значно компактнішим/
вужчим за пропорціями, ніж у макеті, і навіть плямі Ellipse 35
знизу-зліва банально не вистачало висоти секції, щоб визирнути). */
.ss-adv-list .section-title{ margin-bottom:24px; }
.ss-adv-row{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.ss-adv-row:first-of-type{ padding-top:0; }
.ss-adv-icon{
display:flex; align-items:center; justify-content:center; flex-shrink:0;
width:48px; height:48px; border-radius:8px; background:rgba(16,110,0,.2); color:#39982A;
}
.ss-adv-icon img{ width:22px; height:22px; object-fit:contain; }
.ss-adv-row h3{ font-family:var(--font-display); font-weight:600; font-size:24px; line-height:32px; color:#fff; margin:0 0 4px; }
.ss-adv-row p{ font-family:var(--font-body); font-size:16px; line-height:24px; color:#C4C7C8; margin:0; }
/* Картка — просте напівпрозоре скло (як у макеті), а не власний зелений
градієнт: зеленуватий відтінок на ній має з'являтись сам, від плям
.ss-adv-blob, що просвічують крізь backdrop-filter, а не бути
намальованим напряму на картці. */
.ss-adv-results{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
border-radius:16px; padding:48px;
}
.ss-adv-results h3{ font-family:var(--font-display); font-weight:700; font-size:48px; line-height:56px; letter-spacing:-.48px; color:#fff; margin:0 0 32px; }
.ss-adv-stat{ margin-bottom:48px; }
.ss-adv-stat:last-child{ margin-bottom:0; }
.ss-adv-stat-value{ display:block; font-family:var(--font-display); font-weight:500; font-size:80px; line-height:96px; letter-spacing:-1.6px; color:#39982A; }
.ss-adv-stat-label{ display:block; font-family:var(--font-body); font-size:16px; line-height:24px; color:#C4C7C8; }
@media (max-width:860px){
.ss-adv-inner{ grid-template-columns:1fr; }
.ss-adv-results{ padding:32px; }
.ss-adv-results h3{ font-size:32px; line-height:40px; margin-bottom:24px; }
.ss-adv-stat{ margin-bottom:32px; }
.ss-adv-stat-value{ font-size:48px; line-height:1.2; }
}
/* --- Етапи виконання ---
Раніше .ss-steps-header клав "Етап/Тиждень" + N окремих чисел ТИЖНІВ
як п'ять рівноправних елементів в один grid із лише 2 колонками
(220px 1fr) — тому в рядок влазили тільки лейбл+перше число, а решта
чисел вимушено переносились на власні нові рядки грида (класична
пастка auto-placement у grid із замалою кількістю явних колонок). Це
й було причиною "розсипаних" 1/2/3/4 на скріні. Виправлено: числа
тижнів тепер лежать в окремій обгортці .ss-steps-header-weeks, яка
сама розподіляє їх порівну (grid, N колонок) — і займає той самий
"1fr"-слот, що й .ss-steps-track у рядках нижче, тому колонки тижнів
у шапці й позиції барів у рядках гарантовано збігаються.
Заразом додано рамку-картку (.ss-steps-card), крапку перед назвою
етапу і світіння навколо смужки — точно за Figma-спеком. */
.ss-steps{ background:#FCFCFC; padding:80px 0; }
.ss-steps .section-title{ color:#0D1710; margin-bottom:4px; }
.ss-steps-text{ font-family:var(--font-body); font-size:18px; line-height:1.55; color:#444748; margin:0 0 40px; }
.ss-steps-card{
background:#fff; border:1px solid rgba(196,199,200,.3); border-radius:16px;
padding:32px 32px 8px;
}
.ss-steps-table{ display:flex; flex-direction:column; }
.ss-steps-header{
display:grid; grid-template-columns:380px 1fr; align-items:center;
padding-bottom:16px; margin-bottom:8px; border-bottom:1px solid rgba(196,199,200,.5);
}
.ss-steps-header-label{
font-family:var(--font-body); font-weight:600; font-size:14px; letter-spacing:.7px;
color:#747878;
}
.ss-steps-header-weeks{ display:grid; grid-template-columns:repeat(var(--ss-weeks, 4), 1fr); }
.ss-steps-header-week{
display:block; text-align:center;
font-family:var(--font-body); font-weight:700; font-size:14px; letter-spacing:.7px;
color:#747878;
}
.ss-steps-row{
position:relative; display:grid; grid-template-columns:380px 1fr; align-items:center;
gap:16px; padding:24px 0; border-bottom:1px solid rgba(196,199,200,.4);
}
.ss-steps-row:last-child{ border-bottom:none; }
.ss-steps-row-dot{
position:absolute; left:0;
width:8px; height:8px; border-radius:50%; background:#096415;
}
.ss-steps-row-label{
padding-left:20px;
font-family:var(--font-display); font-weight:600; font-size:20px; line-height:28px; color:#181C1E;
}
.ss-steps-track{ position:relative; height:16px; }
.ss-steps-bar{
position:absolute; top:0; height:100%; border-radius:6px; background:#096415;
box-shadow:0 0 25px rgba(42,229,0,.6);
}
@media (max-width:640px){
.ss-steps-card{ padding:24px 20px 8px; }
.ss-steps-header, .ss-steps-row{ grid-template-columns:1fr; gap:8px; }
.ss-steps-header-weeks{ display:none; }
.ss-steps-row{ padding:20px 0; }
.ss-steps-row-label{ font-size:19px; line-height:26px; }
.ss-steps-track{ margin-left:20px; }
}
/* --- Тарифи: бейдж «Популярний» на featured-картці --- */
.pricing-card{ position:relative; }
.pricing-badge{
position:absolute; top:-14px; left:50%; transform:translateX(-50%);
background:var(--orange); color:#fff; font-family:var(--font-button); font-weight:600; font-size:12px;
padding:6px 16px; border-radius:20px; white-space:nowrap;
}
/* --- Тарифи цієї сторінки: декоративний фон (той самий патерн, що й .ss-fw-bg/.ss-adv-bg) --- */
.ss-pricing{ position:relative; overflow:hidden; background:#020A03; }
.ss-pricing .container{ position:relative; z-index:1; }
.ss-pricing-bg{
position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 72px);
mask-image:linear-gradient(to bottom, transparent 0, #000 72px);
}
.ss-pricing-blob{
position:absolute; border-radius:50%;
background:linear-gradient(98.24deg, #39982A 58.33%, #E9601A 100%);
filter:blur(105px);
}
.ss-pricing-blob-1{ width:455px; height:791px; right:40px; top:-334px; transform:rotate(124.29deg); }
.ss-pricing-blob-2{ width:500px; height:768px; left:-60px; top:548px; transform:rotate(-57.82deg); }
.ss-pricing-noise{
position:absolute; inset:0;
opacity:.22; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
background-size:180px 180px;
}
/* --- Картки: скляний стиль за Figma-спеком (замість суцільного .bg-card), щоб плями фону просвічували --- */
.ss-pricing .pricing-card{
background:var(--ss-pricing-card-bg, rgba(255,255,255,.05));
border:1px solid rgba(255,255,255,.1);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
border-radius:16px;
color:var(--white);
}
.ss-pricing .pricing-card.is-featured{
border-width:2px;
border-color:var(--ss-pricing-border, #FF922D);
background:var(--ss-pricing-card-bg, rgba(255,255,255,.1));
color:var(--white);
transform:none;
}
.ss-pricing .pricing-card.is-featured .pricing-desc{ color:var(--muted); }
.ss-pricing .pricing-badge{ background:var(--ss-pricing-border, #FF922D); }
/* Кнопка: розтягнута на всю ширину картки, невисока, кут заокруглення 8px (не піл-форма з базового .btn) — за Figma-спеком.
Заповнена — тільки на featured-картці, на решті — контурна (біла рамка, прозорий фон). */
.ss-pricing .pricing-card .btn-primary{
width:100%; padding:12px 0; border-radius:8px; font-size:16px;
}
/* Кнопка "Обрати" з дією "Попап" — це