/* =========================================
   RANGE 1: Laptop & Tablet Landscape (Max-Width: 1280px)
   ========================================= */
@media (max-width: 1280px) {
    .content-wrapper {
        padding: 40px 20px;
        gap: 60px;
    }

    .header-body {
        gap: 30px;
        height: 50px;
        padding: 5px 20px;
    }

    .header-nav {
        gap: 30px;
    }

    .nav-link {
        font-size: 14px;
    }

    .header-cta {
        min-width: 160px;
        font-size: 13px;
    }

    .hero-title {
        font-size: 42px;
        margin-bottom: 20px;
    }

    .hero-subtitle {
        font-size: 18px;
        max-width: 800px;
    }

    .text-main-heading {
        font-size: 32px;
    }

    .text-columns-row {
        gap: 40px;
    }

    .cards-row {
        gap: 15px;
    }

    .stats-card {
        padding: 20px;
        height: 180px;
    }

    .card-number {
        font-size: 36px;
    }

    .card-text {
        font-size: 14px;
    }

    .cards-container {
        max-width: 900px;
    }

    .service-card {
        height: 400px;
    }

    .card-image-box {
        height: 380px;
    }

    .card-title {
        font-size: 30px;
    }

    .card-content {
        padding: 25px;
        gap: 25px;
    }

    .process-title {
        font-size: 42px;
    }

    .process-description {
        font-size: 20px;
    }

    .team-grid {
        gap: 20px;
        max-width: 100%;
        justify-content: center;
    }

    .team-card {
        width: 300px;
        padding: 30px 20px;
    }

    .glass-footer {
        padding: 40px 40px 5px 40px;
    }

    .logo-text {
        font-size: 60px;
    }

    .cta-title {
        font-size: 40px;
    }

    .glass-footer-black {
        padding: 40px 40px 5px 40px;
    }

    /* --- GLOBAL LAYOUT ADJUSTMENTS --- */

    /* ABOUT PAGE */
    .about-hero {
        padding: 100px 20px 60px;
        /* Трохи менше повітря зверху */
    }

    .about-hero-title {
        font-size: 56px;
        /* Зменшення з 64px */
    }

    .dna-grid {
        gap: 40px;
        /* Зменшення відступу між фото і текстом */
    }

    .dna-image-wrapper {
        height: 500px;
        /* Коригування висоти під меншу ширину */
    }

    .principles-section {
        padding: 80px 20px 20px 20px;
        /* ВИПРАВЛЕНО: Симетричні бічні відступи (20px зліва і справа), щоб контент був по центру */
    }

    .principles-grid {
        gap: 20px;
        /* Зменшено gap між картками */
        margin: 0 auto;
        /* Додаткова гарантія центрування сітки */
        max-width: 100%;
        /* Щоб сітка не вилазила за межі контейнера */
    }

    /* PRIVACY PAGE */
    .privacy-header {
        padding-top: 140px;
        /* Зменшено масивний відступ */
    }

    /* --- SERVICE PAGES SHARED STYLES (S1-S5) --- */

    /* 1. Mega Cards - Fit to Screen */
    /* База була 1400px, на 1280px вона б вилазила. Робимо адаптивну ширину */
    .sp-mega-card,
    .s2-mega-card,
    .s3-mega-card,
    .s4-mega-card,
    .s5-mega-card {
        max-width: 100%;
        margin-left: 20px;
        margin-right: 20px;
        width: auto;
        /* Скидаємо фіксовану ширину, якщо була */
    }

    /* 2. Hero Sections - Compact View */
    .sp-hero,
    .s2-hero,
    .s3-hero,
    .s4-hero,
    .s5-hero {
        padding: 60px 40px;
        /* Зменшено з 80px 60px */
        gap: 30px;
        /* Менша відстань між текстом і картинкою */
        grid-template-columns: 1fr 1fr;
        /* Вирівнюємо колонки (було 1.2 до 0.8) для кращого балансу */
    }

    .sp-title,
    .s2-title,
    .s3-title,
    .s4-title,
    .s5-title {
        font-size: 52px;
        /* Зменшення заголовків */
    }

    .sp-badge,
    .s2-badge,
    .s3-badge,
    .s4-badge,
    .s5-badge {
        font-size: 100px;
        /* Зменшення фонової цифри */
        left: 20px;
    }

    .sp-image-box,
    .s2-image-box,
    .s3-image-box,
    .s4-image-box,
    .s5-image-box {
        height: 500px;
        /* ВИПРАВЛЕНО: Повертаємо оригінальну висоту 500px, щоб фото не обрізались і не виглядали вузькими */
    }

    /* 3. Problem Stripes */
    .sp-problem-stripe,
    .s2-problem-stripe,
    .s3-problem-stripe,
    .s4-problem-stripe,
    .s5-problem-stripe {
        padding: 40px;
        gap: 30px;
    }

    .sp-stripe-label,
    .s2-stripe-label,
    .s3-stripe-label,
    .s4-stripe-label,
    .s5-stripe-label {
        min-width: 120px;
        /* Трохи компактніше */
    }

    /* 4. Details Grids (3 col) */
    .sp-details-grid,
    .s2-details-grid,
    .s3-details-grid,
    .s4-details-grid,
    .s5-details-grid {
        padding: 60px 40px;
        gap: 20px;
        /* Менший зазор між картками переваг */
    }

    /* 5. Results / CTA Boxes */
    .sp-results-box,
    .s2-results-box,
    .s3-results-box,
    .s4-results-box {
        padding: 40px;
        /* Компактніший внутрішній відступ */
    }

    /* --- SERVICE 5 SPECIFIC (AI Video & Accordion) --- */

    .s5-accordion-container {
        padding: 40px;
        /* Менші відступи контейнера акордеону */
    }

    .s5-acc-header {
        padding: 25px 30px;
    }

    /* Стандартний контент (Grid з картинкою збоку) */
    .s5-acc-content {
        padding: 0 30px 40px 80px;
        /* Підтягуємо контент лівіше */
        gap: 30px;
        grid-template-columns: 1fr 280px;
        /* Картинка праворуч стає трохи вужчою */
    }

    .s5-content-img {
        width: 100%;
        /* Тепер вона гумова в межах колонки */
        height: 250px;
        /* Трохи менша висота */
    }

    /* VIDEO LAYOUT ADJUSTMENTS (Symmetry Fix) */
    .s5-acc-content.video-layout {
        /* Перебиваємо базові 60px на менші для 1280px, але зберігаємо симетрію */
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 40px;
    }

    .s5-acc-content.video-layout .s5-description {
        /* Зменшуємо проміжок між колонками тексту */
        column-gap: 40px;
    }

    /* Ми НЕ чіпаємо flex-grow та aspect-ratio. 
       Ми лише трохи зменшуємо gap між відео, щоб вони влізли в рядок 
       при меншій ширині контейнера, не стаючи занадто дрібними.
    */
    .s5-video-row {
        gap: 15px;
        /* Було 20px. Це дасть трохи більше місця самим відео */
    }
}

/* =========================================
   RANGE 2: Tablet Portrait (Max-Width: 1023px)
   ========================================= */
@media (max-width: 1023px) {
    .header-body {
        height: 48px;
        padding: 5px 15px;
        gap: 20px;
    }

    .header-logo {
        width: 36px;
    }

    .nav-link {
        font-size: 13px;
    }

    .header-cta {
        min-width: 140px;
        height: 38px;
        font-size: 12px;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-video-wrapper {
        border-radius: 0 0 40px 40px;
    }

    .text-columns-row {
        flex-direction: column;
        gap: 20px;
    }

    .text-main-heading {
        font-size: 28px;
    }

    .cards-row {
        flex-wrap: wrap;
        gap: 15px;
    }

    .stats-card {
        flex: 0 0 calc(50% - 7.5px);
        height: 160px;
    }

    .arsenal-header-area {
        height: auto;
        padding: 100px 0 150px 0;
    }

    .arsenal-title {
        font-size: 32px;
        padding: 0 20px;
    }

    .cards-container {
        padding: 0 15px;
    }

    .service-card {
        height: 320px;
    }

    .card-image-box {
        width: 35%;
        height: 300px;
    }

    .card-yellow {
        top: 90px;
    }

    .card-lime {
        top: 120px;
    }

    .card-salmon {
        top: 150px;
    }

    .card-peach {
        top: 180px;
    }

    .card-ai {
        top: 210px;
    }

    .card-title {
        font-size: 24px;
    }

    .card-subtitle {
        font-size: 12px;
    }

    .card-description-col {
        font-size: 13px;
    }

    .process-section {
        padding-bottom: 50px;
        gap: 0;
    }

    .process-row {
        height: auto;
        padding: 30px 20px;
        border-bottom: 1px solid rgba(255, 248, 240, 0.1);
    }

    .process-row:hover {
        background: transparent;
        height: auto;
    }

    .process-body {
        opacity: 1;
        transform: translateY(0);
        gap: 20px;
        margin-top: 15px;
    }

    .process-header {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-bottom: 10px;
    }

    .process-label:first-child {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #FFF8F0;
        opacity: 1;
    }

    .process-label:last-child {
        font-size: 14px;
        color: rgba(255, 248, 240, 0.6);
        font-weight: 400;
    }

    .process-icon {
        opacity: 1;
        transform: scale(1);
        width: 50px;
        height: 50px;
    }

    .process-icon img {
        width: 24px;
        height: 24px;
    }

    .process-text-col {
        gap: 10px;
    }

    .process-title {
        font-size: 22px;
        color: #FFF8F0;
        margin-bottom: 5px;
    }

    .process-description {
        opacity: 1;
        max-height: none;
        font-size: 14px;
        color: rgba(255, 248, 240, 0.8);
        line-height: 1.5;
    }

    .team-section {
        padding-top: 100px;
        padding-bottom: 50px;
    }

    .team-title {
        font-size: 36px;
        margin-bottom: 50px;
    }

    .team-grid {
        gap: 20px;
    }

    .team-card {
        width: 280px;
        height: auto;
        min-height: 400px;
        margin-top: 0 !important;
        animation-delay: 0s !important;
    }

    .member-quote {
        font-size: 16px;
    }

    .chat-section .main-title {
        font-size: 32px;
        margin-bottom: 30px;
        margin-top: 20px;
    }

    .chat-section .sub-title {
        font-size: 14px;
    }

    .home-footer-wrapper {
        padding-top: 100px;
    }

    .cta-container {
        margin-bottom: 60px;
    }

    .cta-title {
        font-size: 32px;
    }

    .cta-text {
        font-size: 16px;
    }

    .footer-content-row {
        flex-wrap: wrap;
        gap: 30px;
    }

    .footer-brand-col {
        width: 100%;
        align-items: center;
        text-align: center;
        margin-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 20px;
    }

    .footer-logo {
        margin-right: 0;
    }

    .footer-email {
        text-align: center;
        text-align-last: center;
        width: auto;
    }

    .footer-col-title {
        font-size: 14px;
    }

    .footer-link,
    .social-link,
    .copyright-text,
    .policy-link {
        font-size: 13px;
    }

    .footer-services-col,
    .footer-socials-col {
        width: 45%;
    }

    .modal-container {
        padding: 30px 20px;
        max-width: 90%;
        border-radius: 30px;
    }

    .modal-title {
        font-size: 24px;
    }

    .modal-subtitle {
        font-size: 14px;
    }

    .modal-input {
        font-size: 13px;
        padding: 10px 12px;
    }

    .success-state .modal-title {
        font-size: 24px !important;
    }

    .success-state .modal-subtitle {
        font-size: 16px !important;
    }

    .success-icon-circle {
        width: 70px;
        height: 70px;
    }

    .success-icon-circle svg {
        width: 35px;
        height: 35px;
    }

    .footer-content-row-black {
        flex-wrap: wrap;
        gap: 30px;
    }

    .footer-brand-col-black {
        width: 100%;
        align-items: center;
        text-align: center;
        margin-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 20px;
    }

    .footer-logo-black {
        margin-right: 0;
    }

    .footer-email-black {
        text-align: center;
        text-align-last: center;
        width: auto;
    }

    .footer-col-title-black {
        font-size: 14px;
    }

    .footer-link-black,
    .social-link-black,
    .copyright-tex-blackt,
    .policy-link-black {
        font-size: 13px;
    }

    .footer-services-col-black,
    .footer-socials-col-black {
        width: 45%;
    }


    /* --- ABOUT PAGE --- */

    .about-hero {
        padding: 100px 20px 60px;
        min-height: 70vh;
        /* Зменшуємо мін. висоту */
    }

    .about-hero-title {
        font-size: 48px;
    }

    .about-hero-subtitle {
        font-size: 20px;
    }

    /* DNA Section: Stack Layout (Одна колонка) */
    .dna-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .dna-image-wrapper {
        height: 400px;
        /* Висота для "лежачого" формату */
        order: -1;
        /* Картинка перша, текст другий (опціонально, але часто краще виглядає) */
    }

    .dna-content {
        text-align: left;
        /* Або center, залежить від смаку, залишимо left */
    }

    .dna-content h2 {
        font-size: 36px;
    }

    /* Principles: 2 Columns */
    .principles-grid {
        grid-template-columns: 1fr 1fr;
        /* 2 колонки */
    }

    /* Щоб третя картка (якщо їх 3) розтягувалась або виглядала ок */
    .principle-card:last-child {
        grid-column: span 2;
        /* Третя картка на всю ширину */
        /* Або прибрати цей рядок, якщо хочете "дірку" */
    }


    /* --- SERVICE PAGES SHARED STYLES (S1-S5) --- */

    /* 1. Hero Sections: Stack Layout */
    .sp-hero,
    .s2-hero,
    .s3-hero,
    .s4-hero,
    .s5-hero {
        grid-template-columns: 1fr;
        /* Одна колонка */
        padding: 50px 30px;
        text-align: center;
        /* Центруємо текст на планшеті для балансу */
        gap: 40px;
    }

    .sp-hero-content,
    .s2-hero-content,
    .s3-hero-content,
    .s4-hero-content,
    .s5-hero-content {
        order: 1;
        /* Текст зверху */
    }

    .sp-image-box,
    .s2-image-box,
    .s3-image-box,
    .s4-image-box,
    .s5-image-box {
        order: 2;
        /* Картинка знизу */
        height: 400px;
        /* Оптимальна висота для стеку */
        margin-top: 0;
    }

    /* Центрування бейджа або його приховування/зміщення */
    .sp-badge,
    .s2-badge,
    .s3-badge,
    .s4-badge,
    .s5-badge {
        font-size: 80px;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        /* Центруємо цифру */
        width: auto;
    }

    .sp-description,
    .s2-description,
    .s3-description,
    .s4-description,
    .s5-description {
        margin: 0 auto;
        /* Центруємо опис */
    }

    /* 2. Problem Stripe */
    .sp-problem-stripe,
    .s2-problem-stripe,
    .s3-problem-stripe,
    .s4-problem-stripe,
    .s5-problem-stripe {
        flex-direction: column;
        /* Вертикально */
        align-items: center;
        text-align: center;
        padding: 40px 30px;
    }

    .sp-stripe-label,
    .s2-stripe-label,
    .s3-stripe-label,
    .s4-stripe-label,
    .s5-stripe-label {
        min-width: auto;
        margin-bottom: 10px;
        font-size: 14px;
        letter-spacing: 2px;
    }

    /* 3. Details Grid: 2 Columns */
    .sp-details-grid,
    .s2-details-grid,
    .s3-details-grid,
    .s4-details-grid,
    .s5-details-grid {
        grid-template-columns: 1fr 1fr;
        padding: 50px 30px;
    }

    /* Опціонально: остання картка на всю ширину */
    .sp-detail-item:last-child,
    .s2-detail-item:last-child,
    .s3-detail-item:last-child,
    .s4-detail-item:last-child,
    .s5-detail-item:last-child {
        grid-column: 1 / -1;
    }

    /* 4. Results Box */
    .sp-results-box,
    .s2-results-box,
    .s3-results-box,
    .s4-results-box {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .sp-results-tags,
    .s2-results-tags,
    .s3-results-tags,
    .s4-results-tags {
        justify-content: center;
    }


    /* --- SERVICE 5 SPECIFIC --- */

    /* Accordion Content Stack */
    .s5-acc-content {
        grid-template-columns: 1fr;
        /* Одна колонка */
        padding: 0 30px 40px 30px;
        /* Скидаємо лівий відступ заголовка */
        gap: 30px;
    }

    .s5-content-img {
        height: 300px;
        margin: 0 auto;
        /* Центруємо картинку */
        order: -1;
        /* Картинку можна поставити над текстом або залишити під (order: 1) */
        width: 100%;
        max-width: 500px;
        /* Обмеження ширини, щоб не була гігантською */
    }

    /* Accordion Header Compact */
    .s5-acc-header {
        padding: 20px 25px;
    }

    .s5-acc-content.video-layout {
        /* Симетричні відступи зберігаємо */
        padding-left: 30px;
        padding-right: 30px;
    }

    /* Текст відео-блоку в одну колонку на планшеті, 
       бо 2 колонки тексту будуть занадто вузькі */
    .s5-acc-content.video-layout .s5-description {
        column-count: 1;
        column-gap: 0;
    }

    /* Video Rows - Keep Layout but shrink */
    /* .s5-video-row залишається flex, тому відео просто зменшаться, 
       зберігаючи 16:9 / 9:16 пропорції. */
    .s5-video-item {
        /* Можна трохи зменшити радіус для компактності */
        border-radius: 15px;
    }

    .s5-play-btn {
        width: 50px;
        height: 50px;
    }
}

/* =========================================
   RANGE 3: Large Mobile (Max-Width: 767px)
   ========================================= */
@media (max-width: 767px) {

    /* --- HEADER --- */
    .header-nav {
        display: none;
    }

    .header-body {
        justify-content: space-between;
        padding: 5px 15px;
        gap: 10px;
        position: relative;
        z-index: 1001;
        width: 300px;
        margin: 0 auto;
        box-sizing: border-box;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    /* SWAP LOGO & BURGER: Burger left (-1), Logo normal (0), CTA right (1) */
    .header-body .burger-btn {
        order: -1;
        margin-right: auto;
    }

    .header-logo {
        order: 0;
        margin: 0 auto;
    }

    .header-cta {
        order: 1;
        display: flex;
        min-width: auto;
        padding: 0 12px;
        height: 36px;
        font-size: 11px;
        margin-left: auto;
    }

    /* FIX: HIDE VISUALS OF HEADER (BG, BORDER) BUT KEEP CONTAINER VISIBLE FOR CHILDREN (MENU) */
    body.menu-open .header-body {
        background: transparent !important;
        box-shadow: none !important;
        border-color: transparent !important;
        backdrop-filter: none !important;
    }

    /* HIDE LOGO AND CTA WHEN MENU IS OPEN */
    body.menu-open .header-logo,
    body.menu-open .header-cta {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    /* BURGER STYLES */
    .header-body .burger-btn {
        display: flex !important;
        visibility: visible;
        opacity: 1;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        width: 40px;
        min-width: 40px;
        height: 40px;
        flex-shrink: 0;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 1002;
        padding: 0;
    }

    .burger-line {
        display: block;
        width: 24px;
        height: 2px;
        background-color: #1E1E24;
        border-radius: 2px;
        transition: all 0.3s ease;
        align-self: center;
    }

    body.menu-open .burger-line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    body.menu-open .burger-line:nth-child(2) {
        opacity: 0;
    }

    body.menu-open .burger-line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* --- MOBILE MENU (PURE HEADER VARIABLES) --- */
    /* Використовуємо лише змінні, без додаткових шарів */
    .mobile-menu-overlay {
        display: flex;
        visibility: hidden;
        opacity: 0;
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        max-width: 100%;
        height: auto;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        overflow-x: hidden;
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: var(--glass-border);
        box-shadow: var(--glass-shadow);
        border-radius: 28px;
        z-index: 1000;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 80px 20px 30px;
        transform-origin: top center;
        transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        transform: translateX(-50%) scaleY(0.9);
    }

    /* Прибрано ::after (density layer) для повної відповідності хедеру */

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) scaleY(1);
    }

    .mobile-menu-overlay .header-cta {
        flex-shrink: 0;
        min-height: 50px;
        height: 50px;
        width: 100%;
        max-width: 280px;
        margin-top: 30px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
        margin-bottom: 20px;
        width: 100%;
    }

    .mobile-nav-link {
        font-size: 22px;
        font-weight: 700;
        color: #1E1E24;
        text-decoration: none;
        cursor: pointer;
        transition: opacity 0.2s;
    }

    .mobile-nav-link:active {
        opacity: 0.6;
    }

    .mobile-sublink.ai-highlight {
        display: block;
        /* Щоб рамка охоплювала блок */
        width: 100%;
        /* На всю ширину контейнера */
        box-sizing: border-box;
        padding: 10px 15px;
        /* Відступи всередині рамки */
        margin-top: 0px;
        /* Відступ від попереднього пункту */
        text-align: center;
    }

    /* DROPDOWN INSIDE MENU */
    .mobile-dropdown-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        padding: 5px 0;
    }

    .services-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0px 10px 10px 10px;
        cursor: pointer;
        user-select: none;
    }

    .arrow-icon {
        font-size: 12px;
        transition: transform 0.3s ease;
    }

    .mobile-submenu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        width: 100%;
    }

    .mobile-sublink {
        font-size: 16px;
        color: rgba(30, 30, 36, 0.8);
        text-decoration: none;
        margin-top: 5px;
    }

    .mobile-sublink:last-child {
        margin-bottom: 15px;
    }

    /* --- CONTENT UPDATES --- */
    .hero-title {
        font-size: 30px;
    }

    .hero-subtitle {
        font-size: 15px;
    }

    .hero-video-wrapper {
        height: 70vh;
    }

    .cards-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 100px;
    }

    .service-card {
        flex-direction: column;
        width: 100%;
        max-width: 380px;
        height: auto;
        min-height: 500px;
        padding: 10px;
        margin: 0 auto;
        margin-bottom: 0;
    }

    .card-yellow {
        top: 100px;
        margin-bottom: 240px;
    }

    .card-lime {
        top: 160px;
        margin-bottom: 180px;
    }

    .card-salmon {
        top: 220px;
        margin-bottom: 120px;
    }

    .card-peach {
        top: 280px;
        margin-bottom: 60px;
    }

    .card-ai {
        top: 340px;
        margin-bottom: 0px;
    }

    .card-image-box {
        width: 100%;
        height: 240px;
        border-radius: 40px 40px 20px 20px;
        margin-bottom: 15px;
        position: relative;
        z-index: 1;
    }

    .card-content {
        position: static;
        width: 100%;
        padding: 10px 15px 30px 15px;
        gap: 10px;
        justify-content: flex-start;
    }

    .card-number-badge {
        position: absolute;
        top: 25px;
        right: 25px;
        width: 36px;
        height: 36px;
        border: 2px solid #AB9782;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #AB9782;
        background: rgba(255, 255, 255, 0.9);
        z-index: 20;
    }

    .card-ai .card-number-badge {
        border-color: #FFF8F0;
        color: #1E1E24;
        background: #FFF8F0;
    }

    .card-title {
        font-size: 26px;
    }

    .card-subtitle {
        font-size: 14px;
    }

    .card-description-row {
        flex-direction: column;
        gap: 10px;
    }

    .card-arrow-hint {
        bottom: 20px;
        right: 20px;
    }

    .cards-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 0px;
    }

    .team-grid {
        flex-direction: column;
        align-items: center;
    }

    .team-card {
        width: 100%;
        max-width: 340px;
    }

    .footer-content-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }

    .footer-services-col,
    .footer-socials-col {
        width: 100%;
        align-items: center;
    }

    .footer-brand-col {
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 20px;
        width: 100%;
    }

    .footer-bottom-row {
        flex-direction: column-reverse;
        gap: 15px;
        padding-bottom: 20px;
    }

    .cta-button {
        width: 280px;
        height: 50px;
        font-size: 16px;
    }

    .cta-title {
        font-size: 28px;
    }

    .footer-content-row-black {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }

    .footer-services-col-black,
    .footer-socials-col-black {
        width: 100%;
        align-items: center;
    }

    .footer-brand-col-black {
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 20px;
        width: 100%;
    }

    .footer-bottom-row-black {
        flex-direction: column-reverse;
        gap: 15px;
        padding-bottom: 20px;
    }

    .modal-title {
        margin-right: 20px;
    }

    /* --- ABOUT PAGE --- */

    .about-hero {
        padding: 80px 20px 40px;
        min-height: auto;
        /* Вимикаємо прив'язку до висоти екрану */
    }

    .about-hero-title {
        font-size: 36px;
        /* Значне зменшення для мобілок */
        margin-bottom: 20px;
    }

    .about-hero-subtitle {
        font-size: 18px;
    }

    /* DNA: Зменшуємо висоту фото */
    .dna-image-wrapper {
        height: 300px;
        border-radius: 30px;
    }

    .dna-content h1 {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .dna-content h2 {
        font-size: 28px;
        margin-bottom: 20px;
    }

    /* Principles: 1 Column (Stack) */
    .principles-section {
        padding: 60px 20px 20px 20px;
    }

    .principles-grid {
        grid-template-columns: 1fr;
        /* Всі картки одна під одною */
        gap: 20px;
    }

    /* Скидаємо розтягування останньої картки, бо тепер всі на всю ширину */
    .principle-card:last-child {
        grid-column: auto;
    }

    /* Stats Strip: Менший шрифт */
    .stat-item {
        font-size: 24px;
        gap: 30px;
        /* Менша відстань між словами */
    }


    /* --- PRIVACY PAGE --- */
    .privacy-header {
        padding: 100px 20px 40px;
        border-radius: 0 0 40px 40px;
    }

    .privacy-title {
        font-size: 36px;
    }


    /* --- SERVICE PAGES SHARED STYLES (S1-S5) --- */

    /* 1. Mega Card Container */
    /* Зменшуємо зовнішні відступи, щоб картка була ширшою */
    .sp-mega-card,
    .s2-mega-card,
    .s3-mega-card,
    .s4-mega-card,
    .s5-mega-card {
        margin-left: 10px;
        margin-right: 10px;
        border-radius: 40px;
        /* Трохи менше заокруглення */
    }

    /* 2. Hero Sections */
    .sp-hero,
    .s2-hero,
    .s3-hero,
    .s4-hero,
    .s5-hero {
        padding: 40px 20px;
        gap: 30px;
    }

    .sp-title,
    .s2-title,
    .s3-title,
    .s4-title,
    .s5-title {
        font-size: 40px;
        /* Компактний заголовок */
    }

    .sp-badge,
    .s2-badge,
    .s3-badge,
    .s4-badge,
    .s5-badge {
        font-size: 60px;
        /* Менша цифра */
        top: 15px;
    }

    .sp-image-box,
    .s2-image-box,
    .s3-image-box,
    .s4-image-box,
    .s5-image-box {
        height: 280px;
        /* Компактне hero-зображення */
        border-radius: 30px;
    }

    /* 3. Problem Stripe */
    .sp-problem-stripe,
    .s2-problem-stripe,
    .s3-problem-stripe,
    .s4-problem-stripe,
    .s5-problem-stripe {
        margin: 0 10px;
        /* Менші бічні відступи смуги */
        padding: 30px 20px;
        border-radius: 30px;
    }

    .s2-stripe-text,
    .s3-stripe-text,
    .s4-stripe-text,
    .s5-stripe-text {
        font-size: 20px;
        /* Менший шрифт тексту проблеми */
    }

    /* 4. Details Grid: 1 Column */
    .sp-details-grid,
    .s2-details-grid,
    .s3-details-grid,
    .s4-details-grid,
    .s5-details-grid {
        grid-template-columns: 1fr;
        /* Одна колонка */
        padding: 40px 20px;
        gap: 15px;
    }

    /* 5. Results Box */
    .sp-results-box,
    .s2-results-box,
    .s3-results-box,
    .s4-results-box {
        padding: 30px 20px;
        border-radius: 30px;
    }

    .sp-results-content h3,
    .s2-results-content h3,
    .s3-results-content h3,
    .s4-results-content h3 {
        font-size: 28px;
    }


    /* --- SERVICE 5 SPECIFIC --- */

    /* Accordion Container */
    .s5-accordion-container {
        padding: 30px 20px;
        /* Мінімальні відступи контейнера */
    }

    .s5-acc-header {
        padding: 20px;
        /* Компактний заголовок */
    }

    .s5-acc-title {
        font-size: 18px;
        /* Менший шрифт заголовка акордеону */
    }

    .s5-acc-num {
        font-size: 14px;
        padding: 6px 10px;
    }

    /* Accordion Content */
    .s5-acc-content {
        padding: 0 20px 30px 20px;
        gap: 20px;
    }

    /* Video Layout Adjustments */
    .s5-acc-content.video-layout {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }

    .s5-acc-content.video-layout .s5-description {
        /* Текст лишаємо в одну колонку, бо екран вузький */
        font-size: 15px;
        margin-bottom: 30px;
    }

    /* Complex Video Grid */
    .s5-complex-grid {
        gap: 20px;
        /* Збільшений відступ між рядами для стеку */
        margin-top: 20px;
    }

    /* ЗМІНА: Повертаємось до вертикального стеку */
    .s5-video-row {
        flex-direction: column;
        /* Відео строго один під одним */
        gap: 20px;
        /* Відступ між відео */
    }

    .s5-video-item {
        width: 100%;
        /* Займають всю ширину */
        flex: none;
        border-radius: 20px;
    }

    /* Скидаємо специфічну ширину для 9:16, нехай теж буде 100% */
    .item-9-16 {
        width: 100%;
    }

    /* Кнопка Play нормального розміру */
    .s5-play-btn {
        width: 60px;
        height: 60px;
    }

    .s5-play-btn svg {
        width: 24px;
        height: 24px;
    }
}

/* =========================================
   RANGE 4: Small Mobile (Max-Width: 479px)
   ========================================= */
@media (max-width: 479px) {

    /* --- ARSENAL CARDS (COMPACT STACKING) --- */
    .service-card {
        min-height: 500px;
        padding: 10px 10px 20px 10px;
    }

    .card-image-box {
        height: 220px;
        border-radius: 40px 40px 40px 40px;
    }

    .card-title {
        font-size: 24px;
    }

    .card-title {
        font-size: 20px;
    }

    .card-subtitle,
    .card-description-col {
        font-size: 12px;
    }

    .card-yellow {
        top: 80px;
        margin-bottom: 120px;
        /* 4 * 40 */
    }

    .card-lime {
        top: 110px;
        margin-bottom: 90px;
        /* 3 * 40 */
    }

    .card-salmon {
        top: 140px;
        margin-bottom: 60px;
        /* 2 * 40 */
    }

    .card-peach {
        top: 170px;
        margin-bottom: 30px;
        /* 1 * 40 */
    }

    .card-ai {
        top: 200px;
        margin-bottom: 0px;
        /* 0 * 40 */
    }

    /* --- FOOTER COMPACT --- */
    .glass-footer {
        padding: 30px 20px 5px 20px;
    }

    .logo-text {
        font-size: 42px;
    }

    .logo-img {
        height: 40px;
    }

    .footer-email {
        font-size: 16px;
    }

    .footer-col-title {
        font-size: 13px;
    }

    .footer-link,
    .social-link {
        font-size: 14px;
    }

    .glass-footer-black {
        padding: 30px 20px 5px 20px;
    }

    .logo-text-black {
        font-size: 42px;
    }

    .logo-img-black {
        height: 40px;
    }

    .footer-email-black {
        font-size: 16px;
    }

    .footer-col-title-black {
        font-size: 13px;
    }

    .footer-email-black {
        font-size: 16px;
    }

    .footer-col-title-black {
        font-size: 13px;
    }

    .footer-link-black,
    .social-link-black {
        font-size: 14px;
    }

    /* --- GLOBAL & ABOUT PAGE --- */

    .about-hero {
        padding: 80px 15px 30px;
        /* Мінімальні відступи */
    }

    .about-hero-title {
        font-size: 32px;
        /* Щоб поміщалися довгі слова */
        margin-bottom: 15px;
    }

    .about-hero-subtitle {
        font-size: 16px;
        line-height: 1.5;
    }

    /* DNA Section */
    .about-dna {
        padding: 40px 15px;
    }

    .dna-grid {
        gap: 30px;
    }

    .dna-image-wrapper {
        height: 220px;
        /* Компактніше фото */
        border-radius: 20px;
    }

    .dna-content h1 {
        font-size: 28px;
    }

    .dna-content h2 {
        font-size: 24px;
    }

    .dna-text {
        font-size: 16px;
    }

    /* Principles */
    .principles-section {
        padding: 40px 15px 15px 15px;
    }

    .principle-card {
        padding: 25px 20px;
        border-radius: 20px;
    }

    .p-number {
        font-size: 40px;
        margin-bottom: 10px;
    }

    .p-title {
        font-size: 20px;
    }

    /* Stats Strip */
    .stats-strip {
        padding: 40px 0;
    }

    .stat-item {
        font-size: 18px;
        /* Зменшуємо біжучий рядок */
        gap: 20px;
    }

    /* --- PRIVACY PAGE --- */
    .privacy-header {
        padding: 80px 15px 30px;
    }

    .privacy-title {
        font-size: 30px;
    }

    .privacy-h2 {
        font-size: 24px;
    }


    /* --- SERVICE PAGES SHARED STYLES (S1-S5) --- */

    /* 1. Mega Card Container */
    /* Робимо картку майже на всю ширину, щоб виграти місце всередині */
    .sp-mega-card,
    .s2-mega-card,
    .s3-mega-card,
    .s4-mega-card,
    .s5-mega-card {
        margin-left: 5px;
        margin-right: 5px;
        border-radius: 30px;
        width: auto;
    }

    /* 2. Hero Sections */
    .sp-hero,
    .s2-hero,
    .s3-hero,
    .s4-hero,
    .s5-hero {
        padding: 30px 15px;
        /* Дуже компактно */
        gap: 25px;
    }

    .sp-breadcrumbs,
    .s2-breadcrumbs,
    .s3-breadcrumbs,
    .s4-breadcrumbs,
    .s5-breadcrumbs {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .sp-title,
    .s2-title,
    .s3-title,
    .s4-title,
    .s5-title {
        font-size: 32px;
        /* Мобільний стандарт */
        margin-bottom: 20px;
    }

    .sp-description,
    .s2-description,
    .s3-description,
    .s4-description,
    .s5-description {
        font-size: 16px;
    }

    /* Badge (Фонова цифра) */
    .sp-badge,
    .s2-badge,
    .s3-badge,
    .s4-badge,
    .s5-badge {
        font-size: 50px;
        top: 10px;
        left: 20px;
        transform: none;
        /* Повертаємо в кут, по центру вона заважатиме тексту */
    }

    /* Якщо хочете по центру, залиште як в 767px, але 50px */

    .sp-image-box,
    .s2-image-box,
    .s3-image-box,
    .s4-image-box,
    .s5-image-box {
        height: 220px;
        border-radius: 20px;
    }

    /* 3. Problem Stripe */
    .sp-problem-stripe,
    .s2-problem-stripe,
    .s3-problem-stripe,
    .s4-problem-stripe,
    .s5-problem-stripe {
        margin: 0 5px;
        /* Майже впритул */
        padding: 25px 15px;
        border-radius: 20px;
        gap: 15px;
    }

    .sp-stripe-label,
    .s2-stripe-label,
    .s3-stripe-label,
    .s4-stripe-label,
    .s5-stripe-label {
        font-size: 12px;
    }

    .s2-stripe-text,
    .s3-stripe-text,
    .s4-stripe-text,
    .s5-stripe-text {
        font-size: 18px;
        /* Зменшуємо текст проблеми */
    }

    /* 4. Details Grid */
    .sp-details-grid,
    .s2-details-grid,
    .s3-details-grid,
    .s4-details-grid,
    .s5-details-grid {
        padding: 30px 15px;
        gap: 15px;
    }

    .sp-detail-item,
    .s2-detail-item,
    .s3-detail-item,
    .s4-detail-item,
    .s5-detail-item {
        padding: 25px 20px;
        border-radius: 20px;
    }

    /* 5. Results & CTA */
    .sp-results-section,
    .s2-results-section,
    .s3-results-section,
    .s4-results-section {
        padding: 0 5px 40px;
        /* Зовнішні відступи секції */
    }

    .sp-results-box,
    .s2-results-box,
    .s3-results-box,
    .s4-results-box {
        padding: 30px 15px;
        border-radius: 25px;
    }

    .sp-cta-btn,
    .s2-cta-btn,
    .s3-cta-btn,
    .s4-cta-btn,
    .s5-cta-btn {
        width: 100%;
        /* Кнопка на всю ширину зручніша для пальця */
        justify-content: center;
        padding: 18px;
        font-size: 16px;
    }

    .s5-cta-section {
        padding: 30px 15px 60px;
    }


    /* --- SERVICE 5 SPECIFIC --- */

    /* Accordion */
    .s5-accordion-container {
        padding: 20px 10px;
        /* Ще менше */
    }

    .s5-acc-header {
        padding: 15px;
    }

    .s5-acc-num {
        display: none;
        /* Ховаємо номер (01, 02), щоб зекономити місце для заголовка */
        /* АБО зменшуємо: font-size: 12px; padding: 4px 8px; */
    }

    .s5-acc-title {
        font-size: 16px;
        /* Менший шрифт, щоб влазило в один рядок частіше */
    }

    .s5-acc-content {
        padding: 0 15px 20px 15px;
    }

    .s5-content-img {
        height: 200px;
        /* Компактне фото всередині акордеону */
    }

    /* Video Layout Adjustments */
    .s5-acc-content.video-layout {
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 20px;
    }

    .s5-video-row {
        gap: 15px;
    }

    .s5-video-item {
        border-radius: 15px;
    }

    /* Play btn */
    .s5-play-btn {
        width: 40px;
        height: 40px;
        border-width: 1px;
    }

    /* Tags wrap */
    .sp-results-tags,
    .s2-results-tags,
    .s3-results-tags,
    .s4-results-tags,
    .s5-tags {
        justify-content: flex-start;
        /* Теги вирівнюємо вліво, бо по центру вони можуть виглядати розірвано */
    }

    .s5-tag,
    .sp-tag,
    .s2-tag,
    .s3-tag,
    .s4-tag {
        font-size: 12px;
        padding: 6px 12px;
    }
}