/* Phoenix INVEST — landing styles
   Brand palette extracted from phoenixinvest.com.ua + logo */

:root {
    --color-bg: #0E1F2A;              /* deep slate з зеленим undertone (фон сторінки) */
    --color-bg-card: #15293A;         /* картки трохи світліше */
    --color-bg-card-hover: #1B3447;
    --color-bg-deep: #0A1822;         /* footer / hero overlay */
    --color-text: #FFFFFF;
    --color-text-muted: rgba(255, 255, 255, 0.65);
    --color-text-light: rgba(255, 255, 255, 0.45);
    --color-accent: #D79D32;          /* gold з логотипу — primary */
    --color-accent-bright: #E8B345;   /* hover, кнопки */
    --color-accent-soft: #B8862B;     /* pressed, borders */
    --color-border: rgba(215, 157, 50, 0.18);
    --color-border-soft: rgba(255, 255, 255, 0.08);
    --color-success: #10B981;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);
    --shadow-gold: 0 4px 24px rgba(215, 157, 50, 0.25);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 100px;
    --radius-xl: 28px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* V5.9.10: Кастомний скролбар у тоні сайту (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent-soft) var(--color-bg-deep);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* V5.9.10: Кастомний скролбар у тоні сайту (Chrome / Safari / Edge) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg-deep);
}
::-webkit-scrollbar-thumb {
    background: var(--color-accent-soft);
    border-radius: 6px;
    border: 2px solid var(--color-bg-deep);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}
::-webkit-scrollbar-corner {
    background: var(--color-bg-deep);
}

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

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ================ HEADER (V5.3 — configurable glassmorphism) ================ */
.header {
    z-index: 100;
    background: var(--hdr-bg, rgba(14, 31, 42, 0.85));
    color: var(--hdr-text, #fff);
    backdrop-filter: blur(var(--hdr-blur, 12px));
    -webkit-backdrop-filter: blur(var(--hdr-blur, 12px));
    border-radius: var(--hdr-radius, 0);
    transition: background 0.25s, backdrop-filter 0.25s, padding 0.25s;
}

.header.is-sticky {
    position: sticky;
    top: 0;
}

.header.has-shadow {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

/* Floating стиль — як на scandi.ua: вузька, центрована, з відступом від країв.
   V5.3.1: тепер обмежується max-width і центрується через transform,
   не тягнеться на всю ширину екрана. */
.header.is-floating {
    position: fixed;
    top: 16px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: var(--hdr-max-w, 1200px);
}
/* V5.6.1: Hero / перший блок ЛЮБОГО типу отримує padding-top щоб
   контент не залазив під floating-шапку. Універсальний селектор
   покриває lендинг hero, CMS-сторінки, /chat (.chat-page),
   /u/{slug} (.unit-page) тощо. */
.header.is-floating ~ main > *:first-child,
.header.is-floating ~ main > article > .cms-block:first-child,
.header.is-floating ~ main .cms-page > .cms-block:first-child {
    padding-top: 110px;
}
.header.is-floating .header-inner-wrapper { padding: 0; max-width: none; }

/* Wrapper щоб max-width застосовувалась */
.header-inner-wrapper {
    max-width: var(--hdr-max-w, 1200px);
    margin: 0 auto;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--hdr-padding-y, 14px) 24px;
    gap: 16px;
}

/* Logo color наслідує hdr-text */
.header .logo,
.header .nav a:not(.btn) {
    color: var(--hdr-text, #fff);
}

/* Кнопка телефону як на scandi (acid-style accent) */
.header-phone-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: var(--color-accent, #d79d32);
    color: #1a1a1a;
    font-weight: 700;
    font-size: 13px;
    border-radius: var(--radius-pill, 100px);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.header-phone-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(215, 157, 50, 0.35);
}
.header-phone-btn svg {
    flex-shrink: 0;
}

/* На мобільному — компактна шапка (V5.3.1: збереження центрування для floating) */
@media (max-width: 768px) {
    .header.is-floating {
        top: 8px;
        width: calc(100% - 16px);
    }
    .header.is-floating ~ main > *:first-child,
    .header.is-floating ~ main > article > .cms-block:first-child,
    .header.is-floating ~ main .cms-page > .cms-block:first-child { padding-top: 90px; }
    .header-inner {
        padding: 10px 16px;
        gap: 8px;
    }
    .header .logo-text {
        display: none;
    }
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    line-height: 1;
}

.logo-img {
    width: 40px;
    height: auto;
    display: block;
}

.logo-text {
    font-size: var(--hdr-logo-text-size, 16px);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    gap: 2px;
    letter-spacing: 0.02em;
    line-height: 1.05;
}

.logo-text-line1 {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.logo-tm {
    font-size: 9px;
    color: var(--color-accent);
    font-weight: 600;
}

.logo-text-line2 {
    color: var(--color-accent);
    font-weight: 600;
    font-size: var(--hdr-logo-text-sub-size, 11px);
    letter-spacing: 0.05em;
}

.nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.nav a:not(.btn):not(.nav-icon) {
    color: var(--color-accent);
    font-weight: 500;
    font-size: 14px;
    transition: color 0.2s;
}

.nav a:not(.btn):not(.nav-icon):hover {
    color: var(--color-accent-bright);
}

.nav-icons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.nav-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-accent);
    border-radius: 6px;
    color: var(--color-accent);
    transition: all 0.2s;
}

.nav-icon:hover {
    background: var(--color-accent);
    color: var(--color-bg-deep);
}

.nav-icon svg {
    width: 15px;
    height: 15px;
}

/* ================ BUTTONS — pill-shape ================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    border: none;
    transition: all 0.25s ease;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.btn-primary {
    background: var(--color-accent);
    color: var(--color-bg-deep);
}

.btn-primary:hover {
    background: var(--color-accent-bright);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

.btn-ghost {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}

.btn-ghost:hover {
    background: var(--color-accent);
    color: var(--color-bg-deep);
}

.btn-lg {
    padding: 13px 28px;
    font-size: 13px;
}

.btn-block {
    width: 100%;
}

/* ================ HERO ================ */
.hero {
    position: relative;
    min-height: calc(100vh - 60px);
    padding: 40px 0 50px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(135deg, rgba(14, 31, 42, 0.92) 0%, rgba(14, 31, 42, 0.65) 60%, rgba(14, 31, 42, 0.85) 100%),
        radial-gradient(ellipse at top, #1F3445 0%, var(--color-bg) 70%);
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(215, 157, 50, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(215, 157, 50, 0.12);
    color: var(--color-accent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: 0.04em;
}

.hero-title {
    font-family: 'Manrope', sans-serif;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.hero-title .accent {
    color: var(--color-accent);
}

.hero-subtitle-big {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.hero-subtitle-big strong {
    color: var(--color-accent);
}

.hero-subtitle {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 22px;
    max-width: 520px;
    line-height: 1.6;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 18px 0;
    margin-bottom: 22px;
    border-top: 1px solid var(--color-border-soft);
    border-bottom: 1px solid var(--color-border-soft);
}

.stat-value {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--color-accent);
    margin-bottom: 4px;
    line-height: 1;
}

.stat-label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Hero card mockup of chat */
.hero-visual {
    perspective: 1200px;
}

.hero-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-lg);
    transform: rotate(-2deg) translateY(-2px);
    transition: transform 0.4s ease;
}

.hero-card:hover {
    transform: rotate(0deg) translateY(0);
}

.hero-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border-soft);
    margin-bottom: 14px;
}

.hero-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-bright));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--color-bg-deep);
    font-weight: 700;
    box-shadow: var(--shadow-gold);
}

.hero-name {
    font-weight: 700;
    color: var(--color-text);
    font-size: 14px;
}

.hero-role {
    font-size: 11px;
    color: var(--color-success);
    margin-top: 2px;
}

.hero-message {
    padding: 9px 13px;
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    font-size: 13px;
    max-width: 88%;
    animation: fadeIn 0.4s ease-out;
    line-height: 1.45;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-message-bot {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text);
    border-bottom-left-radius: 4px;
}

.hero-message-user {
    background: var(--color-accent);
    color: var(--color-bg-deep);
    margin-left: auto;
    border-bottom-right-radius: 4px;
    font-weight: 500;
}

.hero-cta {
    display: block;
    margin-top: 12px;
    padding: 9px;
    text-align: center;
    background: rgba(215, 157, 50, 0.1);
    color: var(--color-accent);
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 12px;
    transition: background 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hero-cta:hover {
    background: rgba(215, 157, 50, 0.2);
}

/* ================ SECTIONS ================ */
.section-title {
    font-family: 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 28px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.section-title .accent {
    color: var(--color-accent);
}

.section-h2 {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin: 24px 0 12px;
    color: var(--color-accent);
}

/* ================ LOCATIONS ================ */
.locations {
    padding: 56px 0;
    background: var(--color-bg-deep);
}

.locations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.location-card {
    padding: 28px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    transition: all 0.3s;
}

.location-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.location-emoji {
    font-size: 36px;
    margin-bottom: 12px;
}

.location-card h3 {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.location-card p {
    color: var(--color-text-muted);
    line-height: 1.6;
    font-size: 14px;
}

/* ================ HOW IT WORKS ================ */
.how {
    padding: 56px 0;
    background: var(--color-bg);
}

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

.how-step {
    background: var(--color-bg-card);
    padding: 26px 22px;
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid var(--color-border-soft);
    transition: all 0.3s;
}

.how-step:hover {
    border-color: var(--color-accent);
    transform: translateY(-3px);
}

.how-num {
    width: 42px;
    height: 42px;
    background: var(--color-accent);
    color: var(--color-bg-deep);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 18px;
    margin: 0 auto 14px;
    box-shadow: var(--shadow-gold);
}

.how-step h3 {
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    margin-bottom: 10px;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.how-step p {
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.55;
}

/* ================ UNITS CATALOG ================ */
.units {
    padding: 56px 0;
    background: var(--color-bg-deep);
}

.units-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}

.units-subtitle {
    color: var(--color-text-muted);
    font-size: 13px;
    margin-top: -22px;
}

.units-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 7px 14px;
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.filter-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
}

.filter-btn.active {
    background: var(--color-accent);
    color: var(--color-bg-deep);
    border-color: var(--color-accent);
}

.units-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.unit-card {
    position: relative;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.unit-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-accent);
}

.unit-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    padding: 4px 10px;
    background: var(--color-accent);
    color: var(--color-bg-deep);
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.unit-image-placeholder {
    height: 150px;
    background: linear-gradient(135deg, #1F3445 0%, #15293A 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    opacity: 0.4;
}

.unit-image {
    height: 180px;
    background-size: cover;
    background-position: center;
    background-color: #15293A;
}

.unit-content {
    padding: 16px;
}

.unit-meta {
    font-size: 10px;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    font-weight: 600;
}

.unit-title {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
    color: var(--color-text);
}

.unit-specs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.unit-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-soft);
}

.unit-price {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--color-text);
}

.unit-roi {
    color: var(--color-accent);
    font-weight: 700;
    font-size: 14px;
}

.unit-roi-details {
    margin-top: 6px;
    color: var(--color-text-muted);
    font-size: 11px;
}

/* ================ CALCULATOR PROMO (V5.9.21) ================ */
.calc-promo {
    padding: 80px 0;
    position: relative;
}

.calc-promo-card {
    position: relative;
    background: linear-gradient(135deg,
        rgba(215, 157, 50, 0.18) 0%,
        rgba(155, 224, 185, 0.06) 50%,
        rgba(91, 154, 240, 0.12) 100%);
    border: 1px solid rgba(215, 157, 50, 0.35);
    border-radius: 28px;
    padding: 56px 48px;
    overflow: hidden;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Декоративні плями фону */
.calc-promo-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.calc-promo-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.45;
}
.calc-promo-shape-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--color-accent), transparent 70%);
    top: -150px;
    right: -100px;
    animation: floatA 18s ease-in-out infinite;
}
.calc-promo-shape-2 {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, #5b9af0, transparent 70%);
    bottom: -120px;
    left: -80px;
    animation: floatB 22s ease-in-out infinite;
}
.calc-promo-shape-3 {
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, #9be0b9, transparent 70%);
    top: 50%;
    left: 60%;
    animation: floatC 26s ease-in-out infinite;
}
@keyframes floatA {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-30px, 40px); }
}
@keyframes floatB {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(40px, -30px); }
}
@keyframes floatC {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-50px, 30px) scale(1.15); }
}

.calc-promo-content {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.calc-promo-badge {
    display: inline-block;
    padding: 7px 18px;
    background: rgba(215, 157, 50, 0.18);
    border: 1px solid rgba(215, 157, 50, 0.4);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #ffd585;
    letter-spacing: 0.05em;
    margin-bottom: 18px;
}

.calc-promo-title {
    font-family: 'Manrope', sans-serif;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 18px;
    color: var(--color-text);
    letter-spacing: -0.025em;
}

.calc-promo-lead {
    font-size: 19px;
    line-height: 1.55;
    color: var(--color-text-muted);
    max-width: 640px;
    margin: 0 auto 36px;
}
.calc-promo-lead strong { color: #ffd585; font-weight: 700; }

/* Сітка фіч */
.calc-promo-features {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    text-align: left;
}
.calc-promo-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    transition: transform 0.25s, border-color 0.25s, background 0.25s;
}
.calc-promo-features li:hover {
    transform: translateY(-3px);
    border-color: rgba(215, 157, 50, 0.5);
    background: rgba(0, 0, 0, 0.45);
}
.calc-promo-icon {
    flex-shrink: 0;
    font-size: 26px;
    line-height: 1;
    margin-top: 2px;
}
.calc-promo-features li > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.calc-promo-features li strong {
    color: var(--color-text);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
}
.calc-promo-features li span {
    color: var(--color-text-muted);
    font-size: 12.5px;
    line-height: 1.4;
}

/* CTA */
.calc-promo-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.calc-promo-cta {
    font-size: 18px;
    padding: 18px 44px;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(215, 157, 50, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}
.calc-promo-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 42px rgba(215, 157, 50, 0.5);
}
.calc-promo-note {
    color: var(--color-text-muted);
    font-size: 13px;
    font-style: italic;
}

/* Responsive */
@media (max-width: 1024px) {
    .calc-promo-card { padding: 48px 36px; }
    .calc-promo-title { font-size: 44px; }
    .calc-promo-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .calc-promo { padding: 56px 0; }
    .calc-promo-card { padding: 36px 22px; border-radius: 20px; }
    .calc-promo-title { font-size: 32px; }
    .calc-promo-lead { font-size: 16px; margin-bottom: 28px; }
    .calc-promo-features { grid-template-columns: 1fr; gap: 10px; }
    .calc-promo-cta { font-size: 16px; padding: 14px 28px; width: 100%; }
}

/* ================ ABOUT ================ */
.about {
    padding: 56px 0;
    background: var(--color-bg);
    position: relative;
}

.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 1200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    opacity: 0.3;
}

.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

.about p {
    color: var(--color-text-muted);
    font-size: 14px;
    margin-bottom: 18px;
    line-height: 1.65;
}

.about p strong {
    color: var(--color-accent);
}

.about-list li {
    padding: 7px 0;
    color: var(--color-text);
    font-size: 13px;
}

.about-list li::before {
    content: '✦';
    color: var(--color-accent);
    margin-right: 8px;
}

.about-cta {
    background: linear-gradient(135deg, rgba(215, 157, 50, 0.18), rgba(215, 157, 50, 0.06));
    padding: 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.about-cta h3 {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.about-cta p {
    color: var(--color-text-muted);
    margin-bottom: 18px;
    font-size: 14px;
}

/* ================ UNIT DETAIL PAGE ================ */
.unit-page {
    padding: 60px 0 100px;
    background: var(--color-bg);
}

.back-link {
    display: inline-block;
    color: var(--color-accent);
    margin-bottom: 28px;
    transition: color 0.2s;
    font-size: 14px;
    font-weight: 500;
}

.back-link:hover {
    color: var(--color-accent-bright);
}

.unit-page-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 48px;
    align-items: start;
}

.unit-page-image {
    height: 460px;
    background: linear-gradient(135deg, #1F3445 0%, #15293A 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 140px;
    opacity: 0.4;
    margin-bottom: 16px;
}

/* V5.9.19 — Unit gallery з hero + thumbnails + lightbox */
.unit-gallery {
    margin-bottom: 24px;
}
.unit-hero-img {
    position: relative;
    height: 460px;
    background-size: cover;
    background-position: center;
    background-color: #15293A;
    border-radius: var(--radius-lg);
    cursor: zoom-in;
    overflow: hidden;
    margin-bottom: 12px;
}
.unit-img-counter {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.unit-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}
.unit-thumb {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-md);
    background-color: #15293A;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.15s;
}
.unit-thumb:hover { transform: scale(1.04); }
.unit-thumb.is-active {
    border-color: var(--color-accent);
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lightboxFade 0.2s ease-out;
}
@keyframes lightboxFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 12px 60px rgba(0,0,0,0.5);
}
.lightbox-close,
.lightbox-nav {
    position: absolute;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 32px;
    transition: background 0.15s, transform 0.15s;
    user-select: none;
    backdrop-filter: blur(8px);
}
.lightbox-close {
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 24px;
}
.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    line-height: 1;
}
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-close:hover,
.lightbox-nav:hover {
    background: rgba(255,255,255,0.22);
}
.lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-counter {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background: rgba(0,0,0,0.6);
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .unit-hero-img { height: 280px; }
    .unit-thumbs { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
    .lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
    .lightbox-nav { width: 44px; height: 44px; font-size: 28px; }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
}

.unit-page-meta {
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    margin-bottom: 12px;
    font-weight: 600;
}

.unit-page-title {
    font-family: 'Manrope', sans-serif;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 14px;
    text-transform: uppercase;
    color: var(--color-text);
}

.unit-page-complex {
    color: var(--color-text-muted);
    margin-bottom: 32px;
}

.unit-page-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    padding: 24px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    margin-bottom: 32px;
}

.spec {
    text-align: center;
}

.spec strong {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    margin-bottom: 4px;
    color: var(--color-accent);
}

.spec span {
    color: var(--color-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.unit-page-description {
    color: var(--color-text-muted);
    line-height: 1.8;
    font-size: 16px;
}

.uk-card {
    padding: 24px 28px;
    background: rgba(215, 157, 50, 0.08);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-accent);
}

.uk-card strong {
    color: var(--color-accent);
}

.uk-card p {
    margin-top: 8px;
    color: var(--color-text-muted);
}

.unit-page-sidebar {
    position: sticky;
    top: 110px;
}

.unit-page-price-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: var(--shadow-md);
}

.unit-page-price-label {
    color: var(--color-text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.unit-page-price {
    font-family: 'Manrope', sans-serif;
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 28px;
    color: var(--color-text);
}

.unit-page-roi {
    margin-bottom: 28px;
    padding: 22px 0;
    border-top: 1px solid var(--color-border-soft);
    border-bottom: 1px solid var(--color-border-soft);
}

.roi-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.roi-label {
    color: var(--color-text-muted);
    font-size: 14px;
}

.roi-value {
    font-weight: 700;
    color: var(--color-accent);
}

.unit-page-cta-note {
    margin-top: 14px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 12px;
}

/* ================ ERROR PAGE ================ */
.error-page {
    padding: 120px 0;
    text-align: center;
    background: var(--color-bg);
}

.error-emoji {
    font-size: 84px;
    margin-bottom: 28px;
    color: var(--color-accent);
}

.error-content h1 {
    font-family: 'Manrope', sans-serif;
    font-size: 40px;
    margin-bottom: 14px;
    text-transform: uppercase;
    color: var(--color-text);
}

.error-content p {
    color: var(--color-text-muted);
    margin-bottom: 32px;
}

.error-content code {
    background: var(--color-bg-card);
    padding: 4px 10px;
    border-radius: 4px;
    color: var(--color-accent);
    font-family: ui-monospace, SFMono-Regular, monospace;
    border: 1px solid var(--color-border-soft);
}

/* ================ FOOTER ================ */
.footer {
    background: var(--color-bg-deep);
    color: var(--color-text-muted);
    padding: 40px 0 20px;
    border-top: 1px solid var(--color-border-soft);
}

.footer .logo-text {
    color: var(--color-text);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--color-border-soft);
    margin-bottom: 18px;
}

.footer-tagline {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.footer h4 {
    color: var(--color-accent);
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.footer ul li {
    padding: 4px 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

.footer a {
    transition: color 0.2s;
}

.footer a:hover {
    color: var(--color-accent);
}

.footer-bottom {
    text-align: center;
    color: var(--color-text-light);
    font-size: 13px;
}

/* ================ FLOATING CHAT BUTTON ================ */
.float-chat {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 52px;
    height: 52px;
    background: var(--color-accent);
    color: var(--color-bg-deep);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: var(--shadow-gold);
    z-index: 90;
    transition: all 0.3s;
    animation: pulse 2.5s ease-out infinite;
}

.float-chat:hover {
    transform: scale(1.1);
    background: var(--color-accent-bright);
    animation: none;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(215, 157, 50, 0.45), var(--shadow-gold); }
    50% { box-shadow: 0 0 0 18px rgba(215, 157, 50, 0), var(--shadow-gold); }
}

/* ================ EMPTY STATE ================ */
.empty-state {
    text-align: center;
    padding: 80px 0;
    color: var(--color-text-muted);
}

/* ================ RESPONSIVE ================ */
@media (max-width: 900px) {
    .nav a:not(.btn):not(.nav-icon) {
        display: none;
    }
    .nav-icons {
        display: none;
    }
    .hero-grid,
    .about-grid,
    .unit-page-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .hero-title {
        font-size: 38px;
    }
    .section-title {
        font-size: 28px;
    }
    .how-grid {
        grid-template-columns: 1fr;
    }
    .locations-grid {
        grid-template-columns: 1fr;
    }
    .unit-page-sidebar {
        position: static;
    }
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .hero-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
    .stat-value {
        font-size: 24px;
    }
    .container,
    .header-inner {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 50px 0 60px;
        min-height: auto;
    }
    .hero-title {
        font-size: 30px;
    }
    .hero-actions {
        flex-direction: column;
    }
    .btn-lg {
        width: 100%;
    }
    .units-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .logo-img {
        width: 40px;
    }
    .logo-text {
        font-size: 16px;
    }
}


/* ============================================
   V3.4 — CMS public block styles
   ============================================ */

/* V5.2.1 — CMS layout presets via CSS variables.
   Default 1200px = MATCHES site header `.container` so blocks align
   visually з краями шапки сайту. */
.cms-page {
    --cms-block-py: 36px;          /* vertical padding inside block */
    --cms-block-max-width: 1200px; /* max width — match header */
}
.cms-page[data-spacing="compact"]   { --cms-block-py: 18px; }
.cms-page[data-spacing="normal"]    { --cms-block-py: 36px; }
.cms-page[data-spacing="spacious"]  { --cms-block-py: 64px; }
.cms-page[data-width="narrow"]      { --cms-block-max-width: 880px; }
.cms-page[data-width="normal"]      { --cms-block-max-width: 1200px; }
.cms-page[data-width="wide"]        { --cms-block-max-width: 1320px; }
.cms-page[data-width="full"]        { --cms-block-max-width: 100%; }

.cms-block {
    padding: var(--cms-block-py) 0;
}

.cms-block .container {
    max-width: var(--cms-block-max-width);
}

.cms-align-left   { text-align: left; }
.cms-align-center { text-align: center; margin-left: auto; margin-right: auto; }
.cms-align-right  { text-align: right; }

/* HERO — використовує ту ж padding-схему як інші блоки (V5.2) */
.cms-hero {
    display: flex;
    align-items: center;
    padding: var(--cms-block-py) 0;
}
.cms-hero-inner {
    max-width: var(--cms-block-max-width);
    width: 100%;
}
.cms-hero-subtitle {
    display: inline-block;
    color: var(--color-accent);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}
.cms-hero-title {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 18px;
}
.cms-hero-description {
    font-size: 17px;
    color: #d6e1ec;
    line-height: 1.6;
    margin-bottom: 28px;
}
.cms-hero-cta {
    display: inline-block;
}

@media (max-width: 768px) {
    .cms-hero-title { font-size: 32px; }
    .cms-hero-description { font-size: 15px; }
}

/* TEXT */
.cms-text-inner {
    margin-left: auto;
    margin-right: auto;
}
.cms-text-title {
    font-size: 28px;
    color: #fff;
    margin: 0 0 14px;
}
.cms-text-body {
    color: #d6e1ec;
    font-size: 15.5px;
    line-height: 1.7;
}
.cms-text-body p { margin-bottom: 14px; }
.cms-text-body strong { color: var(--color-accent); }
.cms-text-body a { color: var(--color-accent); border-bottom: 1px solid currentColor; }
.cms-text-body ul, .cms-text-body ol { padding-left: 1.5em; margin-bottom: 14px; }
.cms-text-body li { margin-bottom: 6px; }
.cms-text-body h2, .cms-text-body h3 { color: #fff; margin: 24px 0 10px; }

/* IMAGE */
.cms-image-figure {
    margin: 0;
}
.cms-image-figure.cms-width-full img { width: 100%; height: auto; }
.cms-image-figure.cms-width-auto img { max-width: 100%; height: auto; }
.cms-image-figure img {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.cms-image-figure figcaption {
    margin-top: 10px;
    color: #8595a6;
    font-size: 13px;
    font-style: italic;
}

/* GALLERY */
.cms-gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns, 3), 1fr);
    gap: 14px;
    margin-top: 20px;
}
@media (max-width: 768px) {
    .cms-gallery-grid { grid-template-columns: 1fr 1fr; }
}
.cms-gallery-item {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.025);
}
.cms-gallery-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.cms-gallery-item figcaption {
    padding: 10px 14px;
    color: #b6c4d3;
    font-size: 12.5px;
}

/* CTA */
.cms-cta-card {
    background: linear-gradient(135deg, rgba(215, 157, 50, 0.12), rgba(91, 124, 255, 0.06));
    border: 1px solid rgba(215, 157, 50, 0.3);
    border-radius: 14px;
    padding: 36px 32px;
    /* V5.2.1: займає всю ширину контейнера (раніше було 640px — занадто вузько) */
    margin: 0 auto;
}
.cms-cta-title {
    font-size: 26px;
    color: #fff;
    margin: 0 0 12px;
}
.cms-cta-description {
    color: #d6e1ec;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 22px;
}

/* COLUMNS */
.cms-columns-grid {
    display: grid;
    /* V5.2.1: auto-fit з minmax — колонки не злипаються;
       якщо не вистачає місця — переносяться на наступний ряд.
       Min 240px на колонку, на 1100px вийде ~4 колонки в ряд. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-top: 24px;
}
@media (max-width: 768px) {
    .cms-columns-grid { grid-template-columns: 1fr; }
}
.cms-column-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 22px 20px;
    text-align: center;
}
.cms-column-icon { font-size: 36px; margin-bottom: 10px; }
.cms-column-card h3 { color: #fff; margin: 0 0 8px; font-size: 17px; }
.cms-column-card p { color: #b6c4d3; font-size: 13.5px; line-height: 1.55; margin: 0; }

/* ACCORDION */
.cms-accordion-list {
    max-width: 720px;
    margin: 24px auto 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cms-accordion-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
}
.cms-accordion-item summary {
    padding: 16px 20px;
    cursor: pointer;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    list-style: none;
    position: relative;
    padding-right: 50px;
}
.cms-accordion-item summary::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-accent);
    font-size: 22px;
    transition: transform 0.2s;
}
.cms-accordion-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.cms-accordion-answer {
    padding: 0 20px 18px;
    color: #b6c4d3;
    line-height: 1.6;
    font-size: 14px;
}

/* TESTIMONIALS */
.cms-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 24px;
}
.cms-testimonial-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 20px;
}
.cms-testimonial-rating {
    color: var(--color-accent);
    font-size: 14px;
    margin-bottom: 10px;
}
.cms-testimonial-text {
    margin: 0 0 14px;
    color: #d6e1ec;
    font-size: 14px;
    line-height: 1.6;
    font-style: italic;
}
.cms-testimonial-author {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 12px;
}
.cms-testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.cms-testimonial-author strong { display: block; color: #fff; font-size: 13px; }
.cms-testimonial-author small { color: #8595a6; font-size: 11.5px; }

/* SEPARATOR */
.cms-separator { padding: 0; }
/* V5.3.7: ширша палітра преsets для ситуацій коли потрібен великий gap */
.cms-sep-small  { padding: 12px 0; }
.cms-sep-medium { padding: 30px 0; }
.cms-sep-large  { padding: 60px 0; }
.cms-sep-xl     { padding: 100px 0; }
.cms-separator hr {
    border: none;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0;
}
.cms-sep-style-gradient hr {
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    height: 2px;
    opacity: 0.5;
}
.cms-sep-style-space hr { display: none; }

/* HTML */
.cms-html {
    /* free-form */
}

/* ============================================
   V4.7 — CMS Lead Form block (public)
   ============================================ */

.cms-lead-form {
    padding: var(--cms-block-py) 24px; /* V5.2.1: 24px = same as .container */
}

.cms-lead-form-inner {
    max-width: var(--cms-block-max-width);
    margin: 0 auto;
}

.cms-lead-form[data-align="left"] .cms-lead-form-inner { margin-left: 0; }
.cms-lead-form[data-align="right"] .cms-lead-form-inner { margin-right: 0; margin-left: auto; }

.cms-lead-form-title {
    font-size: 28px;
    margin: 0 0 12px;
    color: var(--theme-primary, #d79d32);
}

.cms-lead-form-desc {
    margin-bottom: 18px;
    line-height: 1.5;
}

.cms-lead-form-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cms-lead-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 600px) {
    .cms-lead-form-row { grid-template-columns: 1fr; }
}

.cms-lead-form-form input,
.cms-lead-form-form textarea {
    padding: 11px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    transition: border-color 0.15s;
}

.cms-lead-form-form input:focus,
.cms-lead-form-form textarea:focus {
    outline: none;
    border-color: var(--theme-primary, #d79d32);
    background: rgba(255, 255, 255, 0.08);
}

.cms-lead-form-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}

.cms-lead-form-consent input { margin-top: 2px; flex-shrink: 0; }

.cms-lead-form-submit {
    padding: 12px 20px;
    background: var(--theme-primary, #d79d32);
    color: var(--theme-secondary, #1a1a1a);
    border: none;
    border-radius: var(--btn-radius, 8px);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
}

.cms-lead-form-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(215, 157, 50, 0.3);
}

.cms-lead-form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.cms-lead-form-status {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    display: none;
}

.cms-lead-form-status.success {
    display: block;
    background: rgba(155, 224, 185, 0.15);
    border: 1px solid rgba(155, 224, 185, 0.4);
    color: #9be0b9;
}

.cms-lead-form-status.error {
    display: block;
    background: rgba(252, 129, 129, 0.15);
    border: 1px solid rgba(252, 129, 129, 0.4);
    color: #fc8181;
}

/* ============================================
   V5.0 — TEXT_IMAGE block (text + 1:1 photo aside)
   ============================================ */

/* V5.3.6: padding керується .cms-block + .container (горизонталь),
   тому тут лише flex-стилі */
.cms-text-image-inner {
    display: flex;
    align-items: center;
    gap: 48px;
}

.cms-text-image-img {
    flex-shrink: 0;
    max-width: 360px; /* V5.3.5: обмеження щоб фото не «з'їдало» текст */
}

.cms-text-image-img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(215, 157, 50, 0.2);
}

.cms-text-image-text {
    flex: 1;
    min-width: 0;
}

/* V5.3.4: уніфіковано з .cms-text-title (28px, білий) щоб блок Text+Image
   не виглядав інакше від звичайних text-блоків */
.cms-text-image-title {
    font-size: 28px;
    margin: 0 0 14px;
    color: #fff;
    font-family: var(--brand-font, 'Manrope'), sans-serif;
    font-weight: 800;
    line-height: 1.2;
}

/* V5.3.4: матчить .cms-text-body */
.cms-text-image-body {
    font-size: 15.5px;
    line-height: 1.7;
    color: #d6e1ec;
}

.cms-text-image-body p { margin: 0 0 14px; }
.cms-text-image-body strong { color: var(--color-accent); }
.cms-text-image-body a { color: var(--color-accent); border-bottom: 1px solid currentColor; }
.cms-text-image-body p:last-child { margin-bottom: 0; }
.cms-text-image-body strong { color: rgba(255, 255, 255, 0.95); }
.cms-text-image-body a { color: var(--theme-primary, #d79d32); }

@media (max-width: 768px) {
    .cms-text-image { padding: 40px 16px; }
    .cms-text-image-inner {
        flex-direction: column !important;
        gap: 24px;
    }
    .cms-text-image-img {
        flex-basis: 100% !important;
        max-width: 380px;
        width: 100%;
        align-self: center;
    }
    .cms-text-image-title { font-size: 24px; }
}


/* ============================================
   V5.4 — STATS / CARDS / STEPS blocks
   ============================================ */

/* ---- STATS ---- */
.cms-stats-head {
    margin-bottom: 36px;
}
.cms-stats-title {
    font-size: 32px;
    margin: 0 0 8px;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
}
.cms-stats-subtitle {
    color: #b6c4d3;
    font-size: 15px;
    margin: 0;
}

.cms-stats-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.cms-stat-item {
    text-align: center;
    padding: 24px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.cms-stat-item:hover {
    transform: translateY(-4px);
    border-color: rgba(215, 157, 50, 0.4);
    background: rgba(215, 157, 50, 0.05);
}

.cms-stat-icon { font-size: 32px; margin-bottom: 8px; }
.cms-stat-value {
    font-family: 'Manrope', sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: var(--color-accent, #d79d32);
    line-height: 1;
    margin-bottom: 6px;
}
.cms-stat-label {
    font-size: 13px;
    color: #b6c4d3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---- CARDS ---- */
.cms-cards-head { text-align: center; margin-bottom: 36px; }
.cms-cards-title {
    font-size: 32px;
    margin: 0 0 8px;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
}
.cms-cards-subtitle { color: #b6c4d3; font-size: 16px; margin: 0; }

.cms-cards-grid {
    display: grid;
    gap: 24px;
}
.cms-cards-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.cms-cards-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.cms-cards-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
    .cms-cards-grid[data-cols="2"],
    .cms-cards-grid[data-cols="3"],
    .cms-cards-grid[data-cols="4"] { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .cms-cards-grid[data-cols="3"],
    .cms-cards-grid[data-cols="4"] { grid-template-columns: 1fr 1fr; }
}

.cms-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.cms-card:hover {
    transform: translateY(-6px);
    border-color: rgba(215, 157, 50, 0.4);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.cms-card-img {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}
.cms-card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s;
}
.cms-card:hover .cms-card-img img { transform: scale(1.05); }

.cms-card-icon-only {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, rgba(215, 157, 50, 0.12), rgba(91, 124, 255, 0.06));
    display: flex;
    align-items: center;
    justify-content: center;
}
.cms-card-emoji { font-size: 64px; }

.cms-card-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    color: #ffd585;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.cms-card-tag-floating { background: rgba(215, 157, 50, 0.9); color: #1a1a1a; }

.cms-card-body {
    padding: 22px 22px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.cms-card-title {
    font-size: 20px;
    margin: 0 0 10px;
    color: #fff;
    font-weight: 700;
    line-height: 1.3;
}
.cms-card-desc {
    color: #b6c4d3;
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0 0 16px;
    flex: 1;
}
.cms-card-btn {
    align-self: flex-start;
    color: var(--color-accent, #d79d32);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: gap 0.2s;
}
.cms-card-btn:hover {
    color: var(--color-accent-bright, #ffd585);
}

/* ---- STEPS ---- */
.cms-steps-head { margin-bottom: 36px; }
.cms-steps-title {
    font-size: 32px;
    margin: 0 0 8px;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
}
.cms-steps-subtitle { color: #b6c4d3; font-size: 16px; margin: 0; }

.cms-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    counter-reset: step;
}

.cms-step {
    position: relative;
    padding: 28px 22px 24px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    transition: transform 0.2s, border-color 0.2s;
}
.cms-step:hover {
    transform: translateY(-4px);
    border-color: rgba(215, 157, 50, 0.35);
}

.cms-step-number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(215, 157, 50, 0.12);
    border: 2px solid var(--color-accent, #d79d32);
    color: var(--color-accent, #d79d32);
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.cms-step-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.cms-step-title {
    font-size: 17px;
    margin: 0 0 8px;
    color: #fff;
    font-weight: 700;
}

.cms-step-desc {
    color: #b6c4d3;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}