/* ============================================================
   ТАКТИЛЬНАЯ СКАЗКА — Этап 1
   Глобальный фон, текстуры, разделители, цветовая схема
   ============================================================ */

/* --- Переопределение цветовых переменных --- */
:root {
    --clr-heading:       #4A2A1E;
    --clr-dark:          #4A2A1E;
    --clr-text:          #5E3A2C;
    --clr-text-muted:    #8A6050;
    --clr-accent:        #C26A4A;
    --clr-accent-dark:   #9E4F2F;
    --clr-accent-light:  #D98B6E;
    --clr-accent-pale:   #FAF0E8;
    --clr-teal:          #2F9B8C;
    --clr-teal-dark:     #1D7B6E;
    --clr-bg:            #FCF6F0;
    --clr-bg-soft:       #F5EBE0;
    --clr-bg-warm:       #EDE0D0;
    --clr-clay:          #F0E4D6;
    --clr-clay-deep:     #E8D5C0;
    --clr-border:        rgba(74, 42, 30, 0.12);
    --clr-footer:        #3A1E10;
    --shadow:            0 4px 22px rgba(74, 42, 30, 0.09);
    --shadow-lg:         0 12px 50px rgba(74, 42, 30, 0.15);
}

/* ============================================================
   ГЛОБАЛЬНЫЙ ФОН — текстура пушистого меха (ангора/кролик)
   Слой 1: тёплый бежево-кремовый #FCF6F0
   Слой 2: SVG-шум с вертикальной направленностью (ворсинки)
   ============================================================ */
body {
    background-color: #FCF6F0;
    color: #5E3A2C;

    /* Ворсинки меха: тонкие слегка наклонённые линии —
       надёжно работают во всех браузерах (без SVG-фильтров).
       Слой 1: основные ворсинки (8×80px тайл, 4 линии)
       Слой 2: лёгкий пушок (5×45px тайл, 2 короткие) */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='80'%3E%3Cline x1='1' y1='0' x2='0' y2='80' stroke='%23A07050' stroke-width='0.9' stroke-opacity='0.28'/%3E%3Cline x1='3' y1='8' x2='3.5' y2='78' stroke='%23906040' stroke-width='0.7' stroke-opacity='0.2'/%3E%3Cline x1='6' y1='3' x2='7' y2='75' stroke='%23B08060' stroke-width='0.8' stroke-opacity='0.22'/%3E%3Cline x1='5' y1='28' x2='4.5' y2='65' stroke='%23C49070' stroke-width='0.6' stroke-opacity='0.15'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='45'%3E%3Cline x1='1' y1='5' x2='0.5' y2='45' stroke='%23C4A080' stroke-width='0.6' stroke-opacity='0.17'/%3E%3Cline x1='4' y1='0' x2='4.5' y2='38' stroke='%23B89070' stroke-width='0.5' stroke-opacity='0.13'/%3E%3C/svg%3E");
    background-size: 8px 80px, 5px 45px;
}

/* ============================================================
   ТИПОГРАФИКА — новая цветовая схема
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    color: #4A2A1E;
}

/* Акцентные ссылки (не навигация и не кнопки) */
a:not([class]) {
    color: #2F9B8C;
    transition: color .2s;
}
a:not([class]):hover {
    color: #C26A4A;
}

/* ============================================================
   ШАПКА — тёплый молочный фон с текстурой
   ============================================================ */
.header {
    background-color: rgba(252, 246, 240, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(74, 42, 30, 0.10);
}

/* ============================================================
   ЛОГОТИП — эффект вышивки крестиком
   Канва: сетка клеток (ткань аида) за текстом.
   Нити: диагональные text-shadow имитируют X-стежки.
   ============================================================ */
.header__logo {
    position: relative;
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4A2A1E;
    /* X-стежки: тени по четырём диагоналям */
    text-shadow:
         1px  1px 0 rgba(194,106,74,0.60),
        -1px  1px 0 rgba(158, 79,47,0.40),
         1px -1px 0 rgba(158, 79,47,0.40),
        -1px -1px 0 rgba(194,106,74,0.50),
         0px  2px 0 rgba(74, 42,30,0.10),
         2px  0px 0 rgba(74, 42,30,0.08);
    /* Канва — клетчатая ткань аида */
    padding: 5px 12px 6px;
    background:
        repeating-linear-gradient(90deg, rgba(74,42,30,.06) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(0deg,  rgba(74,42,30,.06) 0 1px, transparent 1px 9px),
        rgba(252,246,240,0.85);
    border-radius: 4px;
    /* Рамка пялец */
    box-shadow:
        0 0 0 1.5px rgba(74,42,30,0.15),
        inset 0 0 0 2px rgba(255,255,255,0.4);
    transition: box-shadow .2s;
}
.header__logo:hover {
    box-shadow:
        0 0 0 1.5px #C26A4A,
        inset 0 0 0 2px rgba(255,255,255,0.4);
}
/* Цветная часть логотипа — акцент другим цветом нити */
.header__logo span {
    color: #C26A4A;
    text-shadow:
         1px  1px 0 rgba(74,42,30,0.45),
        -1px  1px 0 rgba(74,42,30,0.28),
         1px -1px 0 rgba(74,42,30,0.28),
        -1px -1px 0 rgba(74,42,30,0.38);
}

/* ============================================================
   НАВИГАЦИЯ — «перевязана ниткой» при наведении
   При hover: две тонкие нити выдвигаются сверху и снизу,
   рисуясь слева направо как стежок в ткань.
   ============================================================ */
.nav-link {
    position: relative;
    padding: 4px 2px;
    color: #8A6050;
    font-size: .62rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: color .2s;
    text-decoration: none !important;
}

.header__inner {
    gap: 1rem;
}

.header__nav {
    gap: .9rem;
}

.header__logo {
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    padding: 4px 8px 5px;
}

.header__phone {
    font-size: .78rem;
    white-space: nowrap;
}
/* Верхняя нить */
.nav-link::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0; right: 0;
    height: 1.5px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        #C26A4A 8%,
        #C26A4A 92%,
        transparent 100%
    );
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
/* Нижняя нить */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0; right: 0;
    height: 1.5px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        #2F9B8C 8%,
        #2F9B8C 92%,
        transparent 100%
    );
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1) .05s;
}
.nav-link:hover {
    color: #4A2A1E;
}
.nav-link:hover::before,
.nav-link:hover::after {
    transform: scaleX(1);
}

/* Мобильное меню — нити тоже работают */
@media (max-width: 768px) {
    .header__nav {
        background-color: rgba(252,246,240,0.98);
        border-bottom: 1px solid rgba(74,42,30,0.1);
    }
    .nav-link {
        font-size: .78rem;
        padding: 6px 4px;
    }
}

/* ============================================================
   СЕКЦИИ — текстура полимерной глины
   Матовая поверхность с едва заметным зерном
   ============================================================ */
/* Ворсинки — единый SVG, переиспользуется во всех секциях */
.section,
.section--soft,
.section--warm,
.cta-section {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='80'%3E%3Cline x1='1' y1='0' x2='0' y2='80' stroke='%23A07050' stroke-width='0.9' stroke-opacity='0.22'/%3E%3Cline x1='3' y1='8' x2='3.5' y2='78' stroke='%23906040' stroke-width='0.7' stroke-opacity='0.17'/%3E%3Cline x1='6' y1='3' x2='7' y2='75' stroke='%23B08060' stroke-width='0.8' stroke-opacity='0.19'/%3E%3Cline x1='5' y1='28' x2='4.5' y2='65' stroke='%23C49070' stroke-width='0.6' stroke-opacity='0.13'/%3E%3C/svg%3E");
    background-size: 8px 80px;
}

/* ============================================================
   HERO — текстура валяной шерсти (молочный шоколад + карамель)
   + пушистые комочки (анимация валяния)
   ============================================================ */
.hero {
    position: relative;
    overflow: hidden;
    min-height: 0 !important;
    align-items: start;
    background-color: #7A4820;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}

/* Правая колонка — абсолютно позиционирована, не влияет на высоту */
.hero__image {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 50%;
    z-index: 2;
}
.hero-slider,
.hero-slide { height: 100%; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }

/* Левая панель (текст) — молочное стекло поверх шерсти */
.hero__content {
    position: relative;
    z-index: 2;
    background: rgba(252,246,240,0.86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255,240,220,0.35);
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    justify-content: flex-start;
}

/* Слайдер фото — выше комочков */
.hero__image { z-index: 2; position: relative; }

/* ── Пушистые комочки ── */
.wool-fuzz {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}
.wool-fuzz--1 {
    width: 130px; height: 110px;
    left: 4%; top: 10%;
    background: radial-gradient(ellipse at 40% 35%, #C4814A 0%, #7A3A18 45%, transparent 72%);
    filter: blur(22px);
    opacity: .75;
    animation: wf1 20s ease-in-out infinite;
}
.wool-fuzz--2 {
    width: 90px; height: 80px;
    left: 22%; top: 55%;
    background: radial-gradient(ellipse at 45% 40%, #E8B870 0%, #9A5020 50%, transparent 74%);
    filter: blur(16px);
    opacity: .6;
    animation: wf2 26s ease-in-out infinite;
}
.wool-fuzz--3 {
    width: 160px; height: 120px;
    left: 8%; top: 68%;
    background: radial-gradient(ellipse at 35% 40%, #8C4020 0%, #4A1C08 55%, transparent 75%);
    filter: blur(28px);
    opacity: .7;
    animation: wf3 22s ease-in-out infinite;
}
.wool-fuzz--4 {
    width: 80px; height: 70px;
    left: 35%; top: 20%;
    background: radial-gradient(ellipse, #D4944A 0%, #7A3A18 50%, transparent 72%);
    filter: blur(14px);
    opacity: .5;
    animation: wf4 30s ease-in-out infinite;
}
.wool-fuzz--5 {
    width: 110px; height: 95px;
    left: 30%; top: 42%;
    background: radial-gradient(ellipse at 50% 45%, #E8C080 0%, #9A5020 48%, transparent 70%);
    filter: blur(20px);
    opacity: .55;
    animation: wf5 24s ease-in-out infinite;
}

@keyframes wf1 {
    0%   { transform: translate(0,0)   scale(1);    }
    20%  { transform: translate(38px,-24px) scale(1.09); }
    45%  { transform: translate(12px,32px)  scale(0.92); }
    70%  { transform: translate(-28px,14px) scale(1.05); }
    100% { transform: translate(0,0)   scale(1);    }
}
@keyframes wf2 {
    0%   { transform: translate(0,0)   scale(1);    }
    30%  { transform: translate(-22px,30px) scale(1.12); }
    60%  { transform: translate(35px,-18px) scale(0.9); }
    100% { transform: translate(0,0)   scale(1);    }
}
@keyframes wf3 {
    0%   { transform: translate(0,0)   scale(1);    }
    25%  { transform: translate(20px,-35px) scale(0.93); }
    55%  { transform: translate(-15px,20px) scale(1.08); }
    80%  { transform: translate(30px,10px)  scale(0.97); }
    100% { transform: translate(0,0)   scale(1);    }
}
@keyframes wf4 {
    0%   { transform: translate(0,0)   scale(1);    }
    35%  { transform: translate(-30px,22px) scale(1.1); }
    65%  { transform: translate(18px,-28px) scale(0.88); }
    100% { transform: translate(0,0)   scale(1);    }
}
@keyframes wf5 {
    0%   { transform: translate(0,0)   scale(1);    }
    40%  { transform: translate(25px,30px)  scale(1.06); }
    75%  { transform: translate(-20px,-15px) scale(0.94); }
    100% { transform: translate(0,0)   scale(1);    }
}

@media (prefers-reduced-motion: reduce) {
    .wool-fuzz { animation: none !important; }
}

/* ============================================================
   ОБЩАЯ БАЗА ДЛЯ КНОПОК HERO
   Одинаковый размер, разная фактура
   ============================================================ */
.btn--yarn,
.btn--clay {
    display: inline-flex;
    align-items: center;
    gap: .65em;
    color: #FCF6F0;
    padding: .75rem 1.5rem .75rem .85rem;
    border-radius: 50px;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    overflow: visible;
    position: relative;
    min-height: 3rem;
    transition: background .25s, transform .2s, border-color .25s;
}

/* ── КНОПКА 1: МОТОЧЕК ПРЯЖИ — бирюзовая ── */
.btn--yarn {
    background: #2F9B8C;
    border-color: #2F9B8C;
}
.btn--yarn:hover {
    background: #1D7B6E;
    border-color: #1D7B6E;
    transform: scale(1.02);
}

/* Шарик пряжи */
.btn--yarn::before {
    content: '';
    display: block;
    width: 2.1em;
    height: 2.1em;
    border-radius: 50%;
    flex-shrink: 0;
    background:
        radial-gradient(circle at 33% 30%, rgba(255,255,255,0.30) 0%, transparent 48%),
        repeating-linear-gradient(-38deg, transparent 0 3.5px, rgba(255,255,255,0.22) 3.5px 5px),
        repeating-linear-gradient( 52deg, transparent 0 3.5px, rgba(0,0,0,0.12) 3.5px 5px),
        #1D7B6E;
    box-shadow: inset -3px -3px 8px rgba(0,0,0,0.25), 2px 2px 6px rgba(0,0,0,0.15);
    transition: transform .6s ease;
}
.btn--yarn:hover::before { transform: rotate(360deg); }

/* Нить-стрелка */
.btn--yarn::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0,7 Q7,3.5 14,7 T28,7' fill='none' stroke='%23FCF6F0' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M21,2 L28,7 L21,12' fill='none' stroke='%23FCF6F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    line-height: 0;
    transition: transform .3s ease;
}
.btn--yarn:hover::after { transform: translateX(5px); }

/* ── КНОПКА 2: КЛУБОК ГЛИНЫ — терракотовая ── */
.btn--clay {
    background: #C26A4A;
    border-color: #C26A4A;
}
.btn--clay:hover {
    background: #A8522A;
    border-color: #A8522A;
    transform: scale(1.02);
}

/* Шарик глины с отпечатком пальца и сердечком */
.btn--clay::before {
    content: '♥';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1em;
    height: 2.1em;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: .85em;
    color: rgba(255,240,220,0.82);
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    /* Матовая глина: отпечатки пальца (концентрические эллипсы) */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cellipse cx='17' cy='17' rx='13' ry='9' fill='none' stroke='%23FFD0A0' stroke-width='0.9' stroke-opacity='0.28'/%3E%3Cellipse cx='17' cy='17' rx='9' ry='6' fill='none' stroke='%23FFD0A0' stroke-width='0.8' stroke-opacity='0.24'/%3E%3Cellipse cx='17' cy='17' rx='5' ry='3.5' fill='none' stroke='%23FFD0A0' stroke-width='0.7' stroke-opacity='0.2'/%3E%3Cellipse cx='17' cy='17' rx='2' ry='1.5' fill='none' stroke='%23FFD0A0' stroke-width='0.6' stroke-opacity='0.16'/%3E%3C/svg%3E");
    background-size: cover;
    background-color: #9E4020;
    /* Матовость: без глянцевого блика, только мягкие тени */
    box-shadow:
        inset -2px -3px 7px rgba(0,0,0,0.28),
        inset 1px 1px 4px rgba(255,160,90,0.15),
        1px 2px 6px rgba(0,0,0,0.2);
    transition: transform .3s ease;
}
.btn--clay:hover::before {
    transform: scale(2);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}

/* ── Отступ между кнопками ── */
.hero__actions {
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.section {
    background-color: #F0E4D6;
}
.section--soft {
    background-color: #EDE0D2;
}
.section--warm {
    background-color: #E8D5C0;
}

/* ============================================================
   КНОПКИ — новая цветовая схема
   ============================================================ */
.btn--primary,
.btn--accent {
    background: #C26A4A;
    border-color: #C26A4A;
    color: #fff;
}
.btn--primary:hover,
.btn--accent:hover {
    background: #9E4F2F;
    border-color: #9E4F2F;
    transform: scale(1.02);
}
.btn--outline {
    border-color: #2F9B8C;
    color: #2F9B8C;
    background: transparent;
}
.btn--outline:hover {
    background: #2F9B8C;
    border-color: #2F9B8C;
    color: #fff;
    transform: scale(1.02);
}

/* ============================================================
   РАЗДЕЛИТЕЛЬ — три ряда рельефных косичек (как на фото)
   Каждый ряд: горизонтальная цепочка выпуклых петель
   Терракот / Бирюза / Золото — тиль 20×42px
   ============================================================ */
.braid-divider {
    width: 100%;
    height: 42px;
    overflow: hidden;
    position: relative;
    background: transparent;
}

.braid-divider__track {
    width: 100%;
    height: 42px;
    background-repeat: repeat-x;
    background-position: 0 center;
    background-size: 20px 42px;
    animation: braidDrift 8s linear infinite;
    /* Три ряда выпуклых петель:
       Ряд 1 (y 1-13): терракот #C26A4A — основной овал + блик сверху + тень снизу
       Ряд 2 (y 15-27): бирюза #2F9B8C
       Ряд 3 (y 29-41): золото  #C89040  */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='42'%3E%3C!-- Ряд 1: терракот --%3E%3Cellipse cx='10' cy='7' rx='9.5' ry='5.5' fill='%23C26A4A'/%3E%3Cellipse cx='8' cy='4.5' rx='5' ry='2.5' fill='%23E08868' opacity='0.55'/%3E%3Cellipse cx='12' cy='10' rx='4.5' ry='2' fill='%23702818' opacity='0.45'/%3E%3C!-- Ряд 2: бирюза --%3E%3Cellipse cx='10' cy='21' rx='9.5' ry='5.5' fill='%232F9B8C'/%3E%3Cellipse cx='8' cy='18.5' rx='5' ry='2.5' fill='%2355C0B0' opacity='0.55'/%3E%3Cellipse cx='12' cy='24' rx='4.5' ry='2' fill='%230D5A50' opacity='0.45'/%3E%3C!-- Ряд 3: золото --%3E%3Cellipse cx='10' cy='35' rx='9.5' ry='5.5' fill='%23C89040'/%3E%3Cellipse cx='8' cy='32.5' rx='5' ry='2.5' fill='%23E8B060' opacity='0.55'/%3E%3Cellipse cx='12' cy='38' rx='4.5' ry='2' fill='%23785010' opacity='0.45'/%3E%3C/svg%3E");
}

@keyframes braidDrift {
    from { background-position: 0 center; }
    to   { background-position: -60px center; }
}

/* Статичный вариант для тех, кто предпочитает без анимации */
@media (prefers-reduced-motion: reduce) {
    .braid-divider__track {
        animation: none;
    }
}

/* ============================================================
   DEMO-БЛОКИ — пустые примеры структуры страницы
   Показывают цвета, текстуры и типографику без контента
   ============================================================ */
.demo-layout {
    min-height: 100vh;
}

.demo-section {
    padding: 5rem 0;
    position: relative;
}

.demo-section--1 {
    background-color: #F0E4D6;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='ds1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='3' seed='18' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.28 0 0 0 0 0.16 0.14 0 0 0 -0.05'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23ds1)'/%3E%3C/svg%3E");
    background-size: 250px 250px;
}
.demo-section--2 {
    background-color: #EDE0D2;
}
.demo-section--3 {
    background-color: #E8D5C0;
}

.demo-block {
    background: rgba(252, 246, 240, 0.55);
    border: 1px solid rgba(74, 42, 30, 0.10);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.demo-block__title {
    color: #4A2A1E;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: .75rem;
}
.demo-block__text {
    color: #5E3A2C;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.demo-block__placeholder {
    height: 140px;
    border-radius: var(--radius);
    background: rgba(74, 42, 30, 0.06);
    border: 1.5px dashed rgba(74, 42, 30, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8A6050;
    font-size: .85rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ============================================================
   DEMO HERO — пустой hero-блок с цветовой схемой
   ============================================================ */
.demo-hero {
    min-height: 55vh;
    background-color: #F5EBE0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='hf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75 0.14' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.48 0 0 0 0 0.33 0 0 0 0 0.22 0.18 0 0 0 -0.07'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23hf)'/%3E%3C/svg%3E");
    background-size: 500px 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
}
.demo-hero__inner {
    text-align: center;
    max-width: 620px;
}
.demo-hero__eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #2F9B8C;
    margin-bottom: 1rem;
}
.demo-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    color: #4A2A1E;
    line-height: 1.15;
    margin-bottom: 1.2rem;
}
.demo-hero__subtitle {
    color: #5E3A2C;
    font-size: 1.1rem;
    line-height: 1.75;
    margin-bottom: 2rem;
    opacity: .85;
}
.demo-hero__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   FOOTER — в новой схеме
   ============================================================ */
.footer {
    background-color: #3A1E10;
}
.footer h4 {
    color: #E8D5C0;
}
.footer a,
.footer p {
    color: #C4A48A;
}
.footer a:hover {
    color: #C26A4A;
}
.footer__logo span {
    color: #C26A4A;
}
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.07);
}
.footer__bottom p {
    color: #8A6050;
}

/* ============================================================
   POST-FOOTER — обновление цвета
   ============================================================ */
.post-footer-block {
    background: linear-gradient(135deg, #F0E4D6, #E8D5C0);
    border-top: 3px solid rgba(194, 106, 74, 0.25);
}
.post-footer-block__text1 {
    color: #4A2A1E;
}
.post-footer-block__text2 {
    color: #5E3A2C;
}
.post-footer-block__btn {
    background: #2F9B8C;
    border-color: #2F9B8C;
}
.post-footer-block__btn:hover {
    background: #1D7B6E;
    border-color: #1D7B6E;
}

/* ============================================================
   ПЛАВАЮЩИЕ КНОПКИ СОЦСЕТЕЙ
   ============================================================ */
.float-social__btn--vk  { background: #4A2A1E; }
.float-social__btn--tg  { background: #2F9B8C; }
.float-social__btn--vk:hover { background: #C26A4A; }
.float-social__btn--tg:hover { background: #1D7B6E; }

/* ============================================================
   УТИЛИТЫ — новые акцентные цвета
   ============================================================ */
.text-accent  { color: #C26A4A; }
.text-teal    { color: #2F9B8C; }
.text-heading { color: #4A2A1E; }

.section__title::after {
    background: #C26A4A;
}
.section-divider {
    background: #C26A4A;
}

/* Форм-инпуты в новой схеме */
.form-input:focus {
    border-color: #2F9B8C;
}

/* Карточки — лёгкий тёплый фон */
.artwork-card {
    background: #FAF3ED;
}