/* ================== Base ================== */
html, body {
scroll-behavior: smooth;
height: 100%;
}
body {
margin:0;
font-family:"Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
color:#111827;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
background: radial-gradient(140% 90% at 50% 0%, #F7F9FF 0%, #EEF2FF 42%, #E9ECFF 100%);
}
/* ================== Video background (твій) ================== */
.video-background-wrapper { position: relative; overflow: hidden; }
.video-background {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
object-fit: cover; z-index: 0; filter: blur(12px); opacity: 0.6;
}
.video-background video { width: 100%; height: 100%; object-fit: cover; }
/* ================== Інші існуючі дрібниці ================== */
#features article {
background: rgba(255, 255, 255, 0.48) !important;
backdrop-filter: blur(10px);
}
#testimonials #tPhoto { object-position: 50% 20%; }
/* ================== Design tokens ================== */
:root{
--container: 1120px; /* ширина контенту як у референсі */
--thin-radius: 14px; /* кути тонкої картки (Trusted) */
--thick-radius: 16px; /* кути товстої картки (Demo) */
--thin-px: 16px; /* падінги тонкої картки */
--thin-py: 12px;
--thick-px: 32px; /* падінги товстої картки */
--thick-py: 28px;
--thin-bg: rgba(255,255,255,.44); /* дуже легкий фон */
--thick-bg: rgba(255,255,255,.86);/* насиченіший фон */
--blur: 10px;
--shadow-thin: 0 1px 4px rgba(0,0,0,.04);
--shadow-thick: 0 8px 26px rgba(17,24,39,.12);
--gap: 18px;
}
/* звужуємо всі .max-w-7xl однаково */
:where(.max-w-7xl){ max-width: var(--container) !important; }
/* ================== TRUSTED (верхній) — тонка стрічка ================== */
/* секція “The most trusted AI dental receptionist” */
section[aria-label="Reliable"] .relative{
max-width: 100% !important;
margin: 0 auto;
padding: var(--thin-py) var(--thin-px) !important;
border-radius: var(--thin-radius) !important;
background: var(--thin-bg) !important;
backdrop-filter: blur(var(--blur)) !important;
box-shadow: var(--shadow-thin) !important;
}
/* співвідношення колонок ~60/40 і щільний gap */
@media (min-width: 768px){
section[aria-label="Reliable"] .grid{
display:grid; align-items:center;
grid-template-columns: 3fr 2fr !important;
gap: var(--gap) !important;
}
}
/* права колонка — “стрічка логотипів”, без окремих плиток */
section[aria-label="Reliable"] .grid.grid-cols-3{
display:flex !important; gap: 14px !important; flex-wrap: nowrap;
}
section[aria-label="Reliable"] .grid.grid-cols-3 > div{
background: transparent !important;
box-shadow: none !important;
border-radius: 10px;
padding: 0 !important;
min-height: 50px !important;
display:flex; align-items:center; justify-content:center;
}
section[aria-label="Reliable"] .grid.grid-cols-3 img{
height: 40px; width: auto; object-fit: contain; opacity:.9;
filter: none; /* без тіней */
}
/* типографіка всередині — акуратно */
section[aria-label="Reliable"] h2{ margin-bottom: 6px; }
section[aria-label="Reliable"] p{ margin-top: 6px; color: rgb(75,85,104); }
/* ================== DEMO (нижній) — товстий, але легкий ================== */
/* секція “See the magic / Zadzwoń na naszą linię demo” */
#demo .grid{
position: relative;
border-radius: var(--thick-radius);
padding: var(--thick-py) var(--thick-px);
background: var(--thick-bg);
backdrop-filter: blur(var(--blur));
box-shadow: var(--shadow-thick);
gap: var(--gap);
}
/* співвідношення колонок як у Dentina (ліва ширша) */
@media (min-width: 768px){
#demo .grid{
display:grid; align-items:center;
grid-template-columns: 1.6fr 1.4fr !important;
}
}
/* ВАЖЛИВО: прибираємо фіолетову рамку, щоб виглядало легше */
#demo .grid::before{ content:none !important; }
/* Заголовок DEMO у стилі Dentina: великий та повітряний */
#demo h2{
font-family:"Onest",sans-serif;
font-weight: 700;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1.2;
color: #0F172A; /* глибокий темно-синій/чорний */
}
/* малий “кiкер” над заголовком DEMO — тонкий сірий */
#demo .text-xs{
border: none !important;
padding: 0 !important;
background: transparent !important;
color: rgb(100,116,139);
letter-spacing: .08em;
}
/* аудіо/контентна коробка справа — легка, без зайвої товщини */
#demo .grid > div:last-child > *{
background: rgba(255,255,255,.9);
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
/* ================== Вертикальні відступи між секціями ================== */
section[aria-label="Reliable"]{ margin-top: 18px; }
#demo{ margin-top: 22px; }
/* Збільшуємо ширину контейнера Reliable */
:where(.max-w-7xl){
max-width: 1280px !important; /* було 1120px */
}
/* Сам блок робимо більш розтягнутим */
section[aria-label="Reliable"] .relative{
padding: 20px 28px !important; /* трохи більше падінгів */
}
/* У grid даємо лівій колонці більше простору */
@media (min-width: 768px){
section[aria-label="Reliable"] .grid{
grid-template-columns: 2fr 1fr !important; /* було 3fr/2fr */
}
}
/* DEMO — збільшуємо висоту секції */
#demo .grid{
padding: 48px 40px !important; /* було ~28px, збільшуємо */
min-height: 480px; /* дає стабільну висоту (залежить від роздільності) */
}
/* RELIABLE (Najbardziej...) — робимо нижчим */
section[aria-label="Reliable"] .relative{
padding: 16px 22px !important; /* компактні падінги, менша висота */
min-height: auto !important; /* щоб не тягнувся */
}
/* ВІДСТАНЬ між секціями — зменшуємо */
section[aria-label="Reliable"]{
margin-bottom: 16px !important; /* було 4.5 см, стане близько 1 см */
}
#demo{
margin-top: 0 !important; /* прибираємо зайвий відступ зверху */
}
/* робимо відстань між секціями як у Dentina (~1 см) */
section[aria-label="Reliable"] {
margin-bottom: 16px !important; /* замість великих 60–70px */
}
#demo {
margin-top: 0 !important; /* прибираємо зайвий відступ зверху */
}
/* Прибираємо зайвий відступ знизу у Reliable */
section[aria-label="Reliable"] {
margin-bottom: 8px !important; /* мінімальний відступ */
}
/* Підтягуємо DEMO секцію вгору */
#demo {
margin-top: 0 !important; /* прибираємо зовнішній відступ зверху */
padding-top: 8px !important; /* зменшуємо внутрішній відступ */
}
/* Демо-блок: фон як у Reliable */
#demo .grid {
background: var(--thin-bg) !important; /* той самий легкий фон */
box-shadow: var(--shadow-thin) !important;
backdrop-filter: blur(var(--blur)) !important;
}
/* Заголовок у Reliable */
section[aria-label="Reliable"] h2 {
font-family: "Onest", sans-serif;
font-size: 16px !important;
font-weight: 700 !important; /* Bold */
line-height: 24px !important;
color: rgb(36, 38, 42) !important; /* темний */
margin-bottom: 6px;
}
/* Заголовок у DEMO */
#demo h2 {
font-family: "Onest", sans-serif;
font-size: 40px !important;
font-weight: 600 !important; /* Semi Bold */
line-height: 50px !important;
color: rgb(36, 38, 42) !important;
margin-bottom: 12px;
}
/* Підтягуємо текст наверх у #demo */
#demo .text-xs {
position: absolute;
top: -32px; /* піднімаємо над блоком */
left: 50%;
transform: translateX(-50%);
text-align: center;
font-family: "Onest", sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: .08em;
color: rgb(100,116,139);
text-transform: uppercase;
background: transparent; /* приберемо фон, якщо був */
border: none; /* приберемо рамку, якщо була */
padding: 0;
}
#demo {
position: relative; /* потрібен контекст для absolute */
}
/* Текст-кікер у лівому верхньому куті Demo */
#demo .text-xs {
position: absolute;
top: -28px; /* піднімаємо над блоком */
left: 0; /* вирівнюємо по лівому краю */
transform: none; /* прибираємо центрування */
text-align: left;
font-family: "Onest", sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: .08em;
color: rgb(100,116,139);
text-transform: uppercase;
background: transparent;
border: none;
padding: 0;
}
#demo {
position: relative; /* потрібен контекст для absolute */
}
/* Текст-кікер всередині блоку Demo */
#demo .text-xs {
position: static !important; /* прибираємо absolute */
display: block;
margin-bottom: 12px; /* відступ після кікера */
text-align: left;
font-family: "Onest", sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: .08em;
color: rgb(100,116,139);
text-transform: uppercase;
background: transparent;
border: none;
padding: 0;
}
/* Текст-кікер на самому початку білого блоку DEMO */
#demo .text-xs {
position: static !important; /* всередині потоку */
display: block;
margin: 0 0 14px 0; /* відступ тільки знизу */
padding: 0;
text-align: left;
font-family: "Onest", sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: .08em;
color: rgb(100,116,139);
text-transform: uppercase;
background: transparent;
border: none;
}
/* Кікер (перший рядок) */
#demo .text-xs {
font-family: "Onest", sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: rgb(100,116,139);
margin-bottom: 18px; /* відступ після кікера */
display: block;
position: static !important; /* всередині блоку */
text-align: left;
}
/* Великий заголовок */
#demo h2 {
font-family: "Onest", sans-serif;
font-size: clamp(28px, 3vw, 40px); /* адаптивний розмір */
font-weight: 600; /* Semi Bold */
line-height: 1.25;
color: rgb(36,38,42);
margin-bottom: 16px;
}
/* Пояснювальний текст */
#demo p {
font-family: "Onest", sans-serif;
font-size: 16px;
line-height: 24px;
color: rgb(75,85,104);
margin-bottom: 24px;
}
/* Номер телефону — стилізація як кнопка */
#demo .phone-button {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: "Onest", sans-serif;
font-size: 20px;
font-weight: 600;
color: rgb(36,38,42);
background: #fff;
border-radius: 12px;
padding: 12px 20px;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
transition: all .2s ease;
}
#demo .phone-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
/* Плеєр (права колонка) */
#demo .player-box {
background: rgba(255,255,255,.9);
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
/* Контейнер з іконками */
section[aria-label="Reliable"] .grid.grid-cols-3 {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important; /* 3 в ряд */
gap: 18px !important;
align-items: center;
justify-items: center;
}
/* Картки іконок */
section[aria-label="Reliable"] .grid.grid-cols-3 > div {
background: #fff;
border-radius: 12px;
padding: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
display: flex;
align-items: center;
justify-content: center;
height: 90px; /* трохи менше висоти блока */
width: 90px; /* квадратні */
}
/* Самі іконки */
section[aria-label="Reliable"] .grid.grid-cols-3 img {
height: 64px; /* більші */
width: auto;
object-fit: contain;
}
/* 1) Даємо картці контекст для абсолютного позиціювання */
#demo .grid{
position: relative; /* контекст */
}
/* 2) Ставимо кікер усередині блоку, зліва зверху, поверх фону */
#demo .grid .text-xs{
position: absolute !important;
top: 18px; /* відступ від верху картки */
left: 24px; /* відступ від лівого краю картки */
margin: 0 !important;
padding: 0 !important;
transform: none !important;
text-align: left;
/* стиль кікера, як у Dentina */
font-family: "Onest", sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: rgb(100,116,139);
background: transparent !important; /* фон картки не чіпаємо */
border: none !important;
}
/* 3) Щоб контент не перекрився з кікером — додаємо «місця» зверху
тільки для лівої колонки (де заголовок і текст) */
#demo .grid > div:first-child{
padding-top: 42px !important; /* висота кікера + відступ */
}
/* (необов’язково) трошки притиснемо заголовок, щоб ритм був охайний */
#demo .grid > div:first-child h2{
margin-top: 6px !important;
}
/* Заголовок у DEMO */
#demo h2 {
font-family: "Onest", sans-serif;
font-size: clamp(36px, 4vw, 44px); /* адаптивно: 36–44px */
font-weight: 600; /* Semi Bold */
line-height: 1.25;
color: rgb(36,38,42);
margin-bottom: 18px;
}
/* Пояснювальний текст у DEMO */
#demo p {
font-family: "Onest", sans-serif;
font-size: 18px; /* було 16px — робимо більшим */
line-height: 28px; /* простіше читати */
color: rgb(75,85,104);
margin-bottom: 26px;
}
/* Контейнер кнопок */
#demo .buttons {
display: flex;
justify-content: space-between; /* розкидає по краях */
align-items: center;
gap: 24px; /* відстань між ними */
margin-bottom: 22px;
}
/* Загальні стилі кнопок */
#demo .buttons a,
#demo .buttons button {
font-family: "Onest", sans-serif;
font-size: 20px; /* більший шрифт */
font-weight: 600;
padding: 16px 28px; /* більше повітря */
border-radius: 50px; /* елегантне заокруглення */
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.2s ease;
}
/* Телефонна кнопка */
#demo .buttons a {
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.1);
color: rgb(36,38,42);
}
#demo .buttons a:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
/* Кнопка "Skopiuj numer" */
#demo .buttons button {
background: #f8f8ff;
color: rgb(88,28,255);
box-shadow: 0 2px 6px rgba(88,28,255,.15);
}
#demo .buttons button:hover {
transform: translateY(-2px);
background: #ede9fe;
}
/* Контейнер */
#demo .buttons {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
margin-bottom: 22px;
}
/* Загальні стилі для кнопок */
#demo .buttons a,
#demo .buttons button {
flex: 1; /* обидві займають однакову ширину */
min-width: 240px; /* мінімальна ширина, щоб виглядали великими */
max-width: 280px; /* необов'язково: ліміт щоб не розтягувались занадто */
text-align: center;
font-family: "Onest", sans-serif;
font-size: 20px;
font-weight: 600;
padding: 16px 20px;
border-radius: 50px;
display: inline-flex;
justify-content: center; /* вирівнюємо текст/іконки по центру */
align-items: center;
gap: 10px;
transition: all 0.2s ease;
}
/* Телефонна кнопка */
#demo .buttons a {
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.1);
color: rgb(36,38,42);
}
#demo .buttons a:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
/* Кнопка "Skopiuj numer" */
#demo .buttons button {
background: #f8f8ff;
color: rgb(88,28,255);
box-shadow: 0 2px 6px rgba(88,28,255,.15);
}
#demo .buttons button:hover {
transform: translateY(-2px);
background: #ede9fe;
}
/* Контейнер */
#demo .buttons {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
margin-bottom: 22px;
width: 100%;
}
/* Кнопки */
#demo .buttons a,
#demo .buttons button {
flex: 1; /* ділимо простір порівну */
height: 70px; /* висота кнопок */
text-align: center;
font-family: "Onest", sans-serif;
font-size: 20px;
font-weight: 600;
border-radius: 50px;
display: inline-flex;
justify-content: center; /* центр по горизонталі */
align-items: center; /* центр по вертикалі */
gap: 10px;
transition: all 0.2s ease;
}
/* Телефонна кнопка */
#demo .buttons a {
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.1);
color: rgb(36,38,42);
}
#demo .buttons a:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
/* Кнопка "Skopiuj numer" */
#demo .buttons button {
background: #f8f8ff;
color: rgb(88,28,255);
box-shadow: 0 2px 6px rgba(88,28,255,.15);
}
#demo .buttons button:hover {
transform: translateY(-2px);
background: #ede9fe;
}
/* Основний фон для всіх секцій після відео */
:root {
--main-bg: #f0f3ff; /* світло-блакитний */
}
.video-background-wrapper ~ section {
background: var(--main-bg) !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
margin-top: 0;
padding-top: 60px;
padding-bottom: 60px;
}
/* Виняток: CTA "Gotowi przestać tracić połączenia?" */
section#cta,
section[aria-label="Gotowi przestać tracić połączenia?"] {
background: transparent !important;
}
/* Заголовок "Recepcjonistka AI nr 1 w stomatologii" */
section[aria-label="HeroReception"] h2 {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 600; /* можна лишити трохи жирніший, щоб виділити */
line-height: 28px;
color: rgba(0, 0, 0, 0.87);
margin-bottom: 8px;
}
/* Підзаголовок "Tysiące dentystów ufa..." */
section[aria-label="HeroReception"] p {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400; /* normal */
line-height: 24px;
color: rgba(0, 0, 0, 0.87);
}
/* Контейнер блоку */
section[aria-label="HeroReception"] .relative {
display: grid;
grid-template-columns: 1fr 1fr; /* текст + картинка */
align-items: center;
gap: 40px;
padding: 60px 40px;
background: transparent;
}
/* Заголовок */
section[aria-label="HeroReception"] h2 {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 36px;
color: rgba(0,0,0,0.87);
margin-bottom: 16px;
}
/* Текст */
section[aria-label="HeroReception"] p {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 28px;
color: rgba(0,0,0,0.87);
margin-bottom: 24px;
}
/* Виділення ключових слів */
section[aria-label="HeroReception"] p strong,
section[aria-label="HeroReception"] p span.highlight {
color: #4f46e5; /* синьо-фіолетовий як у Dentina */
font-weight: 600;
}
/* Бейджі з країнами */
section[aria-label="HeroReception"] .country-badges {
display: flex;
gap: 12px;
margin-bottom: 24px;
}
section[aria-label="HeroReception"] .country-badges span {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 500;
padding: 6px 14px;
background: #fff;
border-radius: 20px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
/* Кнопка */
section[aria-label="HeroReception"] .cta-btn {
display: inline-block;
padding: 14px 28px;
font-size: 16px;
font-weight: 600;
background: #4f46e5;
color: #fff;
border-radius: 12px;
transition: all .2s ease;
text-decoration: none;
}
section[aria-label="HeroReception"] .cta-btn:hover {
background: #4338ca;
transform: translateY(-2px);
}
/* Контейнер HeroReception */
section[aria-label="HeroReception"] .relative {
display: grid;
grid-template-columns: 1fr 1fr; /* текст + картинка */
align-items: center;
gap: 40px;
padding: 60px 40px;
max-width: 1200px; /* обмежуємо ширину як у Dentina */
margin: 0 auto; /* центруємо по екрану */
}
/* Колонка з картинкою */
section[aria-label="HeroReception"] .image {
display: flex;
justify-content: flex-end; /* картинка «прижата» вправо */
padding-right: 40px; /* додаємо ще відступ, щоб збільшити відстань */
}
/* Блок Recepcjonistka AI nr 1 w stomatologii */
section[aria-label="HeroReception"] {
max-width: 1100px; /* менша ширина контейнера → ближче до центру */
margin: 0 auto; /* центруємо */
padding: 60px 40px;
display: grid;
grid-template-columns: 1fr 1fr; /* текст + картинка */
align-items: center;
gap: 40px;
}
/* Ліва колонка з текстом */
section[aria-label="HeroReception"] .text {
max-width: 500px;
margin-left: auto; /* притягує текст ближче до центру */
}
/* Права колонка з картинкою */
section[aria-label="HeroReception"] .image {
display: flex;
justify-content: center; /* картинка теж ближче до центру */
padding-right: 0; /* прибираємо сильний відступ */
}
section[aria-label="HeroReception"] .image img,
section[aria-label="HeroReception"] .image svg {
max-width: 90%; /* зменшуємо трохи, щоб гармонійно */
height: auto;
}
/* HeroReception — звужуємо контейнер і центруємо вміст */
section[aria-label="HeroReception"] {
max-width: 1100px; /* робимо вужчим ніж було */
margin: 0 auto; /* центруємо */
padding: 60px 20px;
display: flex;
justify-content: space-between; /* текст і картинка розводимо всередині */
align-items: center;
gap: 40px;
}
/* Ліва частина (перший div) */
section[aria-label="HeroReception"] > div:first-child {
flex: 1;
max-width: 500px;
margin-left: auto; /* підтягнути ближче до центру */
}
/* Права частина (другий div — картинка) */
section[aria-label="HeroReception"] > div:last-child {
flex: 1;
display: flex;
justify-content: center; /* картинка по центру колонки */
}
section[aria-label="HeroReception"] img,
section[aria-label="HeroReception"] svg {
max-width: 90%; /* щоб картинка не прилипала */
height: auto;
}
/* Секція з заголовком "Gotowi przestać tracić połączenia?" */
section[aria-label="CTA"] {
background: #4f46e5; /* насичений синій (можеш замінити на свій відтінок) */
color: #fff; /* текст білий для контрасту */
padding: 80px 20px; /* додаємо повітря */
border-radius: 16px; /* заокруглення як у Dentina */
text-align: center; /* центруємо контент */
}
/* Заголовок всередині */
section[aria-label="CTA"] h2,
section[aria-label="CTA"] h3 {
color: #fff;
font-size: 36px;
font-weight: 700;
margin-bottom: 20px;
}
/* Текст */
section[aria-label="CTA"] p {
color: rgba(255, 255, 255, 0.9);
font-size: 18px;
margin-bottom: 30px;
}
/* Кнопка */
section[aria-label="CTA"] a,
section[aria-label="CTA"] button {
background: #fff;
color: #4f46e5;
font-weight: 600;
padding: 14px 32px;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
}
section[aria-label="CTA"] a:hover,
section[aria-label="CTA"] button:hover {
background: #f0f3ff;
color: #3730a3;
}
/* Секція "Recepcjonistka AI nr 1 w stomatologii" */
#receptionist {
max-width: 1200px; /* обмежуємо ширину */
margin: 0 auto; /* центруємо */
display: flex;
align-items: center; /* вирівнюємо по вертикалі */
justify-content: space-between;
gap: 40px;
padding: 60px 20px;
}
/* Ліва колонка (текст) */
#receptionist .text {
flex: 1;
max-width: 500px;
}
/* Права колонка (картинка) */
#receptionist .image {
flex: 1;
display: flex;
justify-content: center;
}
#receptionist .image img {
max-width: 90%; /* трохи зменшуємо */
height: auto;
}
/* Центруємо блок і робимо композицію "текст + картинка" */
#receptionist {
max-width: 1100px; /* звужуємо контейнер → ближче до центру */
margin: 0 auto; /* по центру екрана */
padding: 60px 20px;
display: grid;
grid-template-columns: 1fr 1fr; /* ліва колонка текст, права — картинка */
align-items: center;
column-gap: 40px;
}
/* Ліва колонка (текст) — трохи ближче до центру */
#receptionist > *:first-child {
justify-self: end;
max-width: 520px;
}
/* Права колонка (картинка) — теж до центру */
#receptionist > *:last-child {
justify-self: start;
display: flex;
justify-content: center;
}
/* Не даємо зображенню «вилазити», за потреби злегка зменшуємо */
#receptionist img,
#receptionist svg {
max-width: 90%;
height: auto;
}
/* Адаптив: на вузьких екранах — стовпчиком */
@media (max-width: 1100px) {
#receptionist {
grid-template-columns: 1fr;
row-gap: 24px;
max-width: 920px;
}
#receptionist > *:first-child,
#receptionist > *:last-child {
justify-self: center;
text-align: c
/* Контейнер з текстом і картинкою */
#receptionist {
max-width: 1200px; /* трохи ширший контейнер */
margin: 0 auto;
display: grid;
grid-template-columns: 480px 1fr; /* ліва колонка під текст */
align-items: center;
column-gap: 60px;
}
/* Ліва колонка (текст) — не розтягується */
#receptionist > *:first-child {
max-width: 460px;
justify-self: end;
}
/* Права колонка (картинка) — більша */
#receptionist > *:last-child {
justify-self: start;
}
#receptionist img,
#receptionist svg {
max-width: 100%;
height: auto;
transform: scale(1.3); /* збільшуємо картинку на 30% */
transform-origin: center; /* центр масштабу */
}
/* Адаптив для вузьких екранів */
@media (max-width: 1100px) {
#receptionist {
grid-template-columns: 1fr;
row-gap: 24px;
text-align: center;
}
#receptionist > *:first-child,
#receptionist > *:last-child {
justify-self: center;
}
#receptionist img,
#receptionist svg {
transform: scale(1); /* без збільшення на мобільних */
max-width: 95%;
}
}
/* ================== ОНОВЛЕННЯ ВІД 7 ВЕРЕСНЯ 2025 ================== */
/* --- 1. Збільшення картинки в секції "Recepcjonistka AI" --- */
#receptionist {
/* Змінюємо пропорції: текст займає трохи менше місця, картинка — більше */
grid-template-columns: 0.9fr 1.1fr;
align-items: center;
/* Більша картинка в секції "Recepcjonistka AI nr 1 w stomatologii" */
#receptionist {
grid-template-columns: 0.8fr 1.2fr; /* більше простору під картинку */
align-items: center;
}
#receptionist img, #receptionist svg {
transform: scale(1.25); /* збільшуємо на 25% */
transform-origin: center; /* центр масштабування */
}
/* Остаточне масштабування для блоку "Recepcjonistka AI" */
#receptionist img,
#receptionist svg {
transform: scale(1.25) !important; /* 25% збільшення */
transform-origin: center !important; /* з центру */
}
/* Остаточне масштабування для блоку "Recepcjonistka AI" */
#receptionist img,
#receptionist svg {
transform: scale(1.25) !important; /* збільшуємо на 25% */
transform-origin: center !important; /* масштаб від центру */
}
/* ==== Recepcjonistka AI — надійне збільшення через обгортку ==== */
#receptionist {
/* більше місця під ілюстрацію праворуч */
grid-template-columns: 0.8fr 1.2fr !important;
align-items: center;
}
/* масштабуємо контейнер, а не ![]()
— не ламаємо tailwind-трансформації */
#receptionist .reception-illus {
transform: scale(1.15);
transform-origin: center right; /* зростає у бік тексту */
}
/* не даємо внутрішнім утиліті обмежувати розмір */
#receptionist .reception-illus img,
#receptionist .reception-illus svg {
max-width: none !important;
}
/* Збільшення блоку Recepcjonistka AI */
#receptionist {
grid-template-columns: 0.8fr 1.2fr !important; /* більше місця під картинку */
align-items: center;
}
#receptionist .reception-illus {
transform: scale(1.4); /* збільшуємо ~40% */
transform-origin: center right; /* щоб не відсунуло текст */
}
#receptionist .reception-illus img {
max-width: none !important;
}
/* Збільшення блоку Recepcjonistka AI */
#receptionist {
grid-template-columns: 0.7fr 1.3fr !important; /* більше місця під картинку */
align-items: center;
}
#receptionist .reception-illus {
transform: scale(1.5); /* збільшуємо ~50% для пропорційності до тексту */
transform-origin: center right; /* щоб не відсунуло текст */
}
#receptionist .reception-illus img,
#receptionist .reception-illus svg {
max-width: none !important; /* не обмежуємо розмір */
}
/* ==== CTA: суцільний синій фон, full-bleed ==== */
:where(section#cta, section[aria-label="CTA"], section.bg-indigo-600,
section[aria-label="Gotowi przestać tracić połączenia?"]) {
background: #4f46e5 !important; /* фіолетовий як на референсі */
color: #fff !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 80px 20px !important;
}
/* Білий текст і контрастна кнопка всередині CTA */
:where(section#cta, section[aria-label="CTA"], section.bg-indigo-600,
section[aria-label="Gotowi przestać tracić połączenia?"]) h2,
:where(section#cta, section[aria-label="CTA"], section.bg-indigo-600,
section[aria-label="Gotowi przestać tracić połączenia?"]) h3,
:where(section#cta, section[aria-label="CTA"], section.bg-indigo-600,
section[aria-label="Gotowi przestać tracić połączenia?"]) p {
color: #fff !important;
}
:where(section#cta, section[aria-label="CTA"], section.bg-indigo-600,
section[aria-label="Gotowi przestać tracić połączenia?"]) a,
:where(section#cta, section[aria-label="CTA"], section.bg-indigo-600,
section[aria-label="Gotowi przestać tracić połączenia?"]) button {
background: #fff !important;
color: #4f46e5 !important;
font-weight: 600;
padding: 14px 32px;
border-radius: 10px;
}
/* Якщо треба повний «від краю до краю» навіть всередині контейнера */
:where(section#cta, section[aria-label="CTA"], section.bg-indigo-600,
section[aria-label="Gotowi przestać tracić połączenia?"]) .max-w-7xl {
max-width: none !important;
}
/* === User-requested updates === */
/* Region-reach map scale: bigger on desktop, natural on mobile */
.region-reach .map-scale {
transform: scale(1.35);
transform-origin: center right;
}
@media (max-width: 768px) {
.region-reach .map-scale {
transform: scale(1) !important;
transform-origin: center !important;
}
}
/* Ensure country badges (flags) are always visible on desktop */
.region-reach .country-badges {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.region-reach .country-badges > span {
display: inline-flex;
align-items: center;
}
/* Larger fonts for the requested text block (already updated in HTML classes) */
/* Safety in case styles override elsewhere */
.region-reach h2 { font-size: clamp(28px, 4.6vw, 44px); }
.region-reach p { font-size: clamp(18px, 2.6vw, 24px); line-height: 1.45; }
/* ==== Recepcjonistka AI: подвоєне збільшення ==== */
#receptionist {
grid-template-columns: 0.6fr 1.4fr !important; /* ще більше місця для картинки */
align-items: center;
}
#receptionist .reception-illus {
transform: scale(2); /* подвоюємо розмір */
transform-origin: center right; /* збільшується в бік тексту */
}
#receptionist .reception-illus img,
#receptionist .reception-illus svg {
max-width: none !important; /* щоб не обмежувалось */
}
/* ==== Recepcjonistka AI: подвоєне збільшення (100%) ==== */
#receptionist {
grid-template-columns: 0.5fr 1.5fr !important; /* більше місця під картинку */
align-items: center !important;
}
#receptionist .reception-illus {
transform: scale(2) !important; /* подвоюємо розмір */
transform-origin: center right !important; /* зростає в бік тексту */
}
#receptionist .reception-illus img,
#receptionist .reception-illus svg {
max-width: none !important; /* знімаємо обмеження */
}
/* ==== Region-reach (Recepcjonistka AI nr 1 w stomatologii) ==== */
/* Робимо ілюстрацію компактнішою */
.region-reach .map-scale {
transform: scale(1.15) !important; /* було 1.35 */
transform-origin: center right !important;
}
@media (max-width: 1200px) {
.region-reach .map-scale {
transform: scale(1.08) !important;
}
}
@media (max-width: 768px) {
.region-reach .map-scale {
transform: scale(1) !important;
transform-origin: center !important;
}
}
/* Трохи змінюємо пропорції колонок для балансу */
.region-reach .mx-auto.grid {
grid-template-columns: 1.1fr 0.9fr;
}
@media (max-width: 1024px){
.region-reach .mx-auto.grid {
grid-template-columns: 1fr 1fr;
}
}
/* === СТИЛІ ДЛЯ МОБІЛЬНОЇ АДАПТАЦІЇ === */
/* Ці правила застосовуються до екранів шириною до 767px (тобто для смартфонів) */
@media (max-width: 767px) {
/* --- Загальний макет та відступи --- */
/* Зменшуємо відступи для всіх основних секцій, щоб заощадити місце */
main section {
padding-top: 48px !important;
padding-bottom: 48px !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
/* --- Шапка сайту та навігація --- */
/* Змінюємо розташування елементів у шапці */
header .grid {
grid-template-columns: auto 1fr; /* Логотип та перемикач мов — основні елементи */
justify-content: space-between;
}
header .grid a[href="#"] {
margin-right: auto; /* Відсуває перемикач мов у правий край */
}
/* Основне меню навігації на мобільних пристроях приховано за замовчуванням.
Для повноцінного "гамбургер-меню" потрібні зміни в HTML та JavaScript.
Приховати його — найпростіше рішення, щоб уникнути зламаного та перевантаженого макета. */
header nav.hidden.md\:flex {
display: none !important;
}
/* --- Головний екран (верхня частина сторінки) --- */
/* Коригуємо відступи головного екрана */
.video-background-wrapper section:first-of-type {
padding-top: 64px !important;
padding-bottom: 48px !important;
}
/* Робимо головний заголовок меншим і більш читабельним на мобільних */
#hero-title {
font-size: 42px !important;
line-height: 1.15 !important;
}
/* Розташовуємо головні кнопки одну під одною */
.mt-10.flex {
flex-direction: column;
gap: 1rem;
align-items: center;
}
.mt-10.flex a {
width: 90%;
justify-content: center;
}
/* --- Секція "Демо" --- */
/* Розташовуємо колонки секції "Зателефонуйте на нашу демо-лінію" одну під одною */
#demo .grid {
grid-template-columns: 1fr !important;
padding: 24px 16px !important;
}
/* Розташовуємо кнопки з номером телефону та копіюванням одну під одною */
#demo .flex-wrap {
flex-direction: column;
align-items: stretch; /* Робимо кнопки на повну ширину */
}
/* --- Секція "Recepcjonistka AI" (Мапа) --- */
/* Розташовуємо текст і мапу вертикально */
.region-reach .mx-auto.grid {
grid-template-columns: 1fr !important;
text-align: center;
}
/* Скидаємо масштабування мапи до її природного розміру */
.region-reach .map-scale {
transform: scale(1) !important;
transform-origin: center !important;
margin-top: 24px;
}
/* --- Секція "Функції" --- */
/* Розташовуємо картки з функціями в один стовпець */
#features .grid {
grid-template-columns: 1fr !important;
}
#features article {
min-height: auto !important; /* Прибираємо фіксовану мінімальну висоту */
}
/* --- Секція "Відгуки" --- */
/* Розташовуємо текст та зображення відгуку один під одним */
#testimonials .grid {
grid-template-columns: 1fr !important;
gap: 2rem;
}
/* На мобільних ставимо зображення перед текстом */
#testimonials .relative {
order: -1;
}
#tPhoto {
height: 350px !important; /* Коригуємо висоту зображення для мобільних */
}
/* Дозволяємо кнопкам-аватарам переноситись на новий рядок */
#testimonials .flex.items-center.gap-4 {
flex-wrap: wrap;
justify-content: center;
}
/* --- Секція "У цифрах" --- */
/* Розташовуємо статистику та цитату одну під одною */
#numbers .grid {
grid-template-columns: 1fr !important;
}
/* Прибираємо відступ, який ховав текст за зображенням на десктопі */
#numbers .pr-\[220px\], #numbers .pr-\[260px\], #numbers .pr-\[300px\] {
padding-right: 0 !important;
}
/* Приховуємо зображення асистента на мобільних, щоб заощадити місце */
#numbers img.hidden {
display: none !important;
}
/* --- Секції "Як почати" та "Цінник" --- */
/* Розташовуємо всі картки в цих секціях в один стовпець */
#get-started .grid,
#pricing .grid {
grid-template-columns: 1fr !important;
}
/* --- Контакти та Футер --- */
/* Розташовуємо колонки з контактами одна під одною та центруємо їх */
#contact .grid {
grid-template-columns: 1fr !important;
text-align: center;
gap: 1.5rem;
}
#contact .flex.md\:justify-end {
justify-content: center !important;
}
#contact .flex-col.md\:flex-row {
flex-direction: column;
align-items: center;
}
}
/* === РАДИКАЛЬНЕ ВИПРАВЛЕННЯ ГОРИЗОНТАЛЬНОЇ ПРОКРУТКИ === */
/* Цей код примусово обрізає все, що виходить за межі екрана,
і застосовується до основних елементів сторінки, щоб гарантувати результат. */
html, body {
position: relative !important;
width: 100% !important;
overflow-x: hidden !important;
}
/* ==== MOBILE FIX PACK (≤640px) — без зміни дизайну/контенту ==== */
@media (max-width: 640px){
html, body { overflow-x: hidden; } /* прибирає горизонтальний скрол */
.max-w-7xl, .max-w-screen-2xl { padding-left: 16px !important; padding-right: 16px !important; }
/* HERO: без гігантських шрифтів і “стрибків” */
#hero-title{
font-size: clamp(28px, 7.5vw, 36px) !important;
line-height: 1.15 !important;
letter-spacing: -0.02em !important;
}
section.relative.z-10 p.max-w-3xl{ font-size: 16px !important; line-height: 24px !important; }
/* Відео-бекграунд не роздуває секцію */
.video-background-wrapper{ min-height: unset !important; }
.video-background{ filter: blur(10px) !important; opacity:.5 !important; }
.video-background video{ height: 100% !important; object-fit: cover !important; }
/* Sticky header: компактніше, навігація ховається як і було */
header .grid{ grid-template-columns: 1fr auto !important; gap: 8px !important; }
header nav{ display: none !important; } /* у тебе й так hidden на md */
/* “Reliable” тонка стрічка — одна колонка, рівні падінги */
section[aria-label="Reliable"] .relative{ padding: 14px !important; }
section[aria-label="Reliable"] .grid{ display:block !important; }
section[aria-label="Reliable"] .grid > *{ margin-top: 10px; }
section[aria-label="Reliable"] .grid.grid-cols-3{ gap: 10px !important; }
section[aria-label="Reliable"] .grid.grid-cols-3 > div{ height: 64px !important; width: 64px !important; }
section[aria-label="Reliable"] .grid.grid-cols-3 img{ height: 40px !important; }
/* DEMO-картка: чисті відступи, жодних абсолютів, кнопки на всю ширину */
#demo .grid{ display:block !important; padding: 18px !important; }
#demo .text-xs{ position: static !important; margin: 0 0 8px !important; }
#demo h2{ font-size: 24px !important; line-height: 30px !important; margin-bottom: 10px !important; }
#demo p{ font-size: 15px !important; line-height: 22px !important; }
#demo .flex.flex-wrap.items-center.gap-3{ gap: 10px !important; }
#demo a[href^="tel:"],
#demo #copy-demo-number{
width: 100% !important; justify-content: center !important;
padding: 12px 16px !important; border-radius: 9999px !important;
}
#demo iframe{ height: 200px !important; }
/* Region-reach (мапа): стек, natural scale */
.region-reach .mx-auto.grid{ grid-template-columns: 1fr !important; row-gap: 16px !important; }
.region-reach .map-scale{ transform: scale(1) !important; transform-origin: center !important; }
.region-reach h2{ font-size: 24px !important; line-height: 30px !important; }
.region-reach p{ font-size: 16px !important; line-height: 24px !important; }
/* Features/Numbers/Get started/Pricing — одна колонка, рівні падінги */
#features .grid,
#get-started .grid,
#pricing .grid,
#numbers .grid{ grid-template-columns: 1fr !important; }
/* Testimonials: фотка не обрізає обличчя й текст не їде */
#testimonials #tPhoto{ height: 320px !important; object-position: 50% 20% !important; }
#testimonials h2{ font-size: 26px !important; line-height: 32px !important; }
#tText{ font-size: 16px !important; line-height: 24px !important; }
/* CTA full-bleed не ламає вьюпорт (було 100vw+left:50%) */
#cta{
position: static !important; width: auto !important; left: auto !important;
margin: 0 !important; padding: 32px 16px !important; border-radius: 12px !important;
}
/* Footer — дрібніший тип */
footer p{ font-size: 13px !important; }
}
/* Маленькі планшети (≤768px): підправимо сітки, щоб не “гуляли” */
@media (max-width: 768px){
section[aria-label="Reliable"] .grid{ grid-template-columns: 1fr !important; }
#demo .grid{ grid-template-columns: 1fr !important; }
#numbers .pr-\[220px\], #numbers .md\:pr-\[260px\], #numbers .lg\:pr-\[300px\]{ padding-right: 0 !important; }
}
/* Hide the big map/illustration on phones */
@media (max-width: 640px){
/* ховаємо праву колонку з мапою */
.region-reach .relative.overflow-visible{
display: none !important;
}
/* про всяк випадок — якщо картинка вставлена напряму */
.region-reach .map-scale,
.region-reach .map-scale img{
display: none !important;
}
}
/* ================== Base ================== */
html, body {
scroll-behavior: smooth;
height: 100%;
}
body {
margin:0;
font-family:"Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
color:#111827;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
background: radial-gradient(140% 90% at 50% 0%, #F7F9FF 0%, #EEF2FF 42%, #E9ECFF 100%);
}
/* ================== Video background (твій) ================== */
.video-background-wrapper { position: relative; overflow: hidden; }
.video-background {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
object-fit: cover; z-index: 0; filter: blur(12px); opacity: 0.6;
}
.video-background video { width: 100%; height: 100%; object-fit: cover; }
/* ================== Інші існуючі дрібниці ================== */
#features article {
background: rgba(255, 255, 255, 0.48) !important;
backdrop-filter: blur(10px);
}
#testimonials #tPhoto { object-position: 50% 20%; }
/* ================== Design tokens ================== */
:root{
--container: 1120px; /* ширина контенту як у референсі */
--thin-radius: 14px; /* кути тонкої картки (Trusted) */
--thick-radius: 16px; /* кути товстої картки (Demo) */
--thin-px: 16px; /* падінги тонкої картки */
--thin-py: 12px;
--thick-px: 32px; /* падінги товстої картки */
--thick-py: 28px;
--thin-bg: rgba(255,255,255,.44); /* дуже легкий фон */
--thick-bg: rgba(255,255,255,.86);/* насиченіший фон */
--blur: 10px;
--shadow-thin: 0 1px 4px rgba(0,0,0,.04);
--shadow-thick: 0 8px 26px rgba(17,24,39,.12);
--gap: 18px;
}
/* звужуємо всі .max-w-7xl однаково */
:where(.max-w-7xl){ max-width: var(--container) !important; }
/* ================== TRUSTED (верхній) — тонка стрічка ================== */
/* секція “The most trusted AI dental receptionist” */
section[aria-label="Reliable"] .relative{
max-width: 100% !important;
margin: 0 auto;
padding: var(--thin-py) var(--thin-px) !important;
border-radius: var(--thin-radius) !important;
background: var(--thin-bg) !important;
backdrop-filter: blur(var(--blur)) !important;
box-shadow: var(--shadow-thin) !important;
}
/* співвідношення колонок ~60/40 і щільний gap */
@media (min-width: 768px){
section[aria-label="Reliable"] .grid{
display:grid; align-items:center;
grid-template-columns: 3fr 2fr !important;
gap: var(--gap) !important;
}
}
/* права колонка — “стрічка логотипів”, без окремих плиток */
section[aria-label="Reliable"] .grid.grid-cols-3{
display:flex !important; gap: 14px !important; flex-wrap: nowrap;
}
section[aria-label="Reliable"] .grid.grid-cols-3 > div{
background: transparent !important;
box-shadow: none !important;
border-radius: 10px;
padding: 0 !important;
min-height: 50px !important;
display:flex; align-items:center; justify-content:center;
}
section[aria-label="Reliable"] .grid.grid-cols-3 img{
height: 40px; width: auto; object-fit: contain; opacity:.9;
filter: none; /* без тіней */
}
/* типографіка всередині — акуратно */
section[aria-label="Reliable"] h2{ margin-bottom: 6px; }
section[aria-label="Reliable"] p{ margin-top: 6px; color: rgb(75,85,104); }
/* ================== DEMO (нижній) — товстий, але легкий ================== */
/* секція “See the magic / Zadzwoń na naszą linię demo” */
#demo .grid{
position: relative;
border-radius: var(--thick-radius);
padding: var(--thick-py) var(--thick-px);
background: var(--thick-bg);
backdrop-filter: blur(var(--blur));
box-shadow: var(--shadow-thick);
gap: var(--gap);
}
/* співвідношення колонок як у Dentina (ліва ширша) */
@media (min-width: 768px){
#demo .grid{
display:grid; align-items:center;
grid-template-columns: 1.6fr 1.4fr !important;
}
}
/* ВАЖЛИВО: прибираємо фіолетову рамку, щоб виглядало легше */
#demo .grid::before{ content:none !important; }
/* Заголовок DEMO у стилі Dentina: великий та повітряний */
#demo h2{
font-family:"Onest",sans-serif;
font-weight: 700;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1.2;
color: #0F172A; /* глибокий темно-синій/чорний */
}
/* малий “кiкер” над заголовком DEMO — тонкий сірий */
#demo .text-xs{
border: none !important;
padding: 0 !important;
background: transparent !important;
color: rgb(100,116,139);
letter-spacing: .08em;
}
/* аудіо/контентна коробка справа — легка, без зайвої товщини */
#demo .grid > div:last-child > *{
background: rgba(255,255,255,.9);
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
/* ================== Вертикальні відступи між секціями ================== */
section[aria-label="Reliable"]{ margin-top: 18px; }
#demo{ margin-top: 22px; }
/* Збільшуємо ширину контейнера Reliable */
:where(.max-w-7xl){
max-width: 1280px !important; /* було 1120px */
}
/* Сам блок робимо більш розтягнутим */
section[aria-label="Reliable"] .relative{
padding: 20px 28px !important; /* трохи більше падінгів */
}
/* У grid даємо лівій колонці більше простору */
@media (min-width: 768px){
section[aria-label="Reliable"] .grid{
grid-template-columns: 2fr 1fr !important; /* було 3fr/2fr */
}
}
/* DEMO — збільшуємо висоту секції */
#demo .grid{
padding: 48px 40px !important; /* було ~28px, збільшуємо */
min-height: 480px; /* дає стабільну висоту (залежить від роздільності) */
}
/* RELIABLE (Najbardziej...) — робимо нижчим */
section[aria-label="Reliable"] .relative{
padding: 16px 22px !important; /* компактні падінги, менша висота */
min-height: auto !important; /* щоб не тягнувся */
}
/* ВІДСТАНЬ між секціями — зменшуємо */
section[aria-label="Reliable"]{
margin-bottom: 16px !important; /* було 4.5 см, стане близько 1 см */
}
#demo{
margin-top: 0 !important; /* прибираємо зайвий відступ зверху */
}
/* робимо відстань між секціями як у Dentina (~1 см) */
section[aria-label="Reliable"] {
margin-bottom: 16px !important; /* замість великих 60–70px */
}
#demo {
margin-top: 0 !important; /* прибираємо зайвий відступ зверху */
}
/* Прибираємо зайвий відступ знизу у Reliable */
section[aria-label="Reliable"] {
margin-bottom: 8px !important; /* мінімальний відступ */
}
/* Підтягуємо DEMO секцію вгору */
#demo {
margin-top: 0 !important; /* прибираємо зовнішній відступ зверху */
padding-top: 8px !important; /* зменшуємо внутрішній відступ */
}
/* Демо-блок: фон як у Reliable */
#demo .grid {
background: var(--thin-bg) !important; /* той самий легкий фон */
box-shadow: var(--shadow-thin) !important;
backdrop-filter: blur(var(--blur)) !important;
}
/* Заголовок у Reliable */
section[aria-label="Reliable"] h2 {
font-family: "Onest", sans-serif;
font-size: 16px !important;
font-weight: 700 !important; /* Bold */
line-height: 24px !important;
color: rgb(36, 38, 42) !important; /* темний */
margin-bottom: 6px;
}
/* Заголовок у DEMO */
#demo h2 {
font-family: "Onest", sans-serif;
font-size: 40px !important;
font-weight: 600 !important; /* Semi Bold */
line-height: 50px !important;
color: rgb(36, 38, 42) !important;
margin-bottom: 12px;
}
/* Підтягуємо текст наверх у #demo */
#demo .text-xs {
position: absolute;
top: -32px; /* піднімаємо над блоком */
left: 50%;
transform: translateX(-50%);
text-align: center;
font-family: "Onest", sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: .08em;
color: rgb(100,116,139);
text-transform: uppercase;
background: transparent; /* приберемо фон, якщо був */
border: none; /* приберемо рамку, якщо була */
padding: 0;
}
#demo {
position: relative; /* потрібен контекст для absolute */
}
/* Текст-кікер у лівому верхньому куті Demo */
#demo .text-xs {
position: absolute;
top: -28px; /* піднімаємо над блоком */
left: 0; /* вирівнюємо по лівому краю */
transform: none; /* прибираємо центрування */
text-align: left;
font-family: "Onest", sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: .08em;
color: rgb(100,116,139);
text-transform: uppercase;
background: transparent;
border: none;
padding: 0;
}
#demo {
position: relative; /* потрібен контекст для absolute */
}
/* Текст-кікер всередині блоку Demo */
#demo .text-xs {
position: static !important; /* прибираємо absolute */
display: block;
margin-bottom: 12px; /* відступ після кікера */
text-align: left;
font-family: "Onest", sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: .08em;
color: rgb(100,116,139);
text-transform: uppercase;
background: transparent;
border: none;
padding: 0;
}
/* Текст-кікер на самому початку білого блоку DEMO */
#demo .text-xs {
position: static !important; /* всередині потоку */
display: block;
margin: 0 0 14px 0; /* відступ тільки знизу */
padding: 0;
text-align: left;
font-family: "Onest", sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: .08em;
color: rgb(100,116,139);
text-transform: uppercase;
background: transparent;
border: none;
}
/* Кікер (перший рядок) */
#demo .text-xs {
font-family: "Onest", sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: rgb(100,116,139);
margin-bottom: 18px; /* відступ після кікера */
display: block;
position: static !important; /* всередині блоку */
text-align: left;
}
/* Великий заголовок */
#demo h2 {
font-family: "Onest", sans-serif;
font-size: clamp(28px, 3vw, 40px); /* адаптивний розмір */
font-weight: 600; /* Semi Bold */
line-height: 1.25;
color: rgb(36,38,42);
margin-bottom: 16px;
}
/* Пояснювальний текст */
#demo p {
font-family: "Onest", sans-serif;
font-size: 16px;
line-height: 24px;
color: rgb(75,85,104);
margin-bottom: 24px;
}
/* Номер телефону — стилізація як кнопка */
#demo .phone-button {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: "Onest", sans-serif;
font-size: 20px;
font-weight: 600;
color: rgb(36,38,42);
background: #fff;
border-radius: 12px;
padding: 12px 20px;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
transition: all .2s ease;
}
#demo .phone-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
/* Плеєр (права колонка) */
#demo .player-box {
background: rgba(255,255,255,.9);
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
/* Контейнер з іконками */
section[aria-label="Reliable"] .grid.grid-cols-3 {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important; /* 3 в ряд */
gap: 18px !important;
align-items: center;
justify-items: center;
}
/* Картки іконок */
section[aria-label="Reliable"] .grid.grid-cols-3 > div {
background: #fff;
border-radius: 12px;
padding: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
display: flex;
align-items: center;
justify-content: center;
height: 90px; /* трохи менше висоти блока */
width: 90px; /* квадратні */
}
/* Самі іконки */
section[aria-label="Reliable"] .grid.grid-cols-3 img {
height: 64px; /* більші */
width: auto;
object-fit: contain;
}
/* 1) Даємо картці контекст для абсолютного позиціювання */
#demo .grid{
position: relative; /* контекст */
}
/* 2) Ставимо кікер усередині блоку, зліва зверху, поверх фону */
#demo .grid .text-xs{
position: absolute !important;
top: 18px; /* відступ від верху картки */
left: 24px; /* відступ від лівого краю картки */
margin: 0 !important;
padding: 0 !important;
transform: none !important;
text-align: left;
/* стиль кікера, як у Dentina */
font-family: "Onest", sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: rgb(100,116,139);
background: transparent !important; /* фон картки не чіпаємо */
border: none !important;
}
/* 3) Щоб контент не перекрився з кікером — додаємо «місця» зверху
тільки для лівої колонки (де заголовок і текст) */
#demo .grid > div:first-child{
padding-top: 42px !important; /* висота кікера + відступ */
}
/* (необов’язково) трошки притиснемо заголовок, щоб ритм був охайний */
#demo .grid > div:first-child h2{
margin-top: 6px !important;
}
/* Заголовок у DEMO */
#demo h2 {
font-family: "Onest", sans-serif;
font-size: clamp(36px, 4vw, 44px); /* адаптивно: 36–44px */
font-weight: 600; /* Semi Bold */
line-height: 1.25;
color: rgb(36,38,42);
margin-bottom: 18px;
}
/* Пояснювальний текст у DEMO */
#demo p {
font-family: "Onest", sans-serif;
font-size: 18px; /* було 16px — робимо більшим */
line-height: 28px; /* простіше читати */
color: rgb(75,85,104);
margin-bottom: 26px;
}
/* Контейнер кнопок */
#demo .buttons {
display: flex;
justify-content: space-between; /* розкидає по краях */
align-items: center;
gap: 24px; /* відстань між ними */
margin-bottom: 22px;
}
/* Загальні стилі кнопок */
#demo .buttons a,
#demo .buttons button {
font-family: "Onest", sans-serif;
font-size: 20px; /* більший шрифт */
font-weight: 600;
padding: 16px 28px; /* більше повітря */
border-radius: 50px; /* елегантне заокруглення */
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.2s ease;
}
/* Телефонна кнопка */
#demo .buttons a {
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.1);
color: rgb(36,38,42);
}
#demo .buttons a:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
/* Кнопка "Skopiuj numer" */
#demo .buttons button {
background: #f8f8ff;
color: rgb(88,28,255);
box-shadow: 0 2px 6px rgba(88,28,255,.15);
}
#demo .buttons button:hover {
transform: translateY(-2px);
background: #ede9fe;
}
/* Контейнер */
#demo .buttons {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
margin-bottom: 22px;
}
/* Загальні стилі для кнопок */
#demo .buttons a,
#demo .buttons button {
flex: 1; /* обидві займають однакову ширину */
min-width: 240px; /* мінімальна ширина, щоб виглядали великими */
max-width: 280px; /* необов'язково: ліміт щоб не розтягувались занадто */
text-align: center;
font-family: "Onest", sans-serif;
font-size: 20px;
font-weight: 600;
padding: 16px 20px;
border-radius: 50px;
display: inline-flex;
justify-content: center; /* вирівнюємо текст/іконки по центру */
align-items: center;
gap: 10px;
transition: all 0.2s ease;
}
/* Телефонна кнопка */
#demo .buttons a {
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.1);
color: rgb(36,38,42);
}
#demo .buttons a:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
/* Кнопка "Skopiuj numer" */
#demo .buttons button {
background: #f8f8ff;
color: rgb(88,28,255);
box-shadow: 0 2px 6px rgba(88,28,255,.15);
}
#demo .buttons button:hover {
transform: translateY(-2px);
background: #ede9fe;
}
/* Контейнер */
#demo .buttons {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
margin-bottom: 22px;
width: 100%;
}
/* Кнопки */
#demo .buttons a,
#demo .buttons button {
flex: 1; /* ділимо простір порівну */
height: 70px; /* висота кнопок */
text-align: center;
font-family: "Onest", sans-serif;
font-size: 20px;
font-weight: 600;
border-radius: 50px;
display: inline-flex;
justify-content: center; /* центр по горизонталі */
align-items: center; /* центр по вертикалі */
gap: 10px;
transition: all 0.2s ease;
}
/* Телефонна кнопка */
#demo .buttons a {
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.1);
color: rgb(36,38,42);
}
#demo .buttons a:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
/* Кнопка "Skopiuj numer" */
#demo .buttons button {
background: #f8f8ff;
color: rgb(88,28,255);
box-shadow: 0 2px 6px rgba(88,28,255,.15);
}
#demo .buttons button:hover {
transform: translateY(-2px);
background: #ede9fe;
}
/* Основний фон для всіх секцій після відео */
:root {
--main-bg: #f0f3ff; /* світло-блакитний */
}
.video-background-wrapper ~ section {
background: var(--main-bg) !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
margin-top: 0;
padding-top: 60px;
padding-bottom: 60px;
}
/* Виняток: CTA "Gotowi przestać tracić połączenia?" */
section#cta,
section[aria-label="Gotowi przestać tracić połączenia?"] {
background: transparent !important;
}
/* Заголовок "Recepcjonistka AI nr 1 w stomatologii" */
section[aria-label="HeroReception"] h2 {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 600; /* можна лишити трохи жирніший, щоб виділити */
line-height: 28px;
color: rgba(0, 0, 0, 0.87);
margin-bottom: 8px;
}
/* Підзаголовок "Tysiące dentystów ufa..." */
section[aria-label="HeroReception"] p {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400; /* normal */
line-height: 24px;
color: rgba(0, 0, 0, 0.87);
}
/* Контейнер блоку */
section[aria-label="HeroReception"] .relative {
display: grid;
grid-template-columns: 1fr 1fr; /* текст + картинка */
align-items: center;
gap: 40px;
padding: 60px 40px;
background: transparent;
}
/* Заголовок */
section[aria-label="HeroReception"] h2 {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 36px;
color: rgba(0,0,0,0.87);
margin-bottom: 16px;
}
/* Текст */
section[aria-label="HeroReception"] p {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 28px;
color: rgba(0,0,0,0.87);
margin-bottom: 24px;
}
/* Виділення ключових слів */
section[aria-label="HeroReception"] p strong,
section[aria-label="HeroReception"] p span.highlight {
color: #4f46e5; /* синьо-фіолетовий як у Dentina */
font-weight: 600;
}
/* Бейджі з країнами */
section[aria-label="HeroReception"] .country-badges {
display: flex;
gap: 12px;
margin-bottom: 24px;
}
section[aria-label="HeroReception"] .country-badges span {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 500;
padding: 6px 14px;
background: #fff;
border-radius: 20px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
/* Кнопка */
section[aria-label="HeroReception"] .cta-btn {
display: inline-block;
padding: 14px 28px;
font-size: 16px;
font-weight: 600;
background: #4f46e5;
color: #fff;
border-radius: 12px;
transition: all .2s ease;
text-decoration: none;
}
section[aria-label="HeroReception"] .cta-btn:hover {
background: #4338ca;
transform: translateY(-2px);
}
/* Контейнер HeroReception */
section[aria-label="HeroReception"] .relative {
display: grid;
grid-template-columns: 1fr 1fr; /* текст + картинка */
align-items: center;
gap: 40px;
padding: 60px 40px;
max-width: 1200px; /* обмежуємо ширину як у Dentina */
margin: 0 auto; /* центруємо по екрану */
}
/* Колонка з картинкою */
section[aria-label="HeroReception"] .image {
display: flex;
justify-content: flex-end; /* картинка «прижата» вправо */
padding-right: 40px; /* додаємо ще відступ, щоб збільшити відстань */
}
/* Блок Recepcjonistka AI nr 1 w stomatologii */
section[aria-label="HeroReception"] {
max-width: 1100px; /* менша ширина контейнера → ближче до центру */
margin: 0 auto; /* центруємо */
padding: 60px 40px;
display: grid;
grid-template-columns: 1fr 1fr; /* текст + картинка */
align-items: center;
gap: 40px;
}
/* Ліва колонка з текстом */
section[aria-label="HeroReception"] .text {
max-width: 500px;
margin-left: auto; /* притягує текст ближче до центру */
}
/* Права колонка з картинкою */
section[aria-label="HeroReception"] .image {
display: flex;
justify-content: center; /* картинка теж ближче до центру */
padding-right: 0; /* прибираємо сильний відступ */
}
section[aria-label="HeroReception"] .image img,
section[aria-label="HeroReception"] .image svg {
max-width: 90%; /* зменшуємо трохи, щоб гармонійно */
height: auto;
}
/* HeroReception — звужуємо контейнер і центруємо вміст */
section[aria-label="HeroReception"] {
max-width: 1100px; /* робимо вужчим ніж було */
margin: 0 auto; /* центруємо */
padding: 60px 20px;
display: flex;
justify-content: space-between; /* текст і картинка розводимо всередині */
align-items: center;
gap: 40px;
}
/* Ліва частина (перший div) */
section[aria-label="HeroReception"] > div:first-child {
flex: 1;
max-width: 500px;
margin-left: auto; /* підтягнути ближче до центру */
}
/* Права частина (другий div — картинка) */
section[aria-label="HeroReception"] > div:last-child {
flex: 1;
display: flex;
justify-content: center; /* картинка по центру колонки */
}
section[aria-label="HeroReception"] img,
section[aria-label="HeroReception"] svg {
max-width: 90%; /* щоб картинка не прилипала */
height: auto;
}
/* Секція з заголовком "Gotowi przestać tracić połączenia?" */
section[aria-label="CTA"] {
background: #4f46e5; /* насичений синій (можеш замінити на свій відтінок) */
color: #fff; /* текст білий для контрасту */
padding: 80px 20px; /* додаємо повітря */
border-radius: 16px; /* заокруглення як у Dentina */
text-align: center; /* центруємо контент */
}
/* Заголовок всередині */
section[aria-label="CTA"] h2,
section[aria-label="CTA"] h3 {
color: #fff;
font-size: 36px;
font-weight: 700;
margin-bottom: 20px;
}
/* Текст */
section[aria-label="CTA"] p {
color: rgba(255, 255, 255, 0.9);
font-size: 18px;
margin-bottom: 30px;
}
/* Кнопка */
section[aria-label="CTA"] a,
section[aria-label="CTA"] button {
background: #fff;
color: #4f46e5;
font-weight: 600;
padding: 14px 32px;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
}
section[aria-label="CTA"] a:hover,
section[aria-label="CTA"] button:hover {
background: #f0f3ff;
color: #3730a3;
}
/* Секція "Recepcjonistka AI nr 1 w stomatologii" */
#receptionist {
max-width: 1200px; /* обмежуємо ширину */
margin: 0 auto; /* центруємо */
display: flex;
align-items: center; /* вирівнюємо по вертикалі */
justify-content: space-between;
gap: 40px;
padding: 60px 20px;
}
/* Ліва колонка (текст) */
#receptionist .text {
flex: 1;
max-width: 500px;
}
/* Права колонка (картинка) */
#receptionist .image {
flex: 1;
display: flex;
justify-content: center;
}
#receptionist .image img {
max-width: 90%; /* трохи зменшуємо */
height: auto;
}
/* Центруємо блок і робимо композицію "текст + картинка" */
#receptionist {
max-width: 1100px; /* звужуємо контейнер → ближче до центру */
margin: 0 auto; /* по центру екрана */
padding: 60px 20px;
display: grid;
grid-template-columns: 1fr 1fr; /* ліва колонка текст, права — картинка */
align-items: center;
column-gap: 40px;
}
/* Ліва колонка (текст) — трохи ближче до центру */
#receptionist > *:first-child {
justify-self: end;
max-width: 520px;
}
/* Права колонка (картинка) — теж до центру */
#receptionist > *:last-child {
justify-self: start;
display: flex;
justify-content: center;
}
/* Не даємо зображенню «вилазити», за потреби злегка зменшуємо */
#receptionist img,
#receptionist svg {
max-width: 90%;
height: auto;
}
/* Адаптив: на вузьких екранах — стовпчиком */
@media (max-width: 1100px) {
#receptionist {
grid-template-columns: 1fr;
row-gap: 24px;
max-width: 920px;
}
#receptionist > *:first-child,
#receptionist > *:last-child {
justify-self: center;
text-align: c
/* Контейнер з текстом і картинкою */
#receptionist {
max-width: 1200px; /* трохи ширший контейнер */
margin: 0 auto;
display: grid;
grid-template-columns: 480px 1fr; /* ліва колонка під текст */
align-items: center;
column-gap: 60px;
}
/* Ліва колонка (текст) — не розтягується */
#receptionist > *:first-child {
max-width: 460px;
justify-self: end;
}
/* Права колонка (картинка) — більша */
#receptionist > *:last-child {
justify-self: start;
}
#receptionist img,
#receptionist svg {
max-width: 100%;
height: auto;
transform: scale(1.3); /* збільшуємо картинку на 30% */
transform-origin: center; /* центр масштабу */
}
/* Адаптив для вузьких екранів */
@media (max-width: 1100px) {
#receptionist {
grid-template-columns: 1fr;
row-gap: 24px;
text-align: center;
}
#receptionist > *:first-child,
#receptionist > *:last-child {
justify-self: center;
}
#receptionist img,
#receptionist svg {
transform: scale(1); /* без збільшення на мобільних */
max-width: 95%;
}
}
/* ================== ОНОВЛЕННЯ ВІД 7 ВЕРЕСНЯ 2025 ================== */
/* --- 1. Збільшення картинки в секції "Recepcjonistka AI" --- */
#receptionist {
/* Змінюємо пропорції: текст займає трохи менше місця, картинка — більше */
grid-template-columns: 0.9fr 1.1fr;
align-items: center;
/* Більша картинка в секції "Recepcjonistka AI nr 1 w stomatologii" */
#receptionist {
grid-template-columns: 0.8fr 1.2fr; /* більше простору під картинку */
align-items: center;
}
#receptionist img, #receptionist svg {
transform: scale(1.25); /* збільшуємо на 25% */
transform-origin: center; /* центр масштабування */
}
/* Остаточне масштабування для блоку "Recepcjonistka AI" */
#receptionist img,
#receptionist svg {
transform: scale(1.25) !important; /* 25% збільшення */
transform-origin: center !important; /* з центру */
}
/* Остаточне масштабування для блоку "Recepcjonistka AI" */
#receptionist img,
#receptionist svg {
transform: scale(1.25) !important; /* збільшуємо на 25% */
transform-origin: center !important; /* масштаб від центру */
}
/* ==== Recepcjonistka AI — надійне збільшення через обгортку ==== */
#receptionist {
/* більше місця під ілюстрацію праворуч */
grid-template-columns: 0.8fr 1.2fr !important;
align-items: center;
}
/* масштабуємо контейнер, а не ![]()
— не ламаємо tailwind-трансформації */
#receptionist .reception-illus {
transform: scale(1.15);
transform-origin: center right; /* зростає у бік тексту */
}
/* не даємо внутрішнім утиліті обмежувати розмір */
#receptionist .reception-illus img,
#receptionist .reception-illus svg {
max-width: none !important;
}
/* Збільшення блоку Recepcjonistka AI */
#receptionist {
grid-template-columns: 0.8fr 1.2fr !important; /* більше місця під картинку */
align-items: center;
}
#receptionist .reception-illus {
transform: scale(1.4); /* збільшуємо ~40% */
transform-origin: center right; /* щоб не відсунуло текст */
}
#receptionist .reception-illus img {
max-width: none !important;
}
/* Збільшення блоку Recepcjonistka AI */
#receptionist {
grid-template-columns: 0.7fr 1.3fr !important; /* більше місця під картинку */
align-items: center;
}
#receptionist .reception-illus {
transform: scale(1.5); /* збільшуємо ~50% для пропорційності до тексту */
transform-origin: center right; /* щоб не відсунуло текст */
}
#receptionist .reception-illus img,
#receptionist .reception-illus svg {
max-width: none !important; /* не обмежуємо розмір */
}
/* ==== CTA: суцільний синій фон, full-bleed ==== */
:where(section#cta, section[aria-label="CTA"], section.bg-indigo-600,
section[aria-label="Gotowi przestać tracić połączenia?"]) {
background: #4f46e5 !important; /* фіолетовий як на референсі */
color: #fff !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 80px 20px !important;
}
/* Білий текст і контрастна кнопка всередині CTA */
:where(section#cta, section[aria-label="CTA"], section.bg-indigo-600,
section[aria-label="Gotowi przestać tracić połączenia?"]) h2,
:where(section#cta, section[aria-label="CTA"], section.bg-indigo-600,
section[aria-label="Gotowi przestać tracić połączenia?"]) h3,
:where(section#cta, section[aria-label="CTA"], section.bg-indigo-600,
section[aria-label="Gotowi przestać tracić połączenia?"]) p {
color: #fff !important;
}
:where(section#cta, section[aria-label="CTA"], section.bg-indigo-600,
section[aria-label="Gotowi przestać tracić połączenia?"]) a,
:where(section#cta, section[aria-label="CTA"], section.bg-indigo-600,
section[aria-label="Gotowi przestać tracić połączenia?"]) button {
background: #fff !important;
color: #4f46e5 !important;
font-weight: 600;
padding: 14px 32px;
border-radius: 10px;
}
/* Якщо треба повний «від краю до краю» навіть всередині контейнера */
:where(section#cta, section[aria-label="CTA"], section.bg-indigo-600,
section[aria-label="Gotowi przestać tracić połączenia?"]) .max-w-7xl {
max-width: none !important;
}
/* === User-requested updates === */
/* Region-reach map scale: bigger on desktop, natural on mobile */
.region-reach .map-scale {
transform: scale(1.35);
transform-origin: center right;
}
@media (max-width: 768px) {
.region-reach .map-scale {
transform: scale(1) !important;
transform-origin: center !important;
}
}
/* Ensure country badges (flags) are always visible on desktop */
.region-reach .country-badges {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.region-reach .country-badges > span {
display: inline-flex;
align-items: center;
}
/* Larger fonts for the requested text block (already updated in HTML classes) */
/* Safety in case styles override elsewhere */
.region-reach h2 { font-size: clamp(28px, 4.6vw, 44px); }
.region-reach p { font-size: clamp(18px, 2.6vw, 24px); line-height: 1.45; }
/* ==== Recepcjonistka AI: подвоєне збільшення ==== */
#receptionist {
grid-template-columns: 0.6fr 1.4fr !important; /* ще більше місця для картинки */
align-items: center;
}
#receptionist .reception-illus {
transform: scale(2); /* подвоюємо розмір */
transform-origin: center right; /* збільшується в бік тексту */
}
#receptionist .reception-illus img,
#receptionist .reception-illus svg {
max-width: none !important; /* щоб не обмежувалось */
}
/* ==== Recepcjonistka AI: подвоєне збільшення (100%) ==== */
#receptionist {
grid-template-columns: 0.5fr 1.5fr !important; /* більше місця під картинку */
align-items: center !important;
}
#receptionist .reception-illus {
transform: scale(2) !important; /* подвоюємо розмір */
transform-origin: center right !important; /* зростає в бік тексту */
}
#receptionist .reception-illus img,
#receptionist .reception-illus svg {
max-width: none !important; /* знімаємо обмеження */
}
/* ==== Region-reach (Recepcjonistka AI nr 1 w stomatologii) ==== */
/* Робимо ілюстрацію компактнішою */
.region-reach .map-scale {
transform: scale(1.15) !important; /* було 1.35 */
transform-origin: center right !important;
}
@media (max-width: 1200px) {
.region-reach .map-scale {
transform: scale(1.08) !important;
}
}
@media (max-width: 768px) {
.region-reach .map-scale {
transform: scale(1) !important;
transform-origin: center !important;
}
}
/* Трохи змінюємо пропорції колонок для балансу */
.region-reach .mx-auto.grid {
grid-template-columns: 1.1fr 0.9fr;
}
@media (max-width: 1024px){
.region-reach .mx-auto.grid {
grid-template-columns: 1fr 1fr;
}
}
/* === СТИЛІ ДЛЯ МОБІЛЬНОЇ АДАПТАЦІЇ === */
/* Ці правила застосовуються до екранів шириною до 767px (тобто для смартфонів) */
@media (max-width: 767px) {
/* --- Загальний макет та відступи --- */
/* Зменшуємо відступи для всіх основних секцій, щоб заощадити місце */
main section {
padding-top: 48px !important;
padding-bottom: 48px !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
/* --- Шапка сайту та навігація --- */
/* Змінюємо розташування елементів у шапці */
header .grid {
grid-template-columns: auto 1fr; /* Логотип та перемикач мов — основні елементи */
justify-content: space-between;
}
header .grid a[href="#"] {
margin-right: auto; /* Відсуває перемикач мов у правий край */
}
/* Основне меню навігації на мобільних пристроях приховано за замовчуванням.
Для повноцінного "гамбургер-меню" потрібні зміни в HTML та JavaScript.
Приховати його — найпростіше рішення, щоб уникнути зламаного та перевантаженого макета. */
header nav.hidden.md\:flex {
display: none !important;
}
/* --- Головний екран (верхня частина сторінки) --- */
/* Коригуємо відступи головного екрана */
.video-background-wrapper section:first-of-type {
padding-top: 64px !important;
padding-bottom: 48px !important;
}
/* Робимо головний заголовок меншим і більш читабельним на мобільних */
#hero-title {
font-size: 42px !important;
line-height: 1.15 !important;
}
/* Розташовуємо головні кнопки одну під одною */
.mt-10.flex {
flex-direction: column;
gap: 1rem;
align-items: center;
}
.mt-10.flex a {
width: 90%;
justify-content: center;
}
/* --- Секція "Демо" --- */
/* Розташовуємо колонки секції "Зателефонуйте на нашу демо-лінію" одну під одною */
#demo .grid {
grid-template-columns: 1fr !important;
padding: 24px 16px !important;
}
/* Розташовуємо кнопки з номером телефону та копіюванням одну під одною */
#demo .flex-wrap {
flex-direction: column;
align-items: stretch; /* Робимо кнопки на повну ширину */
}
/* --- Секція "Recepcjonistka AI" (Мапа) --- */
/* Розташовуємо текст і мапу вертикально */
.region-reach .mx-auto.grid {
grid-template-columns: 1fr !important;
text-align: center;
}
/* Скидаємо масштабування мапи до її природного розміру */
.region-reach .map-scale {
transform: scale(1) !important;
transform-origin: center !important;
margin-top: 24px;
}
/* --- Секція "Функції" --- */
/* Розташовуємо картки з функціями в один стовпець */
#features .grid {
grid-template-columns: 1fr !important;
}
#features article {
min-height: auto !important; /* Прибираємо фіксовану мінімальну висоту */
}
/* --- Секція "Відгуки" --- */
/* Розташовуємо текст та зображення відгуку один під одним */
#testimonials .grid {
grid-template-columns: 1fr !important;
gap: 2rem;
}
/* На мобільних ставимо зображення перед текстом */
#testimonials .relative {
order: -1;
}
#tPhoto {
height: 350px !important; /* Коригуємо висоту зображення для мобільних */
}
/* Дозволяємо кнопкам-аватарам переноситись на новий рядок */
#testimonials .flex.items-center.gap-4 {
flex-wrap: wrap;
justify-content: center;
}
/* --- Секція "У цифрах" --- */
/* Розташовуємо статистику та цитату одну під одною */
#numbers .grid {
grid-template-columns: 1fr !important;
}
/* Прибираємо відступ, який ховав текст за зображенням на десктопі */
#numbers .pr-\[220px\], #numbers .pr-\[260px\], #numbers .pr-\[300px\] {
padding-right: 0 !important;
}
/* Приховуємо зображення асистента на мобільних, щоб заощадити місце */
#numbers img.hidden {
display: none !important;
}
/* --- Секції "Як почати" та "Цінник" --- */
/* Розташовуємо всі картки в цих секціях в один стовпець */
#get-started .grid,
#pricing .grid {
grid-template-columns: 1fr !important;
}
/* --- Контакти та Футер --- */
/* Розташовуємо колонки з контактами одна під одною та центруємо їх */
#contact .grid {
grid-template-columns: 1fr !important;
text-align: center;
gap: 1.5rem;
}
#contact .flex.md\:justify-end {
justify-content: center !important;
}
#contact .flex-col.md\:flex-row {
flex-direction: column;
align-items: center;
}
}
/* === РАДИКАЛЬНЕ ВИПРАВЛЕННЯ ГОРИЗОНТАЛЬНОЇ ПРОКРУТКИ === */
/* Цей код примусово обрізає все, що виходить за межі екрана,
і застосовується до основних елементів сторінки, щоб гарантувати результат. */
html, body {
position: relative !important;
width: 100% !important;
overflow-x: hidden !important;
}
/* ==== MOBILE FIX PACK (≤640px) — без зміни дизайну/контенту ==== */
@media (max-width: 640px){
html, body { overflow-x: hidden; } /* прибирає горизонтальний скрол */
.max-w-7xl, .max-w-screen-2xl { padding-left: 16px !important; padding-right: 16px !important; }
/* HERO: без гігантських шрифтів і “стрибків” */
#hero-title{
font-size: clamp(28px, 7.5vw, 36px) !important;
line-height: 1.15 !important;
letter-spacing: -0.02em !important;
}
section.relative.z-10 p.max-w-3xl{ font-size: 16px !important; line-height: 24px !important; }
/* Відео-бекграунд не роздуває секцію */
.video-background-wrapper{ min-height: unset !important; }
.video-background{ filter: blur(10px) !important; opacity:.5 !important; }
.video-background video{ height: 100% !important; object-fit: cover !important; }
/* Sticky header: компактніше, навігація ховається як і було */
header .grid{ grid-template-columns: 1fr auto !important; gap: 8px !important; }
header nav{ display: none !important; } /* у тебе й так hidden на md */
/* “Reliable” тонка стрічка — одна колонка, рівні падінги */
section[aria-label="Reliable"] .relative{ padding: 14px !important; }
section[aria-label="Reliable"] .grid{ display:block !important; }
section[aria-label="Reliable"] .grid > *{ margin-top: 10px; }
section[aria-label="Reliable"] .grid.grid-cols-3{ gap: 10px !important; }
section[aria-label="Reliable"] .grid.grid-cols-3 > div{ height: 64px !important; width: 64px !important; }
section[aria-label="Reliable"] .grid.grid-cols-3 img{ height: 40px !important; }
/* DEMO-картка: чисті відступи, жодних абсолютів, кнопки на всю ширину */
#demo .grid{ display:block !important; padding: 18px !important; }
#demo .text-xs{ position: static !important; margin: 0 0 8px !important; }
#demo h2{ font-size: 24px !important; line-height: 30px !important; margin-bottom: 10px !important; }
#demo p{ font-size: 15px !important; line-height: 22px !important; }
#demo .flex.flex-wrap.items-center.gap-3{ gap: 10px !important; }
#demo a[href^="tel:"],
#demo #copy-demo-number{
width: 100% !important; justify-content: center !important;
padding: 12px 16px !important; border-radius: 9999px !important;
}
#demo iframe{ height: 200px !important; }
/* Region-reach (мапа): стек, natural scale */
.region-reach .mx-auto.grid{ grid-template-columns: 1fr !important; row-gap: 16px !important; }
.region-reach .map-scale{ transform: scale(1) !important; transform-origin: center !important; }
.region-reach h2{ font-size: 24px !important; line-height: 30px !important; }
.region-reach p{ font-size: 16px !important; line-height: 24px !important; }
/* Features/Numbers/Get started/Pricing — одна колонка, рівні падінги */
#features .grid,
#get-started .grid,
#pricing .grid,
#numbers .grid{ grid-template-columns: 1fr !important; }
/* Testimonials: фотка не обрізає обличчя й текст не їде */
#testimonials #tPhoto{ height: 320px !important; object-position: 50% 20% !important; }
#testimonials h2{ font-size: 26px !important; line-height: 32px !important; }
#tText{ font-size: 16px !important; line-height: 24px !important; }
/* CTA full-bleed не ламає вьюпорт (було 100vw+left:50%) */
#cta{
position: static !important; width: auto !important; left: auto !important;
margin: 0 !important; padding: 32px 16px !important; border-radius: 12px !important;
}
/* Footer — дрібніший тип */
footer p{ font-size: 13px !important; }
}
/* Маленькі планшети (≤768px): підправимо сітки, щоб не “гуляли” */
@media (max-width: 768px){
section[aria-label="Reliable"] .grid{ grid-template-columns: 1fr !important; }
#demo .grid{ grid-template-columns: 1fr !important; }
#numbers .pr-\[220px\], #numbers .md\:pr-\[260px\], #numbers .lg\:pr-\[300px\]{ padding-right: 0 !important; }
}
/* Hide the big map/illustration on phones */
@media (max-width: 640px){
/* ховаємо праву колонку з мапою */
.region-reach .relative.overflow-visible{
display: none !important;
}
/* про всяк випадок — якщо картинка вставлена напряму */
.region-reach .map-scale,
.region-reach .map-scale img{
display: none !important;
}
}
/* === Mobile hardening patch (≤767px) — 2025-09-08 === */
@media (max-width: 767px) {
/* 1) Do NOT show the "Recepcjonistka AI nr 1 w stomatologii" block on phones */
.region-reach { display: none !important; }
/* 2) Tighter hero on small screens (override inline size) */
#hero-title { font-size: 36px !important; line-height: 1.15 !important; }
.video-background-wrapper section:first-of-type {
padding-top: 72px !important;
padding-bottom: 40px !important;
}
/* 3) Stack all 2/3-column sections to a single column */
section[aria-label="Reliable"] .grid { grid-template-columns: 1fr !important; }
#demo .grid, #demo .card.grid { grid-template-columns: 1fr !important; }
#testimonials .grid { grid-template-columns: 1fr !important; }
#features .grid { grid-template-columns: 1fr !important; }
#numbers .grid { grid-template-columns: 1fr !important; }
#get-started .grid { grid-template-columns: 1fr !important; }
#pricing .grid { grid-template-columns: 1fr !important; }
/* 4) Buttons and media fit */
#demo .flex.flex-wrap, #demo .buttons {
flex-direction: column !important;
align-items: stretch !important;
}
#demo iframe { height: 200px !important; }
/* 5) Cards spacing */
#features article,
#numbers .space-y-6 > *,
#pricing article { margin-bottom: 16px !important; }
/* 6) Global section paddings */
main section {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* 7) Hide desktop nav, keep language switcher compact */
header nav { display: none !important; }
}
/* === Extra mobile gap fix (≤767px) — remove tall min-heights, tame backgrounds === */
@media (max-width: 767px) {
/* demo card/grid shouldn’t enforce desktop height */
#demo .grid,
#demo .card.grid { min-height: unset !important; padding: 20px !important; }
/* generic: avoid accidental huge min-heights on sections */
section, .section, .container { min-height: unset !important; }
/* images/iframes never overflow */
img, video, iframe { max-width: 100% !important; height: auto; }
/* decorative backgrounds shouldn’t cause extra scroll */
[class*="bg"], [class*="background"] {
background-attachment: initial !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
/* kill stray transforms that can push content sideways */
[style*="translate"], [class*="translate"] { transform: none !important; }
}
/* === Mobile horizontal scroll fix (≤767px) — 2025-09-08 === */
@media (max-width: 767px) {
html, body {
overflow-x: hidden !important;
width: 100% !important;
}
/* Ensure sizing doesn't exceed viewport */
*, *::before, *::after { box-sizing: border-box; }
/* Kill widths larger than the screen */
[style*="width:"], .w-screen, .min-w-full, .max-w-none {
max-width: 100% !important;
width: 100% !important;
}
/* Common overflow culprits */
.video-background-wrapper,
.video-background,
.video-background > *,
.overflow-x-auto,
.overflow-x-scroll {
overflow-x: hidden !important;
}
/* Backgrounds using 100vw can cause 1–2px overflow because of scrollbars */
[class*="bg-"],
[class*="background"],
[style*="100vw"] {
width: 100% !important;
max-width: 100% !important;
}
/* Neutralize negative margins / translations that push content sideways */
[style*="margin-left:-"],
[style*="margin-right:-"],
[class*="-mx-"],
[class*="translate-x"],
[style*="translateX"] {
margin-left: 0 !important;
margin-right: 0 !important;
transform: none !important;
}
/* Full-bleed sections: pin to viewport */
section, .section, .container, .wrapper {
left: 0 !important; right: 0 !important;
position: relative;
}
/* Media should never exceed container */
img, video, iframe {
max-width: 100% !important;
height: auto !important;
display: block;
}
}
/* === Targeted fixes for the 2 problematic blocks (≤767px) === */
@media (max-width: 767px) {
/* 1) Лівий текстовий блок — нормальна ширина колонки + рівне верстання тексту */
/* Якщо там є “лівий” технічний елемент (aside/note/blockquote), робимо його звичайним блоком */
aside, .aside, .note, .pull-quote, blockquote {
position: static !important;
float: none !important;
margin: 0 0 12px 0 !important;
max-width: 100% !important;
}
/* Колонка не має бути вужчою за контейнер */
.grid > *, .col, .column, .content, .prose {
min-width: 0 !important; /* дозволяє нормальний перенос рядків */
max-width: 100% !important;
}
/* Акуратне перенесення слів без “драбинки” */
.prose, .content, .text, article, section p {
word-break: normal !important;
overflow-wrap: anywhere !important;
hyphens: auto !important;
line-height: 1.6 !important;
}
/* Вирівнюємо вертикальні відступи абзаців/списків */
.prose p, .content p, .prose ul, .content ul, .prose ol, .content ol {
margin-top: 0.6em !important;
margin-bottom: 0.6em !important;
}
/* 2) Правий блок з фото та плашкою (Tomasz Nowak + аватари) */
/* Контейнер картки обрізає вміст по радіусу; зображення вписується */
.card, .media-card, figure, .testimonial, .testimonial-card {
overflow: hidden !important;
border-radius: 16px !important; /* не змінює стиль, тільки узгоджує кути */
}
.card img, .media-card img, figure img, .testimonial img {
width: 100% !important;
height: auto !important;
display: block !important;
object-fit: cover !important;
}
/* Плашка з ім’ям всередині карти, не виходить за краї */
.card [class*="overlay"], .testimonial [class*="overlay"], .media-card .badge, .media-card .label {
left: 12px !important; right: 12px !important;
bottom: 12px !important;
max-width: calc(100% - 24px) !important;
transform: none !important;
}
/* Ряд аватарів не розсуває контейнер і не дає горизонтального скролу */
[class*="avatar-row"], [class*="avatars"], .avatars {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 8px !important;
max-width: 100% !important;
overflow: hidden !important;
}
.avatars > * { flex: 0 0 auto !important; }
/* Карусель/слайдер у межах контейнера (без “вилазіння” назовні) */
[class*="slider"], [class*="carousel"], .swiper, .slick-slider {
overflow: hidden !important;
max-width: 100% !important;
}
.swiper, .slick-slider, .slick-list, .slick-track {
will-change: auto !important; /* м’якше для мобіли */
}
}
/* =================================================================== */
/* === FIX FOR MOBILE LAYOUT ISSUES (Numbers & Testimonials) === */
/* =================================================================== */
@media (max-width: 767px) {
/* --- 1. Fix for the 'Numbers' section (narrow text column) --- */
/* Remove the right-padding that squeezes the text content. */
#numbers .pr-\[220px\],
#numbers .md\:pr-\[260px\],
#numbers .lg\:pr-\[300px\] {
padding-right: 0 !important;
}
/* Ensure the image intended for desktop doesn't affect the layout. */
#numbers .relative img.hidden {
display: none !important;
}
/* Make sure the text container uses the full width available. */
#numbers .relative > div {
width: 100%;
}
/* --- 2. Fix for the 'Testimonials' section (broken layout and spacing) --- */
/* Force the section's grid to stack its children vertically. */
#testimonials .grid {
display: flex;
flex-direction: column;
gap: 32px; /* Consistent gap between text and image blocks */
}
/* Ensure the image and its overlay are contained correctly. */
#testimonials .relative {
order: -1; /* As in the original mobile CSS, show image first */
width: 100%;
max-width: 100%;
overflow: hidden; /* Prevents the overlay from spilling out */
}
#tPhoto {
height: 400px; /* A fixed height can look better on mobile */
object-fit: cover;
}
/* Adjust vertical margins for more even and readable spacing. */
#testimonials h2 {
margin-bottom: 16px !important;
}
#tText {
margin-top: 16px !important;
line-height: 1.65; /* Improve readability */
}
}
/* ====== Mobile-only fixes for TWO blocks (#testimonials and #numbers) ====== */
@media (max-width: 767px) {
/* --- (1) TESTIMONIALS --- */
#testimonials .grid { grid-template-columns: 1fr !important; gap: 16px !important; }
#testimonials h2 { font-size: 28px !important; line-height: 1.2 !important; }
#testimonials #tPhoto { height: 300px !important; width: 100% !important; object-position: 50% 35% !important; }
/* Put the white caption card under the photo so it never overflows */
#testimonials #tCaption { position: static !important; margin-top: 10px !important; }
/* Avatar row: allow wrapping on small screens */
#testimonials .flex.items-center.gap-4 { flex-wrap: wrap !important; row-gap: 8px !important; }
#testimonials .tAvatar { width: 56px !important; height: 56px !important; }
/* --- (2) NUMBERS ("Zamień nieodebrane…") --- */
#numbers .grid { grid-template-columns: 1fr !important; gap: 16px !important; }
/* Hide decorative absolute photo that was causing layout squeeze */
#numbers img[alt="Anna Nowak"] { display: none !important; }
/* Remove hard right padding set via utility classes like pr-[220px]/[260px]/[300px] */
#numbers [class*="pr-\["] { padding-right: 0 !important; }
/* Ensure quote block fills full width cleanly */
#numbers .relative > div { padding-right: 0 !important; }
#numbers #nrTitle { font-size: 20px !important; line-height: 1.35 !important; }
#numbers #nrText { font-size: 16px !important; line-height: 1.5 !important; }
}
.region-reach .country-badges { display: none !important; }
/* Прибрати сині галочки у списках цін */
#pricing li > svg {
display: none !important;
}