/* ==========================================================
   Come On Theme — main.css
   Правити кольори/шрифти → блок :root нижче.
   Правити секцію → знайти відповідний коментар.
   ========================================================== */

/* ----------------------------------------------------------
   0. VARIABLES (CSS custom properties)
---------------------------------------------------------- */
:root {
    /* Colors */
    --clr-bg:          #000000;
    --clr-bg-section:  #000000;
    --clr-accent:      #ffb619;
    --clr-white:       #ffffff;
    --clr-black:       #000000;
    --clr-text:        rgba(255, 255, 255, 1);
    --clr-text-muted:  rgba(255, 255, 255, 0.6);
    --clr-text-dim:    rgba(255, 255, 255, 0.5);
    --clr-card-bg:     rgba(217, 217, 217, 0.2);
    --clr-card-border: rgba(255, 255, 255, 0.15);
    --clr-card-shadow: 6px 6px 20px 5px rgba(0, 0, 0, 0.05);

    /* Hero gradient */
    --clr-hero-grad-start: rgb(70, 55, 7);
    --clr-hero-grad-end:   rgb(14, 14, 14);

    /* Typography */
    --font-primary: 'Gilroy', 'Nunito', sans-serif;

    /* Sizes */
    --container-width: 1170px;
    --container-padding: 135px;
    --radius-card: 30px;
    --radius-btn:  20px;
    --radius-pill: 16px;

    /* Transitions */
    --transition: 0.25s ease;
}

/* ----------------------------------------------------------
   1. RESET & BASE
---------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--clr-bg);
    color: var(--clr-text);
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

/* ----------------------------------------------------------
   2. GILROY @font-face
   Покладіть файли у /assets/fonts/ та раскоментуйте нижче.
---------------------------------------------------------- */
/*
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
*/

/* ----------------------------------------------------------
   3. UTILITY CLASSES
---------------------------------------------------------- */
.accent {
    color: var(--clr-accent);
}

.container {
    width: 100%;
    max-width: calc(var(--container-width) + var(--container-padding) * 2);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Section label (small eyebrow text above heading) */
.section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--clr-text-muted);
    margin-bottom: 16px;
}
.section-label--dark {
    color: #333;
}
.section-label__icon {
    width: 14px;
    height: auto;
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   4. BUTTONS
---------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: var(--radius-btn);
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: opacity var(--transition), background var(--transition);
    white-space: nowrap;
    cursor: pointer;
}

.btn--accent {
    background: var(--clr-accent);
    color: #333;
    border: 1px solid rgba(0,0,0,0.18);
}
.btn--accent:hover { opacity: 0.88; }

.btn--white {
    background: var(--clr-white);
    color: #333;
}
.btn--white:hover { opacity: 0.88; }

.btn--outline-white {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--clr-text-dim);
}
.btn--outline-white:hover {
    border-color: rgba(255,255,255,0.8);
    color: var(--clr-white);
}

.btn--sm {
    height: 34px;
    font-size: 11px;
}

/* Button with pill/dot accent inside */
.btn__pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}
.btn__pill--accent { background: var(--clr-accent); }

.btn__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.btn__dot--accent { background: var(--clr-accent); }

/* ----------------------------------------------------------
   5. HEADER / NAVIGATION
---------------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0;
    transition: background var(--transition), backdrop-filter var(--transition);
}

/* Градиент-fade под хедером (как в Figma) */
.header__bg-fade {
    position: absolute;
    inset: 0;
    height: 300px;
    background: linear-gradient(to bottom, #000 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.site-header.is-scrolled .header__bg-fade {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nav {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 50px 0 0;
}

.nav__logo img {
    width: 73px;
    height: auto;
}

/* Центр: меню + кнопка профілю */
.nav__center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.nav__menu-wrap {
    display: flex;
}

.nav__menu {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-btn);
    padding: 4px;
    box-shadow: var(--clr-card-shadow);
}

.nav__item { position: relative; }

.nav__link {
    display: block;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--clr-white);
    border-radius: 14px;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}
.nav__link:hover { background: rgba(255,255,255,0.08); }
.nav__link--active {
    background: #d9d9d9;
    color: #333;
}

/* Кнопка профілю (скляне коло) */
.nav__profile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    box-shadow: var(--clr-card-shadow);
    flex-shrink: 0;
    transition: background var(--transition);
}
.nav__profile-btn:hover { background: rgba(217,217,217,0.35); }
.nav__profile-btn img { width: 18px; height: 18px; }

/* ---- Права частина: кнопка + dropdown ---- */
.nav__contact {
    position: relative;
    flex-shrink: 0;
}

.nav__contact-btn {
    position: relative;
    z-index: 2;
}

/* Dropdown */
.nav__dropdown {
    position: absolute;
    top: 0;         /* вирівнювання з кнопкою зверху */
    right: 0;
    width: 170px;
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    border-radius: 20px;
    box-shadow: var(--clr-card-shadow);
    padding: 52px 12px 12px; /* зверху — місце для кнопки */
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* прихований стан */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity var(--transition), transform var(--transition);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.nav__dropdown.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.nav__dropdown-phones {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 4px;
}

.nav__dropdown-phone {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav__dropdown-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--clr-white);
    white-space: nowrap;
    transition: color var(--transition);
}
.nav__dropdown-link:hover { color: var(--clr-accent); }

.nav__dropdown-socials {
    display: flex;
    gap: 6px;
    padding: 0 4px;
}
.nav__dropdown-social img {
    width: 34px;
    height: 34px;
    transition: opacity var(--transition);
}
.nav__dropdown-social:hover img { opacity: 0.75; }

.nav__dropdown-email {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
}

.nav__dropdown-cta {
    width: 100%;
    justify-content: center;
    border-color: rgba(255,255,255,0.5);
    color: #333;
    background: var(--clr-white);
    border: 1px solid var(--clr-accent);
    border-radius: 17px;
}

/* ----------------------------------------------------------
   6. HERO SECTION
---------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 900px;
    overflow: hidden;
    padding-top: 50px;
}

/* Gradient backgrounds */
.hero__bg-gradient {
    position: absolute;
    inset: 0;
    height: 900px;
    background: linear-gradient(237.83deg, var(--clr-hero-grad-start) 0%, var(--clr-hero-grad-end) 50.254%);
    z-index: 0;
}
.hero__bg-screen {
    position: absolute;
    inset: 0;
    height: 900px;
    background: linear-gradient(237.83deg, var(--clr-hero-grad-start) 0%, rgba(70,55,7,0) 50.254%);
    mix-blend-mode: screen;
    z-index: 1;
}
.hero__fade-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 298px;
    background: linear-gradient(to bottom, #000 0%, transparent 100%);
    z-index: 2;
}
.hero__fade-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 420px;
    background: linear-gradient(to top, #000 0%, transparent 100%);
    z-index: 2;
}

.hero__container {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    min-height: 900px;
    gap: 40px;
}

/* Left column */
.hero__text {
    flex: 0 0 auto;
    width: 420px;
    padding-top: 200px;
    padding-bottom: 60px;
}

.hero__subtitle {
    font-size: 11px;
    font-weight: 500;
    color: var(--clr-text-muted);
    margin-bottom: 24px;
    line-height: 1.6;
    text-align: center;
}

.hero__title {
    font-size: 64px;
    font-weight: 700;
    line-height: 0.8275;
    color: var(--clr-white);
    letter-spacing: -3.2px;
    margin-bottom: 44px;
}

.hero__btn {
    max-width: 300px;
}

/* Right column: dashboard image + duck */
.hero__visual {
    flex: 1;
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.hero__dashboard-img {
    position: absolute;
    top: 109px;
    right: -80px;
    width: 953px;
    max-width: none;
    height: auto;
    z-index: 1;
}

.hero__duck {
    position: absolute;
    top: 180px;
    left: -160px;
    width: 320px;
    height: auto;
    transform: rotate(6.72deg);
    z-index: 0;
}

/* Scroll indicator */
.hero__scroll-indicator {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    opacity: 0.6;
}

/* ----------------------------------------------------------
   7. NEEDS / WHO SECTION
---------------------------------------------------------- */
.needs {
    padding: 100px 0 80px;
    background: var(--clr-bg);
}

.needs__head {
    margin-bottom: 60px;
}

.needs__title {
    font-size: 64px;
    font-weight: 300;
    line-height: 1.18;
    color: var(--clr-text-muted);
    text-align: justify;
    max-width: 970px;
    text-shadow: 0 0 21px #000;
}

/* Rows */
.needs__row {
    display: grid;
    gap: 20px;
    margin-bottom: 0;
}

.needs__row--top {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 20px;
}

.needs__row--bottom {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 20px;
}

/* Cards */
.needs__card {
    position: relative;
    border-radius: var(--radius-card);
    padding: 30px 36px 80px;
    min-height: 370px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--transition), box-shadow var(--transition);
}

.needs__card:hover {
    transform: translateY(-3px);
}

.needs__card--dark {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    box-shadow: var(--clr-card-shadow);
    cursor: pointer;
}

.needs__card--highlight {
    background: var(--clr-white);
    cursor: pointer;
}

/* Yellow bottom bar on highlight card */
.needs__card--highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--clr-accent);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.needs__card-title {
    font-size: 48px;
    font-weight: 500;
    line-height: 1;
    color: var(--clr-white);
    margin-bottom: 16px;
}

.needs__card--highlight .needs__card-title {
    color: var(--clr-black);
}

.needs__card-title--accent {
    color: var(--clr-accent) !important;
}

.needs__card-desc {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: justify;
    flex: 1;
    margin-bottom: 24px;
}
.needs__card--dark .needs__card-desc { color: var(--clr-white); }
.needs__card--highlight .needs__card-desc { color: var(--clr-black); }

.needs__card-toggle {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    z-index: 2;
    transition: transform var(--transition);
    background: none;
    border: none;
}
.needs__card-toggle img {
    width: 48px;
    height: 48px;
}
.needs__card.is-active .needs__card-toggle {
    transform: translateX(-50%) rotate(180deg);
}

/* Expandable detail panel */
.needs__detail {
    background: var(--clr-white);
    border-radius: var(--radius-card);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
}

.needs__detail.is-open {
    max-height: 600px;
}

.needs__detail-content {
    padding: 40px 32px;
}

.needs__detail-title {
    font-size: 32px;
    font-weight: 500;
    color: var(--clr-black);
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Yellow top bar inside detail */
.needs__detail::before {
    content: '';
    display: block;
    height: 56px;
    background: var(--clr-accent);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    transform: rotate(180deg);
}

.needs__detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 24px;
}

.needs__detail-grid p {
    font-size: 16px;
    font-weight: 500;
    color: var(--clr-black);
    text-align: justify;
    line-height: 1.5;
}

/* CTA cell in row 2 */
.needs__cta-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    padding-left: 20px;
}

.needs__cta-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--clr-text-muted);
    text-align: center;
    max-width: 136px;
}

.needs__cta-btn {
    max-width: 300px;
}

/* ----------------------------------------------------------
   8. PORTFOLIO / CASES SECTION
---------------------------------------------------------- */
.portfolio {
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}

/* Decorative gradient repeating from hero */
.portfolio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 298px;
    background: linear-gradient(to bottom, #000 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.portfolio__head {
    position: relative;
    z-index: 2;
    margin-bottom: 48px;
}

.portfolio__title {
    font-size: 36px;
    font-weight: 300;
    color: var(--clr-text-muted);
    text-align: justify;
    text-shadow: 0 0 21px #000;
    max-width: 970px;
}

/* Filter tabs */
.portfolio__filters {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 48px;
    align-items: center;
    justify-content: center;
}

.portfolio__filter {
    height: 32px;
    padding: 0 16px;
    border-radius: 30px;
    border: 1px solid var(--clr-card-border);
    background: var(--clr-card-bg);
    color: var(--clr-text-dim);
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-primary);
    box-shadow: var(--clr-card-shadow);
    transition: background var(--transition), color var(--transition);
    cursor: pointer;
}

.portfolio__filter:hover {
    background: rgba(217,217,217,0.35);
    color: var(--clr-white);
}

.portfolio__filter.is-active {
    background: var(--clr-accent);
    color: var(--clr-black);
    border-color: var(--clr-accent);
}

/* Slider */
.portfolio__slider {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0;
    justify-content: center;
}

.portfolio__track {
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
    max-width: 970px;
    width: 100%;
}

.portfolio__slide {
    flex-shrink: 0;
    border-radius: 20px;
    overflow: hidden;
}

.portfolio__slide img {
    width: 100%;
    height: auto;
    display: block;
}

.portfolio__slide--main {
    width: 100%;
    z-index: 2;
    position: relative;
}

.portfolio__slide--side {
    width: 180px;
    position: absolute;
    opacity: 0.5;
    filter: blur(4px);
}

.portfolio__slide--left {
    left: 0;
    transform: translateX(-40%);
    mask-image: linear-gradient(to right, transparent 0%, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 100%);
}

.portfolio__slide--right {
    right: 0;
    transform: translateX(40%);
    mask-image: linear-gradient(to left, transparent 0%, black 100%);
    -webkit-mask-image: linear-gradient(to left, transparent 0%, black 100%);
}

/* Arrow buttons */
.portfolio__arrow {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity var(--transition);
    z-index: 3;
}
.portfolio__arrow:hover { opacity: 0.7; }
.portfolio__arrow img { width: 70px; height: 70px; }

/* Dots */
.portfolio__dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 24px;
}
.portfolio__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transition: background var(--transition), transform var(--transition);
}
.portfolio__dot.is-active {
    background: var(--clr-accent);
    transform: scale(1.3);
}

.portfolio__cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

/* ----------------------------------------------------------
   9. PROCESS SECTION (How we create)
---------------------------------------------------------- */
.process {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* Decorative gradient */
.process::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 298px;
    background: linear-gradient(to bottom, #000 0%, transparent 100%);
    pointer-events: none;
}
.process::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 420px;
    background: linear-gradient(to top, #000 0%, transparent 100%);
    pointer-events: none;
}

/* Decorative blurred duck */
.process__deco {
    position: absolute;
    right: -180px;
    top: 50%;
    transform: translateY(-50%);
    width: 707px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}
.process__deco-img {
    width: 100%;
    filter: blur(17px);
    transform: rotate(14.73deg);
}

.process .container {
    position: relative;
    z-index: 1;
}

.process__title {
    font-size: 64px;
    font-weight: 300;
    color: var(--clr-text-muted);
    text-align: center;
    margin-bottom: 60px;
}

/* Steps accordion */
.process__steps {
    max-width: 770px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.process__step {
    border-radius: var(--radius-card);
    overflow: hidden;
}

.process__step-header {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 24px;
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--clr-card-shadow);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition);
    font-family: var(--font-primary);
}

.process__step.is-open .process__step-header {
    background: var(--clr-white);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    border-bottom-color: transparent;
}

.process__step-num {
    font-size: 48px;
    font-weight: 500;
    color: var(--clr-accent);
    min-width: 60px;
    line-height: 1;
}

.process__step.is-open .process__step-num {
    color: var(--clr-accent);
}

.process__step-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.process__step-name {
    font-size: 20px;
    font-weight: 500;
    color: var(--clr-white);
    line-height: 1.3;
}

.process__step.is-open .process__step-name {
    color: #333;
}

.process__step-sub {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    line-height: 1.4;
}

.process__step.is-open .process__step-sub {
    color: #333;
}

.process__step-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.process__toggle-icon {
    width: 36px;
    height: 36px;
    transition: transform var(--transition);
    transform: rotate(90deg); /* default = '+' rotated = '×' */
}
.process__step.is-open .process__toggle-icon {
    transform: rotate(45deg);
}

/* Step body */
.process__step-body {
    max-height: 0;
    overflow: hidden;
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    border-top: none;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    transition: max-height 0.4s ease;
}

.process__step.is-open .process__step-body {
    max-height: 400px;
    background: rgba(217,217,217,0.2);
}

.process__step-detail {
    padding: 30px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
}

.process__point-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--clr-accent);
    margin-bottom: 10px;
}

.process__step-point p {
    font-size: 14px;
    font-weight: 500;
    color: var(--clr-white);
    line-height: 1.6;
}

/* ----------------------------------------------------------
   10. PACKAGES / PRICING SECTION
---------------------------------------------------------- */
.packages {
    padding: 100px 0;
    background: var(--clr-white);
    position: relative;
}

.packages__head {
    position: relative;
    text-align: right;
    margin-bottom: 60px;
}

.packages__title {
    font-size: 64px;
    font-weight: 300;
    color: var(--clr-black);
    text-align: right;
}
.packages__title .accent { font-weight: 500; }

.packages__deco {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.packages__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Card base */
.packages__card {
    border-radius: var(--radius-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--clr-card-shadow);
}

.packages__card--featured {
    background: var(--clr-accent);
    border: 1px solid var(--clr-accent);
}

.packages__card--outlined {
    background: transparent;
    border: 1px solid var(--clr-accent);
}

.packages__card-body {
    flex: 1;
    padding: 32px 36px 24px;
}

.packages__card-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--clr-black);
    margin-bottom: 8px;
    line-height: 1.3;
}

.packages__card-tagline {
    font-size: 16px;
    font-weight: 500;
    color: var(--clr-white);
    margin-bottom: 16px;
    text-transform: uppercase;
}
.packages__card-tagline--accent {
    color: var(--clr-accent);
}

.packages__card-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--clr-black);
    line-height: 1.6;
    margin-bottom: 24px;
}

.packages__card-features-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--clr-black);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.packages__card--outlined .packages__card-features-title {
    color: var(--clr-accent);
}

.packages__card-features ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.packages__card-features li {
    font-size: 16px;
    font-weight: 500;
    color: var(--clr-black);
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
}

.packages__card-features li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--clr-black);
}

.packages__card-footer {
    padding: 16px 36px 32px;
    display: flex;
    justify-content: flex-start;
}

/* ----------------------------------------------------------
   11. RESULTS SECTION
---------------------------------------------------------- */
.results {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* Decorative gradient */
.results::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 298px;
    background: linear-gradient(to bottom, #000 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}
.results::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 420px;
    background: linear-gradient(to top, #000 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.results__deco {
    position: absolute;
    left: -200px;
    top: 50%;
    transform: translateY(-30%) scaleY(-1) rotate(167.14deg);
    width: 628px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}
.results__deco-img { width: 100%; }

.results .container {
    position: relative;
    z-index: 1;
}

.results__head {
    margin-bottom: 60px;
}

.results__title {
    font-size: 36px;
    font-weight: 300;
    color: var(--clr-text-muted);
    text-align: justify;
    text-shadow: 0 0 21px #000;
    max-width: 970px;
}

.results__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 970px;
}

.results__item {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--clr-card-shadow);
    padding: 28px 44px;
    min-height: 167px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

.results__item--compact {
    min-height: 140px;
}

.results__item-title {
    font-size: 32px;
    font-weight: 500;
    color: var(--clr-accent);
    line-height: 1.1;
}

.results__item-text {
    font-size: 20px;
    font-weight: 500;
    color: var(--clr-white);
    line-height: 1.5;
}

/* ----------------------------------------------------------
   12. CTA BANNER
---------------------------------------------------------- */
.cta-banner {
    padding: 60px 0 80px;
}

.cta-banner__inner {
    background: var(--clr-accent);
    border: 1px solid var(--clr-accent);
    border-radius: var(--radius-card);
    max-width: 970px;
    margin: 0 auto;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    box-shadow: var(--clr-card-shadow);
}

.cta-banner__title {
    font-size: 36px;
    font-weight: 700;
    color: var(--clr-black);
    text-align: center;
}

.cta-banner__btn {
    height: 40px;
    min-width: 370px;
    justify-content: center;
}

/* ----------------------------------------------------------
   13. FOOTER
---------------------------------------------------------- */
.site-footer {
    background: transparent;
}

.footer__inner {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    border-radius: 20px 20px 0 0;   /* тільки верхні кути */
    box-shadow: var(--clr-card-shadow);
    padding: 40px 44px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 40px;
    align-items: center;
    min-height: 160px;
}

/* Ліва колонка */
.footer__left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.footer__logo img {
    width: 73px;
    height: auto;
    opacity: 0.9;
}

/* Центральна колонка: навігація */
.footer__nav {
    display: flex;
    gap: 60px;
    justify-content: center;
}

.footer__nav-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer__nav-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--clr-white);
    white-space: nowrap;
    transition: color var(--transition);
}
.footer__nav-link:hover { color: var(--clr-accent); }

/* Права колонка: контакти */
.footer__contacts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.footer__contact-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer__contact-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--clr-white);
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--transition);
}
.footer__contact-link:hover { color: var(--clr-accent); }

.footer__contact-link--email {
    text-transform: none;
    font-size: 13px;
}

.footer__socials {
    display: flex;
    gap: 8px;
}

.footer__social img {
    width: 36px;
    height: 36px;
    transition: opacity var(--transition);
}
.footer__social:hover img { opacity: 0.75; }

/* Кнопка "Залишити заявку" */
.footer__cta {
    color: rgba(255,255,255,0.5);
}

/* ----------------------------------------------------------
   14. SCROLL ANIMATIONS (fade-in on scroll)
   Елементи з класом .reveal стають видимими при скролі.
---------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ----------------------------------------------------------
   15. RESPONSIVE
   Базова версія — 1440px. Нижче — адаптація.
---------------------------------------------------------- */

/* 1280px */
@media (max-width: 1280px) {
    :root {
        --container-padding: 60px;
    }
    .hero__dashboard-img {
        right: -40px;
        width: 780px;
    }
    .hero__title { font-size: 52px; }
    .needs__title { font-size: 48px; }
    .process__title { font-size: 48px; }
    .packages__title { font-size: 48px; }
}

/* 1024px */
@media (max-width: 1024px) {
    :root {
        --container-padding: 32px;
    }
    .hero__container {
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
        padding-top: 120px;
        padding-bottom: 60px;
        gap: 60px;
    }
    .hero__text {
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
    }
    .hero__visual {
        width: 100%;
        height: 400px;
    }
    .hero__dashboard-img {
        position: relative;
        top: auto; right: auto;
        width: 100%;
        max-width: 100%;
    }
    .hero__duck { display: none; }
    .hero { min-height: auto; }

    .needs__row--top,
    .needs__row--bottom {
        grid-template-columns: repeat(2, 1fr);
    }
    .needs__detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .packages__grid {
        grid-template-columns: 1fr;
    }
    .footer__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer__nav { justify-content: center; }
    .footer__contacts { align-items: center; }
}

/* 768px */
@media (max-width: 768px) {
    :root {
        --container-padding: 20px;
    }
    .site-header { padding: 20px 0; }
    .nav__menu { display: none; } /* Замініть на мобільне меню при потребі */

    .hero__title { font-size: 40px; letter-spacing: -1px; }
    .needs__title { font-size: 32px; }
    .needs__row--top,
    .needs__row--bottom { grid-template-columns: 1fr; }
    .needs__detail-grid { grid-template-columns: 1fr; }
    .needs__card { min-height: auto; }

    .portfolio__filters { flex-direction: column; align-items: stretch; }
    .portfolio__filter { text-align: center; }

    .process__title { font-size: 32px; }
    .process__step-detail { grid-template-columns: 1fr; }
    .process__step-num { font-size: 32px; min-width: 40px; }

    .packages__title { font-size: 32px; }
    .results__item-title { font-size: 22px; }
    .results__item-text { font-size: 16px; }

    .cta-banner__btn { min-width: auto; width: 100%; }
    .footer__inner { grid-template-columns: 1fr; text-align: center; }
    .footer__left { align-items: center; }
    .footer__nav { flex-direction: column; gap: 16px; }
    .footer__nav-col { flex-direction: row; flex-wrap: wrap; gap: 12px; justify-content: center; }
    .footer__contacts { align-items: center; }
    .footer__socials { justify-content: center; }
}

/* ----------------------------------------------------------
   16. POPUP (форма зворотного зв'язку)
---------------------------------------------------------- */

/* Оверлей */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}
.popup-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Попап-картка */
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%);
    z-index: 201;
    width: 420px;
    max-width: calc(100vw - 32px);
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid var(--clr-card-border);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    padding: 40px 34px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.popup.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}

/* Кнопка закрити */
.popup__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--transition);
}
.popup__close:hover { opacity: 1; }
.popup__close img { width: 16px; height: 16px; }

/* Заголовок */
.popup__title {
    font-size: 24px;
    font-weight: 600;
    color: var(--clr-white);
    text-align: center;
    letter-spacing: -1.2px;
    line-height: 1.25;
}

/* Поля форми */
.popup__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.popup__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.popup__label {
    font-size: 14px;
    font-weight: 500;
    color: var(--clr-white);
    letter-spacing: -0.7px;
}

.popup__required {
    color: #de0000;
    font-weight: 600;
}

.popup__input,
.popup__textarea {
    width: 100%;
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    border-radius: 17px;
    padding: 0 18px;
    height: 34px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 400;
    color: var(--clr-white);
    letter-spacing: -0.6px;
    outline: none;
    box-shadow: var(--clr-card-shadow);
    transition: border-color var(--transition);
}
.popup__input::placeholder,
.popup__textarea::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
.popup__input:focus,
.popup__textarea:focus {
    border-color: rgba(255, 255, 255, 0.4);
}
.popup__input.is-invalid,
.popup__textarea.is-invalid {
    border-color: #de0000;
}

.popup__textarea {
    height: 90px;
    padding: 10px 18px;
    resize: vertical;
    border-radius: 17px;
}

/* Згода GDPR */
.popup__consent {
    display: flex;
    align-items: flex-start;
}

.popup__consent-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: var(--clr-white);
    letter-spacing: -0.7px;
}

/* Приховуємо нативний чекбокс */
.popup__checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Кастомний чекбокс */
.popup__checkbox-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border: 1px solid var(--clr-white);
    border-radius: 3px;
    flex-shrink: 0;
    transition: background var(--transition), border-color var(--transition);
}
.popup__checkbox:checked + .popup__checkbox-custom {
    background: var(--clr-accent);
    border-color: var(--clr-accent);
}
.popup__checkbox:checked + .popup__checkbox-custom::after {
    content: '';
    display: block;
    width: 7px;
    height: 5px;
    border-left: 1.5px solid #000;
    border-bottom: 1.5px solid #000;
    transform: rotate(-45deg) translateY(-1px);
}

/* Кнопка відправити */
.popup__submit {
    align-self: center;
    height: 34px;
    width: 138px;
    justify-content: center;
    border-radius: 17px;
    font-size: 15px;
    letter-spacing: -0.75px;
    text-transform: none;
}

/* reCAPTCHA */
.popup__captcha {
    display: flex;
    justify-content: center;
}

/* Повідомлення успіх/помилка */
.popup__feedback {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    padding: 10px;
}
.popup__feedback--success {
    color: #4caf50;
    background: rgba(76, 175, 80, 0.1);
}
.popup__feedback--error {
    color: #de0000;
    background: rgba(222, 0, 0, 0.08);
}

/* Адаптив попапу */
@media (max-width: 480px) {
    .popup {
        padding: 32px 20px 24px;
    }
    .popup__title { font-size: 20px; }
}

/* ----------------------------------------------------------
   17. CONTACT FORM 7 — переопределение стилів під дизайн
   Всі стилі CF7 перезаписуються тут.
   Нічого більше чіпати не треба.
---------------------------------------------------------- */

/* Загальна обгортка */
.popup__cf7-wrap .wpcf7 {
    margin: 0;
    padding: 0;
}

.popup__cf7-wrap .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Приховуємо стандартний CF7 spinner/loader */
.popup__cf7-wrap .wpcf7-spinner {
    display: none !important;
}

/* Підписи полів (якщо використовуєте [label]) */
.popup__cf7-wrap .wpcf7-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--clr-white);
    letter-spacing: -0.7px;
}

/* Текстові поля та tel */
.popup__cf7-wrap .wpcf7-text,
.popup__cf7-wrap .wpcf7-tel,
.popup__cf7-wrap .wpcf7-email,
.popup__cf7-wrap input[type="text"],
.popup__cf7-wrap input[type="tel"],
.popup__cf7-wrap input[type="email"] {
    display: block;
    width: 100%;
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    border-radius: 17px;
    padding: 0 18px;
    height: 34px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 400;
    color: var(--clr-white);
    letter-spacing: -0.6px;
    outline: none;
    box-shadow: var(--clr-card-shadow);
    transition: border-color var(--transition);
}

.popup__cf7-wrap .wpcf7-text::placeholder,
.popup__cf7-wrap .wpcf7-tel::placeholder,
.popup__cf7-wrap .wpcf7-email::placeholder,
.popup__cf7-wrap input[type="text"]::placeholder,
.popup__cf7-wrap input[type="tel"]::placeholder,
.popup__cf7-wrap input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.popup__cf7-wrap .wpcf7-text:focus,
.popup__cf7-wrap .wpcf7-tel:focus,
.popup__cf7-wrap .wpcf7-email:focus,
.popup__cf7-wrap input[type="text"]:focus,
.popup__cf7-wrap input[type="tel"]:focus,
.popup__cf7-wrap input[type="email"]:focus {
    border-color: rgba(255, 255, 255, 0.4);
}

/* Помилка валідації — виділення поля */
.popup__cf7-wrap .wpcf7-not-valid {
    border-color: #de0000 !important;
}

/* Текстова область */
.popup__cf7-wrap .wpcf7-textarea,
.popup__cf7-wrap textarea {
    display: block;
    width: 100%;
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    border-radius: 17px;
    padding: 10px 18px;
    min-height: 90px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 400;
    color: var(--clr-white);
    letter-spacing: -0.6px;
    outline: none;
    box-shadow: var(--clr-card-shadow);
    resize: vertical;
    transition: border-color var(--transition);
}
.popup__cf7-wrap .wpcf7-textarea::placeholder,
.popup__cf7-wrap textarea::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
.popup__cf7-wrap .wpcf7-textarea:focus,
.popup__cf7-wrap textarea:focus {
    border-color: rgba(255, 255, 255, 0.4);
}

/* Checkbox (згода на обробку даних) */
.popup__cf7-wrap .wpcf7-acceptance {
    display: flex;
    align-items: center;
    gap: 10px;
}

.popup__cf7-wrap .wpcf7-acceptance .wpcf7-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.popup__cf7-wrap .wpcf7-acceptance input[type="checkbox"] {
    /* Приховуємо нативний */
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border: 1px solid var(--clr-white);
    border-radius: 3px;
    flex-shrink: 0;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
    position: relative;
}
.popup__cf7-wrap .wpcf7-acceptance input[type="checkbox"]:checked {
    background: var(--clr-accent);
    border-color: var(--clr-accent);
}
.popup__cf7-wrap .wpcf7-acceptance input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 2px;
    width: 7px;
    height: 5px;
    border-left: 1.5px solid #000;
    border-bottom: 1.5px solid #000;
    transform: rotate(-45deg);
}

.popup__cf7-wrap .wpcf7-acceptance .wpcf7-list-item-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--clr-white);
    letter-spacing: -0.7px;
    cursor: pointer;
}

/* Кнопка Submit */
.popup__cf7-wrap input[type="submit"],
.popup__cf7-wrap .wpcf7-submit {
    display: block;
    margin: 4px auto 0;
    width: 138px;
    height: 34px;
    background: var(--clr-accent);
    color: #333;
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 17px;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.75px;
    cursor: pointer;
    transition: opacity var(--transition);
}
.popup__cf7-wrap input[type="submit"]:hover,
.popup__cf7-wrap .wpcf7-submit:hover {
    opacity: 0.88;
}
.popup__cf7-wrap input[type="submit"]:disabled,
.popup__cf7-wrap .wpcf7-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Повідомлення після відправки */
.popup__cf7-wrap .wpcf7-response-output {
    margin: 0;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    border: none !important;
}

/* Успіх */
.popup__cf7-wrap .wpcf7-mail-sent-ok {
    background: rgba(76, 175, 80, 0.12);
    color: #4caf50;
}

/* Помилка */
.popup__cf7-wrap .wpcf7-mail-sent-ng,
.popup__cf7-wrap .wpcf7-aborted,
.popup__cf7-wrap .wpcf7-spam-blocked,
.popup__cf7-wrap .wpcf7-validation-errors {
    background: rgba(222, 0, 0, 0.08);
    color: #de0000;
}

/* Підказки валідації під полями */
.popup__cf7-wrap .wpcf7-not-valid-tip {
    font-size: 11px;
    color: #de0000;
    margin-top: 4px;
    display: block;
}

/* Повідомлення-заглушка якщо CF7 не встановлений */
.popup__cf7-notice {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    text-align: center;
    padding: 16px 0;
    line-height: 1.6;
}
.popup__cf7-notice a {
    color: var(--clr-accent);
    text-decoration: underline;
}
.popup__cf7-notice code {
    background: rgba(255,255,255,0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

/* ==========================================================
   18. HOME PAGE (front-page.php)
   ========================================================== */

/* ----------------------------------------------------------
   18.1 HERO
---------------------------------------------------------- */
.home-hero {
    position: relative;
    min-height: 900px;
    overflow: hidden;
}

/* Фони */
.home-hero__bg-gradient {
    position: absolute;
    inset: 0;
    height: 900px;
    background: linear-gradient(237.83deg, rgb(70, 55, 7) 0%, rgb(14, 14, 14) 50.254%);
    z-index: 0;
}

.home-hero__bg-thumbnail {
    position: absolute;
    top: 0;
    right: -200px;               /* виходить за межі, як у Figma */
    width: 65%;
    height: 900px;
    z-index: 1;
    overflow: hidden;
}
.home-hero__bg-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}
.home-hero__bg-filter {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #0e0e0e 0%, rgba(14,14,14,0) 40%);
}

.home-hero__fade-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 298px;
    background: linear-gradient(to bottom, #000 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}
.home-hero__fade-bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 327px;
    background: linear-gradient(to top, #000 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

/* Основна раскладка */
.home-hero__container {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 400px 1fr 260px;
    gap: 0;
    align-items: start;
    padding-top: 50px;
    min-height: 900px;
}

/* Ліва колонка */
.home-hero__left {
    display: flex;
    flex-direction: column;
    padding-top: 194px;
    gap: 0;
}

.home-hero__eyebrow {
    font-size: 11px;
    font-weight: 500;
    color: var(--clr-text-muted);
    text-align: center;
    line-height: 1.6;
    margin-bottom: 37px;
    align-self: center;
}

.home-hero__title {
    font-size: 64px;
    font-weight: 700;
    color: var(--clr-white);
    letter-spacing: -3.2px;
    line-height: 0.8275;
    margin-bottom: 0;
}

.home-hero__cta {
    margin-top: 85px;
    max-width: 300px;
    width: 300px;
}

/* Статистика */
.home-hero__stats {
    display: flex;
    gap: 16px;
    margin-top: 40px;
}

.home-hero__stat {
    background: var(--clr-white);
    border-radius: 20px;
    padding: 20px 16px 16px;
    width: 170px;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-hero__stat-num {
    font-size: 32px;
    font-weight: 500;
    color: #333;
    text-align: right;
    line-height: 1;
}

.home-hero__stat-accent {
    font-size: 12px;
    font-weight: 500;
    color: var(--clr-accent);
    text-align: right;
    display: block;
}

.home-hero__stat-desc {
    font-size: 11px;
    font-weight: 500;
    color: rgba(51, 51, 51, 0.5);
    line-height: 1.5;
    margin-top: 4px;
}

/* Середня колонка */
.home-hero__mid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 208px;
    padding-left: 20px;
}

.home-hero__mid-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--clr-text-muted);
    text-align: center;
    line-height: 1.6;
    max-width: 136px;
}

/* Права колонка */
.home-hero__right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-top: 200px;
}

/* Карточка "12 років" */
.home-hero__exp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.home-hero__exp-duck {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 190px;
}

.home-hero__duck-img {
    width: 214px;
    height: auto;
    transform: rotate(6.72deg);
    position: relative;
    z-index: 0;
}

.home-hero__exp-badge {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--clr-white);
    border-radius: 14px;
    padding: 12px 20px 6px;
    text-align: center;
    z-index: 1;
    min-width: 134px;
}

.home-hero__exp-num {
    display: block;
    font-size: 32px;
    font-weight: 500;
    color: #333;
    line-height: 1;
    text-align: center;
}

.home-hero__exp-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--clr-accent);
    text-align: center;
    white-space: nowrap;
}

.home-hero__exp-sub {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    text-align: center;
    max-width: 136px;
    line-height: 1.5;
}

.home-hero__avatars {
    display: flex;
    gap: 0;
}

.home-hero__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--clr-bg);
    margin-left: -6px;
}
.home-hero__avatar:first-child { margin-left: 0; }

/* Соцмережі */
.home-hero__socials {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.home-hero__social-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.home-hero__social-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    text-align: center;
    line-height: 1.3;
}

.home-hero__social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 20px;
    transition: border-color var(--transition), background var(--transition);
}
.home-hero__social-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.9);
}
.home-hero__social-btn img {
    width: 20px;
    height: 20px;
}

/* ----------------------------------------------------------
   18.2 ABOUT
---------------------------------------------------------- */
.home-about {
    padding: 100px 0 80px;
    background: var(--clr-bg);
}

.home-about__container {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 60px;
    align-items: start;
}

.home-about__left {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.home-about__note {
    font-size: 11px;
    font-weight: 500;
    color: var(--clr-text-muted);
    line-height: 1.7;
}

.home-about__title {
    font-size: 36px;
    font-weight: 300;
    color: var(--clr-text-muted);
    text-align: justify;
    text-shadow: 0 0 21px #000;
    line-height: 1.3;
}
.home-about__title .accent { font-weight: 500; }

/* ----------------------------------------------------------
   18.3 HOW WE WORK (кроки)
---------------------------------------------------------- */
.home-steps {
    padding: 60px 0 100px;
    background: var(--clr-bg);
}

.home-steps__grid {
    display: grid;
    grid-template-columns: repeat(3, 270px);
    gap: 0;
    justify-content: center;
    margin-bottom: 0;
}

/* Картки */
.home-steps__card {
    width: 270px;
    height: 270px;
    border-radius: 30px;
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-steps__card--dark {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    box-shadow: var(--clr-card-shadow);
}

.home-steps__card--white {
    background: var(--clr-white);
}

.home-steps__num {
    font-size: 48px;
    font-weight: 500;
    color: var(--clr-white);
    line-height: 1;
}
.home-steps__num--accent { color: var(--clr-accent); }

.home-steps__name {
    font-size: 20px;
    font-weight: 500;
    color: var(--clr-white);
    line-height: 1.3;
}
.home-steps__name--dark { color: #333; }

.home-steps__desc {
    font-size: 20px;
    font-weight: 500;
    color: var(--clr-white);
    line-height: 1.4;
}
.home-steps__desc--dark { color: #333; }

.home-steps__sub {
    font-size: 13px;
    font-weight: 500;
    color: rgba(51,51,51,0.5);
    line-height: 1.5;
    margin-top: auto;
}

/* Лінія-роздільник під картками */
.home-steps__line {
    height: 1px;
    background: rgba(255,255,255,0.12);
    margin: 0 auto;
    max-width: 870px;
    margin-top: 0;
}

/* ----------------------------------------------------------
   18.4 RESPONSIVE для home page
---------------------------------------------------------- */
@media (max-width: 1280px) {
    .home-hero__container {
        grid-template-columns: 340px 1fr 220px;
    }
    .home-hero__title { font-size: 52px; }
}

@media (max-width: 1024px) {
    .home-hero__container {
        grid-template-columns: 1fr;
        padding-top: 120px;
        min-height: auto;
        gap: 40px;
    }
    .home-hero__left { padding-top: 0; }
    .home-hero__eyebrow { text-align: left; align-self: flex-start; }
    .home-hero__mid { display: none; }
    .home-hero__right { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding-top: 0; }
    .home-hero__bg-thumbnail { width: 100%; right: 0; opacity: 0.4; }

    .home-about__container { grid-template-columns: 1fr; gap: 30px; }

    .home-steps__grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .home-steps__card { width: 100%; height: auto; min-height: 200px; }
}

@media (max-width: 768px) {
    .home-hero__title { font-size: 40px; letter-spacing: -1px; }
    .home-hero__stats { flex-direction: column; }
    .home-hero__stat { width: 100%; }
    .home-about__title { font-size: 26px; }
}


/* ==========================================================
   19. INNER HERO (спільний для внутрішніх сторінок)
   ========================================================== */

.inner-hero {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.inner-hero--compact {
    min-height: 380px;
}

.inner-hero__bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(237.83deg, rgb(70, 55, 7) 0%, rgb(14, 14, 14) 55%);
    z-index: 0;
}

.inner-hero__fade-bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 200px;
    background: linear-gradient(to top, #000 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

.inner-hero__container {
    position: relative;
    z-index: 2;
    padding-top: 120px;
    padding-bottom: 80px;
}

.inner-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--clr-text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.inner-hero__eyebrow img {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

.inner-hero__title {
    font-size: 56px;
    font-weight: 700;
    color: var(--clr-white);
    letter-spacing: -2.5px;
    line-height: 1.05;
    margin-bottom: 24px;
    max-width: 700px;
}

.inner-hero__subtitle {
    font-size: 15px;
    font-weight: 400;
    color: var(--clr-text-muted);
    line-height: 1.7;
    max-width: 560px;
}

@media (max-width: 768px) {
    .inner-hero { min-height: 340px; }
    .inner-hero--compact { min-height: 280px; }
    .inner-hero__title { font-size: 36px; letter-spacing: -1px; }
    .inner-hero__container { padding-top: 100px; padding-bottom: 60px; }
}


/* ==========================================================
   20. СТОРІНКА "ПРО НАС"
   ========================================================== */

/* ----------------------------------------------------------
   20.1 МІСІЯ
---------------------------------------------------------- */
.about-mission {
    padding: 100px 0 80px;
}

.about-mission__container {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 60px;
    align-items: start;
}

.about-mission__title {
    font-size: 34px;
    font-weight: 300;
    color: var(--clr-text-muted);
    line-height: 1.35;
    margin-bottom: 28px;
}
.about-mission__title .accent { font-weight: 500; }

.about-mission__text {
    font-size: 15px;
    font-weight: 400;
    color: var(--clr-text-muted);
    line-height: 1.75;
    margin-bottom: 16px;
}

/* ----------------------------------------------------------
   20.2 СТАТИСТИКА
---------------------------------------------------------- */
.about-stats {
    padding: 0 0 80px;
}

.about-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: var(--clr-card-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.about-stats__item {
    background: var(--clr-card-bg);
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.about-stats__num {
    font-size: 56px;
    font-weight: 500;
    color: var(--clr-white);
    line-height: 1;
}

.about-stats__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--clr-text-muted);
    line-height: 1.5;
}

/* ----------------------------------------------------------
   20.3 ЦІННОСТІ
---------------------------------------------------------- */
.about-values {
    padding: 0 0 80px;
}

.about-values__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 48px;
}

.about-values__title {
    font-size: 36px;
    font-weight: 500;
    color: var(--clr-white);
    letter-spacing: -1px;
    max-width: 500px;
}

.about-values__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.about-values__card {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-card);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.about-values__icon {
    font-size: 32px;
    font-weight: 500;
    color: var(--clr-accent);
    line-height: 1;
}

.about-values__name {
    font-size: 20px;
    font-weight: 600;
    color: var(--clr-white);
    letter-spacing: -0.5px;
}

.about-values__desc {
    font-size: 13px;
    font-weight: 400;
    color: var(--clr-text-muted);
    line-height: 1.7;
}

/* ----------------------------------------------------------
   20.4 КОМАНДА
---------------------------------------------------------- */
.about-team {
    padding: 0 0 80px;
}

.about-team__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 48px;
}

.about-team__title {
    font-size: 36px;
    font-weight: 500;
    color: var(--clr-white);
    letter-spacing: -1px;
}

.about-team__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.about-team__card {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-card);
    padding: 0 0 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.about-team__photo-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: rgba(255,255,255,0.05);
}

.about-team__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.about-team__card:hover .about-team__photo {
    transform: scale(1.04);
}

.about-team__name {
    font-size: 18px;
    font-weight: 600;
    color: var(--clr-white);
    letter-spacing: -0.5px;
    padding: 20px 24px 4px;
}

.about-team__role {
    font-size: 12px;
    font-weight: 500;
    color: var(--clr-accent);
    padding: 0 24px 12px;
}

.about-team__bio {
    font-size: 13px;
    font-weight: 400;
    color: var(--clr-text-muted);
    line-height: 1.6;
    padding: 0 24px;
}

/* ----------------------------------------------------------
   20.5 ТАЙМЛАЙН
---------------------------------------------------------- */
.about-timeline {
    padding: 0 0 100px;
}

.about-timeline__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 48px;
}

.about-timeline__title {
    font-size: 36px;
    font-weight: 500;
    color: var(--clr-white);
    letter-spacing: -1px;
}

.about-timeline__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 1px solid var(--clr-card-border);
    padding-left: 0;
    margin-left: 60px;
}

.about-timeline__item {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    padding: 32px 0;
    border-bottom: 1px solid var(--clr-card-border);
    position: relative;
}
.about-timeline__item::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 40px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--clr-accent);
}

.about-timeline__year {
    font-size: 32px;
    font-weight: 500;
    color: var(--clr-accent);
    min-width: 80px;
    padding-left: 30px;
    line-height: 1;
    padding-top: 4px;
}

.about-timeline__event {
    font-size: 20px;
    font-weight: 600;
    color: var(--clr-white);
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.about-timeline__detail {
    font-size: 14px;
    font-weight: 400;
    color: var(--clr-text-muted);
    line-height: 1.6;
}

/* Адаптив */
@media (max-width: 1024px) {
    .about-mission__container { grid-template-columns: 1fr; gap: 30px; }
    .about-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .about-values__grid { grid-template-columns: repeat(2, 1fr); }
    .about-team__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .about-stats__grid { grid-template-columns: 1fr 1fr; }
    .about-values__grid { grid-template-columns: 1fr; }
    .about-team__grid { grid-template-columns: 1fr; }
    .about-timeline__list { margin-left: 20px; }
    .about-timeline__item { flex-direction: column; gap: 8px; }
    .about-timeline__year { padding-left: 20px; }
    .about-timeline__title { font-size: 28px; }
}


/* ==========================================================
   21. СТОРІНКА "ПОСЛУГИ"
   ========================================================== */

/* ----------------------------------------------------------
   21.1 СІТКА ПОСЛУГ
---------------------------------------------------------- */
.services-grid-section {
    padding: 80px 0;
}

.services-grid__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 48px;
}

.services-grid__title {
    font-size: 36px;
    font-weight: 500;
    color: var(--clr-white);
    letter-spacing: -1px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.services-card {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-card);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color var(--transition);
}
.services-card:hover {
    border-color: rgba(255,255,255,0.3);
}

.services-card--wide {
    grid-column: span 2;
}

.services-card__num {
    font-size: 13px;
    font-weight: 500;
    color: var(--clr-accent);
    letter-spacing: 1px;
}

.services-card__name {
    font-size: 24px;
    font-weight: 600;
    color: var(--clr-white);
    letter-spacing: -0.8px;
}

.services-card__desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--clr-text-muted);
    line-height: 1.7;
}

.services-card__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.services-card__list li {
    font-size: 13px;
    font-weight: 400;
    color: var(--clr-text-muted);
    padding-left: 16px;
    position: relative;
    line-height: 1.5;
}
.services-card__list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--clr-accent);
}

.services-card__btn {
    margin-top: auto;
    align-self: flex-start;
}

@media (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .services-card--wide { grid-column: span 2; }
}
@media (max-width: 768px) {
    .services-grid { grid-template-columns: 1fr; }
    .services-card--wide { grid-column: span 1; }
}


/* ==========================================================
   22. СТОРІНКА "КЕЙСИ"
   ========================================================== */

/* ----------------------------------------------------------
   22.1 ФІЛЬТРИ
---------------------------------------------------------- */
.cases-section {
    padding: 80px 0 100px;
}

.cases-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 48px;
}

.cases-filter {
    background: transparent;
    border: 1px solid var(--clr-card-border);
    border-radius: 20px;
    padding: 8px 20px;
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 500;
    color: var(--clr-text-muted);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.cases-filter:hover {
    border-color: rgba(255,255,255,0.35);
    color: var(--clr-white);
}
.cases-filter.is-active {
    background: var(--clr-accent);
    border-color: var(--clr-accent);
    color: #333;
}

/* ----------------------------------------------------------
   22.2 СІТКА КЕЙСІВ
---------------------------------------------------------- */
.cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.cases-card {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition);
}
.cases-card:hover {
    border-color: rgba(255,255,255,0.3);
}

.cases-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
}

.cases-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.cases-card:hover .cases-card__thumb img {
    transform: scale(1.04);
}

.cases-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition);
}
.cases-card:hover .cases-card__overlay {
    opacity: 1;
}

.cases-card__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.cases-card__tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--clr-accent);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cases-card__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--clr-white);
    letter-spacing: -0.4px;
    line-height: 1.3;
}

.cases-card__desc {
    font-size: 13px;
    font-weight: 400;
    color: var(--clr-text-muted);
    line-height: 1.65;
    flex: 1;
}

.cases-card__result {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--clr-card-border);
}

.cases-card__result-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--clr-text-muted);
}

.cases-card__result-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--clr-accent);
}

@media (max-width: 1024px) {
    .cases-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .cases-grid { grid-template-columns: 1fr; }
}


/* ==========================================================
   23. СТОРІНКА "КОНТАКТИ"
   ========================================================== */

.contacts-section {
    padding: 80px 0 100px;
}

.contacts-section__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* ----------------------------------------------------------
   23.1 ІНФО
---------------------------------------------------------- */
.contacts-info {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.contacts-info__title {
    font-size: 36px;
    font-weight: 500;
    color: var(--clr-white);
    letter-spacing: -1px;
    margin-bottom: 12px;
}

.contacts-info__subtitle {
    font-size: 15px;
    font-weight: 400;
    color: var(--clr-text-muted);
    line-height: 1.65;
}

.contacts-info__items {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.contacts-info__item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.contacts-info__icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contacts-info__label {
    font-size: 11px;
    font-weight: 500;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.contacts-info__value {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--clr-white);
    line-height: 1.6;
    transition: color var(--transition);
}
a.contacts-info__value:hover {
    color: var(--clr-accent);
}

.contacts-info__socials-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

.contacts-info__socials-row {
    display: flex;
    gap: 12px;
}

.contacts-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    transition: border-color var(--transition), background var(--transition);
}
.contacts-social:hover {
    border-color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.1);
}
.contacts-social img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* ----------------------------------------------------------
   23.2 ФОРМА (inline)
---------------------------------------------------------- */
.contacts-form-wrap {
    position: sticky;
    top: 100px;
}

.contacts-form__card {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-card);
    padding: 40px 36px;
}

.contacts-form__title {
    font-size: 28px;
    font-weight: 600;
    color: var(--clr-white);
    letter-spacing: -0.8px;
    margin-bottom: 10px;
}

.contacts-form__subtitle {
    font-size: 14px;
    font-weight: 400;
    color: var(--clr-text-muted);
    line-height: 1.6;
    margin-bottom: 28px;
}

/* CF7 у contacts використовує ті самі стилі що й popup,
   але через .contacts-cf7-wrap */
.contacts-cf7-wrap .wpcf7 { margin: 0; padding: 0; }
.contacts-cf7-wrap .wpcf7-form { display: flex; flex-direction: column; gap: 14px; }
.contacts-cf7-wrap .wpcf7-spinner { display: none !important; }

.contacts-cf7-wrap .wpcf7-text,
.contacts-cf7-wrap .wpcf7-tel,
.contacts-cf7-wrap .wpcf7-email,
.contacts-cf7-wrap input[type="text"],
.contacts-cf7-wrap input[type="tel"],
.contacts-cf7-wrap input[type="email"] {
    display: block; width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--clr-card-border);
    border-radius: 17px;
    padding: 0 18px; height: 44px;
    font-family: var(--font-primary); font-size: 14px;
    color: var(--clr-white); letter-spacing: -0.5px; outline: none;
    transition: border-color var(--transition);
}
.contacts-cf7-wrap .wpcf7-text::placeholder,
.contacts-cf7-wrap .wpcf7-tel::placeholder,
.contacts-cf7-wrap .wpcf7-email::placeholder,
.contacts-cf7-wrap input[type="text"]::placeholder,
.contacts-cf7-wrap input[type="tel"]::placeholder,
.contacts-cf7-wrap input[type="email"]::placeholder {
    color: rgba(255,255,255,0.4);
}
.contacts-cf7-wrap .wpcf7-text:focus,
.contacts-cf7-wrap .wpcf7-tel:focus,
.contacts-cf7-wrap .wpcf7-email:focus {
    border-color: rgba(255,255,255,0.4);
}

.contacts-cf7-wrap .wpcf7-textarea,
.contacts-cf7-wrap textarea {
    display: block; width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--clr-card-border);
    border-radius: 17px;
    padding: 12px 18px; min-height: 120px;
    font-family: var(--font-primary); font-size: 14px;
    color: var(--clr-white); letter-spacing: -0.5px; outline: none;
    resize: vertical; transition: border-color var(--transition);
}
.contacts-cf7-wrap .wpcf7-textarea::placeholder,
.contacts-cf7-wrap textarea::placeholder { color: rgba(255,255,255,0.4); }
.contacts-cf7-wrap .wpcf7-textarea:focus,
.contacts-cf7-wrap textarea:focus { border-color: rgba(255,255,255,0.4); }

.contacts-cf7-wrap .wpcf7-not-valid { border-color: #de0000 !important; }
.contacts-cf7-wrap .wpcf7-not-valid-tip { font-size: 11px; color: #de0000; margin-top: 4px; display: block; }

.contacts-cf7-wrap .wpcf7-acceptance { display: flex; align-items: center; gap: 10px; }
.contacts-cf7-wrap .wpcf7-acceptance .wpcf7-list-item { display: flex; align-items: center; gap: 10px; margin: 0; }
.contacts-cf7-wrap .wpcf7-acceptance input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 15px; height: 15px;
    border: 1px solid var(--clr-white); border-radius: 4px;
    flex-shrink: 0; cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
    position: relative;
}
.contacts-cf7-wrap .wpcf7-acceptance input[type="checkbox"]:checked {
    background: var(--clr-accent); border-color: var(--clr-accent);
}
.contacts-cf7-wrap .wpcf7-acceptance input[type="checkbox"]:checked::after {
    content: ''; position: absolute;
    top: 2px; left: 3px;
    width: 7px; height: 5px;
    border-left: 1.5px solid #000; border-bottom: 1.5px solid #000;
    transform: rotate(-45deg);
}
.contacts-cf7-wrap .wpcf7-acceptance .wpcf7-list-item-label {
    font-size: 13px; color: var(--clr-text-muted); cursor: pointer;
}

.contacts-cf7-wrap input[type="submit"],
.contacts-cf7-wrap .wpcf7-submit {
    display: block; width: 100%;
    height: 48px;
    background: var(--clr-accent); color: #333;
    border: none; border-radius: 17px;
    font-family: var(--font-primary); font-size: 15px; font-weight: 600;
    letter-spacing: -0.5px; cursor: pointer;
    transition: opacity var(--transition);
    margin-top: 8px;
}
.contacts-cf7-wrap input[type="submit"]:hover { opacity: 0.88; }
.contacts-cf7-wrap input[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }

.contacts-cf7-wrap .wpcf7-response-output {
    margin: 0; padding: 10px 16px; border-radius: 10px;
    font-size: 13px; font-weight: 500; text-align: center; border: none !important;
}
.contacts-cf7-wrap .wpcf7-mail-sent-ok { background: rgba(76,175,80,0.12); color: #4caf50; }
.contacts-cf7-wrap .wpcf7-mail-sent-ng,
.contacts-cf7-wrap .wpcf7-aborted,
.contacts-cf7-wrap .wpcf7-spam-blocked,
.contacts-cf7-wrap .wpcf7-validation-errors { background: rgba(222,0,0,0.08); color: #de0000; }

@media (max-width: 1024px) {
    .contacts-section__container { grid-template-columns: 1fr; gap: 48px; }
    .contacts-form-wrap { position: static; }
}
@media (max-width: 768px) {
    .contacts-form__card { padding: 28px 22px; }
}


/* ==========================================================
   24. СТОРІНКА "FAQ"
   ========================================================== */

.faq-section {
    padding: 80px 0;
}

.faq-section__container {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 60px;
    align-items: start;
}

/* ----------------------------------------------------------
   24.1 КАТЕГОРІЇ (ліва панель)
---------------------------------------------------------- */
.faq-cats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: sticky;
    top: 100px;
}

.faq-cat {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 10px 18px;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    color: var(--clr-text-muted);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.faq-cat:hover {
    background: var(--clr-card-bg);
    color: var(--clr-white);
}
.faq-cat.is-active {
    background: var(--clr-card-bg);
    border-color: var(--clr-card-border);
    color: var(--clr-white);
}

/* ----------------------------------------------------------
   24.2 СПИСОК ПИТАНЬ (права панель)
---------------------------------------------------------- */
.faq-list {
    display: flex;
    flex-direction: column;
}

.faq-group {
    display: none;
}
.faq-group.is-active {
    display: flex;
    flex-direction: column;
}

.faq-item {
    border-bottom: 1px solid var(--clr-card-border);
}

.faq-item__header {
    width: 100%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    cursor: pointer;
    text-align: left;
}

.faq-item__question {
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 500;
    color: var(--clr-white);
    letter-spacing: -0.4px;
    line-height: 1.4;
    transition: color var(--transition);
}
.faq-item__header:hover .faq-item__question {
    color: var(--clr-accent);
}

.faq-item__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--clr-card-border);
    position: relative;
    transition: background var(--transition), border-color var(--transition);
}
.faq-item__icon::before,
.faq-item__icon::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--clr-white);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}
.faq-item__icon::before { width: 10px; height: 1.5px; }
.faq-item__icon::after  { width: 1.5px; height: 10px; }

.faq-item__header[aria-expanded="true"] .faq-item__icon {
    background: var(--clr-accent);
    border-color: var(--clr-accent);
}
.faq-item__header[aria-expanded="true"] .faq-item__icon::before { background: #333; }
.faq-item__header[aria-expanded="true"] .faq-item__icon::after {
    background: #333;
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.faq-item__body {
    display: none;
    padding: 0 0 24px;
}
.faq-item__body p {
    font-size: 15px;
    font-weight: 400;
    color: var(--clr-text-muted);
    line-height: 1.75;
}

.faq-item__header[aria-expanded="true"] + .faq-item__body {
    display: block;
}

/* ----------------------------------------------------------
   24.3 НЕ ЗНАЙШЛИ ВІДПОВІДЬ
---------------------------------------------------------- */
.faq-contact {
    padding: 0 0 100px;
}

.faq-contact__inner {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-card);
    padding: 48px 60px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.faq-contact__duck img {
    width: 100px;
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4));
}

.faq-contact__text {
    flex: 1;
}

.faq-contact__title {
    font-size: 28px;
    font-weight: 600;
    color: var(--clr-white);
    letter-spacing: -0.8px;
    margin-bottom: 8px;
}

.faq-contact__sub {
    font-size: 15px;
    font-weight: 400;
    color: var(--clr-text-muted);
    line-height: 1.6;
}

.faq-contact__btn {
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .faq-section__container { grid-template-columns: 1fr; gap: 40px; }
    .faq-cats { flex-direction: row; flex-wrap: wrap; position: static; }
    .faq-cat { padding: 8px 16px; font-size: 13px; }
}
@media (max-width: 768px) {
    .faq-contact__inner { flex-direction: column; text-align: center; padding: 36px 24px; }
    .faq-contact__duck { display: none; }
    .faq-item__question { font-size: 15px; }
}


/* ==========================================================
   25. CTA BANNER (спільний для всіх сторінок)
   ========================================================== */
.cta-banner {
    padding: 0 0 100px;
}

.cta-banner__inner {
    background: var(--clr-accent);
    border-radius: var(--radius-card);
    padding: 52px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.cta-banner__title {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    letter-spacing: -1px;
    margin-bottom: 10px;
}

.cta-banner__sub {
    font-size: 15px;
    font-weight: 400;
    color: rgba(51,51,51,0.7);
    line-height: 1.6;
    max-width: 440px;
}

.btn--dark {
    background: #333;
    color: var(--clr-white);
    border: 1px solid rgba(255,255,255,0.1);
}
.btn--dark:hover { background: #444; }

.btn__pill--dark {
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .cta-banner__inner { flex-direction: column; align-items: flex-start; padding: 36px 28px; }
    .cta-banner__title { font-size: 26px; }
}