@charset "UTF-8";

/* =========================================
   FONT — Geist Mono (OFL, Vercel + Basement.studio, кирилиця — Guido Ferreyra)
   Замінив Noto Sans Mono 21.09.2026: кирилицю Noto у 2023–24 переробляли
   з участю розробників, повʼязаних із РФ. Файл — сабсет (латиниця, українська
   кирилиця, типографські знаки), змінна вага 200–900. Ліцензія: fonts/OFL-GeistMono.txt
   ========================================= */
/* Основний шрифт — Sofia Sans Semi Condensed (OFL, Lettersoup, Болгарія; кирилиця — Botio Nikoltchev, Ani Petrova).
   Сабсет: латиниця, українська кирилиця, типографські знаки; змінна вага. Ліцензія: fonts/OFL-SofiaSans.txt */
@font-face {
  font-family: "Sofia Sans Semi Condensed";
  src: url("/themes/slavua/assets/fonts/sofia-sans-semicond-subset.v2.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/themes/slavua/assets/fonts/geist-mono-subset.v1.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================
   RESET & NORMALIZE STYLES
   ========================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}
/* =========================================
   GENERAL STYLES
   ========================================= */
html{
    scroll-behavior: smooth;
    scroll-padding-top: 60px;
}
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: "Sofia Sans Semi Condensed", "Arial Narrow", Arial, sans-serif;
  line-height: 1.35;
  color: #090909;
  font-weight: 400;
  background: #f3f3f3;
}
header {
    background-color: #f3f3f3;
    color: #f3f3f3;
    text-align: center;
    padding: 10px 0;
}
footer {
    width: 100%;
    color: #b3cc94;
    padding: 40px 5% 80px 5%;
    margin-top: auto;
    border-top: 1px solid #d8e1e7;
}
picture,
svg,
video {
  display: block;
  max-width: 100%;
}
img{
    display: inline-block;
    max-width: 100%;
    height: auto; /* щоб атрибути width/height не ламали пропорції при max-width */
}
blockquote {
	padding: 0;
	margin: 0;
}
input,
button,
select,
textarea {
	outline: none;
}
label {
	margin-bottom: 0;
}
p {
	margin: 0;
}
p, ul, ol, li {
  font-size: 1rem;
  line-height: 1.35;
  text-wrap: pretty;
}
* + p {
    margin-top: 12px;
}
b, strong {
    font-weight: bolder;
}
/* Перевірити 
ul {
	list-style-type: disc;
	padding: 0;
	margin: 0;
}

ul li {
	display: list-item;
	list-style-type: disc;
}

ol {
	display: list-item;
	padding: 0;
	margin: 0;
}

ol li {
	display: list-item;
} */
/* =========================================
   TYPOGRAPHY STYLES
   ========================================= */
h1 {
	font-weight: 900;
    font-size: 6rem;
	line-height: 0.81;
    letter-spacing: -0.04em;
    font-variation-settings: "wght" 900;
    padding: 2.813rem 0 1.25rem 0;
}
@media (max-width: 1366px) {
    h1 {
        font-size: 3rem;
        line-height: 0.81;
        font-weight: 800;
    }
}
h2 {
	font-weight: 900;
    font-size: 3.0rem;
	line-height: 0.81;
    letter-spacing: -0.024em;
    font-variation-settings: "wght" 900;
    padding: 0.98em 0.0em 0.58em 0.0em;
}
h3 {
	font-weight: 900;
    font-size: 2.25rem;
	line-height: 1.5rem;
    margin: 1.48em 0em 0.48em 0.0em;
}
h4 {
	font-weight: 800;
    font-size: 1.5rem;
	line-height: 1.2rem;
}
h5 {
	font-size: 1.25rem;
	line-height: 1rem;
	font-weight: 800;
}
h6 {
	font-weight: 800;
	font-size: 1.125rem;
	line-height: 0.9rem;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    word-wrap: break-word;
    color: #090909;
}
a {
    transition: all 0.3s ease-in-out;
}
a, a:focus, a:active, a:hover {
    text-decoration: none;
}
a, a:focus, a:active {
    color: #41667D;
}
a:hover {
    color: #b3cc94;
}
hr {
    margin-top: 0;
    margin-bottom: 0;
    border-top: 1px solid #d7d7d7;
}
h2 + h3 {
	margin-top: 29px;
}
/* =========================================
   NAVBAR & MENU STYLES
   ========================================= */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(248, 252, 255, 0.9);
    backdrop-filter: blur(4px);
    padding: 15px 20px;
    position: sticky;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}
.site-logo img {
    height: 40px;
    width: 100%;
}
.top-menu-container {
    display: flex;
    align-items: center;
}
.top-menu {
    list-style: none;
    display: flex;
    transition: max-height 0.3s ease-in-out;
    align-items: center;
}
.top-menu li {
    margin: 0 15px;
}
.top-menu a {
    color: #4a6477;
    text-decoration: none;
    font-size: 1em;
 }
.top-menu a:hover {
    color: #4a6477;
    text-decoration: underline;
 }
.lang-switch-btn {
    margin-left: 20px;
}
.lang-switch-btn button {
    background: none;
    border: none;
    color: #4a6477;
    font-size: 1em;
    cursor: pointer;
    padding: 5px;
}
.top-menu-hamburger {
    font-size: 1.3em;
    color: #4a6477;
    background: none;
    border: none;
    cursor: pointer;
}
@media (max-width: 768px) {
    .navbar {
        padding: 10px;
    }
    .top-menu-container {
        display: flex;
        align-items: center;
        width: auto;
    }
    .site-logo img {
        height: 32px;
        margin-left: 10px;
        width: 80%;
    }
    .top-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 55px;
        right: 0;
        background: #f3f3f3;
        width: 100%;
        text-align: left;
        padding: 10px 0;
        align-items: normal;
    }
    .top-menu li {
        margin: 10px 20px;
    }
    .top-menu a {
        display: block;
        padding: 10px 20px;
        color: #090909;
    }
    .lang-switch-btn {
        position: relative;
        margin-left: auto;
        margin-right: 15px;
    }
    .lang-switch-btn button {
        font-size: 0.813em;
    }
}

/* =========================================
   FOOTER ELEMENRTS STYLES
   ========================================= */
footer p, 
footer a {
    color: #4a6477;
    font-size: 0.625rem;
    line-height: 0.875rem;
    text-transform: uppercase;
    font-weight: 500;
}
footer p {
    margin-top: 18px;
}
footer a {
    text-decoration: none;
}
footer a:hover{
    color: #090909;
    text-decoration: underline;
}
.footer-dev{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px 0 40px 0;
}
.footer-dev img{
    width: 108px;
    height: 20px;
}
.footer-dev:hover{
    color: #090909;
    text-decoration: underline;
}
@media (max-width: 420px) {
    .footer-dev{
        display: block;
    }
}
/* =========================================
   CONTENT STYLES
   ========================================= */
.section-title{
    font-size: 1.875rem;
    font-weight: 900;
    padding: 20px 0px 40px 0px;
}
/* Title in monospace font */
.section-subtitle{
    text-align: left;
    text-transform: uppercase;
	color: #a3be74;
	font-weight: 300;
	font-size: 0.64rem;
    line-height: 0.6rem;
    letter-spacing: 0.08em;
    font-family: "Geist Mono", "Courier New", monospace;
}
/* Buttons */
.button {
	position: relative;
	overflow: hidden;
	display: inline-block;
	min-width: 200px;
	padding: 17px 33px 15px;
	font-size: 14px;
	line-height: 1.34;
	border: 2px solid;
	font-weight: 500;
	letter-spacing: 0.075em;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;
	cursor: pointer;
	vertical-align: middle;
	user-select: none;
	transition: 250ms all ease-in-out;
}
/* HERO SECTION */
.section-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 70px 5% 100px 5%;
}
.content-hero {
    max-width: 40%;
    }
.hero-title {
    font-size: 6rem;
    margin-bottom: 20px;
    font-weight: 900;
    color: #090909;
}
.hero-subtitle{
    font-size: 1.3rem;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 20px;
    color: #090909;   
}
.hero-desc {
    font-size: 0.875rem;
    font-weight: 400;
    color: #575757;
}
.hero-img {
    max-width: 55%;
}
.hero-img img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 1366px) {
    .section-hero {
        padding: 80px 5% 80px 5%;
        height: auto;
    }
    .content-hero {
        max-width: 40%;
    }
    .hero-img {
        max-width: 55%;
    }
}
@media (max-width: 1024px) {
    .hero-title {
        font-size: 3rem;
        line-height: 2.35rem;
        margin-bottom: 20px;
        font-weight: 800;
        color: #090909;
    }
}
@media (max-width: 768px) {
    .section-hero {
        flex-direction: column-reverse;
        padding: 55px 0 40px 0;
    }
    .content-hero {
        margin-top: 55px;
        max-width: 100%;
        padding: 0 5% 0 5%;
    }
    .hero-img {
        max-width: 100%;
        margin-top: 20px;
    }
    .hero-desc {
        font-size: 0.813rem;
        line-height: 1.138rem;
    }
}
/* CLIENTS & PARTNERS SECTION */
.section-clients{
    padding: 80px 5% 40px 5%;
}
/* CLIENTS SLIDER _ BACKUP */
/*
.scroller {
  max-width: 100%;
  padding: 30px 0;
}
.scroller[data-animated="true"] .scroller__inner:hover {
  animation-play-state: paused;
}
.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}
.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}
.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}
.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}
.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}
.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}
@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}
*/
/* CLIENTS GRID */
.clients-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 40px 80px;
    width: 100%;
    padding: 20px 0;
}
.client-grid-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}
.client-grid-logo img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
@media (max-width: 768px) {
    .clients-grid {
        gap: 30px 45px;
    }
}
/*GALLERY*/
.section-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
    padding: 80px 5% 40px 5%;
}
.section-gallery .gallery-container {
    width: calc(33.333% - 30px);
    max-width: 100%;
    overflow: hidden;
    position: relative;
}
.section-gallery img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease-in-out;
    display: block;
}
.gallery-img{
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}
.gallery-img:hover{
    filter: grayscale(0);
}
.section-gallery .gallery-container:hover img {
    transform: scale(1.02);
}
@media (max-width: 768px) {
    .section-gallery {
        padding: 40px 0;
    }
    .section-gallery .gallery-container {
        width: 100%;
    }
}
/*SERVICIES*/
.section-services{
    padding: 80px 5% 40px 5%;
}
.services-lists{
    display: flex;
    gap: 20px;
    justify-content: space-between;
}
.services{
    flex: 1;
    margin: 0 20px;
}
.services li {
    font-size: 1rem;
    line-height: 1.28rem;   
    margin-bottom: 0.88rem; 
    font-weight: 400;
    color: #4a6477;
}
@media (max-width: 768px) {
    .services-lists {
        flex-direction: column;
        gap: 0;
    }
}
/*PROJECTS CARDS*/
.section-projects{
    padding: 80px 5% 40px 5%;
}
.projects-container {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.project-card {
    overflow: hidden;
    text-align: left;
    transition: transform 0.3s ease-in-out;
}
.project-card:hover {
    transform: scale(1.03);
}
.project-card img {
    width: 100%;
    height: auto;
 }
.project-card h3 {
    font-weight: 800;
    margin: 12px 0 0 0;
    font-size: 1.125rem;
    line-height: 1rem;
    padding: 0 0 6px 0;
}
.project-card p {
    font-size: 0.8125rem;
    line-height: 1rem;
    color: #4a6477;
}
@media (min-width: 768px) {
    .projects-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}
@media (min-width: 1024px) {
    .projects-container {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 768px) {
    .project-card {
        margin-bottom: 50px;
    }
    .project-card:last-child{
        margin-bottom: 0;
    }
    .project-card h3 {
        font-size: 0.875rem;
        line-height: 0.75rem;
    }
    .project-card p {
        font-size: 0.75rem;
        line-height: 0.75rem;
    }
}
/*WHAT WE PROJECTS*/
.section-what-projects{
    padding: 80px 5% 40px 5%;
}
.what-projects{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 20px;
}
.what-projects span{
    padding: 16px  24px;
    background-color: #ffffff;
    border: 1px solid #b3cc94;
    border-left: 8px solid #b3cc94;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 500;
}
.what-projects span:hover{
    border: 1px solid #5b778c;
    border-left: 8px solid #5b778c;
    cursor: pointer;
}
@media (max-width: 768px) {
    .what-projects span{
        font-size: 0.813rem;
        line-height: 0.875rem;
    }
}
/*BUERAU ADVANTAGES*/
.section-advantages{
    padding: 80px 5% 40px 5%;
}
.advantages-container{
    display: flex;
    gap: 20px;
    justify-content: space-between;
}
.advantages-list{
    flex: 1;
    padding: 0 20px;
}
.advantages-list li {
    font-size: 1rem;
    line-height: 1.28rem;   
    margin-bottom: 1.28rem; 
    font-weight: 400;
    color: #4a6477;
}
@media (max-width: 768px) {
    .advantages-container {
        flex-direction: column;
        gap: 0;
    }
}
/*CONTACTS*/
.section-contacts{
    padding: 80px 5% 40px 5%;
}
.contacts-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    }
.contacts-part {
    padding: 20px;
    flex: 1;
    max-width: calc(30% - 20px);
    margin: 10px;
    display: flex;
    flex-direction: column;
}
@media (max-width: 1024px) {
.contacts-part {
    max-width: calc(40% - 20px);
}
}
@media (max-width: 767px) {
.contacts-container {
    padding: 0;
}
.contacts-part {
    padding: 0;
    flex: 1;
    max-width: 100%;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}
}
.contacts-h5{
    font-size: 1.125rem;
    line-height: 1.125rem;
    margin: 20px 0 10px 0;
}
.contacts-ul li{
    display: flex;
    font-size: 1.125rem;
    line-height: 1.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding-bottom: 10px;
}
.callback-btn{
    display: inline-block;
    font-size: 0.813rem;
    line-height: 1rem;
    color: #a3be74;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    padding: 20px 40px;
    margin: 40px 0 16px 0;
    border: 1.5px solid #a3be74;
}
.callback-btn:hover{
    color: #090909;
    background-color: #ffffff;
    text-decoration: none;
}
@media (max-width: 435px) {
    .section-contacts {
        padding: 40px 10% 40px 10%;
    }
}
/*SOCIALS*/
.section-socials{
    padding: 40px 5% 140px 5%;
}
.social-links-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 20px 45px;
    width: 100%;
    padding: 00px;
}
@media (max-width: 768px) {
    .social-links-list {
        gap: 15px 15px;
    }
}
.social-icon{
    width: 24px;
    height: 24px;
    fill:#b3cc94;
}
.social-icon:hover{
    fill:#5b778c;
}
/* New Site Styles */
/* Menu */
.menu-icon {
    width: 24px;
    height: 24px;
}
/* Bottom menu */
.bottom-menu {
    list-style: none;
    display: flex;
    transition: max-height 0.3s ease-in-out;
    align-items: center;
}
.bottom-menu li {
    margin: 0 15px;
}
.bottom-menu a {
    color: #4a6477;
    font-size: 0.625rem;
    line-height: 0.875rem;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
 }
.bottom-menu a:hover {
    color: #090909;
    text-decoration: underline;
 }
@media (min-width: 769px) {
    .bottom-menu li:first-child {
    margin-left: 0;
    }
}
@media (max-width: 768px) {
    .bottom-menu {
        display: flex;
        flex-direction: column;
        width: 100%;
        text-align: left;
        padding: 10px 0;
        align-items: normal;
    }
    .bottom-menu li {
        margin: 10px 20px;
    }
    .bottom-menu a {
        display: block;
        padding: 10px 20px;
        color: #090909;
    }
    .bottom-hamburger {
        display: block;
        margin-right: 10px;
    }
    .bottom-lang-switch {
        position: relative;
        margin-left: auto;
        margin-right: 15px;
    }
    .bottom-lang-switch button {
        font-size: 0.813em;
    }
}
/* Test  */
/*
.test-button {
    height: 60px;
    width: 220px;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 38px;
    transform: translate(-50, -50);
    display: grid;
    color: #fff;
    place-content: center;
    font-weight: 600;
    font-size: 25px;
    text-transform: uppercase;
    text-decoration: none;
    box-sizing: border-box;
    background: linear-gradient(90deg #03a9f4, #f441a5, #ffeb3b, );
    background-size: 400%;
    cursor: pointer;
}
.test-button:hover:before{
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
}
.test-button:hover{
    animation: animate 8s linear infinite;
}
.test-button:before {
    content: ('');
    left: 50%;
    top: 50%;
    bottom: -5px;
    right: -5px;
    z-index: -1;
    background: linear-gradient(90deg #03a9f4, #f441a5, #ffeb3b, );
    background-size: 400%;
    border-radius: 40px;
    opacity: 0;
    transition: 1s;
}
*/
/* Стилі Хлібних крихт- початок */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    margin-left: 3.3%;
    list-style: none;
    background-color: transparent;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 400;
    color: #AAACB5;
}
ol.breadcrumb li {
    margin-right: 5px;
    padding-right: 5px;
    font-size: 0.75rem;
}
/* Стилі Хлібних крихт- кінець */
.page-content {
	position: relative;
	min-height: 100vh;
	width: 60%;
    margin-left: auto;
    margin-right: auto;
	padding-bottom: 100px;
    color: #555b76;
	font-size: 1em;
	font-weight: 400;
}
@media screen and (min-width:100px) and (max-width:768px) {
    .page-content {
	position: relative;
	min-height: 100vh;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
	font-size: 0.969em;
	font-weight: 400;
    }
}
@media screen and (min-width:100px) and (max-width:425px) {
    .page-content {
	position: relative;
	min-height: 100vh;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
	font-size: 0.969em;
	font-weight: 400;
    }
}
.page-content h3 {
    font-size: 1.58em;
    line-height: 1.0;
    margin: 1.48em 0em 0.48em 0.0em;
    font-weight: 400;
}
.spacious p{
	margin-top: 24px;
}

.article-big-image {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 40px 0;
}
.article-big-image img {
  height: 70dvh;
  width: auto;        /* Зберігає пропорції */
  max-width: 100%;
  object-fit: contain; /* Картинка впишеться повністю, без обрізки */
}
/* Зображення портфоліо */
.full-img {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-left: -50vw;
    margin-right: -50vw;
}
.basic-img {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;  
	text-align: center;  
}
.basic-img img{
    margin: 0 auto;
}
.twice-img {
        display: flex;
        flex-direction: row;
        column-gap: 15px;
        -webkit-column-gap: 15px;
        margin-top: 15px;
        margin-bottom: 15px;        
    }
.twice-img img {
        width: 50%;
    }
.twice-img-picture{
        display: flex;
        flex-direction: row;
        column-gap: 15px;
        -webkit-column-gap: 15px;
        margin-top: 15px;
        margin-bottom: 15px;        
}
.twice-img-picture img {
        width: 100%;
    }
.twice-img-picture picture {
        width: 50%;
    }
@media screen and (min-width: 768px) {
	.scale-basic-img{
		height: 72vh;
        margin: 0 auto;
	}
}
@media screen and (max-width: 768px) {
    .basic-img {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        padding-top: 15px;
        padding-bottom: 0;
        margin-left: -50vw;
        margin-right: -50vw;
    }
    .full-img {
        padding-top: 15px;
        padding-bottom: 0;        
    }
   .twice-img-picture {
	   	display: block;
        flex-direction: column;
        /*Валідатор скаржиться на цей рядок
        row-gap: 15px; 
        */
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        padding-top: 0;
        padding-bottom: 0;
        margin-left: -50vw;
        margin-right: -50vw;
        margin-top: 0;
        margin-bottom: 0;
		column-gap: 0;
        -webkit-column-gap: 0;
    }
    .twice-img img {
        width: 100%;
		margin-top: 15px;
    }
	.twice-img-picture img {
        width: 100%;
		margin-top: 15px;
    }
}
/* Стилі блогу/статей - початок */
.preview-title {
    display: block;
    font-size:1.12em;
    font-weight: 600;
    color: #41667D;
    margin: 0.2em auto 0.2em;
}
.preview-title:hover {
    color: #b3cc94;
}
.preview-anons {
    margin-top: 0.1em;
}
.preview-author {
    display: block;
    font-weight: 200;
    color: #151515;
    margin-top: 0.6em;
    font-size:0.95em;
}
.preview-author:hover {
    color: #41667D;
}
/* Врізка в середині по центру */
.pull-quote hr{
    margin: 10px auto;
    width: 50%;
    text-align: center;
}
.pull-quote p{
    text-align: center;
}
/* Стилі блогу/статей - кінець */
/* Стилі для превью статтей*/
.portfolio-item .article-preview {
    width: 15em;
    float: left;
}
@media (min-width: 1441px) {
    .portfolio-item .article-preview {
    width: 36em;  
    float: left;
    }
}
@media (max-width: 1440px) {
    .portfolio-item .article-preview {
    width: 27em;  
    float: left;
    }
}
@media (max-width: 1366px) {
    .portfolio-item .article-preview {
    width: 24em;  
    float: left;
    }
}
@media (max-width: 1024px) {
    .portfolio-item .article-preview {
    width: 19em;  
    float: left;
    }
}
@media (max-width: 768px) {
    .portfolio-item .article-preview {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    float: left;
    }
}
/* Стилі для портфоліо*/
.portfolio-client {
	display: block;
	font-weight: 400;
	margin: 0.5em auto 0;
	font-size: 0.875em;
}
.port-preview:hover a {
	color: #b3cc94;
}
/* Hover зображень портфоліо, анімація збільшення */
.hover-image-scale {
    display: inline-block; 
  overflow: hidden;
}
.hover-image-scale img{
    transition: 1s;
    display: block; 
}
.hover-image-scale img:hover{
    transform: scale(1.02);
}
/* Стилі відео */
.video-full {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-full iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-width: 0;
  outline-width: 0;
}
@media (min-width:2561px) {
    .video-youtube {
    	width: 100%;
    	height: 1290px;
    }
}
@media (max-width:2560px) {
    .video-youtube {
    	width: 100%;
    	height: 858px;
    }
}
@media (max-width:1920px) {
    .video-youtube {
    	width: 100%;
    	height: 643px;
    }
}
@media (max-width:1600px) {
    .video-youtube {
    	width: 100%;
    	height: 534px;
    }
}
@media (max-width:1440px) {
    .video-youtube {
    	width: 100%;
    	height: 480px;
    }
}
@media (max-width:1366px) {
    .video-youtube {
    	width: 100%;
    	height: 456px;
    }
}
@media (max-width:1024px) {
    .video-youtube {
    	width: 100%;
    	height: 340px;
    }
}
@media (max-width:768px) {
    .video-youtube {
    	width: 100%;
    	height: 432px;
    }
}
@media (max-width:420px) {
    .video-youtube {
    	width: 100%;
    	height: 236px;
    }
}
@media (max-width:320px) {
    .video-youtube {
    	width: 100%;
    	height: 180px;
    }
}
.video-center{
display: block;
margin: 0 auto;
}
.shorts-video {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;  
}
@media screen and (max-width: 768px) {      
    .shorts-video {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        padding-top: 15px;
        padding-bottom: 0;
        margin-left: -50vw;
        margin-right: -50vw;
    }
}
.basic-video {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;    
}

@media screen and (max-width: 768px) {      
    .basic-video {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        padding-top: 15px;
        padding-bottom: 0;
        margin-left: -50vw;
        margin-right: -50vw;
    }
}
/* Невеликий текст в описі портфоліо і футері */
p.rightsv2 {
	font-size: 11px;
	letter-spacing: .025em;
	font-weight: 400;
	color: #605e6a;
}
/* Блок автора в статтях і сторінці Про Слава */
.round-image {
    border-radius: 100px;
	width: 60px;
    height: 60px;
   }
.author-block {
	display: flex;
	margin-top: 4em; /* відступ приблизно як два рядки тексту */
}
.author-block-text {
	display: block;
	margin-left: 10px;
}
.author-block-image {
	display: block;
}
.author-block-social {
	margin-left: 50px;
	display: flex;
	align-items: center;
}
@media screen and (max-width: 768px) {
.author-block {
	display: flex;
	flex-direction: column;
}
.author-block-image {
	margin: 0 auto;
}
.round-image {
    border-radius: 100px;
	width: 100px;
    height: 100px;
   }
.author-block-social {
	margin-left: 0;
	display: flex;
	align-items: center;
}
.author-block-text {
	display: block;
	margin-left: 0;
	margin-top: 10px;
}
.author-social-icon {
	margin-right: 20px;
	font-size: 20px;
}
}
.author-block-a {
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 0;
}
.author-block-p {
	margin-top: 0;
	margin-bottom: 0;
}
.author-social-icon {
	margin-right: 17px;
    width: 20px;
    height: 20px;
    fill: #5b778c;
}
.author-social-icon:hover{
    fill:#b3cc94;
}
/* Врізки в статтях */
.vrizka-center {
	margin: 30px;
	color: #4a6477; 
	font: 0.92em tahoma,verdana;
	font-weight: 600; 
	line-height: 1.58;
	width: 100%;
	border-top: 8px solid #b3cc94;
	border-bottom: 8px solid #b3cc94;
	padding: 40px 20px;
}
.vrizka-float-right {
	float: right; 
	margin: 30px calc(-21% + 10px) 30px 45px;
	color: #4a6477; 
	font: 0.92em tahoma,verdana;
	font-weight: 600; 
	line-height: 1.58;
	width: 40%;
	border-top: 8px solid #b3cc94;
	border-bottom: 8px solid #b3cc94;
	padding: 40px 20px;
}
.vrizka-float-left {
	float: left; 
	margin: 30px 65px 30px calc(-21% + 10px);
	color: #4a6477; 
	font: 0.92em tahoma,verdana;
	font-weight: 600; 
	line-height: 1.58;
	width: 40%;
	border-top: 8px solid #b3cc94;
	border-bottom: 8px solid #b3cc94;
	padding: 40px 20px;
}
@media screen and (max-width: 1279px) {
.vrizka-float-right {
	float: none; 
	margin: 45px 0 45px 0; 
	width: 100%;
}
.vrizka-float-left {
	float: none; 
	margin: 45px 0 45px 0;
	width: 100%;
}
}
/* Стилі словнка термінів */
.empty-letter {
	color: #9b9b9b;
	pointer-events: none;
}
.letters-line {
	font-size: 1.125em;
}
.dictionary-anons:hover h2 {
	color: #b3cc94;
}
.dictionary-anons:hover p {
	color: #b3cc94;
}
/* Стиль першого та другого рядків блоку Освіта в сторінці Про Слава Кривоноса */
.education-1 {
	margin-top: 20px;
	text-align: left;
	font-weight: 600;
	font-size: 16px;
	line-height: 0.88;
}
.education-2 {
	margin-top: 10px;
	font-size: 13px;
	font-weight: 300;
	text-align: left;
}
/* Стиль кнопки зі старої теми */
.button-primary, .button-primary:focus {
	color: #ffffff;
	background-color: #b3cc94;
	border-color: #b3cc94;
}
.button-primary:hover, .button-primary:active {
	color: #ffffff;
	background-color: #151515;
	border-color: #151515;
}
.button-primary.button-ujarak::before {
	background: #151515;
}
.button-ujarak {
	position: relative;
	z-index: 0;
	transition: background .4s, border-color .4s, color .4s;
}
.button-ujarak::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 101%;
	height: 101%;
	background: #b3cc94;
	z-index: -1;
	opacity: 0;
	transform: scale3d(0.7, 1, 1);
	transition: transform 0.42s, opacity 0.42s;
	border-radius: inherit;
}
.button-ujarak, .button-ujarak::before {
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button-ujarak:hover {
	transition: background .4s .4s, border-color .4s 0s, color .2s 0s;
}
.button-ujarak:hover::before {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
/* Стилі посилань сторінки послуг? */
.linkblock {
    padding-left: 10px;
}
.linkblock:hover h2 {
    color: #b3cc94;
}
.linkblock:hover ul {
    color: #b3cc94;
}
/* Стилі для превью торгових марок*/
.trademarks-list-h2 {
 	margin: 4em 0em 1em 0em;
	text-align: center;
    font-size: 2.100em;
    line-height: 0.98;
}
.trademarks-list-container{
	margin: -3em 0 0 -2em;
	text-align: center;
}
@media (max-width: 768px) {
	.trademarks-list-container{
	margin: 0 auto;
	width: 100%;
	text-align: center;
	}
}
.trademarks-item{
	text-decoration: none;
	display: -moz-inline-box;
	display: inline-block;
	vertical-align: top;
	text-align: left;
	margin: 3em 0 0 2em;
}
@media (max-width: 768px) {
	.trademarks-item{
	text-decoration: none;
	display: -moz-inline-box;
	display: inline-block;
	vertical-align: top;
	text-align: left;
	margin: 3em auto 0 auto;
	}
}
.t-preview-title {
	display: block;
	font-size:1.12em;
	font-weight: 600;
	color: #41667D;
	margin: 0.2em auto 0.2em;
}
.t-preview-text {
	margin-top: 0.1em;
}
.trademarks-item .trademarks-preview
{
width: 15em;
float: left;
}
@media (min-width: 1441px) {
.trademarks-item .trademarks-preview
{
width: 22em;  
float: left;
}
    }
@media (max-width: 1440px) {
.trademarks-item .trademarks-preview
{
width: 17em;  
float: left;
}
    }
@media (max-width: 1366px) {
.trademarks-item .trademarks-preview
{
width: 14em;  
float: left;
}
    }
@media (max-width: 1024px) {
.trademarks-item .trademarks-preview
{
width: 18em;  
float: left;
}
    }
@media (max-width: 768px) {
.trademarks-item .trademarks-preview
{
width: 100%;
margin-left: auto;
margin-right: auto;
float: left;
}
    }
/* полоска тексту в хіроу-секції з анімованими словами */

/* ПЛАШКА */
.word-roller {
  display: inline-block;
/*
  background: #ffeb3b;
*/
  background: #F7DC46;


  padding: 8px;
  vertical-align: middle;
  position: relative;
  top: -2px; /* виправляє зсув */
}

/* ВІКНО ОДНОГО РЯДКА */
.word-roller-viewport {
  height: calc(1.3rem * 1.2);
  overflow: hidden;
  display: block;
}

/* ТРЕК З СЛОВАМИ */
.word-roller-track {
  display: block;
  animation: scroll-words 8s ease-in-out infinite;
}

/* СЛОВА */
.word-roller-track span {
  display: block;
  line-height: 1.2;
  font-size: 1.3rem;
  font-weight: 500;
  color: #090909;
  white-space: nowrap;
}

/* АНІМАЦІЯ: вгору і вниз по колу */
@keyframes scroll-words {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(calc(-1.3rem * 1.2));
  }
  60% {
    transform: translateY(calc(-1.3rem * 1.2));
  }
  70% {
    transform: translateY(calc(-1.3rem * 1.2 * 2));
  }
  90% {
    transform: translateY(calc(-1.3rem * 1.2 * 2));
  }
  100% {
    transform: translateY(0);
  }
}
/* полоска тексту в хіроу-секції з анімованими словами */

/*Анімація заголовків*/
.h-animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}
/* коли елемент видно */
.h-animate-on-scroll.show {
    opacity: 1;
    transform: translateY(0);
}
/*END Анімація заголовків*/

/* --- МЕНЮ, ЩО РОЗГОРТАЄТЬСЯ --- */
.fullscreen-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #111;
    z-index: 1000;
    display: flex; /* Використовуємо flex постійно */
    visibility: hidden; /* Але ховаємо через visibility */
    opacity: 0;
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
    transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s linear;
}
.fullscreen-menu.active {
    visibility: visible;
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.3); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.menu-content { 
    display: flex;
    width: 100%;
    min-height: 100%;
    padding: 100px 10%;
    box-sizing: border-box;
}
/* --- Плавна поява пунктів меню (Каскад) --- */
.main-nav ul li {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    list-style: none;
}
.fullscreen-menu.active .main-nav ul li {
    opacity: 1;
    transform: translateY(0);
}
/* Додаємо затримку для кожного пункту, щоб вони з'являлися по черзі */
.fullscreen-menu.active .main-nav ul li:nth-child(1) { transition-delay: 0.2s; }
.fullscreen-menu.active .main-nav ul li:nth-child(2) { transition-delay: 0.3s; }
.fullscreen-menu.active .main-nav ul li:nth-child(3) { transition-delay: 0.4s; }
.fullscreen-menu.active .main-nav ul li:nth-child(4) { transition-delay: 0.5s; }
/* --- Анімація кнопки закриття --- */
.close-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    background: none;
    border: none;
    color: #090909;
    font-size: 50px;
    cursor: pointer;
    z-index: 1001;
    opacity: 0;
    transform: scale(0.5) rotate(-45deg);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.fullscreen-menu.active .close-btn {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition-delay: 0.5s; /* З'являється після основного фону */
}
.close-btn:hover {
    color: #b3cc94;
    transform: scale(1.2) rotate(90deg);
}
/* --- Плавне розкриття підпунктів (Акордеон) --- */
.submenu {
    list-style: none;
    padding-left: 20px;
    max-height: 0; /* Початкова висота 0 */
    overflow: hidden; /* Ховаємо контент */
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Плавна зміна висоти */
}
.submenu.open {
    max-height: 500px; /* Достатня висота для розкритого списку */
}
.submenu li{
    padding: 10px 0;
}
/* Анімація самого плюсика */
.toggle-sub {
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
    cursor: pointer;
    font-size: 30px;
    margin-left: 15px;
    line-height: 1;
}
.toggle-sub.rotate {
    transform: rotate(45deg); /* Перетворюємо плюс на "х" або просто обертаємо */
    color: #b3cc94;
}
.menu-left {
    flex: 1.5;
    border-right: 1px solid #5b778c;
}
.menu-right {
    flex: 1;
    padding-left: 50px;
    align-self: center;
    display: flex;
    flex-direction: column;
}
.menu-item-name:hover {
    color: #b3cc94;
}
.menu-item-li {
    padding: 20px 0;
}
.menu-item a {
    color: #4a6477;
    font-size: 40px;
    text-decoration: none;
    font-weight: bold;
}
@media (max-width: 768px) {
    .menu-content {
        flex-direction: column; /* Стекуємо колонки одна під одну */
        padding: 100px 5% 50px;
    }
    .menu-left {
        border-right: none;
        border-bottom: 1px solid #333;
        padding-right: 0;
        padding-bottom: 40px;
        flex: none;
    }
    .menu-right {
        padding-left: 0;
        padding-top: 40px;
        padding-bottom: 20px;
        flex: none;
        justify-content: flex-start;
    }
    .menu-item a {
        font-size: 28px; /* Трохи зменшуємо шрифт для мобільних */
    }
}
/* Стилізація скроллбару (опціонально, щоб він був гарним) */
.fullscreen-menu::-webkit-scrollbar { width: 6px;}
.fullscreen-menu::-webkit-scrollbar-track { background: #090909; }
.fullscreen-menu::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
.fullscreen-menu::-webkit-scrollbar-thumb:hover { background: #b3cc94; }
/* END МЕНЮ, ЩО РОЗГОРТАЄТЬСЯ */

/* Аккордіон для сторінки про Слава */
.accordion-container {
  margin: 20px auto;
  font-family: inherit;
}
.accordion-item {
  border-bottom: 1px solid #ddd;
}
.accordion-header {
  width: 100%;
  padding: 30px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background 0.3s ease;
  background: #f3f3f3;
}
.accordion-header h2{
    margin: 0;
    padding: 0;
}
/* Малюємо стрілочку через псевдоелемент */
.accordion-header::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg); /* Стрілка вниз */
  transition: transform 0.3s ease;
  margin-left: 10px;
}
/* Стиль при наведенні */
.accordion-header:hover {
  border: 0;
}
/* Коли блок активний — розгортаємо стрілку вгору */
.accordion-header.active::after {
  transform: rotate(-135deg); /* Стрілка вгору */
  margin-top: 5px;
}
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.content-inner {
  padding: 0 20px 20px 20px;
  color: #666;
  line-height: 1.6;
}
/* END Аккордіон для сторінки про Слава */




/* тестувальний блок проєктів з тегами */
.project-card img {
  display: block !important;
  width: 100%;
}

.project-card {
  overflow: visible;
}

.project-card__info {
  width: 100%;
}

.project-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  width: 100%;
  box-sizing: border-box;
}

.project-card__left {
  flex: 0 0 calc(50% - 6px);
  max-width: calc(50% - 6px);
  min-width: 0;
}

.project-card__left h3 {
  flex-shrink: 0;
  margin: 0;
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1rem;
  padding: 0 0 6px 0;
}

.project-card__left p {
  font-size: 0.875rem;
  line-height: 0.8rem;
  color: #090909;
  margin-top: 0;
}

.project-card__tags {
  flex: 0 0 calc(50% - 6px);
  max-width: calc(50% - 6px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px 4px;
  min-width: 0;
}

.tag {
  display: inline-block;
  padding: 1.5px 3px 1px 3px;
  font-size: 0.625rem;
  text-transform: uppercase;
  line-height: 0.81;
  font-weight: 500;
  color: #090909;
  /* background-color: #a3be74; */
  border: 1px solid #090909;
  white-space: nowrap;
}

a.project-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

@media (max-width: 768px) {
  .project-card__header {
    flex-direction: column;
    margin-top: 12px; 
  }

  .project-card__left {
    flex: none;
    max-width: 100%;
  }

  .project-card__tags {
    flex: none;
    max-width: 100%;
    justify-content: flex-start;
    margin-top: -6px;
  }

  .project-card__left h3 {
    font-size: 0.875rem;
    line-height: 0.75rem;
  }

  .project-card__left p {
    font-size: 0.75rem;
    line-height: 0.75rem;
  }
 
}
/* тестувальний блок проєктів з тегами */

/* =========================================
   PRESS GRID — сітка згадок у ЗМІ (сторінки кейсів)
   ========================================= */
.press-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    margin: 32px 0;
}
.press-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    transition: all 0.3s ease-in-out;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.15));
}
.press-card:hover,
.press-card:focus-visible {
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.18));
}
.press-card picture {
    display: block;
    overflow: hidden;
}
.press-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: top center;
    transition: all 0.3s ease-in-out;
}
.press-card:hover img,
.press-card:focus-visible img {
    opacity: .82;
}
.press-card,
.press-card__name,
.press-card__note {
    white-space: normal;
}
.press-card__name {
    padding: 12px 14px 14px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #41667D;
    word-break: break-word;
}
.press-card:hover .press-card__name {
    color: #b3cc94;
}
.press-card__note {
    padding: 0 14px 14px;
    margin-top: -8px;
    font-size: 0.75rem;
    line-height: 1.3;
    color: #9b9b9b;
}
.press-plain {
    margin-top: 24px;
    font-size: 0.875rem;
    line-height: 1.8;
}
.press-plain__item {
    color: #9b9b9b;
}
@media (max-width: 768px) {
    .press-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 16px;
    }
    .press-card__name {
        font-size: 0.75rem;
    }
    .press-card__note {
        font-size: 0.688rem;
    }
}

/* =========================================
   СТАТТІ — роздільник, таблиця порівняння, TL;DR
   ========================================= */
.article-divider {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}
.comparison-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 14px;
    margin: 2rem 0 2.5rem 0;
}
.comparison-table th,
.comparison-table td {
    padding: 18px 20px;
    vertical-align: top;
    border: 1px solid #d8e1e7;
}
.comparison-table th {
    background-color: #ffffff;
    font-weight: 600;
    text-align: left;
}
/* Пропорція 38/62 — лише для таблиць з двома колонками; ширші таблиці — рівні колонки */
.comparison-table th:first-child:nth-last-child(2),
.comparison-table td:first-child:nth-last-child(2) {
    width: 38%;
}
.comparison-table th:last-child:nth-child(2),
.comparison-table td:last-child:nth-child(2) {
    width: 62%;
}
.note {
    margin: 2rem 0;
    padding: 20px 24px;
    background: #ffffff;
    border-left: 3px solid #b3cc94;
}
.note p + p {
    margin-top: 12px;
}
@media (max-width: 768px) {
    .comparison-table,
    .comparison-table thead,
    .comparison-table tbody,
    .comparison-table tr,
    .comparison-table th,
    .comparison-table td {
        display: block;
        width: 100%;
    }
    .comparison-table th,
    .comparison-table td {
        padding: 14px 16px;
    }
    /* Таблиці з 3+ колонками: рядок — картка, назва колонки над значенням */
    .comparison-table--labels thead {
        display: none;
    }
    .comparison-table--labels tr {
        margin-bottom: 14px;
    }
    .comparison-table--labels td {
        border-top-width: 0;
    }
    .comparison-table--labels td:first-child {
        border-top-width: 1px;
        background-color: #ffffff;
        font-weight: 600;
    }
    .comparison-table--labels td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 0.85em;
        font-weight: 600;
        color: #5b778c;
    }
    .note {
        padding: 16px 18px;
    }
}

/* =========================================
   YOUTUBE MODAL — підписка на канал
   ========================================= */
.yt-modal[hidden] {
    display: none;
}
.yt-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(9, 9, 9, 0.55);
}
.yt-modal__window {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(320px, calc(100vw - 32px));
    padding: 32px 24px 24px;
    background: #f3f3f3;
    border: 1px solid #d8e1e7;
    text-align: center;
}
.yt-modal__logo {
    width: 150px;
    height: auto;
    margin: 0 auto 8px;
}
.yt-modal__title {
    font-size: 1.125rem;
    line-height: 1.3;
    margin-bottom: 8px;
}
.yt-modal__text {
    font-size: 0.875rem;
    line-height: 1.5;
}
.yt-modal__btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 24px;
    background-color: #d9002b;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.3s ease-in-out;
}
.yt-modal__btn:hover,
.yt-modal__btn:focus-visible {
    background-color: #cd201f;
    color: #ffffff;
}
.yt-modal__close {
    display: block;
    margin: 12px auto 0;
    padding: 8px 20px;
    font-family: inherit;
    font-size: 0.813rem;
    font-weight: 600;
    color: #555b76;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.yt-modal__close:hover,
.yt-modal__close:focus-visible {
    color: #090909;
}
@media (min-width: 768px) {
    .yt-modal__window {
        width: 400px;
        padding: 40px 32px 32px;
    }
}

/* Таблиці в словнику термінів (21.09.2026) */
.term-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: .95em; }
.term-table th, .term-table td { padding: 10px 14px; border: 1px solid #d9dde3; vertical-align: top; text-align: left; }
.term-table thead th { background: #eef1f4; font-weight: 600; }
.term-table tbody td:first-child { font-weight: 600; white-space: nowrap; }
@media (max-width: 600px) { .term-table { font-size: .85em; } .term-table th, .term-table td { padding: 8px; } .term-table tbody td:first-child { white-space: normal; } }

/* Фото з підписом у статтях (03.10.2026) */
.article-figure { margin: 40px 0; }
.article-figure .article-big-image { margin: 0; }
.article-figure .article-big-image img { width: min(100%, 56vh); width: min(100%, 56dvh); height: auto; max-height: none; } /* 4:5, не вище 70% екрана; розмір відомий до завантаження */
.article-figure figcaption { max-width: 640px; margin: 12px auto 0; text-align: center; font-size: .9em; line-height: 1.45; }

/* Врізка не ширша за колонку (03.10.2026): width:100% + margin виштовхували її за край */
.vrizka-center { width: auto; box-sizing: border-box; }
@media (max-width: 600px) { .vrizka-center { margin: 24px 0; padding: 24px 16px; } }

/* Захист від горизонтального переповнення (03.10.2026): один задовгий рядок розширював сторінку,
   і вікно YouTube центрувалося за межами екрана */
html, body { overflow-x: clip; }
/* Вікно YouTube: центрування флексом, кнопка «Закрити» видима й на низьких екранах */
.yt-modal:not([hidden]) { display: flex; align-items: center; justify-content: center; padding: 16px; }
.yt-modal__window { position: static; transform: none; max-height: calc(100dvh - 32px); overflow-y: auto; }

/* Картка терміна зі словника на інших сторінках (03.10.2026): partials/dictionary/term-card.htm */
.term-card { margin: 28px 0; padding: 18px 22px; background: #fcfcf5; border-left: 4px solid #b3cc94; }
.term-card p { margin: 0; }
.term-card__label { font-size: .75em; letter-spacing: .06em; text-transform: uppercase; color: #4a6477; margin-bottom: 6px !important; }
.term-card__title { font-weight: 700; margin-bottom: 6px !important; }
.term-card__title a { color: inherit; text-decoration: none; }
.term-card__text { font-size: .95em; line-height: 1.55; }
.term-card__more { margin-top: 10px !important; font-size: .9em; }

/* ORCID у підписі автора — розмір як у пунктів меню в підвалі */
.author-block-orcid,
.author-block-orcid a {
	font-size: 0.625rem;
}

/* Врізка відгуку (плагін Slav.Reviews, 05.10.2026) — у стилі term-card */
.review-card { margin: 28px 0; padding: 18px 22px; background: #fcfcf5; border-left: 4px solid #b3cc94; }
.review-card p { margin: 0; }
.review-card__label { font-size: .75em; letter-spacing: .06em; text-transform: uppercase; color: #4a6477; margin-bottom: 6px !important; }
.review-card__text { margin: 0 0 8px; padding: 0; border: 0; font-size: 1em; line-height: 1.55; }
.review-card__author { font-size: .9em; color: #4a6477; }
.review-card__more { margin-top: 8px !important; font-size: .9em; }
.review-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: start; }
.review-cards .review-card { margin: 0; }
.review-cards__all { margin-top: 16px; }
.section-reviews { padding: 40px 5% 40px 5%; }

/* footer-tap (05.10.2026): відгуки на білому тлі; мобільна сітка відгуків; кнопки в підвалі з білим тлом — зона натискання ≥ 44 px */
.review-card { background: #fff; }
.review-cards { min-width: 0; }
.review-cards > * { min-width: 0; }
@media (max-width: 640px) { .review-cards { grid-template-columns: 1fr; } }
footer .bottom-menu { flex-wrap: wrap; gap: 8px; }
footer .bottom-menu li { margin: 0; }
footer .bottom-menu a, footer a.footer-link, footer .footer-dev a {
    display: inline-block; box-sizing: border-box; min-height: 44px;
    padding: 15px 18px; background: #fff; color: #090909; line-height: 14px;
}
footer .bottom-menu a:hover, footer a.footer-link:hover, footer .footer-dev a:hover { background: #b3cc94; color: #090909; text-decoration: none; }
footer .footer-dev a { padding: 12px 14px; }
footer .footer-contacts { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
footer .footer-contacts p { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
footer .footer-legal a.footer-link, footer .footer-old-site a.footer-link { margin: 4px 0; }
@media (max-width: 768px) {
    footer .bottom-menu li { margin: 0; }
    footer .bottom-menu a { display: inline-block; padding: 15px 18px; color: #090909; }
}

/* footer-tap-2: проміжок між кнопками «Сайт створено…» і логотипом */
footer .footer-dev { flex-wrap: wrap; gap: 8px; }
footer .footer-dev a { margin-left: 0 !important; }

/* footer-tap-3 (05.10.2026): видимий фон менший (≈28 px), зона натискання 48 px — прозора рамка 10 px входить у розмір посилання */
footer .bottom-menu a, footer a.footer-link, footer .footer-dev a {
    min-height: 48px; padding: 7px 12px; border: 10px solid transparent;
    background-clip: padding-box; margin: 0;
}
footer .bottom-menu, footer .footer-contacts, footer .footer-contacts p, footer .footer-dev { gap: 0; }
footer .bottom-menu a:hover, footer a.footer-link:hover, footer .footer-dev a:hover { background-clip: padding-box; }
@media (max-width: 768px) {
    footer .bottom-menu a { padding: 7px 12px; }
}

/* hero-v2 (05.10.2026): довший H1 під нове позиціонування, дві кнопки */
.content-hero--v2 { max-width: 48%; }
.hero-title--v2 { font-size: 3.4rem; line-height: 1.05; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-actions .callback-btn { margin: 0; }
.callback-btn--primary { background: #b3cc94; border-color: #b3cc94; color: #090909; }
.callback-btn--primary:hover { background: #090909; border-color: #090909; color: #ffffff; }
@media (max-width: 1366px) { .content-hero--v2 { max-width: 48%; } .hero-title--v2 { font-size: 2.8rem; } }
@media (max-width: 1024px) { .hero-title--v2 { font-size: 2.2rem; line-height: 1.1; } }
@media (max-width: 768px) { .content-hero--v2 { max-width: 100%; } .hero-title--v2 { font-size: 1.9rem; } }

/* lead-form (05.10.2026): форма «Обговорити задачу» на сторінці «Контакти» (плагін Slav.Leads) */
.lead-form { margin: 48px 0 24px; padding: 28px; background: #fff; border-left: 4px solid #b3cc94; scroll-margin-top: 80px; }
.lead-form h2 { margin: 0 0 8px; }
.lead-form__intro { margin: 0 0 18px; color: #4a6477; }
.lead-form label { display: block; font-size: .85em; color: #4a6477; margin-bottom: 14px; }
.lead-form input, .lead-form textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 12px 14px; font: inherit; font-size: 1rem; color: #090909; background: #fcfcf5; border: 1px solid #d8e1e7; }
.lead-form input:focus, .lead-form textarea:focus { outline: 2px solid #b3cc94; border-color: #b3cc94; }
.lead-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 640px) { .lead-form__grid { grid-template-columns: 1fr; } .lead-form { padding: 20px 16px; } }
.lead-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form__consent { font-size: .8em; color: #575757; margin: 4px 0 16px; }
.lead-form__ok { padding: 14px 16px; background: #fcfcf5; border-left: 4px solid #b3cc94; color: #090909; }
.lead-form__err { color: #b00020; padding-left: 18px; }
.lead-form button { margin: 0; cursor: pointer; }

/* lead-form-2 (05.10.2026): тло форми світло-салатове, поля білі */
.lead-form { background: #fcfcf5; }
.lead-form input, .lead-form textarea { background: #fff; }

/* Відгуки під формою на «Контактах» (05.10.2026): без бічних відступів секції, бо вже в колонці контенту */
.section-reviews--inline { padding: 24px 0 40px; }

/* Блок «Засновник» на головній (05.10.2026) */
.section-founder { padding: 40px 5% 40px 5%; }
.founder { display: flex; gap: 24px; align-items: flex-start; max-width: 820px; padding: 22px 24px; background: #fff; border-left: 4px solid #b3cc94; }
.founder__photo { flex: 0 0 100px; }
.founder__photo img { display: block; width: 100px; height: 100px; }
.founder__name { margin: 0 0 10px; }
.founder__text p { margin: 0 0 10px; line-height: 1.55; }
.founder__more { margin-top: 6px !important; }
@media (max-width: 640px) { .founder { flex-direction: column; gap: 14px; padding: 18px 16px; } }

/* founder-photo-160 (05.10.2026): більше фото засновника */
.founder__photo { flex: 0 0 160px; }
.founder__photo img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }

/* /ua/clients (05.10.2026): векторні логотипи як на головній, більші */
.clients-grid--page { justify-content: center; gap: 48px 96px; padding: 32px 0; }
.clients-others-title { margin-top: 40px; }
.clients-others { line-height: 1.8; }
@media (max-width: 768px) { .clients-grid--page { gap: 36px 52px; } }

/* clients-left (05.10.2026): логотипи й текст на «Клієнтах» — по лівому краю */
.clients-grid--page { justify-content: flex-start; }
.clients-grid--page .client-grid-logo { justify-content: flex-start; }

/* Зміст сторінки (06.10.2026): відступ від вступного абзацу */
.page-toc { margin-top: 32px; }

/* P1 позиціонування на головній (06.10.2026) */
.section-p1 { padding: 80px 5% 40px 5%; }
.p1-chain { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; counter-reset: p1c; }
.p1-chain li { position: relative; flex: 1 1 0; min-width: 150px; padding: 18px 20px; background: #ffffff; border-left: 8px solid #b3cc94; }
.p1-chain li strong { display: block; text-transform: uppercase; font-size: .875rem; margin-bottom: 6px; }
.p1-chain li span { color: #4a6477; font-size: .9rem; line-height: 1.4; }
.p1-chain li:not(:last-child)::after { content: "→"; position: absolute; right: -9px; top: 16px; color: #a3be74; font-weight: 900; }
.p1-note, .p1-cycle { margin-top: 20px; color: #4a6477; }
.p1-cycle span { color: #a3be74; font-weight: 900; font-size: 1.2em; margin-right: 6px; }
.p1-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.p1-cards li { padding: 18px 20px; background: #fff; border-left: 4px solid #b3cc94; color: #4a6477; line-height: 1.5; }
.p1-cards li strong { color: #090909; }
.p1-steps { margin: 0; padding-left: 1.4em; max-width: 820px; }
.p1-steps li { margin-bottom: 12px; line-height: 1.5; color: #4a6477; padding-left: 4px; }
.p1-steps li strong { color: #090909; }
.p1-steps li::marker { color: #a3be74; font-weight: 900; }
.p1-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; padding-top: 10px; }
.p1-group h3 { font-size: 1rem; font-weight: 900; margin: 0 0 4px; }
.p1-group .what-projects span a { color: inherit; text-decoration: none; }
.p1-group--core .what-projects span { background: #fcfcf5; }
.p1-hint { margin: 10px 0 0; font-size: .85rem; color: #4a6477; }
.p1-models { display: flex; flex-wrap: wrap; gap: 12px; }
.p1-model { flex: 1 1 260px; max-width: 400px; padding: 20px 24px; background: #fff; border-left: 4px solid #b3cc94; }
.p1-model h3 { margin: 0 0 6px; font-size: 1rem; }
.p1-model p { margin: 0; color: #4a6477; }
.p1-model .p1-price { font-size: 1.5rem; font-weight: 900; color: #090909; margin-bottom: 6px; }
.p1-more { margin-top: 16px; }
#home-start .callback-btn { margin-top: 16px; }
.p1-faq { max-width: 820px; }
.p1-faq details { border-bottom: 1px solid #d8e1e7; }
.p1-faq summary { cursor: pointer; padding: 16px 0; font-weight: 700; min-height: 24px; }
.p1-faq details p { margin: 0 0 16px; color: #4a6477; line-height: 1.55; }
.client-grid-logo--key { flex-direction: column; gap: 6px; }
.client-grid-logo__note { font-size: .7rem; color: #4a6477; text-align: center; max-width: 160px; line-height: 1.3; }
.section-advantages .p1-cards { margin-top: 0; }
@media (max-width: 1100px) { .p1-chain li { flex: 1 1 30%; } .p1-chain li:nth-child(3)::after { display: none; } }
@media (max-width: 768px) {
  .section-p1 { padding: 48px 5% 24px 5%; }
  .p1-groups { grid-template-columns: 1fr; }
  .p1-chain li { flex: 1 1 100%; }
  .p1-chain li:nth-child(3)::after { display: block; }
  .p1-chain li:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -15px; }
}

/* Головна — правки за аудитом 06.10.2026 */
.key-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.key-results li { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; background: #fff; border-left: 4px solid #b3cc94; }
.key-results img { height: 28px; width: auto; max-width: 140px; object-fit: contain; object-position: left; margin-bottom: 6px; }
.key-results strong { font-size: 1rem; }
.key-results span { color: #4a6477; line-height: 1.45; }
.p1-proof { margin-top: 16px; padding: 14px 18px; background: #fcfcf5; border-left: 4px solid #b3cc94; max-width: 820px; }
.p1-faq__item { padding: 16px 0; border-bottom: 1px solid #d8e1e7; }
.p1-faq__item h3 { font-size: 1rem; margin: 0 0 8px; }
.p1-faq__item p { margin: 0; color: #4a6477; line-height: 1.55; }

/* table-fit-17.10 (17.10.2026): текст не виходить за межі комірок таблиці */
.comparison-table th,
.comparison-table td {
    padding: 18px 10px 18px 20px;
    font-size: 0.875rem;
    line-height: 1.3rem;
    overflow-wrap: anywhere;
    hyphens: auto;
}
@media (max-width: 768px) {
    .comparison-table th,
    .comparison-table td {
        padding: 14px 8px 14px 16px;
    }
}

/* burger-v2 (18.10.2026): бургер-меню — суцільне світле тло, текст #090909, наведення #b3cc94,
   розділи розгорнуті, групи за правилом близькості. Розмітка — partials/fullscreen-menu.htm. */
.fullscreen-menu.fm {
    display: block;
    background: #f3f3f3;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.fullscreen-menu.fm.active {
    background: #f3f3f3;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}
.fm-inner {
    max-width: 1180px;
    min-height: 100%;
    margin: 0 auto;
    padding: 0 20px 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.fm-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 54px;
    padding: 3px 0;
}
.fm-logo { display: inline-flex; align-items: center; min-height: 44px; }
.fm-logo img { width: 108px; height: auto; display: block; }
.fm .close-btn {
    position: static;
    width: 48px;
    height: 48px;
    margin-right: -12px;
    padding: 0;
    font-size: 40px;
    line-height: 1;
    color: #090909;
    opacity: 1;
    transform: none;
    transition: background-color 0.15s ease;
}
.fm.active .close-btn { transition-delay: 0s; }
.fm .close-btn:hover,
.fm .close-btn:focus-visible { color: #090909; background: #b3cc94; transform: none; }
.fm-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 40px;
    padding-top: 32px;
}
.fm-group {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.fm.active .fm-group { opacity: 1; transform: none; }
.fm-title {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 6px;
    margin-left: -6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #090909;
    text-decoration: none;
}
.fm-list { list-style: none; margin: 0; padding: 0; }
.fm-list a {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 44px;
    margin-left: -12px;
    padding: 0 9px;
    border-left: 3px solid transparent;
    font-size: 20px;
    line-height: 1.2;
    color: #090909;
    text-decoration: none;
}
.fm-title:hover, .fm-title:focus-visible,
.fm-list a:hover, .fm-list a:focus-visible,
.fm-contacts a:hover, .fm-contacts a:focus-visible { background: #b3cc94; color: #090909; outline: none; }
.fm-list a.is-current { border-left-color: #b3cc94; font-weight: 700; }
.fm-badge {
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f3f3f3;
    background: #090909;
}
.fm-foot { margin-top: auto; padding-top: 40px; }
.fm-cta {
    display: block;
    max-width: 360px;
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: #090909;
    background: #b3cc94;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.fm-cta:hover, .fm-cta:focus-visible { color: #f3f3f3; background: #090909; outline: none; }
.fm-contacts { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 12px 0 0; }
.fm-contacts a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 6px;
    margin-left: -6px;
    font-size: 16px;
    color: #090909;
    text-decoration: none;
}
@media (max-width: 960px) {
    .fm-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 32px; }
}
@media (max-width: 768px) {
    .fm-inner { padding: 0 10px 24px; }
    .fm-head { min-height: 50px; }
    .fm .close-btn { margin-right: -6px; }
    .fm-nav { grid-template-columns: 1fr; gap: 0; padding-top: 8px; }
    .fm-group { padding: 24px 0; border-top: 1px solid #d8e1e7; }
    .fm-group:first-child { border-top: 0; padding-top: 16px; }
    .fm-list a { margin-left: -10px; padding: 0 7px; }
    .fm-foot { padding-top: 24px; }
    .fm-cta { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .fullscreen-menu.fm, .fm-group { transition: none; }
}

/* sub-modal-v2 (18.10.2026): вікно «Підписатися» — YouTube + LinkedIn, у стилі сайту.
   Розмітка — partials/modal/youtube-subscribe.htm. z-index вище за шапку (1000), щоб затемнення її накривало. */
.yt-modal { z-index: 1100; background: rgba(9, 9, 9, 0.72); }
.yt-modal__window.sub-modal {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: min(640px, 100%);
    padding: 32px 32px 20px;
    text-align: left;
    background: #f3f3f3;
    border: 0;
    border-top: 4px solid #b3cc94;
    color: #090909;
}
.sub-modal__x {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 48px;
    height: 48px;
    padding: 0;
    font-family: inherit;
    font-size: 36px;
    line-height: 1;
    color: #090909;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.sub-modal__x:hover, .sub-modal__x:focus-visible { background: #b3cc94; outline: none; }
.sub-modal__author { display: flex; align-items: center; gap: 16px; padding-right: 40px; }
.sub-modal__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 64px; }
.sub-modal__label {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4a6477;
}
.sub-modal__title { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.sub-modal__facts { margin: 16px 0 24px; padding: 0; list-style: none; font-size: 0.9375rem; line-height: 1.45; }
.sub-modal__facts li { position: relative; padding-left: 18px; }
.sub-modal__facts li + li { margin-top: 6px; }
.sub-modal__facts li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    background: #b3cc94;
}
.sub-modal__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sub-modal__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: #fcfcf5;
    border: 1px solid #d8e1e7;
}
.sub-modal__logo { display: block; width: auto; height: 25px; }
.sub-modal__what { margin: 0; font-size: 0.875rem; line-height: 1.45; flex: 1; }
.sub-modal__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 12px;
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: center;
    color: #f3f3f3;
    background: #090909;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sub-modal__btn:hover, .sub-modal__btn:focus-visible { color: #090909; background: #b3cc94; outline: none; }
.sub-modal__later {
    display: block;
    min-height: 44px;
    margin: 8px auto 0;
    padding: 0 16px;
    font-family: inherit;
    font-size: 0.875rem;
    color: #5b778c;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.sub-modal__later:hover, .sub-modal__later:focus-visible { color: #090909; text-decoration: underline; outline: none; }
@media (max-width: 600px) {
    .yt-modal:not([hidden]) { padding: 10px; }
    .yt-modal__window.sub-modal { padding: 18px 14px 6px; max-height: calc(100dvh - 20px); }
    .sub-modal__author { gap: 12px; }
    .sub-modal__photo { width: 52px; height: 52px; flex-basis: 52px; }
    .sub-modal__title { font-size: 1.2rem; }
    .sub-modal__facts { margin: 12px 0 14px; font-size: 0.8125rem; line-height: 1.4; }
    .sub-modal__facts li + li { margin-top: 4px; }
    .sub-modal__cols { grid-template-columns: 1fr; gap: 8px; }
    .sub-modal__col { gap: 8px; padding: 12px; }
    .sub-modal__logo { height: 22px; }
    .sub-modal__what { font-size: 0.8125rem; line-height: 1.35; }
    .sub-modal__btn { min-height: 44px; font-size: 0.875rem; }
    .sub-modal__later { margin-top: 2px; }
}

/* li-gap 25.10.2026: відступ між пунктами текстових списків трохи більший за міжрядковий */
ul:not([class]) > li + li,
ol:not([class]) > li + li,
ol.page-ol > li + li { margin-top: .45rem; }

/* header-white 25.10.2026: смуга з лого — біла, щільно до верху, тонка межа знизу */
header { padding: 0; }
.navbar { background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid #d8e1e7; }

/* cta-swap 25.10.2026: заклики з рішенням — тихі (контур), легкі дії без зобов'язань — помітні */
.callback-btn:hover, .callback-btn:focus-visible { color: #090909; border-color: #090909; background-color: #ffffff; text-decoration: none; outline: none; }
.callback-btn--primary { background: transparent; border-color: #a3be74; color: #a3be74; }
.callback-btn--primary:hover, .callback-btn--primary:focus-visible { background: #ffffff; border-color: #090909; color: #090909; }
.callback-btn--easy { background: #b3cc94; border-color: #b3cc94; color: #090909; }
.callback-btn--easy:hover, .callback-btn--easy:focus-visible { background: #090909; border-color: #090909; color: #ffffff; }
.fm-cta { background: transparent; color: #a3be74; border: 1.5px solid #a3be74; font-weight: 600; }
.fm-cta:hover, .fm-cta:focus-visible { background: transparent; color: #090909; border-color: #090909; outline: none; }

/* hidden-links 26.10.2026: кнопки-посилання виглядають як посилання */
.js-go { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: inherit; line-height: inherit; }
footer button.footer-link { display: inline-block; box-sizing: border-box; min-height: 48px; margin: 0; padding: 7px 12px; border: 10px solid transparent; background: #ffffff; background-clip: padding-box; color: #090909; font-size: .625rem; line-height: 14px; text-transform: uppercase; font-weight: 500; }
footer button.footer-link:hover, footer button.footer-link:focus-visible { background: #b3cc94; background-clip: padding-box; color: #090909; outline: none; }
.social-btn { display: inline-flex; align-items: center; justify-content: center; }
.contacts-legal { margin: 16px 0 0; }

/* footer-v2 26.10.2026: один підвал — бренд і соцмережі / розділи / контакти + нижній рядок */
footer.site-footer { background: #ffffff; color: #090909; padding: 56px 5% 32px; border-top: 1px solid #d8e1e7; }
footer.site-footer p, footer.site-footer a { font-size: inherit; line-height: inherit; text-transform: none; font-weight: inherit; color: inherit; margin: 0; }
footer.site-footer .sf-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px 56px; max-width: 1200px; }
footer.site-footer .sf-col { font-size: .875rem; line-height: 1.5; }
footer.site-footer .sf-label { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: #a3be74; margin: 0 0 12px; font-weight: 600; }
footer.site-footer .sf-about { color: #4a6477; margin: 16px 0 28px; max-width: 360px; }
footer.site-footer ul { list-style: none; margin: 0; padding: 0; }
footer.site-footer li { margin: 0; }
footer.site-footer .sf-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
footer.site-footer .sf-nav a, footer.site-footer .sf-contacts a:not(.sf-icon) { display: inline-block; padding: 4px 0; color: #090909; overflow-wrap: anywhere; text-decoration: none; border-bottom: 1px solid transparent; }
footer.site-footer .sf-nav a:hover, footer.site-footer .sf-contacts a:not(.sf-icon):hover, footer.site-footer .sf-nav a:focus-visible { border-bottom-color: #090909; text-decoration: none; }
footer.site-footer .sf-city { color: #4a6477; padding: 5px 0; }
footer.site-footer .sf-city strong { color: #090909; font-weight: 600; margin-right: 6px; }
footer.site-footer .sf-icons, footer.site-footer .sf-msg { display: flex; flex-wrap: wrap; gap: 4px; }
footer.site-footer .sf-msg { margin: 6px 0 10px; }
footer.site-footer .sf-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #a3be74; background: none; border: 0; padding: 0; cursor: pointer; transition: background-color .15s, color .15s; }
footer.site-footer .sf-icon .social-icon { width: 20px; height: 20px; }
footer.site-footer .sf-icon:hover, footer.site-footer .sf-icon:focus-visible { background: #b3cc94; color: #090909; outline: none; }
footer.site-footer .sf-more { margin-top: 8px; color: #4a6477 !important; }
footer.site-footer .sf-bottom { max-width: 1200px; margin-top: 48px; padding-top: 20px; border-top: 1px solid #e7ecef; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: .75rem; line-height: 1.5; color: #4a6477; }
footer.site-footer .sf-bottom a, footer.site-footer .sf-bottom .js-go { color: #4a6477; text-decoration: none; border-bottom: 1px solid transparent; padding: 4px 0; font-size: inherit; text-transform: none; text-align: left; }
footer.site-footer .sf-bottom a:hover, footer.site-footer .sf-bottom .js-go:hover, footer.site-footer .sf-bottom .js-go:focus-visible { color: #090909; border-bottom-color: #090909; outline: none; }
footer.site-footer .sf-bottom span { padding: 4px 0; }
@media (max-width: 900px) { footer.site-footer .sf-grid { grid-template-columns: 1fr 1fr; } footer.site-footer .sf-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { footer.site-footer { padding: 40px 16px 24px; } footer.site-footer .sf-grid { grid-template-columns: 1fr; gap: 32px; } footer.site-footer .sf-bottom { flex-direction: column; align-items: flex-start; gap: 2px; } }

/* lw2 26.10.2026: блоки перелінковки — «Послуги / Читайте також» у статтях, «Послуга» в термінах */
.article-more { margin: 32px 0 24px; padding: 16px 20px; background: #ffffff; border-left: 4px solid #b3cc94; line-height: 1.6; }
.article-more p { margin: 4px 0; }
.term-related { margin-top: 24px; padding-top: 12px; border-top: 1px solid #d8e1e7; }

/* audit-sample 28.10.2026: фрагмент звіту на сторінці аудиту — відступи заголовків і абзаців (глобальний reset обнуляє margin) */
.audit-sample h4 { margin: 28px 0 10px; font-size: 1.25rem; line-height: 1.3; }
.audit-sample h4:first-of-type { margin-top: 20px; }
.audit-sample p { margin: 0 0 10px; line-height: 1.6; }
.audit-sample p:last-child, .audit-sample ol:last-child { margin-bottom: 0; }
.audit-sample ol, .audit-sample ul { margin: 0 0 10px; padding-left: 1.8em; }
/* ol-mobile 28.10.2026: на телефоні номер «1.» (~29 px) ширший за поле сторінки (~19 px) — номери нумерованих списків обрізались; на десктопі лишаємо «висячі» номери */
@media (max-width: 768px) { .page-content ol.page-ol, .page-content ol:not([class]) { padding-left: 1.6em; } }

/* seo-check 28.10.2026: інструмент «Перевірка сайту на SEO і ШІ-готовність» (/ua/tools/seo-check) */
.seo-check { margin: 28px 0; }
.seo-check__lead { font-size: 1.05rem; color: #4a6477; max-width: 760px; }
.seo-check__form { background: #ffffff; border-left: 4px solid #b3cc94; padding: 20px; }
.seo-check__label { display: block; font-weight: 600; margin: 0 0 8px; }
.seo-check__row { display: flex; gap: 10px; flex-wrap: wrap; }
.seo-check__row input { flex: 1 1 260px; min-width: 0; font: inherit; padding: 12px 14px; border: 1px solid #d8e1e7; background: #fff; color: #090909; }
.seo-check__row input:focus { outline: 2px solid #b3cc94; outline-offset: 1px; }
.seo-check__row button { flex: 0 0 auto; margin: 0; padding: 14px 32px; cursor: pointer; }
.seo-check__row button[disabled] { opacity: .6; cursor: wait; }
.seo-check__hint { font-size: .85rem; color: #4a6477; margin: 10px 0 0; }
.seo-check__status { margin: 14px 0 0; color: #4a6477; min-height: 1.4em; }
.seo-check__result h3 { margin: 28px 0 12px; font-size: 1.25rem; line-height: 1.3; }
.seo-check__summary { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; background: #fff; padding: 20px; margin-top: 18px; }
.seo-check__summary p { margin: 4px 0; color: #4a6477; }
.seo-check__checked span { color: #090909; overflow-wrap: anywhere; }
.seo-check__score { width: 104px; height: 104px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 6px solid; flex: 0 0 auto; }
.seo-check__score b { font-size: 2.2rem; line-height: 1; }
.seo-check__score span { font-size: .75rem; color: #4a6477; }
.seo-check__score--ok { border-color: #a3be74; }
.seo-check__score--warn { border-color: #f0c34a; }
.seo-check__score--fail { border-color: #d9534f; }
.seo-check__top { padding-left: 1.8em; margin: 0; }
.seo-check__top li { margin: 0 0 12px; line-height: 1.55; }
.seo-check__top li.is-fail::marker { color: #d9534f; font-weight: 700; }
.seo-check__top li.is-warn::marker { color: #c99a1a; font-weight: 700; }
.seo-check__fix { color: #4a6477; }
.seo-check__cta { background: #fcfcf5; border-left: 4px solid #b3cc94; padding: 16px 20px; margin: 24px 0 8px; }
.seo-check__cta p { margin: 0 0 10px; }
.seo-check__cta p:last-child { margin: 0; }
.seo-check__block { background: #fff; margin: 0 0 8px; padding: 0 16px; }
.seo-check__block summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.seo-check__block ul { list-style: none; padding: 0 0 12px; margin: 0; }
.seo-check__block li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid #eef1f3; line-height: 1.5; }
.seo-check__icon { flex: 0 0 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: #fff; margin-top: 2px; }
.seo-check__block li.is-ok .seo-check__icon { background: #a3be74; }
.seo-check__block li.is-warn .seo-check__icon { background: #c99a1a; }
.seo-check__block li.is-fail .seo-check__icon { background: #d9534f; }
.seo-check__block li.is-na .seo-check__icon { background: #9aa9b3; }
@media (max-width: 560px) { .seo-check__row button { width: 100%; } .seo-check__summary { padding: 16px; } }

/* h1-small 28.10.2026: на телефонах до 360 px (iPhone SE та ін.) довгі слова H1 («готовність», «маркетингу») розривались по літерах — зменшуємо H1 */
@media (max-width: 360px) { .page-content h1 { font-size: 2.5rem; } }

/* line-height 30.10.2026: щільніше всередині блоків, більше повітря навколо (рішення власника) */
/* списки, картки, модалка, підвал — 1.3 */
ul:not([class]) > li, ol:not([class]) > li, ol.page-ol > li, ul.page-ul > li,
.services li, .advantages-list li, .contacts-ul li,
.p1-cards li, .p1-steps li, .p1-chain li span, .key-results span,
.term-card__text, .review-card__text, .founder__text p,
.p1-faq details p, .p1-faq__item p,
.sub-modal__facts, .sub-modal__facts li, .sub-modal__what, .yt-modal__text, .yt-modal__text p,
.note p, .note li, .p1-model p, .p1-note, .p1-proof, .p1-cycle,
.seo-check__top li, .seo-check__block li,
.comparison-table td,
footer.site-footer .sf-col, footer.site-footer .sf-col li, footer.site-footer .sf-bottom { line-height: 1.3; }
/* заголовки H3 і шапки таблиць — щільно (було 1.5rem = 24 px) */
h3 { line-height: 1.25; }
th, .comparison-table th { line-height: 1.3; }
/* довгий текст для читання — 1.45 */
.content-inner, .content-inner p, .content-inner li, .audit-sample p, .article-more, .article-more p, .article-more li,
.vrizka-center, .vrizka-center p, .vrizka-float-right, .vrizka-float-right p, .vrizka-float-left, .vrizka-float-left p { line-height: 1.45; }
.press-plain, .clients-others { line-height: 1.5; }
.article-figure figcaption { line-height: 1.35; }
/* повітря навколо текстових списків */
ul:not([class]), ol:not([class]), ol.page-ol, ul.page-ul { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.sub-modal__facts { margin: 20px 0 32px; }
@media (max-width: 600px) { .sub-modal__facts { margin: 14px 0 20px; } }

/* Кнопки й поля форм — шрифт сторінки, не системний Arial (30.10.2026) */
button, input, select, textarea { font-family: inherit; }

/* Моноширинний Geist Mono — лише акценти (30.10.2026) */
/* v2: + кнопки CTA і модалки, мітки, теги портфоліо, хлібні крихти, назви груп послуг, службові кнопки підвалу */
.section-subtitle,
.term-card__label,
.review-card__label,
footer.site-footer .sf-label,
footer button.footer-link,
.button,
.callback-btn,
.sub-modal__btn,
.sub-modal__later,
.sub-modal__label,
.tag,
.breadcrumb,
.lw2,
code, kbd, pre, samp {
  font-family: "Geist Mono", "Courier New", monospace;
}

/* seo-check v1.1 04.11.2026: трудомісткість і блок «Чого не бачить» */
.seo-check__effort { display: inline-block; margin-top: 4px; font-size: .85em; color: #6b7c88; background: #eef2f4; border-radius: 3px; padding: 1px 6px; }
.seo-check__blind { background: #f6f8f9; border-left: 4px solid #9aa9b3; padding: 16px 20px; margin: 24px 0 8px; }
.seo-check__blind h3 { margin-top: 0; }
.seo-check__blind ul { margin: 8px 0; padding-left: 20px; }
.seo-check__blind p:last-child { margin-bottom: 0; }

/* sub-modal-close-v3 11.11.2026: великі кнопки закриття вікна «Підписатися» (code/sub_modal_close_v3.py) */
.yt-modal__window.sub-modal { padding-bottom: 24px; }
.sub-modal__x {
    top: 32px; right: 32px; width: 86px; height: 86px;
    font-size: 52px; background: rgba(179, 204, 148, 0.45);
}
.sub-modal__author { padding-right: 104px; }
.sub-modal__later {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 64px; margin: 16px 0 0; padding: 0 16px;
    font-size: 1rem; font-weight: 700; color: #090909;
    background: rgba(179, 204, 148, 0.45); border: 0;
    transition: background-color 0.15s ease;
}
.sub-modal__later:hover, .sub-modal__later:focus-visible { background: #b3cc94; text-decoration: none; }
.sub-modal__esc { margin: 8px 0 0; font-size: 11px; line-height: 1.3; text-align: center; color: #5b778c; }
@media (hover: none) and (pointer: coarse) { .sub-modal__esc { display: none; } }
@media (max-width: 600px) {
    .yt-modal__window.sub-modal { padding-bottom: 14px; }
    .sub-modal__x { top: 18px; right: 14px; width: 73px; height: 73px; font-size: 44px; }
    .sub-modal__author { padding-right: 83px; }
    .sub-modal__later { min-height: 56px; margin-top: 10px; }
}

.portfolio-container
{
/* Компенсируем отступы между float-блоками, чтобы они занимали все доступное пространство */
margin: -3em 0 0 -2em;

/* Выравнивание по центру */
text-align: center;
}

@media (max-width: 768px) {
.portfolio-container
{
/* Компенсируем отступы между float-блоками, чтобы они занимали все доступное пространство */
margin: 0 auto;
width: 100%;
    

/* Выравнивание по центру */
text-align: center;
}
}

.portfolio-item
{
/* Убираем подчеркивание у элемента ins,
который был использован для совместимости со старыми версиями Internet Explorer */
text-decoration: none;

/* Следующее правило для Firefox 2 */
display: -moz-inline-box;

/* а это для остальных */
display: inline-block;

vertical-align: top;

/* Убираем выравнивание по центру */
text-align: left;

/* Отступы между блоками */
margin: 3em 0 0 2em;
}

@media (max-width: 768px) {
.portfolio-item
{
/* Убираем подчеркивание у элемента ins,
который был использован для совместимости со старыми версиями Internet Explorer */
text-decoration: none;

/* Следующее правило для Firefox 2 */
display: -moz-inline-box;

/* а это для остальных */
display: inline-block;

vertical-align: top;

/* Убираем выравнивание по центру */
text-align: left;

/* Отступы между блоками */
margin: 3em auto 0 auto;
}
}

.portfolio-item .port-preview
{
/* Если есть необходимость, то свойства padding, border, background и position со значением relative
лучше задавать у этого элемента -- это несколько расширит количество поддерживаемых версий браузеров */

/* Задаем минимальную ширину по тексту */
width: 36em;

/* Минимальная ширина в пикселях будет автоматически рассчитываться по ширине картинки */
float: left;
}

.portfolio-preview-title {
    display: block;
    font-weight: 600;
    line-height: 1.2em;
    color: #151515;
	margin: 0.3em auto 0.2em;
}
/*
@media (min-width: 1441px) {
.portfolio-item .port-preview
{
width: 36em;  
float: left;
}
    }
 */

@media (max-width: 1920px) {
.portfolio-item .port-preview
{
width: 34em;  
float: left;
}
    }

@media (max-width: 1600px) {
.portfolio-item .port-preview
{
width: 30em;  
float: left;
}
    }

@media (max-width: 1440px) {
.portfolio-item .port-preview
{
width: 26em;  
float: left;
}
    }
@media (max-width: 1366px) {
.portfolio-item .port-preview
{
width: 24em;  
float: left;
}
    }
@media (max-width: 1280px) {
.portfolio-item .port-preview
{
width: 18em;  
float: left;
}
@media (max-width: 768px) {
.portfolio-item .port-preview
{
width: 100%;
float: left;
}
    }



.clients-container
{
/* Компенсируем отступы между float-блоками, чтобы они занимали все доступное пространство */
margin: -1em 0 0 -2em;

/* Выравнивание по центру */
text-align: center;
}

@media (max-width: 768px) {
.clients-container
{
/* Компенсируем отступы между float-блоками, чтобы они занимали все доступное пространство */
margin: 0 auto;
width: 100%;
    

/* Выравнивание по центру */
text-align: center;
}
}

/* Стилі для превью статтей*/
.portfolio-item .clients-preview
{
width: 17em;  
float: left;
}

@media (max-width: 1440px) {
.portfolio-item .clients-preview
{
width: 17em;  
float: left;
}
    }
@media (max-width: 1366px) {
.portfolio-item .clients-preview
{
width: 17em;  
float: left;
}
    }
@media (max-width: 1024px) {
.portfolio-item .clients-preview
{
width: 13em;  
float: left;
}
    }
@media (max-width: 768px) {
.portfolio-item .clients-preview
{
width: 100%;
margin-left: auto;
margin-right: auto;
float: left;
}
    }