/* ==========================================================================
   Сторінка «Послуги» (template-services.php)
   ========================================================================== */

/* --- Херо --- */
.sp-hero{
	position:relative;
	overflow:hidden;
	padding:72px 0 100px;
}
.sp-hero-inner{
	position:relative; z-index:1;
	display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:40px;
}
.sp-hero-text h1{
	font-family:var(--font-display); font-weight:800; font-size:48px; line-height:58px;
	letter-spacing:-.96px; color:#fff; margin:0 0 24px;
}
.sp-hero-text p{
	font-family:var(--font-display); font-weight:300; font-size:18px; line-height:29px;
	color:#fff; max-width:820px; margin:0 0 32px;
}
.sp-hero-anchor{
	display:inline-flex; align-items:center; gap:12px;
	font-family:var(--font-button); font-weight:600; font-size:16px; color:#fff;
}
.sp-hero-anchor-icon{
	display:flex; align-items:center; justify-content:center;
	width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
}
.sp-hero-media{ position:relative; z-index:1; }
.sp-hero-media img{ width:100%; height:auto; display:block; }
/* Тонування картинки (Figma: Rectangle 41805 + 41804) навмисно НЕ робимо
   окремими CSS-прямокутниками зверху — в Figma вони лежать усередині
   "Mask group" і обрізані по силуету самої картинки; поверх PNG з прозорим
   фоном звичайний div/span даватиме видимий прямокутний край. Якщо треба
   точно як в макеті — простіше запекти цей тон прямо в PNG при експорті
   з Figma (експортувати "Mask group" одним фlat-шаром), ніж відтворювати
   маскою в CSS під розмір, який все одно не збігається з реальним файлом. */

/* --- Перелік послуг (переиспользует .service-card/.services-grid зі стилів головної) --- */
.sp-services{ padding-top:100px; padding-bottom:60px; }

/* --- Чому ми? --- */
.sp-why{ background:#020A03; padding:120px 0; }
.sp-why-inner{
	display:flex; align-items:flex-start; gap:80px;
}
.sp-why-intro{ flex:0 0 346.67px; max-width:346.67px; }
.sp-why-intro h2{
	font-family:var(--font-display); font-weight:700; font-size:40px; line-height:43px;
	letter-spacing:-.36px; color:#fff; margin:0 0 22.68px;
}
.sp-why-intro p{
	font-family:'Montserrat', sans-serif; font-weight:400; font-size:18px; line-height:29px; color:#FEFEFE; margin:0;
}
.sp-why-grid{
	flex:1;
	display:grid; grid-template-columns:1fr 1fr; column-gap:48px; row-gap:67px;
}
.sp-why-item{ display:flex; flex-direction:column; gap:15.99px; max-width:322.67px; }

/* Іконка + заголовок в один рядок. Раніше <h3> був вкладений УСЕРЕДИНУ
   .sp-why-icon, а на .sp-why-icon висіла жорстка width/height:22px —
   заголовок опинявся затиснутий у 22-піксельну коробку разом з іконкою
   і переносився на 2 рядки. Тепер іконка й заголовок — сусідні елементи
   в окремій обгортці .sp-why-item-head, ширина іконки нікому не заважає. */
.sp-why-item-head{ display:flex; align-items:center; gap:12px; }
.sp-why-icon{
	display:flex; align-items:center; justify-content:center;
	width:22px; height:22px; color:#FF922D; font-size:20px; flex-shrink:0;
}
.sp-why-icon img{ width:100%; height:100%; object-fit:contain; }
.sp-why-item h3{
	font-family:var(--font-display); font-weight:400; font-size:24px; line-height:31px; color:#fff; margin:0;
}
.sp-why-item p{
	font-family:'Inter', sans-serif; font-weight:400; font-size:16px; line-height:24px; color:#FEFEFE; margin:0;
}

@media (max-width:900px){
	.sp-why-inner{ flex-direction:column; gap:40px; }
	.sp-why-intro{ flex-basis:auto; max-width:100%; }
	.sp-why-grid{ grid-template-columns:1fr; }
}

/* --- Готові до зростання? --- */
.sp-cta{ background:#FCFCFC; padding:60px 0 100px; }
.sp-cta-inner{
	display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
	background:#020A03; border-radius:32px; padding:56px 64px;
}
.sp-cta-inner h2{
	font-family:var(--font-display); font-weight:800; font-size:48px; line-height:58px;
	letter-spacing:-.96px; color:#fff; margin:0 0 16px; max-width:644px;
}
.sp-cta-inner p{
	font-family:var(--font-body); font-weight:400; font-size:18px; line-height:29px; color:#fff; margin:0; max-width:644px;
}
.sp-cta-btn{
	flex-shrink:0;
	padding:20px 53px; border-radius:500px;
	background:#096415; color:#fff;
	font-family:var(--font-body); font-weight:700; font-size:18px; letter-spacing:.6px;
	border:none;
}
.sp-cta-btn:hover{ background:#0b7a1a; }

@media (max-width:760px){
	.sp-cta-inner{ flex-direction:column; align-items:flex-start; padding:40px; }
	.sp-hero-inner{ grid-template-columns:1fr; }
}