/* Atlio — стилі для блоків конструктора сторінок */

:root{
	--atlio-primary:#1f8ceb;
	--atlio-dark:#111111;
	--atlio-body:#555555;
	--atlio-secondary:#3b566e;
	--atlio-muted:#6f8ba4;
	--atlio-light-bg:#f9fbfd;
	--atlio-border:#e7edf3;
}

/* Контакти — логотип замість карти/скріншота біля форми */
.contact-logo-panel{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	height:430px;
	background:var(--atlio-light-bg);
	border:1px solid var(--atlio-border);
	border-radius:12px;
	padding:40px;
}
.contact-logo-panel img{ max-width:280px; width:100%; margin-bottom:22px; }
.contact-logo-panel p{ color:var(--atlio-body); font-size:16px; margin:0; max-width:300px; }

/* Активніший стиль для другорядних кнопок (theme-btn.btn-style-two) —
   базовий шаблон робив їх блідими (світлий фон + світлий текст),
   тепер вони суцільні й помітні на будь-якому фоні блоку. */
.theme-btn.btn-style-two{
	background:var(--atlio-primary);
	border-color:var(--atlio-primary);
	color:#fff;
	font-weight:600;
}
.theme-btn.btn-style-two .icon{ color:#fff; }
.theme-btn.btn-style-two:hover{
	background:#146aab;
	border-color:#146aab;
	color:#fff;
}

/* Шапка: кнопка "Вхід" (outlined) поруч з кнопкою "Демо" — вирівнюємо
   обидві по центру відносно висоти всього меню (не за фіксованим
   padding-top, розрахованим під стару одну кнопку). */
.main-header .nav-outer .other-links{ padding-top:0; display:flex; align-items:center; gap:14px; align-self:stretch; }
.theme-btn.btn-style-header-outline{
	background:transparent;
	color:var(--atlio-primary);
	border:2px solid var(--atlio-primary);
	padding:5px 26px;
	line-height:26px;
	border-radius:4px;
	font-weight:600;
	display:inline-block;
}
.theme-btn.btn-style-header-outline:hover{
	background:var(--atlio-primary);
	color:#fff;
}
.atlio-menu-toggle{ display:none; }

.atlio-block{ padding:90px 0; background:#fff; }

/* Наскрізне чергування сірий/білий фон блоків на всіх сторінках —
   визначається позицією блоку в потоці, а не окремим полем на кожному блоці. */
.atlio-blocks-flow > .atlio-block:nth-child(odd){ background:#f9fcff; border-top:1px solid var(--atlio-border); border-bottom:1px solid var(--atlio-border); }

/* Header — position:absolute і накладається на контент зверху (як і на .page-title,
   яка компенсує це padding-top:210px). Перший блок у flexible-потоці цієї компенсації
   не мав, якщо сторінка не починається з hero-блоку з великим власним відступом. */
.atlio-blocks-flow > .atlio-block:first-child{ padding-top:210px; }

.atlio-block .sec-title{ margin-bottom:20px; }
.atlio-block .sec-title h2{ margin-bottom:14px; }
.atlio-block .sec-title .desc-text{ color:var(--atlio-body); }

/* Hero eyebrow / bullets */
.atlio-hero .eyebrow{ display:inline-block; color:var(--atlio-primary); font-weight:600; text-transform:uppercase; letter-spacing:1px; font-size:14px; margin-bottom:6px; }
.atlio-hero .text-column h1{ line-height:1.15em; margin-bottom:20px; }
.atlio-hero .bullets{ list-style:none; margin:22px 0; padding:0; }
.atlio-hero .bullets li{ position:relative; padding-left:28px; margin-bottom:10px; color:var(--atlio-secondary); font-weight:500; }
.atlio-hero .bullets li:before{ content:"\2713"; position:absolute; left:0; top:0; color:var(--atlio-primary); font-weight:700; }
.atlio-hero .btn-box{ margin-top:10px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.atlio-hero .btn-box a{ margin:0; white-space:nowrap; }
.atlio-hero .btn-box .theme-btn.btn-style-two{ padding:10px 24px; }
.atlio-hero .btn-style-three{ background:transparent; color:var(--atlio-primary); border:2px solid var(--atlio-primary); padding:10px 20px; display:inline-block; border-radius:4px; font-weight:600; }
.atlio-hero .btn-style-three:hover{ background:var(--atlio-primary); color:#fff; }
.main-banner.banner-one.atlio-hero{ padding-bottom:0; }

/* Декоративна пляма на фоні hero була розтягнута на весь блок (background-size:cover)
   і через це виглядала завеликою, ніби "напливає" на текст і заголовок.
   Фіксуємо менший розмір і зсуваємо ближче до картинки, подалі від тексту. */
.atlio-hero.banner-one{
	background-position:right top;
	background-size:1000px auto;
}
@media (max-width:991px){
	.atlio-hero.banner-one{ background-size:700px auto; }
	.atlio-hero .bullets{ display:flex; flex-direction:column; align-items:center; }
	.atlio-hero .bullets li{ display:inline-flex; align-items:flex-start; gap:10px; padding-left:0; text-align:left; }
	.atlio-hero .bullets li:before{ position:static; flex:0 0 auto; }
	.atlio-hero .btn-box{ justify-content:center; }
}

/* Mobile/tablet header: тримаємо логотип, кнопки та burger в одному рядку. */
@media (max-width:1023px){
	.main-header .main-box .outer-container{ display:flex; align-items:center; gap:12px; }
	.main-header .main-box .logo-box{ flex:0 0 150px; width:150px; padding:12px 0; }
	.main-header .nav-outer{ flex:1 1 auto; width:auto; display:flex !important; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:nowrap !important; }
	.main-header .main-menu{ order:2; width:auto; flex:0 0 auto; position:static; padding-top:0; margin:0; }
	.main-header .nav-outer .other-links{ order:1; display:flex !important; align-items:center; gap:8px; margin-left:auto; padding-top:0; flex:0 1 auto; }
	.main-menu .navbar-header{ display:flex !important; align-items:center; height:36px; line-height:0; margin-top:0; padding:0; }
	.main-header .atlio-menu-toggle{ display:inline-flex !important; align-items:center; justify-content:center; flex-direction:column; overflow:hidden; border:1px solid var(--atlio-primary); border-radius:5px; background:var(--atlio-primary); padding:0; }
	.main-menu .navbar-collapse.collapse:not(.show):not(.in){ display:none !important; }
	.main-menu .navbar-collapse{ overflow:visible; max-height:none; }
	.main-menu .navbar-collapse.show,
	.main-menu .navbar-collapse.in,
	.main-menu .collapsing{ display:block !important; }
	.main-menu .navbar-collapse > .navigation{ float:none !important; margin:12px 0 0 !important; width:100% !important; background:#fff; border:1px solid var(--atlio-border); border-radius:8px; box-shadow:0 18px 40px rgba(17,17,17,0.12); overflow:hidden; }
	.main-menu .navbar-collapse > .navigation > li{ margin:0 !important; float:none !important; width:100%; border-top:1px solid var(--atlio-border) !important; }
	.main-menu .navbar-collapse > .navigation > li:first-child{ border-top:none !important; }
	.main-menu .navbar-collapse > .navigation > li > a,
	.main-menu .navbar-collapse > .navigation > li > ul > li > a,
	.main-menu .navbar-collapse > .navigation > li > ul > li > ul > li > a{ padding:13px 16px !important; line-height:22px; color:var(--atlio-dark) !important; font-size:16px; font-weight:600; background:#fff !important; text-align:left; }
	.main-menu .navbar-collapse > .navigation > li > ul,
	.main-menu .navbar-collapse > .navigation > li > ul > li > ul{ background:#f9fcff !important; border-top:1px solid var(--atlio-border) !important; }
	.main-menu .navbar-collapse > .navigation > li > ul > li,
	.main-menu .navbar-collapse > .navigation > li > ul > li > ul > li{ border-top:1px solid var(--atlio-border) !important; }
	.main-menu .navbar-collapse > .navigation > li > ul > li:first-child,
	.main-menu .navbar-collapse > .navigation > li > ul > li > ul > li:first-child{ border-top:none !important; }
	.main-menu .navbar-collapse > .navigation > li > ul > li > a,
	.main-menu .navbar-collapse > .navigation > li > ul > li > ul > li > a{ background:#f9fcff !important; color:var(--atlio-secondary) !important; font-size:15px; font-weight:500; padding-left:28px !important; }
	.main-menu .navbar-collapse > .navigation > li > a:hover,
	.main-menu .navbar-collapse > .navigation > li > a:active,
	.main-menu .navbar-collapse > .navigation > li > a:focus,
	.main-menu .navbar-collapse > .navigation > li:hover > a,
	.main-menu .navbar-collapse > .navigation > li.current > a,
	.main-menu .navbar-collapse > .navigation > li.current-menu-item > a{ background:#eef7ff !important; color:var(--atlio-primary) !important; }
	.main-menu .navbar-collapse > .navigation > li > ul > li > a:hover,
	.main-menu .navbar-collapse > .navigation > li > ul > li:hover > a{ background:#eef7ff !important; color:var(--atlio-primary) !important; }
	.main-menu .navbar-collapse > .navigation li.dropdown .dropdown-btn{ display:block; position:absolute; top:8px; right:10px; width:32px; height:32px; border:1px solid var(--atlio-border); border-radius:6px; background:#fff; color:var(--atlio-primary); line-height:30px; text-align:center; }
	.main-menu .navbar-collapse > .navigation li.dropdown .dropdown-btn .fa{ color:var(--atlio-primary); line-height:30px; }
	.main-header .nav-outer .other-links .theme-btn{ min-width:0; white-space:nowrap; font-size:15px; line-height:22px; padding:5px 16px; }
	.main-header .nav-outer .other-links .btn-style-one{ padding:7px 20px; }
	.main-header .atlio-menu-toggle{ width:44px; height:36px; }
	.main-header .atlio-menu-toggle .icon-bar{ display:block; width:22px; height:2px; margin:2px auto; background:#fff; }
	.main-menu .navbar-collapse{ position:absolute; top:100%; left:0; right:0; width:100%; padding:0; border:none; }
}

@media (max-width:575px){
	.main-header .main-box .outer-container{ gap:8px; }
	.main-header .main-box .logo-box{ flex-basis:112px; width:112px; }
	.main-header .nav-outer{ gap:8px; }
	.main-header .nav-outer .other-links{ gap:6px; }
	.main-header .nav-outer .other-links .theme-btn{ font-size:14px; line-height:20px; padding:4px 10px; }
	.main-header .nav-outer .other-links .btn-style-one{ padding:6px 12px; }
	.main-menu .navbar-header{ height:32px; }
	.main-header .atlio-menu-toggle{ width:38px; height:32px; }
	.main-header .atlio-menu-toggle .icon-bar{ width:20px; margin:3px auto; }
}

/* Скріншоти CRM містять багато дрібного тексту — розширюємо колонку
   картинки за рахунок текстової, щоб інтерфейс лишався читабельним. */
@media (min-width:992px){
	.atlio-hero.banner-one .row.clearfix{ align-items:center; }
	.atlio-hero.banner-one .text-column{ flex:0 0 auto; width:36%; max-width:36%; }
	.atlio-hero.banner-one .image-column{ flex:0 0 auto; width:64%; max-width:64%; padding-left:50px; }
	.atlio-hero.banner-one .image-column .inner{ margin-right:-60px; }
}
/* Мокап телефону (наприклад, на сторінці "Публічні посилання") не повинен
   розтягуватись на всю колонку так само, як десктопні скріншоти. */
@media (min-width:992px){
	.atlio-hero.banner-one .image-column.image-compact{ width:40%; max-width:40%; }
	.atlio-hero.banner-one .image-column.image-compact .inner{ margin-right:0; max-width:320px; margin-left:auto; }
}
@media (min-width:992px) and (max-width:1199px){
	.atlio-hero.banner-one .image-column{ padding-left:25px; }
	.atlio-hero.banner-one .image-column .inner{ margin-right:-20px; }
}

/* Progress bar */
.atlio-progress-wrap{ max-width:760px; margin:0 auto; text-align:center; }
.atlio-progress-wrap .pb-percent{ font-size:22px; font-weight:700; color:var(--atlio-primary); margin-bottom:10px; }
.atlio-progress-wrap.is-large .pb-percent{ font-size:42px; }
.atlio-progress-track{ background:var(--atlio-border); border-radius:30px; height:14px; overflow:hidden; }
.atlio-progress-wrap.is-large .atlio-progress-track{ height:22px; }
.atlio-progress-fill{ background:linear-gradient(90deg, var(--atlio-primary), #48b0f7); height:100%; border-radius:30px; }
.atlio-progress-wrap .pb-status{ margin-top:18px; color:var(--atlio-body); }
.atlio-progress-wrap .pb-updated{ margin-top:8px; font-size:13px; color:var(--atlio-muted); }
.atlio-progress-wrap .pb-explanation{ margin-top:10px; font-size:14px; color:var(--atlio-muted); }
.atlio-progress-wrap .btn-box{ margin-top:26px; }

/* Module progress */
.atlio-module-progress .module-row{ margin-bottom:26px; max-width:760px; margin-left:auto; margin-right:auto; }
.atlio-module-progress .module-row .module-head{ display:flex; justify-content:space-between; margin-bottom:8px; font-weight:600; color:var(--atlio-dark); }
.atlio-module-progress .atlio-progress-track{ height:10px; }

/* Cards grid (feature_grid, info_cards, problem_cards) */
.atlio-cards-grid{ display:flex; flex-wrap:wrap; margin:0 -15px; }
.atlio-cards-grid .atlio-card-col{ padding:0 15px; margin-bottom:30px; }
.atlio-cards-grid.cols-2 .atlio-card-col{ width:50%; }
.atlio-cards-grid.cols-3 .atlio-card-col{ width:33.333%; }
.atlio-cards-grid.cols-4 .atlio-card-col{ width:25%; }
/* Неповний останній рядок розтягується інлайн-стилем через atlio_card_col_style() у PHP */
@media (max-width:991px){ .atlio-cards-grid.cols-3 .atlio-card-col, .atlio-cards-grid.cols-4 .atlio-card-col{ width:50%; } }
@media (max-width:575px){ .atlio-cards-grid .atlio-card-col{ width:100% !important; } }

.atlio-pagination{ margin-top:10px; text-align:center; }
.atlio-pagination ul{ margin:0; padding:0; list-style:none; }
.atlio-pagination li{ float:none; display:inline-block; margin:0 6px 10px; }
.atlio-pagination li .page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:42px;
	min-height:42px;
	padding:8px 12px;
	border:1px solid #dce6ee;
	border-radius:4px;
	color:#3b566e;
	text-decoration:none;
}
.atlio-pagination li .page-numbers:hover,
.atlio-pagination li .page-numbers.current{ background:#1f8ceb; border-color:#1f8ceb; color:#fff; }

.atlio-card{ position:relative; background:#fff; border:1px solid var(--atlio-border); border-radius:8px; padding:34px 28px; height:100%; transition:box-shadow .3s, transform .3s; }
.atlio-card:hover{ box-shadow:0 20px 40px rgba(31,140,235,0.12); transform:translateY(-4px); }
.atlio-card-link{ display:block; height:100%; color:inherit; }
.atlio-card-link:hover{ color:inherit; }
.atlio-card-image{ display:block; width:100%; height:180px; margin:0 0 22px; border-radius:5px; object-fit:cover; }
.atlio-card-link h3{ color:var(--atlio-primary); }
.atlio-card h3{ font-size:20px; margin-bottom:12px; }
.atlio-card p{ color:var(--atlio-body); margin-bottom:0; }
.atlio-card .link-box{ margin-top:16px; }
.atlio-card .link-box a, .atlio-card-link .link-box{ color:var(--atlio-primary); font-weight:600; }

.atlio-card.featured{ border:2px solid var(--atlio-primary); box-shadow:0 20px 40px rgba(31,140,235,0.14); }
.atlio-card .card-badge, .atlio-pricing-card .card-badge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--atlio-primary); color:#fff; font-size:12px; font-weight:600; padding:5px 14px; border-radius:20px; white-space:nowrap; }
.atlio-card .card-badge{ left:auto; right:24px; transform:none; }

/* Problem cards (simple pill list) */
.atlio-problem-list{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:0 0 30px; padding:0; list-style:none; }
.atlio-problem-list li{ background:#fff; border:1px solid var(--atlio-border); border-radius:40px; padding:12px 24px; color:var(--atlio-secondary); font-weight:500; }

/* Steps / timeline */
.atlio-steps{ counter-reset:atlio-step; display:flex; flex-wrap:wrap; justify-content:center; margin:0 -15px; }
.atlio-steps .step-col{ width:25%; padding:0 15px; margin-bottom:30px; }
@media (max-width:991px){ .atlio-steps .step-col{ width:50%; } }
@media (max-width:575px){ .atlio-steps .step-col{ width:100%; } }
.atlio-step{ text-align:center; }
.atlio-step .step-num{ counter-increment:atlio-step; width:48px; height:48px; line-height:48px; border-radius:50%; background:var(--atlio-primary); color:#fff; font-weight:700; margin:0 auto 18px; }
.atlio-step .step-num:before{ content:counter(atlio-step); }
.atlio-step h3{ font-size:18px; margin-bottom:0px; }
.atlio-step p{ color:var(--atlio-body); font-size:14px; }
.atlio-steps-timeline{ border-bottom:1px solid var(--atlio-border); }

/* Status columns */
.atlio-status-columns{ display:flex; flex-wrap:wrap; margin:0 -15px; }
.atlio-status-columns .status-col{ width:33.333%; padding:0 15px; margin-bottom:30px; }
@media (max-width:767px){ .atlio-status-columns .status-col{ width:100%; } }
.atlio-status-columns .status-inner{ background:#fff; border-radius:8px; padding:28px; height:100%; border-top:4px solid var(--atlio-border); }
.atlio-status-columns .status-col.status-a .status-inner{ border-top-color:#28c76f; }
.atlio-status-columns .status-col.status-b .status-inner{ border-top-color:#ff9f43; }
.atlio-status-columns .status-col.status-c .status-inner{ border-top-color:#a0aec0; }
.atlio-status-columns h3{ font-size:17px; margin-bottom:16px; }
.atlio-status-columns ul{ list-style:none; padding:0; margin:0; }
.atlio-status-columns li{ padding:8px 0; border-bottom:1px solid var(--atlio-border); color:var(--atlio-body); font-size:14px; }
.atlio-status-columns li:last-child{ border-bottom:none; }

/* FAQ accordion */
.atlio-faq{ max-width:820px; margin:0 auto; }
.atlio-faq-item{ border:1px solid var(--atlio-border); border-radius:8px; margin-bottom:14px; overflow:hidden; }
.atlio-faq-question{ display:flex; justify-content:space-between; align-items:center; padding:18px 24px; cursor:pointer; font-weight:600; color:var(--atlio-dark); background:#fff; }
.atlio-faq-question .fa{ transition:transform .3s; color:var(--atlio-primary); }
.atlio-faq-item.active .atlio-faq-question .fa{ transform:rotate(180deg); }
.atlio-faq-answer{ display:none; padding:20px 24px 20px; color:var(--atlio-body); }
.atlio-faq-answer p{ margin:0; }
.atlio-faq-answer a{ color:var(--atlio-primary); text-decoration:underline; }
.atlio-faq-item.active .atlio-faq-answer{ display:block; }

/* CTA banner */
.atlio-cta{ background:linear-gradient(120deg, var(--atlio-primary), #1567b0); border-radius:12px; padding:60px; text-align:center; color:#fff; }
.atlio-cta h2{ color:#fff; margin-bottom:12px; }
.atlio-cta p{ color:rgba(255,255,255,0.85); margin-bottom:26px; }
.atlio-cta .btn-box a{ margin:6px; }
.atlio-cta .theme-btn.btn-style-white{ background:#fff; color:var(--atlio-primary); padding:14px 34px; border-radius:4px; font-weight:600; display:inline-block; }
.atlio-cta .theme-btn.btn-style-outline{ border:2px solid #fff; color:#fff; padding:12px 32px; border-radius:4px; font-weight:600; display:inline-block; }
.atlio-cta-email-form{ display:flex; max-width:480px; margin:0 auto; gap:10px; flex-wrap:wrap; justify-content:center; }
.atlio-cta-email-form input[type=email]{ flex:1; min-width:240px; padding:14px 18px; border-radius:4px; border:none; }
.atlio-cta-email-form button{ background:#fff; color:var(--atlio-primary); border:none; padding:14px 26px; border-radius:4px; font-weight:700; cursor:pointer; }
.atlio-form-message{ margin-top:14px; font-weight:600; }
.atlio-form-message.success{ color:#c9f7d8; }
.atlio-form-message.error{ color:#ffd6d6; }
/* Форма на сторінці Контакти сидить на білому фоні — світло-рожевий
   текст помилки (розрахований на темний CTA-банер) там нечитабельний. */
.contact-form .atlio-form-message.error{ color:#dc3545; }

/* Модалка успішного надсилання заявки */
.atlio-modal-open{ overflow:hidden; }
.atlio-modal-overlay{
	position:fixed; inset:0; z-index:9999;
	background:rgba(17,17,17,0.55);
	display:flex; align-items:center; justify-content:center;
	padding:20px;
}
.atlio-modal{
	position:relative;
	background:#fff;
	border-radius:12px;
	padding:44px 36px;
	max-width:420px;
	width:100%;
	text-align:center;
	box-shadow:0 30px 60px rgba(0,0,0,0.25);
}
.atlio-modal-icon{
	width:56px; height:56px; line-height:56px;
	border-radius:50%;
	background:rgba(40,199,111,0.12);
	color:#28c76f;
	font-size:24px; font-weight:700;
	margin:0 auto 18px;
}
.atlio-modal p{ color:var(--atlio-dark); font-size:17px; font-weight:600; margin:0; }
.atlio-modal-close{
	position:absolute; top:14px; right:14px;
	width:30px; height:30px; line-height:28px;
	border:none; background:var(--atlio-light-bg); border-radius:50%;
	font-size:20px; color:var(--atlio-body); cursor:pointer;
}
.atlio-modal-close:hover{ background:var(--atlio-border); }

/* Comparison table */
.atlio-table-wrap{ overflow-x:auto; }
.atlio-table{ width:100%; border-collapse:collapse; background:#fff; }
.atlio-table th, .atlio-table td{ padding:16px 20px; border:1px solid var(--atlio-border); text-align:left; }
.atlio-table th{ background:var(--atlio-light-bg); color:var(--atlio-dark); }
.atlio-table td.center, .atlio-table th.center{ text-align:center; }
.atlio-table tr.group-row td{ background:var(--atlio-light-bg); color:var(--atlio-dark); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.03em; padding:10px 20px; }
.atlio-table .ct-icon{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; font-size:12px; }
.atlio-table .ct-icon.ct-yes{ background:rgba(45,183,111,0.12); color:#2db76f; }
.atlio-table .ct-icon.ct-no{ background:var(--atlio-light-bg); color:var(--atlio-body); }

/* Pricing cards */
.atlio-pricing-grid{ display:flex; flex-wrap:wrap; margin:0 -15px; justify-content:center; }
.atlio-pricing-card-col{ width:33.333%; padding:0 15px; margin-bottom:30px; }
@media (max-width:991px){ .atlio-pricing-card-col{ width:50%; } }
@media (max-width:575px){ .atlio-pricing-card-col{ width:100%; } }
.atlio-pricing-card{ background:#fff; border:1px solid var(--atlio-border); border-radius:10px; padding:36px 30px; text-align:center; height:100%; }
.atlio-pricing-card.highlighted{ border-color:var(--atlio-primary); box-shadow:0 20px 40px rgba(31,140,235,0.15); position:relative; }
.atlio-pricing-card .price{ font-size:38px; font-weight:700; color:var(--atlio-dark); margin:14px 0 4px; }
.atlio-pricing-card .period{ color:var(--atlio-muted); font-size:14px; margin-bottom:20px; }
.atlio-pricing-card ul{ list-style:none; padding:0; margin:0 0 26px; text-align:left; }
.atlio-pricing-card li{ padding:8px 0; color:var(--atlio-body); border-bottom:1px solid var(--atlio-border); }
.atlio-pricing-card li:last-child{ border-bottom:none; }

/* Contact form */
.atlio-contact-form .form-group{ margin-bottom:18px; }
.atlio-contact-form input, .atlio-contact-form select, .atlio-contact-form textarea{ width:100%; padding:14px 18px; border:1px solid var(--atlio-border); border-radius:4px; font-family:inherit; }
.atlio-contact-form textarea{ min-height:130px; }

/* Simple text */
.atlio-simple-text .entry-content{ max-width:860px; margin:0 auto; color:var(--atlio-body); }
.atlio-simple-text h1, .atlio-simple-text h2{ margin-bottom:20px; }
.atlio-simple-text h2, .atlio-simple-text h3{ color:#000; }
.atlio-simple-text ul{ list-style:disc; margin:0 0 20px; padding-left:24px; }
.atlio-simple-text ul li{ list-style:inherit; margin-bottom:0; padding-left:6px; color:var(--atlio-body); }
.atlio-simple-text ul li::marker{ color:var(--atlio-primary); font-size:0.85em; }

/* Blog post hero */
.atlio-post-hero.has-background-image{ background-position:center; background-size:cover; }
.atlio-post-hero.has-background-image::before{ content:""; position:absolute; inset:0; background:rgba(255,255,255,0.94); }
.atlio-post-hero.has-background-image .auto-container{ position:relative; z-index:1; }

/* Services hub (Можливості) intro under page-title */
.atlio-services-intro{ max-width:760px; margin:0 auto 10px; text-align:center; color:var(--atlio-body); }

/* Кольоровий бейдж з іконкою FontAwesome — щоб картки в сітці не зливались */
.icon-badge{
	width:60px; height:60px; border-radius:14px;
	display:flex; align-items:center; justify-content:center;
	margin-bottom:22px;
}
.icon-badge .fa{ font-size:26px; }

.icon-badge.accent-1{ background:rgba(31,140,235,0.12); }
.icon-badge.accent-1 .fa{ color:#1f8ceb; }
.icon-badge.accent-2{ background:rgba(40,199,111,0.12); }
.icon-badge.accent-2 .fa{ color:#1fa85c; }
.icon-badge.accent-3{ background:rgba(155,89,255,0.12); }
.icon-badge.accent-3 .fa{ color:#8a3ff0; }
.icon-badge.accent-4{ background:rgba(255,159,67,0.14); }
.icon-badge.accent-4 .fa{ color:#e07f1a; }

.teaser-icon{ display:flex; justify-content:center; }
.teaser-icon .icon-badge{ margin-bottom:18px; }

/* Zigzag list — список по черзі зліва/справа, без карток і рамок */
.atlio-zigzag-list{ position:relative; overflow:hidden; }
.atlio-zigzag-list::before, .atlio-zigzag-list::after{ content:''; position:absolute; z-index:0; pointer-events:none; border-radius:50%; }
.atlio-zigzag-list::before{ width:560px; height:560px; top:-200px; right:-180px; background:radial-gradient(circle, rgba(31,140,235,0.10), rgba(31,140,235,0) 70%); }
.atlio-zigzag-list::after{ width:480px; height:480px; bottom:-180px; left:-160px; background:radial-gradient(circle, rgba(155,89,255,0.09), rgba(155,89,255,0) 70%); }
.atlio-zigzag-list .auto-container{ position:relative; z-index:1; }

.zigzag-list{ max-width:840px; margin:0 auto; display:flex; flex-direction:column; gap:80px; }
.zigzag-list + .text-center{ margin-top:56px; }
.zigzag-item{ display:flex; align-items:flex-start; gap:22px; width:76%; }
.zigzag-item.side-left{ margin-right:auto; }
.zigzag-item.side-right{ margin-left:auto; flex-direction:row-reverse; text-align:right; }
.zigzag-marker{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.zigzag-item.side-right .zigzag-marker{ flex-direction:row-reverse; }
.zigzag-marker .icon-badge{ margin-bottom:0; }
.zigzag-number{ font-size:30px; font-weight:700; color:var(--atlio-border); line-height:1; }
.zigzag-content h3{ font-size:20px; margin-bottom:8px; }
.zigzag-content p{ color:var(--atlio-body); margin-bottom:0; }
.zigzag-item.side-right .link-box{ text-align:right; }
@media (max-width:767px){
	.zigzag-list{ gap:50px; }
	.zigzag-item, .zigzag-item.side-right{ width:100%; margin:0; flex-direction:row; text-align:left; }
	.zigzag-item.side-right .zigzag-marker{ flex-direction:row; }
	.zigzag-item.side-right .link-box{ text-align:left; }
}

/* Центрований варіант icon_info_list — іконка над текстом, замість "адресної" верстки */
/* Не-centered варіант icon_info_list рендерить .contact-info-list як <div>
   з дочірніми .info-line замість <li> — базовий CSS фреймворку (style.css)
   ставить <li> у position:relative, через що абсолютно позиційована іконка
   ловилась як найближчий позиціонований предок саме <li>, а не список,
   і "наїжджала" на текст замість відступу зліва. */
.contact-info-list{ list-style:none; }
.contact-info-list .info-line{ position:static; color:#555; font-size:18px; font-weight:400; line-height:1.5em; }
.contact-info-list .info-line strong{ color:#111; font-size:20px; font-weight:600; margin-bottom:6px; display:block; }

.icon-info-item.centered{ text-align:center; padding-bottom:20px; }
.icon-info-item.centered .icon-badge{ margin:0 auto 18px; }
.icon-info-item.centered .label{ color:var(--atlio-dark); font-size:18px; font-weight:600; margin-bottom:6px; }
.icon-info-item.centered .text{ color:var(--atlio-body); font-size:15px; }

/* Service detail article body (WYSIWYG) */
.services-single-section .content-column .text img{ max-width:100%; height:auto; border-radius:8px; }

/* Головна: вирівнюємо текст hero-блоку без впливу на hero інших сторінок. */
.home .banner-one .text-column .inner{ padding-top:0; }