/* ============================================================================
   Bestia — AI page template styles
   Converted from SASS → CSS, class changed: page-template-page-homepage → page-template-page-ai

   ПРИМІТКА:
   Оригінал користується SCSS-змінними (vars.$*) та міксинами (+mixin-name).
   У цьому файлі вони розгорнуті у звичайний CSS. Якщо ваші оригінальні значення
   інші — замініть у змінних :root на початку.
   ============================================================================ */

:root {
    --c-white: #FEFEFF;
    --c-blue: #4D61FF;
    --c-gray: #6b7280;
    --c-dark-gray: #333333;
}


.fade-in {
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
    animation-delay: 1s;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* ---------- Base ----------------------------------------------------------- */
body.page-template-page-ai .site-info {
    padding-top: 245px;
}
body.page-template-page-ai h2 {
    font-size: 48px;
    font-weight: 600;
    line-height: normal;
}
body.page-template-page-ai p {
    margin: 0;
}


/* ---------- Slick: progress bar -------------------------------------------- */
body.page-template-page-ai .slick-progress-track {
    width: 100%;
    height: 3px;
    background-color: #DAE2FF;
    position: relative;
    border-radius: 10px;
}
body.page-template-page-ai .slick-progress-fill {
    width: 180px;
    height: 5px;
    border-radius: 10px;
    background: #7166F9;
    position: absolute;
    top: -1px;
    transition: left 0.3s ease;
    cursor: pointer;
}
body.page-template-page-ai .slick-progress-fill::before {
    content: "";
    position: absolute;
    top: -13px;
    left: -10px;
    right: -10px;
    bottom: 0;
    height: 30px;
}

body.page-template-page-ai .slick-arrow-custom.disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* ---------- Slick: arrows --------------------------------------------------- */
body.page-template-page-ai .slick-arrow {
    top: auto;
    bottom: 40px;
    z-index: 1;
    width: 24px;
    height: 24px;
    margin: 9px;
}
body.page-template-page-ai .slick-arrow::before {
    display: none;
}
body.page-template-page-ai .slick-next {
    right: 43%;
}
body.page-template-page-ai .slick-prev {
    left: 43%;
    bottom: 45px;
}

body.page-template-page-ai .blog-header-mobile {
    display: none;
}


/* ============================================================================
   HEADER / HERO — оновлено під дизайн Figma (1920×625)
   ============================================================================ */
body.page-template-page-ai .header-block {
    background-image: var(--bg-desktop);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    padding-top: 150px;       /* було 160px — зменшено, щоб секція відповідала ~625px макета */
    padding-bottom: 60px;     /* було 120px — ratings винесені вниз справа, під картинку */
    min-height: 625px;        /* висота hero як у дизайні */
}

/* Achievement / Ratings pills — тепер горизонтальні картки внизу hero */
body.page-template-page-ai .header-block .achievement-inner {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding-top: 24px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}
@media (max-width: 768px) {
    body.page-template-page-ai .header-block .achievement-inner {
        justify-content: flex-start;
        padding-top: 12px;
        gap: 12px;
        flex-wrap: nowrap;
    }
}

/* --- Achievement card (Clutch / Google) --- */
/* У дизайні: біла pill-картка, logo ліворуч, stars праворуч, score під ними справа */
body.page-template-page-ai .header-block .achievement-inner {
    flex-direction: row;
    gap: 40px;
    padding-top: 35px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}
@media (max-width: 768px) {
    body.page-template-page-ai .header-block .achievement-inner {
        justify-content: flex-start;
        padding-top: 12px;
        gap: 16px;
        flex-wrap: nowrap;
    }
}

body.page-template-page-ai .header-block .achievement-inner .achievement-block {
    padding: 13px 20px;
    border-radius: 20px;
    max-width: 231px;
    width: 100%;
}
body.page-template-page-ai .header-block .achievement-inner .achievement-block .logo {
    width: 95px;
    height: 25px;
}
body.page-template-page-ai .header-block .achievement-inner .achievement-block .score {
    font-size: 12px;
    gap: 4px;
}
body.page-template-page-ai .header-block .achievement-inner .achievement-block .score .stars svg {
    width: 12px;
    height: 20px;
}

@media (max-width: 768px) {
    body.page-template-page-ai .header-block .achievement-inner .achievement-block {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 12px;
        padding: 10px 7px;
    }
    body.page-template-page-ai .header-block .achievement-inner .achievement-block .logo {
        width: 60px;
        height: 19px;
    }
    body.page-template-page-ai .header-block .achievement-inner .achievement-block .score {
        font-weight: 400;
        font-size: 8px;
        line-height: normal;
        color: rgba(51, 51, 51, 1);
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    body.page-template-page-ai .header-block .achievement-inner .achievement-block .score .stars {
        display: flex;
        align-items: center;
        gap: 2px;
    }
    body.page-template-page-ai .header-block .achievement-inner .achievement-block .score .stars svg {
        width: 8px;
        height: 8px;
    }
}

/* --- Header block inner layout --- */
body.page-template-page-ai .header-block .header-block-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
}
@media (min-width: 1024px) {
    body.page-template-page-ai .header-block .header-block-inner {
        justify-content: space-between;
    }
}

/* --- Text block --- */
body.page-template-page-ai .header-block .header-block-inner .text-block {
    color: var(--c-white);
    padding-top: 0;
    max-width: 680px;
    flex: 1 1 auto;
}
body.page-template-page-ai .header-block .header-block-inner .text-block h1 {
    font-size: 40px;             /* було 53px — менший за дизайном */
    font-weight: 600;
    line-height: 120%;           /* було 73px — тісніший */
    padding-bottom: 24px;        /* було 30px */
    margin: 0;
}
body.page-template-page-ai .header-block .header-block-inner .text-block h2 {
    font-size: 32px;             /* було 48px (неправильно!) — у дизайні підзаголовок ~26-28px */
    font-weight: 600;
    line-height: 1.3;
    padding-bottom: 28px;        /* було 24px */
    margin: 0;
}
body.page-template-page-ai .header-block .header-block-inner .text-block p:not(:last-child) {
    font-size: 20px;             /* було 24px — менший */
    font-style: normal;
    font-weight: 400;
    line-height: 1.6;
    padding-bottom: 48px;        /* було 80px */
    max-width: 600px;
    margin: 0;
}
body.page-template-page-ai .b-about__text {
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
body.page-template-page-ai .b-about__text p+p {
    margin-top: 24px;
}

/* --- Button (AUDIT MY BUSINESS FOR AI AUTOMATION) --- */
body.page-template-page-ai .header-block .header-block-inner .text-block p a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #4d61ff;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    border-radius: 10px;
    padding: 13px;
    background: #fefeff;
    transition: all .5s;
    max-width: 420px;
    height: 50px;
    position: relative;
    border-top: 1px solid var(--Bestia-stroke-what-our, #e4ecfe);
    border-right: 1px solid var(--Bestia-stroke-what-our, #e4ecfe);
    border-bottom: 2px solid var(--Bestia-stroke-what-our, #e4ecfe);
    border-left: 1px solid var(--Bestia-stroke-what-our, #e4ecfe);
    box-shadow: 0 15px 7px -11px rgba(79, 12, 222, .57);
}
body.page-template-page-ai .header-block .header-block-inner .text-block p a:hover {
    border-top: 1px solid var(--Bestia-stroke-button, #8a97ff);
    border-right: 1px solid var(--Bestia-stroke-button, #8a97ff);
    border-bottom: 2px solid var(--Bestia-stroke-button, #8a97ff);
    border-left: 1px solid var(--Bestia-stroke-button, #8a97ff);
    background: var(--Bestia-blue, #4d61ff);
    color: #fefeff;
    justify-content: center;
    gap: 0;
}
body.page-template-page-ai .header-block .header-block-inner .text-block p a:hover img {
    visibility: hidden;
    opacity: 0;
    width: 0;
    transition: all .5s;
}
body.page-template-page-ai .header-block .header-block-inner .text-block p a img {
    width: 30px;
}


/* --- Image block (правий блок з ілюстрацією + ratings) --- */
body.page-template-page-ai .header-block .header-block-inner .image-block {
    width: 100%;
    max-width: 870px;            /* було 673 — ілюстрація у дизайні ширша */
    height: auto;
    max-height: none;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
body.page-template-page-ai .header-block .header-block-inner .image-block > img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    display: block;
}


/* ============================================================================
   CLIENT LOGOS
   ============================================================================ */
body.page-template-page-ai .client-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 40px;
    column-gap: 120px;
    row-gap: 40px;
}
body.page-template-page-ai .client-logos .slick-track {
    display: flex;
    align-items: center;
    justify-content: center;
}
body.page-template-page-ai .client-logos .slick-track .logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================================
   D-FLEX wrapper
   ============================================================================ */
body.page-template-page-ai .d-flex {
    flex-direction: column;
    /*row-gap: 40px;*/
}


/* ============================================================================
   ABOUT US
   ============================================================================ */
body.page-template-page-ai .about-us {
    padding-top: 80px;
    padding-bottom: 80px;
}
body.page-template-page-ai .about-us .text-block {
    text-align: center;
}
body.page-template-page-ai .about-us .text-block p {
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    max-width: 1344px;
    margin: 0 auto;
}

body.page-template-page-ai .about-us .about-us-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 85px;
    padding-top: 64px;
}

/* ---- Left section ---- */
body.page-template-page-ai .about-us .about-us-container .left-section {
    min-width: 0;
    width: 100%;
}
body.page-template-page-ai .about-us .about-us-container .left-section .left-image {
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease;
}
body.page-template-page-ai .about-us .about-us-container .left-section .left-image.slick-initialized {
    opacity: 1;
    visibility: visible;
}
body.page-template-page-ai .about-us .about-us-container .left-section .left-image.slick-initialized img {
    width: 100%;
    object-fit: cover;
    max-height: 495px;
    border-radius: 40px;
    border-top: 2px solid #c7d7fd;
    border-right: 1px solid #c7d7fd;
    border-bottom: 1px solid #c7d7fd;
    border-left: 1px solid #c7d7fd;
    box-sizing: border-box;
    box-shadow: 0px 48px 18px -38px #7398E46E;
}

/* Counters */
body.page-template-page-ai .about-us .about-us-container .left-section .counters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 27px;
    column-gap: 40px;
    padding-top: 63px;
}
body.page-template-page-ai .about-us .about-us-container .left-section .counters .counter-item:nth-child(1)::after { background-color: #7166F9; }
body.page-template-page-ai .about-us .about-us-container .left-section .counters .counter-item:nth-child(2)::after { background-color: #7166F9; }
body.page-template-page-ai .about-us .about-us-container .left-section .counters .counter-item:nth-child(3)::after { background-color: #FD7A72; }
body.page-template-page-ai .about-us .about-us-container .left-section .counters .counter-item:nth-child(4)::after { background-color: #FD7A72; }
body.page-template-page-ai .about-us .about-us-container .left-section .counters .counter-item:nth-child(5)::after { background-color: #17C7EE; }
body.page-template-page-ai .about-us .about-us-container .left-section .counters .counter-item:nth-child(6)::after { background-color: #17C7EE; }

body.page-template-page-ai .about-us .about-us-container .left-section .counters .counter-item {
    display: grid;
    position: relative;
    max-width: 250px;
}
body.page-template-page-ai .about-us .about-us-container .left-section .counters .counter-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
}
body.page-template-page-ai .about-us .about-us-container .left-section .counters .counter-item .counter-number {
    font-size: 48px;
    font-weight: 600;
    line-height: normal;
}
body.page-template-page-ai .about-us .about-us-container .left-section .counters .counter-item .counter-text {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* ---- Right section ---- */
body.page-template-page-ai .about-us .about-us-container .right-section {
    display: grid;
    row-gap: 50px;
    max-width: 700px;
}
body.page-template-page-ai .about-us .about-us-container .right-section .right-block img {
    padding-bottom: 30px;
}
body.page-template-page-ai .about-us .about-us-container .right-section .right-block .right-text h3 {
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 12px;
}
body.page-template-page-ai .about-us .about-us-container .right-section .right-block .right-text p {
    margin: 0;
    max-width: 474px;
}

body.page-template-page-ai .about-us .slick-track {
    padding-bottom: 48px;
}
@media (max-width: 768px) {
    body.page-template-page-ai .about-us .slick-track {
        padding-bottom: 33px;
    }
}


/* ============================================================================
   FEATURES BLOCK
   ============================================================================ */
body.page-template-page-ai .features-block {
    margin-top: 80px;
    padding: 80px 0;
    background: linear-gradient(342deg, #F4F8FF 16.84%, #EEF3FE 89.25%);
}
body.page-template-page-ai .features-block .features-intro h2 {
    padding-bottom: 10px;
}
body.page-template-page-ai .features-block .features-intro p {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    max-width: 920px;
    margin: 0 auto;
}

body.page-template-page-ai .features-block .features-grid.slick-loaded {
    visibility: visible;
    opacity: 1;
}
body.page-template-page-ai .features-block .features-grid {
    padding-top: 64px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}
body.page-template-page-ai .features-block .features-grid .slick-list {
    height: 404px;
    margin: 0 -20px;
    padding: 0 0 58px 0 !important;
}
body.page-template-page-ai .features-block .features-grid .slick-center {
    border-top: 2px solid #FFFFFF !important;
    border-right: 1px solid #FFFFFF !important;
    border-bottom: 1px solid #FFFFFF !important;
    border-left: 1px solid #FFFFFF !important;
    background: #F8F8F8;
    box-shadow: -2px -2px 13px 0px rgba(255, 255, 255, 0.40), 0px 48px 18px -38px rgba(115, 152, 228, 0.43);
}

/* Feature item (розгорнутий міксин +features-item-border) */
body.page-template-page-ai .features-block .features-grid .feature-item {
    height: 347px;
    max-height: 100%;
    padding: 50px 45px;
    margin-right: 20px;
    margin-left: 20px;
    box-sizing: border-box;

    /* +features-item-border */
    border-top: 2px solid #c7d7fd;
    border-right: 1px solid #c7d7fd;
    border-bottom: 1px solid #c7d7fd;
    border-left: 1px solid #c7d7fd;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.5);
}
body.page-template-page-ai .features-block .features-grid .feature-item .feature-image {
    display: flex;
    padding-bottom: 31px;
}
body.page-template-page-ai .features-block .features-grid .feature-item .feature-image img {
    height: 60px;
    width: 60px;
}
body.page-template-page-ai .features-block .features-grid .feature-item h3 {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 10px;
}
body.page-template-page-ai .features-block .features-grid .feature-item p {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ============================================================================
   SPECIALIZE BLOCK
   ============================================================================ */
body.page-template-page-ai .specialize-block {
    padding-top: 80px;
    padding-bottom: 60px;
    margin-bottom: 80px;
    position: relative;
}
body.page-template-page-ai .specialize-block::after {
    content: "";
    position: absolute;
    background: url("/wp-content/themes/bestia/assets/images/left-side.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    z-index: -1;
    width: 151px;
    height: 445px;
    bottom: 30px;
    top: auto;
    left: 151px;
}
body.page-template-page-ai .specialize-block::before {
    content: "";
    position: absolute;
    background: url("/wp-content/themes/bestia/assets/images/right-side.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    z-index: -1;
    width: 151px;
    height: 445px;
    bottom: 30px;
    top: auto;
    right: 151px;
}

body.page-template-page-ai .specialize-block .specialize-items {
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(3, 132px);
    gap: 20px;
    padding-top: 64px;
    padding-bottom: 80px;
    margin-right: auto;
    margin-left: auto;
    border-bottom: 3px solid #C2D8FF;
    max-width: 1190px;
}

body.page-template-page-ai .specialize-block .specialize-items .specialize-item {
    align-items: center;
    border-radius: 15px;
    width: 100%;
    max-width: 282px;
    height: 282px;
    display: flex;
    justify-content: center;
    text-align: center;
}
body.page-template-page-ai .specialize-block .specialize-items .specialize-item h4 {
    color: var(--c-white);
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: 0 20px;
}

body.page-template-page-ai .specialize-block .specialize-items .specialize-item:nth-child(1) { background: #FD7A72; }
body.page-template-page-ai .specialize-block .specialize-items .specialize-item:nth-child(2) { background: #73D896; height: 135px; }
body.page-template-page-ai .specialize-block .specialize-items .specialize-item:nth-child(3) { background: #4D61FF; }
body.page-template-page-ai .specialize-block .specialize-items .specialize-item:nth-child(4) { background: #73D896; height: 135px; }
body.page-template-page-ai .specialize-block .specialize-items .specialize-item:nth-child(5) {
    background: #73D896;
    height: 135px;
    grid-row: 3 / 4;
    grid-column: 1 / 2;
}
body.page-template-page-ai .specialize-block .specialize-items .specialize-item:nth-child(6) {
    background: #17C7EE;
    grid-column: 2 / 3;
}
body.page-template-page-ai .specialize-block .specialize-items .specialize-item:nth-child(7) {
    background: #73D896;
    height: 135px;
    grid-row: 3 / 4;
    grid-column: 3 / 4;
}
body.page-template-page-ai .specialize-block .specialize-items .specialize-item:nth-child(8) {
    background: #FF8A00;
    grid-column: 4 / 5;
}


/* ============================================================================
   DEVELOPMENT BLOCK
   ============================================================================ */
body.page-template-page-ai .development-block {
    padding: 80px 0;
    background: linear-gradient(107deg, #E4ECFE 14.22%, #FFF 89.67%);
    max-height: 100%;
    height: 740px;
}
body.page-template-page-ai .development-block .development-block-container {
    max-width: 1436px;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}
body.page-template-page-ai .development-block .development-block-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 40px;
}

body.page-template-page-ai .development-block .development-block-inner .development-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 800px;
    width: 100%;
}
body.page-template-page-ai .development-block .development-block-inner .development-categories .development-category {
    max-width: 240px;
    width: 100%;
}

/* active state */
body.page-template-page-ai .development-block .development-block-inner .development-categories .development-category.active .category-background {
    background-image: url("/wp-content/themes/bestia/assets/images/category-bg-active.png") !important;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    pointer-events: none;
    background: #F8F8F8;
    box-shadow: -2px -2px 13px 0px rgba(255, 255, 255, 0.40), 0px 48px 18px -38px rgba(115, 152, 228, 0.43);
    transition: all .5s;
}
body.page-template-page-ai .development-block .development-block-inner .development-categories .development-category.active .category-background::after {
    content: "";
    position: absolute;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M16.1752 12.9998L11.2752 17.8998C11.0752 18.0998 10.9792 18.3331 10.9872 18.5998C10.9952 18.8665 11.0995 19.0998 11.3002 19.2998C11.5002 19.4831 11.7335 19.5791 12.0002 19.5878C12.2668 19.5965 12.5002 19.5005 12.7002 19.2998L19.3002 12.6998C19.4002 12.5998 19.4712 12.4915 19.5132 12.3748C19.5552 12.2581 19.5755 12.1331 19.5742 11.9998C19.5728 11.8665 19.5518 11.7415 19.5112 11.6248C19.4705 11.5081 19.3998 11.3998 19.2992 11.2998L12.6992 4.6998C12.5158 4.51647 12.2865 4.4248 12.0112 4.4248C11.7358 4.4248 11.4985 4.51647 11.2992 4.6998C11.0992 4.8998 10.9992 5.13747 10.9992 5.4128C10.9992 5.68814 11.0992 5.92547 11.2992 6.1248L16.1752 10.9998H5.00016C4.71682 10.9998 4.47916 11.0958 4.28716 11.2878C4.09516 11.4798 3.99949 11.7171 4.00016 11.9998C4.00082 12.2825 4.09682 12.5201 4.28816 12.7128C4.47949 12.9055 4.71682 13.0011 5.00016 12.9998H16.1752Z' fill='%2317C7EE'/></svg>");
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    right: 20px;
    bottom: 20px;
}
body.page-template-page-ai .development-block .development-block-inner .development-categories .development-category.active .category-background h3 {
    color: var(--c-dark-gray);
}
body.page-template-page-ai .development-block .development-block-inner .development-categories .development-category.active .category-background p {
    position: relative;
    color: var(--Bestia-bright-blue, #17C7EE);
}
body.page-template-page-ai .development-block .development-block-inner .development-categories .development-category.active .category-background p::after {
    content: "";
    position: absolute;
    width: 96px;
    height: 2px;
    left: 0;
    bottom: -3px;
    border-radius: 10px;
    background: var(--Bestia-bright-blue, #17C7EE);
}

/* default category background */
body.page-template-page-ai .development-block .development-block-inner .development-categories .category-background {
    transition: all .5s;
    max-width: 240px;
    height: 270px;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    padding: 0 18px;
    justify-content: center;
    cursor: pointer;
}
body.page-template-page-ai .development-block .development-block-inner .development-categories .category-background:hover {
    box-shadow: 0px 15px 7px -11px rgba(79, 12, 222, 0.57);
}
body.page-template-page-ai .development-block .development-block-inner .development-categories .category-background .category-title {
    color: var(--c-white);
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
    padding-bottom: 4px;
}
body.page-template-page-ai .development-block .development-block-inner .development-categories .category-background .category-subtitle {
    color: var(--c-white);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

/* Development items */
body.page-template-page-ai .development-block .development-block-inner .development-items {
    max-width: 510px;
    width: 100%;
}
body.page-template-page-ai .development-block .development-block-inner .development-items .items-title {
    font-size: 36px;
    font-weight: 600;
    line-height: normal;
    position: relative;
    padding-bottom: 64px;
    display: none;
}
body.page-template-page-ai .development-block .development-block-inner .development-items .items-title::after {
    content: "";
    position: absolute;
    border-radius: 10px;
    background: #C2D8FF;
    height: 3px;
    width: 100%;
}
body.page-template-page-ai .development-block .development-block-inner .development-items .dev-items {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
    display: none;
}
body.page-template-page-ai .development-block .development-block-inner .development-items .dev-items .dev-item {
    display: flex;
    align-items: center;
    gap: 16px;
}
body.page-template-page-ai .development-block .development-block-inner .development-items .dev-items .dev-item h4 {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

body.page-template-page-ai .development-block.loaded .items-title:first-of-type,
body.page-template-page-ai .development-block.loaded .dev-items:first-of-type {
    display: block;
}


/* ============================================================================
   PROCESS BLOCK
   ============================================================================ */
body.page-template-page-ai .process-block {
    padding: 80px 0;
}
body.page-template-page-ai .process-block .process-title {
    padding-bottom: 64px;
}
body.page-template-page-ai .process-block .process-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-items: center;
    gap: 25px;
}
body.page-template-page-ai .process-block .process-items .process-item {
    border-radius: 20px;
    border: 1px solid var(--Process, rgba(180, 203, 255, 0.50));
    background: rgba(255, 255, 255, 0.50);
    padding: 30px 30px 51px 30px;
    position: relative;
    max-width: 340px;
    height: 350px;
    max-height: 100%;
    transition: all .7s;
}
body.page-template-page-ai .process-block .process-items .process-item::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 25px;
    bottom: 0;
    top: auto;
    left: 0;
    border-radius: 0px 0px 20px 20px;
    background: #5000F9;
    box-shadow: 0px 5px 15px -1px rgba(0, 95, 249, 0.31);
    opacity: 0;
    transition: opacity .7s ease, transform .7s ease;
}
body.page-template-page-ai .process-block .process-items .process-item:hover::after {
    opacity: 1;
    transition: all .8s;
}

body.page-template-page-ai .process-block .process-items .process-item .process-item-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 36px;
}
body.page-template-page-ai .process-block .process-items .process-item .process-item-inner .process-number {
    color: #D0D4FC;
    font-size: 60px;
    font-weight: 600;
    line-height: 60px;
}
body.page-template-page-ai .process-block .process-items .process-item .process-item-inner .process-image {
    height: 60px;
}
body.page-template-page-ai .process-block .process-items .process-item .process-content {
    text-align: center;
}
body.page-template-page-ai .process-block .process-items .process-item .process-content h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    padding-bottom: 20px;
    cursor: default;
}
body.page-template-page-ai .process-block .process-items .process-item .process-content p {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}


/* ============================================================================
   CLIENT REVIEWS
   ============================================================================ */
body.page-template-page-ai .client-reviews {
    padding-top: 80px;
    background: radial-gradient(ellipse at center, #c1d1f4 0, rgb(187 203 237 / 30%) 70%);
}about-us
body.page-template-page-ai .client-reviews .client-reviews-title {
    padding-bottom: 64px;
}

body.page-template-page-ai .client-reviews .client-reviews-list.slick-loaded {
    visibility: visible;
    opacity: 1;
    height: 100%;
}
body.page-template-page-ai .client-reviews .client-reviews-list {
    margin-bottom: 147px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    height: 697px;
}

body.page-template-page-ai .client-reviews .client-reviews-list .slick-track {
    display: flex;
    padding-bottom: 100px;
}

body.page-template-page-ai .client-reviews .client-reviews-list .slick-dots {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    bottom: 30px;
}
body.page-template-page-ai .client-reviews .client-reviews-list .slick-dots .slick-active button::before {
    color: #4D61FF;
    font-size: 15px;
    width: 15px;
    height: 15px;
}
body.page-template-page-ai .client-reviews .client-reviews-list .slick-dots li {
    margin: 0;
    width: 15px;
}
body.page-template-page-ai .client-reviews .client-reviews-list .slick-dots li button {
    padding: 0;
    width: 15px;
}
body.page-template-page-ai .client-reviews .client-reviews-list .slick-dots li button::before {
    opacity: 1;
    color: #CAD5F0;
    font-size: 15px;
    transition: all .5s;
    width: 15px;
    height: 15px;
}

body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item {
    max-width: 100%;
    margin-right: 20px;
    margin-left: 20px;
}
body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-user-info {
    max-height: 100%;
    border-radius: 40px;
    box-shadow: inset 0 4px 9px 0px #fff, inset 2px 0px 0 #fff, inset -4px 0 0 #e4ecfe, inset 0 -2px 0 rgba(228, 236, 254, 0.47), 0 48px 18px -38px rgba(115, 152, 228, 0.43), -2px -2px 13px 0 rgba(255, 255, 255, 0.4);
    background: #F8F8F8;
    padding: 20px;
}

body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 30px;
    padding: 0 40px;
}
body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info-mobile {
    display: none;
}
body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner .review-image img {
    max-width: 200px;
    width: 100%;
    height: auto;
    display: block;
}
body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info .review-name {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
}
body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info .review-country {
    font-weight: 600;
    font-size: 14px;
    line-height: 34px;
}
body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info .review-position {
    font-size: 14px;
    line-height: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info .review-text {
    padding-top: 20px;
}
body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info .review-text p {
    line-height: 34px;
}


body.page-template-page-ai .footer-top .footer-block .footer-content {
    width: 100%;
    max-width: 1070px;
}
body.page-template-page-ai .footer-top .footer-block .footer-content h2 {
    line-height: 120%;
}




/* ============================================================================
   MEDIA QUERIES
   ============================================================================ */
@media screen and (max-width: 1466px) {
    body.page-template-page-ai .header-block .header-block-inner .image-block {
        max-width: 770px;
    }
}

/* ---------- max-width: 1440px ---------- */
@media screen and (max-width: 1440px) {
    body.page-template-page-ai .header-block .header-block-inner .image-block {
        max-width: 670px;
    }
    body.page-template-page-ai .development-block .development-block-inner .development-categories .development-category:nth-child(2) .category-background .category-title {
        font-size: 22px;
    }
    body.page-template-page-ai .development-block .development-block-container {
        max-width: 1236px;
    }
    body.page-template-page-ai .about-us .about-us-container {
        padding-left: 0;
    }
    body.page-template-page-ai .specialize-block::after {
        left: 0;
    }
    body.page-template-page-ai .specialize-block::before {
        right: 0;
        top: 0;
    }
}

/* ---------- max-width: 1200px (нове) — scale hero down ---------- */
@media screen and (max-width: 1200px) {
    body.page-template-page-ai .header-block .header-block-inner .image-block {
        max-width: 520px;
    }
    body.page-template-page-ai .header-block .header-block-inner .text-block h1 {
        font-size: 36px;
    }
    body.page-template-page-ai .header-block .header-block-inner .text-block h2 {
        font-size: 22px;
    }
}

/* ---------- max-width: 1138px ---------- */
@media screen and (max-width: 1138px) {
    body.page-template-page-ai .specialize-block .specialize-items {
        margin-right: 0;
        margin-left: 0;
    }
    body.page-template-page-ai .specialize-block .specialize-items .specialize-item h4 {
        font-size: 16px;
    }
}

/* ---------- max-width: 1089px ---------- */
@media screen and (max-width: 1089px) {
    body.page-template-page-ai .development-block {
        padding: 40px 0 57px 0;
        height: 100%;
    }
    body.page-template-page-ai .development-block .development-block-container {
        padding: 0;
    }
    body.page-template-page-ai .development-block .development-block-inner {
        display: grid;
        justify-content: stretch;
        gap: 0;
    }
    body.page-template-page-ai .development-block .development-block-inner .development-items {
        max-width: 100%;
        padding: 0 16px;
    }
    body.page-template-page-ai .development-block .development-block-inner .development-items .items-title {
        font-size: 28px;
        padding-bottom: 40px;
    }
    body.page-template-page-ai .development-block .development-block-inner .development-items .items-title::after {
        bottom: 33px;
    }
    body.page-template-page-ai .development-block .development-block-inner .development-items .dev-items {
        grid-template-columns: 1fr 1fr 1fr;
        row-gap: 24px;
        column-gap: 29px;
    }
    body.page-template-page-ai .development-block .development-block-inner .development-items .dev-items .dev-item {
        gap: 8px;
    }
    body.page-template-page-ai .development-block .development-block-inner .development-items .dev-items .dev-item h4 {
        font-size: 16px;
    }

    body.page-template-page-ai .development-block .development-block-inner .development-categories::-webkit-scrollbar {
        display: none;
    }
    body.page-template-page-ai .development-block .development-block-inner .development-categories {
        column-gap: 16px;
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        scrollbar-width: none;
        max-width: 100%;
        padding-bottom: 40px;
        padding-left: 16px;
        padding-right: 16px;
    }
    body.page-template-page-ai .development-block .development-block-inner .development-categories .development-category {
        flex: 0 0 auto;
    }
    body.page-template-page-ai .development-block .development-block-inner .development-categories .category-background {
        height: 130px;
        justify-content: flex-start;
        padding-top: 33px;
    }

    body.page-template-page-ai .features-block .features-grid .feature-item {
        height: 319px;
        padding: 30px;
    }
    body.page-template-page-ai .features-block .features-grid .slick-list {
        height: auto;
    }
}

/* ---------- max-width: 1080px ---------- */
@media screen and (max-width: 1080px) {
    body.page-template-page-ai .about-us .about-us-container {
        flex-wrap: wrap;
        padding-left: 0;
        justify-content: center;
    }
    body.page-template-page-ai .about-us .about-us-container .left-section .counters {
        padding-top: 40px;
    }
    body.page-template-page-ai .features-block .features-grid .feature-item h3 {
        font-size: 20px;
    }
    body.page-template-page-ai .footer-top .footer-block .footer-content {
        max-width: 700px;
    }
}

/* ---------- max-width: 977px ---------- */
@media screen and (max-width: 977px) {
    body.page-template-page-ai .header-block .header-block-inner .text-block {
        display: grid;
        justify-items: center;
        text-align: center;
        max-width: 100%;
    }
    body.page-template-page-ai .header-block .header-block-inner .text-block p:not(:last-child) {
        max-width: 100%;
    }
    body.page-template-page-ai .header-block .header-block-inner {
        flex-wrap: wrap;
        row-gap: 40px;
        justify-content: center;
    }
    body.page-template-page-ai .header-block .achievement-inner {
        justify-content: center;
    }
    body.page-template-page-ai .header-block {
        padding-top: 130px;
        min-height: auto;
    }

    body.page-template-page-ai .about-us .about-us-container {
        padding-top: 24px;
        gap: 40px;
        justify-content: center;
    }
    body.page-template-page-ai .about-us .about-us-container .left-section .counters .counter-item::after {
        height: 1px;
    }
    body.page-template-page-ai .about-us .about-us-container .left-section .counters .counter-item .counter-number {
        font-size: 24px;
    }
    body.page-template-page-ai .about-us .about-us-container .left-section .counters .counter-item .counter-text {
        font-size: 12px;
    }

    body.page-template-page-ai .about-us .about-us-container .right-section .right-block img {
        padding-bottom: 16px;
    }
    body.page-template-page-ai .about-us .about-us-container .right-section .right-block .right-text h3 {
        padding-bottom: 4px;
    }
}

/* ---------- max-width: 768px ---------- */
@media (max-width: 768px) {
    body.page-template-page-ai .site-info {
        padding-top: 215px;
    }
    body.page-template-page-ai .slick-prev {
        left: 30%;
        bottom: 40px;
    }
    body.page-template-page-ai .slick-next {
        right: 30%;
        bottom: 28px;
    }
    body.page-template-page-ai h2 {
        font-size: 28px !important;
        padding-bottom: 12px;
    }

    /* Header / Hero — mobile */
    body.page-template-page-ai .header-block {
        background-image: var(--bg-mobile);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        padding-top: 120px;
        padding-bottom: 40px;
        min-height: auto;
    }
    body.page-template-page-ai .header-block .header-block-inner .text-block {
        padding-top: 0;
    }
    body.page-template-page-ai .header-block .header-block-inner .text-block h2 {
        font-size: 18px;
        padding-bottom: 16px;
    }
    body.page-template-page-ai .header-block .header-block-inner .text-block p:not(:last-child) {
        font-size: 14px;
        padding-bottom: 28px;
    }
    body.page-template-page-ai .header-block .header-block-inner .text-block p a {
        min-width: 0;
        width: 100%;
        max-width: 340px;
        padding: 14px 20px;
        font-size: 12px;
    }
    body.page-template-page-ai .header-block .header-block-inner .image-block > img {
        max-height: none;
    }

    /* Clients */
    body.page-template-page-ai .client-logos {
        padding: 36px 0;
        margin-bottom: 0;
    }
    body.page-template-page-ai .client-logos .slick-list .slick-track {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    body.page-template-page-ai .client-logos .slick-list .slick-track .client-logo-item {
        margin: 0 13px;
    }
    body.page-template-page-ai .client-logos .slick-list .slick-track .client-logo-item .logo-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
    }



    /* About */
    body.page-template-page-ai .about-us {
        padding-top: 40px;
    }
    body.page-template-page-ai .about-us .text-block p {
        font-size: 16px;
        font-weight: 400;
    }
    body.page-template-page-ai .about-us .about-us-container .left-section .counters {
        row-gap: 12px;
        column-gap: 16px;
    }

    /* Features */
    body.page-template-page-ai .features-block {
        margin-top: 0;
        padding-bottom: 40px;
    }
    body.page-template-page-ai .features-block .features-intro p {
        font-size: 16px;
    }
    body.page-template-page-ai .features-block .features-grid {
        padding-top: 24px;
    }
    body.page-template-page-ai .features-block .features-grid .slick-list {
        padding: 0 0 107px 0 !important;
        margin-left: -8px;
        margin-right: 0;
        height: 344px;
    }
    body.page-template-page-ai .features-block .features-grid .feature-item {
        padding: 19px;
        margin-right: 0;
        margin-left: 8px;
        border-top: 2px solid #FFF;
        border-right: 1px solid #c7d7fd;
        border-bottom: 1px solid #FFF;
        border-left: 1px solid #FFF;
        height: 237px;
        background: #F8F8F8;
        box-shadow: -2px -2px 13px 0px rgba(255, 255, 255, 0.40), 0px 48px 18px -38px rgba(115, 152, 228, 0.43);
    }
    body.page-template-page-ai .features-block .features-grid .feature-item .feature-image {
        padding-bottom: 16px;
    }
    body.page-template-page-ai .features-block .features-grid .feature-item .feature-image img {
        width: 42px;
        height: 42px;
    }
    body.page-template-page-ai .features-block .features-grid .feature-item h3 {
        font-size: 20px;
        padding-bottom: 4px;
    }
    body.page-template-page-ai .features-block .features-grid .feature-item p {
        font-size: 14px;
        line-height: normal;
    }
    body.page-template-page-ai .features-block .slick-progress-fill {
        width: 80px;
    }

    /* Specialize */
    body.page-template-page-ai .specialize-block {
        padding: 40px 0 0 0;
        background-position: top -20px center;
        margin-bottom: 0;
    }
    body.page-template-page-ai .specialize-block::after {
        background: url("/wp-content/themes/bestia/assets/images/left-side-mob.png");
        background-repeat: no-repeat;
        bottom: 10px;
    }
    body.page-template-page-ai .specialize-block::before {
        background: url("/wp-content/themes/bestia/assets/images/right-side-mob.png");
        background-repeat: no-repeat;
        right: 0;
        width: 100px;
    }
    body.page-template-page-ai .specialize-block .specialize-items {
        padding-top: 24px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 78px);
        gap: 12px;
    }
    body.page-template-page-ai .specialize-block .specialize-items .specialize-item {
        max-width: 100%;
        height: 170px;
    }
    body.page-template-page-ai .specialize-block .specialize-items .specialize-item:nth-child(1) {
        grid-row: 1 / 3;
        grid-column: 1 / 2;
    }
    body.page-template-page-ai .specialize-block .specialize-items .specialize-item:nth-child(2) {
        grid-row: 1 / 2;
        height: 78px;
    }
    body.page-template-page-ai .specialize-block .specialize-items .specialize-item:nth-child(3) {
        grid-row: 2 / 4;
        grid-column: 2 / 3;
    }
    body.page-template-page-ai .specialize-block .specialize-items .specialize-item:nth-child(4) {
        height: 80px;
    }
    body.page-template-page-ai .specialize-block .specialize-items .specialize-item:nth-child(5) {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
        height: 78px;
    }
    body.page-template-page-ai .specialize-block .specialize-items .specialize-item:nth-child(6) {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }
    body.page-template-page-ai .specialize-block .specialize-items .specialize-item:nth-child(7) {
        grid-row: 6 / 7;
        grid-column: 1 / 2;
        height: 80px;
    }
    body.page-template-page-ai .specialize-block .specialize-items .specialize-item:nth-child(8) {
        grid-column: 2 / 3;
    }

    /* Process */
    body.page-template-page-ai .process-block {
        padding: 40px 0 0 0;
    }
    body.page-template-page-ai .process-block .slick-progress-fill {
        width: 60px;
    }
    body.page-template-page-ai .process-block .process-title {
        padding-bottom: 24px;
    }
    body.page-template-page-ai .process-block .process-items .slick-list {
        margin-right: -8px;
        padding-bottom: 107px;
    }
    body.page-template-page-ai .process-block .process-items .process-item {
        margin-right: 8px;
        max-width: 100%;
    }

    /* Client reviews */
    body.page-template-page-ai .client-reviews h2 {
        padding-bottom: 0;
    }
    body.page-template-page-ai .client-reviews .client-reviews-title {
        padding-bottom: 24px;
    }
    body.page-template-page-ai .client-reviews .client-reviews-list {
        margin-bottom: 270px;
    }
    body.page-template-page-ai .client-reviews .client-reviews-list .slick-track {
        padding-bottom: 30px;
    }
    body.page-template-page-ai .client-reviews .client-reviews-list .slick-list {
        margin-right: -8px;
    }
    body.page-template-page-ai .client-reviews .client-reviews-list .slick-dots {
        bottom: -16px;
    }
    body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item {
        margin-right: 8px;
        margin-left: 0;
    }
    body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-text {
        padding-top: 0 !important;
    }
    body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-text p {
        -webkit-line-clamp: 10;
    }
    body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner {
        padding: 0;
        gap: 20px;
        flex-direction: column;
        display: flex;
    }
    body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner .review-inner-mobile {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        order: 2;
    }
    body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner .review-inner-mobile .review-image img {
        max-width: 78px;
    }
    body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info-mobile {
        display: grid;
        gap: 4px;
    }
    body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info-mobile .review-name {
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 120%;
    }
    body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info-mobile .review-country {
        font-weight: 600;
        font-size: 14px;
        line-height: 120%;
    }
    body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info-mobile .review-position {
        font-size: 14px;
        line-height: 120%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info {
        display: grid;
        row-gap: 10px;
    }
    body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info .review-name,
    body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info .review-position,
    body.page-template-page-ai .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info .review-country {
        display: none;
    }



    body.page-template-page-ai .development-block .development-block-inner .development-items .dev-items {
        grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
    }
}

/* ---------- max-width: 600px ---------- */
@media (max-width: 600px) {
    body.page-template-page-ai .header-block .header-block-inner .text-block {
        text-align: left;
        justify-items: flex-start;
    }
    body.page-template-page-ai .header-block .header-block-inner .text-block p a {
        margin: 0;
    }
    body.page-template-page-ai .b-about__text {
        font-size: 16px;
    }
    body.page-template-page-ai .footer-top .footer-block .footer-content h2 {
        font-size: 24px !important;
    }
    body.page-template-page-ai .footer-top .footer-block .footer-content h2 br {
        display: none;
    }
    body.page-template-page-ai .footer-top .footer-block .footer-content {
        max-width: 350px;
    }
    .ind-title {
        margin-bottom: 10px;
    }
    body.page-template-page-ai .client-reviews .client-reviews-list {
        margin-bottom: 190px;
    }
}

@media (max-width: 500px) {
    body.page-template-page-ai .header-block .header-block-inner .text-block h1 {
        font-size: 24px;
        line-height: 1.2;
        padding-bottom: 16px;
    }
    body.page-template-page-ai .header-block h2 {
        font-size: 20px !important;
    }
}



/* ============================================================================
   Глобальні хелпери (поза body.page-template-page-ai)
   ============================================================================ */
.process-bar {
    width: 100%;
    height: 3px;
    background-color: #DAE2FF;
    position: relative;
    border-radius: 10px;
}
.process-fill {
    width: 180px;
    height: 5px;
    border-radius: 10px;
    background: #7166F9;
    position: absolute;
    top: -1px;
    transition: left 0.3s ease;
    cursor: pointer;
}


/*Ind section*/
/* ============================================================================
   INDUSTRIES WE EMPOWER
   Підключити у основний CSS теми (або додати окремим файлом).
   ============================================================================ */

.ind-section {
    background: #EEF3FE;
    padding: 80px 20px 100px;
}
.ind-inner {
    max-width: 1435px;
    margin: 0 auto;
}

/* Title */
.ind-title {
    font-size: clamp(24px, 2.5vw, 40px);
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    margin: 0 0 64px;
}

/* Grid */
.ind-grid {
    display: flex;
    gap: 25px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Card wrapper */
.ind-card {
    width: 340px;
    height: 488px;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   FRONT — фіолетова картка
   --------------------------------------------------------------------------- */
.ind-front {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(180deg, #8997FF 0%, #4D61FF 100%);
    box-shadow: 0 4px 28px rgba(77, 97, 255, 0.32);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;      /* icon зверху, текст внизу */
    padding: 56px 28px 64px;             /* раніше було 0 28px 52px і все центровано */
    transition: opacity 0.32s ease;
    overflow: hidden;
}

.front-icon {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}
.front-icon svg {
    width: 100%;
    height: 100%;
}

.front-labels {
    text-align: center;
    width: 100%;
}
.front-name {
    display: block;
    color: #FEFEFF;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.3;
}
/* .front-sub видалено — у дизайні обидва рядки одного розміру/кольору (через <br>) */

/* ---------------------------------------------------------------------------
   BACK — біла картка з текстом (з'являється на hover)
   НЕМАЄ іконки, НЕМАЄ кнопки "Learn more"
   --------------------------------------------------------------------------- */
.ind-back {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: #FEFEFF;
    box-shadow: 0 8px 40px rgba(77, 97, 255, 0.18);
    display: flex;
    flex-direction: column;
    padding: 40px 32px;
    opacity: 0;
    transition: opacity 0.32s ease;
    overflow: hidden;
}

.back-name {
    font-size: 20px;
    font-weight: 700;
    color: #1A1A40;
    line-height: 1.3;
    text-align: center;
    margin: 0 0 28px;                    /* заголовок по центру, з помітним відступом до focus */
}

.back-focus {
    position: relative;
    color: #4D61FF;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    padding-left: 16px;
    margin-bottom: 28px;
}
.back-focus::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4D61FF;
}
.back-focus em {
    font-style: italic;
    font-weight: 600;
    margin-right: 2px;
}

.back-desc {
    font-size: 14px;
    line-height: 1.65;
    color: #1A1A40;                      /* у дизайні текст темний, не блакитнуватий */
    margin: 0;
    flex: 1;
}

/* ---------------------------------------------------------------------------
   Hover (desktop) — flip
   --------------------------------------------------------------------------- */
@media (hover: hover) {
    .ind-card:hover .ind-front { opacity: 0; }
    .ind-card:hover .ind-back  { opacity: 1; }
}

/* Для touch-пристроїв — клас is-active (можна додати через JS на tap) */
.ind-card.is-active .ind-front { opacity: 0; }
.ind-card.is-active .ind-back  { opacity: 1; }


/* ---------------------------------------------------------------------------
   Адаптив
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ind-section { padding: 60px 16px; }
    .ind-title { margin-bottom: 40px; }
    .ind-grid { gap: 16px; }
    .ind-card { width: calc(50% - 8px); max-width: 340px; }
}

@media (max-width: 760px) {
    .ind-section { padding: 40px 16px; }

    /* На мобільному одразу показуємо BACK (текст), без flip —
       щоб не треба було тапати. Якщо треба слайдер, видаліть цей блок
       і підключіть свій. */
    .ind-card {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
        cursor: default;
    }
    .ind-front {
        display: none;                   /* на мобі front не потрібен */
    }
    .ind-back {
        position: relative;
        inset: auto;
        opacity: 1;
        padding: 28px 24px;
    }
    .back-name { font-size: 18px; margin-bottom: 20px; }
    .back-focus { margin-bottom: 20px; }
}
/*Ind section*/






/* ============================================================================
   THE BESTIA PROTOCOL
   Підключіть разом з вашим основним CSS теми.
   Фон секції — білий (на макеті Figma canvas чорний, але секція на світлій сторінці).
   ============================================================================ */

.protocol-section {
    background: #FFFFFF;
    padding: 140px 20px;
}
.protocol-inner {
    max-width: 1435px;
    margin: 0 auto;
}

/* ---------- Title ---------- */
.protocol-title {
    font-size: clamp(24px, 2.5vw, 40px);
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    margin: 0 0 64px;
}

/* ---------- Flow ---------- */
.protocol-flow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
}

/* ---------- Step ---------- */
.protocol-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.protocol-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(180deg, #8997FF 0%, #4D61FF 50%);
    box-shadow: 0 8px 20px rgba(77, 97, 255, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    flex-shrink: 0;
}
.protocol-icon svg {
    display: block;
}

.protocol-step-title {
    color: var(--Bestia-Dark-gray, #333);
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0 0 14px;
}

.protocol-step-desc {
    color: var(--Bestia-Dark-gray, #333);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

/* ---------- Arrow ---------- */
.protocol-arrow {
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 32px;             /* щоб стрілка була на рівні іконки */
    color: #4D61FF;
    display: flex;
    align-items: center;
}
.protocol-arrow svg {
    display: block;
}

/* ============================================================================
   Адаптив
   ============================================================================ */

/* Планшети — приховуємо стрілки, кроки в сітку 3+2 */
@media (max-width: 1024px) {
    .protocol-section { padding: 60px 16px; }
    .protocol-title { margin-bottom: 40px; }

    .protocol-flow {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px 20px;
        justify-items: center;
    }
    .protocol-step {
        max-width: 260px;
    }
    .protocol-arrow {
        display: none;
    }
}

/* Мобільний — 2 колонки */
@media (max-width: 680px) {
    .protocol-flow {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 16px;
    }
    .protocol-step-title {
        font-size: 15px;
    }
    .protocol-step-desc {
        font-size: 12px;
    }
}

/* Зовсім вузький — 1 колонка */
@media (max-width: 420px) {
    .protocol-flow {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .protocol-step {
        max-width: 100%;
    }
}


/* ============================================================================
   NOT JUST DEVS. WE ARE AUTOMATION ARCHITECTS.

   Desktop (>768px): 3 картки у ряд, іконка зверху по центру
   Mobile  (≤768px): стовпчик, іконка ліворуч, контент праворуч
   ============================================================================ */

.values-section {
    padding: 0 20px 160px;
}
.values-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* ---------- Title ---------- */
.values-title {
    font-size: clamp(24px, 2.5vw, 40px);
    font-weight: 700;
    color: #1A1A40;
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 56px;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Grid ---------- */
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ---------- Card (desktop) ---------- */
.value-card {
    border-radius: 20px;
    border: 1px solid rgba(180, 203, 255, 0.5);
    background: rgba(255, 255, 255, 0.5);
    padding: 36px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.value-card:hover {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 12px 32px rgba(77, 97, 255, 0.12);
    transform: translateY(-2px);
}

/* Icon wrapper */
.value-icon {
    flex-shrink: 0;
    width: auto;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}
.value-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Content */
.value-content {
    text-align: center;
}
.value-title {
    font-size: 18px;
    font-weight: 600;
    color: #1A1A40;
    line-height: 1.3;
    margin: 0 0 14px;
}
.value-desc {
    font-size: 14px;
    font-weight: 400;
    color: #5566AA;
    line-height: 1.65;
    margin: 0;
}


/* ============================================================================
   АДАПТИВ
   ============================================================================ */

@media (max-width: 1024px) {
    .values-section { padding: 0px 16px 60px; }
    .values-title { margin-bottom: 40px; }
    .values-grid { gap: 16px; }
    .value-card { padding: 28px 20px; }
    .value-title { font-size: 16px; }
    .value-desc { font-size: 13px; }
}

/* Мобільний — стовпчик, іконка ліворуч, контент праворуч */
@media (max-width: 768px) {
    .values-title {
        font-size: 24px;
        margin-bottom: 28px;
    }
    .values-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 480px;
    }
    .value-card {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 20px;
        padding: 20px 20px;
    }
    .value-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 0;
    }
    .value-icon svg {
        width: 56px;
        height: 56px;
    }
    .value-content {
        text-align: left;
        flex: 1;
        min-width: 0;
    }
    .value-title {
        font-size: 16px;
        margin-bottom: 8px;
    }
    .value-desc {
        font-size: 13px;
        line-height: 1.55;
    }
}

@media (max-width: 420px) {
    .value-card {
        gap: 16px;
        padding: 18px 16px;
    }
    .value-icon,
    .value-icon svg {
        width: 48px;
        height: 48px;
    }
}

body.page-template-page-ai .site-info {
    padding-top: 345px;
}

body.post-type-archive-case_study .case-study-archive .case-studies-list article .case-study-excerpt p {
    padding-bottom: 14px;
}